Гайдлайны UX для создания читаемого контента

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

Понятная иерархия информации

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

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

Что пользователь хочет увидеть в этот момент?

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

Покажите детали по запросу

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

Несколько способов сделать это:

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

Очевидная навигация

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

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

Сделайте действия очевидными

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

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

Предотвращение ошибок

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

Описывающий текст следует использовать не только для значков; он необходим для каждого элемента действия. Например, вместо всплывающего окна «Сохранить изменения? OK или Отмена», на кнопках лучше написать «Сохранить» и «Не сохранять», чтобы пользователь знал, что будет дальше.

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

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

По материалам theuxblog.com