Содержание

Юзабилити веб сайта — основные принципы usability web сайтов

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

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

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

www.ashmanov.com

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

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

На современном этапе важным условием эффективности веб-сайта, особенно коммерческого, является обеспечения его юзабилити. Этот термин пришёл к нам из повсеместного английского («usability») и означает удобство в использовании, эргономичность.

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

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

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

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

Огромное значение для организации удобств для посетителей на сайте имеет его текстовое оформление. Специфика подачи информации в сети такова, что спросом пользуются лаконичные, вместе с тем ёмкие тексты. Для оформления текстовых материалов необходимо использовать так называемые шрифты без засечек (Arial, Arial Black, Verdana, Tahoma), так как они удобнее читаются с экранов мониторов. Следует избегать резких контрастных тонов между фоном и текстом. Наиболее оптимальным является белый фон и тёмный шрифт текста.

Важным элементом обеспечения юзабилити сайта является система организации его поиска. Наиболее оптимальным является наличие формы поиска на всех без исключения страницах сайта. Поиск должен осуществляться только по самому сайту, ибо для других ресурсов имеются поисковые системы. Выдачу результатов поиска необходимо сделать идентичной выдаче в поисковых системах, причём учитывать обязательно возможные ошибки и опечатки при вводе нужного запроса в поиск («Может быть , Вы имели в виду [верное написание запроса]?»).

С тем что такое юзабилити, разобрались. Это, конечно только основы. Юзабилити — целая наука, и если у вас нет времени на глубокое изучение этого вопроса, обратитесь к специалистам. Они проведут аудит юзабилити, все протестируют и предоставят отчет с советами вам.

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

blogwork.ru

Юзабилити: что такое удобство использования сайта

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

Анализ юзабилити

Анализ статистики. Провести анализ юзабилити можно с помощью разных инструментов, каждый из которых решает определенные задачи. Основной сервис, рекомендуемый к пользованию, – Яндекс.Метрика. Она позволяет вести учет ваших посетителей, платформы, с которых они заходят на сайт, а также поведение на ресурсе.

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

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

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

Тестирование сайта. Для тестов юзабилити часто используется сервис Google Page Insights, с помощью которого можно определить скорость загрузки страниц. Также, если у вас большое количество посетителей на сайте, можно сделать A/B-тестирование, пробуя различные варианты и анализируя изменения с помощью Яндекс.Метрики.

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

Анализ конкурентов. Для создания понятной и удобной структуры необходимо проанализировать сайты конкурентов из топа выдачи поисковых систем. Если они занимают лидирующие позиции в Яндексе, Google, то признаны удобными и полезными для пользователей. Проведите полный анализ юзабилити сайта, выявите сильные и слабые стороны и учтите все факторы при доработке.

Как улучшить юзабилити

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

Навигация и структура сайта

Проработанное меню

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

Грамотная перелинковка

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

«Хлебные крошки»

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

Карта сайта

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

Возможность быстро найти информацию

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

Наличие функциональных элементов

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

Оформление сайта

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

Шрифты и заголовки

  • Не используйте слишком мелкий или большой шрифт.
  • Посмотрите в Интернете, какие шрифты более востребованы и приятны для основной массы пользователей.
  • Откажитесь от неконтрастных шрифтов (светлый текст на светлом фоне или темный текст на темном фоне).

Цветовая гамма

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

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

Качественный контент

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

Содержание и грамотность

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

Структура и форматирование

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

Высокая скорость загрузки страниц

Для удобства использования сайта оптимизируйте содержимое страниц и снизьте загрузку до минимума, сжав картинки, иконки в меню, элементы дизайна, убрав лишние Java-скрипты. Для проверки скорости загрузки страниц можно использовать сервис Google Page Insights.

Отсутствие ошибок 404

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

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

Поддержка работы с разными браузерами и мобильными устройствами

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

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

wiki.rookee.ru

Что такое юзабилити или 7 основных правил юзабилити сайта


Вы читаете перевод фундаментальных исследований Nielsen Norman Group, которые они описали в статье “Top 10 Mistakes in Web Design”. Над переводом работали: Ольга Жолудова и Ринат Шайхутдинов.

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

