interfaces.prjctr | hladynets week

UX тренди у мобільних застосунках: 10 поширених помилок1. 72% мобільних застосунків показують надміру помітну рекламу на домашній сторінці.Великі оголошення відволікають та заважають користувачам отримати уявлення про продукти, перевантажуючи увагу рекламою. Юзери часто ненавмисно взаємодіють з такими банерами, що створює додатковий friction. 2. 56% застосунків посилають на обмежений каталог товарів з домашньої сторінки.Якщо користувачі не помічають, що вони перейшли на вузькоспеціалізовану категорію товарів, то можуть неправильно інтерпретувати весь каталог товарів. Юзабіліті тестування показало, що для деяких шляхів підгрупа учасників ніколи не помічала, що переглядає вужчий список. Вважала, що дивиться загальний каталог. Як наслідок, ці учасники часто закривали застосунок, думаючи, що в каталозі бренду немає товарів, які їм потрібні.3. 53% застосунків не зберігають пошукові запити користувачів у полі пошуку на сторінках результатів.Кожен раз, коли користувач хоче уточнити пошуковий запит, він має вводити його з нуля.4. 96% мобільних застосунків не мають submit button поруч з полем пошукуШукаючи продукти, користувачі не завжди дивляться на клавіатуру, щоб відправити запит.Під час тестування помітили, що відсутність явної кнопки надсилання запиту поруч з search suggestions ускладнює процес пошуку і збільшує ймовірність помилок: наприклад, ненавмисного видалення пошукового запиту.5. 45% застосунків використовують повторювані та нерелевантні search suggestionsМаються на увазі пропозиції, що створюють додатковий шум і подовжують список, хоча й означають одне й те саме. Наприклад, «кемпінговий намет» і «кемпінгові намети» або «дитяче взуття» і «взуття для дітей».Або просто недоречні — наприклад, пропозиції щодо взуття, хоча запит був «жіночий гаманець».Це змушує користувача зайвий час думати про відмінності між «дитячим взуттям» і «взуттям для дітей» та вирішувати: обрати недосконалу пропозицію, уточнити пошуковий запит або переглянути всі категорії — тобто виконувати зайві дії, що ускладнюють та подовжують пошук потрібного товару.• 5 інших порад і приклади фідбеку респондентів — в дослідженні Baymard Institute

Як ефективно збирати адреси електроної пошти без поп апів — поради Віталія ФрідманаЛюди мають всередньому 1.7–1.9 поштових скриньок. Люди не люблять надавати свою особисту пошту через острах спаму та скаму. Тому вони використовують тимчасові або запасні електронні адреси, просто щоб отримати промокод на знижку. Ви малоймовірно отримаєте особисту пошту через поп ап. А бізнесу потрібна саме вона, щоб мати справжніх лідів, які пізніше конвертуватимуться і робитимуть покупки.🔹Як зібрати справжні особисті контакти?• Показуйте вікно розсилки тоді, коли воно має найбільше значення для клієнтів• Під час оформлення замовлення дозвольте користувачам підписатися на розсилку та одразу використати купон• Перевіряйте електронну пошту клієнта безпосередньо перед покупкою та одразу після неїКоли справа доходить до розсилок, наше завдання — знайти момент, коли клієнти зацікавлені в тому, щоб залишити правильну адресу електронної пошти. Вони повинні усвідомлювати цінність, яку отримають, вказавши реальну особисту пошту.🔹Зазвичай це відбувається на 5 типах сторінок:Сторінки акцій↳ «Ми надішлемо повідомлення з підтвердженням на цю електронну адресу»Сторінки товарів↳ «Залиште email і оформите замовлення із застосуванням купона»Сторінка розпродажів↳ «Отримуйте сповіщення про розпродажі та поповнення запасів»Останній крок оформлення замовлення↳ «Перевірте свою адресу, щоб отримати електронного листа з підтвердженням»Сторінка підтвердження покупки↳ «Не отримали підтвердження? Відредагуйте свою електронну пошту»Розмістіть поля на таких сторінках і виміряйте результати. Відстежуйте не лише зростання списку контактів, але й показники відмов, відкривань та конверсій.Ваша мета: принаймні наблизитися до середнього показника відкриття імейлів у 21,8%, що є бенчмарком для всіх індустрій.І не забудьте очистити список від тимчасових імейлів — деякі компанії не усвідомлюють, наскільки дорого можуть коштувати неіснуючі ліди. Ви будете здивовані, наскільки ефективною може бути така проста зміна.🔹 За advances UX скілами приходьте на практичний воркшоп Віталія Фрідмана — UX Strategy Workshop.

5 гірших дизайнів продукту в історії🔹 Ford Pinto — автомобіль, який випускала компанія Ford з 1970 до 1980 року. У моделі була серйозна конструкційна проблема, через яку при зіткненнях ззаду могли виникати витоки пального та вибухи. Це призвело до загибелі щонайменше 27 людей і численних травм.У 1978 році Ford відкликав 1,5 мільйона Pinto для усунення дефекту, але Pinto назавжди залишився одним з найвідоміших прикладів невдалого дизайну продукту.🔹 Samsung Galaxy Note 7 — флагманський смартфон, випущений у 2016 році. Мав серйозний дефект — проблема з акумулятором, яка призводила до його перегріву та вибухів. Samsung відкликав пристрої та замінив несправні моделі, але до цього часу вже надійшло чимало повідомлень про травми та пошкодження майна.🔹 LAVA — індійський стартап, що у 2010 році вирішив випустити революційний продукт — мобільний телефон з повною QWERTY-клавіатурою, але з однією «невеликою» відмінністю. Букви були розташовані в алфавітному порядку. Звісно, користувачі не захотіли заново вчитися друкувати тільки для того, щоб користуватися новим пристроєм.🔹 3D Television — технологія, що дозволяла дивитися телевізор у 3D за допомогою пластикових окулярів, схожих на ті, що використовують у кінотеатрах. Вони були незручні, а 20-25% користувачів відчували навантаження на очі та запаморочення. Також розробники опинилися в замкнутому колі: відсутність 3D контенту на момент запуску призвела до низьких продажів телевізорів, а це в свою чергу позбавило стимулу творців контенту розробляти нові 3D програми.🔹Ховерборди —у 2015 році вони стали сенсацією, їх просували зокрема Джастін Бібер і Майк Тайсон. Так, перенасичений ринок і тиск на швидкий випуск товарів змусили виробників іти на компроміси, стандартів безпеки не існувало. Близько 27 000 дітей потрапили до лікарень через перегрівання батарей, які вибухали та спричиняли пожежі.Які інші жахливі випадки пам’ятаєте?

Кейс: як пофіксили невдалу палітру кольорів SkyscannerДілиться Адам Вілсон, що обіймав посаду Senior Product Designer у Skyscanner.Проблема: «Навіть через кілька місяців я все ще не міг зрозуміти, які кольори де використовуються. Посилання були різних кольорів. Основні кнопки були зеленого кольору. Але якщо вони призначалися для конкретного типу бронювання — синього. Заплуталися? Я теж…»Завдання: зробити так, щоб бренд і продакт команди послуговувалися однаковими правилами використання кольорів. Одна палітра має бути простою та легкою у використанні, а інша — сміливою та виразною. При цьому всі комбінації треба було зробити інклюзивними.Основні рішення: систематизувати та спрощувати.• Ми визначили більш сфокусовану палітру з основними та розширеними комбінаціями.Темне стало темнішим, а світле — яскравішим. У якості брендових ми змішали нові додаткові кольори.• Потім ми подивилися на назви: поетичні назви мали піти. Вони просто не працювали.«Калькутта» → «той оранжуватий колір»«Ерфаунд» → «той жовтуватий колір»• Для інклюзивності необхідно дотримуватися стандартів контрастності.25% комбінацій кольорів на iOS і 17% на Android були недоступні.Ми вже використовували 31 колір у нескінченних комбінаціях, тож ми прийняли просте рішення це прининити. Текст став чорним або білим, що обмежило кількість доступних комбінацій і дозволило залишити інклюзивні.• Всередині продукту ми презюмували, що вже отримали певну увагу користувача.Тож не треба кричати усіма кольорами, як на креативах. Продуктова палітра має бути протиотрутою від тривоги — створювати відчуття спокою. Less is more.• Ми написали правила і зберегли все це разом у Figma.Розділили палітри на бібліотеки Brand і Product. Екрани ретельно вивчалися, правила ставилися під сумнів, а комбінації досліджувалися. Але у нас був основний набір кольорів і принципів як бачення. • Джерело — стаття Адама на Medium. У ній про імплементацію нових підходів у код і кольори, відправлені на цвинтар.

Добірка дизайн патернів для АІ інтерфейсів від Віталія Фрідмана.AI інтерфейси — набагато більше за текcтові промпти. Думайте outside of the box і підтримуйте юзерів завдяки новим патернам: зручним, таким що роблять взаємодію зі штучним інтелектом розумнішою, точнішою і кориснішою.🔹Дизайн патерниAI Interaction Design PatternsEmily CampbellAI Design Patterns CatalogueMaggie AppletonLanguage Model SketchbookMaggie AppletonStyle Lenses For AI GenerationAmelia WattenbergerAI Search Experience Design PatternsDaley WilhelmAccordion Editing and Apple Picking Patterns For AISarah Gibbons, Tarun Mugunthan, Jakob NielsenUX For AIGreg Nudelman🔹Корисні ресурсиWhy Chatbots Are Not the FutureAmelia WattenbergerThe Rise Of The AI Model Designer Paz PerezUsability Problem With Prompt-Driven AITom ClearyAI Prompt FramingRaluca Budiu, Feifei Liu, Amy Zhang, Emma CioncaDesigning For AI LibraryLuke WroblewskiAI Design Patterns and UX ToolkitsTruly yours Vitaly Friedman• Застосовувати ці правила на практиці та будувати реально зручні АІ інтерфейси приходьте на 4-денний воркшоп Віталія Фрідмана Design Patterns For AI Interfaces.

5 поширених UX помилок навігації по домашній сторінці та категоріяхЗгідно з дослідженням Baymard Institute у цьому розрізі 76% сайтів мають посередній або поганий перформанс.Як не опинитися в їхніх рядах?🔹91% сайтів використовують продукти зі спільними рисами як окремі категорії.Наприклад, в American Eagle «Квіткові сукні» — це підкатегорія «Суконь». Тобто користувач не може переглянути «Всі сукні» або, наприклад, список з «Квітковими сукнями» та «Мінісукнями».🔹70% сайтів неправильно застосовують фільтр «Знижка»Сайти часто дають можливість переглянути товари, на які діє знижка. Натомість при великому каталозі товарів, це посилає в кілометровий список непотрібних товарів — там і чайники, і столи, і красиві столові серветки. Тому важливо додавати «Знижку» як додатковий фільтр, яким можна обрати товари серед конкретної категорії, на які у той самий час діє знижка.🔹63% сайтів не розміщують пряме посилання на продукти, зображені на «надихаючих зображеннях»Юзер відкриває сайт, бачить гарні лайфстайл зображення, помічає конкретні класні товари, натискає… І не потрапляє нікуди або переходить на загальний каталог товарів. Це викликає фрустрацію у користувачів, яким сподобався товар з цього зображення. Деякі сайти вирішують це, формуючи каталоги з усіх товарів на віжуалі або посилаючи на 1 з зображених товарів.🔹61% сайтів не мають або мають малозрозумілі іконки підкатегорійПризначення проміжної сторінки з категоріями — відправити юзера до потрібної йому підкатегорії якомога легше. Ця задача ускладнюєтся, коли список важко сканується очима. Популярна причина: велика кілкість одноманітних надписів, які не супроводжуються візуально.Під час тестування учасникам було набагато легше користуватися сайтами, де категорії мають як назви, так і іконки.🔹91% сайтів не підсвічують поточне місцезнаходження користувача в головному менюНавіть коли breadcrumbs реалізовані досконало, користувачі часто покладаються на основне меню, щоб швидко зрозуміти, де вони знаходяться, або щоб запевнити себе, що вони знаходяться там, де вони думали, що знаходяться.На щастя, є просте та бюджетне рішення — виділіть поточне місцезнаходження користувача в головному меню за допомогою іншого стилю: кольору, підкреслення, тощо.• Більше знань і практичних UX навичок — на курсі UX Design Medium.

UX порада дня: використовуйте «візуальні» фільтри для візуально виразних особливостей продукту.Холодильники, дивани, намети, умивальники, стилі тумбочок — усі ці речі бувають різними, та їхні творці можуть назвати 1253645 підвидів.Але користувачі — ні.Та це стає проблемою.Часто слова, які користувачі використовують для опису товару, не збігаються з термінологією, що використовує сайт.Або ж, користувачі мають уявлення про бажаний товар, не знаючи, як вона називається.Таким чином, користувачі не можуть ефективно фільтрувати великі каталоги, що ускладнює пошук товарів. Це часто призводить залишення юзером сайту.🔹 Тож, як допомогти користувачам фільтрувати ефективно?Додавати ілюстративні зображення до фільтрів.Тобто замість суто текстових фільтрів для вибору ліхтаря, показувати, що ви маєте на увазі.Погодьтеся, середній шукач ліхтаря на дачу не розбереться, що значить Mediterraneanian і Farmhouse. А в чому різниця між Traditional і Classic — і поготів. • Більше даних і прикладів — у дослідженні Baymard Institute.• Практичні навички зі створення ефективних дизайн рішень — на курсі UX Design Medium.

Ми оновили курс Product Design. І дуже хочемо цим поділитися.Що ж нового?🔹 Покращена програма від Бориса Бакланова.Борис — Senior Product Designer у Klarna: Buy Now, Pay later компанія, яка має 150+ млн користувачів на 30 ринках і використовується Nike, Airbnb, H&M, Zara та ін. Він 6 років у продуктовому дизайні, працював у Miro, Genesis, Competera.🔹 Новий куратор — Арсен Колиба.Він же — Product Designer у Wix, продукті, на якому працюють 10 млн сайтів, або 2.5% від усіх сайтів. Раніше працював в OLX, де допоміг згенерувати 446 млн грн, спроєктувавши потік для оплати товарів на пошті. Отримав 2 гранти від Figma.🔹 Усе в онлайн-режимі: всі лекції наживо, всі питання вголос, всі відповіді на загал.🔹 Фокус на продуктовому світогляді і занурення в реалії роботи в продуктовій компанії.🔹 Розберемо детальніше, як працюють продукти і як дизайнеру безпосередньо впливати на зростання цих компаній.🔹 Дійсно необхідні навички і знання, які щодня застосовують продуктові дизайнери.🔹 Перший місяць — домашки на кейсах продуктових компаній.🔹 Другий та третій місяць — працюємо над курсовим проєктом для реального бізнесу, де пройдемо весь шлях створення дизайну end-to-end.Дивіться програму тут. І реєструйтеся.