Юзабилити примеры: Пример Анализа Юзабилити Сайта

Содержание

Пример Анализа Юзабилити Сайта – Plerdy

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

Юзабилити сайта: Поколение Z и что изменилось в восприятии сайта?

Как оценивать юзабилити сайта?

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

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

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

Для чего проводить юзабилити тестирование?

В интернете юзабилити — это воздух, которым дышит веб-сайт:

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

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

Пример юзабилити аудита apple.com

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

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

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

4. Не стоит добавлять к заголовку иконки.

5. На страницах категорий каждый элемент блока является активным и имеет ссылки

На нем также присутствует текст «Learn more», который получил те же ссылки, что блок. Рекомендуется для эффективного продвижения сайта этот текст убрать, или забрать из него ссылки.

6. Эти элементы лучше переделать на span с сохранением стилей.

Рекомендуется эти блоки сделать активными и предоставить им ссылку из текста «Learn more».

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

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

9. Интересным оказался поиск. Он предлагает разные варианты. После SEO-аудита, рекомендуется добавить в варианты поиска 10 фраз, которые популярны среди пользователей.

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

11. Рекомендуется вывести в корзину список всех категорий для лучшей конверсии.

12. В магазине аксессуаров стоит добавить заголовок Н1.

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

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

Юзабилити оптимизация мобильной версии сайта

1. Рекомендуется обрезать это меню.

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

3. Главное меню не закреплено. В мобильной версии это также неудобно, как и для ПК.

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

5. Список выбора стран лучше разделить на два столбца. Это значительно уменьшит длину страницы.

Выводы

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

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

Юзабилити главной страницы сайта

Алоха, гайз!

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

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

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

Анализ юзабилити сайта

Любые изменения следует начинать с анализа текущей ситуации.

С чего начать анализ юзабилити сайта?

Для начала определите портрет своей ЦА. Это важно для выбора формата подачи информации. Чем подробнее будет портрет, тем лучше. Вот отличный пример портрета ЦА, который мне как-то прислали:

Портрет покупателя (писался по данным опросов операторов колл-центра, курьеров компании):

“Женщина, 33 года, замужем, один ребенок, в ближайший год-два появится второй (как минимум они будут с мужем стараться). Живет почти на окрайне Москвы (метро войковская) на семью есть одна машина, есть собака. Она русская, православная. Доход на семью около 80-100 т.р.. У нее часто болит спина (после родов особенно) она недовольна своими волосами (они выпадают и секутся), у нее есть проблемы со здоровьем по женской части.Она очень хочет выспаться, хочет секса, хочет быть хорошей женой, матерью и дочкой, хочет чтобы ей завидовали и мечтает переехать в свой дом или большую квартиру. Она боится остаться одна и боится старости, она переживает за детей и мужа и боится остаться без денег, еще она боится растолстеть, остаться без денег и сглаза, когда она делает покупки — она боится что ее обманут. Она позитивная (часто проявляет позитивные эмоции, воспринимает шутки), не скандальная (ей проще уйти, чем доказывать свою правоту), в целом, она не обращает слишком пристального внимания на товар перед покупкой (по крайней мере не лезет вовнутрь), она увлекается рукоделием (или хотя бы ей это интересно), имеет профили в соцсетях и активно ими пользуется. (Особенно после 21-30, после того как укладывает ребенка спать.) Ее часто можно встретить в ТЦ, поликлинике и на детских шоу (например «Фиксики» в Крокусе)”

Сразу становится ясно, в какой форме лучше всего преподнести УТП для данной аудитории, да?

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

Постарайтесь ответить на следующие вопросы:

Почему люди приходят к вам на сайт?
Что они ожидают найти на нем?
И, наконец, что нужно сделать, чтобы им было проще это найти?

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

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

Обозначайте важные утилиты (вход/регистрация/условия доставки)
Делайте меню с ориентацией по левому краю с углубленностью не более чем в 3 клика (категория/подкатегория/товар)
Не перегружайте навигационное, верхнее меню, оно должно содержать максимум 5-6 пунктов.

Навигационное меню, пример оформления.

Расположите корректно следующие 5 элементов на главной странице сайта:

1. Уникальное торговое предложение

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

Пример:

Как правильно составить и разместить УТП на сайте

2. Обзоры популярных товаров/услуг

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

Так же, эта подборка ориентирована на заботливого потребителя — тип для которого важны отзывы, рейтинг товара, тут отлично работает элемент: «Этот товар здесь не просто так, ведь многие уже купили его!»

Пример:

Не заставляйте покупателя думать!

3. Корзина

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

Тут есть всего два правила:

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

Пример:

Пример оформления кнопки «корзина» на сайте

4. Контактная информация

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

Что нужно учесть:

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

Не надо так:

Код города указан шрифтом меньшего размера, это затрудняет восприятие

Лучше так:

Код города и основной телефон хорошо читаются

5. Поиск по сайту

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

Пример размещения:

Добавьте поле поиска по сайту для логической персоны!

С помощью этих нехитрых рекомендаций вы сможете влиять на основные KPI главной страницы:

Снизится процент отказов
Увеличится время проведенное пользователем на сайте
Вырастет количество просмотренных страниц

Меняйте сайт, упрощайте навигацию, тестируйте и делитесь результатами в комментариях!

Помните, что улучшение юзабилити — лишь первый шаг на пути к идеальному сайту! Не стоит забывать про SEO оптимизацию и контент-маркетинг, но об этом чуть позже 😉

Десять фишечек юзабилити — примеры, которые стоит почерпнуть

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

1. Lilly Pulitzer

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

2. Land’s End

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

3. Hotels.com

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

4. AirBnB

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

5. Simply Hike

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

6. Twitter

Тут можно писать сообщения, не превышающие 140 символов. Что будет, если напишете больше? Twitter их подсветит красненьким. Все просто и понятно: без лишних сообщений об ошибке.

7. Flickr

Для тех, кто не в курсе — это модный фотохостинг. Там можно найти огромное количество фотографий отличного качества, а также встретить уйму интересных людей — там сложилась своя тусовочка. Знаете ли вы, что на Flickr просто невозможно оставить коммент, написанный БОЛЬШИМИ БУКВАМИ? Заглавные буквы автоматически переводятся на строчные. Это мелочь, но пользователям задает уют.

8. Barnes and Noble

На многих сайтах строка поиска подсказывает варианты. Но интернет-магазин Barnes & Noble поможет даже в том случае, если вы не знаете как правильно пишется фамилия писателя.

9. Amazon

Было бы странно, если бы в этом посте не было примера с сайта Amazon! У них классно сравниваются позитивные и негативные отзывы:

10. Active

А этот интернет-магазин ненавязчиво подсказывает, что если купить товар еще на сумму N, то получите бесплатную доставку:

Бонус-трек: Threadless

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

Написано по материалам этого поста.

Что такое юзабилити: критерии, примеры — Определение

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

На нашем YouTube-канале в записи вебинара Мария Зайцева, руководитель отдела интернет-маркетинга Bquadro Agency, рассказала о юзабилити, структуре сайта и технической оптимизации.

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

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

Например, первое впечатление пользователей на 94% зависит от дизайна. Более того, 48% посетителей считают его показателем надежности бизнеса. Согласно статистике, человек оценивает внешний вид сайта всего 2-3 секунды. Поэтому, у вас есть буквально мгновение, чтобы произвести хорошее первое впечатление на посетителей, заинтересовать их и удержать.

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

Критерии оценки юзабилити сайта

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

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

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

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

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

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

При самостоятельном тестировании сайта можно использовать Google Analytics Content Experiments. Он позволяет проанализировать различные изменения и увидеть, как они влияют на уровень конверсии и показатель отказов. Чтобы узнать поведенческие факторы пользователей, выявить наиболее и наименее кликабельные элементы сайта, используют «Карту кликов» Яндекс.Метрики и статистику Google Analytics.

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

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

Для повышения удержания посетителей на сайте и увеличения продаж, следуйте рекомендациям ниже:

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

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

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

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

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

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

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

Ресурсы

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

Обновлено: 11.08.2021

Оцените, насколько полезна статья «Юзабилити «

Оценка: 4 / 5 (5)

Гипотезы для тестирования и аудита юзабилити сайта: примеры пошагового анализа usability

Команда AskUsers

2020-05-12 • 7 мин. читать

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

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

Зачем проводить анализ юзабилити

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

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

Критерии анализа: что необходимо проверять

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

Провести проверку помогает список критериев, через которые нужно прогнать каждую страницу ресурса:

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

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

Методики анализа

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

сбор данных из систем веб-аналитики Яндекс.Метрика и Google Analytics;
анализ обратной связи: отзывы от клиентов – ценный источник информации, который поможет найти недочёты;
тестирование: это может быть A/B-тест, опрос пользователей или фокус-группы, эксперименты, наблюдения за действиями. Главная задача – понять реакцию на интерфейс.

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

Пример пошагового анализа

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

Шаг №1. Проверка дизайна

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

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

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

Шаг №2. Оценка содержания

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

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

Шаг №3. Функциональный анализ

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

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

Удалось ли выполнить задачу?
Какие трудности возникали в процессе?
Нужны ли подсказки для упрощения?

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

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

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

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

Заказать

10 правил Usability: анализ сайта по Якобу Нильсену

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

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

Якоб Нильсен – один из гуру UX – еще в 90-х годах попробовал объективно оценить пользовательский опыт на цифровых устройствах. Он объединил это в 10 общих принципов, которые позже назвал “эвристиками юзабилити”. Хоть они и были сформированы в 90-х годах, эвристики Нильсена актуальны и в наше время.

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

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

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

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

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

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

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

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

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

3. Контроль и свобода действий

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

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

Мы рекомендуем всегда давать пользователю возможность вернуться на шаг назад.

4. Единообразие и стандарты

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

В примере выше мы видим, что функционал увеличения и уменьшение количества товара на странице “Корзина” и странице “Оформления заказа” выглядит по-разному.

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

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

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

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

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

6. На виду, а не в памяти

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

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

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

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

7. Гибкость и эффективность

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

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

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

8. Эстетика и минимализм

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

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

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

9. Понимание и исправление ошибок

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

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

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

10. Помощь и документация

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

На анализируемом сайте нет ни вкладки “Помощь”, ни страницы с “Вопросами и ответами”.

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

Итого

“10 эвристик юзабилити” Якоба Нильсена – отличный метод для начала улучшения ваших интерфейсов.
Эти правила являются общими и в большинстве случаев применимы к любым цифровым продуктам.
Эвристики – это не панацея, но учитывая их при разработке ваших интерфейсов вы будете в большом конкурентном преимуществе.

10 эвристик юзабилити, которые должен знать каждый дизайнер / Хабр

25 лет назад Якоб Нильсен описал 10 основных принципов проектирования взаимодействия. Эти принципы были разработаны на основе многолетнего опыта в области юзабилити-инженерии и стали правилами для взаимодействия человека и компьютера.

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

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

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

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

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

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

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

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

Отличные примеры иконок с реальными соответствиями

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

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

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

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

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

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

«Не забывайте, что люди проводят 90% своего времени, взаимодействуя с другими приложениями».

Хорошей отправной точкой для создания последовательной системы дизайна вашего мобильного приложения являются «Руководство по интерфейсу для человека» от Apple и «Руководство по материальному дизайну» от Google. Они представляют собой прочную основу, описывающую важные компоненты дизайна с большим количеством примеров. При разработке нового приложения никогда не забывайте, что люди проводят 90% своего времени, взаимодействуя с другими приложениями, поэтому использование лучших практик и распространенных шаблонов в конечном итоге приведет к повышению общего качества работы. Согласованность — один из самых сильных факторов, способствующих удобству использования.

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

Согласно книге Дона Нормана «Дизайн повседневных вещей», существует два вида погрешностей, возникающих при взаимодействии с пользовательским интерфейсом: промахи и ошибки.

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

Интеллектуальное предотвращение промахов в веб-приложении gmail. К сожалению, в мобильном приложении эта функция отсутствует.

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

Распознать, а не вспомнить

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

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

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

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

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

Разгрузите экран и сделайте приложение более удобным для навигации. В приложении всегда должны отображаться только необходимые элементы пользовательского интерфейса и команды. Посмотрите на такие приложения, как Apple Pages или G-Drive; при написании документа вы видите всего несколько контроллеров, связанных с редактированием текста. Но как только возникает необходимость добавить дополнительную диаграмму, появляется целая палитра функций, специально созданных для того, чтобы помочь вам выполнить эту задачу.

Не забывайте о профессионалах и продвинутых пользователях как таковых! У нового пользователя, который вступает на кривую обучения [6], всегда будут другие потребности, по сравнению с профессионалом, который использует программу по несколько часов каждый день. Опытные пользователи могут оценить расширенные опции, ярлыки или даже расширяемость и настраиваемость интерфейса приложения. Им необходимо экономить свое время и выполнять задачи быстро, но при этом точно и надежно. Хороший пользовательский интерфейс должен предлагать соответствующие функциональные возможности как неопытным, так и опытным пользователям.

Продвинутые шорткаты Photoshop [7]

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

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

«Совершенство достигается не тогда, когда больше нечего добавить, а когда нечего отнять». — Антуан де Сент-Экзюпери

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

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

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

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

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

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

Помощь и документация

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

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

Ресурсы

https://www.nngroup.com/articles/ten-usability-heuristics/
https://www.interaction-design.org/literature/article/heuristic-evaluation-how-to-conduct-a-heuristic-evaluation
http://www.gdrc.org/decision/info-decision.html
https://homepages.cwi.nl/~steven/sigchi/bulletin/1997.4/karn.html

Перевод статьи подготовлен специально для студентов курса «QA Engineer. Basic». В преддверии старта курса приглашаем всех желающих на бесплатный демоурок по теме: «Как правильно составлять баг репорт».

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

Получите представление о том, как выглядит настоящий тест, с помощью пяти примеров тестов удобства использования в реальной жизни из Shopify, Typeform, ElectricFeel, Movista и Trint. Вы узнаете о сценариях тестирования этих компаний, типах вопросов и задач, которые задают дизайнеры и исследователи UX, а также о ключевых вещах, которые они узнали.

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

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

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

Только что приехали? Вот краткое повторение, чтобы убедиться, что у вас есть необходимый контекст:

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

Если вы не уверены, находитесь ли вы на правильной стадии процесса проектирования для проведения исследований юзабилити, ответ почти наверняка: да!

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

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

Продукт

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

Тестируемая функция

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

Подход к юзабилити-тестированию

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

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

На этом этапе исследовательского процесса тестирование удобства использования было лучшим способом понять, как профили экспертов могут повысить ценность для пользователей.Мелани Бьюзет, исследователь пользовательского опыта в Spotify и бывший исследователь пользовательского опыта в Shopify, объясняет:

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

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

Тестовый сценарий

«Представьте, что вы хотите нанять эксперта Shopify для помощи в разработке маркетинговой кампании».

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

Примеры задач и вопросов

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

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

Команда также задавала участникам более конкретные вопросы, например:

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

Ключевое, чему они научились

Продукт

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

Тестируемая функция

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

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

Подход к юзабилити-тестированию

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

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

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

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

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

«У вас есть четыре райдера, ожидающих принятия.

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

Примеры задач и вопросов

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

Что вы видите на экране?
Как вы думаете, для чего это нужно?

Затем он переходит к вопросу о конкретных элементах дизайна:

Какая информация, по вашему мнению, является наиболее ценной?
Для вас важнее изображения или текст?

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

Главное, чему они научились.

Продукт

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

Тестируемая функция

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

Подход к юзабилити-тестированию

Юрий Мартинс, дизайнер продуктов в Typeform, объясняет момент, когда его команда почувствовала, что пришло время протестировать свои проекты для новой функции Drop-off Analysis:

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

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

Тестовый сценарий

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

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

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

Примеры задач и вопросов

Прототипы Drop-off Analysis от Typeform существовали на тот момент только в Figma, а это означало, что пользователи не могли взаимодействовать с дизайном для выполнения задач по удобству использования.

Вместо этого Юрий и команда предложили более широкие и открытые задачи и вопросы, направленные на проверку их предположений о дизайне:

Расскажите нам, что вы понимаете об информации на этой странице.
Опишите все, что вам не хватает, чтобы полностью интерпретировать интерфейс.

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

На месте сдачи, что вы понимаете?
Что вы ожидаете здесь увидеть?
Имеет ли для вас смысл эта информация?

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

Главное, чему они научились.

Продукт

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

Тестируемая функция

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

Подход к юзабилити-тестированию

Новая функция связи Movista находится на поздней стадии процесса проектирования, поэтому они протестировали высокоточный прототип. Дизайнер продукта, Мэтт Элберт, объясняет:

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

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

Тестовый сценарий

«Вы получили новые сообщения. Перейдите к своим сообщениям ».

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

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

Примеры задач и вопросов

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

Как бы вы удалили сообщение «да, в чем дело?» что вы отправили Марку Фуэнтесу.
Каким вам опыт выполнения этой задачи?

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

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

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

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

Ключевое, чему они научились

Продукт

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

Тестируемая функция

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

Подход к юзабилити-тестированию

Команда разработчиков продуктов в Trint уже использовала количественные данные, чтобы понять, что происходит на веб-сайте. Они использовали Mixpanel, чтобы посмотреть коэффициенты конверсии на каждом этапе воронки. Однако для принятия проектных решений информации никогда не было достаточно. Лидия Самбито, исследователь UX в Trint, объясняет:

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

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

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

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

Тестовый сценарий

«Вам нужно расшифровать много файлов, и ваш коллега упомянул программу под названием Trint. Он посоветовал вам взглянуть на нее.«

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

Примеры задач и вопросов

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

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

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

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

Главное, чему они научились

Удобство использования веб-сайта | Распространенные проблемы юзабилити | Примеры

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Оценка: как измеряется удобство использования?

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

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

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

Наиболее частые проблемы юзабилити

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

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

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

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

Целевая страница

Airbnb предлагает интуитивно понятный и сверхбыстрый способ бронирования жилья.

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

Примеры плохого интерфейса и UX-дизайна

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

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

Можете ли вы правильно прочитать все подменю на этой веб-странице Zara? Спорим, вы не можете.

Юзабилити дизайн сайта

Глядя на приведенные выше примеры, естественно также задаться вопросом: какую роль design играет в удобстве использования? Очевидно, что дизайн веб-сайта важен в некоторых областях (например, в электронной коммерции) больше, чем в других. Но учтите: есть несколько веб-сайтов с действительно красивым внешним видом, но трудных в использовании. Вместо этого существует множество веб-сайтов, на которые действительно некрасиво смотреть, но которые чрезвычайно функциональны.Что это значит? Веб-сайт должен в первую очередь работать, поэтому дизайн должен учитывать удобство использования. Это может быть красиво, это может быть даже произведение искусства, но оно ДОЛЖНО использоваться.

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

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

Мы написали эту статью не только для того, чтобы объяснить нашим клиентам, что такое удобство использования веб-сайта, но также для того, чтобы дать практические советы и рекомендации о том, КАК УЛУЧШИТЬ удобство использования веб-сайта. В связи с этим проверка юзабилити веб-сайта должна быть главным приоритетом для всех, кто хочет иметь эффективный веб-сайт.Лучший способ найти проблемы — протестировать свой сайт на реальных пользователях.

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

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

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

Тепловые карты (также называемые методом отслеживания кликов) — это визуальная презентация, которая позволяет вам увидеть, где пользователи нажимают на определенные страницы вашего веб-сайта, каков был их «образец кликов».
Eye-tracking Технология позволяет владельцам веб-сайтов изучать, как глаза пользователей перемещаются по экрану и какие области привлекают наибольшее внимание.
Опросы , особенно опросы на местах, являются эффективным способом быстрой и точной проверки взаимодействия с пользователем.
A / B-тестирование также является хорошим методом. Создавая разные версии (версия A и версия B) веб-сайта и внимательно сравнивая поведение пользователей, вы можете прийти к интересным выводам.
Модерируемое и немодерируемое тестирование дорогое, но, вероятно, наиболее эффективный метод юзабилити. Если вы хотите узнать больше о вопросах фокус-группы по удобству использования этого веб-сайта, мы рекомендуем вам прочитать эту статью: https://www.userreport.com/blog/website-usability-testing/.

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

Опросы

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

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

Удобство использования, дизайн и показатели производительности веб-сайта

Метрики

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

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

Стандарты юзабилити для веб-сайтов

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

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

The findabilit y информации
The доступность и удобство использования услуг
Согласованность веб-сайта
Логика веб-сайта Структура
Наличие поиск признаков

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

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

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

Работая как составная часть вашего веб-сайта или приложения, опрос UserReport позволяет:

Изучите тепловых карт ваших пользователей
A / B тест ваш сайт
Задайте конкретных вопросов своим пользователям
Объединить данные об удобстве использования с демографическими данными

Начать

Начните работу и проверьте удобство использования своего сайта уже сегодня!
Не стесняйтесь и попробуйте наш продукт UserReport бесплатно.

Начать

10 эвристик юзабилити с примерами | Акшай Девазья

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

В приведенном выше примере показано, как справляться с подобными ситуациями. Здесь, чтобы продублировать элемент, начинающий пользователь может перейти к редактированию и нажать «Дублировать».Но у экспертов есть ярлык. Они нажимали команду D и быстро копировали вещи. Мы можем видеть намного больше примеров в нашей повседневной жизни. Когда мы устанавливаем программное обеспечение, мы можем увидеть два варианта: установка по умолчанию и расширенная установка. Эксперты пойдут с расширенной установкой, чтобы удалить ненужные службы из программного обеспечения.

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

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

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

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

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

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

Что такое юзабилити-тестирование? (С примером)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Почему это важно?

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

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

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

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

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

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

Цели, гипотеза и метод

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

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

Рекрутинг

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

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

Определение задач

Это не так просто, как попросить людей «использовать ваш продукт», а затем увидеть, как творится волшебство. Чтобы получить наилучшие результаты — то есть наблюдать, как они используют его, как в своей жизни, — вы должны попросить их выполнить определенные задачи. Например, если вы работаете над веб-сайтом со скидками на авиабилеты, одной из задач может быть «Забронировать рейс из Сан-Франциско в Нью-Йорк на следующий вторник, возвращение в следующую пятницу». Обратите внимание на то, как задача дает полезную информацию, но не говорит и не дает советов: она не говорит, например, «Используйте поле в правом нижнем углу, чтобы забронировать рейс.Краткое изложение инструкций, но не руководство пользователя.

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

Запуск тестов

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

Отчетность и исправления

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

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

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

Позвольте мне дать вам пример из реального мира

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

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

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

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

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

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

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

Заключительные мысли

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

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

О писателе

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

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

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

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

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

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

Наконечники

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

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

# 2: соответствие системы и реального мира

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

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

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

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

Наконечники

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

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

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

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

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

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

Наконечники

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

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

# 4: Последовательность и стандарты

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

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

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

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

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

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

Пример эвристики юзабилити # 5:
Поручни на извилистых горных дорогах предотвращают падение водителей со скал.

Наконечники

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

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

# 6: Узнавать, а не вспоминать

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

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

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

Наконечники

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

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

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

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

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

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

Наконечники

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

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

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

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

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

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

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

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

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

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

Наконечники

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

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

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

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

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

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

Наконечники

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

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

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

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

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

Постер Free 10 Heuristics

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

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

См. Также

Примеры

Контрольные списки и инструкции

Список литературы

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

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

10 Эвристика удобства использования с примерами | by SaiChandan Duggirala

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

User Experience — это качественный показатель, на который влияет множество факторов. Это развивающаяся дисциплина, и это становится очевидным, когда предшественник отличного пользовательского интерфейса Apple смиренно помечает свои рекомендации по интерфейсу пользователя iOS как бета-версию. Google назвал свои рекомендации по материальному дизайну живым документом, который будет регулярно обновляться. Одним из пионеров, пытавшихся объективно оценить пользовательский опыт на цифровых платформах, является Якоб Нильсен с его эвристической оценкой. Хотя они восходят к 90-м годам, эти общие практические правила все еще действуют и используются сегодня.

В этой статье я пытаюсь объяснить эти 10 правил на общем языке на примерах:

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

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

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

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

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

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

И ниже Facebook проверяет меня, если я нажал «Отмена» по ошибке.

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

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

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

BrandFlakesforBreakfast’s Illustration

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

Ниже приведен пример поиска Google, который пытается исправить мою орфографию:

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

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

Ниже приведен пример Quora, предлагающий возможные вопросы в зависимости от того, что я пытаюсь ввести.

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

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

Ниже приведен пример настройки Exchange на Android, который скрывает сложные функции в разделе «Дополнительно».

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

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

Google: ни больше, ни меньше.

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

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

Ниже приведен пример того, как MailChimp обрабатывает этот сценарий:

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

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

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

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

6 примеров юзабилити-тестирования и тематических исследований

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

Звучит фантастически.

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

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

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

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

У AutoTrader не было большой команды исследователей пользователей и огромного бюджета, выделенного на тестирование удобства использования. Но у них был Брэдли Миллер — старший исследователь пользовательского опыта в компании. Чтобы проверить удобство использования AutoTrader, Миллер решил сотрудничать с UserTesting.com для проведения интерактивных интервью с пользователями AutoTrader.

Благодаря этим интерактивным интервью с пользователями Миллер смог:

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

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

Юзабилити примеры: Пример Анализа Юзабилити Сайта – Plerdy

Пример Анализа Юзабилити Сайта – Plerdy

Как оценивать юзабилити сайта?

Для чего проводить юзабилити тестирование?

Пример юзабилити аудита apple.com

Юзабилити оптимизация мобильной версии сайта

Выводы

Юзабилити главной страницы сайта

Анализ юзабилити сайта

1. Уникальное торговое предложение

Десять фишечек юзабилити — примеры, которые стоит почерпнуть

1. Lilly Pulitzer

Что такое юзабилити: критерии, примеры — Определение

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

Критерии оценки юзабилити сайта

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

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

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

Ресурсы

Гипотезы для тестирования и аудита юзабилити сайта: примеры пошагового анализа usability

Зачем проводить анализ юзабилити

Критерии анализа: что необходимо проверять

Методики анализа

Пример пошагового анализа

Шаг №1. Проверка дизайна

Шаг №2. Оценка содержания

Шаг №3. Функциональный анализ

10 правил Usability: анализ сайта по Якобу Нильсену

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

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

3. Контроль и свобода действий

4. Единообразие и стандарты

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

6. На виду, а не в памяти

7. Гибкость и эффективность

8. Эстетика и минимализм

9. Понимание и исправление ошибок

10. Помощь и документация

Итого

10 эвристик юзабилити, которые должен знать каждый дизайнер / Хабр

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

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

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

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

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

Распознать, а не вспомнить

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

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

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

Помощь и документация

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

Продукт

Тестируемая функция

Подход к юзабилити-тестированию

Тестовый сценарий

Примеры задач и вопросов

Ключевое, чему они научились

Продукт

Тестируемая функция

Подход к юзабилити-тестированию

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

Примеры задач и вопросов

Главное, чему они научились.

Продукт

Тестируемая функция

Подход к юзабилити-тестированию

Тестовый сценарий

Примеры задач и вопросов

Главное, чему они научились.

Продукт

Тестируемая функция

Подход к юзабилити-тестированию

Тестовый сценарий

Примеры задач и вопросов

Ключевое, чему они научились

Продукт

Тестируемая функция

Подход к юзабилити-тестированию

Тестовый сценарий

Примеры задач и вопросов