Юзабилити сайта от А до Я


Содержание

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

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

Факторы, которые влияют на юзабилити ресурса

Почему вопросам юзабилити сайта уделяют много внимания

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

Юзабилити влияет на:

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

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

Главная страница сервиса Фабрика Юзабилити

Факторы оценки юзабилити сайта

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

Факторы оценки юзабилити:

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

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

Составляющие юзабилити сайта

Правила юзабилити сайта

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

Проще – лучше

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

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

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

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

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

Фокусировка внимания: F-паттерн

Паттерны изучения площадки

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

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

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

Принципы обеспечения юзабилити сайта

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

Особенности навигации

Удобство серфинга по веб-ресурсу обеспечивают навигационные элементы в:

  • горизонтальном меню шапки;
  • вертикальном меню сайдбара.

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

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

Советы, как повысить юзабилити сайта

Средства поиска

Для ускорения поиска информации используются:

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

Отсутствие ошибок структуры

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

Рекомендуется отказаться от стандартного оформления страницы ошибки 404 в пользу оригинального дизайна в контексте площадки.

Корректное оформление шапки

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

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

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

Свободное пространство

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

Текстовая информация

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

Для удобства восприятия информации нужны:

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

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

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

Отчет проверки скорости загрузки на Яндекс.Метрике

Средняя продолжительность нахождения пользователя на странице составляет 27 секунд. Такой вывод сделан на основании результатов исследований консалтинговой компании NN/g. Длительная загрузка сокращает время на ознакомление с ресурсом, а значит – посетитель узнает меньше полезной информации и может закрыть потенциально полезный сайт.

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

  1. Google PageSpeed Insights.
  2. Яндекс.Метрика.
  3. PR-CY.

В PR-CY, WhichLoadFaster и аналогах присутствует возможность сравнения площадок, в том числе размеров страниц, показателей скорости загрузки. Через сервис Monitis Tools можно узнать среднюю скорость загрузки для ресурсов отдельных регионов, что позволяет понять, к какому показателю нужно стремиться, а лучше – превзойти.

Сервисы проверки предоставляют отчет и дают практические рекомендации по улучшению показателя.

Взаимодействие с пользователем

Для взаимодействия с аудиторией используются различные средства:

  • предложение помощи онлайн-консультантом (ненавязчивое);
  • опросы;
  • простое оформление заказа и форм связи;
  • оповещение о выполненных действиях.

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

Адаптация для мобильных устройств

Пример правильной адаптации для мобильных устройств

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

Для повышения юзабилити с адаптацией под мобильные устройства существуют свои правила:

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

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

Реклама на сайте

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

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

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

Инструменты тестирования юзабилити

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

  • сбор статистики;
  • ненавязчивый опрос посетителей;
  • использование Вебвизора в Яндекс.Метрике и других инструментов наблюдения;
  • визуальный анализ действий контрольной группы – 3-10 человек.

Для сбора необходимой информации и оценки юзабилити будут полезны следующие сервисы:

  1. UsabilityHub.
  2. UserPlus.
  3. Usabilla.
  4. Optimal Workshop.
  5. WebVisor.
  6. Feng-GUI.
  7. Фабрика Юзабилити (Fabuza.ru).
  8. СайтПолис (подключение аудиторов к тестированию ресурса).

Не стоит забывать о доступных механизмах в Яндекс.Метрике и Google Search Console, ведь критерии оценки этих сервисов отражаются на ранжировании сайта в соответствующих поисковых системах.

Модель поведения пользователя при просмотре информации
(Диаграмма Гутенберга)

Подведем итоги

После изучения материала можно сделать следующие выводы:

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

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

Делаем блог удобнее и лучше. Юзабилити сайта.

Здравствуйте друзья! Сегодня хочу поговорить о том как сделать Ваш блог лучше и удобнее для посетителей.

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

Да не удивляйтесь, поисковые роботы так же любят удобные сайты.

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

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

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

