Дизайн який продає. Інтернет-магазин.

Дизайн який продає. Інтернет-магазин.

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

Вступ
Сьогодні все більше людей роблять покупки в інтернет-магазинах. Відсоток таких покупок з кожним роком зростає і все більше набирає обертів. У Україні 8 млн. осіб купують в онлайні (за даними агентства Data Insight 2016). Зараз практично все можна купити в Інтернеті, і всі ті товари, за якими раніше ми традиційно ходили на ринки і в супермаркети, тепер ми можемо знайти і купити, не виходячи з дому. Масштаби інтернет-магазинів найрізноманітніші, від великих світових лідерів, таких як Amazon, Ebay, Alibaba і ін., Де можна знайти найрізноманітніші групи товарів, до невеликих тематичних магазинів.

Як і в будь-який роздрібній торгівлі, тут існує величезна конкуренція. Створити і запустити інтернет-магазин в наші дні стало простіше, ніж це було якихось 10-15 років тому. Інтернет-магазинів зараз стає все більше і більше, але вперед вириваються лише деякі. Одиниці з них мають хорошу конверсію і, як наслідок, високий прибуток.

У чому ж секрет? Як зробити інтернет-магазин успішним? Крім грамотно продуманої стратегії і хорошого маркетингу, необхідно створити привабливу оболонку, зовнішній вигляд. За статистикою, людина протягом лише декількох секунд вирішує (на рівні підсвідомості), залишатися йому на сайті чи ні. Мало хто з нас можуть відрізнити поняття «красиво» від «некрасиво» миттєво, лише поглянувши на щось, але наша підсвідомість – вже воно то знає, що до чого. В даному випадку це вибір рішення – залишитися на сайті або продовжити подорожувати по іншим інтернет-магазинах. Чи вирішить сама людина, «так, тут все зрозуміло і просто, цього магазину можна довіряти», або за нього це зробить підсвідомість – не настільки важливо, наша мета – затримати людину на сайті, будь то потенційний покупець, цілеспрямовано шукає конкретний товар, або простий користувач, який зайшов на сайт випадково. Наше завдання – затримати обох, сформувати у них хороша думка про магазин, викликати довіру і привести їх до покупки. Не зараз, так пізніше.

Мабуть, мало таких людей, які, зайшовши перший раз в новий інтернет-магазин, вирішать, що їм раптом терміново потрібно купити електрокомбайн, неодмінно зараз, і що життя без нього втрачає всі барви. Звичайно ж ні! Але важливо зробити магазин запам’ятовується, інтуїтивно зрозумілим, щоб людина, зайшовши сюди в перший раз, відчув себе комфортно, міг з легкістю знайти необхідну йому річ, інформацію, та й взагалі – не попадав на сайті в ситуації, з яких би не бачив виходу. Все повинно бути гранично просто і доступно для розуміння. Якщо це спрацювало – процес пішов. Людина запам’ятає магазин, і, нехай навіть не зробивши покупку зараз, повернеться за нею пізніше. І ось тоді вже вкрай важливо нічим не злякати нашого покупця і довести його до кінцевої мети – здійснення покупки, якої він повинен буде залишитися задоволений.

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

Чому дизайн так важливий для інтернет-магазину?

Ми сьогодні не будемо говорити «про все», а зосередимося тільки на одній стороні створення успішного інтернет-магазину, а саме – на дизайні. Поговоримо про візуальної оболонці, інтерфейсі. Торкнемося, звичайно, і юзабіліті, як же без нього?

