Дизайн и юзабилити: 3 рекомендации
Юзабилити - это не только навигация. Рассказываем, как через оптимизацию дизайна повысить удобство сайта для пользователя.»
Друзья!
Чем для сайта является дизайн? Чем то эстетически ценным для пользователя? Вряд ли. Чем то красивым и запоминающимся, отличным от сотен остальных? Возможно, но в этом и его главная функция?
На самом деле, отличительной чертой хорошего дизайна становится его способность показать пользователю искомую информацию, доступные функции и использовать сайт по прямому назначению без каких либо дополнительных объяснений.
Нам такие попадаются редко.
Чтобы понять, какой дизайн нужен сайту, надо ответить на простой вопрос: зачем пользователи приходят на сайт?
За информацией. Никто не приходит на сайт полюбоваться красивыми картинками, оформлением страниц и простотой навигации. Пользователям нужна информация в зависимости от типа поставленного запроса либо намерения.
Хороший дизайн способствует нахождению и потреблению искомой информации.
Далее расскажем о трех фишках дизайна, которые упрощают основную задачу пользователей.
#1. Подписи к иконкам
Иконки – традиционные графические элементы, обозначающие опции управления сайтом. Иконки могут по максимуму упростить задачу пользователя, а могут сбить с толку и усложнить выполнение простейших задач.
Использование нестандартных иконок усложняет понимание обычных функций сайта, а так, пользователь тратит больше времени на поиск необходимых функций и изучение, как работает сайт, чем собственно на удовлетворение базового интереса.
Если в дизайне сайта используются нетипичные иконки, то юзабилити-хаком становятся подписи – названия функций, обозначаемых иконкой, как это делает Bing:
#2. Последовательность в дизайне
Последовательность в проектировании сайта определяет юзабилити. Для определения интерактивных элементов дизайн использует различные стили и эффекты.
Так, тени часто используются для обозначения кнопок – так пользователь понимает, что кнопка кликабельна. Ссылки часто выделяют цветом и жирным или подчеркиванием – так пользователь понимает, что данный элемент текста кликабельный.
Одним из ярчайших примеров четкого дизайна становится Medium, где от страницы к странице соблюдены внутренние правила оформления интерактивных элементов: заголовки, ссылки, цитаты, страницы брендов и авторов.
Здесь все последовательно, логично и просто. Новому пользователю достаточно взглянуть на сайт, чтобы сразу понять, как использовать основные функции и приступить потреблению нужной информации.
#3. Визуальная иерархия
О важности визуальной иерархии говорят все оптимизаторы. Простой тест покажет базовый принцип визуализации важных элементов. Расставьте круги в порядке убывания значимости:
Вы четко определили, что синий круг на картинке самый значимый, затем идет зеленый, желтый и оранжевый займет самое последнее место.
Так и в дизайне. Проведите короткий тест любой страницы сайта:
Шаг #1. Тщательно изучите страницу. Определите наиболее важные элементы. Мысленно пронумеруйте их в порядке значимости.
Шаг #2. А теперь посмотрите как бы сквозь страницу. Либо просто окиньте ее беглым взглядом. А для чистоты эксперимента откройте подобную другую страницу сайта и просто бегло взгляните на нее.
Какие элементы вы заметили при беглом просмотре? Совпадают ли они с теми важными элементами, которые вы выделили при тщательном рассмотрении страницы?
Если элементы, которые запоминаются при беглом просмотре, совпадают с наиболее значимыми элементами страницы, тогда все в порядке.
Если же тест показывает, что при беглом просмотре (а именно так часто пользователи изучают страницы сайтов) взгляд «выдергивает» из дизайна абсолютно неважную информацию, то страница требует редизайна. Потому как именно по этим «обрывкам» информации пользователь составит впечатление о значимости, ценности страницы.
Читайте также интересные материалы в блоге:
- Юзабилити иконок на сайте
- Как увеличить конверсию, повысив внимание пользователей
- Как повысить эффективность иконок на сайте
- 11 принципов, эффективно повышающих конверсию
- Визуальные ориентиры: что лучше управляет вниманием пользователей
Рассылка создана по материалам SEJ
Статьи по теме