1. Блог должен иметь свое индивидуальное лицо: название, дизайн, логотип и т.п.

2. Удобную навигацию. Посетитель к любой информации должен добираться максимально в два клика.

3. Четко работающую и удобную подписку на обновления

4. Личную страницу автора с обратной связью или службой поддержки

5. Удобную систему комментирования и поощрения комментаторов

6. Наглядный доступ к лучшим и популярным материалам блога

Ну вот как-то так, теперь пройдемся по всем пунктам что и как делать.

Юзабилити вплотную зависит от внешнего вида проекта.

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

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

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

Достаньте сейчас свой мобильный телефон.

Посмотрите, наверняка у большей половины сенсорные смартфоны, которые стоят не мало.

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

Не знаю убедил я вас или нет, но хотите верьте хотите нет, но 40% процентов успешности проекта зависит от его уникального внешнего вида.

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

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

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

Меня каждый день находят по запросам “Инфо-Мастерская Ашифина” и “Мастерская Ашифина” . Люди запоминают название и когда нужна информация наугад набирают и находят.

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

Вот слоган я еще думаю, не хочется банальщины типа “Seo и заработок в Интернете”

Если есть идеи предлагайте в комментариях, в долу не останусь.

Грамотная навигация на блоге.

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

В идеале на блоге должно быть два меню, одно по страницам блога (контакты, о себе и т.п.) Располагается в верхней части блога, ТОП-меню.

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

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

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

Четко работающая и удобная подписка на обновления блога.

У меня до недавнего времени, как и большинства блоггеров стола форма от feedburner.

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

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

Личная страница автора с обратной связью или службой поддержки.

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

“Позор Виктору Перестукину!”

Вот честно в эти выходные сяду и сделаю хорошую страницу о себе с видео, все как положено!

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

Удобная система комментирования и поощрения комментаторов

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

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

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

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

Наглядный доступ к лучшим и популярным материалам блога

Этот пункт улучшения юзабилити блога наверное не всем понятен. Объясняю популярно.

Посмотрите на правый сайт-бар моего блога. Видите, там панельки с иконками на популярные статьи моей Мастерской?

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

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

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

Второе, страница поднимается в поиске и приводит Вам еще больше посетителей на блог.

У меня в планах сделать еще несколько панелей по отдельным тематикам, НО НЕ БУДУ ЗАБЕГАТЬ ВПЕРЕД!

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

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

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

Юзабилити сайта – что это такое и каким должно быть?

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

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

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

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

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

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

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

Цукерберг рекомендует:  Dev c++ - Dev C++ Авто коректор Апдейт Правильний код

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

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

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

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

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

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

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

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

Правила юзабилити

  • Дизайн сайта.

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

  • Интуитивно понятная навигация.

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

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

  • Отсутствие битых ссылок.

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

  • Легкий для прочтения текст.

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

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

  • Любая информация в 10-секундной доступности.

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

  • Контакты на самом видном месте.

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

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

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

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

Каждое задание предполагает выполнение нескольких шагов. Вы должны их отслеживать и смотреть, на каком этапе пользователь столкнулся с затруднениями. Делать это можно при помощи встроенного в Яндекс. Метрику Вебвизора или карт скроллинга/кликов.

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

Влияет ли юзабилити на доходность бизнеса

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вступление

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

Цукерберг рекомендует:  Загрузка внешнего файла в модальное окно

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

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

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

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

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

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

  • Структура сайта должна быть понятна пользователю, практически сразу;
  • Ваш пользователь должен отчетливо понимать, где именно находится нужная ему информация и добраться до неё он может за 1-2 понятных клика;
  • В тексте обязательно соблюдения норм типографики: выделенные заголовки, удобство чтения и легкость восприятия информации;
  • Форма и содержание вашего материала, должны образовывать собой единое целое, именно это условие приводит к хорошему восприятию.
  • Скорость загрузки сайта должна быть большой, а время загрузки маленьким.

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

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

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

Юзабилити анализ (тестирование)

Можно выделить 5 взаимосвязанных способов анализа юзабилити своего сайта:

  1. Анализ статистики сайта. Делается при помощи инструментов для веб-мастеров Яндекс.Метрики и Google Analytics. Код счетчика, установленный на сайт, позволяет собирать информацию о страницах входа, поведению посетителей, время пребывания на сайте и т.д.
  2. Анализ отзывов посетителей и гостей. Размещение форм голосования и опроса, создание форм обратной связи и отзывов.
  3. Юзабилити тестирование. Этот способ предполагает участие групп реальных людей, оценивающих сайт «свежим взглядом».
  4. Слежение за поведением пользователей. Для слежения используйте инструмент Вебвизор, который найдете на Яндекс.Метрике. Этот инструмент пишет, действия посетителя на сайте и показывает их на «тепловой карте».
  5. Заказ профессиональной экспертизы.

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

Выводы

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

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

Юзабилити-тестирование

Содержание

Что такое юзабилити-тестирование?

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

Зачем нужно юзабилити-тестирование?

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

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

Также тестирование понадобится, если вы хотите:

  • сравнить два интерфейса, например, старый и новый, ваш и конкурента, чтобы выяснить, какой из них лучше;
  • сравнить удобство интерфейса для двух групп пользователей, например, для новичков и опытных;
  • выявить потенциальные юзабилити-проблемы нового продукта еще до того, как он будет выпущен на рынок;
  • оценить соответствие продукта определенным KPI (например, «процесс оформления заказа занимает не более 5 минут»).

Чем юзабилити-тестирование отличается от фокус-групп?

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

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

Какие виды юзабилити-тестирования бывают?

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

В зависимости от степени участия модератора (UX-аналитика):

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

Один из вариантов удаленного немодерируемого тестирования

В зависимости от места расположения респондента:

  • очное — респондент и модератор находятся в одном помещении, как правило, в лаборатории, и общаются непосредственно;
  • удаленное — респондент участвует в тестировании из дома или со своего рабочего места. Как правило, это немодерируемое тестирование. Если требуется участие модератора, аналитик общается с респондентом по видеосвязи.

В зависимости от целей:

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

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

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

Как проходит юзабилити-тестирование?

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

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

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

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

Параллельно с написанием сценария идет поиск респондентов. Как правило, это 8-12 человек. Некоторые компании помогают нам привлекать респондентов из числа своих клиентов. Если такой возможности нет или это не соответствует задачам исследования, то мы ищем респондентов через специализированные агентства, например, РусОпрос. Мы передаем им требования к респондентам, а они предоставляют списки потенциальных участников тестирования. При этом мы тщательно контролируем качество рекрутинга: проводим дополнительный обзвон респондентов, задаем им вопросы об опыте участия в подобных исследованиях, и, если респондент кажется нам неподходящим, отсеиваем его.

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

Наша юзабилити-лаборатория. Вид из комнаты модератора. На экране дублируется изображение с экрана респондента

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

После того, как все сессии тестирования проведены, UX-аналитик составляет отчет, который передает заказчику.

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

Сколько времени занимает юзабилити-тестирование?

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

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

Входит ли eye-tracking в юзабилити-тестирование?

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

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

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

Что входит в юзабилити-отчет?

Как правило, отчет включает в себя:

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

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

Как использовать результаты тестирования?

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

Сколько стоит юзабилити-тестирование?

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

Хотите, чтобы мы провели для вас юзабилити-тестирование?

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

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

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

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

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

Юзабилити сайта складывается из двух частей:

  1. Внешняя часть: то, как пользователь видит сайт. Причем смотря на сайт, пользователь видит так и всю компанию. Сайт – это не просто набор текстов и картинок, это лицо компании в сети.
  2. Внутренняя часть: то, как сайт взаимодействует с пользователем. Здесь аналогично – взаимодействие сайта с собой человек воспринимает как отношение к себе всей компании. И временно неработающая выписка по карте в Сбербанк-Онлайне становится плевком в душу от всего Сбербанка.

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