А почнемо ми з того, що головна мета будь-якого інтернет-магазину – продавати. А мета дизайну – допомогти магазину продати щось покупцеві. Розробка інтернет-магазину зазвичай складається з таких основних етапів, як дослідження і аналітика, проектування, дизайн, верстка, програмування, контроль якості, запуск проекту, просування і підтримка. Незважаючи на те, що етапів створення так багато, в кінцевому підсумку простий користувач не побачить, наприклад, аналітику або проектування, верстку або програмування. Це неймовірно важливі і незамінні процеси, без яких сайт просто не буде ефективно працювати, але про них простий користувач може навіть не знати, про них знаємо ми, розробники. Простий користувач побачить дизайн, побачить зручність чи незручність користування. А це – інтерфейс, дизайн, юзабіліті. Хороший дизайн буде сприяти продажу і наша з вами мета буде досягнута.

Як ми вже сказали, перше, що бачить людина, заходячи на сайт – це дизайн. З юзабіліті, зручністю користування і іншими важливими нюансами він зіткнеться пізніше, але найперше, що він бачить, заходячи на сайт, (особливо на новий сайт, невідомий) – це неодмінно дизайн. Це найважливіша складова сайту, що формує перше враження у людини і дуже важливо, щоб це враження не було зіпсовано. «У вас не буде другого шансу справити перше враження», як говорила Коко Шанель.

Яким повинен бути успішний дизайн для інтернет-магазину?

Перше, що ми повинні зрозуміти і визнати, – це те, що ми робимо дизайн для широкої аудиторії. Користувачі інтернет-магазинів найрізноманітніші: люди різного віку, поглядів, смаків, різного соціального стану. Звичайно, є вузькотематичні інтернет-магазини з вузькою ЦА, але це швидше виняток, ніж правило. Так що, крім унікальності, про яку ми писали вище, вкрай важливо зробити наш дизайн універсальним і зрозумілим будь-якому користувачеві, будь то ультрамодний тінейджер, успішний бізнесмен, або жаліслива бабуся. Всім повинен бути зрозумілий наш сайт. Кожна людина унікальна і індивідуальна, у всіх нас свої смаки і погляди. Але в дизайні, як і в будь-якому іншому виді мистецтва, є своя класика, то, що проходить через час, покоління і не змінюється.

«Мода проходить, стиль залишається», як говорить відомий вислів. Мода диктує нові тенденції дизайну, в тому числі і в веб-індустрії. Сьогодні актуально щось одне, завтра воно зміниться іншим. Але, якщо ми хочемо наблизитися до універсальності, нам потрібно робити упор на те, що визнає кожен з нас, незважаючи на час і тенденції моди. Це класика. Вона є в усьому. Простота і в той же час багатство, однорідні кольори, прості форми, увага до деталей. Це завжди буде актуально. Візьміть, наприклад, автомобілі Mercedes Benz класичного чорного кольору. На одному з них їздив Штірліц, а сьогодні їздять глави держав і багато інших. Мерседес не потрібно фарбувати червоним кольором в білий горошок, щоб догодити моді. Це класика, еталон дизайну, цей вислів бренду, то, що завжди було актуально, то, що завжди буде на рівні і на щабель вище будь-якого іншого дизайну.

Класика є і в веб-дизайні. Використовуйте прості геометричні форми елементів, спокійні, не кричущі кольори, правильні колірні схеми, незавантаженість інформацією. Хороший дизайн – це коли вже нічого прибрати. Як працює скульптор? Бере кам’яну брилу і відсікає від неї все зайве. Цей принцип, безсумнівно, можна застосувати і до створення хорошого дизайну сайту. Не варто також забувати про логіку дизайну, про його правильності. Правильний дизайн людина сприйме підсвідомо, такий дизайн виділяє найголовніше, мета сайту. Це, перш за все, правила Золотого Перетини, пропорції Фібоначчі, модульні сітки.

Дослідження та аналітика
Перш ніж приступати до створення візуального образу нашого магазину, необхідно в найпершу чергу провести аналітичні дослідження і виділити цільову аудиторію (ЦА), зрозуміти ринок, заглибитися в тематику майбутнього магазину. Для чого це потрібно? Щоб зробити правильний дизайн, ми повинні розуміти, для кого ми робимо інтернет-магазин, на яку аудиторію нам потрібно розраховувати, як вона себе веде. Дизайнеру важливо знати вік, стать, соціальний стан, професійну діяльність і інші характеристики людей, які будуть робити покупки в магазині.

