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


Оглавление (нажмите, чтобы открыть):

Юзабилити сайта примеры. Повышаем эффективность

Юзабилити сайта примеры. Повышаем эффективность.

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

Если по простому — сайт должен быть понятен посетителю!

1) Оформление главной страницы сайта.

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

интернет магазин моего клиента

2) Размещение логотипа компании.

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

Хороший пример логотипа. Сразу понятно чем занимается этот магазина. (сайт — zavarka.net.ua)

3) Интерфейс сайта и скорость обработки данных.

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

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

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

Рекомендую прочесть 2 мои статьи про увеличение скорости работы сайта:

4) Цветовая гамма.

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

Мода на цыганские юбки прошла 574568734 лет назад.

5) Подбор и оптимизация фотографий.

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

Тут еще раз рекомендую прочесть статью:

6) Кликабельные ссылки и кнопки.

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

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

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

7) Текстовое оформление сайта.

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

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

8) Использование таблиц и диаграмм.

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

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

Помни, что сайт ты делаешь для ЛЮДЕЙ! Хватит клепать сайты с пустыми seo статьями. Статья на сайте должна отвечать на вопрос пользователя, дизайн должен помогать читать твои статьи!

Как улучшить юзабилити сайта: 6 простых советов

Отмечаем Всемирный день юзабилити вместе — мы подготовили удобный чек-лист по улучшению юзабилити сайта и поведенческих характеристик. Берите на заметку и увеличивайте количество продаж!

Автор: Анна Шумилкина, веб-аналитик Ingate

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

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

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

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

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

Дескриптор

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

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

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

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

Контакты

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Футер

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Здесь рекомендуется разместить блоки:

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

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

5. Проработайте функционал заказа

Формы захвата данных пользователя

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

  • Минимум полей. Если для заявки хватит одного поля, смело оставляйте только его.
  • Минимум обязательных полей. В идеале — только поле для ввода телефона или email-адреса (в зависимости от того, какой тип связи предпочтительнее для компании). В поле для ввода телефона рекомендуется добавлять маску, чтобы минимизировать риск ошибки при вводе. Также важно указать, какие поля обязательны для заполнения, например отметьте их звёздочкой. Для улучшения юзабилити сайта важно, чтобы функционал проверки заполнения обязательных полей был интуитивно понятным. Например, если пользователь не заполнит поле, его границы подсветятся красным цветом и появится надпись: «Пожалуйста, заполните обязательное поле».
  • Отсутствие капчи. Если капча всё же необходима для фильтрации ботов, рекомендуется использовать самую простую. На данный момент это reCaptcha от Google.
  • Яркая и заметная кнопка отправки заявки.
  • Наличие надписи о согласии на обработку персональных данных со ссылкой на политику конфиденциальности компании.
  • После отправки заявки пользователю должно показываться оповещение, в течение какого времени с ним свяжутся.

Примеры форм заявки:

Страница «Корзины»

Основные принципы организации страницы «Корзины»:

  1. Товары, которые пользователь добавил в «Корзину», должны быть визуализированы. Необходимо разместить их фото, указать наименование, цену, количество. Кроме того, у покупателя должна быть возможность увеличить и уменьшить число добавленных продуктов, удалить их, а также перейти из «Корзины» к карточке товара.
  2. Необходимо указать общую стоимость покупки, причём она должна автоматически изменяться при добавлении в «Корзину» новых товаров или их удалении.
  3. Кнопка начала оформления заказа или покупки в один клик должна быть яркой и заметной.
  4. Каждый шаг в процессе оформления заказа (выбор способа доставки и оплаты, указание адреса) важно визуально отделить от следующего.
  5. Пользователь должен чётко понимать, сколько он заплатит за доставку каждым из способов. Эту цифру желательно выводить отдельно, плюс указывать итоговую сумму с учётом стоимости доставки.

6. Увеличьте скорость загрузки основных страниц сайта

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

Чтобы оптимизировать скорость загрузки, нужно:

  1. На основе статистики Яндекс.Метрики и Google Analytics выбрать основные страницы, которые приносят максимальное количество трафика и/или страницы, на которые запланировано вести трафик в ближайшем будущем.
  2. Протестировать скорость их загрузки с помощью любых общедоступных сервисов, например Pagespeed Insights от Google.
  3. Реализовать доработки с учётом рекомендаций сервиса. Если вы не специалист в данной области, сделать это будет достаточно сложно, зачастую требуется помощь веб-разработчика.

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

