5 главных принципов хорошего юзабилити сайта

Amazon.com является прекрасным примером удобного веб-сайта по многим причинам.

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

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

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

2. Понятность

Можно сказать, что суть юзабилити – понятность.

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

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

Четкий и удобный дизайн может быть достигнут благодаря следующим вещам:

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

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

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

Здесь нет отвлекающих факторов, что позволяет пользователям легко достигать тех целей, ради которых они зашли на сайт. Например, выбирая категорию «Mac» в верхней части навигации, вы получаете визуальный обзор различных доступных продуктов Mac. Кроме того, вы получаете суб-навигацию со списком всех сопутствующих товаров, относящихся к этой категории. Стерильный дизайн делает сайт таким же интуитивно-понятным в использовании, как и все другие продукты Apple.

3. Обучаемость

Обучаемость является еще одним важным аспектом юзабилити.

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

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

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

Хотя дизайн сайта Microsoft выглядит свежо и современно, макет остается классическим и соответствует тому, что большинство из нас знает о сайтах. В верхнем левом углу есть логотип, указывающий нам, на каком ресурсе мы находимся. Справа вверху есть кнопка поиска, которое позволяет нам искать на сайте любой случайный термин. Чуть ниже представлено верхнее навигационное меню с основными категориями сайта. Нажав на категорию, мы получаем раскрывающееся меню со всем контентом, доступным в этой категории.

Внизу есть раздел с социальными сетями и футер сайта, содержащий другие сайты Майкрософт и дополнительные ссылки.

Сайт понятен и прост в навигации. Знакомый макет помогает людям быстро найти то, что они ищут.

4. Достоверность

Доверие является ключевым аспектом любого веб-сайта.

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

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

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

Бренд L’ORÉAL отлично справляется с построением доверительного отношения со стороны посетителя.

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

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

Помимо исследований, бренд также демонстрирует отзывы экспертов и фотографии знаменитостей, таких как Джулия Робертс, чтобы убедить людей в качестве и популярности их продуктов. С L’ORÉAL очень легко связаться, что также повышает доверие к бренду. Связаться с ним можно не только через социальные сети – у них есть физический адрес и номер телефона.

5. Актуальность

И последнее, но не менее важное: релевантность способствует удобству использования веб-сайта.

Недостаточно, чтобы ваш сайт был понятным – ваш контент должен быть актуальным. Опять же, важно, чтобы вы знали своих пользователей и зачем они посещают ваш сайт.

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

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

Бренд предлагает спортивную одежду и экипировку для разных видов спорта. Когда вы заходите на их сайт, вы можете выбрать их в магазине «Мужчины», «Женщины» или «Дети». В каждой из этих вкладок есть выбор вида спорта. Вместо того, чтобы группировать людей только по возрасту или полу, Nike определяет своих посетителей как спортсменов в конкретной дисциплине.

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

Юзабилити – это тесты, тесты и ещё раз тесты

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

Перевод – crazyegg.com (англ.)

Предлагаем вам также ознакомиться с чек-листом по юзабилити сайта и другими статьями о разработке сайта:

Чек-лист по юзабилити сайта! Проверь себя!

Multisearch – умный поиск для сайта. Обзор (+промокод)

Техническая оптимизация сайта! ТЗ или основные требования к сайту!