Улучшаем UI

Сначала займемся «лицом» – внешней частью. Еще ее называют UI (User Interface) – интерфейс пользователя.

Проверяем такие параметры:

1. Дизайн сайта

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

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

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

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

Смотрим на примеры. Пример 1 – сайт компании, которая строит дома под ключ:

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

Попробуем изменить дизайн и добавить ему аккуратности (заметьте, профессионального дизайнера не привлекаем):

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

Второй пример – это случай, когда дизайн сбивает с толку и дает неверное представление о компании:

Первая мысль – это сайт тренажерного зала. Ан-нет, это сайт интернет-магазина спортивных товаров. Будет лучше показать сам товар, а не того, кто его использует. С точки зрения посетителя, на этой картинке какой-то тип качается «моей» штангой (то есть товаром, который я хочу купить). Покажем просто штангу, а заодно поставим в шапку правильный логотип (на исходном сайте он почему-то лишь в середине страницы):

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

2. Навигация

Это меню (основное верхнее, вспомогательные слева и в подвале) и хлебные крошки. Навигация показывает, что есть на сайте – какие товары/услуги предлагает компания и что можно про компанию узнать. Оптимально использовать 1-2 уровня вложенности. Если их больше, то будет сложно ориентироваться.

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

Старайтесь не ставить на одном уровне меню более 6-8 пунктов. Не забывайте, что объем внимания обычного человека – 5-7 объектов.

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

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

Возвращаемся к примерам. На сайте строительной компании было два меню (вверху и слева), мы можем объединить их в одно. Пункты «Услуги» и «Цены» объединим в один раздел «Услуги и цены» – как-то глупо рассказывать про услуги на одной странице, а про их цены – на другой. Пункт «Схема проезда» уберем вообще, схема будет в разделе «Контакты». Разделы «Вакансии», «Партнеры», «Карта сайта» тоже убираем, основной целевой аудитории этого сайта они не нужны. Пункт «Калькулятор» убираем из меню, делаем его отдельным блоком и ставим в правой части сайта.

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

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

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

3. Шапка

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

Работаем с шапкой для сайта строительной компании – добавим тэглайн, полное название компании, ее адрес. Чтобы не запутывать людей, оставим только один номер телефона (и возьмем городской номер, а не сотовый). Добавим режим работы – чтобы люди знали, в какое время можно звонить:

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

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

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

4. Подвал

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

Текущий футер у сайта из первого примера лишен смысла:

Добавим ему пользы:

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

Футер второго примера лишь чуть-чуть информативнее первого:

Сделаем его более «солидным»:

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

5. Контент

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

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

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

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

Цукерберг рекомендует:  Html - Помогите новичку

К примерам. На сайте строительной компании есть страница про ленточный фундамент:

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

В статье обязательно используем фотографии – ведь 50% людей хлебом не корми, а дай только фотки посмотреть, и даже не важно чьи =)

В примере спортивного магазина возьмем страницу о доставке:

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

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

6. Тексты

И еще пару слов отдельно о текстах. Есть 3 важных момента:

  1. Конкретика. Тут все просто. Пишем не «в нашей парикмахерской самые низкие цены», а «мужские стрижки от 300 рублей». Представьте, что рекомендуете компанию лучшему другу. Ему вы не скажете «индивидуальный подход», а доходчиво объясните – «закрепим за тобой спеца, он будет сопровождать все этапы работ и согласовывать с тобой». Не стесняйтесь говорить со своими посетителями таким же понятным языком.
  2. «Вы получите». Описывайте не то, что вы сделаете, а то, как от этого станет хорошо клиенту. Не «мы подберем вам лучшую путевку», а «вы проведете 10 дней в месте, о котором мечтали».
  3. Целевое действие. Увлекшись написанием правильного текста, не забудьте разместить в нем призыв к действию – Позвоните, Напишите, Оставьте заявку, Перейдите в каталог и пр.

Взглянем на страницу с описанием услуг нашего первого примера:

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

И даже гарантию от срыва сроков сюда добавили (слишком уж больное место, и не только в строительстве).

В примере интернет-магазина обратимся к главной странице:

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

Здесь целевое действие – это клик по карточке товара, поэтому каких-то отдельных кнопок нет.

7. Отзывы и кейсы

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

Что делать, если реальных отзывов нет? Стребуйте их со своих клиентов – за скидку, вкусняшку или большое спасибо. Так как мир не без добрых людей, то хотя бы один из десяти согласится дать отзыв о вас (тем более если за скидку), надо только попросить.

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

К примерам. Портфолио от строительной компании. На один объект – всего одна фотография.

Это мало. Как минимум, штук 10 фото на каждый объект – на разных этапах постройки, под разными углами. Плюс краткое описание – где, что и как строили.

Для интернет-магазина в наше время вот так уже пусто:

Взгляд привычно ищет отзывы:

8. Первый экран

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

Когда пользователь открывает из поиска сразу 5-7 сайтов, а затем последовательно просматривает их один за другим, он оценивает именно первые экраны. По результатам этой быстрой оценки 3-4 сайта закрываются сразу, остальные изучаются более тщательно.

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

Смотрим на примере. Вспомним первый экран сайта строительной компании:

Чет не зацепило. Попробуем привлечь попаданием в желание пользователя:

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

Теперь первый экран магазина спорттоваров:

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

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

9. Формы

Самая распространенная форма – обратная связь, «напишите нам». Для интернет-магазинов – форма отправки заказа.

Для пользователя работа с формами – не самый приятный момент, приходится отвлекаться на клавиатуру (не у всех высокая скорость печати, а кто-то еще и с телефона). Поэтому чем меньше полей в форме, тем лучше. Хотя правильнее сказать – чем меньше обязательных полей, тем лучше. Можно оставить в форме и 5-6 полей, если обязательны к заполнению только 2 поля. Кто не поленится и заполнит все поля – хорошо, у остальных нужную информацию выспросит менеджер.

Все поля в форме нужно подписать (в 2-3 слова). Можно добавить небольшое пояснение или пример заполнения. Обязательные поля нужно отметить звездочками – это уже давно стало стандартом.

Как пример рассмотрим форму заполнения заявки на расчет стоимости:

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

10. Поиск

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

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

11. Онлайн-консультант

Полезная вещь, если выполнены 2 условия: консультант не навязывается и консультант действительно работает.

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

И не стоит настраивать «выскакивание» окна «Чем я могу вам помочь» через 5 секунд после того, как пользователь попал на сайт. Он только начал знакомиться с вашим сайтом, и вопросы у него еще не возникли.

Стандартное место кнопки онлайн-консультанта – правый край окна (либо нижний правый угол).

В качестве примера – провокационный вопрос консультанта на сайте Мосигры:

Всплывает сам после просмотра 3-4 страниц сайта и после 20-30 секунд на странице – то есть когда похоже, что человек зашел в тупик с выбором игры.

12. Виджеты соцсетей

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

Например, покажите отзывы из ВКонтакте:

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

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

Улучшаем UX

Теперь переходим к скрытой части – к взаимодействию. Это UX (User eXperience) – опыт взаимодействия пользователя.

1. Скорость загрузки

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

2. Отсутствие ошибок

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

3. Увеличение картинок по клику

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

4. Валидация форм

Это проверка, правильно ли заполнена форма. Если посетитель не заполнил какое-то обязательное поле, то выделите это поле и укажите, что не заполнено именно оно:

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

5. Сообщения после отправки форм

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

6. Статусные сообщения и диалоги

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

Перепишите сообщения естественным языком:

7. Email-уведомления

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

