Что такое юзабилити и зачем оно нужно

Содержание
  1. Разработка улучшения юзабилити
  2. Шаг 2. Соберите фокус-группу
  3. Демонстрируйте изменения интерфейса, не вводя пользователя в замешательство
  4. Выделите элементы, из-за которых возникла ошибка
  5. Чек-лист по оценке юзабилити сайта
  6. Как улучшить юзабилити: структура
  7. Навигация и структура сайта
  8. Разбираемся в мотивах клиентов
  9. Сохраняйте информацию о предыдущих действиях пользователей
  10. Отмечайте, какие элементы пользователи уже просмотрели
  11. Когда необходимо работать над юзабилити?
  12. Примеры сайтов с хорошим юзабилити
  13. Создавайте красивые, визуально сбалансированные интерфейсы
  14. Используйте контрастирующие шрифты
  15. Шаг 4. Проверьте адаптивность
  16. Предлагайте несколько путей достижения одной и той же цели
  17. Предложите выполнять повторяющиеся функции с помощью клавиатуры
  18. Позвольте редактировать данные напрямую
  19. Как самостоятельно провести исследование юзабилити?
  20. Оптимизация юзабилити на практике
  21. Общие принципы юзабилити
  22. Сообщайте о текущем положении пользователя в интерфейсе
  23. Выделяйте текущий раздел в меню навигации

Разработка улучшения юзабилити

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

Тестирование проводится в три этапа:

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

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

Шаг 2. Соберите фокус-группу

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

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

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

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

Подходите к результатам фокус-группы объективно. Например, если один человек из ста не сразу заметил форму поиска, не стоит бросаться делать ее ярче. Но если 10% и более опрошенных раздражались из-за формы регистрации с множеством полей — попробуйте ее упростить.


Сложная captcha — элемент, на котором спотыкаются участники любой фокус-группыСкриншот: Skillbox Media

Демонстрируйте изменения интерфейса, не вводя пользователя в замешательство

Иногда интерфейс видоизменяется прямо на глазах у пользователя. Сделайте эти изменения заметными, но не вводящими в замешательство.

Выделите элементы, из-за которых возникла ошибка

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

Чек-лист по оценке юзабилити сайта

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

  • По главной странице видно, чему посвящен ресурс и какую информацию он может предоставить.
  • Контент грамотно структурирован. Посетителю понятно, где он находится в данный момент – активный пункт меню подсвечен или выделен каким-либо другим образом. Понятно, как вернуться на главную страницу или на шаг назад.
  • Каждая страница оформлена в одном стиле, имеет главный логотип. Взаимосвязанные элементы находятся рядом друг с другом (допустим, цена неотделима от товара).
  • Удобное поле поиска, наличие подсказок для новичков. Сама поисковая система охватывает весь сайт и правильно работает.
  • Текст лаконичен, понятен, SEO-оптимизирован. Оформление и стиль изложения одинаковы, а заголовки грамотно отражают суть раздела.
  • Внешний вид сайта должен быть адаптирован под различные устройства.
  • Кнопки выглядят кликабельными, курсор изменяется при наведении на них. Ссылки рабочие и удобные для нажатия.

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

Как улучшить юзабилити: структура

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

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

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

Хлебные крошки. Название
произошло от сказки «Гензель и Гретель»: дети, чтобы не заблудиться в
лесу, отмечали путь хлебными крошками. Так и с переходами по страницам:
на страничке должен отображаться путь к ней, то есть раздел и подраздел,
где она находится. Обычно это горизонтальная полоса в верхней части
интерфейса с текстом примерно такого содержания: «Главная – Название
раздела – Название подраздела – Имя страницы». Каждый из пунктов –
ссылка на указанный раздел. С помощью хлебных крошек упрощается
навигация.

