7 раздражающих ошибок в интерфейсах сайтов

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

Отсутствие фокуса

Чтобы установить фокус в поле ввода, нужно написать всего одну строчку кода. Пользователь кликнул на иконке поиска — автоматически перемести курсор в поле ввода поискового запроса, что может быть проще?

Тем не менее большая часть веб-интерфейсов это правило игнорирует, и пользователям приходится делать лишний и раздражающий клик мышкой. Даже хорошие сайты, которые не забыли про этот вопрос, часто пропускают одно-два поля. Посмотрите на процесс покупки билета на OneTwoTrip. Всё идёт отлично до момента, когда надо ввести имя пассажира. Здесь фокус исчезает.

Неиспользуемое свободное пространство

Это очень популярная ошибка. Её допустили даже разработчики такого классного сервиса, как Google Inbox. Попробуйте создать новое письмо. Редактор для ввода текста имеет ограниченный размер, остальное пространство занято навигацией и списком писем, которые в этот момент совершенно не нужны. Это не так заметно на 11–13-дюймовом ноутбуке, но начинает раздражать, когда пользователь работает за большим экраном.

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

Неочевидная навигация

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

Правая кнопка мыши

Кажется, что это хорошая идея: повесить на правую кнопку мыши контекстное меню, чтобы интерфейс работал как в старых добрых десктопных приложениях. Особенно когда в сервисе много функций и нужно ко всем дать доступ пользователю. Даже разработчики Google Drive не выдержали и использовали это решение в своих приложениях.

На самом деле это неудачный вариант. Большая часть пользователей даже не подозревает о том, что под правой кнопкой находятся действия (мы столкнулись с этим, когда экспериментировали с интерфейсом «МоегоCклада»). Пользователи, которые нажали на правую кнопку, ожидают увидеть меню браузера со стандартными пунктами «Копировать», «Открыть в новой вкладке» и так далее.

Сломанная кнопка «Назад» и закладки

Поскольку наши пользователи работают в браузере, они ожидают, что привычные кнопки «Назад/Вперёд» и закладки будут работать везде. Если на экране показана выписка с моего банковского счёта, я хочу иметь возможность добавить эту страницу в избранное, чтобы посмотреть информацию позже. Возможность сделать это есть далеко не всегда.

Для ускорения отклика современные веб-приложения, как правило, реализованы в виде одной страницы. Браузерная навигация и закладки в них в них уже не работают без дополнительных усилий. Иногда разработчики ленятся и получается как в интернет-банке «ВТБ24», который всегда выбрасывает пользователя из сервиса, если он по привычке нажал кнопку «Назад».

Отсутствие общего подхода

Интерфейс должен быть консистентным. Это означает, во-первых, что аналогичные элементы интерфейса должны выглядеть и работать одинаково. Если где-то действие «Сохранить» оформлено как зелёная кнопка, а «Отменить» — как оранжевая ссылка, то везде подтверждение действия должно выглядеть как зелёная кнопка, а отмена — как оранжевая ссылка. Даже самые известные сервисы не всегда выдерживают общий стиль. Ещё не так давно название документа в Google Drive редактировалось во всплывающем окне, а название таблицы — прямо в заголовке документа (сейчас они уже привели редактирование к одному виду).

Во-вторых, интерфейс должен следовать сложившимся традициям: имя пользователя и кнопка «Выход» находятся справа вверху, где-то рядом с ними — кнопка «Помощь» и так далее. В интернете стандартом стал такой порядок кнопок: подтверждение — отмена действия. В новой версии Google Drive сделано наоборот: сначала идёт отмена, потом подтверждение, и это вызывает у пользователей секундный дискомфорт при каждом нажатии.

Слишком много кликов

Оценка качества интерфейса во многом субъективна. Но есть один показатель, который позволяет объективно сравнить два разных интерфейса и выбрать лучший. Это количество кликов, которое пользователь должен сделать, чтобы выполнить определённую задачу. Давайте сравним, сколько кликов понадобится в старом Gmail и новом Google Inbox, чтобы ответить на одно письмо и продолжить работу со списком писем? Три и два, потому что, отвечая на письмо в Google Inbox, мы не уходим из списка. В Gmail на возвращение в список писем нужен ещё один клик. Это значит, что эффективность интерфейса Google Inbox на треть выше. Аналогичный, но отрицательный пример. Одна из причин, по которой пользователи не полюбили новый интерфейс Evernote, — навигация по папкам и тегам стала в два раза дольше — два клика вместо одного. По абсолютно объективному критерию это не развитие, а деградация юзабилити.