Інтерактивний дизайн сайту: 5 кращих трендів 2015 року

15

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

Інтерактивний дизайн сайту: 5 кращих трендів 2015 року

Love Holiday. З усіх робіт по інтерактивного дизайну за минулий рік найбільше виділилися п’ять, які в майбутньому, швидше за все, отримають ще більше визнання.

Що спонукає дизайн

Серцем інтерактивного дизайну завжди був обмін інформацією між комп’ютером і людиною, діалог між користувачем і сайтом. Але так як майже у кожного сайту є свої бізнес-цілі, то половина діалогу між користувачем і сайтом, інтерфейс часто працює за класичним методам продажу.

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

Давайте розберемо кілька поширених тактик, описаних у книзі Кращі практики інтерактивного дизайну.

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

Інтерактивний дизайн сайту: 5 кращих трендів 2015 року

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

Боязнь втрати – За результатами дослідження з’ясувалося, що інстинкт покупця уникнути болю набагато сильніше інстинкту задоволення від покупки. Постановка питання «Якщо ви не зареєструєтесь, то втратите 10$» набагато ефективніше, ніж Якщо ви зареєструєтесь, ви заощадите 10$».

Дефіцит – Чим менше товару, тим більший на нього попит. Уважно подивившись на сайти Groupon і Amazon, ви помітите, як вони підкреслюють дефіцит товару для управління конверсією.

Інтерактивний дизайн сайту: 5 кращих трендів 2015 року

Groupon

Невидимий інтерфейс

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

Зменшення і спрощення етапів – Чим менше кроків користувач робить для досягнення мети, тим більше успішний ваш інтерфейс. Етапи можуть бути невеликими, але навіть якщо ви позбавите користувача від одного зайвого кліка, то він це оцінить. Просто погляньте, як Über (скріншот нижче) перетворив багатоступінчастий процес додавання даних кредитки в один простий крок.

Інтерактивний дизайн сайту: 5 кращих трендів 2015 року

Зрозуміла візуальна комунікація – Дотримуйтеся послідовної візуальної теми і універсальних і зрозумілих піктограм, щоб користувач не заплутався (тобто іконка пошти означає список повідомлень або входять).

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

Слідкуйте за пересуванням користувача – Найкращий спосіб виявити надмірність інтерфейсу і непотрібні кроки це візуалізувати пересування користувача по сайту. Jessica Downey на прикладі своєї «карти щупалець» створює візуальну карту, допомагає правильно організувати етапи. Ryan Singer з сайту Basecamp придумав схожий, але більш швидкий спосіб.

Значення пробілів

У книзі «Кращі практики користувацьких інтерфейсів веб-дизайні» сказано, що порожнє місце це не завжди нудно. Прогалини необхідно використовувати як активну частину дизайну. З точки зору інтерактивного веб-дизайну прогалини це паузи між словами і реченнями. Розпізнавання та обробка елементів з екрану швидко втрачає сенс без коротких перепочинків.
Нижче я склав кілька порад щодо прогалин, які варто запам’ятати:

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

Інтерактивний дизайн сайту: 5 кращих трендів 2015 року

voghi

Мінімалізм додає искушенности – Мінімізувавши кількість елементів і збільшивши порожній простір, ви надаєте своєму сайту атмосферу елегантності і розкоші. Даний підхід часто можна зустріти на веб-сайтах модних брендів.

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

Текст інтерфейсу теж частина дизайну

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

Інтерактивний дизайн сайту: 5 кращих трендів 2015 року

Tuck Effect

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

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

Визначте контекст застосування вашого сайту – Ви пишете для веб-сайту або програми? Домашня або сторінка опису? Так само, як ви змінили основний текст під аудиторію, змініть сайт під середовище використання. Якщо ваш додаток спроектований для використання в метушливих або відволікаючих ситуаціях (Waze при водінні), скорочення тексту прискорити обробку інформації.

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

Відмінний дизайн

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

Інтерактивний дизайн сайту: 5 кращих трендів 2015 року

На прикладі MailChimp вікно підтвердження є найважливішою частиною залучення користувачів через email розсилку. Забавна картинка і смішний текст тільки підсилюють насолоду від використання сайту (не кажучи вже про те, що даний підхід знижує роздратування від масової розсилки пошти). Нижче я склав кілька швидких рад:

Не жертвуйте юзабіліті – Думайте про відмінний дизайн як про вишеньку на торт: вишенька розбавляє смак торта, але сама по собі вона нічого не дає. Ніколи не жертвуйте дизайном ціною ясності.

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

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

Інтерактивний дизайн сайту: 5 кращих трендів 2015 року