TL;DR Don’t make me think

Обложка книги

Краткое изложение основных идей книги Don’t make me think (Не заставляйте меня думать) от Steve Krug. Книга рассказывает об азах юзабилити веб-сайтов. Сама книга мне понравилась, но это явно очень базовый уровень. Отлично подойдет тем, кто только начал разбираться в проблемах юзабилити. В этой статье я крайне сжато опишу основные моменты книги, которые посчитал для себя важными или полезными.


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

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

Не заставляйте меня думать

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

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

Если вы не можете сделать что-либо очевидным сделайте это самообъясняющим.

Как мы используем веб

Пользователи не читают сайт, они его “сканируют”, потому что:

  • Они ищут что-то конкретное
  • Они не хотят читать все
  • Это хорошо у них получается

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

  • Они обычно торопятся
  • Цена ошибки мала (неправильный клик — кнопка назад)
  • Часто сайты сконструированы плохо и детальный анализ не всегда даст верный результат
  • Угадывать веселее

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

Азы дизайна билбордов

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

Если вы делаете нечто инновационное, убедитесь, что оно очевидно и дайте возможность использовать продукт “старым” образом.

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

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

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

Форматируйте текст. Используйте достаточно заголовков. Делайте параграфы короткими (даже в одно предложение — ок). Используйте списки. Выделяйте ключевые моменты.

Съедобное, несъедобное

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

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

Если элемент сложно сделать очевидным, то можно добавить подсказку. Она должна быть

  • Короткой
  • Видима именно тогда, когда нужна
  • Пользователь не должен пропустить ее мимо

Избавьтесь от лишних слов

Старайтесь уменьшить количество текста. Это позволит

  • Уменьшить шум
  • Сделать основной контент более значимым
  • Сделает страницы короче

Вводные тексты и приветствия удалить совсем.

Уличные знаки и хлебные крошки

Основные принципы навигации.

Пользователь обычно ищет нечто конкретное.

Пользователь может пролистывать сайт (ходит по оффлайн магазину в поисках нужной секции) или использовать текстовый поиск (спросить продавца в магазине)

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

Проблемы браузинга в сравнении с поиском товара на полке магазина:

  • Нет понимания сколько еще осталось просмотреть
  • Нет понимания в какую сторону двигаться
  • Нет понимания где находишься

Навигация на сайте позволяет:

  • Понять где находишься
  • Понять как пользоваться сайтом (какие варианты существуют)

Общепринятые соглашения:

  • Навигация сверху — главные разделы
  • Слева сверху — лого и ссылка на главную
  • Справа сверху — утилиты (логин, язык, и другие)
  • Навигация справа — по категориям
  • Навигация внизу — основные ссылки
  • Навигация всегда на том же месте, кроме специальных страниц (корзина товара не нуждается в навигации по категориям товаров)

Поле поиска важно, должно быть очевидно: текст “Поиск” или иконка с лупой.

Каждая страница имеет заголовок. Заголовок в начале страницы. Заголовок должен отражать содержимое. Заголовок должен соответствовать смыслу ссылки, которая привела на страницу.

Навигация должна отражать текущее местоположение. Например, подсвечивать соответствующие пункты.

Хлебные крошки вверху страницы крайне полезны. Пользователь сразу понимает иерархию и текущую позицию.

Теория большого взрыва в веб-дизайне

Домашняя страница может содержать:

  • Айдентику сайта и миссию
  • Иерархию
  • Поиск
  • Рекламу товаров внутри
  • Подборки лучших, свежих и так далее
  • Рекламу внешних источников
  • Последние обновления
  • Выгодные сделки
  • Регистрацию

Проблемы:

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

Используйте таглайн (ясное описание в несколько слов). Приветствие. Ссылку или видео “узнать больше”, если сайт предлагает нечто нестандартное.

Разногласия в теме юзабилити

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

Доводы “всем нравится А” или “никто не любит Б” не работают.

Среднего пользователя не существует.

Лучший вариант закончить споры — тестирование.

Тестирование юзабилити

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

Простой вариант тестирования

  • Одно утро в месяц (например последний четверг)
  • До трех участников
  • Важнее провести тестирование, чем найти идеальных пользователей
  • Прямо в офисе
  • Занимает полдня
  • Результат: отчет в одну или две страницы
  • Команда разработки обсуждает проблемы после тестирования за ланчем
  • Нахождения небольшого количества наиболее важных проблем с целью пофиксить (в противоположность нахождению всех проблем)

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

  • Это достаточно просто и не отнимает много времени
  • Это дает хороший отчет
  • Вы всегда знаете когда тестирование
  • Коллеги охотнее будут учавствовать (если после принести пиццу)

Процесс тестирования

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

После тестирования:

  • Сделайте коллективный список
  • Выберите 10 основных проблем
  • Отсортируйте их
  • Отдельно держите список вещей, которые легко починить

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

Мобильники

Могут использоваться на ходу.

Пользователи хотят делать с помощью мобильников все. У некоторых — это единственное устройство.

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

Нет эффектов от наведения мыши. Элементы должны выглядеть явно.

Аккуратнее с плоским дизайном.

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

Тестирование проходит так же. Можно нацепить камеру прямо на телефон.

Юзабилити — это часть этикета

Пользователи приходят с разным уровнем доброжелательности.

Что уменьшает доброжелательность:

  • Спрятанная информация, которая нужна
  • Наказание за неправильные действия
  • Запрос информации в которой нет острой необходимости
  • Преграды на пути (показ банера)
  • Неготовность сайта

Что увеличивает доброжелательность:

  • Сделать очевидными вещи, за которыми пользователи приходят на сайт
  • Дать необходимую информацию сразу (например цену на комнату в отеле)
  • Уменьшить количество шагов
  • Ответить на часто возникающие вопросы
  • Удобные утилиты (хорошая страница для печати)
  • Легкость восстановления работы после ошибки
  • Извиниться, если все сломалось

Доступность

Нужна. Иногда сделать сложно.

Статья http://www.redish.net/images/stories/PDF/InteractionsPaperAuthorsVer.pdf

Книги: