Принцип usability: Юзабилити веб сайта — основные принципы usability web сайтов

Содержание

Юзабилити веб сайта — основные принципы usability web сайтов

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

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

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

Принципы юзабилити web-ресурса

Разработка юзабилити сайта базируется на главном правиле: «чем проще — тем лучше». Чем более привычную структуру и интерфейс видит пользователь — тем легче ему сориентироваться и тем меньше времени он потратит, чтобы найти нужный раздел, т.к. будет чувствовать себя более уверенно.

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

1. Дизайн — залог доверия к сайту

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

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


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

2. Логичный структурированный контент

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


Согласно отчетам компаний Clicktale и CX Partners, длина страницы не влияет на то, будет ли пользователь изучать контент ниже или нет. Важнее грамотно продуманная структура графики и текста: выделение приоритетной информации, последовательность расположения.

3. Важная информация — в левом углу

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


4. Общение с пользователем

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


Попав на такую страницу 404, пользователь не растеряется и, скорее всего, не сразу покинет ресурс.

5. Отмена действия

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

6. Ненавязчивое предложение помощи

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


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


7. Разговор на понятном языке

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




8. Отказ от резких перемен

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

То же самое относится к веб-дизайну: пользователь не только потратит больше времени, но и разочаруется, заметив, что вместо значка корзины теперь — «Добавить товар», вместо «Каталог» — «Продукция», а привычные объемные кнопки обтекаемой кнопки стали плоскими и рублеными. Потому задумав «перестановку», не шокируйте посетителя — изменения должны быть постепенными и не менять кардинально привычную структуру.

9. Все возможности — на виду

Удачное решение — когда пользователь видит все разделы, в которые может перейти, т.к. в любой момент может быстро сориентироваться, где находится и как вернуться обратно. Если на сайте планируется много контента — резонно предусмотреть горизонтальное верхнее, вертикальное меню (и то, и другое — возможно, с подразделами), а также «подвал». Если речь идет о минималистичной «визитке» или landing page — достаточно только верхнего горизонтального меню.

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

Пример удачной карты сайта

10. Форма регистрации и заказа: чем лаконичнее — тем лучше

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


11. Заметное длинное поле поиска

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

Еще один важный момент — длина поля поиска. Согласно исследованию Якоба Нильсена, в среднем туда вмещается 18 символов, а оптимальная длина — 27 символов. В 90% случаев сюда поместится даже длинный запрос, чтобы пользователь его полностью увидел и исправил при надобности. Для установки нужной ширины используйте относительную единицу «em», равную размеру используемого шрифта.


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

12. Больше свободного пространства

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


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

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

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

Новый интерфейс оценивается с двух позиций:

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

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

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

Статью подготовила Виктория Закирова.

понятно, удобно, комфортно. Коротко о главном / Хабр

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

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

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

Юзабилити-лаборатории

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

Для самостоятельной разработки интерфейса нужно учитывать несколько простых правил:


  1. Правило 7-ми.
    Известно, что способности человеческого мозга небезграничны. Человек способен держать в кратковременной памяти не более 5-9 сущностей. Поэтому не следует размещать в навигации больше 7 пунктов.
    С этой точки зрения сайт tutu.ru, безусловно, заслуживает хороших отзывов, поскольку основной функционал удалось разместить в шапке сайта, ограничиваясь 4 пунктами меню и выпадающим списком.
    В то время как сайт Российских Железных дорог — отличный пример того, как делать не надо. От количества разрозненной информации пестрит в глазах, хочется просто закрыть его и больше никогда не заходить.
  2. Правило 2х секунд.
    Чем меньше пользователь ждет отклика программы, сайта или приложения, тем больше вероятность того, что он не откажется от использования этого продукта. 2 секунды – это оптимальный временной интервал отклика программы, именно к нему стоит стремиться. Так что стоит сто раз подумать, прежде чем ставить на сайт тяжелую флэшевую заставку, как это сделали на mtv.ru.
  3. Правило 3х кликов.
    Никому не нравится серфить страницы, в поисках необходимой информации и функционала. У посетителя должна быть возможность попасть с главной страницы на любую другую страницу сайта, сделав не более 3-х кликов. Это способствует и более успешной индексации сайта поисковыми роботами.
  4. Правило Фиттса
    Опубликованная Паулем Фиттсом в 1954 году модель движений человека, определяет время, необходимое для быстрого перемещения в целевую зону как функцию от расстояния до цели и размера цели.
    Метафорически правило можно объяснить так: легче указать на зажигалку, чем на спичку. Но указать на утес или огромный дирижабль одинаково просто. Если объект интерфейса, например ссылка, и без того достаточно крупный, нет смысла делать его еще крупнее.
  5. Перевернутая пирамида
    Этого принципа придерживается сам гуру юзабилити, Якоб Нильсен. Статья должна начинаться с итогового вывода, за которым следуют ключевые моменты, а завершаться наименее важной для читателей информацией. Это оптимально для веба, где пользователь хочет получить информацию максимально быстро.

Но даже спроектированный по всем правилам интерфейс стоит протестировать. Фокус-группы – самый доступный способ для тестирования «своими силами».

Тестирование состоит из четырех этапов:

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

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

Как правило, достаточно 5 тестировщиков для выявления основных багов.

Пример по теме

Напоследок разберем типичные ошибки на примере сайта известного исполнителя

Влада Топалова

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

Первое, что мы видим на сайте, это черную заставку со ссылкой «enter» и предложением обновить флеш-плеер.


Кнопка «enter» звучит как призыв попасть на главную страницу сайта. Но вместо главной страницы попадаем на «чистый лист».


Здесь взгляд приковывает изображение красной ленты, и мы, конечно, думаем, что это ссылка, и может даже на меню. Но нет – это всего лишь символ борьбы со СПИДом, который призван обозначить общественную позицию певца и не более. И тогда рука тянется в левый верхний угол. А там и не меню вовсе, а кнопка полноэкранного режима. Несколько секунд в замешательстве, и поиски окончены, вожделенное меню внизу, в центре экрана. Кликаем… и видим ПЛЕЕР! Нас снова обманули.