У роботу дизайнера не входить проведення аналітичних досліджень, цим зазвичай займаються маркетологи, дизайнер отримує безпосередньо результати цих досліджень, і далі вже враховує їх у своїй роботі. Ми не будемо зараз говорити про це докладно, але це важливий момент, про який потрібно пам’ятати.

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

AIDA. У маркетингу існує така модель як AIDA. Розшифровується це так: Attention, Interest, Desire, Action (Увага, Інтерес, Бажання, Дія). Принцип її – загальний порядок подій, які можуть виникнути, коли споживач взаємодіє з рекламою, а в нашому випадку – з контентом на сторінках сайту. Користуючись цією системою, ми можемо «продати за 4 кроку».

AIDA є бізнес логікою, яку ми рекомендуємо використовувати при створенні дизайну. Ця модель може застосовуватися на всьому сайті в цілому і на окремих його сторінках. У кожної з цих сторінок може бути своя мета, для досягнення якої можна використовувати Аїду.

На сторінці товару, наприклад, ця модель буде мати один вид, користувач повинен буде за 4 кроку натиснути кнопку «Купити». До цього його повинна буде привести правильна розстановка акцентів, що продають текстів і т.д. На іншій сторінці, яка знаходиться начебто далеко від здійснення покупки, дана модель також може бути застосована. Наприклад, сторінка відгуків. Користувач читає чужі відгуки, і за допомогою цієї моделі ми мотивуємо його написати свій відгук. Але це ще не все, нам адже потрібні продажу, конверсія, прибуток, ми не можемо просто так відпустити відвідувача. Так як форма «додати відгук» зазвичай знаходиться в нижній частині сторінки, а трохи нижче у нас знаходиться підвал, то в ньому ми можемо закласти додатковий стимул, наприклад, продублировав там категорії товарів. Можливо, за час перебування на сайті людина могла щось пропустити, не помітити, а зараз він цілком реально може «зачепитися» за категорію товарів, яка йому цікава.

За статистикою, більше 30% відвідувачів йдуть з сайту після оформлення покупки, не завершивши її. Вони передумують, або щось їх відволікає, або недостатньо продумана логіка їх мислення. Щоб знизити цей відсоток, рекомендуємо вам використовувати AIDA. Це, безсумнівно, відіграє велику роль для досягнення цілей сайту і збільшення конверсії. Але ми говоримо в цій статті не про маркетинг, а про дизайн, тому їдемо далі.

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

Сценарії поведінки (User Story). Цей етап покликаний виявити помилки в логіці, розставити пріоритети і поліпшити придумані нами рішення. Сценарії поведінки – схема загального системного мислення, покроковий шлях користувача, то, як людина приходить до цілей на сайті. Сценарії ці детально описують варіанти вирішення користувачами конкретних завдань, в нашому випадку це шлях до покупки. Продумування сценаріїв поведінки передбачає аналіз поведінки користувачів на сторінках сайту: які дії виконуються, скільки витрачається часу, що привертає увагу і т.д. Це застосовується до процесу макетування, щоб краще розуміти, як проектувати, а також для перевірки готових макетів: чи всі ми врахували, чи все зробили правильно з точки зору юзабіліті.

Сценарії поведінки в нашому випадку можуть мати різні логіки: старт користувача з головної сторінки магазину, при переході в магазин з пошукової системи, соціальної мережі, банера та ін. За даними досліджень inFOLIO Research Group, в 2012 році найпопулярнішим засобом пошуку товарів були пошукові системи – 92% аудиторії. Якщо користувач, наприклад, шукав конкретний товар через пошукову систему і потрапив на наш сайт – він виявиться на сторінці потрібного йому товару, або на сторінці категорії, або на сторінці статті-огляду. Одним словом, близько до мети. Але якщо він у нас вперше – само собою, у нього можуть виникнути сумніви, чи можна довіряти цьому магазину. Його можуть зацікавити розділи «Про магазині», або «Контакти», щоб переконатися в тому, що магазин «живий» і його не обдурять. Здається, наш покупець відхилився від мети, пішов зі сторінки товару. Ось тому і продумуються різні сценарії поведінки, якими ми з вами повинні керуватися, створюючи дизайн. Якщо наш покупець виявився, припустимо, на сторінці контактів, нагадайте йому про його цілі, наприклад, за допомогою блоку «недавно переглянуті товари». Він побачить фотографію того, що шукав, згадає, що хотів це купити, і повернеться до своєї мети.\

Journey Map – карта шляху користувача. Починатися вона може всього-лише з ідеї з ідеї щось купити, і далі показує шлях вирішення цієї ідеї. На цій карті відображаються важливі кроки, які роблять клієнти в процесі прийняття рішення. На цій карті також відзначені різноманітні елементи, що виникають на кожному кроці. Майбутнє клієнтського досвіду полягає, крім усього іншого, в створенні подібних карт.

Фундаментальний підхід до дизайну інтернет-магазину. .
Навіщо ми все це описуємо в статті про дизайн? Справа в тому, що дизайнер повинен мислити не тільки як дизайнер, але і як маркетолог, як юзабілістов, і як покупець теж. Коли ми вже провели дослідження, вивчили ЦА, пропрацювали маркетинг і збираємося робити дизайн – дизайнер наш повинен побудувати свою роботу на основі результатів попередніх етапів. Як би взяти закладений фундамент і на його основі вже будувати, робити дизайн. Так як все це – командна робота, послідовна і взаємозалежна.

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

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

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

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

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

Зовнішній вигляд, колірна гамма
По-справжньому хороший дизайн магазина – цей той, який не сильно помітний. «Хороший дизайн видно відразу. Відмінний дизайн непомітний »як висловився Джо Спарано. Дизайн не повинен відволікати увагу користувача від перегляду товарів, вивчення інформації, здійснення покупок. Але при цьому дизайн повинен викликати у користувача правильні емоції, які підготують його до здійснення покупки. Це дві сторони медалі, які викликають конфлікт: як зробити дизайн непомітним, але емоційним? Нижче ми постараємося відповісти на це питання. Дуже часто багато припускаються помилки, роблячи гарні картинки, анімацію та інші «навороти» в дизайні інтернет-магазину, але ж мета то у нас яка? Адже ми робимо дизайн для покупців, а не для замовника, пам’ятайте це. І, так як це інтернет-магазин, де продають товари (а вони – найголовніше тут), то нам і потрібно виставити їх на передній план, а дизайн нехай буде на другому плані, як доповнення і завершення загальної картини.

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

Якщо ми хочемо створити якісний дизайн, чистий і елегантний, не потрібно використовувати більше 2-3 кольорів. Це прописна істина, якої не варто нехтувати. Мова йде лише про колірній схемі самого сайту. Інші кольори з’являться пізніше в рекламних банерах, це нормально, банери і повинні виділятися і привертати увагу. Також буде безліч фотографій товару самих різних кольорів. Але сама колірна схема сайту не повинна містити багато квітів. Не використовуйте кричущі, їдкі кольори, вони викличуть лише негативні емоції, людина не зможе довго знаходитися на такому сайті. Краще використовувати м’які і спокійні кольори й колірні схеми, вони будуть викликати умиротворення і довіру. Дотримання цього правила стане однією з ступень створення емоційного фону, який приведе людину до покупки.Колір фону також рекомендується робити однорідним, чистим. Якщо і застосовувати патерн, то краще ледве видний, непомітний або однорідний. Фон не повинен відволікати увагу від інформації.

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