Правила usability в работе дизайнера

Подборка правил usability от Сергея Березуева — дизайн-директора и основателя продуктовой студии Inly.

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

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

В 90-х годах прошлого века Якоб Нильсен – доктор физических наук, основатель компании «Nielsen Norman Group» – сформулировал 10 правил юзабилити, назвав их эвристиками. Несмотря на то, что эти правила были придуманы несколько десятилетий назад, они остаются актуальными и по сей день. Наша команда, взяв за основу классические эвристики Нильсена, разработала свои. Мы верим, что дизайнеры смогут эффективно применять их в работе.

Итак, шесть золотых принципов usability от команды INLY:

• Принцип парадного входа
• Обнаруживаемость элементов
• Согласованность в стандартах
• Видимость состояния интерфейса
• Качество сценария
• Гибкость и эффективность использования

Первое правило 3-х секунд: соблюдаем принцип парадного входа.

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

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

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

Второе правило – «ценностное предложение»: создаем УТП, СТА, бенефиты.

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

Третье правило – «интеллектуальный выбор».

Представим ситуацию: дизайнер создает яркий красочный баннер с большой типографикой об акции на кроссовки и размещает его как акция на главной странице. Знакомо? При этом в каталоге имеется еще множество различных категорий товаров, о которых этот баннер никак не сообщает. Если человек заходит на сайт и ищет при этом дождевой плащ, это предложение о кроссовках никак ему не отзывается. Таким образом, первый экран должен предлагать пользователю интеллектуальный выбор, при котором можно увидеть различные категории с примерами скидок, сезонностью и т.д. (яркий пример – Aliexpress, Lamoda). С помощью принципа раскрытия, гибкой фильтрации товаров, критериев оценки поставщиков интеллектуальный выбор позволяет человеку обозначить для себя целевой вид продукта, который он ищет и за который он готов платить.

1. Правило 3-х секунд

Критерий: Где я нахожусь? Что я могу сделать? Куда могу попасть?

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

2. Ценностное предложение

Критерий: Визуализация продукта + УТП + СТА

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

3. Интеллектуальный выбор

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

Первое правило – «эстетичный и минималистичный дизайн».

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

Второе правило – «названия такие, как их ищет ЦА».

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

Третье правило – «визуализация продукта».

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

Четвертое правило – «доступность элементов».

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

1. Эстетический и минималистский дизайн

Критерий: Удаляем лишние элементы из интерфейса и фокусируемся на соотношении ценностного и эмоционального контента.

2. Названия такие, как их ищет ЦА

Критерий: В контенте сайта используются фразы и формулировки схожие с теми, что используют ЦА в повседневной жизни.

3. Визуализация продукта

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

4. Доступность элементов

Критерий: Учитываем ли мы при проектировании случаи с ограниченными возможностями, ситуативными и временными ограничениями?

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

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

Первое правило – «последовательность и нативность интерфейса».

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

Второе правило – «сервисные и скрытые элементы».

Позволяет экономить время и дизайнеру, и пользователю. Первому не нужно придумывать новые взаимодействия – достаточно посмотреть, как сделаны те или иные приложения, а второму нет необходимости «думать» над тем, как устроены те или иные функции. Например: пользователь уже давно знает, что для переключения на следующую историю в Tik-tok достаточно просто потянуть экран вниз или вверх. Тот же принцип сделан в Instagram. Этот скрытый элемент уже давно стал привычным, о нем не нужно говорить, так как все знают, как он устроен. Если дизайнер должен спроектировать приложение, похожее по функционалу на Tik-tok или Instagram, ему стоит посмотреть, как устроены скрытые элементы этих сервисов.

Третье правило – «семейная преемственность элементов».

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

Четвертое правило – «внутренняя согласованность элементов».

Правило относится к поддержанию согласованности внутри продукта или семейства продукта. Здесь важна атомарная система, при которой интерфейс не проектируется целиком, а собирается по деталям (или «атомам»): из кнопок, цветов, иконок, строк ввода, анимации и т.д. Так формируются модульные страницы и блоки, которые при необходимости легко корректируются: достаточно просто заменить, изменить или убрать какой-то элемент. Соблюдение дизайн-систем не только делает работу проще, но и отвечает ожиданиям целевой аудитории. Также такая система позволяет дублировать блоки или элементы на другие страницы – не нужно «изобретать велосипед».

1. Последовательность и нативность интерфейса.

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

2. Сервисные и скрытые элементы.

