10 принципов эффективного веб-дизайна

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

Ключевые особенности поведения интернет-пользователей:

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

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

– Они нетерпеливы и хотят немедленного результата. 

– Они не стремятся к оптимальному выбору. Скорее остановятся на первом разумном варианте. 

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

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

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

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

Пример от компании Beyondis:

Контрастные цвета, крупные заголовки, ничего лишнего. Но как насчет ясности?

Напомним – пользователь сканирует страницу по F-схеме. И, судя по всему, создатели сайта это знали. Но что в итоге видит пользователь? Верхнее меню со стандартными пунктами – Главная, О нас, Решения, Продукты и так далее. И крупный заголовок: «Вне каналов. Вне продуктов. Вне распространения». Игра слов, конечно, впечатляет. Но что бы это могло значить?

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

Принцип второй: не испытывайте терпение пользователей

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

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

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

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

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

Впрочем, прибегать к этой «тяжелой артиллерии» не обязательно. Пример сайта Humanized: слово «Бесплатно» сразу бросается в глаза, при этом страница сделана в спокойном, информативном стиле.

Принцип четвертый : сразу показывайте, какие функции доступны пользователю

Современный веб-дизайн часто критикуют за директивность: пользователя буквально ведут за руку – сделайте шаг 1, шаг 2, шаг 3. Структурированные списки, крупные кнопки СТА. С точки зрения юзабилити все это очень эффективно. Это облегчает пользователю процесс взаимодействия с сайтом. Он сразу понимает, какие действия ему доступны и как ему достичь цели.

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

Принцип пятый: используйте сильные тексты

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

И говорить стоит только по делу. Если текст ориентирован на клиентов – избегайте заумных слов, жаргонизмов, маркетинговых терминов. Больше конкретики. К примеру, надпись «Зарегистрироваться» куда более эффективна, чем расплывчатое «начните прямо сейчас!»

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

Пример от Eleven 2: «У нас есть планы от 6 долларов в месяц». Сразу к делу, без лишних слов. 

Принцип шестой: стремитесь к простоте

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

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

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

Принцип седьмой: не бойтесь пустого пространства

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

Принцип восьмой: используйте визуализацию по максимуму

Три правила эффективной визуальной коммуникации:

• Структурированность. Четкая, последовательная подача информации;
• Экономичность. Минимум текста и визуальных элементов для решения задачи. Простота, ясность, однозначность всех элементов;
• Простота восприятия. Разборчивость, читабельность, наглядность. Используйте на странице не более чем три вида шрифтов и не более чем трех размеров. Оптимальная длина строки – 50-80 символов.

Принцип девятый: шаблоны – наши друзья.

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

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

Принцип десятый: тестируйте раньше, тестируйте чаще

Важные моменты:

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

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

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

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

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

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