Юзабилити – это качественный показатель простоты и удобства использования сайта. Юзабилити оценивается по 5 качественным критериям:

  1. Легкость в изучении: насколько просто новым посетителям веб-сайта совершать элементарные действия, т.е. не мешает ли им навигация, различные всплывающие окна, реклама или видео;
  2. Эффективность: насколько быстро пользователь может ориентироваться на сайте и совершать необходимые ему действия;
  3. Запоминаемость: насколько легко пользователь может сориентироваться на сайте после того, как он вернется спустя месяц;
  4. Ошибки: как много ошибок совершают пользователи и как легко они разбираются в чем дело;
  5. Удовлетворенность: уровень удовольствия от пользования сайтом. На него влияет множество аспектов, среди них: история, навигация, подача и другие.

Есть и другие качественные критерии, но мы считаем ключевым – полезность. А еще, юзабилити и полезность лежат в основе практичности. Давайте разберем их подробнее:

  • Полезность — дает ли сайт то, что ищет пользователь;
  • Юзабилити — насколько легок и удобен сайт в использовании;
  • Практичность сайта = юзабилити + полезность.

Почему юзабилити так важно?

Если сайт сложно использовать – посетитель его закроет. Если главная страница не отвечает на вопросы “что именно тут предлагают?” и “это похоже на то, что я искал?”, то пользователь тоже закроет сайт.

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

Просто запомните одно простое правило — первое правило электронной коммерции: если пользователь не может найти товар – он не сможет его купить.

Как повысить юзабилити сайта?

Существует множество способов улучшения юзабилити сайта, самым результативным считается юзабилити тестирование сайта, которое состоит из 3 компонентов:

  1. Собрать группу представителей потенциальной аудитории сайта; у них действительно должна быть потребность разобраться с каким-либо вопросом;
  2. Дать группе задание. Задачи должны находиться на пересечении интересов пользователей и бизнес-целей. К примеру задача может звучать так: вашему сыну нужен велосипед, зайдите на сайт и купите подходящий;
  3. Наблюдать за действиями тестируемых, что у них получилось/не получилось сделать, с какими трудностями они столкнулись, что оказало влияние на их поведение (вебвизор, карта кликов, карта скроллинга в этом вам помогут).

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

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

Когда начинать работать над юзабилити сайта?

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

  1. Протестируйте старый сайт прежде чем тестировать новый вариант сайта, т.к. это поможет выявить сильные и слабые стороны предыдущей версии и не упустить их из виду при разработке новой версии.
  2. Проведите оценку сайтов конкурентов – это хороший (а главное – бесплатный!) способ получить конкурентоспособные данные, которые помогут тебе сделать сайт лучше и лучше чем у конкурентов.
  3. Проведите полевое исследование, чтобы понять, как испытуемые ведут себя в их привычных условиях.
  4. Создайте напечатанные версии интерфейсов сайта и протестируй их. Помните: потратить время на корректировку бумажных прототипов в разы экономнее, чем тестировать и вносить правки в живую систему.
  5. Отметьте успешные правки. Правки после внесения которых показатель юзабилити сайта становится лучше. По мере устранения ошибок и усовершенствования интерфейса, проводите тест уже не на бумаге, а на компьютере. И тестируй сайт после каждого нового исправления.
  6. Проверь окончательный вариант сайта на соответствие с общепринятыми нормами юзабилити сайта и со своими предыдущими результатами тестирования.
  7. Проведите тестирование еще раз напоследок, после того, как все правки были внесены, сайт уже начал свою «новую» жизнь. Потому что самые коварные нюансы могут появиться как раз после того, как вы выложите сайт на живой.

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

Где проводить юзабилити-тестирование?

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

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


Если у вас есть на примете какая-нибудь классная статья по UX и не только — скиньте нам ссылку, и мы будем рады над ней поработать.

Нас можно найти в Facebook: Ольга Жолудова и Ринат Шайхутдинов.


Мобильное приложение «Заметки о психике» | Mental Notes

Подкидывает идеи, как привлечь, удержать и направить внимание пользователя.

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

ux-journal.ru

Юзабилити главной страницы сайта | Convertmonster

Алоха, гайз!

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

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

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

Анализ юзабилити сайта

Любые изменения следует начинать с анализа текущей ситуации.

С чего начать анализ юзабилити сайта?

Для начала определите портрет своей ЦА. Это важно для выбора формата подачи информации. Чем подробнее будет портрет, тем лучше. Вот отличный пример портрета ЦА, который мне как-то прислали:

Портрет покупателя (писался по данным опросов операторов колл-центра, курьеров компании):

