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

Итак, как повысить удобство использования сайта?

1. Проработайте шапку сайта

Чтобы шапка была максимально удобной и эффективной, в ней должны присутствовать следующие элементы:

Дескриптор

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

Конверсионные элементы

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

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

Контакты

На сайте рекомендуем указывать один, максимум два номера телефона. Оптимально, если один из них будет в формате «8 (800)…», так как он бесплатный для звонков из регионов. Большее количество номеров часто вызывает замешательство пользователей и визуально загромождает шапку.

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

Рассмотрим ещё несколько примеров шапок сайтов с дескриптором, конверсионными элементами и контактами:

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

• шапка должна быть небольшой по высоте (в среднем от 40 до 70 px), чтобы не мешать обзору;
• содержать кнопку перехода на главную страницу;
• содержать телефон и/или кнопку «Заказать звонок» для связи с компанией;
• содержать значок «Корзины» для быстрого перехода в неё и оформления заказа (для интернет-магазинов).

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

Вот примеры закреплённых при скроллинге шапок:

2. Проработайте главную страницу сайта

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

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

Яркий баннер/баннеры

Они должны быть в первом экране при просмотре. Желательно, чтобы на баннерах были представлены наиболее выгодные предложения и/или условия сервиса, например, скидки на определённые категории товаров, акции.

Блок преимуществ

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

Ссылки на основные разделы сайта

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

3. Проработайте элементы навигации

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

Разберём, какие элементы нужно проработать в первую очередь.

Меню

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

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

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

Футер

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

Если хотите улучшить юзабилити, в футере рекомендуется размещать следующие блоки:

• контакты;
• блок со ссылками на инфостраницы («О компании», «Фотогалерея», «Партнёрство», «Вакансии» и др.);
• блок со ссылками на сервисные страницы («Доставка», «Оплата», «Условия возврата», «Гарантийное обслуживание» и пр.);
• ссылки на аккаунты компании в соцсетях.

Примеры оформления футера:

Кнопка навигации «Наверх»

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

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

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

Пример ссылок с отдельных фраз:

Пример блочной перелинковки внутри текста:

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

4. Проработайте страницы товаров/услуг

Такие страницы можно разделить на три вида:

• каталоги товаров или услуг;
• карточки товаров;
• страницы услуг.

Рассмотрим каждую из них.

Каталожные страницы

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

Примеры каталогов товаров:

Пример каталога услуг в тематике «Аренда выделенных серверов»:

Карточки товаров

С точки зрения эффективности один из лучших способов организации карточки товара следующий:

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

Примеры оформления карточек товаров:

Страницы услуг

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

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

1. Создайте концепцию

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

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

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

2. Обеспечьте обратную связь

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

Ниже представлен эффект кастомного чекбокса (Custom Checkbox), созданный с использованием Slides framework . Тонкая подпрыгивающая анимация, которую пользователь видит при использовании переключателя, усиливает ощущение интерактивности.

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

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

3. Установите связь

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

Рассмотрим пример резкого перехода:

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

Второй переход мягче. Он наглядно демонстрирует процесс перехода между разделами, помогая пользователям понимать происходящее и видеть между ними связь.

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

4. Сделайте скучные задачи интересными

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

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

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

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

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

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

1. Не анимируйте несколько объектов одновременно

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

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

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

2. Анимация не должна конфликтовать с индивидуальными особенностями целевой страницы

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

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

Slides framework предоставляет 10 анимированных стилей, таких как Stack, Zen, Film, Cards и Zoom. Поэкспериментируйте с различными эффектами и выберите тот, который лучше всего подойдет по всем критериям.

3. Установите тайминг

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

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

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

4. Не забывайте о доступности

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

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

Специальная функция мультимедиа CSS, «prefers-reduced-motion» (предпочитает минимум движений) помогает отслеживать те ситуации, когда пользователь обращается с запросом минимизировать количество анимаций.

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

5. Тестируйте свои дизайнерские решения

Вот несколько советов, которые стоит учитывать при тестировании:

• Тестируйте на разном оборудовании.

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

• Тестируйте на мобильном телефоне.

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

• Просмотрите анимацию на медленной скорости

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

6. Анимация должна разрабатываться в начале

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

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

Заключение

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

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

Стоимость услуг по юзабилити сайтов

Улучшение юзабилити: связанные услуги

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

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

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

Результаты улучшения usability

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

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

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

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

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

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

1. Забудьте «правило трех кликов»

В своей книге Taking Your Talent to the Web (2001) Джеффри Зельдман (Jeffrey Zeldman), известная личность в мире веб-дизайна, выдвинул идею о том, что «правило трех кликов помогает создавать веб-сайты, обладающие интуитивной и логичной иерархической структурой». То есть, если для того, чтобы получить доступ к искомому куску контента, пользователю необходимо совершить больше трех кликов, он начинает испытывать фрустрацию, потому что это требует много усилий и воспринимается как трата времени.

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

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

Согласно исследованию, проведенному британским веб-дизайнером Джошуа Портером (Joshua Porter), пользователи, не обнаружившие искомый контент после трех кликов, не склонны прекращать поиски. Более того, в ходе исследования некоторые испытуемые совершили до 25 кликов.

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

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

2. Помните про F-паттерн

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

Теплокарта просмотра страниц сайта Якоба Нильсена

