Як зробити клікабельні елементи лендингу інтуїтивно-зрозумілими

Щоб люди відчували себе на вашому лендинг максимально комфортно, ви повинні забезпечити їм зручну навігацію. Зокрема, вам необхідно подбати про те, щоб користувач міг легко ідентифікувати клікабельні елементи цільової сторінки.

Користувачі сприймають кліки як своєрідну валюту, і їм зовсім не до вподоби ресурси, які змушують витрачати цей капітал марно.

Пропонуємо вам невеликий тест: спробуйте вгадати які елементи цього сайту є інтерактивними. Правильна відповідь дивіться нижче.

Ефективність посилання в першу чергу залежить від тексту. Однак у цій статті ми сфокусуємося на тому, як впливає на клікабельність посилання її зовнішній вигляд.

Уявіть людину, яка опинилася на тому чи іншому ресурсі вперше. Навряд чи він клацатиме по випадкових точках оффера в пошуках інтерактивних елементів. Найімовірніше, він орієнтуватиметься на свій досвід взаємодії з іншими сайтами.

Так, наприклад, останнім часом все більшої популярності набирає плоский дизайн (flat design), що передбачає відмову від використання об'ємних графічних елементів. Відповідно до принципів плоского дизайну, розроблявся інтерфейс таких операційних систем, як iOS 7 і Windows 8. Цей підхід дозволяє спростити процес навігації.

Однак є і побічний ефект: зробивши вибір на користь плоского дизайну, ви більше не зможете привертати увагу користувачів до інтерактивних елементів за рахунок надання їм обсягу.

Перевірте себе: клікабельні області виділені зеленим

Дайте аудиторії зрозуміти, які елементи лендингу інтерактивні

Відвідувачеві доводиться «промацувати» курсором всю сторінку впошуках клікабельних областей? Ви повинні виправити це положення якнайшвидше. Пропонуємо ознайомитись з основними принципами розробки інтуїтивно зрозумілого дизайну.

Використовуючи синій колір для виділення посилань, ви будете впевнені, що користувач легко розпізнає їх. Втім, за потреби можна використовувати й інші кольори.
Навігаційне меню та списки (особливо ті, що знаходяться на периферії сторінки) не потребують підкреслення. Про клікабельність цих елементів говорить їхнє положення.
Переконайтеся, що колір посилань дозволяє розпізнати їх людям із дальтонізмом.
Колір, яким ви наголошуєте на посилання, не повинен використовуватися для виділення простого тексту.
Не використовуйте синій колір та підкреслення для виділення елементів, які не є інтерактивними.
Подбайте про те, щоб усі посилання на сторінці були оформлені за єдиним зразком.

Дизайн представленої нижче має низку недоліків:

Сині заголовки, що виглядають інтерактивними, насправді такими не є. Зображення, у свою чергу, клікабельні, але дізнатися про це можна лише досвідченим шляхом. Про допущені при роботі над дизайном помилки красномовно свідчить інструкція, що розташована у верхній частині сторінки, яка пояснює користувачеві, куди необхідно клікнути для завантаження файлу.

Starbucks використовує зелені посилання замість стандартних синіх. Однак розташування та оформлення цих посилань значно спрощує користувачу завдання щодо їх ідентифікації:

Зробіть так, щоб кнопки на вашому ресурсі мали звичний для даного елемента вигляд. Найпростіше досягти такого ефекту за допомогою об'єму. Якщо ж ви віддаєте перевагу плоскому дизайну, надайте кнопкам прямокутну форму ззаокругленими краями.
Подбайте про те, щоб елементи, що не є інтерактивними, не нагадували на кнопки. Так, наприклад, користувач може легко прийняти за кнопку текст, фон якого контрастує з фоном решти сторінки.
Встановіть чітку ієрархію контенту та не допускайте ситуацій, за яких кілька елементів лендингу конкуруватимуть між собою за увагу відвідувачів.

Кнопки на нижченаведеній сторінці не надто схожі на реальні, однак у користувача навряд чи виникнуть проблеми з їх ідентифікацією:

Як ви вважаєте, чи є кнопкою напис «products» в оранжевій рамці?

Правильна відповідь: не є. Однак зовнішній вигляд цього елемента може ввести користувача в оману.

На цій сторінці легко прийняти за кнопки заголовки Shop by Department та Tools & Resources»:

Зображення та графіка

Надайте людям можливість збільшити зображення, що їх цікавить, клікнувши по ньому
Збільшіть "мішень" для клацання, зробивши інтерактивними всі складові того чи іншого елемента (так, наприклад, ви можете забезпечити клікабельну фотографію таким самим клікабельним підписом).
Подбайте про те, щоб заклики до дії були чітко відокремлені один від одного.

Якщо вирішили зробити інтерактивним символ, його зовнішній вигляд повинен ясно вказувати на функцію. У разі потреби можете дати користувачам підказку. Прикладом такого роду підказки є стрілка в кутку елемента:

Втім, тут варто відзначити, що використовувати стрілки як орієнтир для користувачів варто лише у крайньому випадку. Стрілка є досить тонкою підказкою, увагу на яку люди звертають далеко незавжди.

Список клікабельний, що знаходиться під написом «Announcements», що здається цілком логічним. Проблема полягає в тому, що список у лівому нижньому кутку сторінки маркований такими ж нестандартними символами, але клікабельним при цьому не є.

Висновок

Ви ж не хочете, щоб навігація здавалася людям тортурами? Тоді не змушуйте їх витрачати час на пошук інтерактивних елементів. Пам'ятайте: кожен клік, витрачений відвідувачем даремно, зрештою обернеться фінансовими втратами для вашого бізнесу.