Основы юзабилити. Введение в юзабилити

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

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

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

Правило 2х секунд

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

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

Правило 7±2

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

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

Правило 3х кликов

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

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

Данное правило не официальное, а условное. Для большинства сайтов оно вполне целесообразно.

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

Правило Парето или принцип 80/20

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

6 правил с позиции разработки дизайна сайта и приложений

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

• Логичность расположения и присутствия каждого элемента;
• Пользователи делятся на рядовых и продвинутых. Для второй группы нужно создавать возможности более быстрой работы: специальные возможности (к примеру, внедрение RSS ленты), горячие клавиши, сокращения и т.д.
• Посетитель сайта или приложения должен быть уверен, что все взаимодействие между ним и вашим продуктом происходит под его полным контролем;
• Старайтесь не сильно загружать кратковременную память пользователей;
• Посредством вашего продукта вы вступаете в своеобразный диалог с вашим посетителем. Этот диалог должен быть законченным;
• Внедрите легкодоступную и информативную обратную связь.

Перевернутая пирамида

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

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

Субъективная удовлетворенность

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

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

В заключении

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

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

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

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

Почему важно соблюдать принципы юзабилити сайтов?

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

Принципы юзабилити web-ресурса

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

1. Дизайн - залог доверия к сайту

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

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

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

2. Логичный структурированный контент

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

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

3. Важная информация - в левом углу

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

4. Общение с пользователем

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

Попав на такую страницу 404, пользователь не растеряется и, скорее всего, не сразу покинет ресурс.

5. Отмена действия

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

6. Ненавязчивое предложение помощи

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

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

7. Разговор на понятном языке

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

8. Отказ от резких перемен

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

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

9. Все возможности - на виду

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

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

Пример удачной карты сайта

10. Форма регистрации и заказа: чем лаконичнее - тем лучше

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

11. Заметное длинное поле поиска

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

Еще один важный момент - длина поля поиска. Согласно исследованию Якоба Нильсена, в среднем туда вмещается 18 символов, а оптимальная длина - 27 символов. В 90% случаев сюда поместится даже длинный запрос, чтобы пользователь его полностью увидел и исправил при надобности. Для установки нужной ширины используйте относительную единицу «em», равную размеру используемого шрифта.

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

12. Больше свободного пространства

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

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

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

Тестирование юзабилити

Новый интерфейс оценивается с двух позиций:

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

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

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

Статью подготовила Виктория Закирова.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

О навигации

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

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

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

О контенте

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

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

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

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

Итак, 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?
Все эти системные сообщения должны сохраняться в логах для администратора сайта/системы. Пользователю же пишите нормальным языком, в чем конкретно ошибка. Более того, пользователя по сути интересует только одно: виноват он или система? И можно ли что-то сделать?

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

Хотя все же такие серьезные ошибки встречаются все реже. Но другой вариант бесит еще больше – ты заполняешь довольно длинную форму, нажимаешь отправить и видишь красную надпись (или всплывающее окно) – внимательно заполните все поля, отмеченные звездочкой.
И снова ты сидишь и думаешь – какие поля? Какой звездочкой? Вроде бы я все заполнил, внимательно просмотрел… а потом оказывается что там номер телефона надо написать с пробелами, а не дефисом.

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

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

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

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

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

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

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

Немного из истории возникновения юзабилити

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

Из всего многообразия определений я пока решила остановиться на определении международного стандарта ISO 9241-11, согласно которому:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Основы юзабилити

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

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

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

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

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

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

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

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

Справляется Google Analytics со своей задачей, когда обучаемость, эффективность и запоминаемость не ахти, но пользователь получает удовлетворенность? Я считаю, что справляется.

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

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

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

Оставайтесь на связи и удачи в продвижении.