Eyetools, совместно с двумя маркетинговыми компаниями, Did-It и Enquiro, провела похожее исследование. В нем приняли участие 50 испытуемых, каждого из которых просили ознакомиться с результатами поиска Google. В итоге взгляд всех 50 испытуемых чаще концентрировался на верхнем левом углу, и тепловая карта имела F-образную форму.

Теплокарта просмотра страницы результатов Google

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

3. Скорость загрузки имеет значение

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

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

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

Взаимосвязь между задержкой в загрузке страницы в мс и изменением следующих показателей (слева направо): 1) число уникальных запросов на 1 пользователя (%); 2) число модификаций запросов (%); 3) прибыль на 1 пользователя (%); 4) общее число кликов (%); 5) удовлетворенность пользователей (%); 6) время на совершение клика (мс).

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

К счастью, существует множество инструментов, помогающих повысить скорость загрузки и работы страниц, например, такие как Page Speed от Google или YSlow от Yahoo.

4. Сделайте текст более читабельным

Известный юзабилити-специалист Якоб Нильсен провел исследование, в котором он изучал особенности восприятия текста посетителями своего сайта, и оказалось, что люди редко читают онлайн-контент, находящийся у них перед глазами. Посетители среднестатистической веб-страницы (ок. 593 слов) читают 20—28% текста. При дальнейшем увеличении объема текста этот показатель постепенно уменьшается вплоть до 10%.

Взаимосвязь между числом слов на странице и максимальной долей этого числа (в %), которую способен прочитать пользователь (при скорости чтения 250 слов в минуту)

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

5. Не зацикливайтесь на «линии сгиба»

Доброго времени суток, дорогие друзья! Сегодня мы поговорим с вами о такой важной вещи как U sability (юзабилити) сайта , о том, как улучшить данный фактор, зная его основные принципы и правила. Ну и в заключение научимся делать независимый и бесплатный аудит (анализ) своего проекта на привлекательность к его аудитории. Итак, начнем, пожалуй, с определения самого понятия usability (юзабилити).

Что такое Usability (юзабилити) и каковы его принципы?

Usability – с перевода означает меру удобства, качества, простаты в использование чего-либо. В нашем случае имеется в виду сам сайт, так как он непосредственно взаимодействует с пользователями интернета. От того какой уровень юзабилити у того или иного проекта напрямую будет зависеть его CTR (процент) продаж, позиции в поисковых системах и естественно количество трафика (посетителей). Если вам удастся улучшить данный фактор, то вы одним выстрелом убьете сразу нескольких зайцев, которые могут повысить ваш заработок в 2-3 раза! Вот что вы получаете в случае высокого уровня usability:

— Увеличения такой очень важной вещи как конверсии сайта (процент продаж), а значит и прибыль владельца сайта.

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

— Уменьшению бюджета (расходов) на контекстную и иную рекламу для привлечения посетителей. Зачем за них платить, если вас и так хорошо находят через поиск?

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

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

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

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

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

Итак, вот ряд тех вопросов, которые надо учитывать при проектировании сайта:

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

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

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

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

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

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

Основные правила как улучшить юзабилити контента (статей) сайта.

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

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

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

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

5 ) Вставляйте в публикации качественные картинки или . Это помогает улучшить usability статьи, ведь никому не хочется читать один нудный текст. Это, кстати, в наше время стало очень актуально, когда все больше и больше людей начали покупать небольшие комиксы, чем когда-то килограммовые книги.

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

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

Как улучшить юзабилити самого сайта?

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

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

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

10 ) Сделайте страницу . Вы, конечно же, можете удивиться: как же она может, повлияет на продажи? А вот как. Давным-давно одна компания сделала хитрую вещь, написав на странице 404 сообщение, что они просто не могут обработать товар и просили заново повторить процедуру покупки. Таким вот способом они увеличили свою прибыль на 380$ в месяц.

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

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

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

14 ) Сделайте заголовок и описание вашего сайта человечески понятным, чтобы пользователь с первого взгляда понял, что это за сайт и какова его цель. Многие, по моему мнению, делают одну и ту же грубую ошибку, вставляя в описание своего сайта название компании (особенно на английском) из которого пользователь ничего понять не может. Например, вот только что я ввел в поиск запрос «купить платье», перешел по первому же рекламному объявлению на сайт и что я вижу в заголовке? Mondigo.ru. Да, согласен, хороший прием, чтобы пользователь запомнил сайт, только вот вряд ли он им воспользуется.

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

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

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

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

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

18 ) Уберите всплывающую форму подписки которая помимо того, что и так сильно раздражает, еще и замедляет сайт в 10 раз. Также давно на многих сайтах лицезрел такую ужасную прелесть, когда при нажатии на крестик сайта выходила ужасная форма подписки с тупым вопросом: вы точно хотите покинуть этот сайт? Рекомендую отказаться от данного способа собирания емайл адресов, ибо этим вы только ухудшите ваши .

19 ) Знайте меру при монетизации сайта. Слишком много рекламы может отпугнуть или вообще не дать найти нужный материал читателю.

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

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

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

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

24 ) Уберите плеер со своего сайта, посетитель пришел, чтобы найти нужный ему материл, а не слушать классику или роке-н-рол. Также рекомендую убрать все ненужные элементы на сайте такие как: календарь, топ комментаторов и т.д.

25 ) И последнее, будьте дружественны и позитивны к вашей аудитории, ведь негатива и так всем хватает в своей жизни.

Как сделать качественный аудит (анализ) сайта бесплатно?

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

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

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