Успешный веб-дизайн заключается не в красивой картинке, а в практичности. Главным на сайте всегда будет пользователь, поскольку он изучает информацию и принимает решения. Соответственно, нужно создать все условия для комфортного пребывания на странице. Достижение такого успеха зависит от соблюдения принципов веб-дизайна. От этого зависит упрощение восприятия контента, предлагаемого сайтом. Ориентация на пользователя означает понимание их действий. Потому, перед изучением принципов хочу обратить Ваше внимание на линию поведения пользователей при серфинге в Интернете.
Действия человека направлены на достижения результата в кратчайшие сроки. Безусловно, это касается и посещения веб-страниц. Поведение пользователя во многом похоже на посещение магазина. Он четко знает, зачем пришел, а потому идет в конкретные точки. При этом, пользователь хочет найти их как можно быстрее. При отсутствии конкретной цели, они ищут что-то интересное. Потому серфинг проходит очень быстро, а значит на привлечение внимания есть малая доля времени.
Пользователь любит качество. Расположение разделов, размер шрифтов, четкость изображений – всё это быстро бросается в глаза. Одна ошибка в каком-то слове или размытая картинка быстро отпугивает и провоцирует жать кнопку «Назад». Пользователь сканирует. Покупатель не обходит все полки, чтобы найти товар: он ориентируется на «якоря» (отдел с печеньем, овощной отдел и т.д.). Аналогично, пользователь сайта быстро переходит по ключевым точкам сайта в поисках необходимой или интересной информации. Как уже сказано, он хочет получить желаемое за короткий промежуток времени.
Пользователь не терпит. Серфинг в Интернете должен быть расслабляющим. Если веб-страница заставляет разбираться в материале или долго искать ключевую точку – пользователь уходит на другой сайт. Пользователи полагаются на интуицию. Почти всегда посетители просматривают сервисы, а не читают весь материал. К примеру, раздел «В центре внимания» должен содержать последние новости или ключевые события, нежели преимущества работы с сервисом.
Пренебрежение этой детали запутает посетителя. Пользователь любит контроль. При переходе в следующий раздел никто не ждет всплывающих окон или рекламы. Ведь они приводят к дополнительным кликам, которые сильно раздражают. Посетитель сайта принимает решения и хочет сразу получать результат, а не справляться с неправильной перелинковкой.
Веб-сайт не должен вызывать никаких вопросов. При изучении страницы пользователь не обязан думать «А что, если я сюда нажму?»: кнопка, картинка или текст должны содержать готовый ответ. Сложная структура и навигация вызывают очень много проблем. Пользователю попросту тяжело разобраться в системе и добраться до конечной цели. Правильно названные разделы, видимые подсказки и четкое расположение основных элементов помогут быстро переходить между страницами.
Яркий пример правильной структуры сайта – онлайн магазины вроде Zaful. Пользователь четко понимает, куда перейти для покупки рубашки или блузы. Он может быстро достигнуть цели (заказ товара), поскольку необходимые кнопки расположены в верхней части экрана, что исключает необходимость скролла страницы. Парадокс выбора. Многие думают, что мы идем в магазин, где более широкий выбор товара.
На самом деле, мы покупаем вещи там, где выбор соответствует нашим желаниям. Большое разнообразие сильнее запугивает. Подтверждение тому – эксперимент Шины Айенгар и Марка Леппера. Они дали участникам две таблицы: в одной 24 вида варенья, в другой – всего 6. Большее желание что-то купить появилось во втором варианте. Когда человек видит много информации, он устает и не хочет ничего решать, а значит не желает действовать.
Страница должна вести к выполнению минимуму действий. Клиент сможет быстро переходить между разделами и не устанет от контента. Более того, это исключает массу отвлекающих факторов и упрощает внешний вид сайта. Потому разобраться с его структурой намного проще, а значит цель будет достигнута быстрее.
При сканировании страницы пользователь всегда концентрирует свое внимание на ключевых точках экрана. Они зависят не от самой информации, а от места ее размещения. В фотографии есть «правило третей», по которому изображение нужно делить на 9 равных частей. Так формируются 4 точки силы, к которым приковано основное внимание.
Что нужно разместить в одной из этих точек на сайте? Призыв к действию. Зайдите на любой маркетплейс и обратите внимание на дизайн, что предложение начала работы или осуществление покупки всегда находится в одной из этих четырех точек. При этом, на перекрестках нельзя размещать панель навигации. Ведь она побуждает не к действию, а к переходу на другую страницу, с которой еще нужно разобраться. Возможно пользователь получит желаемое, но владелец сайта вряд ли.
При дизайне сайтов используется F-модель. Мы привыкли изучать информацию слева на право и снизу-вверх. Потому самые важные элементы стоит располагать в соответствующих частях экрана. Чаще всего, в левой верхней части экрана располагается название сервиса, а правой верхней – кнопка регистрации. Именно на этом и должен концентрировать внимание владелец сервиса. До правой нижней части дело почти никогда не доходит. Как правило, там размещают рекламные баннеры, комментарии или оставляют пустое пространство.
Мы все нетерпеливы от природы. Особенно это касается серфинга в Интернете, где среди бесконечного контента хочется побыстрее найти желаемое. Чем меньше кликов нужно посетителю, чтобы достичь результата, тем больше шанс, что он попробует сам сервис в действии. В первую очередь, позаботьтесь о скорости загрузки каждой страницы. Aberdeen Group провели исследование, которое показало, что секундная задержка снижает конверсию на 7%. Чтобы узнать скорость загрузки на сайте, можно использовать следующие сервисы:
Также, не заставляйте посетителей сразу вводить какие-то данные. Более того, оставьте обязательными для регистрации лишь электронную почту и пароль. Впервые зайдя на сайт, пользователь хочет его испытать, а не раскрывать свои данные. В идеале – сначала показать, как работает Ваш сервис, а потом призывать к действию. Пользователь должен понимать, зачем он «отдает e-mail». Иными словами, он знает, зачем тратит время на заполнение всех форм.
Сегодня это тренд во всех сферах, от интерьера комнаты до фотографии. Веб-дизайн не исключение. Существует два понятия: положительное и отрицательное пространство. Первое характеризует часть страницы, которая содержит любую информацию. Второе – пустое место, белый пробел. Многие боятся оставлять пустое пространство на страницах. Люди считают, что это создает впечатление незавершенности. Но это огромная ошибка, из-за которой многие сайты становятся нечитаемыми.
Веб-дизайн сайта Apple в этом плане можно считать эталонным. На экране всегда есть минимум информации, однако ее достаточно для ответа на все вопросы и призыва к действию. Во многом его оформление похоже на презентацию какого-то продукта этой компании. На экране всегда большая картинка и одно-два предложения или список.
При посещении страницы пользователь условно разделяет страницу по приоритету и важности информации. Так ему проще воспринимать контент и принимать решение. Именно поэтому с очередным гаджетом от Apple можно ознакомиться в считанные минуты. Очень часто для этих целей используеют плоский дизайн. Несколько советов касательно правильного использования пустого пространства: