Устройство минималистичных посадочных страниц

Original author: Karol K
  • Translation
  • Tutorial


Предыдущий перевод (Landing page, которая работает), посвященный дизайну качественных посадочных страниц набрал больше 150 000 просмотров. С тех пор прошло уже много времени и подход к дизайну изменился – все больше становится минималистичных страниц, о которых и пойдет речь в статье.

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

Бессмысленные фото из фотостоков, отталкивающие текстуры в фоне, извилистая навигация, социальные кнопки, виджеты блог постов и другие “навороты” отвлекают пользователей от целей, которые были заложены в дизайне.

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

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

Несколько примеров минималистичных LP


Чтобы удостовериться, что мы понимаем одно и тоже давайте взглянем на примеры минималистичных посадочных страниц (далее – LP):


Mailbox


TinyLetter


Dropbox


IFTTT

Обратите внимание, что приложения в примерах не самые простые; они решают полезные, инновационные и сложные задачи для своих пользователей.

Но сложность LP никак не связана со сложностью приложения.

Давайте изучим несколько замечательных примеров минималистичных LP и выведем подходы к дизайну, советы и идеи.

Минималистичные LP: Большая идея


Первое, что бросается в глаза – любая минималистичная LP служит только одной главной цели.

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

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

Каждый элемент в дизайне тщательно выбирается, чтобы направить пользователя на совершение главного действия.

Примеры LP: Dropbox

LP Dropbox главный пример хорошего минималистичного дизайна, который направлен на то, чтобы пользователь легко заметил единственный призыв к действию – зарегистрироваться.



Единственный элемент, на котором сделан акцент – это кнопка “Зарегистрироваться”.

Да, на LP Dropbox есть и второстепенные действия – скачивание десктопного приложения, авторизация или тур по сайту. Но дизайн не делает на них акцент и не мешает новым пользователям выполнять главное действие – регистрироваться.

Все несущественные элементы либо убраны из дизайна, либо никак не акцентируются:
  • Название сайта (Dropbox) не присутствует на LP; оказалось, что даже название приложения несущественный элемент
  • Чтобы объяснить как работает Dropbox используется простой рисунок, который так же служит для привлечения внимания к кнопке регистрации
  • Слоган «Your stuff, anywhere» очень короткий и простой

Dropbox сделали уверенный выбор действия, которое должен совершить пользователь и дизайн LP подчеркивает это действие.

Примеры LP: Mailbox

Mailbox это приложение, которое помогает пользователям эффективно работать с почтой на смартфонах. Его LP еще один хороший пример минималистичного дизайна.

Главное действие – переход на страницу приложение в App Store.



Справа от призыва к действию располагается кликабельный скриншот реального приложения, который объясняет суть Mailbox.

В меню сайта есть и альтернативные действия, но визуально они никак не выделяются.

Примеры LP: Karma

Karma это еще один отличный пример красивого минималистичного дизайна LP.

Главное действие на этой странице – клик по кнопке “Купить сейчас”, которая дублируется в шапке страницы и в центре. Цвет, стиль и текст обеих кнопок совпадает, чтобы создать связь между ними.



Альтернативное действие, которое может совершить пользователь – кликнуть на кнопку “Подробнее” (Learn more). Но эта кнопка прозрачная и имеет меньший визуальный вес, чтобы не отвлекать от главной кнопки “Купить сейчас” (Buy now).

Короткое описание сверху кнопок заключает в себе уникальное ценностное предложение: общественная раздача WiFi.

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

Основные компоненты минималистичной LP


Должно быть Вы уже заметили 3 повторяющихся элемента дизайна минималистичных LP:
  1. Главное действие
  2. Объяснение, что представляет собой продукт/сервис
  3. Альтернативные действия

Держите в уме эти 3 пункта, читая следующий раздел и глядя на примеры.

Советы по дизайну минималистичных LP


В этом разделе мы рассмотрим некоторые советы и идеи, в основе которых лежат ключевые компоненты LP, описанные выше

Фокус на создание хорошей визуальной иерархии

Для того, чтобы привлечь внимание к наиболее важным частям LP, визуальная иерархия должна быть правильно выстроена.

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

Вот список некоторых характеристик, которые влияют на положение элементов дизайна в визуальной иерархии:
  • Размер. Чем больше размер, тем выше элемент в иерархии
  • Положение на странице. Для большинства сайтов элементы в шапке и слева на странице занимают более высокое положение в иерархии
  • Цветовой контраст. Чем выше контраст между элементом и фоном или соседними элементами, тем выше позиция элемента в иерархии
  • Визуальная сложность. Чем сложнее элемент по сравнению с соседями, тем он выше в иерархии
  • Пустое пространство. Чем больше пустого пространства вокруг элемента, тем он выше



В приведенном примере обратите внимание, как размер, расположение, контраст, визуальная сложность и пустое пространство используются для формирования визуальной иерархии.

Примеры LP: Numbrs

На примере минималистичного дизайна Numbrs можно разобрать принципы визуальной иерархии.

Описание приложение (1) и кнопка призыва к действию (2) это два наиболее выделяющихся элемента на странице.



Кнопки управление звуком (3) имеет довольно высокое положение в визуальной иерархии, т.к. пользователю может захотеться выключить звук на странице.

Как видно, название продукта (4) и альтернативные действия (5) гораздо ниже в визуальной иерархии.

Примеры LP: Wander

Другой пример хорошей визуальной иерархии можно увидеть на LP Wander.

Зайдя на страницу, Вы увидите всего 4 элемента.



Самым главным элементом иерархии является надпись, которая объясняет, что проекту нужны новые пользователи (1). Под надписью находится кнопка-призыв к дейтсвию, предлагающая пользователям залогиниться (2).

Значительно ниже в визуальной иерархии находятся альтернативные действия – например, кнопка “Мне нравится” на Facebook, которая так же отображает текущее количество лайков, убеждая пользователей совершить главное действие (зарегистрироваться).

Самый нижний элемент в иерархии – просмотры социальных профилей проекта.

Создание визуальной иерархии в Вашем дизайне


Вот несколько ссылок на руководства по составлению визуальной иерархии:

Убедитесь, что главное действие это наиболее видный элемент


Сначала нужно определиться с тем, какое действие должны совершать пользователи. Клик по определенной кнопке? Лайк страницы в Facebook? Заполнить форму?

Выберите единственное главное действие и сосредоточьтесь только на нем, дизайн страницы должен акцентировать внимание только на этом действии.

Примеры LP: enthuse.me

Хороший пример странички, где главное действие ярко выделено – LP enthuse.me:



Примеры LP: IFTTT

Заметьте, как бросается в глаза призыв к действию на LP IFTTT:



Используйте цвета и типографику стратегически


Веб-дизайнеры, создающие минималистичные LP имеют ограниченный инструментарий – цвет и типографика самые главные в нем.

Примеры LP: Basecamp

Basecamp является хорошим примером минималистичной LP, в который цвет и шрифты играют большую роль.



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

Размеры шрифта и вариации в цветах элементов правильно распределяют внимание между элементами LP.

Примеры LP: Path

Следующий пример – LP Path, где цвет и отличные шрифты используются для создания правильной визуальной иерархии.

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



Разница в размере шрифта, цвете текста и расположении правильно разбивает LP на разные области внимания.

Используйте как можно меньше текста


Сейчас известно, что пользователи редко читают текст на страницах. Логично предположить, что на LP продукта, который пользователь видит в первый раз, его терпение еще меньше.

Минималистичные LP должны иметь короткие и понятные надписи. Чем меньше пользователю предстоит читать, тем быстрее он выполнит требуемое действие.

Примеры LP: Contently

Описать суть Contently можно в трех словах – “Рассказывайте хорошие истории” (Tell Great Stories). Сразу становится очевидно, что это сервис, суть которого направлена на контент. Количество текста на странице сведено к минимуму, уменьшая вероятность того, что пользователь собьется с пути к совершению действия.



Примеры LP: Shipment

Хорошим примером коротких текстов на LP является Shipment. Всего 5 слов – ”Делитесь и рецензируйте Ваш дизайн” (Share and review your design) – нужно пользователю, чтобы полностью понять, чем Shipment может быть полезным.



Объясняйте суть продукта/сервиса быстро


Существует много способов демонстрации, как работает продукт/сервис. Единственное правило тут – простота.

Пример видео объяснения: Couple

Проект Couple использует видео, чтобы объяснить суть своей работы, учитывая тот факт, что видео может значительно увечить конверсию.

Видео постепенно появляется при клике на иконку в центре экрана:



После нажатия, YouTube ролик открывается в модальном окне. Его легко закрыть, так что пользователю не обязательно смотреть весь ролик, прежде чем выполнить следующее действие.



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

Пример интерактивного описания: Apple Mac Pro