Если доля мобильного трафика составляет более 20% или вы планируете увеличить её в ближайшее время, например за счёт запуска контекстной рекламы, создайте мобильную верстку или разработайте адаптивную версию ресурса для удобного отображения на смартфонах. И не забывайте про A/B-тесты. Это лучшее решение, если вы не знаете наверняка, что лучше сработает в конкретном случае!

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

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

  • Что размещать на главной странице?
  • Сколько в меню выводить категорий товаров?
  • В какой последовательности расположить пункты меню и т.д.

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

Какие элементы сайта рассматриваем в статье

«Шапка» сайта – самая видимая часть сайта, соответственно, сюда обращаем пристальное внимание и оцениваем эффективность каждого символа и иконки.

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

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

Графические элементы – а вы бы купили товар/заказали услугу по одной только картинке с этого раздела? Если нет, читаем и внедряем.

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

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

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

«Шапка» или хедер

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

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

Слоган-подстрочник – это краткое описание того, чем занимается компания. Такая надпись легко доносит до нового посетителя основную деятельность компании.

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

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

Навигация

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

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

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

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

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

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

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

Здесь реализация очень удачная и удобная.

Веб-формы

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

  • В форме должно быть минимум полей (если поле нужно сделать обязательным, то объясняем «почему»).
  • Указываем пример заполнения поля (формат номера телефона, адреса и т.д.).

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

  • Красной звездочкой (*) обозначаем обязательные к заполнению поля. Без заполнения этих полей не отправляем данные формы.
  • В обязательных полях проверяем корректность введенных данных. Так, телефон должен содержать только цифры и символы. В почте должен присутствовать символ «@».
  • После успешной отправки данных формы сообщаем об этом и прописываем, чего пользователю стоит ожидать дальше (позвоним, напишем, когда).
  • Очищаем поля формы только после успешной отправки данных веб-формы.
  • С 1 июля 2020 года (вообще-то всегда) необходимо размещать на каждой веб-форме чек-бокс с текстом «Я согласен на обработку персональных данных», где этот текст является ссылкой на документ. Документ должен присутствовать на сайте и содержать политику конфиденциальности. Подробнее см. закон «О персональных данных».

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

Одно обязательное поле аккуратно сверстано, присутствует поле для уточнения, если нужно.

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

«Подвал» или футер

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

Так, здесь размещаем:

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

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

Достаточно спорное оформление «подвала», но в целом от такой реализации больше плюсов. Заметьте, как много свободного места при таком количестве элементов. Здорово!

Графика

О графике вам следует знать следующее: мозг воспринимает графическую информацию в несколько раз быстрее, чем написанную текстом. Лучше один раз увидеть, чем 100 раз услышать, помните эту поговорку?

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

  • Используйте только качественные фотографии.
  • Используйте уникальные фотографии (для SEO – это тоже плюс). Не используйте стоковые фотографии.


Стоковые фотографии не несут необходимой информации о компании.

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

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

Адаптивная верстка

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

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

Для проверки сайта на адаптивность есть много онлайн-сервисов. Один из самых известных – сервис от Google. Чтобы посмотреть, как выглядит сайт на различных устройствах, я использую сервис adaptivator.ru.

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

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

Для чего следует улучшать юзабилити сайта?

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

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

Рассмотрим простой пример:

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

Вместо заключения

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

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

Удобных сайтов, больших конверсий, счастливых клиентов!

Спасибо за теплый отзыв!

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

В подстрочнике не обязательно должно быть полное название организации или вообще название органи.

Спасибо за теплый отзыв!

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

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

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

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

2. Если сократить надпись всё-таки никак не получается, то можно подстрочник расположить в шапке отдельным блоком. Примерно так: joxi.ru/gmvv8MlSLWZQ7m
или вот так: joxi.ru/n2YaepXtoPnnb2

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

Серей, надеюсь мне удалось натолкнуть вас на какую-либо идею.

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

Вступление

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Выводы

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

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

10 примеров по дизайну юзабилити вашего веб-сайта

Дата публикации: 2009-09-29

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

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

1. Ярлыки формы лучше всего работают над полем

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

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

Как создать сайт самому?

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

2. Пользователи концентрируются на лицах

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

