Не заставляйте меня думать
Веб-юзабилити и здравый смысл
Веб-юзабилити и здравый смысл
Если вы не можете сделать страницу самоочевидной, по крайней мере, сделайте её самопоясняющей.
Интуитивный дизайн — ключ к успеху. Пользователи не должны разбираться, как работает ваш сайт. Каждый элемент, от навигации до контента, должен быть сразу понятен. Когда пользователи сталкиваются с чем-то неясным, это создает когнитивное трение, замедляя их и потенциально отталкивая.
Самоочевидный vs. самопоясняющий. В идеале, ваш дизайн должен быть самоочевидным, не требующим размышлений для понимания. Если это невозможно, стремитесь к самопоясняющему, где пользователи могут быстро понять концепцию с минимальными усилиями. Это касается всего, от меток кнопок до общей структуры сайта.
Снижайте умственную нагрузку. Устраняйте вопросительные знаки в головах пользователей. Делайте выбор очевидным, используйте ясный язык и следуйте установленным веб-конвенциям. Чем меньше пользователи должны думать о том, как использовать ваш сайт, тем больше умственной энергии они могут посвятить вашему контенту или продуктам.
Мы не читаем страницы. Мы их сканируем.
Сканирование — это норма. Большинство пользователей не читают веб-страницы тщательно. Они быстро сканируют, ищут ключевые слова, фразы и визуальные подсказки, которые соответствуют их задаче или интересу. Это поведение обусловлено нехваткой времени, осознанием того, что не нужно читать всё, и многолетним опытом сбора информации "достаточно хорошего" уровня.
Дизайн для сканеров. Используйте техники, которые делают ваш контент легким для быстрого восприятия:
Выносите важную информацию на передний план. Размещайте самый важный контент в верхней части страницы и в начале абзацев. Используйте перевернутую пирамиду из журналистики: начните с вывода, затем предоставьте поддерживающие детали.
Конвенции — ваши друзья.
Визуальная иерархия направляет пользователей. Делайте важные элементы более заметными с помощью размера, цвета, расположения и пустого пространства. Визуально группируйте связанные элементы. Используйте вложенность, чтобы показать, что к чему относится. Четкая визуальная иерархия помогает пользователям понять вашу страницу с первого взгляда.
Используйте конвенции. Веб-конвенции развивались не просто так — они работают. Пользователи привыкли ожидать определенные элементы в определенных местах (например, логотип в верхнем левом углу, поиск в верхнем правом). Придерживайтесь этих конвенций, если у вас нет очень веской причины не делать этого.
Балансируйте инновации и знакомство. Хотя креативность ценна, не изобретайте велосипед для базовых функций. Знакомые шаблоны снижают когнитивную нагрузку. Если вы все же вводите новшества, убедитесь, что новый дизайн настолько интуитивен, что не требует обучения, или добавляет значительную ценность, чтобы оправдать небольшую кривую обучения.
В идеале, пользователи должны быть в состоянии сыграть версию старого шоу Дика Кларка "$25,000 Пирамида" с любой хорошо спроектированной веб-страницей.
Отдельные зоны помогают восприятию. Разделение вашей страницы на четко определенные области помогает пользователям быстро решить, на какие части сосредоточиться, а какие игнорировать. Это особенно важно, учитывая склонность пользователей сканировать, а не читать тщательно.
Делайте области мгновенно узнаваемыми. Пользователи должны быть в состоянии определить назначение каждой области с первого взгляда:
Используйте визуальный дизайн для усиления разделений. Применяйте такие техники, как пустое пространство, границы, цветовые фоны и единообразный стиль, чтобы разграничить разные области. Эта визуальная организация помогает пользователям строить ментальную модель структуры вашего сайта.
Поскольку большая часть того, что люди делают в Интернете, — это поиск следующего элемента для клика, важно сделать очевидным, что можно кликать, а что нет.
Четкие возможности взаимодействия снижают разочарование. Пользователи не должны гадать, с чем они могут взаимодействовать. Сделайте ссылки и кнопки заметными с помощью:
Избегайте ложных возможностей взаимодействия. Не делайте неинтерактивные элементы выглядящими кликабельными. Это создает путаницу и подрывает доверие к вашему интерфейсу.
Учитывайте мобильные взаимодействия. На сенсорных устройствах делайте цели для нажатия достаточно большими и расположенными на достаточном расстоянии друг от друга. Обеспечьте визуальную обратную связь для нажатий, чтобы подтвердить взаимодействие.
Уберите половину слов на каждой странице, затем уберите половину из оставшихся.
Фокусировка имеет решающее значение. Каждый ненужный элемент на странице конкурирует за внимание пользователя. Загроможденные дизайны затрудняют пользователям поиск нужного и понимание вашего сообщения.
Безжалостно редактируйте. Устраняйте:
Используйте пустое пространство. Не чувствуйте себя обязанным заполнять каждый пиксель. Пустое пространство помогает организовать контент, улучшает читаемость и дает важным элементам пространство для дыхания.
Приоритизируйте безжалостно. Для каждого элемента на странице спрашивайте: "Поддерживает ли это основную цель этой страницы?" Если нет, рассмотрите возможность его удаления или уменьшения его значимости.
Веб-навигация компенсирует отсутствие чувства места, воплощая иерархию сайта, создавая ощущение "там".
Четкая навигация имеет решающее значение. Хорошая навигация сообщает пользователям, что есть на сайте, как его использовать, и дает им уверенность в создателях сайта. Она должна быть последовательной на всем сайте и предоставлять контекст для того, где пользователь находится в структуре сайта.
Ключевые элементы навигации:
Делайте категории самоочевидными. Пользователи должны быть в состоянии предсказать, что они найдут в каждом разделе. Используйте четкие, описательные метки и избегайте умных названий, которые могут быть двусмысленными.
Домашняя страница должна удовлетворять всех, что похоже на утверждение "Здесь может припарковаться любой" о единственном парковочном месте.
Мгновенно сообщайте цель. В течение нескольких секунд новые посетители должны понять, о чем ваш сайт и что он им предлагает. Используйте четкий слоган и краткий пояснительный текст.
Демонстрируйте ключевые функции. Сделайте очевидным, как начать самые важные задачи на вашем сайте. Будь то поиск, создание аккаунта или просмотр продуктов, эти точки входа должны быть заметными.
Балансируйте конкурирующие потребности. Домашние страницы часто должны обслуживать несколько аудиторий и бизнес-целей. Приоритизируйте безжалостно и сосредоточьтесь на самых критических элементах. Сопротивляйтесь искушению продвигать всё.
Тестирование одного пользователя в начале проекта лучше, чем тестирование 50 в конце.
Регулярное тестирование бесценно. Даже небольшое, неформальное тестирование удобства использования может выявить серьезные проблемы. Стремитесь тестировать рано и часто в процессе разработки.
Делайте это просто:
Быстро реагируйте на инсайты. Цель — улучшить дизайн, а не создавать сложные отчеты. После каждого раунда тестирования определите самые критические проблемы и быстро внедрите исправления.
Сделать страницы самоочевидными — это как иметь хорошее освещение в магазине: это просто делает всё лучше.
Инклюзивный дизайн приносит пользу всем. Дизайн для доступности не только помогает пользователям с ограниченными возможностями, но часто улучшает удобство использования для всех пользователей. Это также становится все более важным для соблюдения законодательства и этических бизнес-практик.
Ключевые соображения по доступности:
Начните с основ. Даже небольшие улучшения в доступности могут иметь большое значение. Сосредоточьтесь на самых значительных изменениях в первую очередь, затем постепенно улучшайте доступность со временем.
"Счастливая болтовня" должна исчезнуть.
Краткость — ключ. У пользователей веба ограничено время и внимание. Убирайте ненужные слова, вводные тексты и маркетинговую речь. Переходите к сути быстро и ясно.
Делайте текст сканируемым:
Будьте объективны и прямолинейны. Избегайте шумихи и преувеличенных утверждений. Пользователи скептически относятся к маркетинговому языку и ценят ясную, фактическую информацию. Пусть ваши продукты или услуги говорят сами за себя.
Стив Круг — известный консультант по юзабилити и автор, наиболее известный своей книгой «Не заставляйте меня думать: здравый смысл в веб-юзабилити». С тиражом более 600 000 экземпляров, эта книга стала основой в области веб-дизайна. Экспертиза Круга основывается на более чем 20-летнем опыте консультирования различных известных клиентов, включая Apple и NPR. Он также написал «Ракетная хирургия для чайников», руководство по тестированию юзабилити. Консалтинговая фирма Круга, Advanced Common Sense, расположена в Честнат-Хилл, штат Массачусетс. В настоящее время он сосредоточен на написании, проведении семинаров по юзабилити и наслаждении старыми фильмами.
Комментарий эксперта
Основатель “Gamification Now!”
Занимается геймификацией с 2012 года.
Стив Круг, опираясь на опыт консультирования гигантов вроде Apple и NPR, создал не технический учебник, а инструкцию по снижению когнитивной нагрузки. Книга качественно раскрывает механику поведения пользователя: мы не читаем тексты, а сканируем их в поисках триггеров, и задача дизайнера — убрать любые ментальные препятствия на этом пути. Авторский подход «Advanced Common Sense» позволяет без сложной терминологии объяснить важность визуальной иерархии и предсказуемой навигации. Это база поведенческой психологии в вебе, которая объясняет, почему интерфейс должен быть прозрачным для восприятия, а не просто красивым. К несомненным плюсам отнесу легкий стиль и акцент на практическом применении: Круг буквально на пальцах объясняет, как проводить бюджетные юзабилити-тесты, не обладая ресурсами исследовательской лаборатории. Однако визуальная часть книги — её слабое место, примеры сайтов из 90-х и начала нулевых выглядят архаично и могут сбивать с толку новичков, привыкших к современным паттернам UI. Опытным специалистам контент может показаться слишком очевидным, ведь многие описанные принципы уже стали индустриальным стандартом. Но если отбросить устаревшие картинки, логика построения взаимодействия и требования к доступности остаются рабочим инструментом для зачистки интерфейса от мусора.