UXPUB 🇺🇦 Дизайн-спільнота: shelest

Patreon: Кардинальний редизайн бренду для творців від творців

shelest — Thu, 05 Oct 2023 10:49:55 +0000

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

Клік/тап по картинці—відображення анімації чи більшого розміру

Новий бренд для нового споживача

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

Новий підхід до брендування

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

Клік/тап по картинці—відображення анімації чи більшого розміру

🤤 Підписка на shelest в Telegram →

Логотип, що оживає

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

Клік/тап по картинці—відображення анімації чи більшого розміру

Адаптивний дизайн

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

Клік/тап по картинці—відображення анімації чи більшого розміру

Patreon відмовився від одного основного кольору на користь палітри градієнтів, яка може бути адаптована до різних стилів і естетики творців.

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

Клік/тап по картинці—відображення анімації чи більшого розміру

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

Майбутнє, яке належить творцям

Новий бренд Patreon — це відзнака та підтримка творчості у всіх її проявах. Він відображає бачення сервісу для майбутнього та економіки творців загалом - місце, де творці контролюють та розвивають свої спільноти.

В компанії кажуть, що не можуть дочекатися подивитися, як цей бренд оживає в руках творців і надихає їх на нові досягнення.

Клік/тап по картинці—відображення анімації чи більшого розміру

👉 Більшe в Telegram →

Редизайн-фіаско: Чому продажі Bahlsen сильно впали, і, мабуть, це пов’язано з редизайном упаковки

shelest — Wed, 04 Oct 2023 19:53:37 +0000

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

Новий підхід

У 2021 році Bahlsen вирішила кардинально змінити зовнішній вигляд свого бренду, включаючи дизайн упаковки. Великий акцент був зроблений на естетиці та новому підході представлення продуктів. Ця ідея здавалася сміливою, але викликала нестабільність та суттєвий спад продажів.

Проблема дизайну

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

🤤 Підписка на shelest в Telegram →

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

Майбутнє і цінові аспекти

Окрім проблеми з дизайном, Bahlsen також стикається зі зростанням цін на сировину, зокрема на цукор. Александр Кюнен оголосив, що в 2024 році компанія буде змушена підвищити ціни на свою продукцію.

На завершення

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

ЗІ

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

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

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

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

👉 Більшe в Telegram →

Секрети співпраці: Дизайн та Розробка. Досвід від команди Spotify.

shelest — Fri, 10 Mar 2023 13:00:03 +0000

Є щось дуже потужне у роботі в міждисциплінарних командах для створення та розвитку цифрових продуктів. Так ми працюємо у Spotify! У цій статті ми зосередимося на співпраці між дизайнерами та розробниками. Ми почали з питання: "Як виглядає успішна співпраця між цими двома напрямками?" і вирішили поговорити з розробниками та дизайнерами по всій компанії, щоб почути про їх досвід того, що працює, що може піти не так і що команди роблять, щоб зробити співпрацю успішною.

Продуктові команди Spotify

У Spotify ми маємо п'ятиетапний процес, який дозволяє різним дисциплінам згуртуватись та виконувати завдання. Ми називаємо його "Масштаб" (The Scale), і він по суті є перебудовою класичної системи дизайн-мислення.

Етапи: Зрозумій - Подумай - Будуй - Доставляй - Коригуй

П'ять етапів, п'ять цілей

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

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

🤤 Підписка на shelest в Telegram →

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

Процес "Масштаб" не є одноразовим циклом. Дизайн та Розробка будуть взаємодіяти як у танці, де експертиза дисциплін визначає, хто керує. Цей танець є ДНК (DNA) будь-якої успішної технічної команди. Ми називаємо це DNE (Design and Engineering) технічної команди - Дизайн та Розробка - зміщення ваги впливу та співпраця протягом усього життєвого циклу продукту або функціоналу.

Як ми можемо поєднати Дизайн та Розробку?

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

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

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

Будь-які хороші стосунки стикаються з проблемами! Давайте подивимося, що ми дізналися з історій команд, які працюють у Spotify.

Дизайнери та розробники: чотири основні причини непорозумінь

1. Недостатня співпраця

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

Один з розробників розповів:

"На минулому проекті, де у нас були проблеми, ми працювали в силосах (Це коли окремі люди та команди працюють над однією метою, але недостатньо спілкуються між собою. Сам термін «силоси» відноситься до контейнерів, які використовуються для зберігання зерна. Тож це все одно, що люди, замкнені в контейнерах та виконують свою роботу окремо без координації.). Дизайн та Продукт почали створювати ідеї без Розробки, і вони придумали таке, що не булу життєздатним з технічної точки зору. Ми (розробники) виділили трохи часу, а потім почали розповідати Дизайну, що ми можемо, а що ні."

Інший розробник:

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

Чому це трапляється?

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

2. Проблеми з комунікацією

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

Конкретний приклад, який ми почули від розробника, полягає в наступному:

"Розробка працює над A, а Дизайн працює над Б. Дизайнер не хоче забирати час розробників і тому працює над рішенням самостійно. Пізніше ці рішення можуть бути відхилені розробниками, оскільки вони не брали участі в їх прийнятті. У результаті дизайнеру часто доводиться починати все з нуля. А ніхто не хоче додаткової роботи."

Крім того, незрозумілий жаргон може стати перешкодою:

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

Чому це відбувається?

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

3. Відчуття блокування

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

Один з розробників сказав:

"Хотілося б, щоб дизайнери знали, що отримати задачу, а потім чекати на дизайн є дуже незручно."

З іншого боку, дизайнер:

"Хотілося б, щоб розробники розуміли, що коли ми, як команда, разом проектуємо і досліджуємо концепцію, то вони (розробники) також працюють. На цьому етапі вони не знаходяться в режимі кодингу, а приймають участь у дизайні. Це також є роботою!"

Чому це відбувається?

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

Як сказав один з дизайнерів:

"Я хотів би, щоб розробники знали, що перед тим, як розробити щось, ми повинні провести дослідженння, щоб виконати свою належну роботу як дизайнери."

4. Різниці в поглядах щодо того, що є важливим, а що - другорядним

Ми почули від розробника:

"На практиці, розробники часто відмовляють дизайнерам у їхніх ідеях. Я сам в минулому був більш фокусований на функціональності, але деталі в інтерфейсі та в користувацькому досвіді (UI/UX) дійсно мають значення."

Чому це відбувається?

Різні погляди та підходи до проекту з боку дизайнерів та розробників мають різні пріоритети.

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

Ця потенційна розбіжність пріоритетів може насправді створити ідеальний баланс між двома дисциплінами, якщо її ретельно опрацювати!

Як зробити ці відносини успішними?

1. Тісно співпрацювати

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

Один з розробників зазначив:

"Найкращі співпраці, які у мене були з дизайнерами, відбувались тоді, коли я міг звернутися до них за допомогою у будь-який момент, а дизайнери знали, що це нормально - аналогічно звертатися до мене/технічної команди. Взаємно розуміння - ключ до успішної співпраці!"

Дії:

Створіть ритуали для збору фідбеку. Щотижня збирайтеся, щоб зібрати відгуки щодо користувацького досвіду продукту та прийміть рішення щодо наступних кроків.
Беріть участь в роботі та зустрічах один одного. Робіть спільні презентації, беріть участь у демо-версіях, коментуйте документацію та спілкуйтеся у Slack.
Сидіть в одному приміщенні і працюйте разом! Дизайнерам подобається спостерігати, як розробники чарівним чином втілюють рішення в життя, а розробники цінують зворотній зв'язок від дизайнерів.
Створіть спільний канал у Slack, щоб підтримувати активне спілкування.
Включайте Дизайн та Розробку з самого початку роботи та уникайте класичних передач роботи на різних етапах. Натомість розподіліть вагу впливу між дисциплінами.

2. Мати інтерес та думку щодо роботи колеги з іншої спеціальності

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

Дизайнер сказав:

"Хотілося б, щоб розробники знали більше про дизайн-мислення - зосереджуватися на потребах/проблемах, а не тільки на рішеннях."

