Главные принципы юзабилити веб-сайта для повышения конверсии. Юзабилити сайта


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

5-vazhnyh-juzabiliti-jelementov-sajta

Алоха, гайз!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Пример:

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

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

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

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

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

Пример:

Блок популярные товары на сайте

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

3.       Корзина

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

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

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

Пример:

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

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

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

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

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

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

Не надо так:

Пример не правильного блока "контакты" на сайте

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

Лучше так:

Пример правильного оформления бока "контакты" на сайте

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

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

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

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

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

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

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

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

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

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

convertmonster.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

Юзабилити сайта: как понравиться посетителям

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

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

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

Так почему же к одним люди идут и надолго остаются, а от других бегут как от огня? Ответ на этот вопрос такой же, как на «А почему вы купили этот диван, а не тот?». Потому что удобнее:

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

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

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

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

  • Контент. Информационное наполнение ресурса – это основа, стержень, без которого сайт не имеет смысла. Посетителям важно с легкостью воспринимать текст и извлекать из него всю необходимую информацию. Если же этого не происходит – человек не будет лишний раз ломать голову и отправится на поиски чего-то более понятного;
  • Функционал. Тот, кто написал в жизни пару программ, с уверенностью может сказать, что сразу ничего не работает. Ошибки могут быть очевидны, а могут затаиться и обнаружить себя в самый ответственный момент. Во время работы сайта, особенно на первых этапах, постоянно выявляются недочеты, и для разработчиков очень важно вовремя на них реагировать. Если же какая-то функция сайта не выполняется (или выполняется некорректно) в течение длительного времени – даже самые преданные пользователи такого не поймут и будут беспощадны;
  • Кроссбраузерность и независимость от платформ. Если вы думаете, что ваш любимый Internet Explorer – единственный и неповторимый, то попросите у Билла Гейтса пирожок с полки:

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

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

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

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

Почему это так важно

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

Казалось бы, зачем же следовать нормам юзабилити, если сайт создаётся не во благо человечества, а исключительно как источник дохода?

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

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

Как добиться удобства

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

  • Размещать в меню до 7 пунктов. Не стоит предлагать пользователю обилие категорий. Человеческий мозг настроен на быстрое адекватное восприятие не более 8-9 объектов, поэтому здесь краткость – сестра таланта. Это подтверждает закон Хика, посему, проводя анализ сайта с точки зрения удобства посетителей, не лишним будет пользоваться научным достоянием;
  • Сразу же выдать пользователю главную мысль. Что касается контента, то, как правило, посетители приходят на сайт с конкретной целью, поэтому следует выражать суть статьи в её начале, а потом уже приступать к планомерному раскрытию темы;
  • Посетители не склонны ждать. Скорость загрузки страниц сайта – немаловажный момент. По состоянию на сегодняшний день она не должна превышать две секунды, но технологии несутся вперед, и, возможно, скоро стандарты будут уже совсем другими;
  • Не более трёх кликов. Для попадания в самый дальний уголок сайта пользователь должен нажать кнопку мыши не более трёх раз. Иначе, структура считается слишком запутанной, а посетители могут заскучать;
  • Большое расстояние между маленькими объектами – не самая удобная штука. Чем меньше и дальше друг от друга кнопки, тем больше времени нужно пользователю на то, чтобы понять свои возможности. Это правило отражено в законе Фиттса, и его необходимо учитывать при проектировании интерфейса:

Интернет-магазин

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

  • Качественная визуализация товаров. Когда человек тратит свои деньги, он должен знать – на что. Хорошие фотографии помогут разбудить в посетителе покупательский интерес. Но стоит помнить, что изображение должно соответствовать реальному предмету;
  • Как можно более быстрая загрузка страниц. Если человек решил купить – важно, чтобы его ничего не остановило;
  • Чем больше покупатель знает о товаре, тем лучше. Следует тщательно проработать описание всех деталей, тогда доверие посетителей значительно повысится. К примеру, покупателям будет очень полезно знать, имеется ли товар в наличии;
  • Помогайте посетителю найти нужный продукт. Достаточно сложно создать удобную навигацию при обилии категорий. Когда пользователь просматривает информацию о конкретном товаре, следует ненавязчиво предлагать ему похожие. Возможно, таким образом, человек найдет то, что ему нужно или подумает «А не купить ли мне и то, и другое?»;
  • Элементы, отвечающие за выполнение целевых действий, должны быть четко обозначены. Кнопка «Купить» обязана сразу же бросаться в глаза, ведь именно покупки вы и добиваетесь от посетителя.

Требуется аудит

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

Они определят потребности пользователей и составят подробный отчёт, в состав которого будут входить:

  • Анализ аудитории, на которую рассчитан ресурс;
  • Задачи, которые выполняет сайт;
  • Полное описание и анализ функционала;
  • Анализ структурной организации и рекомендации по её улучшению;
  • Некоторые советы по привлечению рекламодателей;
  • Технические параметры сайта;
  • Анализ структуры и содержания контента.

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

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

Как протестировать юзабилити

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

Ниже представлены некоторые из них:

  • Usability Hub позволяет определить наилучшие элементы дизайна, области, по которым пользователи чаще всего кликают, а также легкость или сложность ориентирования среди объектов страницы. Необходимо задавать количество людей, которые должны пройти тестирование, а результаты будут получены по достижению нужного числа прохождений:
  • User Plus предлагает возможность самостоятельной оценки юзабилити сайта с помощью масштабного списка вопросов, на которые вам предстоит ответить:
  • Feng-GUI моделирует взгляд посетителя сайта на протяжении первых пяти секунд. Для этого необходимо загрузить изображение страницы тестируемого ресурса:

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

Тестирование сайта можно доверить экспертам, провести самостоятельно или воспользоваться помощью онлайн-сервисов.Для интернет-сайтов пользователи – это клиенты, а клиент всегда прав.

www.internet-technologies.ru

Юзабилити веб-сайта: основы

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

Интерфейс с высоким уровнем юзабилити отличается:

  • Изучаемостью. Благодаря логично расположенным элементам и знакомым паттернам взаимодействия с ними, пользователь быстро осваивает интерфейс сайта, не прилагая для этого существенных усилий.
  • Эффективностью. Любой пользователь, посетивший сайт, стремится выполнить определенную задачу. Если ему удалось достичь цели быстро и легко, навигация сайта и организация контента отвечает требованиям юзабилити.
  • Минимальным количеством ошибок. Любая ошибка нарушает непрерывность опыта пользователя и вынуждает его повторять выполненные действия снова. Полностью избавиться от ошибок нельзя, так как пользователь может сталкиваться с ними из-за собственных неверных действий. Задача UX-оптимизатора – свести к минимуму вероятность возникновения таких ошибок, а также предусмотреть их простое исправление – например, в случае с некорректно заполненной формой.
  • Эстетичным дизайном. Критерий эстетики субъективен, однако внешний вид сайта должен соответствовать сложившимся нишевым стандартам – сайт автозапчастей с преобладанием розовых оттенков будет выглядеть также странно, как сайт онлайн-банкинга с «футуристичным» и экспериментальным интерфейсом. Новаторство никто не отменял, но здравый смысл должен быть на первом месте.

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

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

Юзабилити – это мощное оружие в борьбе за клиентов и жизнеспособность компании.

Юзабилити и особенности пользовательского восприятия

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

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

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

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

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

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

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

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

Навигация

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

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

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

4. На каждой странице должно присутствовать наименование раздела сайта.

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

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

7. Неотъемлемая часть качественного пользовательского опыта – отправление сайтом cookies на устройство пользователя.

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

Главная страница

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

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

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

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

Текстовый контент

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

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

При размещении готового текста на сайте следует учитывать базовые юзабилити-рекомендации:

1. Стандартный кегль – 12 п. Этот размер удобен для восприятия большинства пользователей. При этом кегль должен изменяться в зависимости от устройства, используемого пользователем (если мы говорим об адаптивной верстке).

2. Для чтения с экрана предпочтительны шрифты «sans-serif», то есть, шрифты без засечек. Типичные шрифты семейства sans-serif – Arial, Helvetica.

3. Обязательное условие – хороший контраст между фоном и текстом. Условный фиолетовый текст на синем фоне – это нечитабельное и болезненное сочетание.

Контраст и читабельность.

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

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

Практические шаги навстречу хорошему юзабилити

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

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

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

Please enable JavaScript to view the comments powered by Disqus.

www.maxstyle.ru

Юзабилити веб сайта - основные принципы 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

25+ советов по юзабилити сайта

SEOnews

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

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

Мы собрали самые интересные материалы о том, как сделать сайт не только красивым, но и удобным для пользователей.

Немного теории

11 обязательных атрибутов юзабилити – что стоит учесть при разработке сайта.

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

3 мифа о поведении пользователей на сайте – все мы знаем, лица людей, текст, написанный большими буквами, и слово «Бесплатно» действуют безотказно, если нам нужно привлечь внимание пользователей на сайте. Но всегда ли действует это правило?

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

Веб-дизайн, за который пользователи не скажут «спасибо» – эксперты по юзабилити без устали повторяют «Веб-сайт должен быть удобным и понятным для пользователя!». К сожалению, к этим словам прислушиваются далеко не все. Зачастую владельцы сайтов в стремлении сделать интересный и необычный сайт (которым не стыдно похвастать перед друзьями и родственниками) принимают самые безумные решения дизайнеров. Специалисты eConsultancy сделали интересную подборку «креативных находок» на сайтах, которые не стоит повторять.

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

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

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

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

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

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

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

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

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

Правила юзабилити ссылок – верно, ли считать, что «все гиперссылки должны быть синими и подчеркнутыми», или всё гораздо сложнее?

10 приёмов усовершенствования форм заказа на ecommerce-ресурсах – с комментариями известного эксперта по юзабилити с подходом психолога Дмитрия Сатина.

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

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

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

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

Мобильные сайты

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

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

Юзабилити на практике

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

Юзабилити-лаборатория:

www.seonews.ru

Основы юзабилити сайта для новичка с самого начала

как сделать юзабилити сайта

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

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

Основное определение юзабилити сайта

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

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

Факторы юзабилити

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

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

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

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

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

Дизайн сайта

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

Скорость загрузки страниц

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

Универсальность браузеров

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

Качество статей

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

Навигация «хлебные крошки» и интерфейс

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

Реклама

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

Гарантия надежности

Какой сайт лично у вас бы вызвал доверие? Конечно с присутствием контактных данных, вкладки «О компании», различными сертификатами, отзывами и реквизитами (если речь идет об интернет — магазине). Позаботьтесь об этом обязательно, тогда посетители начнут доверять вам.

Кнопка поиска

Данный критерий является вторым по важности после основной иконки. Благодаря поиску, посетитель моментально найдет нужную ему информацию и останется на сайте.

Простота использования сайта

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

Мобильная версия

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

Titles (заголовки)

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

Важность юзабилити

Вы спросите меня: «Почему же настолько важна проверка юзабилити?» Все потому, что эти правила позволяют увеличить параметры юзабилити. То есть оно поможет вам:

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

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

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

К качественной оценке относятся:

  • Целевая аудитория.
  • Функциональность.
  • Целевая направленность сайта.
  • Аудит имеющихся текстов.
  • Анализирование структур.
  • Другие параметры, например, ссылки, редиректы, страницы 404.
  • Наличие мобильной версии.

К количественной оценке относятся:

  • Быстрота загрузки страниц.
  • Время на отклик.
  • Время клика.
  • Время на поиск нужной кнопки.
  • Время перехода по страницам.

Тест на юзабилити сайта можно осуществлять самостоятельно с помощью специальных онлайн сервисов. Приведу примеры самых надежных и проверенных из них. и дам советы по данной проблеме.

Оценка с помощью сервисов бесплатно

  1. Usabilityhub.com. Здесь имеются три показателя, которые позволяют сделать анализ. Один из них оценивает легкость ориентирования пользователя на сайте, второй — элементы в дизайне, на которые обращают внимание посетители, третий — карту сайта и на каких страницах больше всего кликов. В общем получите полный аудит.
  2. Feng-gui.com. Данный сервис отображает модель со стороны посетителя на протяжении нескольких секунд. Благодаря этому вы получаете отчет и карту движения глаз человека по страницам вашего ресурса.
  3. WebVisor (вебизор) . Программа представлена нашим любимым Яндексом в метрике. Площадка дает возможность сделать анализ поведения юзеров.
  4. Fabuza.ru. Русский сервис, не тестил его, но отзывы в интернете положительные.
  5. Обратная связь. Это самый простой и эффективный способ проверить бесплатно юзабилити сайта, то есть спросить непосредственно у пользователей.

Разработка улучшения юзабилити

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

Тестирование проводится в три этапа:

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

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

Мини чек лист по юзабилити

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

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

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

  • Простым и понятным.
  • Эффективным.
  • Легко запоминающимся.
  • Нравиться пользователям.

Эти цели являются основополагающими для множества ресурсов, но можно определить и другие.

В заключение

Сегодня мы узнали о юзабилити сата следующее:

  1. Понятие определяется по нескольким основным критериям.
  2. Данный показатель необходим потому, что при его отсутствии вы не достигнете положительных результатов.
  3. Не забывайте об основных факторах, улучшающих площадку: надежность, строка поиска, навигация, отображение, простота использования, лучший контент и дизайн.
  4. Проведите аудит, то есть тестирование вашего блога, чтобы повысить юзабилити. Тестирование следует проводить как можно чаще, пока результат не станет максимально положительным.

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

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

wpsovet.ru