Интерфейс сайта: из каких элементов складывается удобство

Интерфейс сайта — всё, через что человек с ним взаимодействует: меню, кнопки, ссылки, формы, сообщения и подсказки. Удобство интерфейса складывается из пяти вещей: насколько легко разобраться с первого раза, быстро ли выполнять задачи, легко ли вспомнить сайт при возвращении, сколько ошибок человек допускает и приятно ли всем этим пользоваться. Проверяют его по десяти эвристикам Нильсена и на живых людях.

Что такое интерфейс сайта

Интерфейс сайта — точка встречи человека и системы: всё, что посетитель видит, нажимает, заполняет и читает, чтобы получить нужное. Меню, поиск, кнопки, ссылки, формы, фильтры, всплывающие окна, сообщения об ошибках и об успешной отправке — всё это части интерфейса.

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

Посетитель не оценивает интерфейс словами «удобный» или «неудобный». Он просто находит нужное или уходит. NN/g формулирует это жёстко: если сайтом трудно пользоваться, люди уходят. Руководства к сайту никто не читает: соседний сайт в поиске всегда на расстоянии одного нажатия.

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

Из чего складывается удобство: пять составляющих

Nielsen Norman Group определяет юзабилити, то есть удобство интерфейса, через пять составляющих качества. Каждую можно проверить отдельно, и вместе они отвечают на вопрос «удобен ли сайт».

• Обучаемость — насколько легко выполнить базовые задачи, впервые оказавшись на сайте. Найти телефон, понять, чем занимается компания, оставить заявку.
• Эффективность — как быстро человек выполняет задачи, когда уже разобрался. Важно для сайтов, куда возвращаются: магазинов, кабинетов, сервисов.
• Запоминаемость — легко ли вспомнить, как всё устроено, после перерыва. Если каждый визит приходится разбираться заново, интерфейс не запоминается.
• Ошибки — сколько ошибок совершает человек, насколько они серьёзны и легко ли их исправить.
• Удовлетворённость — насколько приятно пользоваться сайтом.

NN/g добавляет к этим пяти полезность: делает ли сайт то, что нужно человеку. Удобный каталог без нужного товара бесполезен, а нужный товар в неудобном каталоге никто не найдёт. Удобство и полезность работают только вместе.

Факт. NN/g описывает юзабилити пятью составляющими: обучаемость, эффективность, запоминаемость, ошибки и удовлетворённость.

Десять эвристик Нильсена: чек-лист удобного интерфейса

Эвристики Якоба Нильсена — десять общих правил проектирования интерфейсов. NN/g называет их эвристиками потому, что это широкие практические правила, а не конкретные указания. Сами правила, по словам Нильсена, не менялись с 1994 года и подходят для сайта так же, как для приложения.

Эвристики удобны тем, что не требуют исследования: по ним можно пройти любую страницу и найти очевидные проблемы. Глубину они не заменяют — это первый фильтр, а не окончательная оценка.

Понимает ли человек, где он на сайте и куда идти?

Навигация отвечает на три вопроса посетителя: где я, что здесь есть и как попасть туда, куда нужно. Если хотя бы на один нет ответа, человек начинает блуждать.

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

Шестая эвристика — узнавание вместо припоминания. NN/g советует снижать нагрузку на память, делая элементы, действия и варианты видимыми. Меню, спрятанное за значком на компьютере, заставляет помнить, что там лежит. Видимые пункты меню показывают структуру сайта сразу.

Названия разделов пишут словами посетителя. Вторая эвристика требует, чтобы интерфейс говорил на языке пользователя. «Решения» и «Компетенции» ничего не говорят человеку, который ищет «Цены» и «Доставку».

Кнопки и ссылки: видно ли, что нажимается

Человек должен понимать, что нажимается, ещё до нажатия. Якоб Нильсен сформулировал это так: жизнь слишком коротка, чтобы нажимать на то, чего не понимаешь. Если кликабельное приходится искать, водя курсором по экрану, посетитель быстро сдаётся.

У кнопки должна быть форма кнопки: контрастный фон или рамка, подпись действием, достаточный размер для пальца на телефоне. Ссылка в тексте выделяется цветом, а часто и подчёркиванием. NN/g предупреждает и об обратной ошибке: некликабельный текст не должен быть того же цвета, что ссылки, иначе человек нажимает на заголовок и ничего не происходит.

Подпись кнопки описывает результат. «Рассчитать стоимость» и «Записаться на приём» понятнее, чем «Далее» и «Подробнее». Главное действие на экране одно и выделено сильнее остальных: когда все кнопки одинаково яркие, ни одна не выглядит главной.

Почему привычные решения удобнее оригинальных?

Потому что посетитель приходит на ваш сайт с опытом сотен других. Четвёртая эвристика ссылается на закон Якоба: большую часть времени люди проводят в чужих продуктах, и именно они формируют ожидания. Логотип ведёт на главную, корзина справа вверху, телефон в шапке — так устроено большинство сайтов, и человек ищет эти элементы там же.

Оригинальное решение заставляет учиться заново. Меню в нестандартном месте, иконки без подписей, прокрутка вбок вместо вниз — каждое такое решение добавляет посетителю работы, и не каждый готов её делать ради чужого сайта.

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

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

Как интерфейс помогает избежать ошибок и исправить их

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

Предотвращение — это ограничения и подсказки. Дата выбирается из календаря, где прошедшие дни недоступны. Количество товара меняется кнопками, а не вводом с клавиатуры. Перед удалением корзины сайт переспрашивает. Третья эвристика добавляет: пользователи часто совершают действия по ошибке, поэтому из любого действия нужен понятный выход — отмена, кнопка «Назад», крестик у всплывающего окна.

Когда ошибка случилась, сообщение о ней пишут по девятой эвристике: простым языком, без кодов ошибок, с точным указанием проблемы и предложением решения. «Ошибка 422» не помогает никому. «Такой почты не существует — проверьте, нет ли опечатки» помогает исправить сразу.

Сколько всего должно быть на экране?

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

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

Минимализм в смысле эвристики — не плоский дизайн и не пустота. Это отбор: что нужно посетителю на этой странице в первую очередь, что во вторую, а что можно убрать. Проверить отбор просто: взгляните на страницу мельком, отвернитесь и назовите, что запомнилось. Если запомнился баннер акции, а не то, чем вы занимаетесь, иерархия перевёрнута.

Доступность: удобно ли тем, кто видит и действует иначе

Доступный интерфейс работает для людей с нарушениями зрения и моторики, а заодно для всех, кто читает с телефона на солнце или держит его одной рукой. В России требования к доступности веб-контента собраны в ГОСТ Р 52872-2019.

Три требования стандарта проверяются без специальных знаний:

• Контраст текста — обычный текст должен иметь коэффициент контрастности с фоном не менее 4,5:1. Светло-серый текст на белом фоне часто этого не выдерживает.
• Управление с клавиатуры — всей функциональностью сайта можно пользоваться без мыши, только клавиатурой.
• Видимый фокус — при управлении с клавиатуры видно, на каком элементе вы сейчас находитесь.

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

Как проверить интерфейс своего сайта

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

Подробная методика с перечнем проверок разобрана в статье юзабилити-аудит сайта: пошаговая методология. Чем интерфейс отличается от визуального оформления и почему оба влияют на покупку, объясняет статья UX и UI-дизайн: разница, которая решает.

Если проверка показала, что проблем больше, чем можно исправить точечно, интерфейс стоит проектировать заново, начиная с задач посетителя. Мы закладываем эти правила с первого прототипа, когда делаем корпоративный сайт или лендинг. Оставьте заявку, и мы разберём интерфейс вашего сайта по главным задачам посетителей.

Источники

• Usability 101: Introduction to Usability — Nielsen Norman Group
• 10 Usability Heuristics for User Interface Design — Nielsen Norman Group
• Beyond Blue Links: Making Clickable Elements Recognizable — Nielsen Norman Group
• ГОСТ Р 52872-2019 «Интернет-ресурсы и другая информация, представленная в электронно-цифровой форме. Приложения для стационарных и мобильных устройств, иные пользовательские интерфейсы. Требования доступности для людей с инвалидностью и других лиц с ограничениями жизнедеятельности» — Росстандарт