Перейти к основному содержимому

Основы UX

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

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

Что нужно понимать​

  • Что пользователь пытается сделать, а не что находится на экране
  • Что он знает в этот момент и что вы о нём предполагаете
  • Что происходит после каждого действия и как он об этом узнаёт
  • Как выглядит худший реалистичный случай, а не демонстрационный
  • Что здесь приходится запоминать или вводить заново

Ключевые темы​

Обратная связь​

  • На каждое действие — немедленный отклик
  • Загрузка как несколько разных задач: мгновенная, короткая, долгая, неизвестной длительности
  • Скелетоны против спиннеров — и когда не нужно ни то, ни другое
  • Оптимистичные обновления и честность, когда они не проходят
  • Ошибки, которые говорят, что случилось и что теперь делать

Состояния, которые никто не рисует​

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

Взаимодействие​

  • Размеры областей нажатия и зона досягаемости большого пальца на крупном телефоне
  • Необратимые действия: подтверждение или отмена — и почему отмена лучше
  • Формы: когда проверять ввод, где показывать ошибку, тип клавиатуры, автозаполнение
  • Навигация, совпадающая с тем, где пользователь себя считает

Слова​

  • Кнопки называют действие, а не «ОК»
  • Ошибки на языке пользователя, а не системы
  • Единая терминология по всему продукту
  • Текст, который переживает перевод и увеличенный шрифт

Как это оценить​

  • Смотреть, как кто-то пользуется приложением, и не помогать
  • Считать нажатия в самом частом сценарии
  • Места, где люди медлят, — это места, где интерфейс не сработал

Уровни​

УровеньКак это выглядит
JuniorТочно реализует макеты, добавляет состояния загрузки и ошибки, когда об этом напомнят.
MiddleЗакрывает все состояния без напоминаний, пишет понятные сообщения, замечает проблемы взаимодействия ещё в макете.
SeniorПринимает решения на уровне сценария, сокращает число шагов и обосновывает изменения так, что дизайнер соглашается.

Практика​

Для начала​

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

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

  • Посчитайте нажатия Посчитайте нажатия в самом частом сценарии вашего приложения и уберите одно.

Дальше​

  • Замените подтверждение отменой Возьмите необратимое действие, спрятанное за диалогом, и сделайте его отменяемым.

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

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

Проверьте себя​

  • Что ваше приложение показывает во время ожидания и как долго это остаётся приемлемым?
  • У какого из ваших экранов нет продуманного пустого состояния?
  • Что ваши сообщения об ошибках предлагают пользователю сделать?
  • Какое действие в приложении самое разрушительное и чем оно защищено?
  • Сколько нажатий занимает самый частый сценарий и можно ли меньше?
  • Когда вы в последний раз смотрели, как настоящий человек пользуется вашим приложением?

Материалы​

  • Nielsen Norman Group — библиотека исследований. Десять эвристик юзабилити и ограничения по времени отклика — те два материала, которые стоит знать каждому разработчику.
  • Refactoring UI — написано разработчиками для разработчиков и целиком состоит из конкретных решений, а не из принципов.
  • Material Design guidelines — объяснение, откуда берутся размеры областей нажатия, движение и обратная связь; полезно независимо от визуального стиля.
  • Apple Human Interface Guidelines — какие привычки iOS есть у ваших пользователей и с чем App Review сверяет интерфейсные решения.
  • Don't Make Me Think — Steve Krug. Короткая, старая и до сих пор самый быстрый способ выработать чутьё на то, что сбивает людей с толку.