Пока в плеере транслируется клип, мы продолжаем искать меню. Теперь оно наверху, в самом центре. В выпадающем списке мы, наконец, наблюдаем желанное слово «Контакты». Но и тут не все так просто. Эти контакты нельзя скопировать. Придется переписывать вручную!


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

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

Юзабилити сайта 📱, основные принципы и правила юзабилити веб-ресурса

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

Ключевые принципы юзабилити сайта

К основным принципам юзабилити стоит отнести:

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

Удобство веб-ресурса не только привлекает пользователей, но и выполняет другие важные функции:

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

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

Читайте также:

Юзабилити-аудит сайта, как первый шаг к увеличению дохода

Правильный дизайн – всему голова

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

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

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

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

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

Качественный контент

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

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

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

Коммуникация, как важный элемент юзабилити веб-сайта

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

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

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

Экспертность

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

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

Пользователь сразу же оценивает сайт. Около 10-15% потерь клиентов происходят в первые 3-5 секунд коммуникации человека с интерфейсом. Оттолкнуть людей может медленная загрузка, отсутствие гарантий безопасности, слишком яркая расцветка – любые факторы. Веб-сайты необходимо постоянно тестировать, подключая контрольные группы. Независимые эксперты смогут быстро найти причины, которые отталкивают потенциальных клиентов. Тестировка выполняет поэтапно:

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

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

Принципы юзабилити: 3 важных правила

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

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

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

Перечислим основные принципы юзабилити:

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

Визуализация пользовательского интерфейса

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

  1. Возможно, вас это удивит, но форма оплаты либо опция «положить в корзину» своим исполнением могут подтолкнуть посетителя либо воспользоваться ими, либо уйти на другой сайт.

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

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

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

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

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

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

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


Вам может понравиться: Увеличение конверсии интернет-магазина женской одежды 

Стандарты юзабилити

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

  1. Креативные виджеты на грани арт-хауса — это интересно, но вряд ли поспособствует желанию пользователя приобрести мультиварку именно на вашем сайте. Следовательно, упор визуального решения посадочной страницы должен делаться на скупую палитру, графически выразительные подзаголовки и качественные превью популярных моделей с броским заманивающим ярлычком, например, «скидка» или «предложение недели».
  2. Не менее важные составляющие «компьютерного доверия» — реальность контактов, подробная карта проезда, отсутствие ошибок в текстах, свежая дата последней публикации, адекватные подписи экспертов под текстами (к примеру, «Леся Майская» звучит менее серьезно, чем «Елена Сорокина»).
  3. «Шапка» ресурса должна включать себя ответы на все вопросы о вас: название компании и логотип, профиль деятельность, навигацию по разделам, контакты; в случае нотариальных услуг либо фармацевтики желательно не «прятать» слишком далеко номер лицензии.
  4. Важно не перегрузить верхнюю часть ресурса базовыми данными, однако предоставить самые важные списки, на которые, заинтересовавшись, пользователь перейдет по ссылкам: подзаголовки по услугам и разделам товаров, специальные предложения, перечень vip-клиентов, а также зазывающий иллюстрированный слоган и, при наличии, видео-ролик о вашей работе.

Привычка как принцип юзабилити

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

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

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

Для того, чтобы помочь вам лучше разобраться в теме, рекомендуем ознакомиться с книгой «Usability» от GUSAROV

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

15.09.2021

Об авторах:

Андрей Гусаров

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

10 правил юзабилити. Разбираемся на примерах — Дизайн на vc.ru

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

{«id»:144835,»type»:»num»,»link»:»https:\/\/vc.ru\/design\/144835-10-pravil-yuzabiliti-razbiraemsya-na-primerah»,»gtm»:»»,»prevCount»:null,»count»:9,»isAuthorized»:false}

{«id»:144835,»type»:1,»typeStr»:»content»,»showTitle»:false,»initialState»:{«isActive»:false},»gtm»:»»}

{«id»:144835,»gtm»:null}

18 260 просмотров

Совместно с UI/UX дизайнерами Forte Group мы решили разобраться в 10-ти правилах эвристики, на которых зиждется весь User Experience, а значит весь опыт взаимодействия с онлайн-системами.

UX дизайн или User Experience — это любой опыт, который пользователь получает при взаимодействии с объектом. Это может быть как опыт использования приложения, так и дверной ручки.

Чтобы продемонстрировать важность UX, обратимся к статистике от ведущего в мире UX агентства — Intechnic:

70% пользователей могут уйти с сайта, если им не понравится дизайн интерфейса;

62% из них поделится своим негативным опытом с другими пользователями;

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

Чтобы ваш сайт или приложение не превратилось в головоломку, проверьте свой продукт 10 правилами юзабилити. Сформулировал их еще в 90-х годах Якоб Нильсен и назвал правилами эвристики. Не смотря на то, что эти правила были придуманы порядка 30-ти лет назад, они актуальны до сих пор.

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

1. Видимость статуса системы

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

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

2. Схожесть системы с реальным миром

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

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

Классный пример можно найти у компании Spotify (музыкальный стриминговый сервис). Когда ты случайно лайкаешь песню, а потом убираешь лайк, внизу выскакивает фраза «Let’s pretend that never happened»(Давай притворимся, что ничего не произошло). Пользователю приятно, так как система дает лаконичный и по-дружески шуточный фидбек.

3. Свобода действий

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

Это настолько важно, что команда IOS разработала отдельное действие отмены для смартфонов: встряхнуть телефон.

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

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

4. Стандарты

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

{ «osnovaUnitId»: null, «url»: «https://booster.osnova.io/a/relevant?site=vc&v=2», «place»: «between_entry_blocks», «site»: «vc», «settings»: {«modes»:{«externalLink»:{«buttonLabels»:[«\u0423\u0437\u043d\u0430\u0442\u044c»,»\u0427\u0438\u0442\u0430\u0442\u044c»,»\u041d\u0430\u0447\u0430\u0442\u044c»,»\u0417\u0430\u043a\u0430\u0437\u0430\u0442\u044c»,»\u041a\u0443\u043f\u0438\u0442\u044c»,»\u041f\u043e\u043b\u0443\u0447\u0438\u0442\u044c»,»\u0421\u043a\u0430\u0447\u0430\u0442\u044c»,»\u041f\u0435\u0440\u0435\u0439\u0442\u0438″]}},»deviceList»:{«desktop»:»\u0414\u0435\u0441\u043a\u0442\u043e\u043f»,»smartphone»:»\u0421\u043c\u0430\u0440\u0442\u0444\u043e\u043d\u044b»,»tablet»:»\u041f\u043b\u0430\u043d\u0448\u0435\u0442\u044b»}} }

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

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

Плохой пример. На сайте BBC есть секция, где люди оставляют комментарии, за которые можно голосовать. Рейтинги Highest обозначены стрелкой вниз, а Lowest стрелкой вверх, (здесь нет логики). Логичнее сделано на Stackoverflow (сайт вопросов\ответов о программировании).

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

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

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

5. Предотвращение ошибок

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

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

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

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

6. Узнаваемость

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

А теперь представьте: вы пошли в бар, выпили коктейль, решили сходить в туалет и видите вот такое.

И не понимаете, в какую вам дверь. Это очень креативно, но заставляет пользователя думать. В итоге, он может не найти то, что искал, либо найти, но поздно:)

Ниже еще пример с эскалаторами, как одна мелкая деталь может полностью изменить восприятие пользователя.

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

Если ты сомневаешься, что твоя иконка считывается правильно, лучше используй текст.

7. Гибкость

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

Если система может предоставить пользователю несколько способов совершения одного действия, то пусть сделает это. Если убрать кнопку Close и крестик, то пользователи, у которых не было опыта взаимодействия, с клавишей Esc или с правилом «кликнуть по свободному пространству вокруг поп-апа», растеряются и не сразу смогут закрыть окно.

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

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

8. Простота

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

Обратный пример — поисковик Google. Здесь всё просто, лаконично и интуитивно понятно.

9. Понимание проблем и их решение.

Невозможно избежать ошибок при работе системы. Главное — это правильно объяснить пользователю, почему произошла ошибку и что с этим делать дальше.

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

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

10. Справочные материалы и документация

Почти 10% пользователей читают справочные материалы или проходят туториал для использования системы. Чаще всего пройти туториал система предлагает при первом скачивании или регистрации. У пользователя должен быть выбор: проходить обучение или нет. Справочные материалы всегда должны быть легко доступны, даже если пользователь при первом визите в систему отказался проходить туториал.

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

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

На этом всё. Надеемся, вы найдете эти советы и примеры полезными и в дальнейшем будете использовать их при работе с системами. Творите:)

что это такое, принципы, основы и правила usability сайта

Что такое юзабилити

В переводе с английского usability — это «возможность использования». В IT-сфере этот термин используют, чтобы оценить удобство и простоту работы с сайтами, и мобильными приложениями, операционными системами, голосовыми и другими интерфейсами. Считается, что сайт соответствует принципам юзабилити, если пользователь легко ориентируется в структуре и не путается в функционале страниц. 

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

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

Еще юзабилити влияет на:

  • Посещаемость. Если пользователю не нравится дизайн, навигация или скорость загрузки, то он закроет вкладку и больше не вернется.

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

Из чего состоит юзабилити

Веб-дизайнер Якоб Нильсен, который начал работать над вопросами удобства интерфейса еще в 80-х годах прошлого века, определил 5 основных составляющих юзабилити:

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

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

  3. Запоминаемость. Если пользователь долго не посещал сайт, он легко сориентируется в структуре. 

  4. Удовлетворенность. Посетителю нравится дизайн, навигация и контент, он охотно совершает покупки и другие целевые действия.

  5. Ошибки. Они возникают редко, и их легко устранить. 

В чем измеряется

Чтобы улучшить сайт, нужно определить, как измерить юзабилити и найти оптимальное значение. Юзабилити — это не абстрактный показатель, он имеет собственную единицу измерения, определенную международным стандартом ISO 9241-210. Она называется стоимостью взаимодействия — это количество усилий, которые пользователь прикладывает, чтобы совершить нужное действие. 

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

Принципы юзабилити сайта

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

Дизайн  

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

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

Структурированный контент 

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

  • сделайте оглавление в виде ссылок, чтобы пользователь мог быстро перейти в нужный раздел;

  • разбейте текст на смысловые блоки и продумайте структуру;

  • добавьте в текст факты и конкретику;

  • проверьте опечатки и грамотность.

Важная информация — в левом углу 

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

Общение с пользователем 

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

Отмена действия

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

Предложение помочь 

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

Нет резким переменам

Представьте, вы просыпаетесь утром, а в вашей комнате перестановка. Там где был стол, стоит шкаф. Где были полки с книгами — стеллаж с посудой. Возможно, стало уютнее и удобнее, но вы не можете найти свои вещи — это раздражает. 

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

Все возможности — на виду 

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

Форма регистрации и заказа

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

Заметное поле поиска 

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

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

Больше свободного пространства

Если страница переполнена текстом, картинками, видео и другими блоками, то посетитель растеряется. Оставьте на странице только самое важное: так легче и приятнее работать с сайтом. 

Как тестировать

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

Тестирование можно проводить с помощью специальных сервисов, например, Яндекс.Метрики. На вкладке Вебвизор сервис покажет, на каком этапе посетители чаще покидают сайт.

Тестировать юзабилити можно самостоятельно. Что нужно делать:

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

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

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

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

  5. Протестируйте обновления. Этот этап можно повторять бесконечно, главное — добиться нужного результата.