“Женщина, 33 года, замужем, один ребенок, в ближайший год-два появится второй (как минимум они будут с мужем стараться). Живет почти на окрайне Москвы (метро войковская) на семью есть одна машина, есть собака. Она русская, православная. Доход на семью около 80-100 т.р.. У нее часто болит спина (после родов особенно) она недовольна своими волосами (они выпадают и секутся), у нее есть проблемы со здоровьем по женской части.Она очень хочет выспаться, хочет секса, хочет быть хорошей женой, матерью и дочкой, хочет чтобы ей завидовали и мечтает переехать в свой дом или большую квартиру. Она боится остаться одна и боится старости, она переживает за детей и мужа и боится остаться без денег, еще она боится растолстеть, остаться без денег и сглаза, когда она делает покупки — она боится что ее обманут. Она позитивная (часто проявляет позитивные эмоции, воспринимает шутки), не скандальная (ей проще уйти, чем доказывать свою правоту), в целом, она не обращает слишком пристального внимания на товар перед покупкой (по крайней мере не лезет вовнутрь), она увлекается рукоделием (или хотя бы ей это интересно), имеет профили в соцсетях и активно ими пользуется. (Особенно после 21-30, после того как укладывает ребенка спать.) Ее часто можно встретить в ТЦ, поликлинике и на детских шоу (например «Фиксики» в Крокусе)”

Сразу становится ясно, в какой форме лучше всего преподнести УТП для данной аудитории, да?

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

Постарайтесь ответить на следующие вопросы:

  • Почему люди приходят к вам на сайт?
  • Что они ожидают найти на нем?
  • И, наконец, что нужно сделать, чтобы им было проще это найти?

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

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

  • Обозначайте важные утилиты (вход/регистрация/условия доставки)
  • Делайте меню с ориентацией по левому краю с углубленностью не более чем в 3 клика (категория/подкатегория/товар)
  • Не перегружайте навигационное, верхнее меню, оно должно содержать максимум 5-6 пунктов.

Навигационное меню, пример оформления.

  • Расположите корректно следующие 5 элементов на главной странице сайта:

1.       Уникальное торговое предложение

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

Пример:

Как правильно составить и разместить УТП на сайте

2. Обзоры популярных товаров/услуг

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

Так же, эта подборка ориентирована на заботливого потребителя — тип для которого важны отзывы, рейтинг товара, тут отлично работает элемент: «Этот товар здесь не просто так, ведь многие уже купили его!»

Пример:

Не заставляйте покупателя думать!

3. Корзина

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

Тут есть всего два правила:

  1. Она должна находиться в правом верхнем углу страницы.
  2. Она должна быть контрастной.

Пример:

Пример оформления кнопки «корзина» на сайте

4. Контактная информация

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

Что нужно учесть:

  • Не используйте разный цвет и размер шрифта при написании номера.
  • Располагайте контакты в правом верхнем углу экрана.
  • Укажите время для звонка.

Не надо так:

Код города указан шрифтом меньшего размера, это затрудняет восприятие

Лучше так:

Код города и основной телефон хорошо читаются

5. Поиск по сайту

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

Пример размещения:

Добавьте поле поиска по сайту для логической персоны!

С помощью этих нехитрых рекомендаций вы сможете влиять на основные KPI главной страницы:

  • Снизится процент отказов
  • Увеличится время проведенное пользователем на сайте
  • Вырастет количество просмотренных страниц

Меняйте сайт, упрощайте навигацию, тестируйте и делитесь результатами в комментариях!

Помните, что улучшение юзабилити — лишь первый шаг на пути к идеальному сайту!  Не стоит забывать про SEO оптимизацию и контент-маркетинг, но об этом чуть позже 😉

convertmonster.ru

7 основных правил юзабилити веб сайта

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

Из чего состоит юзабилити?

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

Юзабилити любого сайта, независимо от его направленности и объема, оценивается по пяти характеристикам:

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

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

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

В чем ценность юзабилити?

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

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

7 золотых правил юзабилити

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

Правило 1 – у сайта должна быть четкая структура

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

Сегодня общепринято иерархическое деление структуры сайта, которое включает в себя следующие элементы:

  • Раздел. Наиболее крупный элемент, в составе которого находятся материалы на конкретную тематику.
  • Категория. Так как раздел – это весьма крупный элемент структуры, он делится на небольшие категории.
  • Подкатегория. Необходимость в подкатегориях есть не всегда – обычно у очень крупных веб-сайтов.
  • Материал. Это конечный элемент структуры сайта. В интернет-магазине материал – это карточка товара.

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

Правило 2 – навигация должна помогать клиенту

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

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

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

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

Правило 3 – организуйте удобный поиск по сайту

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

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

Правило 4 – уменьшите скорость загрузки страниц

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

  • Откажитесь от большого количества графических элементов на сайте. Это касается изображений, GIF-анимаций, автоматически включаемых аудиозаписей и видеороликов. Если без изображений нельзя обойтись, надо уменьшить их «вес» путем конвертации в PNG и JPEG. Видео конвертируются в GIF.
  • Удалите анимированные заставки, выполненные по технологии Flash. Мало того, что обилие заставок отвлекает внимание пользователя и вызывает раздражающий эффект, так еще и Flash работает не у всех пользователей. У них при заходе на сайт будут появляться дополнительные уведомления в браузере.
  • Уменьшите количество рекламных баннеров на странице. Не надо говорить, насколько пользователей Интернета раздражает реклама. Помимо этого она еще и увеличивает время загрузки страницы. Если для вас важнее репутация и конверсия сайта, а не копеечный заработок с баннерной рекламы, уберите ее.

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

Правило 5 – грамотно проработайте дизайн сайта

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

В отношении дизайна веб-сайта есть масса правил, однако ниже мы разберем наиболее важные рекомендации:

  • Графические компоненты дизайна не должны отвлекать посетителя от информационного наполнения.
  • Если сайт принадлежит компании, ее логотип должен размещаться в шапке сайта на каждой странице.
  • Логотип организации можно превратить в навигационный элемент, заложив в него ссылку на «главную».
  • Дизайн веб-сайта не должен пестрить многочисленными цветами, напрягающими глаза посетителей.
  • Не используйте текстурное оформление фона – текст на нем читается очень сложно и напрягает зрение.
  • Цвета шрифта и фона должны быть высоконтрастными по отношению друг к другу – так проще читать.
  • Применяйте стандартные шрифты – лучше всего отображаются Tahoma, Verdana, Arial, Times New Roman.

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

Правило 6 – позаботьтесь о практичности контента

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

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

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

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

Правило 7 – исправьте технические ошибки сайта

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

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

Как увеличить юзабилити сайта?

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

  1. Сбор представителей ЦА. На первом этапе вы набираете группу из наиболее ярких представителей вашей целевой аудитории. Размер группы точно назвать нельзя. Однако помните, что чем больше группа, тем обширнее и точнее результаты, но потребуется больше времени и сил на проведение тестирования сайта.
  2. Выдача группе задания. Здесь нужно подготовить список действий, которые должны выполнить люди из группы испытуемых во время пребывания на сайте. Подойдут такие задания, как заказ того или иного товара, поиск конкретной статьи, использование формы обратной связи. Задания должны быть разными.
  3. Проведение тестирования. Наиболее ответственный этап, на котором нужно проследить за тем, каким образом испытуемые справляются с поставленными перед ними задачами. Надо отметить, какое время ушло у людей на достижение целей, с какими проблемами встретились, оценить уровень конверсии.

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

Где и как работать над юзабилити?

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

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

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

Подводим итоги по юзабилити сайта

Благодаря этому материалу вы знаете все самое необходимое по такой теме, как юзабилити сайта, а именно:

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

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

 

 

Сделайте репост:

webseotop.ru

Юзабилити: удобство использования сайта

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

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

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

Содержание:

Что такое юзабилити и на что оно влияет?

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

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

Базовые правила юзабилити

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

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

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

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

Правило семи сущностей

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

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

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

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

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

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

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

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

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

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

Принцип структуры и логичности

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

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

Правило формата

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

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

Эффект неопределенности

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

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

Синдром утенка

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

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

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

Зеркальный эффект

Это правило заключается в том, что все, связанное с нашим личным опытом, мы запоминаем лучше, чем не имеющее к нам никакого отношения. Изучите интересы своей основной аудитории и апеллируйте к ним, связав контент с увлечениями посетителей.

Простые способы сделать проект лучше

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

Увеличьте скорость работы сайта. Чтобы воплотить в жизнь правило 2х секунд, существует немало способов:

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

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

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

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

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

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

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

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

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

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

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

Разместите на страницах строку поиска. Оптимально – интерактивную, то есть такую, которая будет формировать подсказки во время набора текста.

На Вордпресс реализовать форму поиска можно с помощью стандартного виджета, кода php и плагинов. Из статьи по ссылке вы также сможете узнать, как установить Яндекс поиск.

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

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

Работайте над качеством подачи контента:

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

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

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

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

Анализ удобства веб-ресурса

Оценка юзабилити сайта осуществляется по 5 параметрам:

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

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

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

pro-wordpress.ru

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *