Что лучше всего воспринимается пользователями с точки зрения usability?

Добрый день!

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

Безусловно есть базовые аспекты usability, которые стоит изначально продумывать при разработке сайта (либо дорабатывать в процессе эксплуатации, если они не были учтены):

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

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

Пример: введем запрос в поиске "чашки петри" (почему-то именно этот запрос предложил мне яндекс в подсказках :)

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

Итак, пример 1:

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

Пример 2 (все тот же запрос "чашки петри"):

Дескриптор отсутствует и у пользователя могут возникнуть сомнения, точно ли это та компания, которая ему нужна.

1. Наличие в шапке сайта важных ключевых элементов

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

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

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

Сравним шапки сайтов в одной тематике (десктоп (ПК) версии):

Пример №1:

Что мы видим:

• логотип
• дескриптор
• поиск по каталогу
• региональность
• телефон (контактную информацию)
• новости
• авторизацию
• корзину

Чего не достает:

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

Что возможно лишнее:

• новости

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

Пример №2:

Что мы видим:

• логотип
• дескриптор
• региональность
• телефон (контактную информацию)
• описание наличия количества товаров
• авторизацию
• корзину
• кнопку обратного звонка

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

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

Пример №3:

Что мы видим:

• логотип
• дескриптор
• региональность
• телефон (контактную информацию)
• авторизацию
• корзину
• кнопку для связи через телеграм

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

В целом, представленная компоновка элементов нелогична и непоследовательно.

Схематичный прототип шапки, который можно было бы предложить для данной тематике (разработанный мной вариант):

Что мы видим:

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

То есть на прототипе, мы видим все элементы, которые важны потенциальному клиенту.

1. Наличие адаптивности

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

• размер экрана

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

• размер шрифтов

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

• всплывающие формы

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

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

Пример (дескоп):

Адаптив:

Ключевые моменты:

1. Отсутствует номер телефона, то есть невозможно из шапки оперативно уточнить информацию по товарам.

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

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

Это минимум, который сразу бросается в глаза.

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

Спасибо за внимание!