Ответьте на 3 простых вопроса и мы подскажем что вам нужно!

1

У ВАС УЖЕ ЕСТЬ
ГОТОВЫЙ САЙТ?

2

ЗНАЕТЕ ЛИ ВЫ ЧТО ТАКОЕ
ЮЗАБИЛИТИ?

Экспертная оценка сайта и его юзабилити: улучшаем форму входа на сайт

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

Дайте возможность войти на сайт с помощью электронной почты

Электронная почта используется постоянно и все посетитель помнят свой ящик наизусть. Поэтому использовать в качестве логина адрес E-mail гораздо проще и логичнее чем сложную комбинацию букв и цифр. Использование уникальных имен/логинов тоже возможно, но предоставить несколько способов входа на сайт значительно улучшит его юзабилити.

Используем в качестве логина адрес E-mail

Авторизируйте посетителя без перезагрузки страницы

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

Выпадающая форма не займет много места на экране и не уводит посетителя с текущей страницы. Быстрый и легкий способ авторизации подходящий для любого сайта. Смотрим пример:

Выпадающая форма авторизации

Модальное окно также не приводит к перезагрузке страницы и концентрирует на себе все внимание пользователя. Обычно выводится по центру и может содержать дополнительную информацию или дополнительные поля. Пример модального окна:

Пример модального окна

Курсор по умолчанию должен находиться в первом поле формы.

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

Подсветка поля ввода

Дайте возможность посетителям проверить введенный пароль

Эта возможность улучшает форму авторизации, так же как форму регистрации. Если символы в поле пароля не видны, посетитель может легко ошибиться особенно в случае сложных паролей. Затем следует еще одна попытка ввода пароля и т.д. установите чекбокс «показ пароля» и проблема будет решена. Смотрим пример:

Чекбокс «показ пароля»

Пользуйтесь иконкой с вопросом для функции восстановления пароля

Функция восстановления пароля должна быть четко видна на форме авторизации. Вместо стандартной фразы «Забыли пароль?» для ссылки будет достаточно небольшой иконки с вопросом. Такая ссылка хорошо видна и не занимает много места. Знак вопроса как переход к решению проблем, логичен и понятен всем посетителям, отлично вписывается в любой дизайн

Иконка с вопросом

Кнопка «Подтвердить» должна быть той же ширины, что и остальные поля ввода.

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

Большие кнопки подтверждения придает уверенность в дальнейшем действии и четко видны на любой странице. Текст на кнопке также становится больше и заметнее. Пример правильно сделанной кнопки:

Пример правильно сделанной кнопки

Варианты входа на сайт через сторонние сервисы авторизации

Обычно подключаются популярные социальные сети или сервис OpenID. Социальные аккаунты есть почти у всех и возможность мгновенно войти на сайт без запоминания сложных паролей, заполнения формы входа или вообще без предварительной регистрации будет далеко не лишней. При разработке web интерфейса не стоит  ограничиваться только Facebook или «ВКонтакте», такие сети как Google+ тоже достаточно популярны, особенно среди зарубежных пользователей, поэтому не забывайте и о них.

Cторонние сервисы авторизации

Можно развить эту идею дальше и подключить Facebook Connect для автоматического сбора и хранения пользовательской информации. В качестве примера можно привести приложение для Facebook Friend.ly. на этом сайте для регистрации нового пользователя достаточно только нажать на кнопку «Register» и данные будут собраны автоматически. Такой сбор персональных данных вызывает много вопросов по сохранению приватности, и использовать такой слишком простой способ авторизации на сайте, пожалуй, не стоит.

Экспертная оценка сайта

Итог

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

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

Читайте так-же:

План тестирования юзабилити веб-фильтров

Улучшаем юзабилити сайта через формы регистрации

Юзабилити блога: практические советы для профи и любителей