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

Короткий гайд по UX аудиту

Olya — Tue, 07 Jan 2025 19:24:25 +0000

Вебсайти, мобільні застосунки, багатофункціональні платформи - все це складається із безлічі елементів, користувацьких шляхів і можливостей для ваших користувачів. Авжеж, ви чули про “user-friendly” інтерфейс, але що це? Як визначити, що саме ваш продукт є user-friendly? Що саме потрібно у ньому змінити для того, щоб він максимально був зручний у користуванні? Quality Geek підготували короткий гайд з UX-аудиту, який дозволить швидко розібратися, для кого, навіщо, а головне — ЯК ми проводимо цю дизайнерську активність. Тому поїхали!

Що таке UX Audit і для кого він потрібен

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

Чому UX-аудит необхідний навіть для вже існуючих рішень на ринку? Все просто: коли у вас є продукт, і ви помічаєте, що користувачі “відпадають” на певному етапі — наприклад, не завершують покупку, не бронюють зустріч, або ж виникають часті звернення до клієнтської підтримки через незрозумілість процесів, чи є незадоволені конверсією, це і є дзвіночком для проведення UX аудиту. Адже завдяки цій активності ми можемо знайти проблему(-и) та запропонувати гіпотези її вирішення.

Для кого?

UX-аудит необхідний продуктам, які:

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

Як провести UX Audit

Коротко і по суті:

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

А тут вже детальніше:

У Quality Geek UX аудит розпочинаємо із kick-off дзвінку із клієнтом для глибшого розуміння його продукту та ознайомлення із його думками щодо “болей” користувача. Після ми знайомимося із сайтом, застосунком чи платформою, опрацьовуючи усі шляхи користувача.

Ми оцінюємо інтерфейс не за випадковими показниками, а конкретними стандартами, які 100% впливають на досвід користувача. Саме їх і виокремив Якоб Нільсен:

Видимість стану системи
Контроль та свобода користувачів
Поєднання системи та реального світу
Послідовність та стандарти
Попередження помилок
Гнучкість та ефективність використання
Естетичний та мінімалістичний дизайн
Розпізнавання, діагностування помилок
Довідка та документація

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

червоний - для проблем
зелений - для рекомендацій
жовтий - для запитань

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

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

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

Висновок

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

Назва, теги та інші фішки Behance кейсу: як збільшити в три рази лайки та перегляди за два місяці

Olya — Wed, 10 Apr 2024 06:08:49 +0000

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

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

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

Завдяки змінам в описі кейсу наша команда Quality Geek змогла підвищити усі показники у статистиці Behance профілю.

Порівняння вподобань на Behance

Порівняння переглядів на Behance

Наскільки важлива назва кейсу?

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

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

Прикладами від Quality Geek є:

один із перших наших кейсів на Behance - кейс вебсайту для французької компанії із виготовлення і продажу 3D принтерів для кухонного приладдя La Patisserie Numerique. Назву, що була раніше La Patisserie Numerique - Website Redesign, ми змінили на Food 3D Printers e-commerce | Redesign, що принесло пожвавлення статистики стосовно цього конкретного кейсу.
кейс для веб АІ платформи для генерації текстів Kamoo. Попередня назва: Kamoo - Design for AI Writer Tools, - була змінена на AI-driven content creation tool design | Smart writing assistant
кейс для веб застосунку Canary, що полегшує менедження декількох X (Twitter) акаунтів одночасно. Попередня назва: Canary - Twitter Management Platform. Нова назва: Twitter dashboard | Social media management software

Порівняння результатів кейсу 3D принтерів для кухонного приладдя La Patisserie Numerique

Порівняння результатів кейсу веб АІ платформи для генерації текстів Kamoo

Порівняння результатів кейсу веб застосунку Canary

Влучність тегів

Влучні теги - наступний ключ до більшого залучення авдиторії та їхньої активності. Візьмемо до уваги 10 випадкових кейсів на Behance і проаналізуємо використання у них тегів. Більшість з них використовують достатнього загальні теги, які ніяких чином не позначають, що конкретно демонструє проєкт (visual, design, brand, art).