На карте тепла видно, что взгляд привлекает лицо ребенка, смотрящего прямо на нас.

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

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

3. Качество дизайна является показателем доверия

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

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

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

4. Большинство пользователей не используют прокрутку или используют…

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

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

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

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

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

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

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

5. Голубой — лучший цвет для ссылки.

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

Как создать сайт самому?

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

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

6. Идеальное окно для поиска — 27 символов шириной.

Какая идеальная ширина должна быть для окна поиска? Якоб Нильсен провел исследование зависимости практичности от длины поисковых запросов на веб-сайтах поля поиска. Оказывается, что большинство сегодняшних поисковых форм слишком короткие.

Исследование показало, что среднее окно поиска составляет 18 символов в ширину. Данные показали, что 27% запросов были слишком длинные и не помещается в нее. Расширение поля до 27 символов смогло бы вместить 90% запросов.

Окно поиска Apple слишком короткое, отрезает запрос «Microsoft Office 2008″.

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

7. Белое пространство улучшает понимание

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

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

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

8. Эффективное пользовательское тестирование не должен быть обширными

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

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

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

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

10. Большинство пользователей не видят рекламу

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

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

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

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

Перевод и редакция: Рог Виктор и Андрей Бернацкий.

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

Как создать сайт самому?

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

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma!

10 советов по улучшению юзабилити сайта

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

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

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. Не зацикливайтесь на «линии сгиба»

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

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

Мастер Йода рекомендует:  Правила написания текстов для веб сайтов

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

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

Даже наоборот: движимые любопытством, пользователи, которым выше «линии сгиба» было представлено недостаточно информации, еще больше склонны скролить вниз. Специалист компании CX Partners Джо Лич (Joe Leech) также провел исследование на эту тему.

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

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

6. Важный контент — в левую часть страницы

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

Доля времени, уделяемая просмотру каждой зоны страницы в зависимости от удаленности этой зоны (в пикселях) от левого края экрана

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

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

7. Не забывайте про пустое пространство

Итак, вам удалось привлечь пользователя на сайт. Теперь вы хотите, чтобы он остался на нем подольше. Что нужно для этого сделать? Мы уже говорили про повышение читабельности. Один из способов заставить пользователя более подробно изучать содержимое — правильный выбор стиля и размера шрифта. Использовать шрифт serif или sans-serif? Средний кегль или крупный? А что насчет расстояния между строками и буквами? И насколько шрифт должен контрастировать с фоном?

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

Влияние наличия полей: 1) на скорость чтения; 2) на степень усвоения текста. (Слева — с полями; справа — без полей).

8. Дело в мелочах

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

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

И это ошибочный подход.

Одна незначительная на вид мелочь может определить разницу между успешным и совершенно провальным ресурсом. Дизайнер пользовательских интерфейсов Джаре Спул (Jared Spool) приводит в качестве примера этому один из случаев из своей практики, когда удаление одной-единственной кнопки, которая озадачивала многих пользователей в процессе оформления заказа, в первый же месяц привело к повышению продаж на 45%. В результате только за первый год прирост выручки составил $300 000 000.

Похожие соображения, видимо, двигали специалистами дизайнерской компании Flow. На этапе оплаты заказа кредитной картой на их сайте периодически возникала ошибка, и пользователь попадал на стандартную страницу «ошибка 404». Маркетологи компании переработали страницу, и вместо бесполезного сообщения пользователи стали видеть следующий текст: «Просим прощения, возникла ошибка при обработке заказа. Списания средств с вашей карты не произошло. Пожалуйста, перейдите в корзину и попытайтесь снова». (We’re sorry, we’ve had a problem processing your order. Your card hasn’t been charged yet. Please click checkout to try again.) Вежливо, лаконично и в то же время информативно.

В результате ежемесячное число оформленных заказов возросло на 0,5%, что выразилось в дополнительных 25 000 000 фунтов стерлингов выручки в год.

Информативное сообщение вместо стандартного «ошибки 404»

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

9. Поиск не должен служить компенсацией неудобного меню

Заходя на ресурс, каждый ожидает увидеть удобное меню навигации, даже в тех случаях, когда сайт обладает хорошим функционалом поиска. Таким образом, навигация просто обязана быть хорошо структурированной и удобной в использовании. Американский дизайнер Джерри Мак-Гаверн (Gerry McGovern) провел исследование, по результатам которого 70% испытуемых для нахождения нужного контента предпочли кликать на ссылки, вместо того чтобы использовать поиск.

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

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

10. Домашняя страница теряет значимость

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

Еще одно исследование, проведенное Джерри Мак-Гаверном, показало тенденцию снижения числа просмотров домашних страниц: в 2003 г. число просмотров главной страницы одного крупного интернет-ресурса составляло 39% от общего числа просмотров, а в 2010 г. этот показатель снизился до 2%. По результатам аналогичного исследования процент просмотров главной страницы другого веб-сайта в период с 2008 по 2010 гг. уменьшился с 10% до 5% соответственно.

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

Как сделать сайт удобнее: юзабилити

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

15 шагов по улучшению юзабилити

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

Ясное и осознанное взаимодействие

1. Выбирайте размеры шрифтов

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

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

2. Пишите информативные сообщения об ошибках

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

Но настоящие пользователи не могут этим похвастаться.

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

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

Удобство форм ввода

3. Упростите требования к паролям

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

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

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

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

4. Используйте правильные формы ввода

Многие советуют использовать форматирование данных в полях ввода. Например, если добавить input[type=»email»], input[type=»tel»] , то при вводе автоматически переключается раскладка. Однако выглядит это странно и вовсе не помогает, а мешает в заполнении формы.

Мастер Йода рекомендует:  Помните о рождественских вирусах – предупреждает PandaLabs в Интернет

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

Использовать разные типы ввода в HTML 5 целесообразно лишь тогда, когда полей на экране как можно меньше. Хороший пример — двухфакторная аутентификация Google: здесь лишь одно поле, в которое можно ввести только цифры. Тут будет очень уместным автоматическое переключение на цифровую раскладку.

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

5. Срежиссируйте яркий и запоминающийся опыт первого использования

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

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

6. Дьявол в деталях

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

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

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

Хорошим решением может быть встраивание процесса обучения в обычную процедуру использования продукта. Допустим, при выполнении архивирования писем в почтовом приложении можно выдавать сообщение «А вы знаете, что можно запускать архивирование с помощью Ctrl + K?». Такой подход позволяет обучать пользователей гораздо мягче по сравнению с традиционными уроками в стиле «обзор всего приложения».

7. Микрокопирование не должно использоваться задним числом

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

  • «Не волнуйтесь, мы не допустим утечки вашего почтового адреса»
  • «Для оплаты не требуется банковская карта»

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

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

8. Всегда обеспечивайте наличие контекста

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

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

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

Крайне популярный сегодня material design от Google вывел на новый уровень использование анимации для обеспечения контекста. Нажатие на объект запускает анимированное перетекание из текущей страницы к подгружаемой информации об объекте. Это наглядно показывает логические взаимосвязи, откуда что проистекает и куда пользователь вернётся.

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

9. Атомарные действия

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

Один из замечательных примеров: модальное окошко “compose new tweet” в Twitter’е, представляющее собой модуль для выполнения одного из важнейших действий в этом приложении. Ведь Twitter умрёт, если люди перестанут твитить. Как видите, здесь всё нацелено на то, чтобы пользователь мог сосредоточиться на написании текста, не отвлекаясь ни на что лишнее.

Этот подход работает эффективнее всего при выполнении атомарных действий. При этом вы можете предоставить всё необходимое для совершения действия в рамках того же самого модала.

10. Сообщения об ошибках

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

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

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

11. Сосредоточение уведомлений в одном месте

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

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

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

12. Избегайте тупиковых состояний

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

13. Предоставляйте пользователю контроль

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

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

14. Избегайте рассеивания внимания

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

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

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

15. Разбивайте большие сложные задачи на более мелкие операции

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

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

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

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

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

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

То же самое можно сказать и о формах пожертвования, в особенности в мобильных проектах. Вы же наверняка хотите, чтобы пользователь подумал: «Надо же, как всё просто» вместо «Да уж, на это нужно время». Улучшение удобства пользования формами напрямую отражается на прибыльности проекта.

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

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

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

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

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

Разработка
сайтов

Юзабилити сайта — простота и удобство его использования посетителями, понятность и правильность расположения элементов управления. Хорошее юзабилити — один из ключевых факторов увеличения трафика и продаж. По оценкам экспертов, сайт, сделанный в соответствии со всеми веб-стандартами и имеющий хороший показатель по удобству использования, растет быстрее и привлекает больше клиентов, чем другие порталы. По оценкам компании Forrester Research, сайты теряют около 50% посетителей, из которых 40% больше не возвращаются из-за плохого юзабилити. Поэтому улучшение этого параметра — ключ к успешному продвижению сайта.

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

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

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

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

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

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

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

