В настоящее время Web динамически развивается. Существует множество студий, предлагающих свои услуги по созданию сайтов. Какие-либо нормы и стандарты еще не сформированы, поэтому разработчики руководствуются, прежде всего, собственными наработками и ориентируются на запад.

Были проведены различные исследования для выяснения факторов, влияющих на доверие людей к Web-сайту. Одним из интересных выводов этих исследований является тот, что пользователи на самом деле судят о сайте по своему дизайну. Простота и удобство использования влияют на то, как пользователи воспринимают сайт, наравне с цветом, типографикой, макетом, содержанием и другими факторами.

Расположение ярлыков полей форм

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

Сайт Tumblr имеет простую и элегантную форму регистрации, которая соответствует рекомендациям UX Matter.

Расположение ярлыков на левой стороне создает другую проблему: по какому краю их следует ровнять? Выравнивание по левому краю делает форму визуально удобной, но снижает их соответствие элементу формы. Наоборот, выровненная по правому краю форма приятна на вид, но визуально неудобна.

Использование подсказок

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

Goplan оформил подсказку в ярко-желтом блоке, напоминающем бумажный стикер. Яркий цвет не оставит блок не замеченным.

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

К примеру, Wishlistr.com указывает на своем сайте отличительные возможности поиска.

Элементы управления по требованию

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

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

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

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

Повторная отправка форм

Одна из проблем Web-приложений связана с возможностью повторной отправки форм. Некоторые пользователи привыкли открывать папки в файловом менеджере двойным щелчком и могут дважды кликнуть «Отправить». Другая часть пользователей повторно отправляют данные формы, если сервер не отвечает в течение нескольких секунд. Это приводит к дублированию данных. С этим можно бороться как на серверной, так и клиентской стороне приложения.

Один из вариантов реализации на JavaScript предлагает сделать кнопку неактивной по событию мыши onclick:

<input type="submit" value="Submit" onclick="this.disabled=true" />

Ширина поля ввода поискового запроса

Якоб Нильсен (Jacob Nielsen) провел исследование на тему количества символов в поисковых запросах, введенных в поля поиска на сайтах. Оказывается, поля ввода поискового запроса весьма короткие на достаточно большом количестве сайтов. Проблема заключается в том, что, несмотря на то, что можно писать достаточно длинный запрос, лишь малая его часть будет видна одновременно, что делает трудным его редактирование.

Исследование показало, что в среднем поля ввода поискового запроса имеют ширину в 18 символов. 27% поисковых запросов были слишком длинными и не поместились в них. Расширение поля до 27 символов позволит поместить в нем 90% поисковых запросов.

Поле ввода поискового запроса Google является достаточно широкой для длинных поисковых запросов.

Поле ввода поискового запроса Apple слишком короткое, запрос «Microsoft Office 2008» в нем не поместился.

В целом, лучше делать поля поискового запроса слишком длинными, чем слишком короткими. Это весьма простой совет, но, к сожалению, очень часто его игнорируют.

Формы для регистрации

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

Вы можете снизить этот барьер, максимально уменьшив количество полей в форме. Если система регистрации необходима лишь для идентификации пользователя (логин или адрес электронной почты, пароль), не спрашивайте дополнительные данные.

Форма регистрации ReadOz слишком длинная. Рассмотрев форму поближе, заметим, что половина полей опциональна. Если они не необязательны, то им не нужно там быть. Такая форма лишь спугнет пользователя. Лучше показать обязательные элементы формы, а дополнительные поля предложить заполнить позднее при необходимости.

Форма регистрации Tumblr очень удобна. Она содержит всего три поля (электронная почта, пароль и ссылку на ваш блог).

Страница регистрации The Basecamp содержит небольшой трюк. Здесь отсутствует навигация кроме ссылки на домашнюю страницу. Ничего не отвлекает пользователя от процесса регистрации.

Существует другой вариант – объединить формы авторизации и регистрации. Незарегистрированный пользователь вводит в форму логина данные, которые могут использоваться для регистрации.

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

Выбор языка

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

Такие ошибки можно встретить на сайте Mozilla и Twitter.

Вариантами решения могут быть дублирование списка языков в подвале, использование флагов стран, подписи на английском языке.

Заключение

Ошибки в формах пользовательских интерфейсов могут стоить компании миллионов долларов.
Об этом заявил вице-президент по глобальной аналитике Expedia Джо Мегибоу (Joe Megibow).

В ходе исследования Expedia выяснила, что многие пользователи, которые после заполнения формы заказа нажимают кнопку «Купить» не могут совершить покупку и уходят с сайта.
Оказалось, что после поля «Имя» в форме располагалось поле «Компания», и некоторые пользователи вводили туда название своего банка. Далее в поле «Адрес» они продолжали вводить не свои, а банковские параметры. Когда происходила авторизация, то банк запрещал транзакцию, так как введенный адрес не совпадал с адресом клиента. После того как было убрано поле «Компания», Expedia получила 12 миллионов долларов прибыли от транзакций, которые ранее отменялись банком.

Этот пример показывает важность правильной организации экранных форм. А также стоимость возможных ошибок и просчетов. Необходимость следования предложенных рекомендаций может привлечь посетителей и удержать их на сайте.

При подготовке этой статьи использовались иностранные источники. Это доказывает актуальность и важность проблемы правильной организации пользовательского интерфейса. А также недостаток русскоязычной литературы в рунете.

Источники

• http://www.smashingmagazine.com/2009/09/24/10-useful-usability-findings-and-guidelines/
• http://www.smashingmagazine.com/2009/02/18/9-common-usability-blunders/
• http://www.smashingmagazine.com/2009/01/19/12-useful-techniques-for-good-user-interface-design-in-web-applications/
• http://www.smashingmagazine.com/2009/01/12/10-useful-web-application-interface-techniques/
• http://habrahabr.ru/blogs/ui_design_and_usability/108800/
• http://habrahabr.ru/blogs/ui_design_and_usability/94223/
• http://www.silicon.com/management/sales-and-marketing/2010/11/01/expedia-on-how-one-extra-data-field-can-cost-12m-39746554/

Имя

Электронная почта

Сайт