Вступ
Це історія про початок мого шляху в індустрії дизайну. Я знаю трохи про кожну галузь дизайну, тому що вивчала це в університеті. Почала з з'ясування, яка спеціалізація цікавить мене найбільше. Мені подобається продумувати концепцію того, як продукт працює з користувачами, робити інтерфейс зручним, аналізувати, тестувати і працювати над візуальною частиною дизайну. Отже, я прийшла до висновку, що хочу бути UX/UI-дизайнером.
Тому я знайшла IT-школу і почала вчитися. Раніше читала багато книг про дизайн UX/UI, але у мене не було конкретної практики, і не було достатньо знань про інструменти, які могли б допомогти в досягненні цілей. Я копалася в новій професії вдома, дивилася відео на YouTube, як стати дизайнером, читала книги і статті.
Чому цей проект?
На початку навчання наш вчитель сказав мені, щоб я вибрала цікаву тему для проекту, яку повинна створити, використовуючи інструменти дизайну UX/UI. Я взяла популярну тему, пов'язану зі здоровим способом життя. Це був щоденник харчування. Я назвала його Healthy Body. Переглядаючи всі теми навчання, поступово створила власний додаток.
Спочатку вивчила основні аспекти дизайну користувальницького досвіду, основні підходи до дизайну і методології. Для створення свого навчального проекту вибрала підхід, який називається «Дизайн-мислення». Це означає, що мені потрібно вирішити проблеми кінцевого користувача з якісними дослідженнями на першому етапі процесу. Моєю метою було створити додаток, який міг би вирішувати проблеми користувачів. Під час проектування використовувала багато інструментів, таких як: полотно продукту, персонажі, сценарії та інші.
Бізнес-дослідження
Для добре розробленого UX-дизайну слід провести бізнес-дослідження, яке включає в себе опис продукту та інтерв'ю.
Product canvas — інструмент, який допоміг мені отримати загальну картину ідеї проекту. Ви можете побачити це нижче на зображенні. Містить інформацію про кінцевих користувачів, їхні проблеми, основні конкурентні переваги і конкурентів. З тих пір, як я створювала додаток для щоденника харчування, дослідила, що мої кінцеві користувачі мають величезні проблеми з плануванням свого харчування і зазвичай забувають важливі речі. Тому додаток «Healthy Body» допоможе людям не забути купити продукти або виконати деякі дії зі свого графіка з нагадуваннями! Крім того, цей додаток буде мати інші корисні функції.
Рекомендуємо курс по темі
Дослідження користувачів
На наступному етапі проектування я повинна була з'ясувати, хто буде використовувати додаток. Тому створила вигаданого персонажа, який представляє певну групу користувачів, яка може використовувати продукт аналогічним чином. Ви можете побачити цей опис нижче. Це називається Proto Persona.
Опитування
Щоб отримати інформацію для якісного дослідження, потрібно було підготувати інтерв'ю з кінцевими користувачами і провести його. Питання задаються для отримання інформації про потреби, цілі, больові точки і поведінку користувача.
Пізніше я підготувала 15 запитань своїм друзям і провела співбесіду з тими з них, хто може стати потенційним користувачем додатку. У мене були критичні питання як ці, уникаючи компліментів і інформації про мою ідею проекту:
- Чи існують проблеми зі здоров'ям? Вони пов'язані з вашим харчуванням?
- Ви намагаєтеся виправити ці проблеми і чому?
- Як ви намагаєтеся виправити свої проблеми зараз?
- А може, ви намагалися вирішити ці проблеми раніше?
- Чи є у вас які-небудь інструменти, які допоможуть вам забезпечити здоровий спосіб життя?
- Скільки це коштує?
Провівши співбесіди з друзями, я записала аудіо на свій мобільний. Проаналізувала їх, а потім уточнила шаблон особистості на основі інформації, отриманої при інтерв'ю.
Створення сценарію користувача
Завершальним етапом для дослідження користувачів була побудова сценарію користувача. Це інструмент, який представляє собою набір дій, що вживаються кінцевим користувачем для того, щоб використовувати продукт для досягнення мети. Для зручності зберігання зібраної інформації вибрала інструмент під назвою RealTime Board. Це допомогло побачити всю мою роботу і створити сценарій для проекту, використовуючи його елементи.
Я створила два типи сценарію: як є і як буде.
Це тільки частина сценарію, який описує поточний користувальницький досвід, заснований на інтерв'ю. Він показує нам, як користувачі вирішують свої проблеми за допомогою упорядкованих дій.
Інший тип інтерв'ю під назвою To Be описує, як користувачі можуть досягти своїх цілей за допомогою функцій мого додатку.
Я зрозуміла, що це буде більш зручно і займе менше часу для досягнення цілей користувача.
Інформаційна архітектура — від сценарію до ескізів
Наступною стадією було створення Низьких і Високоточних каркасів. По-перше, я використовувала тільки листки паперу, щоб зрозуміти, які основні елементи повинні бути на вікні. А потім створила прості начерки за допомогою графічних інструментів, таких як photoshop і paint.
Перед створенням каркасів низької якості потрібно було створити карту сайту і створити Tree Test за допомогою optimworkshop.com, який допоможе зрозуміти, чи добре спланована навігація в додатку або її потрібно скорегувати.
По-перше, карта сайту допомагає візуально позначити, як різні сторінки і контент пов'язані один з одним. Я вирішила, який контент і функціональність повинен містити додаток. Готова карта сайту має матричну структуру.
Так я можу зрозуміти, чи добре виконана навігація по карті сайту для користувачів. А потім подумала, що зможу провести тестування дерева зі своїми кінцевими користувачами. Для цього побудувала карту сайту на optimworkshop.com, і користувачі знайшли в дереві місця, де можна виконати певні завдання. Наприклад, деякі з питань були такими:
- Як ви можете змінити свою мету на вагу?
- Де можна знайти рецепт сніданку?
Результат проведення тестування дерева ви можете побачити нижче.
Поступово використовуючи інструмент Balsamiq, я створила каркаси з низькою якістю відтворення і отредактувала їх у Photoshop. Це було моєю основою для створення красивого зручного інтерфейсу для програми Healthy Body.
UI частина проектування
Для створення барвистого дизайну для мого додатку у мене має бути натхнення у поточній сфері. Тому я створила Mood Board, який допоміг зрозуміти, які кольори і картинки я буду використовувати в інтерфейсі програми.
Рекомендуємо курс по темі
Я вирішила використовувати багато яскравих картинок на темному тлі. Тому що, коли використовую такий метод, вся наша увага буде зосереджена на світлих текстах і малюнках. Для платформи Android вибрала сімейство шрифтів Roboto, тому що вона рідна.
Я багато думала про заставку, яка зазвичай з'являється під час запуску гри або програми. Це графічний елемент управління, що складається з вікна, що містить зображення, логотип і слоган. Використовуючи темний градієнт, я фокусую користувачів на логотипі. Ось:
Для домашнього екрану, який люди зазвичай бачать після завантаження програми, використовувала інтерактивні картки і панель навігації з п'ятьма значками. Слідуючи тенденціям сучасного дизайну, я не використовувала меню бургерів, тому що всі функції програми можуть вирішувати завдання користувачів без нього. Для полегшення перегляду інформації розробила розбивку того, що користувачі використовують на рівні калорій і макроелементів, і скільки води їм потрібно пити в кінці дня. Ця таблиця з усіма даними постійно зверху.
Також хочу додати, що програма була розроблена для платформи Android xxhdpi.
Тому при створенні візуальної частини інтерфейсу використовувала офіційне керівництво по android від Material Design. Стежити за цією інформацією було легко, тому що були вимірювання всіх компонентів Android.
Це зайняло б занадто багато місця, якщо поділюся фотографіями всіх своїх екранів. Тому я збираюся показати вам тільки деякі з них, але записала відео про прототипи екранів додатка Healthy Body. Для створення прототипу мого продукту використовувала InvisionApp.
Промо-сайт
Щоб допомогти у просуванні програми Healthy Body, я розробила промо-сайт. Він має інформацію про ф'ючерси основних додатків. Він має чотири розділи.
Юзабіліті-тестування
Створивши інтерактивний прототип додатка, я повинна провести дослідження користувачів, яке фокусується на розумінні поведінки користувача, потреб і мотивації за допомогою методів спостережень, аналізу завдань та інших методологій зворотного зв'язку. Дослідження користувача включає якісне дослідження і кількісний аналіз. Якісні методи дослідження відповідають на питання, з якими проблемами стикаються користувачі, використовуючи рішення, чому ці проблеми виникають або як їх вирішити. Для свого проекту вибрала метод юзабіліті-тестування, щоб побачити, наскільки легко використовувати мій додаток з реальними користувачами. Підготувала список завдань для них, щоб побачити, де вони стикаються з проблемами і відчувають замішання. Потім провела помірне приватне тестування з моїм другом. Наприклад, деякі з питань:
- Як ви могли перевірити випиті склянки води в цьому додатку?
- Які зміни ви можете побачити після цього?
- Яким чином ви можете додати новий рецепт в базу програми?
- Як ви могли б відправити кому-то свій список продуктів, використовуючи Viber?
Після цього я з'ясувала деякі проблеми і деякі моменти, в яких необхідно було змінити дизайн:
- Деякі піктограми не були зрозумілі користувачам
- Деякі кнопки були розміщені неправильно
- Колір значків навігації неправильно відбивав розташування користувача
Значок «Назад» не слід розміщувати на екрані другого етапу після перемикання з панелі навігації відповідно до вимог Material Design.
Інформація про мету користувача була показана двічі на двох різних екранах.
Далі виправила всі проблеми за результатами тесту і записала відео зі зміненими екранами. І збираюся показати вам його:
Інший тип дослідження користувачів — це метод кількісного дослідження, який відповідає на питання про те, скільки і з якими типами проблем стикаються користувачі. Я не проводила його, тому що у не було можливості зібрати багато користувачів. Але, розмірковуючи про те, як гіпотетично визначити успіх, я б виділила наступні показники, такі як щастя, прийняття, утримання та залученість. Вірю, що ще буде можливість проводити A / B-тестування і аналітику додатків.
Рекомендуємо публікацію по темі
На закінчення
В умовах сучасного і напруженого способу життя здоров'я і фітнес часто поступаються суворих умов повсякденному житті. Основна проблема людей в тому, що більшість з них просто не знають, як і з чого почати або забувають про своїх запланованих графіках.
У нашому повсякденному житті ми все використовуємо безліч продуктів з різних причин, будь то робота, розваги, спілкування або знайомства. Дивлячись на речі критично, думаючи про те, як можу поліпшити досвід для більшості, я розробила додаток Healthy Body, яке могло б стати інструментом, що дозволяє користувачам швидко і легко зробити своє життя здорової.
Проте цей проект був тренувальним в моєму дизайнерському досвіді, я сподіваюся, він сподобається всім.
Особлива подяка Юлії Фок, Юлії Сарієв і всім, хто підтримував мене і допомагав, поки я працювала над цим проектом.
