Базовые правила, которые помогут вам создавать эффективные веб-сайты.
Среди дизайнеров распространено мнение, что пользователь сначала оценивает сайт визуально, а затем логически. Это верно лишь отчасти. Первое впечатление является комплексным, а не чисто визуальным. Сайт — это не шот на Dribbble, а пользователь — не дизайнер.
Давайте же взглянем на сайт глазами пользователей 👀. Что для них важно?
1. Релевантный контент
Имеется в виду информация и графические элементы, которые пользователь определяет как ценные и необходимые. Релевантный контент соответствует или, в идеале, превосходит ожидания пользователя. Это именно то, что пользователь искал, то, что он всегда хотел увидеть!
Релевантный дизайн является неотъемлемой частью такого контента. Он обращается к аудитории на ее собственном визуальном и ассоциативном языке. Люди понимают его не потому, что дизайнер прекрасно разбирается в дизайне, а потому, что дизайнер знает людей.
Успех любого проекта зависит от понимания целей бизнеса и пользователей. Нужно собрать информацию, проанализировать ее, разработать стратегию сайта, изучить группы пользователей и составить их портреты, а также провести множество тестов.
Чтобы создать релевантный дизайн, недостаточно быстро просмотреть ТЗ и сайты конкурентов.
Ваша задача — найти визуальный язык, понятный вашей аудитории.
Этот язык покажет пользователям, что вы с ними на одной волне. Найдите стиль, который соответствует вкусам пользователей. Выбирайте изображения, способные вызвать сильные эмоции. Пишите заголовки и тексты, которые не останутся без внимания. Сделайте что-то особенное, что-то, что мотивирует и вдохновляет.
Все это в совокупности сделает ваш продукт уникальным и желанным.
2. Привлекательный визуал
Плохая реализация испортит даже самую лучшую концепцию. Именно качество дизайна мгновенно формирует первое впечатление.
Люди интуитивно могут отличить хорошее от плохого, красивое и целостное от отталкивающего и несбалансированного. Плохой визуальный дизайн вызывает недоверие и желание поискать нужный контент в другом месте. Качество дизайна напрямую влияет на восприятие компании и ее продуктов.
Вот золотые правила визуального дизайна:
- стилистическое единство;
- четкая структура;
- продуманная композиция;
- визуальный баланс;
- иерархия элементов;
- система первичных и вторичных акцентов;
- гармоничная цветовая палитра;
- отсутствие лишних, отвлекающих элементов;
- достаточное количество свободного пространства;
- разборчивые шрифты;
- понятные иконки;
- знакомые формы и расположение элементов (например, кнопок, навигации, панели поиска);
- качественные, оригинальные изображения.
Все эти элементы вместе формируют положительное визуальное впечатление.
Следуйте золотым правилам дизайна.
Хороший дизайн всегда соответствует типу бизнеса и является частью бренда компании.
3. Свежесть
Хороший веб-дизайн инновационен. Он отражает дух времени и дает надежду на будущее. Если представленная информация неактуальна, вы потеряете своих пользователей. Никто не хочет жить прошлым. Устаревший дизайн заставляет людей игнорировать контент. Они думают, что все устарело, включая сам продукт. Дизайн, скопированный у конкурентов, так же плох. Люди уже видели нечто подобное, поэтому не будут воспринимать его как нечто новое и уникальное.
Используйте новые инструменты, современные тенденции и стили. Не ограничивайтесь дизайном. Чем шире ваш кругозор, тем больше идей вы генерируете: это позволяет создавать уникальные интересные проекты.
Оставайтесь молодыми и жадными до всего нового.
Эффективные сайты своевременно обновляются, следуют трендам и выглядят свежо. Но не стоит ломать привычные шаблоны взаимодействия, иначе вы отпугнете пользователей.
4. Соответствие ожиданиям
Вы можете привлечь пользователей красивым, свежим визуальным оформлением, но при этом не оправдать их ожиданий.
Пользователю нужны быстрые ответы на следующие пять вопросов:
- что вы предлагаете?
- нужно ли мне это?
- чем вы лучше других?
- можно ли вам доверять?
- как мне это получить?
Вау-эффект от великолепного дизайна улетучивается практически сразу же после его появления. Человек превращается в прагматичного Скруджа. Он хочет получить то, что ему нужно, не теряя времени.
Постарайтесь оправдать ожидания пользователей и даже превзойти их.
Ответы на эти пять вопросов должны лежать в основе информационной архитектуры вашего сайта уже на этапе планирования. Это позволит сэкономить время и избежать массы неприятностей.
Не путайте цели бизнеса и цели пользователя. Все, что не представляет ценности для аудитории, должно оставаться за кадром.
Дайте пользователям то, что им нужно, и вы получите то, что нужно вам.
Цель пользователя должна быть четко сформулирована. Недостаточно просто указать им путь. Попытайтесь визуализировать цель, используя все имеющиеся в вашем распоряжении инструменты.
Если цель слишком сложная, поищите подходящие образы, метафоры и ассоциации. Любой процесс можно показать с помощью видеороликов, анимации или изображений. Так легче воспринимать информацию. Пользователь видит образ своей цели и еще сильнее хочет взаимодействовать с сайтом.
Путь к цели должен быть простым и приятным. Устраните все препятствия и лишние шаги.
Сделайте цель пользователя видимой и упростите путь к ней 🎯.
5. Польза
Хороший сайт полезен, и это должно быть очевидно с первого взгляда.
Никто не будет прокручивать страницу до самого конца, чтобы найти преимущества вашего продукта. Управляйте вниманием, выделяйте главное, демонстрируйте полезность и мотивируйте пользователя с самого начала.
Чаще всего успешные популярные сайты не ограничиваются основным предложением. Они предлагают дополнительные возможности и бонусы.
Это могут быть видеоинструкции, советы, краткий обзор новостей, календарь, карта, список полезных ссылок и т.д. Неплохо работают и развлечения: добавьте несколько мини-игр, смешных или познавательных видеороликов, раздел с историями или мемами. Однако будьте осторожны! Не перегрузите страницу, чтобы не отвлекать пользователей от основных задач. Каждый элемент должен быть оправдан и протестирован.
Такие детали делают ваш сайт более ценным и привлекательным в глазах аудитории, и повышают коэффициент удержания. Пользователь чувствует, что вы заботитесь о нем. Это также хороший способ получить преимущество перед конкурентами.
Делайте акцент на преимуществах, которые получит пользователь, а не компания.
6. Простота использования
Хороший сайт не вызывает вопросов. Пользователи без труда находят на нем нужную информацию. Он предлагает только те функции, которые полезны и необходимы.
Простой, интуитивно понятный интерфейс:
- предсказуемая навигация
- упорядоченная структура
- только необходимые и полезные функции
- простые формы
- понятный путь к цели.
Главный принцип проектирования — качество важнее количества.
7. Типографика
Дизайнеры склонны воспринимать шрифты как элемент дизайна. Обычно их не волнует содержание текста. Но пользователи воспринимают письменный контент иначе! Для них текст не менее (а иногда и более) важен, чем изображения.
Дизайнер, который не разбирается в теме и не знает потребностей пользователей, может легко испортить общее впечатление. Типичные ошибки: удаление важных фрагментов, чтобы сделать текстовый блок более компактным, выделение ненужного, использование нечитаемых шрифтов и т.д.
Ключевые принципы хорошей типографики:
- четкая иерархия;
- контрастность;
- подходящая высота символов (см. Калькулятор размеров);
- гармоничные пропорции (отступы между символами и словами, высота строки);
- простой шрифт для основного текста;
- ограниченная длина строки (не более 60 символов для десктопа и 45 символов для мобильных устройств);
- не более 2 шрифтов на один сайт (максимум 3);
- выравнивание по левому краю (не злоупотребляйте выравниванием по центру).
Позаботьтесь о том, чтобы текст было приятно читать.
Выбирайте шрифты, которые соответствуют концепции сайта, общему стилю, вкусам и взглядам аудитории. И не забудьте всё протестировать!
8. Эмоции и мотивация
Даже самый удобный сайт часто имеет низкую конверсию и мало способствует расширению аудитории. Это особенно справедливо для конкурентных сфер. Пользователям трудно запомнить один сайт среди множества похожих. Сайт, не вызывающий никаких эмоций, легко игнорируется и забывается.
Пользователям нравится эмоциональный дизайн. Чтобы создать такой дизайн, вам нужно разработать подробные персоны, отражающие их индивидуальность.
Используйте фотографии и видеозаписи людей. Они должны быть естественными, а не постановочными. Идея заключается в том, чтобы отразить чувства аудитории. Поиск нужных образов — непростая задача, но оно того стоит. Это тот якорь, который вы забросите в сознание пользователя.
Ищите образы, которые вызывают у пользователей эмоциональный отклик.
Еще один эффективный инструмент — мотивация. Если вы знаете свою аудиторию, вы можете вдохновить ее на определенные действия с помощью визуальных стимулов. Самый лояльный и благодарный пользователь — тот, кто вдохновлен.
9. Адаптивность и отзывчивость
Какое бы устройство ни использовал человек для доступа к вашему сайту, это не должно влиять на юзабилити. Сайт не должен искажаться до неузнаваемости или терять важные функции. В зависимости от потребностей бизнеса и аудитории мы можем создавать адаптивный или отзывчивый дизайн. В отзывчивом дизайне используется один макет для всех устройств, в адаптивном — для каждого устройства свой. Эти моменты необходимо учитывать заранее.
Адаптивность и отзывчивость зависят от качества как дизайна, так и разработки.
10. Доверие
В системе ценностей пользователей доверие занимает первую строчку. Помните об этом не только на этапе разработки концепции, но и на протяжении всего проекта.
Сайт, заслуживающий доверия, предлагает:
● качественный, релевантный дизайн и контент;
● правдивую информацию;
● открытость;
● помощь и обратную связь;
● подтверждение компетентности (сертификаты, лицензии);
● ссылки на другие сайты;
● достоверные искренние отзывы.
Следуйте этим принципам, чтобы создать популярный сайт, который будет выделяться из толпы и обеспечивать высокую конверсию. Придется приложить немало усилий, но результат того стоит!
