Базовые правила и принципы юзабилити. Главные принципы Usability и основные правила
Резюме: определение юзабилити (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) — понаблюдайте, как представители целевой аудитории ведут себя в «естественной среде обитания», т. е. в привычной обстановке при посещении предпочитаемых веб-ресурсов: пользуются ли они , скроллят ли страницу с помощью колеса мыши или движка вертикального скроллбара и т. д.
- Именно так можно составить примерное мнение о том, как представляют себе удобство пользования будущие посетители.
- Создайте несколько простых непроработанных эскизов новых вариантов дизайна и приступайте к пользовательским тестам как можно раньше. Не тратьте время на кропотливую проработку дизайнерских идей — вы должны будете изменить их все на основе результатов испытаний.
- Постепенно переходите от прототипа, отвечающего самым общим требованиям к веб-дизайну, принятым в вашей маркетинговой нише, к кастомизированной высококачественной компьютерной репрезентации вашего лендинга/сайта. Не забывайте проверять каждую итерацию!
- Проверьте дизайн на соответствие общепринятым правилам (существует множество работ на эту тему, например, того же Якоба Нильсена).
- Если вы решили, что окончательно завершили новый вариант дизайна, проверьте его еще раз — мелкие проблемы юзабилити всегда «выползают на свет» именно в ходе имплементации нового интерфейса на веб-ресурс.
Не откладывайте пользовательское тестирование до той поры, когда новый вариант дизайна будет полностью «введен в строй». Если вы это сделаете, будет невозможно исправить подавляющее большинство критических проблем.
Доброго дня вам, уважаемые читатели моего блога. Популярным инструментом продаж услуг и товаров в интернете является сайт. Как сделать так, чтобы пользователи не просто заходили полюбоваться красивыми картинками, но делали именно то, что вам нужно: совершали покупки, оформляли подписку на материалы?
Поведением пользователя на сайте можно управлять. Для этого существует юзабилити, основные принципы которого мы рассмотрим в статье.
Но даже если у вас нет своего сайта, понимание основ юзабилити можно превратить в источник неплохих денег. Интересно? Тогда читайте дальше.
Проблема большинства владельцев сайтов одинакова. В веб-разработку вложены большие деньги, но инструмент не работает!
Пользователи не совершают тех действий, которые ждет от них продавец. Не покупают, не подписываются на обновления, быстро уходят, низкий процент повторных обращений. В чем дело?
А ответ на поверхности – сайт для пользователя неудобный!
Что это значит? Например, чтобы найти информацию об оплате и доставке пользователю нужно пролистать несколько страниц. Никто не хочет тратить лишние усилия на поиски. Поэтому нужно предлагать простые решения.
Принципы юзабилити в интерфейсе
Есть несколько важных правил в дизайне, которые нужно учитывать при его разработке.
Первое правило носит название «Правило 7». Основано оно на особенностях работы человеческой кратковременной памяти.
Охватить вниманием человек способен от 5 до 9 объектов, в среднем это Не нужно перегружать страницы обилием объектов среди которых легко потеряться, ограничьтесь семью.
Второе правило – это правило двух секунд. Никто не хочет ждать пока прогрузится сложная, забитая графикой и флеш-заставками страница. Поэтому стоит подумать много раз, прежде чем так поступать.
Возможно, это сделает сайт визуально более привлекательным, но пользоваться им не будут.
Следующее правило звучит как правило трех кликов. Это значит, что пользователь должен совершить максимум три перехода до того момента, как найдет нужную информацию. Такие сайты любят не только посетители, но и поисковые роботы.
Правило Фиттса. Суть его в том, что не нужно делать крупные предметы еще более крупными, человек их и так заметит.
Принцип перевернутой пирамиды . Это значит, что посетитель должен сначала получать самую важную информацию и постепенно переходить к менее значимой. Такой подход экономит время на поиски, что вызывает у пользователей положительные эмоции.
Тестирование интерфейса
Даже если вы уверены в том, что выполнили все правильно, интерфейс нуждается в обязательном тестировании. Для этого нужно собрать группу людей, которые будут принимать участие в тесте и подготовить список самых востребованных задач, которые пользователь должен решить при помощи вашего сайта.
Допустим, найти товар, оформить заказ, оплатить, поменять товар в корзине, получить информацию о доставке и другие.
Все всплывающие в ходе тестов ошибки нужно фиксировать письменно, даже самые незначительные. Устранить все недочеты. Шаги повторять до тех пор, пока не будет получен необходимый результат.
Чужими руками или самостоятельно?
Разработка интерфейса может быть выполнена самостоятельно или руками привлеченных специалистов.
Например, на этой бирже weblancer.net
можно заказать услуги по разработке дизайна и верстке сайта. Вложенные средства окупятся очень быстро.
Также вы можете пройти обучение мастерству создания работающих сайтов. Например, здесь вы найдете много качественных, работающих курсов.
Эти программы могут быть полезны не только владельцам сайтов, но и людям, которых интересует хорошо оплачиваемая работа в интернете.
Пройдя обучение, вы становитесь специалистом, который может помочь качественно в интернете, сделать его более прибыльным.
Такие специалисты востребованы на рынке труда и могут рассчитывать на хорошую оплату.
Обучающие курсы содержат видеоматериалы от ведущих специалистов российского интернета, практические материалы, чек-листы и интеллект-карты. Изучить информацию вы можете в удобное для вас время.
Например, на курсе «Проведение аудита юзабилити сайтов » вы научитесь видеть и исправлять ошибки, которые приводят к потере больших сумм денег, сможете обеспечить попадание в топ-10 только за счет того, что исправите эти ошибки.
Принципы юзабилити контента
Говоря о юзабилити, не стоит упускать из виду важность контента. Каким бы удобным ни был сайт с точки зрения дизайна, главное, зачем приходит человек – это качественная информация, контент.
Признаки качественного контента:
логичность информации;
простота подачи;
наличие структуры.
Текст, написанный простыней, не воспринимается. Такие статьи закрывают, даже не пытаясь в них вчитываться. Поэтому в любой статье должна быть четкая структура: подзаголовки, списки, врезки, выделенные основные мысли.
Все это позволяет пользователю экономить время на поиске нужной информации.
Где брать такие тексты?
Можно писать их самостоятельно, привлекать для работы профессиональных копирайтеров или покупать готовый контент на бирже, например, здесь — textsale.ru
От автора: сегодня у нас очень важная тема - принципы и правила юзабилити сайта. Об этом написано множество книг и статей. Величайшие умы человечества выводили свои формулы удобства использования сайта. Казалось бы, как можно угодить всем пользователям Интернета, ведь они такие разные? Но, как показывают исследования, существуют определенные паттерны поведения пользователей на сайте, которые необходимо учитывать при его разработке. Конечно, если целью ресурса является привлечение трафика и получение прибыли, а не запугивание кислотной расцветкой, мигающими баннерами (а еще лучше, со звуком) и загадочной навигацией.
Принципы юзабилити интерфейсов
Самый главный принцип, который должен пройти красной нитью через весь интерфейс, звучит так: «чем проще, тем лучше». Смысл его состоит в том, что использование стандартных приемов оформления веб-страниц существенно облегчает пользователю жизнь.
Ведь, если он уже видел где-то подобную навигацию, расположение кнопок и пунктов меню, то будет знать, как этим всем пользоваться. А значит, будет уверенно чувствовать себя на вашем сайте. Остальные принципы юзабилити сайта для удобства я разбил на несколько смысловых групп.
Принцип 1. Навигация. Горизонтальное и вертикальное меню.
Основа юзабилити сайта - это удобная и понятная навигация. В горизонтальном меню должны находиться основные разделы, а в вертикальном - дополнительные. В последнее время все чаще встречаю сайты без вертикального меню, то есть, упрощенные до предела. Но это зависит от особенностей ресурса и размещаемого на нем контента.
JavaScript. Быстрый старт
Если, избавившись от вертикального меню, вы получите сложное и запутанное горизонтальное, то от этого приема лучше воздержаться. Кроме этого, имеет смысл продублировать главное меню в футере. Если ваш сайт имеет сложную структуру, сделайте для нее отдельную страницу, где в виде древовидного, интуитивно понятного списка выведите перечень всех категорий и подкатегорий.
Принцип 2. Отсутствие ошибок.
Тестирование и еще раз тестирование. Каждый день. Без выходных и праздников. Сайт должен работать корректно, ведь каждая секунда его неправильной работы, каждая ссылка, ведущая в никуда, или кнопка на несуществующую страницу будут стоить вам посетителей и клиентов. Никто не будет задерживаться на нерабочем сайте. И не забудьте оформить 404-ю страницу в стиле вашего веб-ресурса.
Принцип 3. Правильное оформление шапки сайта.
Именно в верхней части сайта люди чаще и дольше задерживают свой взгляд. Некоторым даже лень прокручивать страничку вниз. Каюсь, я тоже отношусь к этой группе пользователей. Если в хэдере нет нужной мне информации (меню, контактные данные, телефоны и т. д.), вряд ли я буду тратить время на ее поиски. В общем, вы поняли - в шапке размещаем все данные, на которые хотели бы обратить внимание клиентов, в первую очередь.
Принцип 4. Свободное пространство.
Вероятно, вам встречались сайты, на которых каждый лишний сантиметр чем-то «затыкался» - какими-то баннерами, иконками, кнопочками, анимацией. Скученный текст, куча ненужной информации, брррр. Такие сайты должны гореть в специальном аду для тех, кто не знает принципы юзабилити и психологии восприятия.
Настоящие мастера веб-дизайна всегда оставят на сайте свободное пространство, а текст оформят с нормальным междустрочным интервалом, чтобы пользователю было легче дышать, а информация воспринималась легко и доступно.
Принцип 5. Качественный текст.
К качеству текста относятся не только его смысловая составляющая и отсутствие ошибок, но и правильное форматирование. Про междустрочный интервал я уже упоминал, осталось рассказать о приемах, благодаря которым можно привлечь больше внимания к вашему контенту. Это:
наличие заголовков и подзаголовков;
выделение ключевых слов и важной информации (жирным шрифтом, сносками, маркерами и т. д.);
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
использование нумерованных и маркированных списков;
разбивка текста на абзацы, состоящие из 3-4 предложений.
Принцип 6. Поиск по сайту.
Казалось бы, и так понятно, что на веб-ресурсе должен быть внутренний поиск. Но нет - сплошь и рядом встречаются сайты, на которых нет и намека на этот важнейший элемент юзабилити. А ведь большинство пользователей приходит на веб-сайт с четкой целью: найти какую-то информацию и побыстрей.
Сделав поисковую строку и фильтр, вы осчастливите и себя, и потенциальных клиентов. Они найдут то, что им надо, вы - увеличите свою конверсию и, возможно, получите постоянного покупателя.
Принцип 7. Скорость загрузки.
В продолжение предыдущего требования к юзабилити сайта - люди очень нетерпеливы, они приходят в Интернет за информацией и хотят получить ее максимально быстро. По результатам исследования Nielsen Norman Group, пользователи в среднем проводят на веб-странице 27 секунд и редко прокручивают ее до конца. Происходит это потому, что в Интернете много хлама и бесполезной информации - если бы люди подробно изучали каждый ресурс, они бы сошли с ума.
Поэтому у вас есть всего несколько секунд, чтобы рассказать посетителю о себе, заинтересовать его и подвигнуть на дальнейшие действия. А если большую часть из этого отведенного вам времени будет занимать загрузка сайта, то шансов завлечь потенциального клиента у вас практически не остается - он просто уйдет на другой сайт. Вот этим вопросом, как привлечь и удержать посетителя, и занимается юзабилити.
Якоб Нильсен
Юзабилити это качественный признак, который определяет, насколько интерфейс пользователя легок в использовании. Слово «юзабилити» также обозначает набор методов, служащих для улучшения интерфейса во время процесса его разработки.
У юзабилити есть пять количественных составляющих:
* Обучаемость: насколько легко пользователи могут выполнить основные задачи, впервые встретившись с незнакомым им интерфейсом?
* Эффективность: после того, как пользователи ознакомятся с дизайном, как быстро они могут выполнить то же задание?
* Запоминаемость: После того, как пользователь снова вернется к интерфейсу через определенный промежуток времени, насколько легко ему будет восстановить свои навыки работы с данным интерфейсом?
* Ошибки: сколько ошибок делает пользователь, насколько серьезны эти ошибки, насколько легко пользователь может исправить эти ошибки?
* Удовлетворенность: насколько пользователю приятно пользоваться данным интерфейсом?
Помимо юзабилити существует еще множество других важных качественных признаков дизайна. Один из ключевых - полезность, который описывает функциональность дизайна и отвечает на вопрос: является ли интерфейс тем, что пользователю нужно? Юзабилити и полезность одинаково важны: какой толк в программе, пусть даже и удобной в использовании, если она не делает то, что вам нужно? Плоха и та программа, которая гипотетически делает то, что вам нужно, но вы не можете с ней работать из-за ее сложного интерфейса. Для изучения полезности программы вы можете пользоваться теми же методами, что и при изучении качества ее юзабилити.
В Web-е юзабилити является необходимым условием выживания. Если с веб-сайтом трудно работать, посетители просто уходят с него. Если главная страница сайта не заявляет четко и ясно, чем занимается компания, и что какие задачи сайт позволяет выполнить, посетители уходят. Если сайт запутанный, посетители уходят. Если информация на сайте трудна для восприятия и не отвечает на ключевые вопросы посетителей, они уходят. Не бывает таких посетителей, которые внимательно изучают «справочное руководство по работе с сайтом» или тратят свое время на освоение его интерфейса. В Web-е полным полно других сайтов, поэтому уйти с сайта - первое побуждение, возникающие у посетителей, когда они наталкиваются на трудность.
Первое правило e-комерции гласит: если посетители не могут найти товар, они никак не смогут его купить.
Сегодняшний опыт показывает, что примерно 10% бюджета проекта должно тратиться на юзабилити. В среднем это поможет увеличить качество веб-сайта более чем в два раза, и чуть меньше чем в два раза В среднем это поможет увеличить качество веб-сайта более чем в два раза, и чуть меньше чем в два раза, качество интранет-сайта. Что касается ПО и других продуктов, степень улучшения качества, как правило, немного ниже, но все равно значительна.
При разработке продуктов для внутреннего пользования считайте, что улучшение юзабилити в 2 раза означает сокращение времени на обучение пользователей в два раза, позволит удвоить объем продаж, количество зарегистрированных пользователей и заказов, и вообще, увеличить в 2 раза тот результат, которые вы ожидаете получить от проекта.
Существует множество методов изучения юзабилити, но самый основной и самый полезный - это тестирование вашего дизайна пользователями.
Оно состоит из трех элементов:
Выберите пользователей, наиболее типичных для вашего проекта/продукта, например, посетителей коммерческих сайтов или сотрудников вашей компании, которые часто пользуются интернетом (в последнем случае должны быть выбраны те, кто не работает в вашем отделе);
- Попросите их выполнить наиболее типовые задачи;
- Следите за тем, что делают пользователи, где у них все получается, где возникают сложности с интерфейсом. Молчите и слушайте, что они скажут.
Самое важное - проводить тестирование с каждым пользователем. Пускай каждый из них самостоятельно решает проблемы, которые возникают перед ним.
Если вы будете им помогать или привлекать внимание к какому-то определенному элементу на экране, вы испортите результаты теста.
Для выявления наиболее серьезных проблем с юзабилити, достаточно привлечь к тестированию 5 пользователей. Вместо того, чтобы тратиться на большое дорогое исследование, лучше всего провести несколько мелких тестов и вносить изменения в дизайн после каждого из них: так вы сразу сможете исправить выявленные ошибки. Этот метод постепенного дизайна лучше всего позволяет улучшить качество конечного продукта. Чем больше версий и идей вы откатаете на пользователях, тем лучше.
Юзабилити играет свою роль на каждом этапе реализации проекта. Оценка качества интерфейса на каждом этапе - лишь одна причина по которой я рекомендую проводить многократные быстрые и дешевые тесты. Вот как это выглядит:
Перед началом разработки нового дизайна, проведите тестирование старого дизайна, чтобы выявить в нем хорошие моменты, которые надо оставить или усилить, и плохие моменты, которые вызывают затруднения у пользователей.
В случае если вы работаете не над интранет-проектом, исследуйте дизайн ваших конкурентов, чтобы за дешево получить данные о возможных вариантах интерфейса, имеющих те же функции, что и ваш.
Проведите тестирование в реальных условиях, чтобы оценить, как работают с интерфейсом пользователи в обстановке своего рабочего места.
Создайте бумажные прототипы одного или нескольких вариантов дизайна и испытайте их на пользователях. Чем меньше времени вы потратите на реализацию той или иной идеи, тем лучше, так как вам все равно придется менять дизайн по результатам тестов.
Отшлифуйте идеи, которые дают лучшие результаты по нескольким тестам. Постепенно продвигайтесь от схематичного дизайна на бумаге к более подробному и детальному на компьютере. Проводите тесты на каждом этапе внесения изменений.
Проверьте дизайн на соответствие общепринятым правилам юзабилити.
После того, как вы приняли решение по окончательному варианту и реализуете его, протестируйте его еще раз. На этапе реализации всегда находятся мелкие ошибки.
Не откладывайте тестирование дизайна на пользователях до самого последнего момента. Если вы поступаете так, большинство критических ошибок, которые будут найдены во время теста, будет уже невозможно исправить. Многие из этих ошибок будут носить структурный характер, и для их исправления придется переделать все заново.
Единственный способ получить качественный пользовательский интерфейс - начать тестировать с самого начала развития проекта и продолжать проводить тесты на каждом этапе.
Закажите аудит вашего сайта в Webcom Performance, сотрудники проведут вам детальный анализ всех параметров сайта и предоставят вам подробный отчёт с рекомендациями по исправлению ошибок на сайте, улучшению структуры и его функциональности.
Читая про эвристические методики оценки дизайна и юзабилити, я обратил внимание, что все ссылаются на некие общепринятые принципы юзабилити, однако, никто не пишет какие. Тут два варианта: или они настолько понятны и естественны, что о них даже и не стоит говорить, или же толком никто не знает, что же это за принципы. Проанализировав статьи, которые на них ссылаются, да и просто подумав обе поисковые системы, я пришел к неутешительному выводу: толком никто ничего не знает, а все статьи – это неточные копии одной из статей Якоба Нельсона. Некоторые даже оставили ссылку на эти самые общепринятые принципы.
Увы, я не нашел ни одной статьи на русском (или украинском) языке, где бы они раскрывались. А посему, я решил, что стоит все-таки перевести и немного расшифровать эти самые принципы.
Итак, 10 общепринятых принципов юзабилити. Рассмотрим их более подробно.
1. Видимость статуса системы.
Этот принцип означает, что пользователь ВСЕГДА должен знать, что происходит и на каком участке пути он остановился. Если это сложная регистрация, указывайте, что это 2 шаг из 3. Если что-то закачивается или работает какой-то скрипт – выводите % обработки. И т.д.
Простой пример – уверен что каждый сталкивался с ситуацией, когда вы по какой-то иконке кликнули, но ничего не происходит. Судя по тому, как активно крутиться винт и мигает монитор – что-то все-таки происходит, и через несколько минут открывается окно программы, например (у меня так до сих пор открывается ИЕ). А что делать в интернете, когда все грузиться не на вашем компьютере, а на сервере в другой стране. Большинство пользователей просто несколько раз нажимают на кнопку «отправить», загружают одни и те же файлы несколько раз и т.п. А все потому, что отсутствует эта самая связь между пользователем и системой.
Следует внимательно следить за тем, чтоб система всегда четко и однозначно реагировала на действие пользователя. Есть такой момент – между действием и реакцией должно пройти максимум 1 секунда – это не причуда юзабилистов. Научно выяснено, что это именно то время, которое наш мозг держит причинно-следственную связь, типа сделал-получил. Если же реакция на ваше действие идет позже, чем через секунду – мозг воспринимает это как отдельное действие, лишь отдаленно связанное с предыдущим.
И еще одна граничная цифры – 10 секунд. Пользователь должен получить то, что он хочет в течении 10 секунд после своего действия (например, просматривая результаты поиска, пользователь открыл 5 окно. Затем быстро просматривает каждое из них. Если после того как он открыл окно в течении 10 секунд он туда не вернулся – считайте что он для вас потерян).
(цифры сам не проверял и не придумывал, взято с книги).
(это пример из Контакта. При загрузке фотографий вы видите процесс и оцениваете, сколько еще осталось ждать).
Следующий принцип говорит нам о том, что ваш сайт должен быть сделан под определенную аудиторию и вы должны общаться с ней на ее языке, используя ее обозначения и уровень подготовленности.
Буквально пару дней назад я смотрел два сайта компьютерной тематики с довольно похожей структурой и дизайном. НО! Один был посвящен особенностям настройки операционной системы, а второй – компьютерные курсы для начинающих.
Как вы понимаете, это две совершенно разные аудитории, и фраза «кликните 35 строку в реестре» будет более чем понятна для аудитории первого сайта, 99% пользователей второго сайта повергнет в шок.
Поэтому, всегда учитывайте свою аудиторию, и делайте сайт всегда для нее. Это касается не только текстов, но и структуры, помощи, дизайна, визуального восприятия информации и т.д.
(уже с первого взгляда понятно, на кого направлена информация на этом сайте. Новичок даже читать не будет что там. Уже по оформлению понятно, что она для программистов).
3. Пользовательское управление (свобода выбора)
Пользователь всегда должен контролировать ситуацию, так сказать держать руку на пульсе (ну или как минимум у него должно создаваться такое впечатление). Что это означает на практике? Например, при заполнении формы обязательно должна быть кнопка «очистить форму». Если форма предусматривает несколько шагов – пользователь должен вернуться на предыдущий шаг, или наоборот, по возможности – пропустить какой-то, чтоб попозже вернуться к нему.
Такая ситуация создаст у пользователя впечатление, что именно он «всем рулит», его не пытаются обмануть и запутать. И усложнение на первый взгляд интерфейса при правильном подходе станет упрощением. Ведь людям гораздо проще сделать 2-3 простых действия, чем одно сложное (здесь штука в том, что пока пользователь заполняет второй шаг, он еще думает что может отменить первый, но уже задумывается и о третьем).
(при создании проекта в Сеолибе, вы видите, на каком этапе находитесь, сколько еще осталось. Так же вы можете вернуться к предыдущему шагу, или пойти дальше, пропустив этот).
4. Последовательность и стандарты.
Еще один принцип, который кажется очевидным, но увы – так редко используемый на практике. Скажите, вы легко можете в интерфейсе любой Офисной программы Микрософт можете создать новый документ? Сохранить его? Отцентрировать текст? А ведь это не всегда такие простые операции…
Все дело в том, что кампания Микрософт в своих продуктах придерживается этого принципа (хотя часто и нарушает многие другие). У них во всех продуктах одни и те же иконки находятся в одних и тех же местах и выглядят одинаково.
В интернете уже есть определенные устоявшиеся обозначения и стандарты (например, вид корзины, контакты в верхнем углу и т.д.). Тем ни менее, если вы посмотрите, сколько разных видов корзин (по Яндекс или Гугл картинкам), вы поймете, что неопытный пользователь может серьезно заблудиться среди всех этих тележек, электронных корзин, ультра-модных пакетиков и т.д.).
Что же касается последовательности – то выбрав какой-то определенный стиль – соблюдайте его везде. Это касается и шрифтов, и картинок, и текста и верстки.
Я много раз видел, как расположение товара и верстка страницы отличалась в разных разделах. Создатели сайта считают это «креативной фишкой». Если они делают его для себя – то можно так и оставить, но если вы делаете это для пользователя, то как вы ему объясните, почему дизайн страницы при выборе принтера должен так сильно отличаться от дизайна страницы выбора оперативной памяти (в рамках одного и того же магазина)?
(как видно в этом примере, все иконки совершенно одинаковые в Ворде, Экселе и PP. Осваивая какой-либо новый продукт компании Микрософт, минимум половина функций вам сразу будет понятна).
5. Профилактика ошибок.
Этот принцип гласит, что ошибку проще предупредить, чем исправить. Везде, где можно упростить выбор и убрать ненужные, случайные действия – следует убрать.
На практике это может быть: подсказка при вводе с клавиатуры чего бы то ни было (города/страны например).
Это касается и кнопок. Например, ПРИНЯТЬ, обычно делают крупнее и ярче, чем Очистить форму. Если вам что-то известно о вводимой информации – подсказывайте ее пользователю (формат телефона или код региона) и т.д.
(в данном случае, пользователь не может пройти дальше, пока не разберется с этими настройками и не выберет хотя бы один вариант анализа сайта. Это намного удобней, чем потом сообщать пользователю что-то типа “выберите хотя бы один вариант, или неверно заданы параметры.)
Максимально упрощайте жизнь пользователю, делайте ему подсказки, запоминайте вводимую ранее им информацию (не только на предыдущей странице, но и с его прошлых посещений сайта).
Например, если у вас опять же многошаговая форма регистрации, показывайте ему уже заполненные поля, если они могут понадобиться в дальнейшем.
Кроме того, постарайтесь минимизировать количество текстовых полей, где пользователь должен что-то вводить сам. Давайте ему варианты (подсказки), чтоб он мог выбрать из уже имеющихся вариантов.
(подсказка региона выскакивает при вводе хотя бы одной буквы. И если пользователь не знает, как правильно пишется город – он просто кликает по одному из предложенных вариантов).
7. Гибкость и эффективность использования.
Одна из самых больших проблем – это как соединить простоту интерфейса и его функционал? Как сделать так, чтоб один и тот же интерфейс был понятен и удобен как профессиональному пользователю, так и новичку?
Этот принцип гласит, что интерфейс должен быть гибким, настраиваемым и с расчетом на ту аудиторию, которая преобладает. Делайте основной упор на простоту из расчета на простого пользователя. Элементы для продвинутых можно сделать значительно меньше и поставить в менее заметные части экрана, т.к. он их найдет везде.
Ярким примером является Карта сайта. Согласитесь, что новичок туда вообще не полезет, а опытный пользователь найдет внизу экрана мелким шрифтом эту «карту сайта», или маленькую иконку где-то сбоку.
Другой пример – кликеры/тайперы. Т.е. на каждую страницу можно попасть или из меню, кликая по навигации, или с помощью поиска по сайту. Оба варианта должны поддерживаться и в конечном итоге приводить к одинаковому результату.
(мы видим простой поиск для большинства пользователей, а так же расширенный, для продвинутых. При этом функции расширенного поиска спрятаны довольно далеко и только опытный пользователь может их найти, т.е. по сути только тот, кому он и нужен).
8. Эстетический и минималистический дизайн
Этот принцип гласит – в интерфейсе не должно быть информации, которая не нужна пользователю или которая может понадобиться ему в редких случаях. Аналогичным образом и в формах: вы не должны у пользователя спрашивать ту информацию, которая вам не нужна, или нужна в каких-то исключительных случаях.
К сожалению, этим принципом практически никто не пользуется. В 90% случаев при регистрации вас спрашивают и домашний телефон, и мобильный, и адрес и e-mail, и даже дату рождения. А все для того – чтоб поздравить вас с новым годом и днем рождения.
Все дополнительные данные вы сможете уточнить позже, при необходимости. А изначально, при регистрации например, или при оформлении заказа спрашивайте только ту информацию, которая вам действительно необходима.
Точно так же, на сайте (или в программе, эти принципы универсальны), не стоит выводить пользователю ту информацию, которая может быть когда-нибудь ему понадобиться. Например, возьмем тот же Микрософтовский Ворд. Скажите, как часто вы пользуетесь функцией «навигатор» или в вставкой Дата-Время? А тем ни менее, эти кнопки всегда на виду в тулбаре (в зависимости от версии кнопки могут быть разными, но я уверен что если вы посмотрите на них, вы найдете минимум 40% иконок, которыми вы НИКОГДА не пользовались, и даже не знаете что они делают).
(вот типичный пример. При регистрации Озон спросил меня и Имя и Фамилию. При этом, единственное где используется мое имя – это заголовок к письму. Фамилию вообще ни разу не видел, чтоб использовали. И спрашивается – зачем им эти данные? Ведь есть ник. Т.е. форму можно сократить вдвое легко…).
9. Помочь пользователю понять и исправить ошибку.
Скажите, что означает ошибка базы данных в строке 433? Или длинные жуткие ошибки в строке памяти LXR-XXX-5438645?
Все эти системные сообщения должны сохраняться в логах для администратора сайта/системы. Пользователю же пишите нормальным языком, в чем конкретно ошибка. Более того, пользователя по сути интересует только одно: виноват он или система? И можно ли что-то сделать?
Уверен, что у вы сталкивались с тем, что заполняете форму, нажимаете отправить, а вам в ответ какая-то ошибка базы данных. И ты сидишь и мучаешься двумя главными вопросами: кто виноват и что делать? Ушла ли форма? Если да, то вся ли информация? Или попробовать отправить еще раз?
Хотя все же такие серьезные ошибки встречаются все реже. Но другой вариант бесит еще больше – ты заполняешь довольно длинную форму, нажимаешь отправить и видишь красную надпись (или всплывающее окно) – внимательно заполните все поля, отмеченные звездочкой.
И снова ты сидишь и думаешь – какие поля? Какой звездочкой? Вроде бы я все заполнил, внимательно просмотрел… а потом оказывается что там номер телефона надо написать с пробелами, а не дефисом.