Критерий: Убедитесь, что скрытый сервисный паттерн работы интерфейса в этом месте интерфейса ожидается и понятно воспринимается вашей аудиторией.

3. Семейная преемственность элементов.

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

4. Внутренняя согласованность элементов

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

Первое правило – «отклик и принцип кликабельности».

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

Второе и третье правила («выбор» и «перманентная коммуникация») мы объединили, поскольку одно вытекает из другого.

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

1. Отклик и принцип кликабельности

Критерии: Все ли элементы едины в своем стремлении отработать принцип кликабельности? Понятно ли пользователю, что он совершил действие? Используется ли микроанимация?

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

2. Правило выбора

Критерий: Видно ли, с какой именно частью интерфейса в данный момент времени взаимодействует пользователь?

Пример: Если пользователь выбрал поле ввода в модальном окне, клик на Backspace очистит поле, а не закроет вкладку

3. Перманентная коммуникация

Критерий: Сообщает ли интерфейс о текущем статусе? Это помогает пользователю принять следующее решение?

Пример: Статус заказа, наличие товара, ошибка ввода.

Первое правило – «принцип раскрытия» – влияет на качество сценария.

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

Второе правило – «навигация».

Правило прежде всего строится на логике переходов. Например, «хлебные крошки» должны корректно перенаправлять пользователя («главная» должна отправлять на главную страницу, а не в корзину). Также стоит вспомнить о 3-х кликах: может ли пользователь дойти до нужного места в три действия? Всегда нужно учитывать и то, что человек может ошибочно совершить несколько лишних щелчков мышкой или нажатий пальцем – этот барьер не должен присутствовать в вашем интерфейсе. Кроме того, сайт необходимо адаптировать под разные пути достижения конечной цели – как бы пользователь ни шел к нужной информации, он должен до нее легко дойти.

Третье правило – «помощь и подсказки в контексте».

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

Четвертое правило – «справка и документация».

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

Пятое правило – «пользовательский контроль и свобода».

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

Шестое правило – «предотвращение ошибочных действий».

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

Седьмое правило – «сообщения об ошибках».

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

1. Принцип раскрытия

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

2. Навигация (логика переходов)

Критерий:

• Могу ли дойти до нужного места в 3 действия?
• Адаптирован ли сайт под разные пути и точки входа?
• Соответствует ли логика переходов здравому смыслу, потребностям и привычкам аудитории?

3. Помощь и подсказки в контексте

Критерий: Есть ли подсказка пользователю там, где ему необходимо вспомнить информацию.

Пример: Как восстановить пароль, где найти номер скидочной карты, какие товары уже просмотрены.

4. Справка и документация

Критерий:

• Легко ли найти справочную документацию?
• Указаны ли конкретные шаги, которые необходимо выполнить пользователю?

• Пользовательский контроль и свобода

5. Пользовательский контроль и свобода

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

6. Предотвращение ошибочных действий

Критерий: Используйте паттерны интерфейса, которые подсказывают пользователям, как они работают, поощряют пользователей перепроверять свои действия (особенно перед удалением) и предупреждают до совершения ошибок.

7. Сообщения об ошибках

Критерий: Понятно ли что делать дальше пользователю с этой ошибкой?

И последнее правило – «гибкость и эффективность».

На нем строится успех и востребованность сайта. Здесь важно предоставить пользователю несколько путей для совершения одного и того же действия. Например, чтобы продублировать какой-то элемент в Figma, вы можете нажать правую кнопку мыши и выбрать «Copy», а затем «Paste here», либо вы можете совершить действие с помощью ускорителей: использовать сочетание клавиш Ctrl + C и Ctrl + V. Одно и то же действие разными путями. Такой подход позволяет человеку выбрать тот метод действий, который кажется ему максимально удобным.

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

Usability – это основа основ, без которой интерфейс не может быть продуктивным. Если сайт сложен для восприятия и пользователь быстро не может найти подходящую информацию, он уйдет. Если принципы парадного входа нарушены, элементы сложно обнаружить, согласованность в стандартах хромает, состояния интерфейса плохо просматриваются, качество сценария находится не на высшем уровне, гибкость не такая уж гибкая, а эффективность не особо эффективная – пользователь уйдет. Тенденция сегодняшнего дня очевидна: usability – наше все и касается далеко не только интерфейсов. Поэтому учимся, запоминаем – и применяем на практике. Удачи!

#usability #интерфейсы #uxui #вебдизайн