лендинг пейдж

Почему посетители вашего лендинга чувствуют себя не в своей тарелке и как этого избежать.

Представьте — вы инопланетянин. Прилетели на Землю первый раз. После приземления наткнулись на чей-то дом и нашли зубную щетку. Вы никогда не видели такого предмета прежде.

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

Аналогично с этим, форма дверной ручки говорит о том, что с ее помощью открывается дверь.

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

Они окружают нас в реальном мире. Но их также можно встретить и в цифровой форме.
Когда посетители первый раз попадают на вашу целевую страницу, они похожи на пришельцев, первый раз посетивших Землю.

Покажите им, как использовать вашу страницу, применяя знакомые визуальные подсказки.

Юзабилити проектировщик Дон Норман впервые упомянул эти «подсказки» в своей книге «Дизайн повседневных вещей (1988)». В ней он язвительно отметил:

«Если вы используете подсказки — пользователи знают, что делать. Без этикеток, изображений и инструкций. Это также просто, как открыть дверь при помощи ручки».

Очевидно, что дверную ручку мы поворачиваем, а дверь с табличкой толкаем. И нам не нужна инструкция, чтобы это понять.

Пожалуй, один из самых удачных примеров интуитивного дизайна в современной цифровой жизни — кнопка воспроизведения:

лендинг пейдж

На Земле осталось не так много людей, которые не понимают значение этой кнопки. В рамках контекста ее предназначение очевидно.

Кнопка воспроизведения, нарисованная на заборе, не имеет смысла, в отличие от изображения на панели цифрового устройства (например, МР3 плеера).

Итак, у юзабилити-подсказок две задачи:

  • привлечь внимание пользователя;
  • указать на функционал.

Используйте эти два принципа, и забудьте про инструкции.

Потому что в конце дня, попав на вашу целевую страницу, пользователь в последнюю очередь хочет во что-то вникать.

Сделайте юзабилити-подсказки своего лендинг ясными и заметными

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

Веб-дизайнер Наташа Постоловски описывает в своей статье для Smashing Magazine типы юзабилити-подсказок для веб-страниц:

«Очевидные подсказки поступают из языка или внешнего объекта. Текст «щелкните здесь» явно открывается нажатием. Кнопка, которая немного выступает из окружающей поверхности, кажется тактильной и вызывает желание нажать на нее».

Пример большой объемной кнопки, которую хочется нажать:

лендинг пейдж

Похожим образом, на лендинг пейдж Asana серым цветом как бы прописан адрес электронной почты (“name@company.com”). Таким образом пользователь получает очевидную визуальную подсказку – он видит куда вводить свой е-мейл.

лендинг пейдж

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

Остерегайтесь отрицательных подсказок

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

Вспомните относительно новый тренд «призрачная кнопка»:

лендинг пейдж

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

Добавим еще немного соли, на юзабилити-раны:

вы знали, что такой текст кнопки призыва к действию, как «Вперед!», «Пойдем!» или «Давай!» не информирует пользователя о том, что будет дальше?

Если сомневаетесь, проверьте свою кнопку.

Применяйте подсказки на лендинг пейдж

Подсказки везде. Вы можете увидеть их не только на вашем iPad, но также в подъездах и на дорогах. Используйте их эффективно, и вы сможете показывать людям – как интуитивно правильно взаимодействовать с объектом.

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

P.S. Лендинг должен быть настолько прост, чтобы даже ребенок смог успешно заполнить и отправить форму на вашей странице!