Ми помітили, що теги, що стосуються сфери вашого проєкту, можуть значно підвищити увагу до нього. Наприклад, у кейс App for content discovery | Music, movie, books ми підібрали конкретні теги, які допоможуть про пошуку саме цих сфер.

А завдяки Behance Pro змогли відстежити, що саме за тегами Music App, Movies, Podcast наш кейс найчастіше потрапляв у пошукові результати користувачів.

Теги та їхня статистика для кейсу App for content discovery | Music, movie, books

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

Creative Fields & Tools

Правильно підібрані Creative fields та Tools допоможуть у просуванні вашого кейсу.

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

Таким самим чином, підбирайте креативні сфери для вашого кейсу.

High-converting marketing service | Landing page agency

Tools & Creative Fields High-converting marketing service | Landing page agency

Опис проєкту та його автори

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

Як додати цей опис?

Зайдіть у налаштування проєкту.
Внизу знайдіть синю текстову кнопку Add co-owners, credits, and more… та перейдіть по ній.
У вкладці Basic info заповніть Project Description
Натисність Done та потім Update Project.

Додавання опису у Behance кейсі

Опис також є додатковим інструментом для пошуку, адже може містити ключові слова.

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

Висновки

У висновку, успішна презентація проєкту на платформі Behance вимагає більше, ніж просто якісний вміст.

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

Як поєднювати мистецтво кольору та принципи доступності?

Olya — Tue, 19 Mar 2024 08:21:45 +0000

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

“Мистецтво безладне, мистецтво хаотичне - тут потрібна якась система” Ендрю Стентон

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

Як мобільний застосунок стане союзником у догляді за людьми з деменцією?

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

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

Чому дослідження користувачів настільки важливе?

Провівши детальне UX дослідження, ми змогли сформувати 3 основні UX персони:

Макс, 25 років. Допомагає своєму дідусю, в якого деменція
Діана, 52 роки. Доглядає обидвох своїх батьків із різними ступенями деменції, та
Сара, 62 роки. Доглядає свого чоловіка із деменцією.

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

Тестування доступності та перші результати

Чи завжди дизайнери помічають не читабельність тексту і його не контрасність? Чи проводите ви тести на контрасність при створенні концепту?

Вимоги до доступності, сформовані на міжнародному рівні і мають відповідати WCAG 2+ (Web Content Accessibility Guidelines), стосуються і контрасності елементів у діджитал продуктах. Зокрема, рівень контрасності має бути 4.5:1 і вище. Тобто менші показники означають недоступність застосунку для певних категорій користувачів або у певних обставинах.
Наприклад, чи стикалися ви з тим, що не можете прочитати текст на екрані, коли яскраве сонце? Якщо так, то доступність діджитал продукту можна поставити під сумнів.

Перший варіант концептів головної сторінки застосунку

За допомогою WebAIM, інструменту Contract Ratio, ми протестували концепти та отримали наступні результати: деякі тексти не досягали до показника 4.5:1, а отже, не мали достатньої контрасності і були б не доступними для окремих категорій користувачів.

Концепт 1 із першими результатами Contrast Ratio

Концепт 2 із першими результатами Contrast Ratio

Ітерація правок для досягнення вимог доступності

Враховуючи перші отримані показники, ми скорегували кольори та досягли показників 4.5:1 і вище, завдяки чому тексти стали більш читабельними.

Концепт 1 з результатами після внесення правок. Contrast Ratio

Концепт 2 з результатами після внесення правок. Contrast Ratio

Тестування дизайну на сприйняття його людьми із різними типами дальтонізму (колірної сліпоти)

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

Для цього ми використали розширення для Google Chrome - Colorblindly

Концепт 1. Результати з Colorblindly

Концепт 2. Результати з Colorblindly

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

Висновки

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

Чи зустрічали ви додатки, де варто було б провести тестування на контрасність тексту та доступність? Діліться своїм досвідом користування такими застосунками у коментарях 👇🏻