Принципы интуитивно понятного кликабельного лендинга

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

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

Например, популярными  становятся принципы плоского дизайна, который предполагают  применение  объемных графических элементов.  Интерфейс операционных систем вроде iOS 7 и Windows 8 был разработан,  исходя из них. Но с другой стороны, такой вид дизайна больше не обеспечит дополнительное  внимание пользователей к объемным интерактивным элементам.

Как сделать так, чтобы дизайн был интуитивно понятен?

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

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

3. Простой текст не стоит выделять тем же цветом, что и ссылки. Синий не нужно использовать для элементов, которые не являются интерактивными.

4. Следите, чтобы все ссылки были оформлены по одному образцу.

Кнопки

1. Необходимо сделать так, чтобы у кнопок  на ресурсе был максимально привычный и понятный для пользователей вид. Такой эффект обеспечивает объем, но если вы отдаете предпочтение плоскому дизайну, то лучше кнопки сделать прямоугольными с закругленными краями.

2. Важно, чтобы те элементы, которые не являются интерактивными, не были похожи на кнопки.

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

Изображения и графика

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

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

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

Символы

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

 

Итак, подведем итог: чтобы навигация не превратилась в пытку, постарайтесь тратить на нее как можно меньше времени. Помните, что каждый пустой клик обернется финансовыми потерями для вашего бизнеса.