Как определить активные элементы на веб-странице: советы от UX/UI-дизайнера


Вот пользователь открывает веб-страницу, вот она загрузилась

Страница состоит из элементов. И какой из них активный (сфокусированный) сразу после загрузки — решает внимательный UX-дизайнер.

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

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

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

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

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

Как спроектировать поведение активных элементов и передать эту информацию разработчикам?

UI-дизайнер покажет активное состояние для каждого элемента интерфейса в UI-ките.

А UX-дизайнер в функциональной спецификации (ФС) пропишет правило по умолчанию для большинства страниц (например, что активным должен быть заголовок первого уровня, либо логотип, если для конкретного раздела в ФС не указано иного). А для отдельных страниц может прописать дополнительное уточнение в тезисах.

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

В реальности же, если UX/UI-дизайнер просто хотя бы задался вопросом активных элементов, — это уже очень хорошо.


Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *