- PVSM.RU - https://www.pvsm.ru -
Предыдущий перевод (Landing page, которая работает [1]), посвященный дизайну качественных посадочных страниц набрал больше 150 000 просмотров. С тех пор прошло уже много времени и подход к дизайну изменился – все больше становится минималистичных страниц, о которых и пойдет речь в статье.
За последние несколько лет веб-дизайнеры постепенно пришли к тому, что нагромождение элементов на страницах не очень хорошая идея.
Бессмысленные фото из фотостоков, отталкивающие текстуры в фоне, извилистая навигация, социальные кнопки, виджеты блог постов и другие “навороты” отвлекают пользователей от целей, которые были заложены в дизайне.
Многие дизайнеры предпочитают использование фундаментальных форм добавлению все большего количества разных элементов и опций.
И хотя мы делаем сайты, которые визуальное проще чем их предшественники, они добиваются куда больших результатов.
Чтобы удостовериться, что мы понимаем одно и тоже давайте взглянем на примеры минималистичных посадочных страниц (далее – LP):
Mailbox [2]
TinyLetter [3]
Dropbox [4]
IFTTT [5]
Обратите внимание, что приложения в примерах не самые простые; они решают полезные, инновационные и сложные задачи для своих пользователей.
Но сложность LP никак не связана со сложностью приложения.
Давайте изучим несколько замечательных примеров минималистичных LP и выведем подходы к дизайну, советы и идеи.
Первое, что бросается в глаза – любая минималистичная LP служит только одной главной цели.
Это может быть регистрация, подписка или скачивание чего-либо, но самое важное, что есть только одно четко определенное действие, которое, по мнению дизайнера, должен совершить пользователь.
На минималистичных LP отсутствует сложная навигация, Вы не увидите много социальных кнопок. В таком дизайне не применяются фото из фотостоков, цель которых – заполнить пустое пространство.
Каждый элемент в дизайне тщательно выбирается, чтобы направить пользователя на совершение главного действия.
LP Dropbox [4] главный пример хорошего минималистичного дизайна, который направлен на то, чтобы пользователь легко заметил единственный призыв к действию – зарегистрироваться.
Единственный элемент, на котором сделан акцент – это кнопка “Зарегистрироваться”.
Да, на LP Dropbox есть и второстепенные действия – скачивание десктопного приложения, авторизация или тур по сайту. Но дизайн не делает на них акцент и не мешает новым пользователям выполнять главное действие – регистрироваться.
Все несущественные элементы либо убраны из дизайна, либо никак не акцентируются:
Dropbox сделали уверенный выбор действия, которое должен совершить пользователь и дизайн LP подчеркивает это действие.
Mailbox [2] это приложение, которое помогает пользователям эффективно работать с почтой на смартфонах. Его LP еще один хороший пример минималистичного дизайна.
Главное действие это переход на страницу приложение в App Store.
Справа от призыва к действию располагается кликабельный скриншот реального приложения, который объясняет суть Mailbox.
В меню сайта есть и альтернативные действия, но визуально они никак не выделяется.
Karma [6] это еще один отличный пример красивого минималистичного дизайна LP.
Главное действие на этой странице – клик по кнопке “Купить сейчас”, которая дублируется в шапке страницы и в центре. Цвет, стиль и текст обеих кнопок совпадает, чтобы создать связь между ними.
Альтернативное действие, которое может совершить пользователь – кликнуть на кнопку “Подробнее” (Learn more). Но эта кнопка прозрачная и имеет меньший визуальный вес, чтобы не отвлекать от главной кнопки “Купить сейчас” (Buy now).
Короткое описание сверху кнопок заключает в себе уникальное ценностное предложение: общественная раздача WiFi.
В данном примере фоновая фотография имеет большое значение – она показывает как выглядит продукт и дает наглядное представление о размере устройства (рука, держащая устройство, является своего рода подсказкой).
Должно быть Вы уже заметили 3 повторяющихся элемента дизайна минималистичных LP:
Держите в уме эти 3 пункта, читая следующий раздел и глядя на примеры.
В этом разделе мы рассмотрим некоторые советы и идеи, основанные на трех основных компонентах LP, описанных выше.
Для того, чтобы привлечь внимание к наиболее важным частям LP, визуальная иерархия должна быть правильно выстроена.
Визуальная иерархия – это продуманное расположение элементов дизайна, при которой соблюдается порядок просмотра элементов (т.е. пользователи сначала обращают внимание на самые важные элементы).
Вот список некоторых характеристик, которые влияют на положение элементов дизайна в визуальной иерархии:
В приведенном примере обратите внимание, как размер, расположение, контраст, визуальная сложность и пустое пространство используются для формирования визуальной иерархии.
Минималистичный дизайн Numbrs [7] это хорошая тема для разговора о визуальной иерархии.
Описание приложение (1) и кнопка призыва к действию (2) это два наиболее выделяющихся элемента на странице.
Кнопки управление звуком (3) имеет довольно высокое положение в визуальной иерархии, т.к. пользователю может захотеться выключить звук на странице.
Как видно, название продукта (4) и альтернативные действия (5) гораздо ниже в визуальной иерархии.
Другой пример хорошей визуальной иерархии можно увидеть на LP Wander [8].
Зайдя на страницу, Вы увидите всего 4 элемента.
Самым главным элементом иерархии является надпись, которая объясняет, что проекту нужны новые пользователи (1). Под надписью находится кнопка-призыв к дейтсвию, предлагающая пользователям залогиниться (2).
Значительно ниже в визуальной иерархии находятся альтернативные действия – например, кнопка “Мне нравится” на Facebook, которая так же отображает текущее количество лайков, убеждая пользователей совершить главное действие (зарегистрироваться).
Самый нижний элемент в иерархии – просмотры социальных профилей проекта.
Вот несколько ссылок на руководства по составлению визуальной иерархии:
Сначала нужно определиться с тем, какое действие должны совершать пользователи. Клик по определенной кнопке? Лайк страницы в Facebook? Заполнить форму?
Выберите единственное главное действие и сосредоточьтесь только на нем, дизайн страницы должен акцентировать внимание только на этом действии.
Хороший пример странички, где главное действие ярко выделено – LP enthuse.me [12]:
Заметьте, как бросается в глаза призыв к действию на LP IFTTT [5]:
Веб-дизайнеры, создающие минималистичные LP имеют ограниченный инструментарий – цвет и типографика самые главные в нем.
Basecamp [13] является хорошим примером минималистичной LP, в который цвет и шрифты играют большую роль.
Зеленый цвет используется для главного призыва к действию. Синий используется для второстепенных призывов к действию (авторизация или просмотр 25 причин, по которым стоит использовать сервис).
Размеры шрифта и вариации в цветах элементов правильно распределяют внимание между элементами LP.
Следующий пример – LP Path, где цвет и отличные шрифты используются для создания правильной визуальной иерархии.
Примечательный зеленый цвет используется для главного действия (заполнение формы):
Разница в размере шрифта, цвете текста и расположении правильно разбивает LP на разные области внимания.
Сейчас известно, что пользователи редко читают текст на страницах [14]. Логично предположить, что на LP продукта, который пользователь видит в первый раз, его терпение еще меньше.
Минималистичные LP должны иметь короткие и понятные надписи. Чем меньше пользователю предстоит читать, тем быстрее он выполнит требуемое действие.
Описать суть Contently можно в трех словах – “Рассказывайте хорошие истории” (Tell Great Stories). Сразу становится очевидно, что это сервис, суть которого направлена на контент. Количество текста на странице сведено к минимуму, уменьшая вероятность того, что пользователь собьется с пути к совершению действия.
Хорошим примером коротких текстов на LP является Shipment [15]. Всего 5 слов – ”Делитесь и рецензируйте Ваш дизайн” (Share and review your design) – нужно пользователю, чтобы полностью понять, чем Shipment может быть полезным.
Существует много способов демонстрации, как работает продукт/сервис. Единственное правило тут – простота.
Проект Couple [16] использует видео, чтобы объяснить суть своей работы, учитывая тот факт, что видео может значительно увечить конверсию [17].
Видео постепенно появляется при клике на иконку в центре экрана:
После нажатия, YouTube ролик открывается в модальном окне. Его легко закрыть, так что пользователю не обязательно смотреть весь ролик, прежде чем выполнить следующее действие.
Этот пример так же демонстрирует правило, которое следует применять к второстепенным действиям и контенту – постепенное открытие. Видео на странице имеет большой визуальный вес, что сильно влияет на визуальную иерархию, поэтому оно открывается только при желании пользователя.
Минималистичная LP Apple Mac Pro [18] демонстрирует еще один популярный подкод к описанию продукта – интерактивный тур.
Описание начинается с небольшой анимации, чтобы привлечь внимание и показать, что страничка интерактивная.
Фото с большим разрешением на LP Wallmob [19] это образец использования фото для передачи какого-то сообщения.
Оно наглядно демонстрирует, что такое Wallmob – кассовое приложение для мобильного устройства.
Как видно, минималистичный дизайн для LP основан на простой концепции – в центре внимания должна быть одна и только одна цель.
Убирая лишние элементы, Вы получаете возможность направить Ваш дизайн (а также внимание пользователей) только на те элементы, которые реально важны.
Автор: makaroni4
Источник [20]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/news/52145
Ссылки в тексте:
[1] Landing page, которая работает: http://habrahabr.ru/post/143923/
[2] Mailbox: http://www.mailboxapp.com/
[3] TinyLetter: http://tinyletter.com/
[4] Dropbox: https://www.dropbox.com/
[5] IFTTT: https://ifttt.com/
[6] Karma: https://yourkarma.com/
[7] Numbrs: https://www.numbrs.com/en/
[8] Wander: http://onwander.com/
[9] Работа с визуальным весом в Вашем дизайне: http://sixrevisions.com/graphics-design/visual-weight-designs/
[10] Создание фокуса в Вашем дизайне: http://sixrevisions.com/web_design/creating-focal-points/
[11] Принципы гештальта в дизайне: http://sixrevisions.com/web_design/gestalt-principles-applied-in-design/
[12] enthuse.me: http://www.enthuse.me/
[13] Basecamp: https://basecamp.com/
[14] известно, что пользователи редко читают текст на страницах: http://www.nngroup.com/articles/how-users-read-on-the-web/
[15] Shipment: http://shipmentapp.com/
[16] Couple: http://couple.me/
[17] видео может значительно увечить конверсию: http://www.internetretailer.com/2011/03/07/product-videos-raise-purchase-likelihood-stacks-and-stacks
[18] Минималистичная LP Apple Mac Pro: http://www.apple.com/mac-pro/
[19] Wallmob: https://www.wallmob.com/
[20] Источник: http://habrahabr.ru/post/208068/
Нажмите здесь для печати.