А один з розробників зазначив:

"Хотілося б, щоб дизайнери краще розуміли деякі технічні обмеження та складнощі реалізації тих чи інших дизайн рішень."

Знайомство з роботою один одного допомагає розвивати емпатію, а також краще взаємодіяти на всіх етапах розробки продукту. Це також забезпечує кращий зворотній зв'язок!

Дії:

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

3. Будьте добрі один до одного

Пам'ятаєте, ми згадували про проблему, пов'язану з розчаруванням, коли доводиться чекати, поки хтось інший завершить свою роботу? Для цього скористайтеся порадою колеги-розробника:

"Вам потрібно постійно нагадувати собі, що сповільнюватися - це нормально. Ви не хочете, щоб ваш центральний процесор працював на 100% весь час, тому що тоді ви не зможете нічого робити з комп'ютером. Це стосується і команди. Постійне нарощування темпів не обов'язково призведе до найкращого результату."

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

Дії:

Познайомтеся один з одним як люди та колеги. Заплануйте зустріч 1:1 з найближчими колегами по проекту, щоб познайомитися з ними ближче. Особистий зв'язок завжди допомагає, коли на робочі зв'язки впливає стрес або суперечливі пріоритети.
У шведській мові (бо Spotify, звісно ж, шведський) існує поняття snälltolka, що буквально перекладається як "люб'язне тлумачення". Якщо ви відчуваєте роздратування або стрес щодо свого колеги, спробуйте розтлумачити ситуацію люб'язно та сприймайти дії колеги як найкращу спробу вирішити проблему та зрушити все з мертвої точки.

Підсумовуючи

Отже, що ми вивчили про взаємини між дизайнером та розробником?

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

Тому що, як ми всі знаємо, дружба є основою будь-яких хороших взаємин.

Текст Spotify

👉 Більшe в Telegram →

Патенти в дизайні: Розробити новий інтерфейс складніше, ніж вам здається

shelest — Mon, 13 Feb 2023 16:31:19 +0000

Ви продаєте піцу. Всі люблять піцу. Це швидко і просто. Попит високий. Це класичний американський продукт. Але у вас купа конкурентів, маркетинг складніший, ніж ви думали, оренда зростає, дизайн додатків застарілий, щотижня — виторг мінімум, і стає все важче диференціювати — ну, ви знаєте, типові речі. Тож ти думаєш: "Мені потрібно зробити щось таке, чого ще ніхто не робив. Щось нове, щось прогресивне". Ви починаєте мозковий штурм і знаходите геніальну ідею, яка звучить приблизно так: "Щоб можна було переглядати деталі піци і свайпити праворуч, якщо вам подобається, і свайпити ліворуч, якщо ні. Щось на кшталт Tinder, але для піци!"

Ех, ні. Ви не можете розробити щось подібне, тому що Tinder має патент на взаємодію свайпів праворуч, якщо подобається, і ліворуч, якщо не подобається. "Гаразд, гаразд, добре", — скажете ви собі. "Це відмінна риса всього додатку, тож тоді просто потрібно позбутися функції свайпів, і вийде мінімально життєздатний продукт (MVP) з однією лише кнопкою "подобається" і "не подобається" внизу". Але... не пощастило, друже. У Tinder є патент і на це.

🤤 Підписка на shelest в Telegram →

Дизайнери майже завжди дивляться на те, як інші компанії вирішують схожі дизайнерські завдання, і використовують їх рішення як джерело натхнення для власних ідей. Це цікавий (а іноді й не дуже) процес, плюс, якщо ви зовсім ігноруватимете конкурентів, вас навіть розкритикують за те, що не досліджуєте ринок. Як для дизайнерів, так і для тих, хто не є дизайнером, важливо розуміти, які дизайни не можна використовувати в якості натхнення. Компанії витрачають багато часу на розробку елементів інтерфейсу, що визначають продукт, тому цілком логічно, що вони не хочуть, щоб інші копіювали те, на створення чого вони витратили багато енергії та грошей. Ці елементи інтерфейсу можуть бути складними та детальними, як, наприклад, навігація без кнопки Home в iPhone X, на яку Apple подала гігантський патент, або ж такими ж маленькими, як кнопка "Like" у Facebook.

Загальні питання щодо патентів

Скільки часу потрібно, щоб запатентувати дизайн?
Це може зайняти від одного до п'яти років.

Скільки коштує отримати патент на дизайн?
Орієнтовна загальна вартість патенту на дизайн становить від $2,000 до $3,000. На відміну від інших типів патентів, щорічна плата за підтримання чинності не вимагається. Якщо ви велика компанія, це досить дешево.

Як довго діють патенти на дизайн?
Усі патенти, перелічені в цій статті, діють близько 15 років.

Де шукати патенти?
Зручно знайти їх на Google Patents, який індексує патенти з більш ніж 100 патентних відомств по всьому світу. Всі патенти є загальнодоступними. Ви можете шукати за типом, ключовими словами або компанією. Якщо у вас з'являється вільна хвилина, то варто час від часу переглядати патенти.

Патенти знайшов. Як мені розібратися в цьому всьому?
Згідно з UpCounsel, "єдиним розділом патенту, який має юридичну силу", є формула винаходу, яка обмежується одним реченням. Для патентів, що не стосуються дизайну, має сенс спочатку звернутися до розділу формули винаходу. У патентах на дизайн це єдине речення часто розпливчасте і звучить приблизно так: "Орнаментальний дизайн для панелі дисплея запрограмованої комп'ютерної системи з графічним інтерфейсом користувача, як показано і описано на малюнку". На жаль, не дуже інформативно. Тому краще відразу звернути увагу на додані ілюстрації. Особливо на суцільні лінії. Пунктирні лінії — це лише допоміжні деталі, які показують, в якому середовищі відображається програма, наприклад, на мобільному чи ПК. Пунктирні лінії також можуть бути контекстними, що допоможе дізнатися, наприклад, що щось скролиться або що воно з'являється саме в додатку для обміну повідомленнями. Назва також підкаже вам, чи є запатентований об'єкт анімацією або графічним інтерфейсом. На жаль, патенти зазвичай не містять детального опису того, як саме повинен працювати той чи інший елемент, тому часто доводиться тільки здогадуватися.

Коротка вижимка для патентних правил

Можна патентувати:

Іконки
Статичні екрани (певний шаблон інтерфейсу)
Анімовані взаємодії (наприклад, взаємодія за допомогою свайпу)
Наявна функція з вашими власними декоративними штрихами, доданими, щоб зробити її досить унікальною
Щось надзвичайно специфічне, наприклад, певний текст відображається в певній частині екрана та якого розміру буде зображення. Але краще зробити це більш гнучким, щоб, коли ви захочете оновити дизайн, він все одно підпадав під патентні обмеження.
Кілька функцій на екрані розділені на кілька патентів. У прикладі Tinder компанія має патент на функцію свайпу і окремий патент на розміщення круглих кнопок "подобається" і "не подобається", хоча вони з'являються на одному екрані.

Не можна патентувати:

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

Іноді, переглядаючи патенти, можна знайти приховані плани компанії. Наприклад, кілька креслень для дизайнів, які ще не увійшли до складу готового продукту (а можливо взагалі ніколи не увійдуть). Що має сенс, адже страхування патенту на 15 років коштує менше, ніж один рік страхування авто. Для компанії це, по суті, безкоштовно — а якщо вона ще знайде можливість подати в суд на когось за копіювання її дизайну, то це все легкі гроші. У Samsung, мабуть, добре про це знають: У 2018 році компанія мала 61 608 активних патентних сімейств — на 34% більше, ніж компанія Canon, яка посіла друге місце, маючи 34 905. Великі компанії готові патентувати будь-яку напівпристойну ідею, аби закон це допускав, з повним розрахунком на те, що багато з цих ідей ніколи не дійдуть до готового продукту — але можуть просто окупитися в судовому процесі.

Apple

Проведіть, щоб розблокувати

Ми настільки звикли до схеми розблокування за допомогою свайпа, що може здатися дивним, що така повсюдна схема заблокована компанією Apple. На момент запуску технології Slide to unlock (Проведіть, щоб розблокувати) ця ідея була досить новою, тому цілком зрозуміло, що Apple захотіла позначити її як свою, і це цілком справедливо. Швидше за все, цей патент охоплює більшість горизонтальних схем розблокування. Це не означає, що ви не можете розробити патерн, де для розблокування потрібно провести пальцем по екрану. Це просто означає, що якщо ви це зробите, то він повинен виглядати значно інакше ніж це зробили в Apple. Була велика судова справа, коли Samsung довелося заплатити Apple 120 мільйонів доларів за схожий дизайн.

Переглянути патент.

Іконки-папки

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

Переглянути патент.

Форма бульбашки месенджера iMessage

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

Коли повідомлення одне, воно має хвостик в кінці. Коли від одного користувача надходить кілька повідомлень підряд, хвостик відображається лише в останньому повідомленні.

Переглянути патент.

Іконка Touch ID

Ви можете використовувати іконку Touch ID лише в ситуаціях, як, наприклад, екран з модальним запитом на введення ідентифікатора відбитка пальця, який використовує вбудовані функції Apple. І не можете використовувати у вашій iOS версії додатка, наприклад, у полях для входу. Чесно кажучи, це чудова іконка, майже ідеальної форми. Гарна робота, Apple.

Переглянути патент.

Голосовий візуалізатор Siri

Оскільки голосові інтерфейси стають все більшим трендом, дизайнери, безсумнівно, будуть шукати натхнення в існуючих інтерфейсах, таких як Siri, Alexa та Google Assistant. Але в Apple вирішили взяти на себе ініціативу та запатентували візуалізацію процесу переведення людського голосу в цифровий контент у вигляді безлічі різнокольорових хвиль.

Переглянути патент.

Facebook

Кнопка "Like"

Цей патент охоплює дизайн кнопки "Like" та будь-яку анімацію, яка з нею пов'язана. Досить просто. Патент не диктує, як саме має виглядати кнопка, тож Facebook може змінити візуал у майбутньому.

Приклад анімації. Переглянути патент.

Плаваючі іконки в стрімах

Враховуючи всі патенти навколо цих плаваючих іконок, очевидно, що Facebook приділив багато уваги та ресурсів своїм сервісам прямої трансляції. Це було приблизно в той самий час, коли Twitter's Periscope та Instagram Live ставали популярними. Коли користувач обирає іконку/емодзі на горизонтальній панелі під час стріма, його емодзі має анімований ефект бульбашок, який бачать інші глядачі. Це був цікавий проект від Facebook, оскільки ви могли бачити реакцію інших людей у реальному часі. Facebook має патенти на емодзі, які плавають вгору, і на емодзі, які плавають горизонтально. Схоже, що жоден з цих патентів не використовується у продакшені сьогодні, але Facebook все одно створив патенти на різні веріації з метою тестування.

Приклад анімації. Переглянути патент 1, патент 2.

Іконки, які збільшуються при натисканні та утриманні

Це одна з менш очевидних, але приємних особливостей платформи, що додають бренду Facebook індивідуальності.

Приклад анімації. Переглянути патент.

Відображення різних варіантів реакцій при наведенні

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

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

Приклад анімації. Переглянути патент.

Netflix

Наведення на елемент каруселі

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

Приклад анімації. Переглянути патент.

Розгорнута інформація в каруселі

Коли ви наводите курсор на елемент, з'являється стрілка, яку можна натиснути. Натиснути, ви отримаєте велике прев'ю шоу або фільму, а також набір вкладок з додатковою інформацією. Це чудова система, яка дозволяє поступово розкривати інформацію на декількох рівнях.

Приклад анімації. Переглянути патент.

Airbnb

Фіксована панель для бронювання

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

В наведеному патенті Airbnb стверджує, що коли плаваюча панель фіксується на екрані (праворуч від основного контенту), компанія має права на анімацію, яка виникає, коли користувач далі прокручує сторінку. Якщо придивитися, то при скролі з'являється розширена область — "Вигідна ціна".

Приклад анімації. Переглянути патент.

Tinder

Свайп вправо, свайп вліво

Можливо, вам і вдасться уникнути покарання за свайп праворуч, якщо вам не подобається, і свайп ліворуч, якщо подобається, але на патентній діаграмі лише картки є суцільними лініями (частина "liked" — пунктирною), а це говорить про те, що будь-який підхід, пов'язаний з такою комбінацією жестів, буде складно відстояти. У будь-якому випадку, якщо ви зробите щось подібне і на вас покажуть пальцем, то доведеться боротися в розмитій зоні закону.

Переглянути патент.

Кнопки "Like" та "Dislike"

Вибачте, але і тут Tinder подбав про те, щоб ви не могли зробити MVP версію лише з кнопками "подобається" і "не подобається" для конструктора піци, згаданого на початку статті.

Переглянути патент.

Висновки

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

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

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

Отже, якщо ви UI/UX дизайнер, який прагне досягти успіху, ви повинні ознайомитися з існуючими патентами. Просто тому, що якщо ви чогось не бачили, не означає, що цього не існує!

І якщо у вас є щось дійсно унікальне, що є візитною карткою продукту вашої компанії, подумайте про створення патенту, заручившись допомогою юридичної команди. Це не так вже й дорого для компанії, тим більше, що патент діє 15 років. І ніщо так не говорить "не жартуй зі мною", як наявність власного патенту.

Текст Christie Tang

👉 Більшe в Telegram →

Нескінченна прокрутка: Коли використовувати, а коли уникати?

shelest — Thu, 12 Jan 2023 11:00:43 +0000

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

Вступ

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

Adidas.com: На своїх сторінках зі списком товарів Adidas використовує пагінацію. Nike.com: У порівнянні зі своїм конкурентом Adidas, Nike використовує нескінченну прокрутку для відображення своїх продуктів.

.
З моменту свого винаходу в 2006 році нескінченна прокрутка пережила стрімке зростання популярності. Сьогодні вона здебільшого використовується на веб-сайтах та додатках з плоскою структурою, де контент постійно оновлюється і є однаково актуальним для користувача — наприклад, на сайтах соціальних мереж (TikTok, Instagram, Twitter) чи сайтах новин або електронної комерції (Apple News, Nike.com).

🤤 Підписка на shelest в Telegram →

Переваги класичної нескінченної прокрутки

Зменшення кількості зупинок. Можливо, найбільшою перевагою нескінченної прокрутки над пагінацією є те, що вона зменшує кількість зупинок для користувача. Дослідження, опубліковане в Journal of Information Systems, показало, що навіть короткі паузи (наприклад, натискання кнопки "Далі" для переходу на іншу сторінку для отримання додаткового контенту) можуть спонукати користувачів змінити своє рішення. Хоча вплив таких переривань може відрізнятися залежно від типу активності користувача (наприклад, він може бути менш впливовим, якщо користувачі шукають конкретний товар або інформацію). Мінімізація переривань важлива для соціальних медіа, розважальних та новинних сайтів, оскільки це допомагає створити безперебійний процес відтворення контенту та не дозволяє користувачам втратити зацікавленість.
Зниження вартості взаємодії. Якщо сторінка завантажує нові елементи безперервно і швидко, без необхідності натискання кнопки і очікування завантаження, то вартість взаємодії зменшується. Крім того, якщо користувачі хочуть повернутися до елементів, які вони вже бачили, їм не потрібно натискати кнопку "Назад" і чекати, поки завантажиться попередня сторінка — вони можуть просто прокрутити сторінку вгору.
Добре підходить для мобільних пристроїв. Зростання популярності нескінченної прокрутки було пов'язано зі стрімким розповсюдженням мобільних пристроїв. Оскільки в них дисплеї невеликих розмірів, то користувачі за замовчуванням готові провести пальцем по екрану, щоб побачити додатковий вміст.

Проблеми юзабіліті, викликані нескінченною прокруткою

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

Труднощі з пошуком контенту

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

Це особливо негативно позначається на досвіді користувача, коли веб-сайти не зберігають його позицію скролу в нескінченному списку при переході на іншу сторінку та поверненні назад — користувач натискає на елемент у нескінченному списку, щоб перейти на його детальну сторінку, а коли повертається за допомогою кнопки «Назад», то опиняється на початку сторінки та змушений знову прокручувати вниз повні екрани раніше переглянутого контенту. На відміну від цього, за допомогою пагінації повернення відбувається тільки на одну сторінку контенту. І навіть якщо не зберегти попередню позицію користувача в списку, а повернути його на початок сторінки, то все одного буде набагато легше та швидше знайти потрібний елемент, ніж при нескінченній прокрутці.

BMWusa.com: Позиція в списку товарів не зберігається. Кнопка "Назад" переносить користувача на початок сторінки і ставить перед громіздким завданням — знайти свою стару позицію в списку продуктів.

Ілюзія завершеності

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

Відсутність доступу до футера

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

Nike.com: Постійний потік нових товарів не дозволяв користувачеві отримати доступ до футера.

Проблеми для користувачів з обмеженими можливостями

Для користувачів, які використовують лише клавіатуру, нескінченна прокрутка ускладнює навігацію в Інтернеті через величезну кількість контенту, який можна розмістити на одній сторінці, оскільки таким користувачам доводиться "гортати" контент посилання за посиланням і, отже, стикатися з трудомістким процесом, якщо вони хочуть перейти до кінця списку. З іншого боку, користувачі програм, які озвучують все, що відображено на екрані (screen-reader) бачитимуть лише перший "шматок" списку, не маючи можливості ініціювати завантаження нового контенту.

Однак в останні роки спостерігаються позитивні зрушення в підтримці нескінченної прокрутки для користувачів з потребами. Наприклад, "стрічка" ARIA, запроваджена Консорціумом Всесвітньої павутини (W3C), дозволяє програмам (screen-reader) скролити сторінки з нескінченною прокруткою. Також дозволяє користувачам клавіатури переміщатися повз нескінченну прокрукту до першого сфокусованого елементу, що слідує за списком.

Збільшення навантаження на сторінку

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

