Главные принципы Usability и основные правила. Юзабилити – истоки возникновения и основы юзабилити

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

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

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

Гораздо чаще, причины неуспеха сайта в более простых вещах: например, если пользователь не увидел в правой части шапки контакты фирмы – владелец теряет около 20% возможной прибыли. Если забыли в главном экране (без прокрутки) указать, чем конкретно фирма занимается (это не фантастика, такие случаи сплошь и рядом) – отминусуйте ещё 20 процентов прибыли. Несколько таких косяков в оформлении и все усилия по разработке сайта пошли прахом. Большинство принципов юзабилити для простого сайта-визитки предельно просты, просто почти никто про них не знает.

Потому я постараюсь написать кратко и просто, а Вы пройдитесь по своему сайту и сверьтесь, что на нём есть, а чего нет:).

Что такое юзабилити сайта?

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

Удобство или красота?

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

Корректная верстка

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

F-образный шаблон – один из главных «секретов» юзабилити

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

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

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

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

Ориентация на местности

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

Обязательные элементы:

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

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

Для юзабилити сайта очень важно сочетание цветов

На этот счёт есть простые и чёткие принципы юзабилити. О них можно прочитать в статье

Прокрутка (скроллинг)

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

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

Поля и отступы

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

Шапка

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

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

Меню - горизонтальное или вертикальное?

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

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

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

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

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

Пункты меню

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

Форма поиска, входа, регистрации и тому подобное

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

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

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

Анимация

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

Звук

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

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

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

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

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

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

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

А ответ на поверхности – сайт для пользователя неудобный!

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

Принципы юзабилити в интерфейсе

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

Первое правило носит название «Правило 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 секунд и редко прокручивают ее до конца. Происходит это потому, что в Интернете много хлама и бесполезной информации - если бы люди подробно изучали каждый ресурс, они бы сошли с ума.

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

14 ноября 2011 в 19:02

Принципы юзабилити: понятно, удобно, комфортно. Коротко о главном

  • Блог компании Digital Professionals Hub

В современном мире понимание основ юзабилити является необходимостью. Большинство посетителей сайта не совершают действий, которых от них ждут владельцы ресурсов. Люди не заказывают товар, не регистрируются, не подписываются на обновления и т.д. В чем причина такого поведения пользователей?
Причина проста – ресурс оказывается неудобным для пользователя. Например, для того чтобы «заказать» продукт, приходится пройти несколько страниц, а кнопку регистрации и вовсе невозможно обнаружить. Это делает ресурс неконкурентоспособным.
Как уменьшить количество отказов от использования сайта? Если проект нуждается в основательном подходе, можно обратиться в студию, к специалистам. Юзабилити-лаборатории предлагают не только различные варианты тестирования и проектирование интерфейса. А если бюджет ограничен, можно попробовать познать азы юзабилити самостоятельно.

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

  1. Правило 7-ми.
    Известно, что способности человеческого мозга небезграничны. Человек способен держать в кратковременной памяти не более 5-9 сущностей. Поэтому не следует размещать в навигации больше 7 пунктов.
    С этой точки зрения сайт tutu.ru , безусловно, заслуживает хороших отзывов, поскольку основной функционал удалось разместить в шапке сайта, ограничиваясь 4 пунктами меню и выпадающим списком.
    В то время как сайт Российских Железных дорог - отличный пример того, как делать не надо. От количества разрозненной информации пестрит в глазах, хочется просто закрыть его и больше никогда не заходить.
  2. Правило 2х секунд.
    Чем меньше пользователь ждет отклика программы, сайта или приложения, тем больше вероятность того, что он не откажется от использования этого продукта. 2 секунды – это оптимальный временной интервал отклика программы, именно к нему стоит стремиться. Так что стоит сто раз подумать, прежде чем ставить на сайт тяжелую флэшевую заставку, как это сделали на mtv.ru .
  3. Правило 3х кликов.
    Никому не нравится серфить страницы, в поисках необходимой информации и функционала. У посетителя должна быть возможность попасть с главной страницы на любую другую страницу сайта, сделав не более 3-х кликов. Это способствует и более успешной индексации сайта поисковыми роботами.
  4. Правило Фиттса
    Опубликованная Паулем Фиттсом в 1954 году модель движений человека, определяет время, необходимое для быстрого перемещения в целевую зону как функцию от расстояния до цели и размера цели.
    Метафорически правило можно объяснить так: легче указать на зажигалку, чем на спичку. Но указать на утес или огромный дирижабль одинаково просто. Если объект интерфейса, например ссылка, и без того достаточно крупный, нет смысла делать его еще крупнее.
  5. Перевернутая пирамида
    Этого принципа придерживается сам гуру юзабилити, Якоб Нильсен. Статья должна начинаться с итогового вывода, за которым следуют ключевые моменты, а завершаться наименее важной для читателей информацией. Это оптимально для веба, где пользователь хочет получить информацию максимально быстро.
