UI/UX дизайн мобільного додатка - що потрібно знати замовникам

958 09-08-23 Час читання: 7 хв

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

• розробка UX (User Experience) ставить на меті покращити користувацький досвід, забезпечити зручну взаємодію з функціоналом додатка;
• UI-дизайн (User Interface) – це той самий привабливий візуал інтерфейсу, але створений з урахуванням попередніх UX-досліджень.

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

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

Крок 1 – аналітика і проектування UX

Робота з UX складовою потребує попередньої аналітики:

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

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

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

Крок 2 – побудова user flow

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

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

• візуалізувати послідовність кроків відвідувача;
• виключити складні “лабіринти” дій;
• скоротити та спростити шлях, зробити його цікавим та привабливим;
• включити у сценарії маркетингові прийоми, які будуть стимулювати користувачів;
• виявити проблемні зони, глухі кути, плутанину;
• позбутися зайвих екранів, оптимізувати структуру застосунку;
• за потреби доповнити функціонал.

Крок 3 – ескізне проектування інтерфейсу за допомогою wireframes

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

• сформувати “скелет” застосунку;
• побудувати навігацію;
• узгодити вкладеність розділів;
• визначити кількість екранів та структуру кожного з них;
• розташувати на екранах меню, кнопки, форми, заголовки, контент.

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

Крок 4 – розробка UI дизайну

Це найприємніший для замовника етап, коли застосунок починає отримувати оригінальне дизайнерське наповнення. Чорно-білі ескізи і схеми перетворюються в оригінальні кольорові макети – стає зрозуміло, як виглядатиме готовий додаток. Дизайнер візуалізує картинку:

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

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

Чим відрізняється дизайн нативних та гібридних застосунків?

При створенні дизайну нативних додатків, розрахованих лише на одну операційну систему, беруться до уваги окремі вимоги iOS та Android. Існують спеціальні гайдлайни з рекомендаціями Google Material Design для Android та Apple Human Interface для iOS, націлені на створення зручних та інтуїтивно зрозумілих інтерфейсів для користувачів відповідних гаджетів.

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

Крок 5 – створення прототипу 

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

Статичний прототип

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

Інтерактивний прототип

Екрани пов’язані між собою елементами навігації, кнопки та форми клікабельні, прототип імітує логіку роботи застосунку. Це більш трудомісткий метод, але він може спростити розробку складних застосунків. Інтерактивний прототип має особливе значення при узгоджені рішень із замовником – клієнт може тестувати сценарії, гортати екрани, оцінити зручність розташування та взаємодії різних елементів. Інтерактивний прототип створюється у програмах Figma, Protopie, Invision, Framer, Principle. 

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

Як допомогти у створенні крутого UI/UX дизайну: поради замовникам

• Наберіться терпіння та уважно поставтеся до етапів заповнення брифу, розробки ТЗ, узгодження ескізів і прототипів. Всі концептуальні рішення бажано прийняти на етапах, коли інтерфейс ще не має дизайнерського оформлення. Тоді коригувань буде менше, а процес піде швидше.
• Не розділяйте UI та UX. Якщо замовник просить зробити “тільки картинку”, адже функціональну складову інтерфейсу він добре продумав – це підходить хіба що для невеликих додатків з простою логікою. Для серйозного мобільного продукту структуру і функціонал мають опрацювати досвідчені спеціалісти – звісно, у тісній взаємодії із замовником.
• Впевнено доносьте, але не навязуйте суб’єктивну думку, якщо вона не грунтується на результатах аналітики і досліджень. Варто довіряти професіоналам – вони обов’язково втілять ідеї до клієнта, якщо це піде на користь проекту. Але ніколи не реалізують програшне рішення, яке запропонував замовник. 
• Тримайте руку на пульсі, будьте на зв’язку, активно включайтеся в консультації, пропонуйте ідеї та ведіть діалог. Довіра фахівцям – це не про байдуже ставлення та повна ізоляція від процесу. Це про конструктивне спілкування та злагоджену командну роботу.
• Не очікуйте “дешево та швидко”. Оригінальний дизайн мобільного застосунку – це комплексна командна праця, яка не робиться “на вчора”. Якщо потрібно дуже терміново і бюджетно – можна скористатися шаблонними рішеннями. А потім, коли буде змога, приділити достатьо уваги та часу редизайну.

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