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

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

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

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

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

Эффективный веб-дизайн

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

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

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

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

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

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

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

Эффективный веб-дизайн от компании Beyondis

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

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

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

Эффективный веб-дизайн от компании ExpressionEngine

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

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

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

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

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

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

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

Эффективный веб-дизайн на фукусировке внимания пользователя

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

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

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

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

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

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

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

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

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

используйте сильные тексты для эффективного веб-дизайна

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

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

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

стремитесь к простоте в дизайне

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

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

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

Для примера – сайт Cameron.io. Обратите внимание, как четко структурирована информация на странице. Без всякого сложного фона, графических акцентов, крупных заголовков. Просто за счет грамотного использования «воздуха».

Эффективный веб дизайн на примере Cameron.io

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

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

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

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

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

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

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

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

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

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

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

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

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

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