Мы - сертифицированные партнеры Google
Обратный звонок

Основные принципы правильного UX дизайна

Время чтения: 10 минут
03.02.17

Графический дизайн – это не просто фигуры, цвета, их соотношение и пропорции. Современное веб-пространство должно ориентироваться на один, самый главный показатель – удобство использования (юзабилити). Пользовательский опыт на сайте должен быть крайне позитивным, иначе – большинство из юзеров просто не вернется на сайт, а значит, шансы на конверсию уверенно стремятся к нулю.
Мы постарались собрать главные принципы UX дизайна посадочных страниц в одном материале. Безусловно, их может быть гораздо больше, у вас со временем и опытом могут появляться собственные фишки и секреты – смело делитесь ими в комментариях и дополняйте наш материал.

Не забывайте о правилах визуальной иерархии.

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

  • Польза от продукта, товара услуги – зачем это нужно пользователю, почему он не должен закрыть лендинг после трех секунд просмотра?
  • Как использовать продукт – почему удобно заказывать здесь, а не найти товар или услугу через поисковик и заказать на привычном ресурсе или купить в магазине?
  • Для чего это нужно именно пользователю – как продукт решает проблемы, и какие именно трудности он может решить.

Правильное визуальное расположение элементов лучше помогает определить пользователю, куда дальше ему идти: скролить, кликать на страницу, переходить в другой пункт меню и пр. Именно правильная визуальная иерархия должна отделять важное от второстепенного на сайте, она помогает ориентироваться в структуре ресурса и направляет пользователя на совершение конверсии.
Хорошим примером правильно настроенной визуальной иерархии может стать официальный сайт Apple – посмотрите, насколько лаконично и удачно вынесены на заглавный слайдер флагманские продукты (в данном случае – iPhone 7). Благодаря лаконичной подаче информации и правильной иерархии форм на сайте заблудиться практически нереально: слайдеры кликабельные, наверху разделы сегментированы по продукции.

iphone 7 slider

Позвольте сайту «дышать»

Так называемый white space несет огромную ценность для UX дизайна. Он позволяет пользователю лучше сориентироваться в интерфейсе и принимать решения. Все важные элементы и якоря визуальной иерархии разделены от второстепенного контента. Свободное пространство не обязательно должно быть белым или черным, оно просто должно легко отделяться от основных конверсионных элементов страницы.
Отличный пример – у Samsung. При скроллинге можно увидеть несколько секций только с изображением продукта, кратким заголовком и почти «невесомой» кнопкой подробнее. Дизайн не перегружен элементами, достаточное количество пространства помогает сконцентрировать внимание на продукте и помогает пользователю принять правильное решение, не отвлекаясь на второстепенную информацию.

screenshot samsung site

Навигация должна быть максимально простой и понятной

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

Не забывайте об адаптивности

Все больше людей используют смартфоны для поиска информации в интернете. Даже если конверсия совершается преимущественно с ПК, то ищут вас из сферы мобайла, а затем целенаправленно переходят на заинтересовавший ресурс через запрос в поисковике. По последним данным, больше половины пользователей утверждают, что в случае неудобного мобильного сайта или отсутствия адаптивного интерфейса в принципе, желание переходить на «полноразмерную версию» пропадает вовсе.
Очень важно проработать удобную навигацию и пользовательский опыт во всех версиях сайта, адаптивный дизайн – это уже не преимущество, а простая необходимость. Не нужно выносить на мобильную версию все пункты из полноценного десктопного варианта – все должно быть максимально понятно и лаконично, пункты меню должны находиться друг от друга на расстоянии, достаточном для того, чтобы идентифицировать касание и перенаправлять пользователя на необходимый ему раздел меню.
Стандартная схема – перемещение меню на левую (или правую) сторону экрана. Как пример, десктопная и мобайл версия сайта интернет-магазина косметики Makeup.

makeup mobile version

makeup desktop version

Последовательность – главное правило

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

Честность – превыше всего

Дизайн и интерфейс сайта должен завлекать, но не должен обманывать. Продукт или компания должны вызывать положительные эмоции и стопроцентное доверие. Визуальное подтверждение качества или отзывы – все это не помешает. Отличным решением станет видеоконтент, рассказывающий об особенностях товара и его основных характеристиках (задумайтесь, зачем на и без того успешной «Розетке» появились видео-обзоры гаджетов?).
По статистике, больше 70% людей положительно реагируют на видео-контент и решаются на конверсию.

Без тестов – никуда

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

karta klikov yandex

KISS на сайте просто необходим!

Под таким забавным названием скрывается едва ли не основной принцип UX- дизайна – «keep it simple, stupid!». Посадочная страница должна быть максимально проста, пользователь не должен думать – он должен в течение первых нескольких секунд на сайте уже понимать, что этот товар ему нужен. На лендинге детально прорабатывается только один путь – путь, который ведет к конверсии.
Для соблюдения принципа KISS вы должны ориентироваться на гармоничное соотношение цветов и шрифтов. Цветов на странице должно быть от трех до пяти. При этом, один из них будет основным, другой – вспомогательным, а 10% отведите на цветовой акцент.
Шрифты должны быть читабельны, лучше использовать два вида шрифта – один для текста, другой подойдет для оформления заголовков.
Добавляя новый элемент дизайна или навигации на посадочной странице, задайте себе вопрос о том, повлияет ли он на эффективность ресурса и принесет ли пользу? Только положительный ответ означает необходимость присутствия элемента в интерфейсе.

Появились вопросы ?

У нас есть ответы

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

Обсудить проект

ОБСУДИМ ПРОЕКТ?

заполните ваши контактные
данные, мы вам перезвоним и уточним все детали

Это поле обязательное для заполнения

Некорректный ввод

Это поле обязательное для заполнения

Некорректный ввод

данные не передаются 3-м лицам

заполните ваши контактные
данные, мы вам перезвоним

Это поле обязательное для заполнения

Некорректный ввод

Это поле обязательное для заполнения

Некорректный ввод

данные не передаются 3-м лицам