Минималистичная LP Apple Mac Pro демонстрирует еще один популярный подкод к описанию продукта – интерактивный тур.



Описание начинается с небольшой анимации, чтобы привлечь внимание и показать, что страничка интерактивная.

Пример описания с помощью статичного фото: Wallmob

Фото с большим разрешением на LP Wallmob это образец использования фото для передачи какого-то сообщения.



Оно наглядно демонстрирует, что такое Wallmob – кассовое приложение для мобильного устройства.

Сложная простота


Как видно, минималистичный дизайн для LP основан на простой концепции – в центре внимания должна быть одна и только одна цель.

Убирая лишние элементы, Вы получаете возможность направить Ваш дизайн (а также внимание пользователей) только на те элементы, которые реально важны.
Share post

Similar posts

Comments 23

    +15
    По поводу дизайна зачетно, интересно, спасибо.
    А вот по поводу слоганов, кто-то нам пояснит?
    Наше восприятие
    1) Put email in its place.
    Вызывает противление и недоумение.
    Противление — потому что команда.
    Недоумение — потому что с виду это стандартный интерфейс.
    Неясно зачем это нужно и какие функции выполняет.

    2) Email for people with something to say.
    Непонятно сразу что это и зачем.
    Плюс есть когнитивный диссонанс.
    Если нам есть что сказать, то почему это TINYletter называется?

    3) Your stuff, anywhere.
    Опять непонятно и немного страшно.
    Страшно, т.к. вдруг наши «stuff» оказываются везде, а они нам дороги как приватная память.

    4) Put the internet to work for you.
    Опять же непонятно и отдает mlm-ом.

    5) WiFi made for sharing.
    Окей, спасибо К.О.
    Earn FREE data. Окей, а зачем нам бесплатные данные?
    У нас их мало что-ли? Нам и так их девать некуда:)

    6) One app. Every bank.
    Это неплохо.
    Понятно что агрегатор, понятно что может быть полезным если много банков.
    Продукт описан, дурацких команд нет.

    7) Wander is now boarding.
    Кто такой вандер? Почему нам должно быть дело до того что на него садятся?
    Где кнопка для регистрации вообще, если они хотят новых пользователей?

    8) Showcase Your Work, Knowledge or Passion.
    Опять непонятно что. Очередной ЖЖ? А зачем?

    9) Last week 7148 companies signed up for Basecamp.
    Призыв последовать стадному чувству в такой явной форме вызывает неприятие.
    Плюс signed up — зарегистрировались, звучит как подозрительная статистика.
    Зарегистрированных это не постоянно пользующихся.

    10) The place for your personal life.
    Опять же, слишком абстрактно и непонятно.

    11) Tell Great Stories.
    Воспринимается как команда создавать контент для дяди.
    Зачем нам это может быть надо — непонятно.

    12) Share and review your designs.
    Это неплохо.
    В отличии от предыдущего пункта, здесь во-первых призывают не создавать контент, а делиться им. Уже другой акцент. А во-вторых понятна цель «деления» — получить отзывы на него.


    В общем из 12 примеров LP, нам дизайн везде в целом понравился, но слоганы имхо запороли 10 из 12 вариантов.
      +3
      9) Last week 7148 companies signed up for Basecamp.


      Это принцип социального доказательства — очень сильная штука, если использовать правильно (см. Чалдини). Если, конечно, не превращать в оксюморон типа «Миллионы пользователей Сбербанка не могут ошибаться».
        0
        Из ряда:
        1. «Педигри стал вкуснее на 83%»
        2. «Ваши волосы теперь будут блестеть на 3% больше»
        3. «Мы провели эксперимент в котором участвовали 2376 женщин умываясь каждый день мылом Dove. Каждая из них убедилась в потрясающем эффекте использования совершенно нового мыла Dove.»
        и тд :)
          +1
          Боюсь, вы не понимаете принцип социального доказательства. Здесь дело не в точности указанной цифры.
            0
            Из Википедии:
            Предполагая, что окружающие лучше знакомы с ситуацией,

            1. Ведь кто-то проверил, что Педигри таки стал на 83% вкуснее… какие-то «британские ученые» может быть, которым у нас нет причины не доверять. Ведь стоит же упомянуть в речи некие авторитетные личности и последующая информация будет восприниматься с большей уверенностью в её правдивости.
            2. Так же
            3. Так же
              +1
              В этом и суть, что ваша оригинальная фраза «Педигри стал вкуснее на 83 %» не использует принцип социального доказательства.
                0
                Хм…
                Значит внесем коррективы: «Педигри стал вкуснее на 84%, проверено британскими учеными».
                  0
                  Нет. 12341324 собаки подтверждают, что Педигри стал вкуснее. Вот это будет социальным доказательством.
        –1
        Противление к командам? Как раз наоборот. Не помню уже, но вроде у Горбунова была статья про это (что нужно на кнопках и ссылках писать «Зайдите», «Положить» и т.д.)
          0
          Не путайте неопределенную форму глагола (зайти, открыть) с повелительной (открой, закрой). Глаголы в инфинитиве, действительно, должны быть на кнопках, как описатели действия.

          Другое дело, что нет жесткого табу в «командном» отношении (для всего нужно A/B тестирование). Фразы типа «You should follow me on Twitter» или явный текст в сообщении «Retweet» повышают конверсию в несколько раз (опять же, для чего нужно A/B тестирование: RT дает меньше количество ретвитов, чем Retweet).

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

        Могу лишь предположить, что причинами могли быть: отсутствие доверия со стороны посетителей, так как страница существовала сама по себе и нигде не было ссылки на основной сайт (потому что его и нет), либо отсутствие «элементов доверия» (http://habrahabr.ru/post/143923/); неудачный дизайн; сам продукт (моторное масло).

        Так что рекомендую хорошенько подумать перед тем как создавать посадочную страницу. А то сейчас это в тренде и каждое агентство предлагает создание, оптимизацию и рекламную кампанию landing page.

        И ещё мне кажется, что landing page не для нашей страны. Как мне кажется, из-за того, что сомнительные продукты и мошенники активно пользовались landing page, у россиян предвзятое отношение к таким сайтам со всеми вытекающими.
          0
          еще бы, за 10 лет я более чем наелся такими страницами bit.ly/19Xb0En
            +1
            Блин, вы бы предупреждали хоть.
          +1
          Спасибо за пост.

          Хорошо бы, что аскетичные и функциональные страницы не заменили неразумно минималистические. А то это ведь может стать таким же «мэйнстримом», как и скрипты на JS в 10 строк :-)
            +10
            Не знаю как вам, а мне при посещении таких сайтов очень сильно раздражает чтобы прочесть больше инфы надо еще найти «не важную информацию»(ссылку/кнопку) и кликнунть что бы прочесть.
            • UFO just landed and posted this here
                +1
                Спасибо за статью! Действительно потрясающие вещи есть, среди них вот я запомнил видео клип Couple приложения.

                Но вопросы всё равно остаются (чуть выше уже об этом упомянули):
                (1) А как всё это работает и будет работать для жителей стран СНГ?
                (2) Насколько эффективно будет делать весь сервис (большинство веб-страниц) в минималистичном стиле? Или подобный минимализм необходим только при первой «встрече» пользователя с сервисом?

                Благодарю.
                  +1
                  1. Жители стран СНГ такие же пользователи интернета, которые кликают по баннерам или ссылкам и переходят на LP, где нужно их убедить в чем-то (подать заявку на кредитную карту или купить купон, например). Минималистичные LP есть и в проектах из СНГ, например Rocketbank.

                  2. Эффективность нужно проверять с помощью A/B тестов, но это уже повод для новой статьи, которую я обязательно напишу/переведу.
                  +7
                  у меня была вначале любовь к этому минимализму а сейчас понимаю что это другая крайность (противоположность перегруженным страницам). Кроме этого добивает что многие сейчас почитают эту статейку и наклепают мини-модный сайтик не понимая что нужно отсечь, а что оставить — в результате опять куча графической шелухи и минимум инфы.
                    +3
                    Такие посадочные странице через чур минималистичны. Открываешь — видишь слоган, как-то смутно догадываешься о чем речь. Но регистрироваться, чтобы уточнить в чем суть сервиса, желания не возникает.
                    Возможно, для Дропбокса (кто о нем еще не слышал?) это нормально, но мы им не конкуренты. Рассказать суть сервиса надо сразу и четко на одной странице. Примеры из предыдущей статьи на порядок круче.
                      +1
                      Прикольно, как я, не буду дизайнером, неделю назад сделал всё по вашим советам на страничке своей игры =) Аж приятно. Надо пойти, поучиться что ли дизайну куда-нибудь на курсы или книг почитать…

                    Only users with full accounts can post comments. Log in, please.