Эффективнее тестировать юзабилити на каждом этапе разработки: так проще выявить ошибки и исправить недоработки. 

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

Как повысить юзабилити

Несколько советов для повышения юзабилити, которые легко внедрить:

  • Поработайте над шапкой сайта: включите краткое описание предложения компании, контакты для связи, CTA-кнопку. 

  • Добавьте на главную страницу вовлекающие элементы: баннеры с анонсом распродажи, блок с преимуществами. 

  • Увеличьте скорость загрузки страниц сайта. Выберите самые трафиковые страницы и протестируйте скорость загрузки с помощью сервиса PageSpeed Insights — он предложит доработки с учетом анализа. 

  • Адаптируйте сайт под разные экраны. Пользователи часто просматривают страницы со смартфонов: если у сайта нет мобильной версии, то пользоваться ресурсом неудобно. Проверьте адаптивность сайта с инструментом «Проверка оптимизации на адаптивность» от Google. Он проанализирует конкретную страницу и покажет выявленные проблемы. 

Выводы

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

Может быть интересно:

что это такое, основные принципы и правила usability тестирование сайта – Wezom

Юзабилити. Что это за «зверь» и почему все так с ним носятся? Что сделать для того, чтобы «usability» получилось идеальным? Как оно вообще влияет на работу сайта и поисковое продвижение в целом? Очень много вопросов, поэтому сразу перейдем к делу.

Что такое юзабилити сайта?

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

Представьте, что вы пришли в новый супермаркет закупаться крупами. Гречка находится в одном месте, рис — почти в конце зала. «Ну какой умник расставлял товары?» — возмутитесь вы. Размещалось бы все в одном месте — выбирать было бы гораздо удобнее.

Приблизительно так можно охарактеризовать юзабилити web-ресурса. Когда все понятно, структурировано и на своем месте, пользователю проще ориентироваться на сайте.

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

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

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

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

Как юзабилити влияет на SEO-продвижение

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

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

Принципы юзабилити веб-сайта

Дизайн web-сайта

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

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

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

Антипример дизайна сайта:

Логическая структура сайта

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

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

Важная информация на сайте

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

Убедитесь в этом сами:

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

Навигация по веб-сайту

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

Вот пара советов насчет повышения удобства навигации:

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

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

  3. Ссылки оставляйте заметными. Пользователь должен видеть, что анкор кликабельный и по нему можно перейти. Не нужно «сливать» ссылки с остальным текстом, так как они будут незаметными, следовательно, бессмысленными.

Упомянутые рекомендации актуальны и для интернет-магазина, и для сайта услуг.

Коммуникация с пользователем

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

Ненавязчивое предложение помощи

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

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

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

Хороший пример:

Упрощенная форма регистрации и заказа

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

Посмотрите на эти два примера:

Разница всего в несколько полей, но первую форму заполнять хочется меньше.

Заметное длинное поле поиска

Дайте человеку возможность найти поисковую строку без труда. Желательно указать прямо в ней или рядом слово «поиск», чтобы пользователю было проще сориентироваться, как здесь:

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

Скорость загрузки сайта

В наше время пользователи очень нетерпеливы, медленная загрузка страниц их раздражает. Убедитесь, что на вашем сайте нет такой проблемы. Проверить скорость можно с помощью бесплатных инструментов PageSpeed Insight, Pingdom Website Speed Test, Load Impact. Вы сможете оценить текущую ситуацию и понять, стоило ли работать над увеличением скорости.

Как повысить юзабилити сайта?

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

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

Оно будет включать три шага:

  1. Сбор группы. Это должны быть представители ЦА, у которых на самом деле есть потребность разобраться с работой ресурса.
  2. Выдача заданий. Задачи ставятся разные, максимально приближенные к реальности, например: вашей дочери нужно купить ноутбук для школы; зайдите на сайт и закажите подходящий.
  3. Наблюдение за процессом. Модератор отслеживает взаимодействие респондента с сайтом, смотрит, с какими трудностями он сталкивается.

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

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

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

Навигация:

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

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

  3. Путь к заказу. Согласно исследованиям Baymard institute, свыше 25% посетителей отказываются от покупки из-за сложной процедуры оформления. Сделайте путь простым и понятным, без принуждений к регистрации, подтверждения по почте и т. д.

  4. Поисковая строка. Упрощайте поиск и помогайте покупателям быстрее найти товар и оформить заказ.

Все это важные конверсионные элементы.

Информация:

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

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

  3. Подача продукта. Дайте исчерпывающую информацию о товаре. Укажите характеристики, стоимость, покажите фото внешнего вида, опишите особенности применения.

Это поможет закрыть возражения и вопросы пользователя.

Интерфейс:

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

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

  3. Адаптивная версия. Сайт должен корректно отображаться на любых устройствах. Если блоки съезжают при просмотре через смартфон, шрифт слишком мелкий, кому-то следует поработать над адаптивностью.

Вот эти «три кита» помогут проверить юзабилити сайта.

Инструменты для самостоятельного юзабилити аудита

Проверять удобство ресурса вручную — пустая трата времени. Для этого есть много полезных сервисов.

Google Analytics и «Яндекс.Метрика»

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

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

