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

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

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

27 800 просмотров

Совместно с 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. Стандарты

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

7. Гибкость

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

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

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

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

8. Простота

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

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

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

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

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

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

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

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

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

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

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

Юзабилити аудит сайта — чек-лист, лучшие примеры юзабилити и разбор ошибок

• Все статьи
• Разработка
• Дизайн
• Аналитика
• Маркетинг
• Бизнес
• Автоматизация

23 сентября 2019

30 мин.

50449

Алексей Андреев Аналитик-проектировщик

Что такое юзабилити-аудит

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

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

Какие работы можно провести

Проверить данные в системах аналитики — Google Analytics и «Яндекс.Метрика».

Полезно будет знать:

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

Проблемные страницы — те, где высокий процент отказов или нет конверсий.

Пути пользователей по сайту.

Куда пользователи кликают на страницах и их поведение (на записях сессий).

С каких устройств заходят чаще всего.

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

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

Проверить ресурс по 10- и эвристикам Нильсена — они помогут выявить общие проблемы юзабилити интерфейсов.

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

Эвристики Нильсена

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

Первая: видимость состояния сайта

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

Информация после завершения заказа в интернет-магазине

Вторая: схожесть между сайтом и реальным миром

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

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

Третья: свобода действий

У пользователей должна быть возможность отменить совершенные действия.

В Gmail можно отменить удаление письма

Четвертая: последовательность и стандартизация

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

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

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

Примеры помогают избежать ошибок в заполнении полей формы

Шестая: на виду, а не в памяти

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

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

Седьмая: гибкость и эффективность использования

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

В поиске Google не нужно вручную печатать весь запрос, он сам предложит подходящие варианты

Восьмая: эстетика и минимализм

На сайте не должно быть бесполезной или устаревшей информации. Каждая лишняя единица усложняет восприятие интерфейса.

Так выглядит интерфейс, где нет ничего лишнего

Девятая: помощь пользователям в распознавании ошибок

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

В этой форме сразу понятно, как исправить ошибки

Десятая: помощь и документация

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

Обычно во всех сервисах есть раздел Help

Чек-лист для юзабилити-аудита

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

Основное

Сайт загружается за 1–2 секунды. Специалисты Google выяснили, что если сайт на мобильных устройствах загружается более трех секунд, то 53% пользователей покинут его сразу. Проверить скорость загрузки можно на PageSpeed или Test My Site.

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

На сайте установлен SSL-сертификат.

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

Очевидно, что на этом сайте нам предлагают страховку

А здесь мы можем заказать литую заготовку

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

При открытии сайта корректно определяется регион пользователя (если информация на сайте меняется в зависимости от региона). Есть быстрая возможность сменить регион.

Яркий и узнаваемый favicon очень полезен в таких случаях

Для каждой страницы прописаны тайтлы, описывающие ее содержание.

Title на странице нашей услуги «Разработка»

Есть проработанная 404-страница. На странице обязательно размещены ссылки на основные разделы сайта и / или поиск.

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

Отличный пример у Squarespace — тут тебе и меню по сайту с CTA, и блок с промо-предложением, и рекомендуемые ссылки

Нет пустых, незаполненных страниц.

Навигация

Шапка, подвал, меню

Номер телефона и e-mail размечены как ссылки с параметрами «tel:» и «mailto:». Пример:

<a href=»tel:+79999999999″> +7 999 999-99-99</a>
<a href=»mailto:email@company. com»> [email protected]</a>

По клику на логотип открывается главная страница. На главной странице логотип некликабелен.

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

В меню — ограниченное количество ссылок на основные разделы. Рекомендуется размещать до 7–8 ссылок.

У «Сбербанка» в главном меню — 11 ссылок, считывается довольно тяжело

На сайте «Тинькофф» ссылок всего 6 и гораздо легче найти нужную

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

Авторизация → Вход
Наше предприятие → Компания
Расположение → Контакты

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

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

Навигация по страницам

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

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

На всех страницах сайта в браузере работает кнопка «Назад», которая возвращает пользователя на предыдущую просмотренную страницу. Если пользователь задавал на странице какие-то параметры (например, фильтр товаров), то все они восстанавливаются при возврате.

В начале каждой страницы есть заголовок h2, который понятно доносит до пользователя содержание страницы.

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

Блоки с рекомендациями популярны не только в интернет-магазинах

На сайте есть поиск, и он хорошо заметен — размещен в шапке.

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

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

Поиск по сайту запускается как по клику на кнопку, так и по нажатию клавиши «Enter» в поисковой строке.

На Asos поиск работает очень быстро

Поиск умеет исправлять ошибки и предлагает пользователю варианты запроса. Особенно важно для интернет-магазинов и каталогов с множеством продуктов / услуг.

И сам исправляет ошибку в запросе

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

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

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

На Airbnb, когда ничего не найдено, предлагают перейти по быстрым ссылкам или посмотреть конкретные предложения

Дизайн и UI

Общие моменты

Применяются следующие правила:

— Теория близости: «объекты, расположенные близко друг к другу, воспринимаются связано».
— Правило внутреннего и внешнего: «Внутреннее ≤ внешнее».

Внутреннее — расстояние между буквами, внешнее — между словами.
Внутреннее — расстояние между словами, внешнее — между строками.
Внутреннее — расстояние между строками, внешнее — между абзацами или поля вокруг текста.

Здесь все пункты преимуществ слились в один большой блок, непонятно, куда относятся иконки

В этом примере за счет дополнительного «воздуха» между пунктами четко виден каждый пункт

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

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

Текстовый контент на сайте представлен в виде текста, а не изображений.

Общие элементы сайта размещены в привычных местах. Например, логотип — сверху слева, иконка корзины — справа. Подробнее: Закон Якоба.

Все элементы легко считываются на странице — между элементами достаточно «воздуха», нет нагромождения элементов в рамках экрана.

Контент размещен слева-направо по значимости (так, как мы читаем).

Пользователю очевидно, что элементы, с которыми он может взаимодействовать, кликабельны.

Все кликабельные элементы достаточно крупные, чтобы пользователь легко мог попасть по ним. Подробнее: Закон Фиттса.

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

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

Картинка из гайдов Material Design

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

Вид курсора меняется, если навести его на кликабельные элементы.

На первом экране сайта аэропорта Стамбула видно, что ниже есть табло рейсов

Длина текстовых строк — 60−80 символов.

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

Доступность

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

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

Элементы сайта контрастны. Для проверки можно использовать плагин Color Contrast Analyzer (для Chrome). Участки экрана с хорошим контрастом будут выделены белым, а области с плохим контрастом — бледными и малозаметными. Для некоторых отраслей наличие на сайте версии для слабовидящих — требования законодательства.

Комфортные для чтения размеры шрифта. Для основного текста рекомендуется использовать минимум 16px.

Кнопки, CTA

Все ключевые конверсионные элементы хорошо заметны на страницах, контрастны по отношению к другим элементам.

Выделено одно основное ключевое действие, если всего их — несколько.

Две кнопки целевых действий с разным приоритетом в середине экрана

На каждой коммерческой странице сайта есть возможность совершить целевое действие.

Блок с формой в конце описания сервиса для инвестирования

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

Конкретная формулировка «Открыть банковский счет» вместо банального «Зарегистрироваться»

Ссылки

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

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

Ссылка в тексте не очень резко выделяется, но в то же время хорошо заметна

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

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

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

Ссылки не ведут на текущую страницу.

Текст ссылки дает однозначное понимание, что откроется при нажатии. Если ссылка стоит в тексте, то текст не должен терять смысла без ссылки. Хорошо описано в Ководстве.

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

Чекбоксы

При клике с выбранного чекбокса снимается выделение.

Кликабельны полностью — и сам чекбокс, и его название.

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

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

В горизонтальном списке все сливается в одну линию

А так все хорошо считывается

Если в группе — более пяти чекбоксов, рекомендуется добавлять ссылки / кнопки для выбора (и снятия выбора) сразу всех чекбоксов.

Радиокнопки

Одновременно может быть выбрана только одна радиокнопка из всей группы.

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

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

Кликабельны полностью — и сама радиокнопка, и ее название.

При клике на выбранную радиокнопку с нее не снимается выделение.

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

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

Если какой-то пункт выбран по умолчанию (например, на странице настроек в личном кабинете), то он стоит первым в списке.

Выпадающие списки

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

А если всего два значения, то лучше использовать радиокнопки

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

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

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

Поле слишком короткое — в списке много длинных значений

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

Значения в списке должны быть отсортированы по какому-то признаку. Например, по алфавиту.

Комбинированные списки

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

Таблицы

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

Для разграничения строк используется пустое пространство — ничего лишнего

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

Широкая таблица перестраивается в несколько последовательных мини-таблиц

Контакты и обратная связь

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

Номер телефона указан в правильном формате с кодом региона.

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

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

Представительства компании можно посмотреть как в списке, так и на карте (если много представительств в разных странах / регионах).

Главный офис отображен на карте.

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

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

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

Кнопка чата в стилистике сайта не отвлекает от контента

Структура формы

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

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

Группировка полей заголовками на странице размещения объявления

Поля в длинных формах размещены в одну колонку для удобства восприятия.

Форма организована как предложение, где заголовок формы — подлежащее, кнопка отправки — сказуемое, а поля для заполнения — другие члены предложения.

Длинные формы разбиты на шаги или показан прогресс заполнения.

Форма разбита на шаги, сверху — прогресс заполнения

Содержание формы, поля

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

В форме указано, что произойдет после отправки данных.

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

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

Поля формы имеют отдельное состояние, когда они в фокусе (курсор установлен в поле).

Поле в фокусе выделено черной рамкой

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

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

При открытии формы фокус автоматически падает в первое поле формы.

Название поля отображается всегда: и в пустом поле, и в заполненном поле, и при его заполнении

При вводе адресов пользователю подсказываются значения из подключенного справочника.

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

У всех полей формы прописан корректный тип вводимых данных. Например, для ввода телефона: <input type=»tel»>. При вводе данных в данное поле с мобильных устройств на них сразу откроется числовая клавиатура.

В «Тинькофф» даже при вводе ФИО предлагаются значения для выбора

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

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

Проверяется корректность заполненных данных. Например, для e-mail, даты или числовых полей.

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

ВКонтакте объясняют зачем нужно указывать дату рождения

Заполнение, валидация, отправка

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

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

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

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

Модальные окна

Есть заметная кнопка закрытия.

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

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

Контент

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

Заголовки легко различимы между собой за счет размера. Однозначно можно ответить, где h2, а где h3.

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

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

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

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

Важная для пользователя информация в тексте выделяется жирным.

Цифры больше 4−5 знаков отбиваются разрядами для удобства считывания, например:

2409 → 2 409
20409 → 20 409

Таблицы

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

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

Изображения

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

У всех изображений прописаны alt и title.

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

Заключение

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

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

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

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

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

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

Читайте по теме

примеров юзабилити-тестирования | Юзабипровозявляние habub

Canse

Games

Games

SERPS

SERPS

Мобильные приложения

Mobile-Apps

Visual Design

Физические продукты

.

электронная коммерция

CRO

cro

веб-сайты

веб-сайты

пользовательские интерфейсы

пользовательские интерфейсы

Методология

Тестирование прототипов

Прототип-тестирование

Сортировка карт

СОРТИВАНИЕ

Тестирование предпочтений

Процедуры предпочтений

. концептуальное тестирование

Юзабилити-тестирование

Юзабилити-тестирование

Тестирование первого клика

Тестирование первого клика

Пять секунд тестирования

Пять секунд тестирования

Что пользователи думают о прототипе моего финансового приложения Figma?

тестирование прототипа

тестирование концепции

мобильные приложения

Могут ли участники достичь целевого экрана прототипа Figma?

тестирование прототипа

информационная архитектура

Как пользователи классифицируют продукты на моем сайте электронной коммерции?

информационная архитектура

электронная коммерция

веб-сайты

карточная сортировка

Сколько времени требуется покупателям, чтобы найти товар на моем сайте электронной коммерции?

тестирование первого клика

электронная коммерция

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

пользовательские интерфейсы

Могут ли пользователи найти ссылку в моем электронном маркетинговом сообщении?

электронная коммерция

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

тестирование концепции

Какие чувства вызывает у вас дизайн?

опросы

визуальный дизайн

пользовательские интерфейсы

Какой заголовок статьи звучит наиболее интересно?

Preference-testing

Могут ли пользователи перемещаться по моему каркасному дизайну?

мобильные приложения

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

пользовательские интерфейсы

веб-сайты

Какую тему пользователи предпочитают для мобильной игры?

игры

тестирование концепции

визуальный дизайн

Как быстро пользователи смогут найти информацию на моем сайте?

сайты

информационно-архитектурные

user-interfaces

Будут ли пользователи нажимать на мои результаты поиска?

cro

поисковая выдача

тестирование по первому клику

Будет ли мой листинг магазина приложений хорошо конвертироваться?

мобильные приложения

cro

тестирование первого клика

Заметят ли пользователи важные элементы моего веб-сайта?

cro

электронная коммерция

опросы

Какие типы иллюстраций понравятся моим пользователям?

опросы

визуальный дизайн

тестирование предпочтений

Какое рекламное объявление будет лучше всего работать по сравнению с конкурентами?

cro

электронная коммерция

визуальный дизайн

Могут ли пользователи выполнить задачу в моем программном интерфейсе?

пользовательские интерфейсы

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

тестирование первого клика

Могут ли пользователи находить важные страницы на моем веб-сайте?

веб-сайты

информационная архитектура

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

Какой дизайн футболки больше всего понравится моим пользователям?

опросы

физические продукты

визуальный дизайн

тестирование предпочтений

Могут ли пользователи совершить покупку в моем интернет-магазине?

cro

электронная коммерция

тестирование первого клика

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

пользовательские интерфейсы

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

визуальный дизайн

Ясна ли целевая аудитория моего веб-сайта?

cro

концептуальное тестирование

веб-сайты

пятисекундное тестирование

Понимают ли посетители, о чем страница?

cro

веб-сайты

пятисекундное тестирование

Понимают ли пользователи, как работает мой интерфейс?

пользовательские интерфейсы

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

веб-сайты

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

концептуальное тестирование

визуальный дизайн

тестирование предпочтений

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

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

Могут ли пользователи легко использовать веб-сайт, приложение или программное обеспечение? Насколько это интуитивно понятно? Отвечает ли он потребностям пользователя? С какими проблемами сталкиваются пользователи при использовании вашего сайта?

В целом тестирование удобства использования помогает ответить на следующие вопросы.

Но какое вам дело до этого тестирования?

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

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

Начнем!

Эта статья содержит:

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

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

Юзабилити-тестирование или тестирование взаимодействия с пользователем (UX) оценивает, насколько легко использовать веб-сайт или приложение.

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

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

Что делать, если вы не уделяете должного внимания UX и удобству использования приложения как основному компоненту?

Андрей Кучерявый, основатель UX-агентства InTechnic, сказал, что 67% клиентов называют неприятный опыт причиной оттока. Хорошо, что это можно предотвратить.

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

4 причины провести юзабилити-тестирование вашего веб-сайта

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

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

1. Чтобы выявить ошибки и подводные камни

«Все, что может пойти не так, пойдет не так». — Закон Эдселя Мерфи

Так как же уберечь свой продукт от действия закона Мерфи?

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

2. Чтобы понять поведение клиентов

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

3. Для улучшения опыта

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

4. Чтобы адаптировать свой продукт к реальным потребностям

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

Юзабилити-тесты: цели и задачи

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

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

• Регистрация учетной записи
• Навигация по веб-сайту
• Поиск информации
• Проверка продукта
• Совершение покупки
• Обращение в службу поддержки клиентов

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

10 примеров юзабилити-тестирования для улучшения производительности вашего веб-сайта и UX

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

1. Тепловые карты

через Plerdy

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

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

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

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

2. Партизанское тестирование

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

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

Создавайте настраиваемые формы в ClickUp для сбора отзывов и превращайте ответы на опросы в действенные задачи — все в одном месте

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

3. Лабораторное тестирование удобства использования

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

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

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

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

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

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

4. Интервью по телефону

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

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

Делитесь записями экрана, чтобы точно передать свое сообщение без необходимости переписки по электронной почте или личной встречи

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

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

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

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

5. Повтор сеанса

через Plerdy

Повтор сеанса означает запись экрана устройства, на котором проводится тест.

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

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

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

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

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

• Убедитесь, что у вас есть разрешение пользователя на запись сеанса
• Четко определите, как будут использоваться записи и кто будет иметь к ним доступ
• Анонимизируйте записи для защиты конфиденциальности пользователей

6. Сортировка карточек

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

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

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

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

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

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

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

7. Сценарий тестирования

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

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

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

• Убедитесь, что сценарий реалистичен и репрезентативен
• Сделайте сценарий максимально кратким и сфокусированным
• Убедитесь, что сценарий измерим реальный мир.

  8. Сравнительный тест удобства использования

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

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

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

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

  9. Модерируемое и немодерируемое юзабилити-тестирование

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

  Рабочий процесс утверждения дизайна в ClickUp Mind Maps

  Модерируемое и немодерируемое тестирование удобства использования имеет свои плюсы и минусы.

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

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

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

  10. Тестирование дерева

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

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

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

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

  Как визуализировать результаты юзабилити-тестирования и отслеживать прогресс

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

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

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

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

  1. Сбор данных, запись и сбор информации
  2. Анализ и визуализация результатов для построения гипотезы о потенциальных улучшениях UX

  Сбор данных, запись и сбор информации

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

  Визуализация ваших выводов и отслеживание прогресса

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

  Не знаете, как приступить к части тестирования и анализа удобства использования? ClickUp может помочь.

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

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

  Шаблон юзабилити-тестирования ClickUp помогает разбить все на определенные этапы

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

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

  Вот пример того, как могут выглядеть статусы ваших задач:

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

  Юзабилити-тестирование вашего продукта Улучшение взаимодействия с пользователем

  Юзабилити-тестирование — важный процесс улучшения вашего продукта.