Архитектура информации. Главная страница сайта и ссылки должны быть легко узнаваемы. Навигация понятная и без лишних уровней вложенности. Максимальное количество ссылок и кнопок в меню — 7. Используйте четкие и понятные URL без лишней динамичности.

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

Identity — информация о вас. Логотип компании хорошо виден, а слоган позволяет сразу понять ее сущность и цели. На анализ главной страницы уходит не более 5 секунд. Информация в разделах «О нас» и «Контакты» отвечает на все вопросы посетителя.

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

Улучшаем юзабилити сайта: 64 совета, как сделать сайт удобнее

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

Проверка шапки сайта

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

Проверьте, что в шапке сайта находится:

  1. Логотип компании.
  2. Информация о видах деятельности.
  3. Телефон или другая контактная информация.
  4. Предпочтительно указывать в шапке городской номер телефона. Для компаний, работающих с несколькими регионами – номер 8-800- для бесплатных звонков из других городов.
  5. Рядом с телефоном указано время работы компании.
  6. Номер телефона прописан текстом, а не картинкой.
  7. Шапка не перегружена лишними элементами, отвлекающими внимание.

Проверка навигации сайта

Анализ навигации входит в стандартный анализ юзабилити сайта. На сайте может быть горизонтальное меню и вертикальное меню.

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

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

Навигация должна быть:

  1. Интуитивно понятной пользователю.
  2. Логичной, т.е. выстроенной по какому-то понятному принципу.
  3. Информативной. Проверьте, что в меню имеются все обязательные разделы. Их список мы разбирали в статье «Как правильно разработать и оптимизировать структуру сайта?»
  4. Ссылки в меню должны быть набраны текстом, не картинками.
  5. Цвет ссылок должен выделяться и не совпадать с цветом основного текста на сайте.
  6. Ссылки должны реагировать на наведение курсора. Например, у ссылки должен меняться цвет, появляться или исчезать подчеркивание.
  7. Избегайте перегруженного меню. Это усложняет навигацию на сайте.

Проверка оформления текстов на страницах

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

  1. В тексте имеется заголовок.
  2. Заголовок набран самым крупным шрифтом и хорошо выделяется.
  3. Соблюдается иерархия заголовков, а именно: самым крупным шрифтом набран заголовок, подзаголовки – средним шрифтом, основной текст – шрифтом меньше, чем у подзаголовков.
  4. В тексте имеется минимум один подзаголовок на экран текста.
  5. Основной шрифт достаточно крупный и хорошо читается.
  6. На сайте использован шрифт без засечек.
  7. Цвет шрифта достаточно контрастный по отношению к фону сайта. Оптимальный вариант: черный шрифт, белый фон.
  8. Выравнивание текста сделано по левому краю. Это самый удобный вариант для чтения с экрана. Выравнивание по ширине использовать не рекомендуется.
  9. Перечисления оформлены в виде списков – нумерованных или ненумерованных.
  10. В тексте используются фотографии, иллюстрирующие факты из текста.
  11. Проверьте, что фотографии оптимизированы к размещению в Интернете и имеют небольшой размер в Кб. Оптимально – 50-100 Кб для крупных снимков и менее 50 Кб для небольших изображений.
  12. Все фотографии имеют описания в ALT-теге, указывающие, что изображено на фотографии.
  13. В текстах с описанием услуг имеются прайс-листы либо калькуляторы для расчета примерной стоимости услуги.
  14. В тексте имеются ссылки на другие разделы сайта (по принципу «Википедии»).
  15. Рядом с текстом находятся кнопки социальных сетей, позволяющие делиться ссылкой на страницу.
  16. В конце коммерческих текстов имеется призыв к действию либо ссылка на форму обратной связи, контакты компании.

