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

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

Протестировать

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

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

Улучшить коммуникацию

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

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

Обновить визуальный контент

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

Добавьте иконки в области, где необходимо внимание пользователя, сохраните единообразие шрифтов и цветов во всех разделах.

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

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

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

Мы добавили возможность сравнения всех параметров для промосайта автомобилей специальной серии KIA

Калькулятор для выбора параметров тарифа на сайте нашего клиента СберМобайл

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

Акцентировать главное

86% пользователей хотят увидеть информацию о продукции или сервисе компании на главной.

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

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

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

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

Поставьте кнопку Above the fold, а дополнительную информацию ниже. Это позволит пользователю увидеть кнопку сразу же, как он зайдет на страницу.

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

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

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

Добавить свободного пространства

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

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

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

Создать настроение и характер

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

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

Для Первой Башенной Компании мы разработали на 404 странице игру с 7 уровнями сложности: пользователь может самостоятельно построить башню из падающих блоков.

Чего хотят пользователи

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

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

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

2. Чистых страниц без поп-апов.

3. Понятного текста, написанного удобочитаемым шрифтом. 

4. Ярких страниц с современным look & feel. 

5. Быстрой загрузки и ответа.