Где и когда: ожидания пользователей
09 Июль 2010 | Разделы: Юзабилити, Дизайн
The Wheres and Whens of Users’ Expectations
Автор: Jared Spool
Источник: User Interface Engineering
Недавно дизайнер спросил нас, где на странице пользователи ожидают найти форму авторизации. Одни сайты размещают ее в левой колонке, другие в правой. Есть ли у нас исследование, которое может показать, что одна из позиций лучше, чем остальные?
С одной стороны, пользователи не свалились с луны – у них уже выработались определенные ожидания относительно того, где некоторые вещи должны появляться. Проектирование с учетом этих ожиданий снизит когнитивную нагрузку на пользователей и позволит сосредоточиться им на выполнении своих задач.
С другой стороны, не каждое решение, де-факто уже признанное стандартом, является оптимальным. Дизайнеры, как правило, отказываются от использования старых подходов, при наличии лучшей альтернативы. Некоторые даже ссылаются на совершенствование стандартов как на прогресс.
Таким образом, появляется противоречие: делать дизайн с учетом ожиданий пользователей или предложить пользователям улучшенный вариант использования, который может вступить в противоречие с их ожиданиями? Форма авторизации хорошее место для изучения того, какую роль может сыграть такое противоречие.
Расположение
В недавнем исследовании мы имели возможность получить из первых рук данные о том, как работают формы авторизации, расположенные в различных местах на странице.
Например, Hertz.com размещает форму авторизации в левой колонке, в то время как Marriott.com ставит ее в центре страницы. USAirways.com размещает форму авторизации в самом верху страницы.
Главная страница Hertz.com
Главная страница Marriott.com
Главная страница USAirways.com
Вариантов реализации формы входа существует не так много – имя пользователя или адрес электронной почты и пароль – или просто использование ссылки с надписью «Войти» или «Вход» («Log In» или «Sign In») с такой же формой на следующем экране. Orbitz.com разместил такую ссылку вверху страницы, Avis.com – в середине страницы, Westin.com – слева сверху.
Наблюдая за нашими пользователями, мы пришли к выводу, что ни расположение, ни реализация (форма или ссылка) не создают принципиальных различий. Любое расположение или реализация работали прекрасно – пользователям, которым нужно авторизоваться, необходимо было найти способ сделать это и по возможности избежать ошибок. Это хорошая новость для дизайнеров, поскольку оставляет им достаточную гибкость в работе.
Подача
Хотя расположение, как мы выяснили, не влияет на результат, остается открытым вопрос визуальной составляющей. У пользователей возникали проблемы с формами и ссылками, которые трудно было заметить на странице.
В недавнем интервью Билл Скотт, директор по проектированию пользовательских интерфейсов сайта по прокату фильмов Netflix, подтвердил наши наблюдения. Он рассказал о том, что клиенты Netflix, попавшие на страницу регистрации нового пользователя не могли найти ссылку «Вход для зарегистрированных пользователей», потому что она была слишком мала и смешивалась с другими элементами дизайна. Когда они внесли изменения в цвета, размеры и подачу ссылок, они увидели, что проблема практически исчезла.
Страница регистрации Netflix
Паттерн двух полей
Когда мы наблюдали за пользователями, оказалось, что они сначала ищут два текстовых поля одинакового размера. Они сканирую страницу глазами (часто одновременно с движением курсора) в поисках двух полей.
Если на сайте находились два текстовых поля, обычно в отдельном блоке, выделенном фоном или границей, то они быстро привлекали внимание пользователей. Пользователи сразу вводили логин в первое поле и пароль во второе.
Этот паттерн настолько сильный, что мы наблюдали его действие даже на тех сайтах, на которых он не применялся. Например, на сайте Etrade.com, онлайновой торговой системы, дизайном предусмотрены две пары полей одинакового размера. Одна – для авторизации, вторая – для поиска котировок акций.
Главная страница Etrade.com
Из-за сильного действия паттерна пользователи вводили свое имя и пароль в поля для поиска, игнорируя настоящие поля для авторизации. Как мы видим, дизайнеры должны быть осторожны при использовании пар одинаковых полей, чтобы пользователи не путали их с полями формы авторизации.
Паттерн ссылки «Войти»
Если пользователи не находят двух одинаковых полей, они начинают просматривать страницу в поисках ссылки «Войти» или «Вход» (мы не видели, чтобы кто-нибудь искал для этого кнопку).
Также показал работоспособность в нашем исследовании паттерн, состоящий в замене после авторизации ссылки «Вход» на имя пользователя (идентификатор, электронный адрес) и ссылку «Выход». Пользователи подтвердили, что понимают такую логику и видят, что система их опознала.
Также как и пара полей, ссылка «Войти» должна визуально отличаться от других ссылок, которые могут оказаться на странице. Техника визуального дизайна позволяет сделать ссылки «Зарегистрироваться» и «Войти» заметными, в то же время, не нарушая эстетику страницы.
Когда нужно входить в систему?
Несмотря на то, что мы не обнаружили заметных ожиданий пользователей относительно того, где должна быть форма авторизации, мы заметили, что у пользователей есть достаточно сильные ожидания того, когда она должна появиться.
На главной странице Hertz.com пользователям предлагается выбрать между формой авторизации и формой для ввода подробностей аренды. Многие из наших пользователей, оказавшихся на этом сайте полагали, что необходимо начать с ввода информации о полете, после чего им предложат выбрать автомобиль и ввести платежные данные.
К сожалению, такой подход не позволит им воспользоваться услугами Hertz. Как только они дойдут до второго шага, им придется вернуться назад, авторизоваться, после чего еще раз ввести данные рейса. На момент нашего исследования не было возможности авторизоваться поле начала процесса подбора, не потеряв введенных данных (в последствии Hertz.com изменили дизайн, так что эта проблема больше не возникает).
На Marriott.com пользователям не нужно входить в систему для начала поиска гостиницы. Они могут выбрать гостиницу и начать процесс бронирования. Как только станет необходимым войти в систему, они смогут это сделать без перезапуска процесса.
Хотя проектирование взаимодействия важно, это не умаляет роли визуального дизайна. Некоторые пользователи Marriott.com пропустили форму авторизации из-за ее слабой видимости в правой колонке.
Страница бронирования Marriott
Westin.com использует другой подход, разместив форму авторизации (и начала регистрации для новых пользователей) в центре страницы в качестве первого блока в форме. У пользователей не будет проблем с заметностью этих блоков.
Страница бронирования Westin
Ожидания, визуальный дизайн и проектирование взаимодействия
Визуальный дизайн позволяет сделать элементы заметными и позволяет пользователям находить их, когда они нужны. Проектирование взаимодействия позволяет встроить элементы в цепочку таким образом, чтобы пользователи получили к ним доступ тогда, когда им это нужно.
Комментарии