Эволюция текстовых полей в Material Design

Пользователи не всегда это замечают, но Material Design постоянно развивается благодаря исследованиям. Недавно нас спросили, почему стиль текстовых полей изменился в 2017 году, и мы ухватились за эту возможность, чтобы рассказать о нашем исследовательском процессе. Эта история о том, как данные улучшили текстовые поля Google.

Почему текстовые поля нужно было исправить?

Текстовое поле — один из самых распространенных способов ввода и редактирования в формах и диалоговых окнах. Однако не всем пользователям было ясно, что они могут взаимодействовать с полем и нажимать на него. Некоторые люди не понимали, что строка под текстовым полем доступна, они путали линию с разделителем. Метку и ввод легко легко было принять за основной текст, особенно когда они находились рядом.

Целью Material Design было определить, как улучшить текстовое поле, сделать его удобным для восприятия и понятным. Мы хотели, чтобы пользователи могли быстро и без проблем заполнять формы. 

Исследования

Чтобы сделать текстовые поля удобнее, нашим исследователям и дизайнерам предстояло выяснить, какие изменения нужны. Для этого они провели два исследования с участием реальных пользователя в период с ноября 2016 года по февраль 2017.

Исследование №1: три теста, рейтинг предпочтений и 158 участников (+45 участников пилотного исследования)

Цель первого исследования была проста — сравнить дизайн исходного текстового поля с тремя альтернативными вариантами. Мы попросили пользователей кликать по простым, сложным и реалистичным формам, чтобы получить представление о стилях, которые работают лучше всего, а не найти единственное верное решение. 

Команда рассчитала, сколько времени потребовалось участникам, чтобы найти и кликнуть по соответствующему текстовому полю, для каждого варианта. Также мы рандомизировали порядок, в котором представляли пользователям текстовые поля, — это гарантировало, что они не смогут предсказать, где появятся альтернативные текстовые поля. 

В конце первого исследования участники распределили все варианты текстовых полей — от наименее визуально привлекательного к наиболее.

Исследование №2: два теста, рейтинг предпочтений, 400 участников

Если первое исследование было направлено на поиск направления, в сторону которого должен двигаться дизайн, то второе должно было определить, как именно должно выглядеть новое текстовое поле в Material Design. Для этого вместо отдельных прототипов мы решили создать инструмент, который позволил бы протестировать отдельные характеристики дизайна текстовых полей. С его помощью мы смогли найти баланс между дизайном текстового поля, местоположением текстовой метки-подсказки (плейсхолдера), контрастом и стилями границ. Всего мы рассмотрели 7 характеристик и более 140 текстовых полей, которые получились в результате сочетания этих характеристик.

После запланированных тестов участники описали стиль идеального текстового поля, для чего ответили на 20 вопросов.  

Чтобы определить, какие варианты текстового поля были наиболее эффективными, исследователь с командой дизайнеров сопоставили поведение пользователей с тремя факторами:

1. Идентификация: количество правильных и неправильных кликов.
2. Возможность поиска / возможность сканирования: время, которое потребовалось участнику, чтобы найти элемент и кликнуть по нему. 
3. Предпочтение: участники ранжировали каждый вариант текстового поля.

Время на выполнение задач не было ограничено, участники могли обратиться за помощью по email, если бы это понадобилось (никто этого не сделал). Команда собрала данные о том, что участники нажимали, с помощью тепловых карт.

Главные находки

По результатам двух исследований наибольшую ценность имеют эти элементы текстовых полей:

1. Закрытые текстовые поля прямоугольной формы работают лучше, чем поля в виде линии.
2. У текстовых полей должна быть полупрозрачная заливка и нижняя линия или прозрачная заливка и непрозрачная обводка.
3. Контраст линий или штрихов текстового поля должен составлять не менее 3:1 с фоном.
4. Текст метки должен находиться в пределах текстового поля.
5. У текстовых полей должны быть закругленные углы.

Выводы

Потребовалось около 600 участников, два дизайнера и один исследователь — и вот результат. Сегодня эти текстовые поля есть во всех наших продуктах: от страниц входа в аккаунт до форм Google. Подход, о котором вы только что прочитали, позволил сделать больше, чем просто решать проблемы по одной. Мы смогли протестировать целый ряд текстовых полей, определить конкретные характеристики дизайна и понять, хорошо или плохо они работают, и предоставить нашим дизайнерам не одно лучшее решение, но целый набор опций, каждая из которых может оказаться более красивой и полезной, чем оригинал.