Низька швидкість завантаження, як правило, є проблемою для мобільних користувачів (через нестабільне з'єднання) або для будь-якого іншого юзера в зоні з низькою пропускною здатністю мережі та на обмежених планах передачі даних.

Погана ефективність SEO

І останнє, але не менш важливе: нескінченна прокрутка може негативно вплинути на ефективність SEO вашого сайту. Це пов'язано з тим, що пошукові роботи не завжди можуть отримати доступ до всього контенту, який прихований під першим розділом вашої сторінки, а швидкість сторінки (важливий фактор SEO) може сповільнюватися через нескінченну прокрутку.

Компроміс: нескінченна прокрутка з кнопкою "Завантажити більше"

Щоб уникнути деяких недоліків нескінченної прокрутки без повернення до традиційної пагінації, багато сайтів і додатків реалізують її варіацію — нескінченну прокрутку за допомогою кнопки "Завантажити більше". Цей підхід останнім часом набув популярності, особливо на мобільних сайтах і в додатках.

Asos.com: Кнопка "Завантажити більше" дає користувачам можливість завантажувати додатковий вміст сторінки. Такий підхід вигідний для користувачів в зонах з низькою пропускною здатністю мережі та надає легкий доступ до футера. Індикатор того, скільки товарів вже було переглянуто, а також їхня загальна кількість допомагає лешге орієнтуватися на сторінці та є чудовим прикладом того, як потрібно покращувати досвід користувача.

.
Додавання кнопки "Завантажити більше" зменшує деякі проблеми юзабіліті, що виникають через класичну нескінченну прокрутку. Основні проблеми, які вирішуються:

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

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

Нова альтернатива: Нескінченна прокрутка з інтегрованою пагінацією

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

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

.
Такий підхід має потенціал для зменшення деяких проблем юзабіліті, зокрема, пов'язаних з класичною нескінченною прокруткою:

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

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

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

Чи підходить нескінченна прокрутка для вашого проекту?

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

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

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

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

Запитання, які допоможуть прийняти правильне рішення:

Хто ваші користувачі?
Які цілі переслідують ваші користувачі, коли відвідують ваш сайт?
Які пристрої користувачі переважно використовують для доступу до вашого веб-сайту?
Чи існують інші обмежувальні фактори (наприклад, велика група користувачів з низькою пропускною здатністю мережі або багато користувачів з обмеженими можливостями)?

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

Текст Tim Neusesser

👉 Більшe в Telegram →

Вчимося на помилках невдалого редизайну GAP вартістю $100 млн

shelest — Fri, 09 Dec 2022 17:07:17 +0000

Представляємо GAP

GAP — відома, добре зарекомендувала себе компанія з роздрібної торгівлі одягом та аксесуарами, заснована у 1969 році. Завдяки своїй популярності серед широких верств населення вона є одним з найбільших світових спеціалізованих ритейлерів.

У 2010 році, з різким падінням продажів після фінансової кризи 2008 року, GAP вирішила змінити свій 20-річний логотип, що призвело до виникнення феномену "Gapgate". У цій статті розглянемо невдалі наслідки цієї зміни логотипу та висвітлимо уроки, які бренди повинні винести з цієї, здавалося б, незрозумілої стратегії ребрендингу.

Зміна логотипу GAP

Добре знайомий логотип GAP, який представляв бренд з 1990 по 2010 рік, являє собою простий темно-синій квадрат, на якому білим шрифтом написано назву бренду — GAP. Як правило, візуальний ребрендинг відбувається після суттєвої зміни стратегії компанії, що вимагає візуального сигналу про щось нове в організації. Тому майже повна зміна оригінального логотипу в 2010 році стала шоком, який відчули (і висловили) як споживачі, так і професійні спільноти.

🤤 Підписка на shelest в Telegram →

Старий логотип GAP зник практично за одну ніч. Він був замінений 6 жовтня 2010 року новим логотипом, який містив набагато менший синій квадрат та назву GAP, написану жирним чорним шрифтом Helvetica. Цей новий логотип був розроблений провідним нью-йоркським креативним агентством Laird and Partners, яке має добру репутацію у сфері брендингу та комунікації в індустрії моди. За оцінками, його вартість склала близько 100 мільйонів доларів США.

Віце-президент GAP з корпоративних комунікацій Білл Чандлер, відповідаючи на питання про зміни, сказав: "Ми вважаємо, що це більш сучасне, прогресивне вираження. Єдиний звязок у минулим — це збережений синій квадрат, але тепер він направлений вперед". Представник GAP додав, що новий логотип мав означати перехід GAP від "класичного, американського дизайну" до "сучасного, сексуального і крутого".

Схоже, що GAP розпочав місію з модернізації та омолодження компанії, а також її показників продажів та цін на акції. Це прагнення до модернізації було піддано критиці як "панічне бажання зробити щось і швидко", щоб виправити падіння продажів.

Другий консенсус полягав у тому, що GAP просто відчував "втому від бренду", використовуючи один і той самий логотип більше 20 років, а редизайн був "зміною заради змін".

Після шквалу критики, у ганебно швидкому темпі компанія GAP прийняла рішення повернутися до свого старого логотипу 1990 року менш ніж за тиждень 12 жовтня 2010 року. Та ж сама представниця компанії, відступивши від свого попереднього коментаря "сучасний, сексуальний і крутий", заявила, що "ми зрозуміли, скільки енергії є навколо нашого бренду, і після довгих роздумів ми вирішили повернутися до нашого культового логотипу синього квадрату".

Провал редизайну

Швидке повернення GAP до старого логотипу свідчить про невдалу стратегію ребрендингу. Новий логотип отримав майже миттєву негативну реакцію як від споживачів, так і від професіоналів, які були вражені змінами, що відбулися без будь-якої попередньої підготовки. Цей крок не супроводжувався жодними іншими організаційними реформами, наприклад, у пропозиції продуктів або у вищому керівництві.

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

Лише за 24 години один з онлайн-блогів згенерував 2000 негативних коментарів, а акаунт у Twitter (@GapLogo) зібрав 5000 підписників, а сайт "Зроби свій власний логотип GAP" став вірусним, зібравши майже 14 000 пародійних редизайнів логотипу.

makeyourowngaplogo.com

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

Реакція

Чому спільнота так гостро сприйняли новий логотип GAP?

Впізнаваність бренду

Споживачі використовують логотип як ключове позначення продукту і часто це перше, що спадає на думку, коли людина думає або чує назву бренду. Логотип, таким чином, значною мірою сприяє підвищенню впізнаваності. А зміна логотипу за першої-ліпшої нагоди викликає плутанину і ризикує зруйнувати будь-який звязок клієнта з продуктом. Ключевим залишається питання — чи будуть клієнти знати, що ви той самий бренд, який вони завжди знали і любили?

Емоційні зв'язки

Бренди часто недооцінюють свій емоційний вплив на покупців, особливо на лояльних до них. Цей емоційний зв'язок існує тому, що бренд та його імідж (включаючи візуальний) мають здатність створювати у споживача відчуття обізнаності та безпеки щодо продукту, який він купує.

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

Як GAP впоралися із негативною реакцією?

По-перше: Краудсорсинговий редизайн

У відповідь на негативну реакцію GAP спочатку спробував виправдати новий логотип як цілеспрямовану стратегію краудсорсингу ідей для нового логотипу. На своїй сторінці у Facebook компанія GAP написала: "Дякуємо всім, хто долучився до розробки нового логотипу! [...] Ми знаємо, що цей логотип викликав багато галасу, і ми раді бачити, як розгортаються пристрасні дебати! Настільки, що ми просимо вас поділитися своїми ідеями. Нам подобається наша версія, але ми хотіли б побачити інші ідеї".

Новий логотип також міг би бути спритним піар-ходом для посилення впізнаваності бренду за допомогою шуму в інтернеті та "сарафанного радіо". Ця ідея здається більш правдоподібною, ніж нереалістична заява про краудсорсинг, особливо враховуючи, що дизайнери (Laird and Partners) користуються довірою в індустрії і мали справу з багатьма великими брендами, включаючи Calvin Klein та Juicy Couture. Безумовно, вони знали, що робили. Чи ні?

По-друге: Hеобхідний розворот

Схоже, що GAP погоджується з тим, що виправдання краудсорсингу було надуманим. Вже через шість днів бренд відновив свій оригінальний логотип 1990 року. У відповідь на цей крок компанія заявила, що багато чому навчилася в процесі - "ми чітко усвідомлюємо, що не підійшли до ребрендингу належним чином [...] ми проґавили можливість залучити інтернет-спільноту. Це був неправильний проект в неправильний спосіб. Можливо, ще настане слушний момент для еволюції нашого логотипу, але якщо та коли цей день настане, ми зробимо все по-іншому" (Марка Хансен, президент GAP в Північній Америці на той час).

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

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

Що бренди можуть винести з помилок GAP?

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

1. Клієнти переймаються більше, ніж ви думаєте

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

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

2. Ваш логотип відображає те, ким ви є

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

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

3. Зробіть так, щоб ваша стратегія ребрендингу мала сенс

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

4. Будьте обережні з соціальними мережами

Інтернет надає простір для поширення новин та думок, які несуться зі швидкістю лісової пожежі. Бренди повинні враховувати та контролювати "сарафанне радіо" в мережі. Несприятливі реакції можуть призвести до погіршення репутації компанії. Що матиме негативні наслідки як для іміджу так і прибутку.

На завершення

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

Текст Abigail Williams

👉 Більшe в Telegram →

Посібник контент-стратега по використанню тону в продуктах

shelest — Mon, 07 Nov 2022 15:18:18 +0000

Те, що ви говорите, має значення, і те, як ви це говорите, може змінити все

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

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

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

🤤 Лайк, підписка, колокольчик Telegram →

Голос не дорівнює тону

Добре продуманий голос робить контент унікальним, послідовним і легшим для сприйняття. Але одного голосу недостатньо — він не може передати всіх нюансів спілкування.

Багато людей використовують поняття "голос" і "тон" як взаємозамінні і кажуть "голос", коли насправді мають на увазі "тон". Розмежування цих понять — запорука успішної роботи над тоном.

Під час навчання контент-стратегів і партнерів ми використовуємо цю аналогію:

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

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

Чому тон має значення

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

Але є проблема: ми не знаємо точно, що відчувають люди. Можна ризикнути і зробити обґрунтоване припущення, але тут важко бути впевненим, особливо коли продукт використовує багато різних людей.

Конструктивний підхід — створити дизайн, що враховує стресові ситуації. Цей запобіжний захід більшою мірою заслуговує на увагу, ніж інші.

Наприклад, конкретне свято може пробудити негативні спогади і пов'язані з ними емоції. Це трапиться з меншою ймовірністю, але все ж таки трапиться.

Сара Вахтер-Бьоттчер і Ерік Мейєр у своїй книзі "Дизайн для реального життя" пишуть докладніше про такі випадки "Виявлення та мапування стресових випадків показує прогалини в нашій роботі, які ми могли пропустити, залишаючи їх відкритими для тих, хто перебуває в кризовій ситуації. Тому продумуючи такі сценарії, ми краще пріоритезуємо інформацію, відкидаємо зайве і зосереджуємося на користувачах."

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

Створення структури тону

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

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

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

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

Простий тайтл "Створіть пост". Зрозумілий текст в полі "Що у тебе на думці, Кіра?". Прямолінійний заклик до дії "Поділитися".

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

У стрічці новин можна побачити повідомлення про чийсь день народження упереміш із новинами про стихійні лиха. У цьому випадку наше рішення відсунути свій контент на задній план усе ще залишається правильним — ми не впевнені, що втручання доречне. Однак, маючи досвід роботи з деякими нашими продуктами, такими як привітання з днем народження від Facebook або висловлення співчуття під час процесу вшанування пам'яті, ми зрозуміли, що наша команда може розширити тональний діапазон, щоб краще передати, що в компанії працюють люди, яким не байдуже, що користувач відчуває.

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

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

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

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

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

Ми використовуємо навідні підказки, щоб допомогти командам вибрати, який тон або тони було б корисно використовувати в тій чи іншій ситуації. Наприклад:

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

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

Зліва "З Народженням, Майк. Від усіх нас у Facebook, ми бажаємо тобі чудового року". Справа "Хороші новини! Ваш пост "#tbt коли ми до..." схвалено! Ось посилання для його перегляду, щоб ви могли слідкувати за результатами..."

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

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

Зліва "Елізабет, допоможіть Непалу! Тисячі жертв землетрусів у Непалі чекають на допомогу. Надішліть пожертвування, а Fecabook його доставить". Справа "Нехай іншим буде легше знайти вашу подію. Створіть її на Facebook".

.
Ось який вигляд мають повідомлення, коли ми хочемо підтримати користувачів або поспівчувати їм.

Зліва "Facebook пропонує використовувати систему переказу грошей у соцмережі, обіцяє забезпечити безпеку всіх транзакцій і робить це безкоштовно". Справа "На згадку про Роксанну. Жасмін, ми шкодуємо про вашу втрату. Сподіваємося, що вас розрадять слова, якими діляться інші в пам'ять про Роксанну".

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

Втілення ідей у життя

Для нашої команди фреймворк тональності — це інструмент, який допомагає мислити ширше і думати не тільки про те, як користувач поводитиметься в ідеальних умовах. Також ми спираємося на фреймворк, коли думаємо про діапазон емоційних реакцій, які може викликати продукт. Спілкуватися можна по-різному. Різні ситуації викликають різні емоції. Повідомлення про помилки зазвичай засмучують користувачів, на відміну від повідомлень про успішність завершення дії — вони викликають почуття задоволення. Наявність певної точки зору на те, як підходити до цих двох видів повідомлень, може стати початком простої, але корисної системи тональності.

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

Наприклад, дамо користувачам зрозуміти, що ми тут, щоб підтримати їх, коли вони вперше зареєструвалися:

Приклади в різній тональності "Вітальний" — "Ласкаво просимо на Facebook!", "Інформативний" — "3 способи розпочати роботу", "Співчутливий" — "Ми тут, щоб допомогти вам розпочати роботу"

.
Тон — це складна річ, яку складно засвоїти. Часто це більшою мірою мистецтво, ніж наука.

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

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

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

Текст Susan Gray Blue

👉 Більшe в Telegram →

Чому більшість популярних NFT—це Аватари? Розглянемо з точки зору продукту

shelest — Tue, 01 Nov 2022 19:11:19 +0000

Зараз NFT — одна з найбільш обговорюваних тем, і, здається, що тут не потрібно вдаватися в пояснення. Перейдемо відразу до справи. Трохи вивчивши цю сферу, стає зрозуміло, що продаються тільки 10% NFT, і на них припадає 85% усіх транзакцій. Але що стало найцікавішим, так це те, що всі NFT, які продали за великі гроші, — це Аватари, також відомі як PFP NFTs.

Від відомих CryptoPunks, Bored Ape до гонконгських Bunny warriors, Lucky Kittens. Усе це Аватари.

Сприймати NFT як цифрове втілення традиційного ринку мистецтва — точно неправильно. На традиційному ринку мистецтва портрети не особливо популярні. І не схоже, що у випадку з NFT всьому причиною є звичайна удача. Ймовірно, що у цього є конкретні продуктові та UX-причини.

Ось тому спробуємо розібрати цю тему з точки зору продукту та поведінки користувача. Чому ж NFT Аватари популярніші за всі інші NFT?

Для початку згадаємо золоте правило для всіх стартапів, творців продуктів та дизайнерів — 'Робіть те, що хочуть люди'. Беручи за основу це правило, ставимо собі головне запитання: що ж робить NFT Аватари тим, чого хочуть люди? Якщо не брати до уваги хайп та інвестиційні стимули.

🤤 Лайк, підписка, колокольчик Telegram →

1. Інструмент

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

Зображення профілю завжди було місцем, де люди могли та можуть витончено виразити себе, ще з часів Facebook, Whatsapp. Уявіть, що ви отримуєте NTF з художнім малюнком. Навряд чи його можна буде використовувати як аватарку, оскільки йому не вистачає візуальної ідентичності. Але тепер, з вашою унікальною мавпою або кроликом, ви можете 'розгулювати' де завгодно в мережі. Це може здатися незначним, але NFT Аватари використовують таку особливість як сильний важіль впливу.

Крім того, NFT Аватари можуть бути справжніми 3D-аватарами в метавсесвіті — коли метавсесвіт популяризуватиметься в майбутньому.

2. Емоційна прив'язаність і рідкість

Пам'ятаєте свою дитячу плюшеву іграшку? Або останню фігурку від Marvel на робочому столі? Люди люблять встановлювати емоційний зв'язок з іншими істотами, від прихильності до тварин та улюблених героїв фільмів до вигаданих аніме-персонажів. Нам набагато легше полюбити 'індивідуальну істоту', ніж 'об'єкт'.

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

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

3. Ефект ІКЕА та причетність до спільноти

Люди обожнюють круті та блискучі речі, а ще їм весь час потрібно щось нове. Вони хочуть належати до певних груп, спільнот та ідентифікувати себе з ними. Більшість покупців NFT не просто купують витвір, як люди на аукціонах. Роблячи це, вони приєднуються до проекту в Discord, Twitter, Instagram та беруть участь у його створенні. Вони не купують продукт, а спільно створюють і підтримують проекти в цифровому світі — типовий ефект IKEA. Легше розвинути почуття приналежності, коли ми створюємо щось самостійно. А коли колекція вже готова і розрослася, володіння цими NFT стає членською карткою в приватному клубі — відображає статус та цінності, які вони підтримують.

Дехто може заперечити, що і NFT, які не є аватарами, можуть досягти того самого. Але для створення відчуття соціальної значущості наявність аватара має незамінне значення. Це той самий метод, який дизайнер продукту використовує для підвищення конверсії. Аватари можуть легко створити відчуття приналежності до ком'юніті. Ви ж не хочете спілкуватися в Discord з автомобілем на аватарі, чи не так?

На завершення

Блокчейн-технології, безумовно, виходять на одну сцену разом з Metaverse. І, здається, що надмірний хайп — не єдина причина, через яку вони так розрослися. З огляду на всі прийдешні web3 та NFT проекти, з нетерпінням очікуємо на те, як це буде розгортатися в майбутньому. І, що ще важливіше, дуже хочеться побачити, як це вплине на повсякденне життя людей, не пов'язаних із технологіями.

Текст Tsz Hoi Lee

👉 Більшe в Telegram →

Як працює режим змішування в графічних редакторах

shelest — Mon, 24 Oct 2022 21:11:39 +0000

Зізнайтеся, ви просто натискаєте різні режими змішування, поки не отримаєте потрібний результат?

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

Ден Холлік (в минулому дизайнер продукту в TIDAL) у Twitter вніс ясність, як саме працює, всім відомий функціонал Blend mode (Режим змішування).

Режим змішування – це спосіб створення нового кольору на основі двох заданих.

Оскільки ієрархія має значення для створення нового кольору, тому задані кольори розбивають на задній (background) і передній план (foreground).

Darken та Lighten

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

Darken порівнює значення RGB кожного кольору і вибирає найтемніше, створюючи новий колір.

Lighten робить те саме, але вибирає найсвітліше значення.

Multiply та Screen

Хоча вони дають схожі результати з Darken та Lighten, ви можете вважати їх більш елегантними версіями цих режимів. Відмінність яких є трохи більша контрастність.

Тому, маючи в наявності Multiply та Screen, використовувати Darken або Lighten — немає сенсу.

Режим Multiply робить саме те, що ви подумали — просто перемножує кольори між собою.

Результат завжди темніший за оригінал.

Screen фактично схожий на Multiply, але він інвертує як задані кольори, так і кінцеві, тому результат завжди світліший.

Color Burn та Color Dodge

Остання пара режимів затемнення/освітлення — Color Burn та Color Dodge.

Вони мають яскраво виражену криву, тому можуть давати досить різкі результати порівняно з попередніми режимами.

Color Burn — інвертує колір заднього плану, потім ділить його на колір переднього плану, а отриманий результат знову інвертує.

Color Dodge працює аналогічно, але навпаки — інвертує колір переднього плану та ділить на нього задній.

Overlay, Soft Light та Hard Light

Overlay, Soft Light та Hard Light відомі як контрастні режими змішування, оскільки вони роблять світлі ділянки світлішими, а темні - темнішими.

Це найбільш універсальні режими, особливо для зображень.

Overlay є досить цікавим. Якщо значення кольору заднього плану світле (> 127,5), то застосовується режим Screen, але з вдвічі меншим ефектом, що робить передній план світлішим. При темному значенні (< 127,5) — застосовується режим Multiply, але також з вдвічі меншим ефектом, що робить передній план темнішим.

Hard Light — це те саме, що й Overlay, за винятком того, що використовується колір переднього плану.

Soft Light — найскладніший зі стандартних режимів накладання. Він дає результати, подібні до Overlay, але більш витончені.

Difference та Exclusion

Difference та Exclusion відомі як режими інверсного змішування, оскільки вони створюють колір, який майже протилежний одному з двох заданих.

Difference робить саме те, що закладено в його назві - знаходить колір поміж двох заданих кольорів.

Значення одного кольору віднімаються від значень іншого. Всі від'ємні числа перетворюються на додатні.

Exclusion дає аналогічний результат, але набагато складніший.

Від суми кольорів передньго та заднього планів віднімаємо подвійний їх добуток.

Hue, Saturation, Color та Luminosity

Hue, Saturation, Color та Luminosity відрізняються від інших режимів тим, що вони оперують компонентами відтінку, насиченості та яскравості, а не значеннями RGB.

Вони формують новий колір шляхом комбінування значень HSL двох заданих кольорів.

Hue бере значення відтінку з кольору переднього плану, а значення насиченості та яскравості — з заднього.

Saturation бере значення насиченості з кольору переднього плану, а значення відтінку та яскравості — з заднього.

Color бере значення насиченості та відтінку з кольору переднього плану, а значення яскравості — з заднього.

Luminosity бере значення яскравості з кольору переднього плану, а значення відтінку та насиченості — з заднього.

👉 Більшe в Telegram →

Як безпечно оновити технічно застарілі компоненти у Figma

shelest — Fri, 21 Oct 2022 12:25:08 +0000

Спочатку розглянемо способи оновлення існуючого компонента, щоб почати використовувати Властивості (Properties). Якщо ви не знайомі з тим, як працюють Властивості та як їх використовувати, для початку перегляньте цей чудовий посібник від команди Figma.

Потім поговоримо про те, як випустити оновлений компонент з Властивостями (або навіть без них), аби не створити проблем для ваших дизайн команд.

У статті розберемо блок оповіщення (alert-block), розроблений командою дизайн системи Klarna.

Зменшення з 24 до 4 компонентів — легко зрозуміти, чому використання нових Властивостей є вигідним

Обмеження/цілі при релізі оновленого компонента

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

Оновлення компонента

Отже, ваша команда визначила компонент, який має занадто багато Варіантів (Variants), і він є чудовим кандидатом на спрощення за допомогою нових Властивостей. Маєте два способи:

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

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

Як опублікувати компонент, не порушуючи роботу команди

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

Відразу видаляти старий компонент – небезпечний крок, оскільки він заводить у глухий кут всіх, хто використовує посилання "Перейти до головного компонента"

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

У бібліотеці варто позначити компоненти заголовком або коротким описом, щоб не допустити використання старої версії.

Позначення компонентів у бібліотеці може допомогти дизайнерам знати, який компонент вони повинні обрати

Також можна повністю приховати старий компонент — він та його інстанси все ще продовжать існувати, але дизайнери не зможуть випадково копіювати старий компонент.

Приховування старого компонента разом з додаванням крапки в імені може допомогти дизайнерам запобігти випадковому копіюванню та вставці неправильної версії

Далі позначимо оригінал як застарілий, використавши опис та ім'я компонента. Використання схожих імен значно полегшує пошук нової версії при зміні інстансів (swapping instances).

Описи (descriptions) є потужним інструментом – вони відображаються на кожному компоненті та в пошуку і можуть бути чудовим способом додати контекст щодо змін у дизайн системі

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

Остаточне видалення старого компонента

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

Якщо ви користуєтесь тарифним планом для компаній, то це легко зробити в розділі Аналітика бібліотеки.

Аналітика бібліотеки – це відмінний спосіб відстежувати застарілі компоненти, які більше не використовуються

Але, якщо ви на початковому або професійному тарифному плані, то вам потрібно буде використовувати старий, досить ручний прийом з часів Sketch. Щоб виділити конкретні інстанси застарілого компонента, який потрібно ідентифікувати та потенційно видалити — додамо велику червону мітку.

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

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

Для дизайнерів, чиї файли стають жертвами великої червоної мітки мають два варіанти — (1) замінити інстанси з міткою на оновлений компонент, або, якщо на це нема часу, (2) то просто вимкнути мітку в слоях. Можна скористатися плагіном, наприклад, Similayer, аби автоматично виділити всі потрібні слої з міткою в межах файлу.

Текст Luka Nikcevic

👉 Більшe в Telegram →

Мінус $50 000 000 чи чого можна навчитися з провалу редизайну упаковки Tropicana?

shelest — Wed, 12 Oct 2022 16:20:45 +0000

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

Tropicana − дуже відомий бренд, який продає фруктові соки по всьому світу. 9 січня 2009 року компанія PepsiCo вирішила замінити існуючий дизайн упаковки свого найбільш продаваного апельсинового соку на нову упаковку для північноамериканського ринку.

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

Короткий перелік фактів

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

Компанія Tropicana інвестувала 35 мільйонів доларів у рекламну кампанію, яка просувала нову упаковку для бренду фруктового соку. І дизайн упаковки, і рекламна кампанія були створені одним і тим же агентством − Arnell.
8 січня 2009 року компанія Tropicana випустила на ринок нову упаковку для свого найбільш продаваного продукту в Північній Америці − Tropicana Pure Premium, дохід від продажів якого сягає понад 700 мільйонів доларів на рік. Через кілька днів споживачі почали критикувати новий дизайн, особливо в соціальних мережах. Через два місяці продажі впали на 20%, і це вражаюче зниження продажів означало для Tropicana втрату 30 мільйонів доларів.
Тим часом, конкуренти скористалися "кризою Tropicana" і збільшили власні продажі.
23 лютого 2009 року компанія Tropicana оголосила про повернення до оригінального дизайну упаковки, і вже за кілька місяців стара упаковка назавжди повернулася на полиці всіх супермаркетів.
Загалом ця ініціатива обійшлася компанії у понад 50 мільйонів доларів.

Відмінності між оригінальною та новою упаковкою

Для того, щоб зрозуміти провал цієї стратегії, важливо проаналізувати, що саме змінила Tropicana в дизайні своєї упаковки.

"Ми подумали, що було б важливо взяти цей бренд і довести його до більш актуального або сучасного стану", - заявив Пітер Арнелл, директор креативного агентства Arnell у своєму виступі, пояснюючи стратегію, обрану для продукту Tropicana.

Мабуть, однією з найважливіших змін є те, що великий прозорий стакан, наповнений апельсиновим соком, замінив апельсин і соломинку.

"Історично склалося так, що ми завжди зображували зовнішню сторону апельсина. Цікавим було те, що ми ніколи не показували сам продукт − сік".

Агентство вирішило взяти апельсин і перенести його на кришку пляшки. Ідея дуже креативна та цікава, адже ми бачимо, що кришечка дійсно має форму та текстуру половинки апельсина, яку можна вичавити, щоб отримати свіжий апельсиновий сік. Цей меседж перегукується з новою рекламною кампанією, що розпочалася одночасно, і як на упаковці, так і в рекламі міститься заклик "Вичавлюй, це природно" ("Squeeze, it's a natural").

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

Ще однією важливою відмінністю між двома упаковками є новий дизайн логотипу.

Оригінальний логотип був горизонтальним і супроводжувався назвою продукту "Pure Premium", тоді як новий логотип був вертикальним з більш простим і сучасним шрифтом. Розмір логотипу також було зменшено, щоб підкреслити повідомлення: "100% апельсин — бездомішковий та натуральний".

Tropicana випустила нову рекламну кампанію разом зі виходом оновленої упаковки. Основний меседж цієї кампанії — "Вичавлюй, це природно".

"Вся ідея "Вичавлювання" ("Squeeze")", − сказав пан Кемпбелл, − "полягає в тому, щоб підкреслити "функціональну користь" апельсинового соку в забезпеченні щоденного раціону людей фруктами, а також емоційний зв'язок, який споживачі мають з брендом Tropicana."

Що пішло не так?

Емоційний зв'язок з брендом

"Ми недооцінили глибокий емоційний зв'язок, який споживачі мали з оригінальною упаковкою" ... "Чого ми не отримали, так це пристрасті, яку мала ця дуже лояльна група клієнтів" ... "Ці люди дуже важливі для нас, тому ми і відреагували", – пояснив пан Кемпбелл, президент Tropicana North America в Чикаго.

Роль упаковки в процесі прийняття рішення про покупку

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

Дуже важливо враховувати роль дизайну упаковки в брендингу та його зв'язок з мерчандайзингом. У своїй статті Янг і Чуммо зазначають, що редизайн упаковки часто супроводжується невеликим зниженням продажів, але це, як правило, тимчасове явище і ніколи не було настільки серйозним, як зниження на 20%, з яким зіткнулася компанія Tropicana.

У цьому випадку багато споживачів не впізнали продукт на полицях супермаркетів. Деякі лояльні клієнти побачили напис "100% апельсин" і запитали себе, чи є цей продукт таким же, як і Tropicana Pure Premium, якому вони завжди довіряли. Далі виникла низка плутанини у свідомості споживачів, які втратили основні опорні елементи для впізнавання продукту, такі як:

Апельсин з соломинкою
Оригінальний логотип
Акцент на "100% апельсин" замість "Pure Premium"

Зовнішній вигляд нового дизайну

Оскільки упаковка мала більш простий дизайн, ніж оригінальна, більшість споживачів описували її як "потворну" і пояснювали, що вона схожа на упаковку з супермаркету низького цінового діапазону. Споживачі були збентежені цим новим виглядом, який робив бренд дешевим, враховуючи, що Tropicana завжди сприймалася як бренд преміум-класу.

Що можна винести з цього прикладу

Брендинг − складна тема, і часто важко передбачити реакцію ринку на зміну стратегії.

Однак, як з індивідуальної точки зору, так і з точки зору компанії, ми можемо винести кілька уроків зі стратегічної помилки Tropicana:

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

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

2. Фірмові елементи упаковки не потрібно змінювати одночасно

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

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

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

Звичайно, це стосується лише успішних брендів, таких як Tropicana. Якщо справи у вашого бренду і продукту йдуть не дуже добре, то повний ребрендинг може стати хорошим рішенням, щоб зберегти продукт на ринку. Насправді, ми бачили багато випадків (на думку спадає Herbal Essences), коли значні зміни в упаковці стимулювали продажі.

3. Упаковка − це мовчазний продавець

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

4. Реклама та дизайн упаковки мають різні правила спілкування

Реклама та дизайн упаковки - дуже різні інструменти комунікації.

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

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

Звичайно, стратегії упаковки та реклами завжди повинні узгоджуватися один з одним, як і будь-яка маркетингова діяльність загалом. Однак, для кожної сфери існують свої певні комунікаційні правила, яких необхідно дотримуватися. У випадку з Tropicana ці правила не були дотримані, і це стало причиною провалу нового дизайну.

Підсумок

Редизайн Tropicana проілюстрував значну силу упаковки. Хоча це був явно негативний приклад, важливо пам'ятати, що ця ж сила часто працює і в позитивному напрямку.

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

Текст Marion

Упаковки соку Tropicana 2022

👉 Більшe в Telegram →

Дизайн токени. База.

shelest — Tue, 04 Oct 2022 11:42:20 +0000

Тут ви дізнаєтесь основи того, що таке дизайн токени (design tokens), як вони використовуються, їх переваги, а також деякі інструменти та ресурси, які можуть вам допомогти. Але спочатку давайте почнемо з короткої історії.

Поширена ситуація

Ви - дизайнер продукту, працюєте над невеликим новим продуктом, не маючи існуючої дизайн системи. У вас є фірмовий колір — яскраво-синій (#3640F5). Ви використовуєте цей колір у різних місцях продукту, внутрішніх системах та на вашому веб-сайті: текст заголовка, основні фони кнопок, текст другорядних кнопок, текст посилань тощо.

Ці кольори будуть розкидані у ваших дизайн файлах і в коді, з яким працюють ваші розробники. У CSS вони можуть виглядати приблизно так:

h1 { color: #3640F5 } button.primary { background-color: #3640F5 } button.seconary { color: #3640F5 } a { color: #3640F5 }

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

Можливо, дизайнер обирає синій колір на око, який виглядає схожим, але насправді є іншим #4254F5. Це залишається непоміченим і потрапляє в код. Подібні речі відбуваються ще кілька разів і в результаті ви отримуєте п'ять різних відтінків синього і палітру, яка виглядає приблизно ось так.

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

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

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

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

Що таке дизайн токени?

Базовий дизайн токен — це змінна з унікальним ім'ям, якій присвоюється певне значення. Ви можете сприймати дизайн токен як джерело правди, яку можна повторно використовувати або комбінувати.

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

Це токен для кольору:

primary = #3640F5

Токени цього рівня схожі на звичайні стилі у Figma або Sketch, але більш потужніші та гнучкі (про те, як саме, ми розберемося трохи пізніше). Вони найчастіше використовуються для кольорів, розмірів, відступів, прозорості, товщин рамок (borders), розмірів/товщин шрифта тощо.

Під час реалізації дизайн-макету розробник вкаже наступне:

h1 { color: primary } button.primary { background-color: primary } button.seconary { color: primary } a { color: primary }

У Figma або Sketch буде вказано стиль з такою ж назвою, яка є спільною для всієї вашої команди або компанії.

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

Однак дизайн токени як система або підхід — це набагато більше, ніж те, що описане вище. Дизайн токени повинні інформувати про те, як ви взаємодієте в крос-функціональній команді, як ви підходите до рішень щодо дизайну та як ви масштабуєте ці рішення для всього набору продуктів.

Шкали та палітри кольорів

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

Загальний підхід полягає в тому, щоб мати кілька базових відтінків, включаючи кольори вашого бренду та акцентні кольори, а також деякі відтінки для таких речей, як помилки, попередження, інформування про успіх, нейтральні кольори тощо. Кожен з цих відтінків матиме шкалу яскравості, позначену числом, яке вказує на те, наскільки він світліший або темніший. Наприклад, neutral-100 — дуже світло-сірий, neutral-500 — середньо-сірий, а neutral-900 — дуже темно-сірий. Деякі дизайн системи використовують шкалу від 0 до 100, це вже на ваш вибір.

Токени псевдоніми (alias tokens)

Токени можуть посилатися на конкретні значення, але вони також можуть посилатися на інші токени. Іноді ми називаємо їх псевдонімами (alias), оскільки вони позначають те саме значення, але під іншим іменем. Їх також можна назвати референсами, оскільки вони посилаються на значення іншого токена. Вони можуть навіть посилатися на інші токени псевдоніми.

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

Всі вони мають однакове значення синього кольору, тож навіщо ці дублікати?

Коли ваша дизайн система стає більш складною, скажімо, 20-30 кольорів, ви отримаєте 4 або 5 різних відтінків одного і того ж кольору, і потрапляєте в ситуацію, коли дизайнери або розробники не можуть запам'ятати в яких контекстах, які з них використовувати. Особливо це стосується ріхних відтінків сірого для фонів, рамок (borders), тіней тощо, оскільки варіації можуть бути дуже незначними. Додавши зміст і контекст до імен, ви можете зробити використання кольорів дуже зрозумілим та передбачуваним для всіх членів команди.

Деякі приклади: text-body, text-secondary,background-card, text-link, border-separator. Здається, досить очевидно, де ви можете використовувати ці кольори. Оскільки ці типи токенів містять в імені значення, яке вказує на місце їх використання, ми іноді називаємо їх семантичними токенами або семантичними псевдонімами.

Іншим поширеним типом псевдонімів (alias) є токен компонента (component token). Замість розширених семантичних назв, вони мають імена, надзвичайно специфічні для компонентів, наприклад, input-background-hover або button-secondary-border-focus. Це значно полегшує рішення щодо сстандартів іменування.

Темний та світлий режим

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

У світлій темі (light mode) встановлюєте цей токен як псевдонім для світло-сірого кольору (neutral-900), а для темної теми (dark mode) — темно-сірого (neutral-100).

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

Які недоліки використання токенів?

Недосконалі дизайн-інструменти
На сьогодні жоден з популярних дизайн-інструментів не підтримує токени таким же потужним чином, як це реалізовано в коді розробробників. А псевдоніми як концепція взагалі не існують. Загалом, є тільки кілька плагінів (про які згадано в кінці статті), які можна використовувати для заповнення деяких з прогалин.

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

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

Декілька напутніх думок

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

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

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

Інструменти та ресурси

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

Themer — плагін, який підтримує тільки стилі в межах Figma, але дозволяє динамічно перемикатися між темними і світлими темами за допомогою семантичних токенів.

Код
Словник стилів — система, розроблена Amazon для управління та використання дизайн токенів у вашому коді.

Theo — система, розроблена Salesforce для управління та використання дизайн токенів у вашому коді.

Текст Steve Dennis

👉 Більшe в Telegram →