Проверка каталога товаров

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

  1. Имеет логичную и понятную структуру.
  2. Имеет минимальный уровень вложенности для данного числа товаров. Не стоит делать в каталоге множество уровней, т.к. сложный каталог может запутать пользователей, усложнить навигацию и создать трудности при индексации сайта поисковыми системами.
  3. Все товары в каталоге имеют фотографии. Оптимально размещать несколько фотографий для каждого товара.
  4. На уникальных фотографиях, сделанных специально для сайта клиента, должен быть водяной знак с адресом (URL) сайта.
  5. Если в качестве фотографии товара используется изображение его упаковки, добавьте вторую фотографию с содержимым упаковки, показывающем сам товар и его комплектацию. Например, на сайте интернет-магазина детских товаров у настольных игр в качестве фотографии была только упаковка игры, а что внутри – покупатель не мог увидеть.
  6. На сайте должна быть возможность увеличить фотографию товара, чтобы рассмотреть продукт в деталях.
  7. По возможности товары должны иметь подробное описание. На карточках товаров должны быть подробные технические характеристики.
  8. Акционные товары и товары со скидками должны выделяться в каталоге и привлекать к себе внимание.
  9. Стоимость товаров должна быть набрана крупным шрифтом, чтобы клиент сразу видел цену.
  10. Кнопка «Добавить в корзину» должна быть крупной и хорошо заметной.
  11. В каталоге товаров должна выводиться информация о наличии товаров на складке. Если товаров осталось немного – указываться количество товара (в штуках).
  12. Если товар имеет несколько размеров или расцветок, должна быть возможность выбора конкретного размера и расцветки при добавлении товара в корзину.
  13. Рекомендуется предусмотреть возможность оставлять отзывы или оценивать товары.
  14. Если товара нет в наличии, но ожидается его поставка, рекомендуется выводить информацию об этом и предлагать оформить предварительный заказ.
  15. В разделах каталога необходимо предусмотреть возможность сортировать товары по важным для клиентов параметрам. Как минимум, по стоимости и популярности.
  16. В карточке товара необходимо выводить список сопутствующих товаров и аналогов с более высокой и более низкой ценой.

Советы для владельцев интернет-магазинов:

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

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

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

Проверка юзабилити форм

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

  1. Форма должна иметь заголовок, обозначающий, что это за форма (форма регистрации, заказа и т.д.).
  2. После заголовка желательно добавить короткую инструкцию по заполнению формы, буквально 1-2 предложения.
  3. Поля, обязательные для заполнения, должны быть выделены. Как правило, для выделения используют знак *.
  4. Желательно исключить из формы поля, не обязательные для заполнения. Любое лишнее поле снижает конверсию формы.
  5. Рядом с полями или непосредственно в полях необходимо разместить подсказки с примером заполнения форм. Если подсказка находится в поле, при активации поля она должна исчезать.
  6. На коммерческих сайтах формы должны быть без капчи. Любая капча ухудшает юзабилити формы и является дополнительным препятствием для пользователей.
  7. Поля формы должны быть достаточно большими, чтобы пользователю было удобно вводить информацию.
  8. Дизайн формы должен учитывать современные тенденции и быть интуитивно понятным пользователям, учитывать их пользовательский опыт.
  9. Кнопки в форме должны реагировать на наведение курсора мыши. Например, менять цвет.
  10. При наведении курсора на кнопки последний должен меняться на «палец», чтобы пользователь понял, что перед ним кнопка и на нее можно нажать.
  11. Если пользователь пытается отправить неверно заполненную форму, должна выводиться ошибка с рекомендациями, что сделано неверно и как исправить проблему.
  12. После отправки формы должно выводиться уведомление, что форма отправлена, и указываться время реакции на сообщение пользователя (например: «Вам ответят в течение 24 часов»).

Иные проверки

  1. Попытайтесь взглянуть на сайт глазами типичного пользователя. Что Вам удобно или неудобно? Отметьте это в отчете по результатам анализа юзабитили.
  2. Проверьте, работает ли регистрация на сайте, восстановление пароля, функции личного кабинета.
  3. Для улучшения юзабилити важно, чтобы сайт приемлемо выглядел во всех популярных браузерах. Проверьте данный факт. Отметьте в отчете выявленные проблемы.
  4. Откройте сайт на мобильных устройствах. Проверьте, что сайтом удобно пользоваться, можно легко просматривать информацию, находить нужные разделы, отправлять заявки.
  5. Проверьте, что на сайте работают сортировки, формы подбора.
  6. Если на сайте имеется возможность оформить заказ, пройдите все этапы оформления заказа. Если Вам что-то показалось неудобным, подумайте, что можно улучшить.

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

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

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