Но даже спроектированный по всем правилам интерфейс стоит протестировать. Фокус-группы – самый доступный способ для тестирования «своими силами».

Тестирование состоит из четырех этапов:

  1. Подбор фокус-группы. Тестировщики должны соответствовать вашей целевой аудитории. Не стоит просить бабушку протестировать приложение для поиска обновлений драйверов.
  2. Составление плана тестирования – списка задач, для выполнения которых разработан ваш продукт. Именно этому списку будут следовать тестировщики. Если вы делаете интернет-магазин, в список должны быть включены такие задачи как поиск товара, получение информации о товаре, путь от получения информации о товаре к его заказу, удаление товара из корзины.
  3. Выполнение тестировщиками списка задач и фиксирование ошибок. Ошибкой можно считать все что угодно: слишком сложная капча, отсутствие сообщения от сервера о том, что «товар добавлен в корзину», невозможность изменить количество товаров в корзине или отменить действие, и т.д.
  4. После выявления и исправления ошибок цикл тестировки нужно пройти заново. Цикл должен повторяться до тех пор, пока результаты не будут удовлетворять необходимым требованиям.
Оценка качества интерфейса должна проводиться на каждом этапе проекта. Не откладывайте тестирование юзабилити до самого последнего момента. Серьёзные ошибки просто нельзя будет исправить из-за того, что проект находится на завершающей стадии. И тогда - либо переделывать заново, либо получить низкий показатель юзабилити.
Как правило, достаточно 5 тестировщиков для выявления основных багов.

Пример по теме

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


Кнопка «enter» звучит как призыв попасть на главную страницу сайта. Но вместо главной страницы попадаем на «чистый лист».


Здесь взгляд приковывает изображение красной ленты, и мы, конечно, думаем, что это ссылка, и может даже на меню. Но нет – это всего лишь символ борьбы со СПИДом, который призван обозначить общественную позицию певца и не более. И тогда рука тянется в левый верхний угол. А там и не меню вовсе, а кнопка полноэкранного режима. Несколько секунд в замешательстве, и поиски окончены, вожделенное меню внизу, в центре экрана. Кликаем… и видим ПЛЕЕР! Нас снова обманули.


Пока в плеере транслируется клип, мы продолжаем искать меню. Теперь оно наверху, в самом центре. В выпадающем списке мы, наконец, наблюдаем желанное слово «Контакты». Но и тут не все так просто. Эти контакты нельзя скопировать. Придется переписывать вручную!


Теперь о цифрах. Время ожидания отклика в зависимости от скорости соединения может разниться, но в любом случае это будет больше 2х секунд. А путь до страницы контактов менеджмента занял 7 кликов. А мог бы занять всего один.
Влад Топалов, конечно, может позволить себе такие «креативные» решения. Но очевидно, что такие решения просто губительны для бизнеса.

В современном мире понимание основ юзабилити является необходимостью. Большинство посетителей сайта не совершают действий, которых от них ждут владельцы ресурсов. Люди не заказывают товар, не регистрируются, не подписываются на обновления и т.д. В чем причина такого поведения пользователей?
Причина проста – ресурс оказывается неудобным для пользователя. Например, для того чтобы «заказать» продукт, приходится пройти несколько страниц, а кнопку регистрации и вовсе невозможно обнаружить. Это делает ресурс неконкурентоспособным.
Как уменьшить количество отказов от использования сайта? Если проект нуждается в основательном подходе, можно обратиться в студию, к специалистам. Юзабилити-лаборатории предлагают не только различные варианты тестирования и проектирование интерфейса. А если бюджет ограничен, можно попробовать познать азы юзабилити самостоятельно.

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

  1. Правило 7-ми.
    Известно, что способности человеческого мозга небезграничны. Человек способен держать в кратковременной памяти не более 5-9 сущностей. Поэтому не следует размещать в навигации больше 7 пунктов.
    С этой точки зрения сайт tutu.ru , безусловно, заслуживает хороших отзывов, поскольку основной функционал удалось разместить в шапке сайта, ограничиваясь 4 пунктами меню и выпадающим списком.
    В то время как сайт Российских Железных дорог - отличный пример того, как делать не надо. От количества разрозненной информации пестрит в глазах, хочется просто закрыть его и больше никогда не заходить.
  2. Правило 2х секунд.
    Чем меньше пользователь ждет отклика программы, сайта или приложения, тем больше вероятность того, что он не откажется от использования этого продукта. 2 секунды – это оптимальный временной интервал отклика программы, именно к нему стоит стремиться. Так что стоит сто раз подумать, прежде чем ставить на сайт тяжелую флэшевую заставку, как это сделали на mtv.ru .
  3. Правило 3х кликов.
    Никому не нравится серфить страницы, в поисках необходимой информации и функционала. У посетителя должна быть возможность попасть с главной страницы на любую другую страницу сайта, сделав не более 3-х кликов. Это способствует и более успешной индексации сайта поисковыми роботами.
  4. Правило Фиттса
    Опубликованная Паулем Фиттсом в 1954 году модель движений человека, определяет время, необходимое для быстрого перемещения в целевую зону как функцию от расстояния до цели и размера цели.
    Метафорически правило можно объяснить так: легче указать на зажигалку, чем на спичку. Но указать на утес или огромный дирижабль одинаково просто. Если объект интерфейса, например ссылка, и без того достаточно крупный, нет смысла делать его еще крупнее.
  5. Перевернутая пирамида
    Этого принципа придерживается сам гуру юзабилити, Якоб Нильсен. Статья должна начинаться с итогового вывода, за которым следуют ключевые моменты, а завершаться наименее важной для читателей информацией. Это оптимально для веба, где пользователь хочет получить информацию максимально быстро.
Но даже спроектированный по всем правилам интерфейс стоит протестировать. Фокус-группы – самый доступный способ для тестирования «своими силами».

Тестирование состоит из четырех этапов:

  1. Подбор фокус-группы. Тестировщики должны соответствовать вашей целевой аудитории. Не стоит просить бабушку протестировать приложение для поиска обновлений драйверов.
  2. Составление плана тестирования – списка задач, для выполнения которых разработан ваш продукт. Именно этому списку будут следовать тестировщики. Если вы делаете интернет-магазин, в список должны быть включены такие задачи как поиск товара, получение информации о товаре, путь от получения информации о товаре к его заказу, удаление товара из корзины.
  3. Выполнение тестировщиками списка задач и фиксирование ошибок. Ошибкой можно считать все что угодно: слишком сложная капча, отсутствие сообщения от сервера о том, что «товар добавлен в корзину», невозможность изменить количество товаров в корзине или отменить действие, и т.д.
  4. После выявления и исправления ошибок цикл тестировки нужно пройти заново. Цикл должен повторяться до тех пор, пока результаты не будут удовлетворять необходимым требованиям.
Оценка качества интерфейса должна проводиться на каждом этапе проекта. Не откладывайте тестирование юзабилити до самого последнего момента. Серьёзные ошибки просто нельзя будет исправить из-за того, что проект находится на завершающей стадии. И тогда - либо переделывать заново, либо получить низкий показатель юзабилити.
Как правило, достаточно 5 тестировщиков для выявления основных багов.

Пример по теме

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


Кнопка «enter» звучит как призыв попасть на главную страницу сайта. Но вместо главной страницы попадаем на «чистый лист».


Здесь взгляд приковывает изображение красной ленты, и мы, конечно, думаем, что это ссылка, и может даже на меню. Но нет – это всего лишь символ борьбы со СПИДом, который призван обозначить общественную позицию певца и не более. И тогда рука тянется в левый верхний угол. А там и не меню вовсе, а кнопка полноэкранного режима. Несколько секунд в замешательстве, и поиски окончены, вожделенное меню внизу, в центре экрана. Кликаем… и видим ПЛЕЕР! Нас снова обманули.


Пока в плеере транслируется клип, мы продолжаем искать меню. Теперь оно наверху, в самом центре. В выпадающем списке мы, наконец, наблюдаем желанное слово «Контакты». Но и тут не все так просто. Эти контакты нельзя скопировать. Придется переписывать вручную!


Теперь о цифрах. Время ожидания отклика в зависимости от скорости соединения может разниться, но в любом случае это будет больше 2х секунд. А путь до страницы контактов менеджмента занял 7 кликов. А мог бы занять всего один.
Влад Топалов, конечно, может позволить себе такие «креативные» решения. Но очевидно, что такие решения просто губительны для бизнеса.