Інтерактивне розповідання історій та його застосування в індустрії веб-дизайну
Наявність елемента графіки є необхідністю кожного веб-сайту в наш час. Без належного використання візуальних засобів ви просто не зможете донести своє повідомлення до відвідувача, а ще краще – змусити його покинути ваш веб-сайт.
Візуальні матеріали мають потенціал проникнути всередину свідомості глядача та заманити його до всього, що ви намагаєтесь представити, продати чи інвестувати. Щоб використати візуальні ефекти у своїх інтересах і якнайшвидше отримати трафік, найкращий спосіб залучити відвідувача та навернути його — це інтерактивна розповідь.
Чому Story Telling?
Я знаю, що має зараз виринати у твоїй голові. Яке відношення мають Попелюшка чи Рапунцал до візуального досвіду веб-сайту? Оповідання історій не обмежується лише казками та франшизами Діснея, але оповідання історій є досить ефективним засобом маркетингового комплексу будь-якого веб-сайту, який прагне посісти перше місце серед конкурентів.
Як створити інтерактивну історію
Потрібне багато планування та випробувань, щоб поєднати дизайн із історією, щоб, коли ви показуєте його на цільовій сторінці свого веб-сайту, він не робив із вас дурня. Ваші візуальні ефекти не обов'язково повинні бути майстерною роботою кількох дизайнерів і дорогою CGI. Ви можете розповісти свою історію за допомогою всього лише одного чітко сформульованого банера. Однак проблема виникає, коли ваша розповідь перетинається з метою вашого веб-сайту. Про що ваш сайт? Який логотип вашого бренду і чому він продає те, що продає? Усе, що ви пояснюєте за допомогою візуального матеріалу, має бути унікальним без жодного дюйма плагіату. Це має стати настільки переконливим, що після одного відвідування вашого веб-сайту люди починають ділитися ним, говорити про це та переглядати його знову.
Як це працює
Існує величезна різниця між веб-сайтом із зображеннями, графікою та анімацією та простою текстовою платформою, яку ви називаєте веб-сайтом. Неможливо засуджувати людей, і до того, як ви зможете правильно поговорити, вони зникають. Мультимедійні елементи вводяться, щоб уникнути цього. Коли клієнт бачить звичайний текст, що описує продукт, виникає відчуття примусу прочитати алфавіти та слова заяви, тоді як зображення, відео або графічну анімацію так само легко побачити, як і зрозуміти.
Продаж великого продукту з короткою історією
Компанії, яка продає автомобілі, потрібно багато заповнити, перш ніж вона зможе здійснювати продажі через свою онлайн-платформу. Купівля автомобілів онлайн забирає у клієнта багато нервів, оскільки йдеться про великі суми. Якщо веб-сайт не вдається привернути увагу клієнта, то це не що інше, як сміття, що витає в Інтернеті. Продаж автомобілів, вантажівок або важкої техніки в Інтернеті під певними маркетинговими кутами, щоб показати USP (унікальні точки продажу) продукту. Я знаю автомобільний веб-сайт, який використав ідеальну техніку оповідання, щоб показати свою шикарність на екрані клієнта.
приклад :
Lexusls.asia — це відгалуження Toyota, яке продає розкішні автомобілі. На веб-сайті дизайнери блискуче використали паралакс прокручування, щоб представити автомобіль із достатньою кількістю тексту, щоб відвідувач зацікавився. Потім раптом справа котиться шина, яка демонструє інші круті особливості автомобіля. Коли ви прокручуєте вниз, веб-сайт не відпускає вас і за допомогою чудової графіки описує призначення та переваги автомобіля.
Візуальна мова
Візуальна мова має здатність задіяти саму основу дизайну, орієнтованого на людину. Візуальна мова сягає далекої давнини, і ще до того, як був винайдений будь-який алфавіт, оскільки наскальні малюнки були основним засобом спілкування. Печерні малюнки були джерелом оповідань, посібником для виживання та запобігання потенційних небезпек, які були частиною того періоду. Печерні малюнки більш-менш є найдавнішою формою візуальних даних.
Ми знаємо, що зображення та відео мають велику комунікативну силу, як можна використати цю силу за допомогою пікселів?
приклад :
Це коли ваша власна уява починає грати. Додайте зображення та відео з правильним текстом, щоб ваш веб-сайт говорив сам за себе.
Bellroy.com продає свої шкіряні гаманці з гарантією більшого простору та тоншого дизайну. Як вони показують це через елегантний слайдер із HD-зображеннями одного з їхніх гаманців проти іншого. У міру того, як повзунок рухається, історія також рухається, і в межах 10 зображень однакова кількість карток поміщається в їхній фірмовий гаманець, тоді як інший гаманець деформується більше, ніж є насправді. Тут висновок вражаючий і з мораллю.
Створіть історію
Це дуже схоже на написання п’єси, коли ви створюєте візуальну історію. Усі аспекти та елементи п’єси присутні на вашому веб-сайті та переплітаються з такою інтимністю, що вони повністю зливаються з історією, яку ви представили. Ваша історія починається з організованої вами ситуації, потім переходить до конфлікту й завершується вирішенням.
Цей веб-сайт, наприклад, має унікальний спосіб взяти відвідувача під руку та запросити на танцювальний бал, наповнений емоціями та візуальними задоволеннями.
Користувачі повинні добре знати історію, оскільки вона веде їх до місця призначення. І саме тут відвідувач стає лідом, а лід стає клієнтом. Цілком справедливо, щоб продукт або послуга, які ви плануєте представити в процесі розповіді, мали щось, що потрібно користувачеві, унікальну функціональність або цінову маржу, яку шукає клієнт.
приклад :
Bagigia.com спочатку представляє відвідувачу роздрібного продавця, а потім просте, але глибоке 3D-зображення самого продукту з емоційним текстом, щоб зберегти історію. Досить білого інтервалу в дизайні допомагає користувачеві зосередитися, оскільки продукт виділяється в центрі, перетворюючи історію на дію та її вирішення.
Використовуйте анімаційну історію для ваших переваг
Це правда. Анімація веб-сайту стала жертвою надмірного використання без урахування умов чи стандартів, і це головна причина її падіння за останні 5 років. За іронією долі, дуже мало дизайнерів знають, як використання розумної та актуальної анімації може перетворити вашу історію на фільм про Темного лицаря. Анімація створена, щоб охопити те, що не можуть завершити статичні зображення, і в той же час додати розваги самому дизайну.
приклад :
Говорячи про DarkKnight, ця програма для iOS на benthebodyguard.com дозволяє вам захищати та шифрувати інформацію на вашому веб-сайті, яка містить покрокову анімацію (буквально), коли ви спускаєтесь із «Беном» посередині, охоронець поклявся захищати вашу інформацію за допомогою чудова репутація. Цей веб-сайт показує, як найкраще використовувати анімацію для створення ідеальної історії для продукту.
Переклад дизайну повідомлення
Хіба вас не дивує, як дизайн, який є простою сумішшю образотворчого мистецтва та графіки, може викликати у вас співчуття? Я знаю, що маю. Ми, як люди, реагуємо на наші органи чуття тварин так само, як і будь-який інший організм, вірний своїй природі. Коли ми бачимо серцеїда – ми робимо, як запрограмовано. Використовуючи цю характеристику людської поведінки, ваша історія не завжди повинна бути галасливою для вашого маніфесту та продуктів, тому що це, мабуть, те, що має на увазі кожен інший власник веб-сайту в наші дні. Коли ви додаєте почуття, дух і мораль, ваша історія перетворюється на повідомлення.
приклад :
Цей веб-сайт everylastdrop.co.uk веде вас у подорож вашим щоденним використанням води у вашому домі та навколо. Читання про факти про те, скільки води витрачається щодня, є занадто поширеним і часто не сприймається серйозно. Цей безневинний маленький хлопець, який без розбору використовує воду у своєму щоденному розкладі, не лише підкреслює важливість води, але й ставить її на противагу тим, хто її найбільше потребує в суворих частинах світу. Воно настільки приживається в свідомості глядача, що він, мабуть, двічі подумає, перш ніж наступного разу витратити ще одну краплю води.
Використання темних елементів
Читати романи цікаво, і враховуючи недавні технологічні підйоми, тепер їх необхідно читати поза книгами. Навіть донині переважна більшість онлайн-користувачів все ще вважають за краще судити про книгу за її обкладинкою, ніж насправді читати пролог. Щоб боротися з цими онлайн-користувачами та заманити їх до продукту, багато письменників часто наймають розробників для створення веб-сайтів, присвячених їхнім романам. Покрокова репетиція роману з анімаційними послідовностями не тільки надасть історії необхідного феєрверку, але й захопить онлайн-користувача до її читання.
приклад :
Використовуючи той самий принцип і структуру, відоме оповідання Нама Ле «Човен» було перетворено на інтерактивний графічний роман, створивши світ штормів, що спустошують океан, витісняючи човен із жахів війни у В’єтнамі. Найкраще, що може зробити будь-хто під час свого розповідного фестивалю, — це додати звук до свого дизайну. Це найвищий рівень анімаційного оповідання для отримання UX. Дивіться тут.
Захоплюючий і наповнений ілюстраціями, він справді є доказом того, наскільки добре ви можете керувати продуктом, створюючи дизайн, який рухається, коли ви з ним взаємодієте.
Уніфікація наскрізної прокрутки
У галузі електронної комерції люди часто зацікавлені в тому, щоб отримати переваги продукту, який можна використовувати в кількох випадках, але з однаковою метою. По-перше, це значно полегшує їм життя, по-друге, це частина технологічної ери. Але з огляду на те, що так багато чого потрібно дізнатися та визнати про таке підприємство, дуже малоймовірно, що клієнти підуть на ризик чимось, що має футуристичні наслідки та надто легко виконує свою мету, роблячи це надто гарним, щоб бути правдою. Я бачив компанії, які намагалися продати такі продукти з надто великим, щоб погодитися, і результатом була трагічна залишеність.
приклад :
Однак цей продукт не тільки продається, але й виконує те, що він обіцяє своїм клієнтам. Цей продукт на onlycoin.com — це одна картка, яка містить усі ваші кредитні картки. Процес розповіді історії допомагає глядачеві зрозуміти складність носіння занадто великої кількості карток у вашому гаманці з міркуваннями, але з графічним відображенням покрокової оптимізації картки та компактним носінням стає важко не погодитися з обіцяними застосуваннями продукту.
Висновок
Розповідь історій не обмежується будь-яким продуктом чи метою; він відкритий для всіх видів електронної комерції, які допомагають відвідувачам отримати ідеальний UX без шкоди для функціональності дизайну. Навчитись опанувати це для власних продуктів і послуг через веб-сайти електронної комерції є обов’язковим у наш час електронного маркетингу. Без читання мислення споживача ви просто не можете просувати свій продукт, а без попиту немає виробництва. Як каже Тім О'Браєн: «Оповідання історій — це найважливіша діяльність людини, чим складніша ситуація, тим важливіша вона», і, повір мені, друже, ситуація ніколи не стає легшою.