Карта сайта. Речь не о sitemap.xml, которая
существует преимущественно для поисковиков. Речь о HTML-карте, по сути,
еще одной странице, на которой приведена структура сайта со ссылками на
каждый раздел и подраздел. Наличие такой карты позволяет пользователям
не запутаться, особенно если она понятная и продуманная.

Проработанное меню

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

Грамотная перелинковка

Наличие перелинковки поможет не только повысить позиции по определенным запросам, но и улучшить поведенческие факторы

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

«Хлебные крошки»

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

Карта сайта

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

Возможность быстро найти информацию

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

Разбираемся в мотивах клиентов

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

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

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

1. Пользовательские истории

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

Рассмотрим на примере Николая, который готовится купить офисную мебель

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

2. Концептуальные сценарии

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

3. Конкретные сценарии.

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

Затем обобщаем полученные знания и думаем над тем, что важно для каждой категории

4. Сценарии использования

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

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

Сохраняйте информацию о предыдущих действиях пользователей

Напоминайте пользователям о действиях, совершённых ими ранее в вашем интерфейсе.

Отмечайте, какие элементы пользователи уже просмотрели

Комментарий Проектората: здесь всё не так однозначно. Историю поисковых запросов иногда лучше не показывать в соответствии с политикой безопасности проекта. Не все посещённые ссылки следует выделять цветом. Чаще всего это нужно только в интерфейсах, где задача пользователя — последовательно просмотреть разные материалы под разными ссылками и не повториться. Не забывайте, что существует такой тип целевой аудитории, который пользуется семейным компьютером для просмотра одних и тех же ресурсов. Это, конечно, притянуто за уши, но хорошо иллюстрирует, что не стоит слепо следовать советам, приведённым выше.

Когда необходимо работать над юзабилити?

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

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

2. Также до начала работы советуем вам проанализировать дизайны сайтов ваших конкурентов — это поможет вам получить несколько бесплатных и полезных идей по внедрению каких-то новых фишек, которые положительно влияют на юзабилити и в то же время сохраняют ваш прежний функционал.

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

4. Сделайте несколько прототипов нового дизайна и протестируйте их.

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

6. Проверьте ваш лучший дизайн на качество юзабилити при помощи материалов и чек-листов от экспертов.

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

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

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

Примеры сайтов с хорошим юзабилити

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

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

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

Образовательный журнал Tilda Education содержит руководства, статьи, видеоуроки и курсы на такие темы как SEO, SMM, контент-маркетинг, дизайн сайтов и так далее. Чтобы пользователи не потерялись среди обучающих материалов и легко находили необходимые темы, на первом экране сайта есть строка поиска, которая позволяет всего за несколько секунд найти нужные ответы. У сайта Tilda Education легкая навигация, грамотно продуманный дизайн и структура.

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

Создавайте красивые, визуально сбалансированные интерфейсы

Интерфейсы более удобны, когда они приносят эстетическое удовольствие пользователю. Этот принцип называется эффектом эстетического юзабилити (Куросу и Кашимура, 1995,
http://dl.acm.org/citation.cfm?id=223680).

Используйте контрастирующие шрифты

Комментарий Проектората: эстетичность дизайна — понятие субъективное и требует проверки разных вариантов на разных аудиториях. На этапе проектирования такая проверка зачастую невозможна, поэтому не стоит придавать этому большое значение. Однако, также заметим, что, чем опытнее проектировщик, тем более эстетичными кажутся его прототипы окружающим, а это является дополнительным аргументом в пользу работы с конкретным исполнителем.

Шаг 4. Проверьте адаптивность

Проверьте, удобно ли просматривать страницу на мобильном устройстве. Введите нужную ссылку в сервисе «Проверка оптимизации на адаптивность» от Google и посмотрите результат.

Обратите внимание: это изучение на адаптивность конкретной страницы, а не сайта целиком. В первую очередь проверьте ссылки, на которых пользователям нужно или получить важную информацию, или как-то взаимодействовать с ресурсом, например, заполнить форму

Для этого введите URL страницы и ознакомьтесь с результатами ее анализа.


Google подскажет, что стоит исправить на сайтеСкриншот: сайт Search.Google / Skillbox Media

Предлагайте несколько путей достижения одной и той же цели

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

Предложите выполнять повторяющиеся
функции с помощью клавиатуры

Позвольте редактировать данные напрямую

 

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

Авторизация с использованием разных логинов — сложное и важное решение. Оно будет зависеть от системы управления сайтом, требований к безопасности, бизнес-требований к системе, а не от прихоти дизайнера

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

Как самостоятельно провести исследование юзабилити?

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

Что такое юзабилити аудит сайта? Это комплекс действий, направленный на поиск недоработок создателей ресурса.

Как провести исследование юзабилити сайта по всем правилам?

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

Оптимизация юзабилити на практике

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

Структура и навигация

Этой частью оптимизации лучше заниматься на этапе создания веб-ресурса. Если всё сделать правильно, то в будущем практически не придётся тратить время на правки — сайт будет развиваться логично и прогнозируемо

Для достижения цели нужно обратить внимание на следующие моменты

  1. Проработка главного меню. В идеале структура сайта должна позволять пользователю в 4—5 шагов «добираться» до любой страницы. Ссылки на важные страницы должны быть вынесены в шапку и футер для «сквозного» доступа.
  2. Правильная перелинковка. Внутренняя ссылочная структура помогает не только в ранжировании. С помощью грамотно расставленных ссылок обеспечивается более глубокое и продолжительное взаимодействие с сайтом.
  3. Наличие «хлебных крошек». Это дополнительный элемент навигации, которым привыкли пользоваться многие юзеры. Он помогает с первого взгляда понимать степень вложенности страницы. К примеру, с помощью «хлебных крошек» пользователь может быстро перейти из карточки товара в общий подраздел.
  4. Внутренний поиск. В заметной части любой страницы должно находиться окно, позволяющее быстро найти необходимую информацию.

Функциональные элементы

Оформление дизайна

Сегодня уже сформировался определённый тренд — это спокойные цветовые решения и минимализм. Не стоит увлекаться слишком яркими цветами и радикальными контрастами. Пришло время забыть про назойливые вплывающие окна. Цвета фона не должны мешать легко воспринимать контент.

Можно выделить следующие рекомендации по использованию заголовков и шрифтов:

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

При выборе цветовых решений стоит ориентироваться на следующие моменты:

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

Качественное наполнение страниц

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

При создании и публикации контента нужно обращать внимание на следующие моменты

  1. Грамотность и информационная ценность. Тексты нужно писать понятным для целевой аудитории языком. Следует отказаться от сложных и неоднозначных конструкций. Старые тексты нужно проверять на предмет их текущей актуальности. Конечно же, контент должен быть грамотным.
  2. Структура. Тексты необходимо разбивать логическими абзацами, заголовками и подзаголовками. Хорошо воспринимается информация в формате списков и сравнительных таблиц.
  3. Форматирование. Текстовые материалы желательно дополнять релевантными картинками, инфографикой и видеороликами. Важные моменты лучше выделять цветом. Слишком большие тексты стоит разбивать на части, объединяя их внутренними ссылками.

Увеличение скорости загрузки

Чтобы страницы открывались быстрее, необходимо выполнить следующие действия:

  • оптимизируйте графические элементы;
  • выберите хостинг с запасом производительности;
  • удалите лишние Java-скрипты;
  • проверьте корректность редиректов и переадресаций.

Оценить результат проделанной работы можно с помощью сервиса Google Page Insights.

Оптимизация страницы 404

С помощью сервиса Яндекс.Вебмастер можно найти несуществующие адреса. Если полностью избавиться от них нельзя, то нужно сделать следующее:

  • внедрить поиск по сайту на страницу 404;
  • показать карту ресурса со ссылками для быстрого перехода;
  • создать забавное оформление «битой» страницы.

Мобильная и мультибраузерная адаптация

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

Подведём итоги

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

Общие принципы юзабилити

Правило 3-х секунд

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

Компания Radware провела исследование и выяснила, что если загрузка длится дольше 3 секунд, 57% пользователей закроют страницу. Те сайты, которые загружаются 3-5 секунд, имеют показатель просмотров и конверсию ниже на 20-30% (по сравнению с сайтами, которые грузятся за секунду).

Так что для хорошего юзабилити сайт должен загружаться не дольше, чем за 3 секунды.

Правило 3 кликов

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

Конечно, число 3 условно – не все действия можно выполнить четко за три клика. Но это правило еще раз напоминает, что сайт нужно максимально оптимизировать под пользователя и сокращать дистанцию до конечного действия пользователя. А также делать в целом понятный интерфейс.

Закон Парето

Закон гласит, что 20% усилий дают 80% результата, а остальные 80% усилий — лишь 20% результата. Если перекладывать этот закон на юзабилити, то получится, что 20% пользователей сайта – это те самые люди, которые выполняют 80% целевых действий. И поэтому следует выделить эту группу пользователей и в первую очередь ориентироваться именно на них: на их интересы, их удобство.

Закономерность Миллера

Джордж Миллер выяснил, что кратковременная человеческая память не может запомнить и повторить более 7 ± 2 элементов. В случае с сайтом это значит, что количество пунктов в меню должно быть около 7 (от 5 до 9). Не делайте длинное меню; если нет возможности его сократить, разбивайте на подразделы.

Принцип перевернутой пирамиды

Нетерпение пользователя может проявиться не только тогда, когда страница загружается дольше 3 секунд, но и когда на странице нет нужной ему информации. Возможно, она есть дальше (ниже) – но кто будет ее специально искать? Легче найти сайт, где все будет написано сразу сверху.

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

Правило однотипности

Все страницы сайта должны иметь единый дизайн: шрифты, выделение ссылок, заголовки и т.п

Здесь важно не обмануть ожидание пользователя и не усложнять ему задачу: если на одной странице контакты находятся вверху справа, то и на остальных страницах они тоже должны быть в верхнем углу справа, а не снизу, слева или еще где-нибудь. Отступление от единого формата может смутить пользователей, заставить их гадать, где же находится нужный элемент и т.п

Все это напрямую влияет на юзабилити.

Принцип неопределенности

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

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

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

Эффект утенка

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

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

Естественно, это не значит, что нужно продолжать сохранять сайт 10-летней давности, но нужно находить баланс между внедрением изменений и сохранением лояльности публики.

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

Комьюнити теперь в Телеграм

Подпишитесь и будьте в курсе последних IT-новостей

Подписаться

Сообщайте о текущем положении пользователя в интерфейсе

Интерфейсы чем-то похожи на аэропорты. Без указателя «вы находитесь здесь» пользователи могут заблудиться. Поэтому создавайте такие указатели.

Выделяйте текущий раздел в меню навигации

Комментарий Проектората: мы на практике чаще всего используем выделение цветом. Причём, текущий пункт выделяется менее ярким цветом, чем все остальные (название страницы и так продублировано заголовком, а пользователь, обращаясь к меню навигации, в большем числе сценариев захочет не убедиться, где он находится в структуре сайта, а перейти в соседние разделы). Подчёркивание в веб-интерфейсах всё же ассоциируется со ссылкой, поэтому, если один пункт подчёркнут, то и остальные тоже (но бывают исключения), жирность изменяет ширину блока, в котором находится текст, поэтому во многих случаях может вызвать внезапные сдвиги и переносы слов. Поэтому мы бы рекомендовали использовать цвет, указатель и фон именно в такой приоритетной последовательности.
Рейтинг
( Пока оценок нет )
Понравилась статья? Поделиться с друзьями:
Знай и умей
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: