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

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

Аарон Уолтер, директор по UX в сервисе email-рассылок MailChimp, однажды сформулировал ключевой принцип его команды:

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

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

Так что же такое UX и юзабилити

Официальное определение UX (User eXperience) звучит следующим образом:

«Восприятие, возникающие у человека при использовании и/или предполагаемом использовании продукта, системы или при получении услуги» (ISO 9241-210:2010, подраздел 2.15).

Русскоязычным аналогом User eXperience является выражение «пользовательский опыт». Своим появлением и дальнейшему распространению словосочетание «пользовательский опыт» обязано Дональду Норману, который на момент введения термина (1995 г.) занимал пост вице-президента разработки перспективных технологий в Apple:

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

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

• Физиология: Что мотивирует пользователя?
• Юзабилити: Что доставляет пользователю неудобства?
• Дизайн: О дизайне необходимо задуматься до стадии внедрения его в рабочий процесс, чтобы у пользователя не возникало чувство сомнения и/или недоверия относительно надежности вашей компании и ее продукции.
• Контент: Ясность подачи информации здесь играет первостепенную роль. Люди действительно читают тексты на сайте, в приложении или письме, и их написание надо рассматривать как часть процесса проектирования [интерфейса].
• Аналитика: О чем нам должен сказать процент отказов и другие показатели?

Пользовательский опыт и юзабилити – взаимосвязанные понятия, которые тем не менее следует четко разграничить, чтобы не допустить путаницы. Говоря простым языком, если UX – это опыт восприятия, отвечающий на вопрос «Что?», то юзабилити – это механика восприятия, отвечающая на вопрос «Как?».

Проектирование интерфейса и проектирование UX: где связь

Рассмотрим основополагающие методы работы над проектированием пользовательского интерфейса:

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

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

Но как проектирование интерфейса связано с проектированием UX? К примеру, википедия определяет проектирование UX как:

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

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

«UX – не то, что можно просто внедрить, это – основа базовой системы ценностей», – говорит Уолтер.

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

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

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

Профессия UX-проектировщика

Итак, первое, о чём думает проектировщик UX [для простоты здесь и далее будем считать термины «проектировщик UX» и «юзабилист» синонимами] – как объединить цели пользователя с целями бизнеса. Например, если целью пользователя является покупка продукта, то компания должна сделать эту покупку полезной, удобной и приятной.

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

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

• Эмпатия – способность понимать, почему люди поступают тем или иным образом. Для того, чтобы заниматься проектированием UX, нужно уметь ставить себя на место других людей. Вероятно, это наиболее важное качество для работы в этой области, и вам необходимо научиться понимать поступки других людей. Вопреки расхожему мнению, этой способностью не каждый обладает от природы.
• Любознательность – желание узнать, почему люди поступают тем или иным образом.
• Ясность выражения – способность объяснить сложные понятия в доступной форме для тех, кто не знаком или мало знаком с данной областью.

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

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

P.S. Парочка материалов из нашего блога:

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

Существуют различные элементы информационной архитектуры, которые влияют на удобство использования, т.е. (usability), целесообразность (desirability) и надежность (reliability) ресурса. Чаще всего из подобных параметров (понятий) на слуху бывают «пользовательский интерфейс» (User interface, UI) и «пользовательский опыт» (User eXperience, UX).

Эти 2 фактора, относящиеся к любому веб-ресурсу, отнюдь не равнозначны. Миф о том, что «UI = UX», вводит в заблуждение обе стороны цифровой интеракции: как посетителей лендингов и сайтов, так и маркетологов и интернет-предпринимателей

В этом посте мы раскроем еще один секрет юзабилити эффективного интернет-маркетинга.

Дизайнер UI и дизайнер UX — это две разные профессии

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

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

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

Умение проектировать пользовательские интерфейсы не решает всех проблем UX.

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

Именно такой подход приближает нас к решению конверсионной задачи.

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

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

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

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

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

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

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

А ведь легко создать у посетителя положительный UX: оставляем самые необходимые поля, группируем их поблизости от заголовка формы, визуально уменьшая ее, и в результате меняем поведенческую реакцию с «О, боже! Какая огромная форма!» на «Так, сначала мое имя, затем — email, все просто». Простота — одно из главных правил проектирования пользовательского интерфейса.

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

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

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

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

Теперь сделаем очень важное утверждение:

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

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

UX Matters: плохой UI и хороший UX

Как ни странно, некоторые ресурсы, предоставляющие ценную информацию о проектировании интерфейсов UX, UI, обладают чуть ли не худшими интерфейсами, что мы когда-либо видели. Эти сайты не следуют актуальным трендам в разработке и создают впечатление, что их нисколько не коснулись все новейшие тенденции веб-дизайна. Они не радуют глаз: судя по всему, они прочно застряли в «Средневековье интернета».

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

Ответ на все вопросы: да.

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

Если любопытствующий дилетант (не маркетолог, не дизайнер) хочет воочию увидеть, что такое «Плохой UI, хороший UX», то ему нужно заглянут на веб-сайт банка. Почти любого банка. Веб-программисты и дизайнеры, разрабатывавшие эти веб-интерфейсы, похоже, не знали о существовании каскадных таблиц стилей (CSS, Cascading Style Sheets).

Рассмотрим UI сайта Bank Of India. Страницы неряшливо сверстаны, кнопки выполнены в виде графических элементов (а значит, поисковые роботы их не индексируют), попираются все базовые принципы типографики (даже после того, как Google подарил дизайнерам свои Google Fonts!), контент визуально не выровнен по «сетке» (нарушен один из основных подходов к верстке современных лендингов/сайтов), цвета подобраны странным образом (мы имеем ввиду — действительно странным ) и т. д.

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

Glassdoor: хороший UI и плохой UX

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

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

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

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

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

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

UI интерфейс и представление информации: краткое руководство по имплементации хорошего UX и UI

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

• Предоставляйте информацию в соответствии с ее важностью, т. е. размещайте контент на целевой странице так, чтобы основная и более важная информация визуально выделялась. Пример : используйте всплывающие окна (pop-ups), чтобы отобразить сообщение об успешном завершении интерактивного действия («Удалено» или «Добавлено в корзину») поверх основного массива текста.
• Используйте визуально привлекательные графические элементы. Попробуйте применить анимированную графику (этот совет, как и все прочие, нуждается в проверке сплит-тестом). Пример : сделайте выпадающее меню на вашем сайте более привлекательным, придав ему эффекты ослабления/перехода.
• Уменьшите число кликов, требующихся для выполнения цели конверсии, до минимума. Пример : если вы продаете SaaS-решение для упрощения и облегчения какой-либо маркетинговой операции, например, почтовой рассылки, то и ваше предложение должно загружаться просто и быстро: положительные ассоциации способствуют созданию хорошего UX.
• Воспользуйтесь пробелами как средством ликвидации ненужной информации. Пример: всегда размещайте на странице только критически важный для конверсии контент (выгоды, описание, социальные свидетельства и т. д.). Не нужно размещать «портянки» текста, чтобы просто показать, что вы знаете много умных слов и технических терминов (хотя, конечно, бывают случаи, что только на длинном лендинге посредством подробных объяснений можно выразить суть оффера).
• Уменьшите число кликов, требующихся для выполнения цели конверсии до минимума. Пример : вы продаете SaaS-решение для упрощения и облегчения какой-либо маркетинговой операции, например, почтовой рассылки. Логично будет, что и ваше предложение можно загрузить просто и быстро — положительные ассоциации способствуют созданию хорошего UX.
• Упростите навигацию по контенту. Пример : используйте внутренние ссылки на веб-странице, чтобы показать больше информации по конкретной теме. Оптимизируйте информационную архитектуру вашего веб-ресурса.
• И всегда помните мудрые слова немецкого писателя Томаса Манна (Thomas Mann): «Человеческое поведение имеет смысл, если думать о нем с точки зрения целей, потребностей и мотивов». Эта фраза относится и к дизайну. Подходите к потребностям потенциальных лидов/клиентов с точки зрения технической осуществимости и экономической целесообразности дизайнерских решений. Помните: «дизайн для пользователя, а не пользователь для дизайна».

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

Вместо заключения

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

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

Резюме: определение юзабилити (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) — понаблюдайте, как представители целевой аудитории ведут себя в «естественной среде обитания», т. е. в привычной обстановке при посещении предпочитаемых веб-ресурсов: пользуются ли они , скроллят ли страницу с помощью колеса мыши или движка вертикального скроллбара и т. д.
• Именно так можно составить примерное мнение о том, как представляют себе удобство пользования будущие посетители.
• Создайте несколько простых непроработанных эскизов новых вариантов дизайна и приступайте к пользовательским тестам как можно раньше. Не тратьте время на кропотливую проработку дизайнерских идей — вы должны будете изменить их все на основе результатов испытаний.
• Постепенно переходите от прототипа, отвечающего самым общим требованиям к веб-дизайну, принятым в вашей маркетинговой нише, к кастомизированной высококачественной компьютерной репрезентации вашего лендинга/сайта. Не забывайте проверять каждую итерацию!
• Проверьте дизайн на соответствие общепринятым правилам (существует множество работ на эту тему, например, того же Якоба Нильсена).
• Если вы решили, что окончательно завершили новый вариант дизайна, проверьте его еще раз — мелкие проблемы юзабилити всегда «выползают на свет» именно в ходе имплементации нового интерфейса на веб-ресурс.

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

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

Откуда к нам пришел термин «юзабилити»

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

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

«Золотые» правила успеха вашего сайта

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

JavaScript. Быстрый старт

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

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

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

Правило 2. Размещайте информацию, которая соответствует тематике вашего ресурса.

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

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

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

Правило 5. Это больше не правило, а совет . Установите на своем ресурсе элемент навигации breadcrumbs (его еще называют «хлебные крошки»). Данный элемент выглядит как полоса в верхней части интернет-страницы (Главная страница => Раздел => Категория => Текущая страница). Каждый элемент этой цепи содержит внутреннюю гиперссылку, благодаря которой пользователь может без особых усилий перейти в нужную категорию или раздел, а также узнать. где он в данный момент находится. Вот такие полезные и функциональные «хлебные крошки».

Правило 6. На всех страницах интернет-ресурса должна быть одна и та же система навигации.

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

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

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

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

дизайн ресурса;

расположение функциональных элементов;

текстовое наполнение;

корректировка и форматирование текстов;

логика работы элементов функционала и др.

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

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

Анализ статистики (Google Analytics, Bitrix, Яндекс.Метрики и др.). Практически на любом сайте установлены счетчики, данные которых предоставляются абсолютно бесплатно. Таким образом, этот способ становится самым доступным для владельцев интернет-ресурсов. Вы можете осуществить сравнительный анализ статистики аналогичных сайтов, если есть данный доступ. Основные недостатки метода - поверхностность выводов и недостаточный объем данных.

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

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

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

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

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

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

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

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

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

Зачем это нужно

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

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

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

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

Делаем удобный сайт

Как человек воспринимает информацию

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

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

Правило трех кликов

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

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

О навигации

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

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

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

О контенте

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

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

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

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

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

• Статьи правильнее писать в виде «перевернутой пирамиды», то есть, самая важная информация и ключевые выводы должны быть в самом начале, а наименее важная - в конце. Это помогает сразу завладеть вниманием пользователя: он должен быстро понять, будет ли ему статья полезна или нет;
• Размер статьи не имеет значения (в том числе и с точки зрения SEO), она должна полностью отвечать на вопрос пользователя. Понятное дело, что если в топе статьи размером 10–15 тысяч знаков, то со статьей размером 2–3 тысячи знаков вы не займете лидирующие позиции. Просто потому, что не сможете в таком объеме достаточно полно ответить на вопрос пользователя;
• Для больших статей стоит делать оглавление (с якорями в тексте), которые позволят быстро попасть в нужный раздел;
• Заголовки, списки и продуманная структура материала существенно облегчают его восприятие.

Как выявить проблемы

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

Изучение статистических данных

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

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

Я подчеркнул данные по одному разделу, который явно отличается от других. Глубина просмотра здесь значительно выше, чем в среднем, это можно сказать и про время на сайте. Количество отказов чуть ниже среднего значения по всему сайту. В чем тут дело? Все просто: этот раздел сайта полностью закончен, там есть перелинковка между статьями и дополнительные элементы навигации (рекомендуемые статьи). Уже это дало +0,64 глубины просмотра и +1 минуту и 13 секунд ко времени на сайте.

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

Оценка пользователями

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

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

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

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

Заключение

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