Hotjar

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

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

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

      UsabilityHub

      В этом инструменте доступно 3 сервиса онлайн-тестирования веб-сайтов и приложений. Вам только необходимо:

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

          Останется проанализировать сформированный отчет.

          SitePolice

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

          Учтите, что инструмент полностью платный. Тестовой версии нет.

          Optimal Workshop

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

          В заключение

          Хороший сайт без юзабилити — ничто. Улучшая удобство использования ресурса, вы увеличиваете показатели конверсии. А кому нужен сайт без конверсий? Суть закономерна.

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

          У вас остались вопросы?

          Оставьте ваши контактные данные. Наш менеджер свяжется и проконсультирует вас.

          Отправить заявку

          10 эвристик юзабилити для дизайна пользовательского интерфейса

          Загрузите бесплатный плакат Джейкоба «10 эвристик юзабилити» внизу этой статьи.

          #1: Видимость состояния системы

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

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

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

          Наконечники

          • Четко сообщайте пользователям о состоянии системы — никакие действия с последствиями для пользователей не должны предприниматься без их информирования.
          • Отправьте отзыв пользователю как можно быстрее (в идеале немедленно).
          • Укрепляйте доверие посредством открытого и непрерывного общения.

          Узнать больше

          #2: Соответствие между системой и реальным миром

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

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

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

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

          Наконечники

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

          Узнать больше

          #3: Пользовательский контроль и свобода

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

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

          Пример эвристики юзабилити № 3:
          Цифровым пространствам нужны быстрые «аварийные выходы», как и физическим пространствам.

          Наконечники

          • Поддержка Отменить и Повторить .
          • Покажите четкий способ выхода из текущего взаимодействия, например кнопку Отмена .
          • Убедитесь, что выход четко обозначен и его можно обнаружить.

          Подробнее 

          № 4: Согласованность и стандарты

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

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

          Пример эвристики юзабилити № 4:
          Стойки регистрации обычно располагаются в передней части отелей. Эта последовательность соответствует ожиданиям клиентов.

          № 5: предотвращение ошибок

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

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

          Пример эвристики удобства использования № 5:
          ​​ Ограждения на извилистых горных дорогах предотвращают падение водителей со скал.

          Наконечники

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

          Узнать больше

          #6: Узнавание, а не отзыв

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

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

          Пример эвристики юзабилити №6:
          Большинству людей легче узнавать столицы стран, чем запоминать их.Люди с большей вероятностью правильно ответят на вопрос Является ли Лиссабон столицей Португалии? вместо Какая столица Португалии?

          Наконечники

          • Позвольте людям распознавать информацию в интерфейсе, а не запоминать («припоминать») ее.
          • Предлагайте помощь в контексте, вместо того, чтобы давать пользователям длинное руководство для запоминания.
          • Уменьшите объем информации, которую пользователи должны помнить.

          Узнать больше

          #7: Гибкость и эффективность использования

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

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

          Пример эвристики юзабилити #7:
          Обычные маршруты указаны на картах, но местные жители, лучше знающие местность, могут сократить путь.

          Наконечники

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

          Узнать больше

          #8: Эстетичный и минималистичный дизайн

          Интерфейсы не должны содержать неактуальную или редко используемую информацию. Каждая дополнительная единица информации в интерфейсе конкурирует с соответствующими единицами информации и уменьшает их относительную видимость.

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

          Пример эвристики удобства использования № 8:
          ​​​​ У богато украшенного чайника могут быть чрезмерные декоративные элементы, которые могут мешать удобству использования, например, неудобная ручка или трудно моющееся сопло.

          № 9: помогите пользователям распознавать, диагностировать и устранять ошибки

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

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

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

          Наконечники

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

          Узнать больше

          #10: Справка и документация

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

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

          Пример эвристики юзабилити №10:
          Информационные киоски в аэропортах легко узнаваемы и решают проблемы клиентов в контексте и немедленно.

          Наконечники

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

          Узнать больше

          Записка от Якоба

          Первоначально я разработал эвристику для эвристической оценки в сотрудничестве с Рольфом Моличем в 1990 году [Молич и Нильсен, 1990; Нильсен и Молич, 1990].Четыре года спустя я усовершенствовал эвристики на основе факторного анализа 249 проблем юзабилити [Nielsen 1994a], чтобы получить набор эвристик с максимальной объяснительной силой, в результате чего появился этот пересмотренный набор эвристик [Nielsen 1994b].

          В 2020 году мы обновили эту статью, добавив больше объяснений, примеров и связанных ссылок. Хотя мы немного усовершенствовали язык определений, сами эвристики 10 остались актуальными и неизменными с 1994 года. Если что-то остается верным в течение 26 лет, это, вероятно, будет применяться и к будущим поколениям пользовательских интерфейсов.

          Бесплатный плакат с 10 эвристиками

          Загрузите бесплатный постер «10 эвристик юзабилити» Якоба внизу этой статьи в разделе Downloads . Вы можете скачать итоговый постер в 3-х размерах: полный постер, A4 и Letter. Вы также можете скачать полный набор из 11 постеров (10 эвристик юзабилити и итоговый плакат).

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

          См. также

          Примеры
          Контрольные списки и рекомендации
          Каталожные номера
          • Молич Р.и Нильсен, Дж. (1990). Улучшение диалога человека с компьютером, Коммуникации ACM 33, 3 (март), 338-348.
          • Нильсен, Дж., и Молич, Р. (1990). Эвристическая оценка пользовательских интерфейсов, Proc. Конф. ACM CHI’90. (Сиэтл, Вашингтон, 1–5 апреля), 249–256.
          • Нильсен, Дж. (1994a). Повышение объяснительной силы эвристики юзабилити. проц. Конф. ACM CHI’94. (Бостон, Массачусетс, 24-28 апреля), 152-158.
          • Нильсен, Дж. (1994b). Эвристическая оценка. В Nielsen, J. и Mack, R.L. (Eds.), Методы проверки юзабилити, John Wiley & Sons, Нью-Йорк, штат Нью-Йорк.

          Многие люди спрашивают, могут ли они использовать эти эвристики в своей работе. Да, но, пожалуйста, укажите имя Якоба Нильсена и укажите адрес этой страницы [nngroup.com/articles/ten-usability-heuristics] или процитируйте приведенную выше статью [Nielsen 1994a]. Однако, если вы хотите распечатать копии этой страницы или воспроизвести содержимое в Интернете, см. подробности в нашей информации об авторских правах. Copyright © by Jakob Nielsen.ISSN 1548-5552 

          10 эвристик юзабилити в применении к сложным приложениям

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

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

          #1: Видимость состояния системы

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

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

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

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

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

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

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

          #2: Соответствие между системой и реальным миром

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

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

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

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

          Менеджер колл-центра, участвовавший в нашем исследовании, пожаловался: «По какой-то причине [это программное обеспечение] помещает кого-то, кто свободен, с небольшой чашкой кофе. Я не знаю почему. Вы могли бы подумать, что это означало бы, что [у них] был перерыв». Даже для частых пользователей (этот конкретный менеджер колл-центра использовал это приложение каждый день в течение многих лет) эти типы несоответствий между концепцией системы и реальным миром со временем приводят к неэффективности компиляции, поскольку пользователям приходится останавливаться, чтобы вспомнить специфичные для системы данные. значит снова и снова.

          #3: Пользовательский контроль и свобода

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

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

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

          Jitterbit Cloud Studio: возможность для пользователей восстанавливать свои проекты до более ранних версий экономит время и нервы при совершении ошибок.

          #4: Согласованность и стандарты

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

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

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

          Например, Microsoft Power BI поддерживает внутреннюю согласованность, зарезервировав знак «плюс» для обозначения действия по добавлению чего-либо нового в различные рабочие области приложения. Более того, основной призыв к действию для создания нового элемента находится в одном и том же месте (в правом верхнем углу) в каждой рабочей области, и визуальный дизайн этих действий согласован.

          Microsoft Power BI: знак «плюс» постоянно используется для обозначения добавления чего-то нового в рабочих областях и окнах. Кроме того, визуальный дизайн и место действия соответствуют друг другу.

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

          Как мы видели в примере с Microsoft Power BI, относительно хорошо принято, что знак плюс указывает на добавление или создание элемента, элемента или объекта. Однако в одном приложении для управления проектами, ориентированном на DevOps, знак «плюс» использовался для обозначения возможности открытия панели с дополнительными сведениями об отдельных задачах.

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

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

          № 5: предотвращение ошибок

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

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

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

          Salesforce: когда пользователи создают компонент панели мониторинга, они видят предварительный просмотр процесса (справа) при добавлении и изменении параметров и настроек (слева).

          #6: Распознавание вместо отзыва

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

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

          Часто в сложных приложениях так много данных, опций и информации, конкурирующих за пространство и внимание, что полезно предоставлять подсказки для распознавания в интерфейсе. Revit, программное обеспечение для моделирования зданий, поддерживает распознавание вместо воспроизведения, предоставляя визуальные 3D-напоминания о том, как выглядят различные части здания, когда пользователи наводят курсор на номера деталей на левой панели. В этом примере вместо того, чтобы вспоминать номер детали «ML-38», пользователь-специалист в предметной области может легко распознать деталь по ее изображению (а также обратиться к подробному названию, отображаемому в том же окне).

          Revit: когда пользователь наводит указатель мыши на номер детали, появляется визуальный элемент здания, что позволяет распознавать его, а не вспоминать.

          #7: Гибкость и эффективность использования

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

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

          Ускорители

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

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

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

          #8: Эстетичный и минималистичный дизайн

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

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

          Если в интерфейсе есть элементы, которые редко используются или используются только небольшим числом пользователей, можно использовать поэтапное раскрытие, чтобы отложить эти элементы на вторичный уровень. Например, Mastercard Test and Learn использует поэтапное раскрытие для раскрытия расширенных настроек только после проверки соответствующего поля в динамической форме. В этом случае поле Дать разрешения на отображается только после того, как Отметить этот параметр как частный отмечен.

          Mastercard Test and Learn: поэтапное раскрытие раскрывает дополнительные настройки (предоставить разрешения на втором снимке экрана) только после того, как будет проверено соответствующее поле (отметить этот параметр как частный).

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

          Избыточные значки создают беспорядок и занимают драгоценное место в интерфейсе.

          № 9: помогите пользователям распознавать, диагностировать и устранять ошибки

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

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

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

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

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

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

          Jitterbit Cloud Studio: сообщения об ошибках содержат ссылки на подробную документацию, когда рекомендации по устранению проблемы не могут быть в достаточной мере описаны в сообщении об ошибке.

          #10: Справка и документация

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

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

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

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

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

          Заключение

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

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

          Видимость состояния системы

          Загрузите бесплатный постер с эвристикой юзабилити № 1 Джейкоба внизу этой статьи.

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

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

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

          Знание — сила

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

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

          Соответствующая обратная связь

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

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

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

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

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

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

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

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

          Даже если пользователи не могут видеть результат действия, потому что в системе нет экрана (как в случае с голосовыми устройствами, такими как Amazon Echo и Google Home), минимальная обратная связь о том, что команда была услышана, имеет важное значение.Amazon Echo отображает световое кольцо на устройстве, чтобы указать, что оно в настоящее время слушает команду или работает над ней. Этот тип индикатора включения-выключения не так хорош, как, например, работающий таймер, но, по крайней мере, пользователь может быть уверен, что система услышала команду и таймер был установлен в первую очередь.

          Принуждение пользователей к действию

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

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

          1. Когда запасов мало: если люди знают, что осталось всего несколько товаров, они, скорее всего, будут действовать немедленно, следуя предубеждениям, таким как дефицит и социальное доказательство.
          2. Когда товаров нет на складе: эта информация может избавить пользователей от усилий по добавлению в корзину продуктов, которых больше нет в наличии. (Потеря немедленного заказа предпочтительнее потери доверия к будущим заказам, которые никогда не будут размещены, если пользователи почувствуют, что не могут вам доверять.)
          На сайте J.Crew отображается уведомление о том, что «Осталось всего несколько!» когда пользователь наводит указатель мыши на размеры продукта с низким запасом. Некоторые размеры уже распроданы и поэтому показаны перечеркнутыми светло-серым цветом.

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

          NatureBox.com: баннер в верхней части страницы сообщает, сколько еще денег нужно потратить пользователю, чтобы получить право на бесплатную доставку.

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

          Общение создает доверие

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

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

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

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

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

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

          Заключение

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

          Принципы удобства использования сайта | 5 ключевых принципов хорошего юзабилити веб-сайта

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

          За последние несколько лет мы привыкли к определенным стандартам веб-дизайна.

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

          Это не означает, что удобство использования стало менее важным.

          Он просто играет другую роль в веб-дизайне, формируя основу для удобного взаимодействия с пользователем.

          Юзабилити означает дизайн, ориентированный на пользователя.

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

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

          1. Наличие и доступность

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

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

          Вот несколько основных сведений о доступности и доступности,

          • Время безотказной работы сервера . Важно убедиться, что ваши посетители не получат сообщение об ошибке при попытке загрузить ваш сайт.Инвестируйте в хороший хостинг. Инвестируйте в хороший хостинг. Мы никогда не экономим здесь, найдите хорошего веб-хостинга, на который вы можете положиться.
          • Неработающие ссылки . Дважды проверьте, что на вашем сайте нет неработающих ссылок. Инструменты SEO, такие как Ahrefs и Screaming Frog, просканируют ваш сайт и найдут все неработающие ссылки.
          • Адаптивность к мобильным устройствам –  Убедитесь, что ваш сайт поддерживает различные размеры экрана и медленное подключение. Google также перешел на индекс «сначала мобильные», что означает, что они индексируют мобильные версии сайтов.Таким образом, отличный мобильный сайт поможет вам улучшить результаты поиска.

          Amazon.com

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

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

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

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

          2. Прозрачность

          Можно сказать, что в основе удобства использования лежит ясность.

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

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

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

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

          яблоко

          Компания Apple известна своими компактными и удобными продуктами.

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

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

          Ничто не отвлекает, что упрощает достижение целей на сайте.

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

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

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

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

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

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

          Майкрософт

          Microsoft изменила дизайн своего веб-сайта в прошлом году.

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

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

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

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

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

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

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

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

          Л’ОРЕАЛЬ

          Бренд L’ORÉAL отлично справляется с созданием доверия в Интернете.

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

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

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

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

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

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

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

          Найк

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

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

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

          Юзабилити означает тестирование, тестирование и еще раз тестирование

          Хорошее удобство использования не достигается за одну ночь.

          Это требует тщательного исследования пользователей и итеративного подхода постоянного тестирования и уточнения.

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

          Принципы удобного дизайна | Свод знаний по юзабилити

          Хорошо спроектированный пользовательский интерфейс является понятным и управляемым, помогая пользователям успешно и эффективно выполнять свою работу и чувствовать себя компетентными и удовлетворенными. Эффективные пользовательские интерфейсы разработаны на основе принципов проектирования человеческого интерфейса.Перечисленные ниже принципы взяты из широкого круга опубликованных источников (Constantine & Lockwood, 1999; Cooper & Reimann, 2003; Gerhardt-Powals, 1996; Lidwell, Holden & Butler, 2003; Nielsen, 1994; Schneiderman, 1998; Tognazzini, 2003) и основаны на долгой истории исследований взаимодействия человека и компьютера, когнитивной психологии и передовых методах проектирования.

          Полезность

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

          Консистенция

          • Согласованность и стандарты: Соблюдайте соответствующие стандарты/соглашения для платформы и набора продуктов. В приложении (или наборе приложений) убедитесь, что действия, терминология и команды используются последовательно.
          • Реальные условности: Используйте общепонятные понятия, термины и метафоры, следуйте общепринятым условностям (когда это уместно) и представляйте информацию в естественном и логическом порядке.

          Простота

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

          Связь

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

          Предотвращение ошибок и обработка

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

          Эффективность

          • Эффективность: (для частого использования) Приспособиться к постоянному совершенствованию знаний и навыков пользователя. Не препятствуйте эффективному использованию квалифицированным, опытным пользователем.
          • Ярлыки: (для частого использования) Позвольте опытным пользователям работать быстрее, предоставляя сокращения, функциональные клавиши, макросы или другие ускорители, а также позволяя настраивать или адаптировать часто используемые действия.
          • Пользовательский контроль: (Для опытных пользователей) Сделайте пользователей инициаторами действий, а не ответчиками, чтобы повысить у пользователей ощущение, что они несут ответственность за систему.

          Снижение рабочей нагрузки

          • Вспомогательная автоматизация: Сделайте работу пользователя проще, проще, быстрее или веселее. Автоматизируйте нежелательную рабочую нагрузку.
          • Уменьшение нагрузки на память: Сохраняйте отображение кратким и простым, консолидируйте и обобщайте данные, а также представляйте новую информацию со значимыми вспомогательными средствами для интерпретации.Не требуйте от пользователя запоминания информации. Разрешить узнавать, а не вспоминать.
          • Бесплатные когнитивные ресурсы для задач высокого уровня: Избавьтесь от вычислений в уме, оценок, сравнений и ненужных размышлений. Уменьшите неопределенность.

          Оценка юзабилити

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

           

          Ссылки по теме

          Авторитетные ссылки

          Шнайдерман, Б. (1998). Проектирование пользовательского интерфейса . Издание третье. Эддисон-Уэсли. (Первое издание опубликовано в 1987 г.).

          Нильсен, Дж.(1994). « Эвристическая оценка ». Удобство использования методы проверки. Нильсен, Дж., и Мак, Р.Л. (ред.). Джон Уайли и сыновья.

          Другие ссылки

          Константин, Л. и Локвуд, Л. (1999). Программное обеспечение для использования. Эддисон-Уэсли.

          Купер, А. и Райманн, Р. (2003). О лице 2.0: основы дизайна взаимодействия . Джон Вили и сыновья.

          Герхардт-Пауэлс, Дж. (1996). Принципы когнитивной инженерии для повышения производительности человека и компьютера. Международный журнал взаимодействия человека и компьютера, 8 (2), 189-211.

          Лидуэлл, В., Холден, К., и Батлер, Дж. (2003). Универсальные принципы дизайна. Издательство Рокпорт.

          Нильсен, Дж. (1994). Десять эвристик юзабилити. http://www.useit.com/papers/heuristic/heuristic_list.html

          Тоньяццини, Б. (2003). Первые принципы интерактивного дизайна. http://www.asktog.com/basics/firstPrinciples.html

          Похожие темы

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

          Факты

          Источники и участники:

          ЮзабилитиКомитет по дизайну BoK

          Принципы удобства использования. У всех нас есть истории о том времени, когда… | by Claromentis

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

          Важно понимать, что удобство использования жизненно важно для взаимодействия с пользователем и удержания посетителей; если веб-сайт или приложение неудобны для пользователя, посетители не будут возвращаться на него снова.

          Так что же делает веб-сайт или приложение удобным для использования?

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

          Доступность и доступность

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

          Ясность

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

          Обучаемость

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

          Обратная связь

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

          Керенса Джонсон пишет для Claromentis.

          Следуйте за нами в Twitter @Claromentis

          Принципы удобства использования веб-сайта

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

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

          Иллюстрация OrangeCrush

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

          Что такое юзабилити веб-сайта?


          Давайте начнем с основ: что такое юзабилити веб-сайта?

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

          Ясность и полезность — две цели удобства использования веб-сайта. Дизайн от Akorn.CreativeSimplicity — ключ к удобству использования. Дизайн Bluesjay

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

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

          5 принципов веб-юзабилити


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

          • Наличие . Доступность — это просто то, насколько легко получить доступ к вашему веб-сайту. Доступность вашего веб-сайта может зависеть от используемой вами платформы веб-хостинга и от того, насколько она совместима с устройствами, с которых к ней обращаются пользователи.
          • Ясность .Ясность — основа юзабилити веб-сайта. Посетители приходят на ваш сайт с конкретными целями, и мы обещаем, что эти цели не включают в себя проверку ваших навыков веб-дизайна! Если дизайн вашего сайта отвлекает или сбивает с толку посетителей, им либо потребуется больше времени, чтобы найти то, за чем они пришли, либо они могут вообще забыть о своей первоначальной цели и уйти. В любом случае они уходят недовольными и вряд ли вернутся.
          • Признание . Распознавание — это способ описания процесса обучения, который предпринимают пользователи при посещении нового сайта.Возможно, вам не кажется, что ваш веб-сайт нужно изучать, чтобы им можно было пользоваться, но на самом деле все сайты требуют хотя бы нескольких секунд для оценки, прежде чем пользователь сможет с ними взаимодействовать. Подавляющему большинству пользователей, например, в какой-то момент потребуется вернуться на вашу домашнюю страницу, и большинство из них будет искать логотип в верхнем левом углу экрана, чтобы сделать это. Если ваш веб-сайт работает по-другому, им придется потратить несколько секунд на изучение того, как вернуться на главную страницу. Когда вы проектируете для удобства использования, старайтесь, чтобы кривая обучения была как можно короче.
          • Достоверность . Даже если клиенты могут легко найти контент или функции, которые они ищут, если они не доверяют этому, веб-сайт хуже, чем бесполезен для них. Есть много способов продемонстрировать свой авторитет с помощью дизайна вашего веб-сайта, например, быть прозрачным в отношении вашего бизнеса и целей.
          • Актуальность . Релевантность, пожалуй, самая сложная проблема юзабилити, потому что она описывает, насколько интересен контент, который ваши клиенты видят на вашем сайте.Создание привлекательного контента включает в себя тщательное определение вашей целевой аудитории, определение того, что они хотят, и максимально четкое удовлетворение их потребностей.

          Эти пять принципов являются наиболее важными аспектами удобства использования веб-сайта. Но может быть трудно увидеть, как эти элементы реализованы в реальном мире, поэтому давайте рассмотрим пример. Пожалуй, лучший пример удобства использования веб-сайта: Amazon.com.

          Через Amazon

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

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

          Удобство использования веб-сайта в сравнении с доступностью и UX


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

          Инновационное сочетание изображения и текста может улучшить доступность и удобство использования.Дизайн Spoon lancer

          Доступность, как мы более подробно объясняем в нашей статье о доступном веб-дизайне, означает разработку веб-сайтов и приложений таким образом, чтобы они были доступны для людей с ограниченными возможностями. Это может означать обеспечение совместимости веб-сайта с различными вспомогательными устройствами или просто использование продуманного дизайна. По данным за 2012 год, почти каждый пятый американец живет с какой-либо инвалидностью. Во всем мире примерно один миллиард человек, или 15 процентов населения мира, живут с инвалидностью.Делая свой веб-сайт доступным, вы избегаете потенциального отчуждения пользователей.

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

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

          UX означает обеспечение согласованных интерфейсов на нескольких устройствах. Дизайн Майка Барнса

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

          Дизайн для удобства использования веб-сайта


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

          Четкая навигационная структура является ключом к удобству использования в Интернете. Дизайн MercClass

           

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

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

          1. Исследование пользователей

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

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

          Например, пользователи, которым нужна подписка на доставку тортов, должны знать, как работает подписка. Дизайн веб-сайта от DSKY

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

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

          По своей сути домашняя страница Microsoft имеет очень простую структуру. Через Microsoft.com

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

          2. Структура

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

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

          • Что ищут посетители моего сайта?
          • Какой контент наиболее важен для посетителей?
          • Какая информация нужна каждому посетителю, а какая актуальна только для некоторых посетителей?

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

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

          Отличным примером простого, но эффективного структурного дизайна является веб-сайт Nike.

          Как и на веб-сайте Microsoft, навигация Nike очевидна. Через Nike.com

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

          3. Наймите веб-дизайнера

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

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

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


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

          Дайте пользователю то, что он хочет. Дизайн Мила Джонс Канн

          По этой причине юзабилити-тестирование является первым и последним шагом в процессе веб-дизайна.

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

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

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

          Удобство использования — важнейшая часть отличного дизайна веб-сайта


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

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

      Leave a Reply