Статьи

Форма UX: иногда даже Apple, Google и Amazon делают ошибки

Поскользнуться

Проектирование UX: Forms. Джессика Эндерс

Недавно вышла новая книга Джессики « Проектирование UX: веб-формы » (сентябрь 2016 года).

Вас когда-нибудь просили создать что-то «такое красивое, как Apple», «такое же простое, как Google» или «такое же популярное, как Amazon»? Успех громких имен технологий делает их привлекательными постами для клиентов – и во многих случаях вам будет полезно поучиться у них.

Но когда дело доходит до форм, даже цифровые гиганты иногда ошибаются.

Apple и доступность

Клиенты часто начинают со ссылки на Apple, поэтому давайте сделаем это тоже. Apple разрабатывает интерфейсы, которые являются минималистскими и современными, включая их формы. Пример показан на рисунке 1 .

Рисунок 1. Форма адреса доставки Apple

Рисунок 1. Форма адреса доставки Apple

Проблема в том, что иногда они слишком минималистичны.

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

Чтобы форма была доступна всем ее пользователям, она должна иметь достаточный контраст между цветами, особенно текстом и фоном. В Руководстве по доступности веб-контента версии 2.0 требуется как минимум коэффициент контрастности 4,5: 1. Соотношение между серыми метками и белым фоном чуть меньше 3: 1. Что еще хуже, соотношение между светлыми серыми рамками текстового поля и белым фоном составляет 1,5: 1.

Так что Apple не соответствует минимальному стандарту доступности для всех пользователей.

Рисунок 2: Контраст увеличен

Рисунок 2: Контраст увеличен

На рисунке 2 показан альтернативный дизайн для той же формы, с достаточными коэффициентами контрастности. Все еще минималистский, теперь намного более удобный.

Все цвета Google

Как и у Apple, у Google также есть небольшая проблема с цветом. На рисунке 3 показано, что красный используется для ошибок (см. День рождения в нижней части экрана), а также заголовок формы («Создать учетную запись Google» в верхней части экрана).

Рисунок 3: Создание учетной записи Google

Рисунок 3: Создание учетной записи Google

Другое необычное отличие – цвет фона за полями. На текстовых полях фон белый, хорошо контрастирующий с серым фоном формы. Тем не менее, выпадающие списки и форма имеют сохраненный цвет фона, что делает эти поля довольно трудно различимыми. Некоторые пользователи могут быть замедлены или смущены этим несоответствием.

На рисунке 3 также показано, что день рождения собирается тремя выпадающими списками: один за день, один за месяц и один за год. Такой подход может уменьшить – хотя и не устранить – ошибки. Но это означает больше работы для пользователя. По разным причинам лучше использовать три текстовых поля. Посмотрите, как это будет выглядеть на рисунке 4 .

Рисунок 4. Изменено создание учетной записи Google.

Рисунок 4. Изменено создание учетной записи Google.

Amazon берет на себя управление

Наконец, Амазонке, которая постоянно развивала свои формы на протяжении более двух десятилетий. Недавним изменением стала возможность показывать пароль в форме создания учетной записи (см. Рисунок 5 ). Разрешение снятия маски с паролей повышает удобство использования и уменьшает количество ошибок. При правильной реализации это также практически не влияет на безопасность – к сожалению, Amazon действительно не попал в цель .

Амазон раскрывает ваш пароль под полем маскированного пароля.

Рисунок 5: По умолчанию Amazon отображает ваш пароль в открытом виде под полем маскированного пароля.

В Amazon по умолчанию выбрана опция «показать пароль». Обычный пользователь сразу перейдет к заполнению полей сверху вниз, но его шокирует, когда он увидит свой пароль, показанный в открытом виде под маской ввода. К тому времени, кто-нибудь поблизости, возможно, видел это тоже.

Никто не любит неожиданное поведение, которое заставляет их чувствовать, что они не контролируют ситуацию. Еще один способ, которым Amazon отнимает у пользователя контроль, – это скрытие требований к паролю. Пользователь должен угадать и проверить потенциальные пароли, не зная, когда и как они собираются вызвать ошибку или преуспеть. Какая ужасная, но ненужная ситуация для пользователей!

Гораздо лучшим подходом было бы указать требования к паролям прямо в форме и оставить поле «показать пароль» по умолчанию не выбранным (см. Рисунок 6 ).

Рисунок 6: переосмысление создания учетной записи Amazon

Рисунок 6: переосмысление создания учетной записи Amazon

Эти формы дизайна и многое другое

Разработка UX Forms Обложка книги

Формы – это особый вид интерфейса. Они появляются везде, но о них так мало известно в открытом доступе. И у них есть элементы и взаимодействия, которые отличаются от всех других интерфейсов.

Действительно, вопросы, поднятые выше, являются лишь частью проблем, связанных с этими конкретными формами (метки-заполнители, кто-нибудь?). Кроме того, они также делают много хорошего. Хитрость в том, чтобы знать, что есть что.

Хорошая новость в том, что есть новая книга, чтобы помочь вам. Вам не нужно быть технологическим гигантом, чтобы получить правильные формы, просто возьмите себе копию « Разработка UX: Форм ». Каждый из вопросов, которые я поднял выше, освещен в книге – более подробно – плюс гораздо больше. Вы получите все ноу-хау, чтобы делать отличные формы, даже в одной команде.