Основы юзабилити. Элементарные основы юзабилити. Принципы юзабилити интерфейсов
Резюме: определение юзабилити (usability). Как, когда и где можно улучшить этот параметр пользовательского интерфейса (UI)? Почему он важен для маркетолога, равно как и для веб-дизайнера?
Данный пост представляет адаптированное к специфике веб-маркетинга изложение статьи крупнейшего мирового авторитета в этой сфере Якоба Нильсена (Jakob Nielsen).
Ниже приводятся ключевые термины и параметры, описывающие дизайн и юзабилити продающего сайта, и даются ответы на основные вопросы, могущие возникнуть и у маркетолога, и веб-дизайнера.
Определение
Юзабилити — это качественный критерий, позволяющий оценить, насколько легко применять пользовательские интерфейсы для использования. Прилагательное «качественный» в дефиниции термина означает, что он не может быть выражен через количественные параметры в отличие, положим, от кликабельности (CTR), коэффициента возврата инвестиций (ROI) или стоимости лида (CPL). Другими словами, мы не сможем вычислить точное значение этого параметра и записать его цифрами. Смысловой перевод Usability — «удобство использования».
Также этот параметр относится к способам упрощения использования пользовательского интерфейса (UI, user interface), применяемых в процессе его проектирования.
Мы предлагаем рассматривать термин UI в узком практическом значении с точки зрения интернет-маркетолога — пользовательский интерфейс есть визуализация лендинг пейдж, страницы сайта eCommerce или SaaS-решения, отображаемая на мониторе представителя целевой аудитории.
В свою очередь, удобство использования определяется 5 качественными компонентами (критериями более низкого уровня):
Обучаемость (Learnability): насколько легко пользователи смогут выполнить конверсионные задачи, в первый раз увидев дизайн лендинга?
Эффективность (Efficiency): после того, как пользователи ознакомились с дизайном веб-ресурса, как быстро они смогут выполнить стоящую перед ними задачу?
Запоминаемость (Memorability): если пользователи вернутся на web-страницу после периода достаточно долгого отсутствия, то как легко они смогут вспомнить алгоритм выполнения конверсионной задачи?
Ошибки (Errors): сколько ошибок во время интеракции с лендингом/сайтом пользователи сделают, насколько серьезными будут эти ошибки, и как легко пользователи смогут оправиться от этих ошибок (т. е. не будут ли разочарованы до такой степени, что попросту покинут веб-ресурс)?
Удовлетворенность (Satisfaction): насколько приятно пользоваться данным UI?
Вот что такое юзабилити программной системы и посадочной страницы.
Существуют и другие важные качественные атрибуты дизайна. Ключевой параметр, относящийся к функциональности пользовательского интерфейса — полезность (утилитарность, utility): отвечает ли дизайн базовым потребностям пользователей?
Юзабилити и полезность одинаково важны, и только через совокупность 2 этих параметров можно определить, является полезным для пользователя: не имеет значения, насколько легко выполнить какое-то действие, если оно вам не нужно.
Однако столь же нехорошо, если посетитель, оказавшийся на целевой странице после поискового запроса, понимает, что теоретически он может совершить желаемое им конверсионное действие, однако на практике желание свое он выполнить не сумеет, просто потому что пользовательский интерфейс слишком сложен.
Для изучения полезности дизайна применяются те же методы, что и для исследования юзабилити (о них мы расскажем ниже).
Итак, сформулируем 3 определения дизайна, способствующего удобству использования условным UI:
Полезность/утилитарность = предоставляет ли дизайн в распоряжение пользователя необходимые функции.
Юзабилити = насколько легко и приятно пользоваться этими функциями.
Полезный дизайн = удобство использования + полезность.
В чем важность юзабилити?
В интернете удобство использования является необходимым условием, особенно в сфере электронной коммерции любого формата. Если продающий лендинг или SaaS-решение трудно использовать, посетители уходят к конкурентам.
Если домашняя страница не в состоянии четко заявить, что компания предлагает, и объяснить, что представители целевой аудитории могут сделать на веб-ресурсе, пользователи «спасаются бегством». Такую же реакцию вызовет отсутствие понятной навигации, неудобство чтения текстового контента (пресловутая «стена текста»), уклончивые, неубедительные или некомпетентные ответы на ключевые вопросы.
Таков основной поведенческий паттерн online поведения человека: он не будет читать инструкцию по использованию лендинга/сайта или иным образом тратить свое время, пытаясь выяснить, как устроен и работает конкретный веб-интерфейс. На расстоянии клика мыши есть множество других доступных веб-ресурсов. Уход — это первая оборонительная реакция посетителя, столкнувшегося с трудностями.
А теперь вспомним «первый закон электронной коммерции»:
Если посетители не смогут найти товар, они его и не купят.
Нильсен утверждает, что лучшей практикой на текущий момент является такая — тратить 10% всего бюджета, выделенного на разработку дизайна, на оптимизацию юзабилити.
Подобный подход обеспечивает прирост качественных метрик веб-ресурса более чем в 2 раза (Нильсен в качестве косвенного критерия оценки удобства использования применяет ROI как параметр, имеющий точное числовое значение, а взаимосвязь между удобством использования интерфейса и коэффициентом возврата инвестиций он неоднократно отслеживал в своей обширной долголетней практике).
Удвоение продаж, удвоение количества зарегистрированных лидов, удвоение любого маркетингового результата — неужели недостаточно весомый аргумент для того, чтобы наконец уделить внимание удобству использования посадочных страниц?
Как повысить удобство использования?
Есть много методов изучения этого параметра, но основным и самым полезным является пользовательское тестирование, состоящее из 3 последовательных операций:
- Привлечение некоторого числа репрезентативных пользователей, представляющих целевой рынок.
- Выполнение участниками теста типичных конверсионных задач.
- Наблюдение за ними: что они делают, что им удается, где у них есть трудности во взаимодействии с пользовательским интерфейсом.
Маркетологи не должны никак вмешиваться в ход теста, предоставив участникам решить все проблемы индивидуально. Любая подсказка нивелирует результаты эксперимента.
Для того, чтобы определить наиболее важные проблемы, достаточно 5-10 пользователей. Запускать дорогое широкомасштабное исследование вовсе ни к чему, гораздо эффективнее себя проявит серия тестов с небольшим количеством участников, однако каждое испытание должно проводится после каждого изменения, внесенного в дизайн: так вы сможете исправить недостатки сразу же после их обнаружения.
Напомним, что такой метод называется итерационным дизайном (Iterative design), и он также применяется в процессе редизайна сайта для повышения конверсии, хотя во втором случае дело обстоит гораздо проще: каждая итерация завершается обычным сплит-тестом.
Ну и разумеется, чем больше версий и идей по дизайну интерфейса удастся проверить, тем лучше.
Пользовательское тестирование не следует путать с опросом фокус-группы — это метод хорош для исследования целевого рынка, но не подходит для оценки удобства использования. Маркетологу достаточно получить и проанализировать мнения, поступившие от фокус-группы, дизайнер UI должен лично видеть, как каждый пользователь выполняет конверсионную задачу, пользуясь сконструированным веб-интерфейсом.
Когда начинать работу над оптимизацией юзабилити?
Этот параметр играет свою роль на каждой стадии процесса разработки дизайна веб-интерфейса. Следовательно, возникает потребность в многочисленных тестах, каждый из которых, однако, можно провести быстро и дешево.
Вот основные шаги:
- Перед тем как начинать разрабатывать новый UI или приступать к его редизайну, протестируйте старый вариант для выявления удобных и полезных пользователя элементов, которые можно применить в дальнейшем.
- Проведите так называемое полевое исследование (field study) — понаблюдайте, как представители целевой аудитории ведут себя в «естественной среде обитания», т. е. в привычной обстановке при посещении предпочитаемых веб-ресурсов: пользуются ли они , скроллят ли страницу с помощью колеса мыши или движка вертикального скроллбара и т. д.
- Именно так можно составить примерное мнение о том, как представляют себе удобство пользования будущие посетители.
- Создайте несколько простых непроработанных эскизов новых вариантов дизайна и приступайте к пользовательским тестам как можно раньше. Не тратьте время на кропотливую проработку дизайнерских идей — вы должны будете изменить их все на основе результатов испытаний.
- Постепенно переходите от прототипа, отвечающего самым общим требованиям к веб-дизайну, принятым в вашей маркетинговой нише, к кастомизированной высококачественной компьютерной репрезентации вашего лендинга/сайта. Не забывайте проверять каждую итерацию!
- Проверьте дизайн на соответствие общепринятым правилам (существует множество работ на эту тему, например, того же Якоба Нильсена).
- Если вы решили, что окончательно завершили новый вариант дизайна, проверьте его еще раз — мелкие проблемы юзабилити всегда «выползают на свет» именно в ходе имплементации нового интерфейса на веб-ресурс.
Не откладывайте пользовательское тестирование до той поры, когда новый вариант дизайна будет полностью «введен в строй». Если вы это сделаете, будет невозможно исправить подавляющее большинство критических проблем.
Актуальным трендом последних лет стало массовое создание онлайн-витрин обычными оффлайновыми магазинами. К сожалению, часть таких сайтов электронной торговли запускаются без четкого понимания принципов электронной коммерции, а также того, какой синергетический эффект получит оффлайн-магазин от присутствия в интернет-среде.
Часто на этапе разработки веб-сайтов не учитываются как стратегии их продвижения, так и влияние навигации и элементов интерфейса на желание посетителя отправить товар в корзину и выполнить покупку.
Для того, чтобы интернет-магазин стал реальным инструментом продаж, его владельцам стоит обратить внимание на фундаментальные принципы юзабилити.
Конечно, не стоит забывать о функциональности, эстетично приемлемом оформлении, дружественности для поисковых систем и интуитивно понятной навигации — но это темы других статей.
Ниже приведены 5 приемов дизайна юзабилити, благодаря которым процесс поиска и покупки товара на вашем интернет-ресурсе станет более удобным и понятным для посетителей.
1. Простая и функциональная навигация
Чем большее количество кликов должен сделать пользователь в поисках нужного ему товара, тем меньше шансов превратить его из случайного посетителя вашего сайта в реального покупателя. Людям нравится покупать в интернете именно потому что это просто — ведь для того, чтобы найти нужный продукт и купить его не нужно вставать из любимого кресла.
Задайте себе вопрос: почему интернет-пользователи, привыкшие к простоте и комфорту, должны покупать что-то на сайтах, усложняющих процесс поиска и покупки нужного им товара?
Контекстное меню — первое, с чего люди начинают поиск интересующих предложений, независимо от того посетили они сайт впервые или бывали здесь ранее. Учитывая упомянутое выше желание пользователей быстро искать и просто покупать, следует ограничивать список родительских категорий в меню (категорий первого уровня навигации) максимум 7 заголовками, с количеством подкатегорий — от 2 до 3.
Давайте заголовкам и подкатегориям контекстного меню простые и понятные названия. Для того, чтобы покупатель мог быстро просканировать их взглядом, называйте их одним словом или словосочетанием из 2 слов. Модные или нестандартные формулировки приемлемы в том случае, если они не вводят в заблуждение и хорошо знакомы вашей потенциальной аудитории.
Например, если бизнес-направление сайта электронной торговли — одежда, обувь и аксессуары для молодежи, то может оказаться смелым и уместным маркетинговым ходом назвать некоторые родительские рубрики «модные луки» или «темы сезона», но при этом нужно быть готовым к потере части потенциальных клиентов, внутренне не готовых к восприятию подобных смелых шагов. Стоит ли жертвовать потенциальными клиентами ради показной оригинальности — решать вам.
Пример банковского лендинга с простым меню навигации — здесь только 3 заголовка в верхней панели навигации (вверху справа): «Feauters» (Рекомендации), «Testimonial» (Отзывы) и «Sign In» (Войти).
Используйте всем известные символы вместо слов. Давайте посетителям как можно больше возможностей рассматривать меню навигации, а не читать его. Например, всем известно, что стрелка, указывающая влево, обозначает возвращение на предыдущую страницу, а стрелка на фоне пустого квадрата, указывающая вправо, обозначает «Вход для зарегистрированных пользователей».
Наконец, поставьте себя или своих знакомых на место ваших клиентов и пробуйте провести юзабилити-тест.
Домашняя страница Sweat VAC (одежда и аксессуары). Здесь только 5 заголовков в верхней панели навигации: «Home» (Домашняя страница), «Headwear» (Головные уборы), «Shirts» (Футболки), «Gear» (Аксессуары) и «Custom» (Под заказ). Все просто и информативно.
2. Не делайте процесс покупки сложным
Вы когда-нибудь сталкивались с сервисами, предлагающими что-либо приобрести или заказать, заполнив громоздкую лид-форму, состоящую из большого количества полей? Забавно наблюдать ситуацию, когда для заказа пиццы кроме имени и номера телефона нужно указывать дату своего рождения, адрес электронной почты и адрес доставки (последний легко можно узнать с помощью телефона).
Даже самое жгучее желание клиента купить или заказать что-либо здесь и сейчас, легко остудить одним лишь включением дополнительного поля в форму заявки, которое человеку лень заполнять, или он посчитает заполнение этого поля нежелательным для себя.
Максимально упрощайте процесс заказа или покупки там, где это возможно. Чем меньше информации вы требуете, тем больше посетителей захотят довести до конца процесс оформления заказа.
Лид-форма на посадочной странице Crazy Egg для заказа 30-дневного пробного периода пользования сервисом, не требует ничего, кроме указания электронного адреса и пароля.
3. Используйте ясные указания об ошибках ввода данных
Уведомления об ошибках ввода данных должны быть легко понятны любому пользователю. Нет ничего более ужасного, когда у посетителя не получается сделать покупку, но при этом у него нет четкого понимания, что он делает не так. Конечно, человек может попытается повторить попытку, но если и в этот раз у него ничего не получится — третьего шанса сделать его своим клиентом у вас уже не будет.
Чтобы не терять продажи в такой ситуации, сделайте сообщения об ошибках предельно ясными и максимально заметными. Четко указывайте на допущенные промахи, используя для визуальной значимости и улучшения видимости таких подсказок контрастные к основному фону страницы цвета.
Кроме того, размещайте сообщения об ошибках непосредственно над (или рядом с) неверно заполненными полями формы заявки, которые необходимо подкорректировать. Нет ничего хуже сообщений об ошибке в верхней части страницы, где пользователь их может даже не заметить.
4. Убедитесь в быстрой загрузке страниц
Интернет-пользователи не любят ждать
25% пользователей сети Интернет отказываются от посещения веб-страницы, если ее загрузка длится более 4 секунд. А каждая дополнительная секунда к загрузке страниц вашего сайта увеличивает количество «отказников» еще на 7%. Развитие оптоволоконных технологий и доступность высокоскоростного доступа к всемирной паутине привили интернет-пользователям новые поведенческие паттерны и нелюбовь к долгому ожиданию.
Мобильные пользователи готовы терпеть немного дольше (беспроводные и мобильные технологии доступа к Сети еще недостаточно развиты по сравнению с наземными аналогами). Пока у владельца смартфона закончится терпение, у вас есть до 10 секунд, чтобы показать ему вашу страницу. Самое неприятное в этом то, что второго шанса заманить «отказника» на свой ресурс у вас может не быть: 3 из 5 человек не вернутся на сайт, который они не смогли посетить из за медленной загрузки страниц.
В случае с интернет-магазинами продолжительное время загрузки действительно означает потерянные деньги (как во время текущей сессии, так и в долгосрочной перспективе).
5. Автозаполнение поиска
Вот элемент юзабилити, который на удивление часто игнорируют ресурсы, даже имеющих в своем ассортименте десятки тысяч уникальных товарных предложений. Автозаполнение (auto-complete) поисковой строки — незаменимая функция для посетителей, точно знающих, что они хотят.
Это невероятно «горячие» клиенты, часто готовые покупать прямо сейчас. Если такие посетители не могут найти нужный оффер в течение нескольких секунд, то, скорее всего, они покинут сайт и продолжат поиск в другом месте. Функция автозаполнения экономит их время, самостоятельно заканчивая вводимую фразу и сразу показывая, что на сайте есть нужный им товар.
Кроме упомянутых выше преимуществ, автозаполнение создает дополнительный потенциал продаж товаров через поиск магазина. Не зря ведь его использует такие поисковые гиганты как Google и Yandex.
Сплит-тестирование
Когда вопрос касается коммерческой эффективности интернет-магазина ориентация на собственное субъективное мнение относительно элементов его юзабилити — верный путь в никуда.
Не думайте, что высокий уровень конверсии — это результат единожды сделанного гениального дизайна, в который никогда больше не вносились какие-либо изменения. Не существует единого и универсального рецепта оптимизации для всех товарных целевых страниц — что работает в одном случае, не будет работать в другом.
Более того, изменения в поведении пользователей происходят постоянно и то, что работало еще год назад, может не работать сегодня. Единственный верный способ узнать все достоинства и недостатки вашего ресурса — регулярное проведение сплит-тестирования всех типов его страниц.
От автора: сегодня у нас очень важная тема - принципы и правила юзабилити сайта. Об этом написано множество книг и статей. Величайшие умы человечества выводили свои формулы удобства использования сайта. Казалось бы, как можно угодить всем пользователям Интернета, ведь они такие разные? Но, как показывают исследования, существуют определенные паттерны поведения пользователей на сайте, которые необходимо учитывать при его разработке. Конечно, если целью ресурса является привлечение трафика и получение прибыли, а не запугивание кислотной расцветкой, мигающими баннерами (а еще лучше, со звуком) и загадочной навигацией.
Принципы юзабилити интерфейсов
Самый главный принцип, который должен пройти красной нитью через весь интерфейс, звучит так: «чем проще, тем лучше». Смысл его состоит в том, что использование стандартных приемов оформления веб-страниц существенно облегчает пользователю жизнь.
Ведь, если он уже видел где-то подобную навигацию, расположение кнопок и пунктов меню, то будет знать, как этим всем пользоваться. А значит, будет уверенно чувствовать себя на вашем сайте. Остальные принципы юзабилити сайта для удобства я разбил на несколько смысловых групп.
Принцип 1. Навигация. Горизонтальное и вертикальное меню.
Основа юзабилити сайта - это удобная и понятная навигация. В горизонтальном меню должны находиться основные разделы, а в вертикальном - дополнительные. В последнее время все чаще встречаю сайты без вертикального меню, то есть, упрощенные до предела. Но это зависит от особенностей ресурса и размещаемого на нем контента.
Если, избавившись от вертикального меню, вы получите сложное и запутанное горизонтальное, то от этого приема лучше воздержаться. Кроме этого, имеет смысл продублировать главное меню в футере. Если ваш сайт имеет сложную структуру, сделайте для нее отдельную страницу, где в виде древовидного, интуитивно понятного списка выведите перечень всех категорий и подкатегорий.
Принцип 2. Отсутствие ошибок.
Тестирование и еще раз тестирование. Каждый день. Без выходных и праздников. Сайт должен работать корректно, ведь каждая секунда его неправильной работы, каждая ссылка, ведущая в никуда, или кнопка на несуществующую страницу будут стоить вам посетителей и клиентов. Никто не будет задерживаться на нерабочем сайте. И не забудьте оформить 404-ю страницу в стиле вашего веб-ресурса.
Принцип 3. Правильное оформление шапки сайта.
Именно в верхней части сайта люди чаще и дольше задерживают свой взгляд. Некоторым даже лень прокручивать страничку вниз. Каюсь, я тоже отношусь к этой группе пользователей. Если в хэдере нет нужной мне информации (меню, контактные данные, телефоны и т. д.), вряд ли я буду тратить время на ее поиски. В общем, вы поняли - в шапке размещаем все данные, на которые хотели бы обратить внимание клиентов, в первую очередь.
Принцип 4. Свободное пространство.
Вероятно, вам встречались сайты, на которых каждый лишний сантиметр чем-то «затыкался» - какими-то баннерами, иконками, кнопочками, анимацией. Скученный текст, куча ненужной информации, брррр. Такие сайты должны гореть в специальном аду для тех, кто не знает принципы юзабилити и психологии восприятия.
Настоящие мастера веб-дизайна всегда оставят на сайте свободное пространство, а текст оформят с нормальным междустрочным интервалом, чтобы пользователю было легче дышать, а информация воспринималась легко и доступно.
Принцип 5. Качественный текст.
К качеству текста относятся не только его смысловая составляющая и отсутствие ошибок, но и правильное форматирование. Про междустрочный интервал я уже упоминал, осталось рассказать о приемах, благодаря которым можно привлечь больше внимания к вашему контенту. Это:
наличие заголовков и подзаголовков;
выделение ключевых слов и важной информации (жирным шрифтом, сносками, маркерами и т. д.);
Современные тенденции и подходы в веб-разработке
Узнайте алгоритм быстрого роста с нуля в сайтостроении
использование нумерованных и маркированных списков;
разбивка текста на абзацы, состоящие из 3-4 предложений.
Принцип 6. Поиск по сайту.
Казалось бы, и так понятно, что на веб-ресурсе должен быть внутренний поиск. Но нет - сплошь и рядом встречаются сайты, на которых нет и намека на этот важнейший элемент юзабилити. А ведь большинство пользователей приходит на веб-сайт с четкой целью: найти какую-то информацию и побыстрей.
Сделав поисковую строку и фильтр, вы осчастливите и себя, и потенциальных клиентов. Они найдут то, что им надо, вы - увеличите свою конверсию и, возможно, получите постоянного покупателя.
Принцип 7. Скорость загрузки.
В продолжение предыдущего требования к юзабилити сайта - люди очень нетерпеливы, они приходят в Интернет за информацией и хотят получить ее максимально быстро. По результатам исследования Nielsen Norman Group, пользователи в среднем проводят на веб-странице 27 секунд и редко прокручивают ее до конца. Происходит это потому, что в Интернете много хлама и бесполезной информации - если бы люди подробно изучали каждый ресурс, они бы сошли с ума.
Поэтому у вас есть всего несколько секунд, чтобы рассказать посетителю о себе, заинтересовать его и подвигнуть на дальнейшие действия. А если большую часть из этого отведенного вам времени будет занимать загрузка сайта, то шансов завлечь потенциального клиента у вас практически не остается - он просто уйдет на другой сайт. Вот этим вопросом, как привлечь и удержать посетителя, и занимается юзабилити.
В современном мире понимание основ юзабилити является необходимостью. Большинство посетителей сайта не совершают действий, которых от них ждут владельцы ресурсов. Люди не заказывают товар, не регистрируются, не подписываются на обновления и т.д. В чем причина такого поведения пользователей?
Причина проста – ресурс оказывается неудобным для пользователя. Например, для того чтобы «заказать» продукт, приходится пройти несколько страниц, а кнопку регистрации и вовсе невозможно обнаружить. Это делает ресурс неконкурентоспособным.
Как уменьшить количество отказов от использования сайта? Если проект нуждается в основательном подходе, можно обратиться в студию, к специалистам. Юзабилити-лаборатории
предлагают не только различные варианты тестирования и проектирование интерфейса. А если бюджет ограничен, можно попробовать познать азы юзабилити самостоятельно.
Для самостоятельной разработки интерфейса нужно учитывать несколько простых правил:
- Правило 7-ми.
Известно, что способности человеческого мозга небезграничны. Человек способен держать в кратковременной памяти не более 5-9 сущностей. Поэтому не следует размещать в навигации больше 7 пунктов.
С этой точки зрения сайт tutu.ru , безусловно, заслуживает хороших отзывов, поскольку основной функционал удалось разместить в шапке сайта, ограничиваясь 4 пунктами меню и выпадающим списком.
В то время как сайт Российских Железных дорог - отличный пример того, как делать не надо. От количества разрозненной информации пестрит в глазах, хочется просто закрыть его и больше никогда не заходить. - Правило 2х секунд.
Чем меньше пользователь ждет отклика программы, сайта или приложения, тем больше вероятность того, что он не откажется от использования этого продукта. 2 секунды – это оптимальный временной интервал отклика программы, именно к нему стоит стремиться. Так что стоит сто раз подумать, прежде чем ставить на сайт тяжелую флэшевую заставку, как это сделали на mtv.ru . - Правило 3х кликов.
Никому не нравится серфить страницы, в поисках необходимой информации и функционала. У посетителя должна быть возможность попасть с главной страницы на любую другую страницу сайта, сделав не более 3-х кликов. Это способствует и более успешной индексации сайта поисковыми роботами. - Правило Фиттса
Опубликованная Паулем Фиттсом в 1954 году модель движений человека, определяет время, необходимое для быстрого перемещения в целевую зону как функцию от расстояния до цели и размера цели.
Метафорически правило можно объяснить так: легче указать на зажигалку, чем на спичку. Но указать на утес или огромный дирижабль одинаково просто. Если объект интерфейса, например ссылка, и без того достаточно крупный, нет смысла делать его еще крупнее. - Перевернутая пирамида
Этого принципа придерживается сам гуру юзабилити, Якоб Нильсен. Статья должна начинаться с итогового вывода, за которым следуют ключевые моменты, а завершаться наименее важной для читателей информацией. Это оптимально для веба, где пользователь хочет получить информацию максимально быстро.
Тестирование состоит из четырех этапов:
- Подбор фокус-группы. Тестировщики должны соответствовать вашей целевой аудитории. Не стоит просить бабушку протестировать приложение для поиска обновлений драйверов.
- Составление плана тестирования – списка задач, для выполнения которых разработан ваш продукт. Именно этому списку будут следовать тестировщики. Если вы делаете интернет-магазин, в список должны быть включены такие задачи как поиск товара, получение информации о товаре, путь от получения информации о товаре к его заказу, удаление товара из корзины.
- Выполнение тестировщиками списка задач и фиксирование ошибок. Ошибкой можно считать все что угодно: слишком сложная капча, отсутствие сообщения от сервера о том, что «товар добавлен в корзину», невозможность изменить количество товаров в корзине или отменить действие, и т.д.
- После выявления и исправления ошибок цикл тестировки нужно пройти заново. Цикл должен повторяться до тех пор, пока результаты не будут удовлетворять необходимым требованиям.
Как правило, достаточно 5 тестировщиков для выявления основных багов.
Пример по теме
Напоследок разберем типичные ошибки на примере сайта известного исполнителя Влада Топалова . Предположим, мы хотим договориться о выступлении с его менеджментом и хотим найти на сайте их контакты. И вот тут начинается квест!Первое, что мы видим на сайте, это черную заставку со ссылкой «enter» и предложением обновить флеш-плеер.
Кнопка «enter» звучит как призыв попасть на главную страницу сайта. Но вместо главной страницы попадаем на «чистый лист».
Здесь взгляд приковывает изображение красной ленты, и мы, конечно, думаем, что это ссылка, и может даже на меню. Но нет – это всего лишь символ борьбы со СПИДом, который призван обозначить общественную позицию певца и не более. И тогда рука тянется в левый верхний угол. А там и не меню вовсе, а кнопка полноэкранного режима. Несколько секунд в замешательстве, и поиски окончены, вожделенное меню внизу, в центре экрана. Кликаем… и видим ПЛЕЕР! Нас снова обманули.
Пока в плеере транслируется клип, мы продолжаем искать меню. Теперь оно наверху, в самом центре. В выпадающем списке мы, наконец, наблюдаем желанное слово «Контакты». Но и тут не все так просто. Эти контакты нельзя скопировать. Придется переписывать вручную!
Теперь о цифрах. Время ожидания отклика в зависимости от скорости соединения может разниться, но в любом случае это будет больше 2х секунд. А путь до страницы контактов менеджмента занял 7 кликов. А мог бы занять всего один.
Влад Топалов, конечно, может позволить себе такие «креативные» решения. Но очевидно, что такие решения просто губительны для бизнеса.
Кликнуть по ссылке – посмотреть – закрыть страницу – искать еще. Такие действия мы выполняем ежедневно, посещая сотни сайтов, практически не задумываясь. Некоторые ресурсы пролетают «как фанера », другие же добавляются в закладки. Кажется, что этот процесс трудно осмыслить, просто одним везёт, а другим нет.
Если ввести в поиске какой-либо запрос, то в результате можно получить огромное количество сайтов с подходящей информацией. Но популярностью почему-то пользуются одни и те же ресурсы, оставляя конкурентов далеко позади.
Еще более явно такое превосходство проявляется в сфере услуг, когда одни интернет-магазины продают много и дорого, а у других покупают только ближайшие родственники.
Так почему же к одним люди идут и надолго остаются, а от других бегут как от огня? Ответ на этот вопрос такой же, как на «А почему вы купили этот диван, а не тот?». Потому что удобнее:
Удобство дивана выражается в мягкости посадки, легкости транспортировки, неподверженности загрязнениям и «Как же он подходит к цвету твоих глаз !». За подобные факторы в веб-разработке отвечает юзабилити сайта, и человек, работающий в сфере интернет-бизнеса, обязан понимать основные принципы обеспечения удобства пользователей ресурса.
Что такое юзабилити
Под юзабилити следует понимать не только конкретные технические моменты, с помощью которых обеспечивается удобство и простота использования сайта. Также учитывается применимость в той среде, для которой разрабатывался проект. Иными словами, требования к сайту спортивных новостей и к видео хостингу будут совершенно разными.
Для того чтобы разобраться в непростом вопросе пользовательских предпочтений, стоит выделить основные принципы юзабилити веб-сайтов.
- Контент. Информационное наполнение ресурса – это основа, стержень, без которого сайт не имеет смысла. Посетителям важно с легкостью воспринимать текст и извлекать из него всю необходимую информацию. Если же этого не происходит – человек не будет лишний раз ломать голову и отправится на поиски чего-то более понятного;
- Функционал. Тот, кто написал в жизни пару программ, с уверенностью может сказать, что сразу ничего не работает. Ошибки могут быть очевидны, а могут затаиться и обнаружить себя в самый ответственный момент. Во время работы сайта, особенно на первых этапах, постоянно выявляются недочеты, и для разработчиков очень важно вовремя на них реагировать. Если же какая-то функция сайта не выполняется (или выполняется некорректно ) в течение длительного времени – даже самые преданные пользователи такого не поймут и будут беспощадны;
- Кроссбраузерность и независимость от платформ. Если вы думаете, что ваш любимый Internet Explorer – единственный и неповторимый, то попросите у Билла Гейтса пирожок с полки:
Важно обеспечить корректное отображение сайта во всех наиболее популярных браузерах. Что касается операционных систем, то тут стоит вспомнить о чем-то кроме Windows или насладиться вторым пирожком.
Существуют, конечно, знатные извращенцы, способные воспринимать красный текст на зеленом фоне, но большинство посетителей от такого удовольствия откажутся. Помимо цветовых решений, дизайн сайта подразумевает взаимное размещение «строительных блоков » страницы, таких как меню, логотип, поле для текста и так далее.
Важно понимать, что посетитель способен положительно оценить оригинальность, но в разумных пределах. Дизайн должен подчеркивать информацию, а не выходить на первый план.
- Навигация. Посетители хотят знать свое местоположение, а также понимать: куда следовать дальше. Наличие участков, до которых сложно или невозможно добраться, существенно ограничивает возможности ресурса.
- Структурирование информации. Всё в мире подчинено логике, и информационные ресурсы не должны становиться исключением. По мере продвижения вглубь сайта, пользователь должен получать всё больше деталей по рассматриваемому вопросу. К примеру, посетитель ищет «Каким мясом кормить овец », тогда отправной точкой должен стать раздел «Млекопитающие », а конечной – подзаголовок «Что любят овечки на полдник ».
Почему это так важно
Несмотря на то, что интернетом пользуются люди, многие сайты создаются не для того, чтобы открыть для человека что-то новое или расширить уже имеющуюся информацию. Все жаждут денег, и конструируют свои ресурсы для размещения рекламы.
Казалось бы, зачем же следовать нормам юзабилити, если сайт создаётся не во благо человечества, а исключительно как источник дохода?
- Юзабилити влияет на конверсию. Если страница создана для того, чтобы пользователь совершил какое-либо действие, то он должен найти, понять, подумать, выполнить и всё это сделать быстро. Если же посетитель растеряется хоть на секунду, это может заставить его покинуть сайт;
- Юзабилити влияет на посещаемость. Если во время посещения вашего ресурса пользователь получил положительные впечатления, он не забудет приятный опыт. Сайт, где всё понятно, а действия совершаются быстро, станет популярным. Если же находиться на страницах ресурса некомфортно, а совершать действия неудобно – вы будете довольствоваться разовыми посещениями и плохой репутацией;
- Добавление рекламы не должно снижать посещаемость. Правила юзабилити предусматривают грамотное размещение объектов на странице. Если сайт дорос до первых рекламодателей, то баннеры должны гармонично сочетаться с основным наполнением ресурса.
Не следует забывать, что даже если сайт создаётся для получения прибыли – без посещений денег не будет. Поэтому необходимо создавать максимальные удобства для пользователей, чтобы они выбрали именно ваш ресурс.
Как добиться удобства
Если говорить о конкретных рамках юзабилити, в которые должен вписываться сайт, то необходимо учитывать функциональные требования, предъявляемые посетителями к страницам ресурса. Следует отметить некоторые немаловажные практические моменты.
Интернет-магазин
Когда сайт должен что-то продавать – помимо общих норм, существуют свои особенности. Рассмотрим основные правила юзабилити интернет-магазинов.
- Качественная визуализация товаров. Когда человек тратит свои деньги, он должен знать – на что. Хорошие фотографии помогут разбудить в посетителе покупательский интерес. Но стоит помнить, что изображение должно соответствовать реальному предмету;
- Как можно более быстрая загрузка страниц. Если человек решил купить – важно, чтобы его ничего не остановило;
- Чем больше покупатель знает о товаре, тем лучше. Следует тщательно проработать описание всех деталей, тогда доверие посетителей значительно повысится. К примеру, покупателям будет очень полезно знать, имеется ли товар в наличии;
- Помогайте посетителю найти нужный продукт. Достаточно сложно создать удобную навигацию при обилии категорий. Когда пользователь просматривает информацию о конкретном товаре, следует ненавязчиво предлагать ему похожие. Возможно, таким образом, человек найдет то, что ему нужно или подумает «А не купить ли мне и то, и другое ?»;
- Элементы, отвечающие за выполнение целевых действий, должны быть четко обозначены. Кнопка «Купить » обязана сразу же бросаться в глаза, ведь именно покупки вы и добиваетесь от посетителя.
Требуется аудит
Аудит юзабилити сайта – это комплексное исследование, с помощью которого можно выявить проблемы ресурса с точки зрения удобства использования. Такую работу можно проделать самостоятельно, однако лучше доверить дело компетентным в этой области людям.
Они определят потребности пользователей и составят подробный отчёт, в состав которого будут входить:
- Анализ аудитории, на которую рассчитан ресурс;
- Задачи, которые выполняет сайт;
- Полное описание и анализ функционала;
- Анализ структурной организации и рекомендации по её улучшению;
- Некоторые советы по привлечению рекламодателей;
- Технические параметры сайта;
- Анализ структуры и содержания контента.
Также применяется количественная оценка быстродействия пользовательского интерфейса. При подсчете учитывается:
- время, которое пользователь тратит на решение о совершении действия;
- время нажатия на кнопку;
- переход от одного устройства ввода к другому;
- время, потраченное на поиск элемента на экране.
Как протестировать юзабилити
Чтобы получить наиболее полные данные для дальнейших улучшений проекта, необходимо провести тестирование юзабилити сайта. Оно заключается в субъективной пользовательской оценке отдельных страниц или всего ресурса в целом.
Можно заняться подбором респондентов самому, а можно воспользоваться услугами специальных организаций. Также существуют онлайн-сервисы, которые помогут в проведении качественного тестирования.
Ниже представлены некоторые из них:
Таким образом, анализ юзабилити ресурса позволяет определить основные проблемы с точки зрения удобства пользователей.
Тестирование сайта можно доверить экспертам, провести самостоятельно или воспользоваться помощью онлайн-сервисов.
Для интернет-сайтов пользователи – это клиенты, а клиент всегда прав.
