Logo
  • Бренд
  • Визуальный язык
    • Основы визуального языка
    • Палитра
    • Типографика
    • Иконографика
    • Структура и сетка
    • Эффекты
    • Анимации
  • Компоненты
    • Токены
    • Компоненты
  • Редполитика
    • О редполитике
    • Пишем чисто
    • Пишем просто
    • Пишем компетентно
    • Пишем для человека
    • Интерфейсные тексты
    • Глоссарий
  • Документация
    • Usability
    • Доступность
  • Figma
    • Принципы
    • Начало работы
    • Команды и проекты
    • Инструменты
    • Процесс
    • Дизайн-ревью
  • Благодарности
Usability
Юзабилити помогает создавать привлекательные и удобные в использовании цифровые продукты. Для нас важен комплексный подход к удобству использования, основанный на принципах, наборах эвристик и гайдлайнов.
Что такое юзабилити?
Согласно Nielsen Norman Group, юзабилити (usability) — это качественный атрибут, определяющий, насколько легко использовать пользовательский интерфейс. Это понятие также относится к методам улучшения простоты использования в процессе проектирования.

Юзабилити не является единым свойством. Оно определяется пятью ключевыми компонентами качества:
Компонент
Описание
Эффективность
Как быстро пользователи могут выполнять задачи, после того как они изучили дизайн?
Обучаемость
Насколько легко пользователям выполнить базовые задачи при первом знакомстве с интерфейсом?
Запоминаемость
Если пользователь возвращается к дизайну спустя некоторое время, насколько легко ему восстановить навыки работы с ним?
Удовлетворенность
Насколько приятно пользоваться данным дизайном?
Ошибки
Сколько ошибок совершают пользователи, насколько они серьезны и насколько легко их исправить?
Чек-лист
Чек-лист — это ваш «щит» против субъективности. В дизайне легко увлечься красотой и забыть о том, будет ли это работать. Чек-лист на базе принципов NN/g помогает приземлить проект и проверить его на прочность.
Навигация и выбор
  • Каждый шаг напрямую способствует решению задачи пользователя
    Если шаг (кнопка, поле формы, экран, вопрос) не помогает.  пользователю прямо сейчас продвинуться к его главной цели (поделиться фото, отправить отчёт) — скорее всего он лишний.
  • Пользователь всегда понимает, где он находится и что сейчас происходит. 
    Навигация основана на привычных для пользователя паттернах. На странице есть заголовок, которые подсказывает пользователю где он находится. Есть индикация загрузки и выделение активных элементов.
  • Иерархия навигации глубиной не более 3–4 уровней. 
    Чем меньше уровней — тем проще ориентироваться. Любая «сущность» должна находиться не более чем в 4 кликах от главной страницы
  • Списки критически важных вариантов выбора (пункты меню, категории навигации) видны в одном представлении или ограничены до <10 пунктов. 
    Важные списки должны быть обозримыми. Если пунктов больше 10 — человек может пропустить нужное
  • Для сложной навигации предусмотрен легкий доступ к строке поиска. 
Элементы интерфейса
  • Иконки и обозначения легко узнаваемы и интуитивно понятные. 
    Если элемент сложно изобразить «очевидно», к нему можно добавить подпись
  • Взаимосвязанные элементы интерфейса визуально сгруппированы. 
    Отступы, рамки, фон или близкое расположение показывают, что элементы связаны или работают вместе
  • Отсутствует информационный и визуальный шум: нет элементов, которые не помогают пользователю в решении задачи и выполняют декоративную функцию (или их число сведено к минимуму)
Статус системы
  • Чётко показаны изменения, которые произошли после того, как пользователь что-то сделал в интерфейсе
    Пользователь получает немедленный и понятный визуальный сигнал в ответ на своё действие. Например, подтверждение или сообщение об ошибке
  • Обратная связь со стороны системы не вызывает раздражения 
    из-за частоты, объёма, внешнего вида
    Хорошая обратная связь уместная, короткая, спокойная
  • Для частых и незначительных действий ответ системы краткий, а для нечастых и серьёзных действий дано развёрнутое пояснение
Взаимодействие
  • Пользователь всегда контролирует систему: может прерывать, отменять, приостанавливать и продолжать взаимодействие
    Например, отмена применения фильтра в облачном редакторе
  • Действия обратимы: можно легко вернуться на шаг назад
    Кнопка «Назад», «Отмена» или возможность закрыть модальное окно.
  • Интерфейс поддерживает и подсказывает, но не заставляет пользователя поступать определенным образом без выбора
Обработка ошибок
  • Интерфейс предлагает простые, конструктивные и конкретные инструкции по исправлению ошибок
  • Сообщения об ошибках объясняют, как ее исправить
  • Поля форм проверяются на корректность ввода сразу
    Не ждем отправки формы для проверки полей
Обучение
  • Инструкции, тултипы, поп-апы и прочие инфосообщения системы ускоряют обучение пользователя
  • Пользователь может в любой момент обратиться к справке и документации, если у него возникнут вопросы или проблемы
Доступность
  • Контраст элементов соответствует принятым и стандартизированным параметрам доступности.
  • Все кликабельные элементы имеют размер не менее стандарта принятого гайдлайнами операционной системы.
  • Когнитивная нагрузка при чтении текстов и выполнении команд минимальна
Тексты
  • Нейминги и оформление текстов согласованы на всех страницах. Здесь поможет редполитика и глоссарии продуктов.
  • Текст на кнопке отвечает на вопрос «Что я сделаю?»
  • Брендовая лексика, внутренний язык и маркетинговый жаргон  используются с пояснениями и отсутствуют в навигации, меню и кнопках
  • Не используются канцелярский язык, клише (в один клик, перед глазами), излишние усиления (очень, очень-очень и т.д.). Отглагольных существительных — минимум, лучше — активные формы (подписать, а не подписание)
  • Любая коммуникация строится по принципу «человекоцентричности».
    То есть: говорим про человека и для него,
главное для человека выносим вперёд, думаем о болях и предлагаем конкретные решения, всегда подсвечиваем пользу и выход, даже в самых сложных ситуациях