20+ принципов безупречного UX-дизайна для веб-сайтов

• Что такое хороший веб-сайт или мобильное приложение?
• Это что-то, что привлекает пользователей или помогает им выполнять работу - возможно, и то, и другое?
• Почему некоторые веб-сайты с на первый взгляд базовым дизайном пользовательского интерфейса (и бизнес-моделями) оказываются одними из самых успешных?

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

Принципы 5E юзабилити

Еще в 2001 году были определены правила юзабилити 5E, которые заключаются в следующем:

• Effective - эффективность. Насколько полно и точно выполнена работа или достигнуты цели
• Efficiency - производительность. Как быстро можно выполнить задачу или найти нужную информацию
• Engaging - вовлеченность. Насколько хорошо интерфейс вовлекает пользователя во взаимодействие и насколько приятно и приятно им пользоваться.
• Error tolerance - устойчивость к ошибкам. Насколько хорошо веб-сайт предотвращает ошибки или может помочь пользователю исправить ошибки.
• Ease of learning - легкость восприятия. Насколько хорошо веб-сайт помогает воспринимать информацию

Принципы UX веб-сайта

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

1. Ясный и минималистичный

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

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

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

2. Понятный и простой

Возможно, вы создаете сайт отеля и хотите увлечь публику. Можете ли вы использовать броские образы героев и сюжетные видеоролики? Безусловно. Но просто убедитесь, что пользователь может сразу найти то, что ему нужно, с большим четким призывом к действию, говорящим ЗАБРОНИРОВАТЬ.

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

3. Обучаемый интерфейс

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

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

4. Знать и придерживаться ментальных моделей пользователей

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

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

Ведь представление дизайнера или разработчика о том, как что-то работает, может отличаться от представления пользователей.

5. Согласованные элементы и язык

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

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

Принципы UX - примеры согласованных элементов и языка

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

3. Дизайн, который обучает быстрому пониманию

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

Эффективные потоки

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

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

«Ускорители»

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

Решением для этого является использование «ускорителей». Это любые элементы управления, которые помогают пользователям буквально ускорить процесс, обычно с помощью сочетаний клавиш. Всем известны универсальные ускорители «ctrl + c» и «ctrl + v». Если возможно, изучите другие инструменты, которые использует ваша пользовательская база.

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

6. Эффективный язык

Использование ясного и простого языка - важный принцип UX копирайтинга, который поможет вашим пользователям выполнять свои задачи быстрее. Это так просто, попробуйте использовать язык, ориентированный на шестиклассников.

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

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

Инструкции и сообщения об ошибках

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

Инструкция должна быть полезной и объяснять, в чем проблема. Например6

• «номер кредитной карты слишком длинный»,
• «номер кредитной карты недействителен»
• или «введите дату до 2015 года».

7. CTA (призывы к действию)

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

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

8. Полезная информационная архитектура

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

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

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

9. Релевантное содержание

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

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

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

В приведенном выше примере от Apple самые популярные продукты перечислены слева направо в качестве параметров навигации в меню, а вся домашняя страница посвящена их последним выпускам продуктов.

10. Устойчивые к ошибкам формы и навигация

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

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

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

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

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

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

11. Полезные 404 страницы.

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

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

Хороший пример - Github. На странице 404 у них есть панель поиска, форма входа и несколько вариантов навигации ниже, в дополнение к занимательному изображению героя (проверьте).

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

12. Всегда ясный статус атрибутов

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

Примеры

• Этот принцип UX видимости можно наблюдать, когда при наведении курсора на ссылки, и они автоматически подчеркиваются.
• Или когда при наведении курсора на кнопку, и они меняют цвет. Это демонстрирует, а) что кнопка доступна для нажатия, и б) показывает, какую кнопку пользователь собирается выбрать, когда они находятся в непосредственной близости с друг от друга.

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

13. Свобода пользователя

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

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

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

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

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

14. Расстановка приоритетов для контента

Расстановка приоритетов для контента - один из наиболее важных принципов UX дизайна для мобильных приложений из-за ограниченного пространства на экране.

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

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

• Основное внимание должно уделяться основным функциям,
• Каждая страница посвящена не более чем одной основной функции.

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

• предварительное исследование пользователей
• получение списка требований к продукту,
• разработку информационной архитектуры.

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

15. Внедрение

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

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

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

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

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

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

16. Элементы, удобные для сенсорного экрана.

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

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

Под элементами мы имеем в виду:

• кнопки,
• чек боксы,
• СТА (призывы к действию),
• ползунки,
• кнопки-переключатели,
• выпадающий селект (раскрывающийся список)
• элементы развертывания и минимизации для аккордеонов.

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

17. Разборчивый текст.

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

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

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

Для оптимальной читаемости мы рекомендуем использовать шрифты без засечек для основной части текста, включая инструкции, содержимое блога, сообщения, предупреждения и кнопки. Helvetica или Proxima Nova - одни из самых популярных шрифтов.

Для заголовков можно использовать шрифты с засечками, например Garamond или Times New Roman. Но желательно не использовать более двух семейств шрифтов, и эти семейства не должны сильно различаться.

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

18. Элементы управления удобные для руки

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

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

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

19. Минимизация ввода данных

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

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

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

20. Дизайн для мобильных пользователей

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

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

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

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

21. Безупречный многоканальный опыт

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

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

22. Тестирование на раннем этапе

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

Принципы UX - модерируемое пользовательское тестирование

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

В конце концов, все делается для пользователя,  поэтому желательно дать им возможность протестировать сайт как можно раньше, желательно на этапе прототипирования.

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

Последние мысли

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

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

15.05.2022