8. Динамический контент

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

Например, если человек пришел на сайт просто из поиска, мы покажем ему стандартный вид:

А если он пришел с объявления «Детские спортивные комплексы», то в слайдере мы поставим на первое место тот из слайдов, который имеет отношение к детям, и ниже блок с детскими товарами тоже поставим первым.

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

9. Полезные инструменты

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

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

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

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

Мелочи

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

Из часто встречающегося:

1. А так можно было?

Не всегда посетители понимают, что картинки на странице можно посмотреть в полном размере (увеличить по клику). Простое добавление иконки «лупы» к картинкам решает эту проблему:

2. Адреса картинок и файлов

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

Мелочь, но минус в карму заработан. Тогда как «человеческие» названия файлов не вызвали бы негатива:

3. Кнопка «Наверх»

Актуальна для реально длинных страниц (например, как эта статья). Стандартное место – справа внизу, но может быть и слева (ВКонтакте, Хабр). Изначально кнопка невидима, но появляется, если человек уже прокрутил 1-2 экранов вниз. Я по старинке пользуюсь кнопкой «Home» на клавиатуре, но статистика показывает, что кнопка «Наверх» тоже имеет своих приверженцев.

4. «Приклеенная» шапка

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

Здесь сразу пример и «приклеенной» шапки, и кнопки «Наверх».

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

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

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

Юзабилити интернет-магазина: рекомендации

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

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

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

Особое внимание стоит обратить на следующие параметры:

  • функциональность;
  • простота структуры ресурса;
  • логичное расположение элементов.

Юзабилити интернет-магазина начинается с шапки сайта

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

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

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

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

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

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

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

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

Ошибки юзабилити футера

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

Иногда здесь можно разместить ссылку на страницы, которые также могут заинтересовать потенциального клиента:

  • контакты;
  • переход на сервисные службы;
  • ссылки на соц. сети, где представлена информация о данной компании.

Здесь уместно также разместить кнопку «наверх», особенно, если главная страница большого размера.

Заполнение карточки товаров и категорий — важная часть удобства сайта

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

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

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

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

Скорость загрузки сайта — ключ к юзабилити

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

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

Дизайн и юзабилити: простые правила удобных сайтов

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

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

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

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

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

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

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

  • С любой страницы сайта должна быть возможность перейти на главную страницу в один клик – то есть на каждой странице ресурса должна быть кнопка или ссылка «на главную»; это правило сейчас понятно почти всем и каждом, но не так давно дизайн и юзабилити не всегда совпадали, и даже такую обязательную кнопку на ресурсах можно было найти не всегда;
  • Все ключевые разделы сайта также должны быть доступны из главного навигационного меню; если разделов немного, то они должны быть организованы в один уровень (иметь прямую видимость), если разделов много, то их можно разбивать на несколько уровней (например, и использованием выпадающего меню);
  • Стремитесь делать дизайн и информационное наполнение так, чтобы размер одной интернет-страницы занимал не более полутора-двух экранных страниц на мониторе с наиболее распространенными в настоящий момент разрешениями (по состоянию на сентябрь 2020 года это разрешения 1920 на 1080 и 1366 на 768 пикселей);
  • Дизайн и юзабилити сайта должны быть сделаны так, чтобы сайт корректно смотрелся при всех (или хотя бы почти всех) разрешениях мониторов и экранов смартфонов – от 320 на 400 точек до разрешения 4К, а в обозримом будущем – и 8К.
  • Если страница в силу объективных причин имеет большой размер (например, на ней большой текст, которые не эргономично разбивать на несколько страниц), то внизу страницы необходимо разместить кнопку, позволяющую в один клик переместиться на верх текущей страницы (чтобы пользователь не тратил время на многократное прокручивание экранов колесиком мышки).

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

==
Если вам нравятся наши публикации – заходите также и на канал Лаборатории Контента в Яндекс.Дзене и поощряйте тексты лайками и репостами!

Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих