UX/UI дизайн інтерфейсів користувача

UI/UX дизайн інтерфейсів, проектування UX дизайну, UI дизайн

4спеціалісти типова команда на UX проект
UX+DEVінтеграція з командою розробки продукту на етапі UX проектування
UI та бізнес метрики для вимірювання ефективності інтерфейсів
Детальніше
Нагороди 6 нагород 4 номінації в UI/UX
рейтинги Профайл Evergreen — Clutch Рейтинг Evergreen — CMSMagazine Профайл Evergreen — Behance Всі Всі

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

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

UI дизайн (від англійського user interface, перекладається як інтерфейс користувача) - це те як інтерфейс виглядає зовні - кольори, композиція, типографіка - все що робить проект гарним і зручним для користування.

UX/UI дизайн — це комплексна розробка інтерфейсу продукту. Від постановки задачі до передачі матеріалів розробникам для перетворення прототипу в працюючий продукт.

Давайте докладніше зупинимося на кожному пункті:

Приклади прототипів
Чому UX/UI дизайн необхідний для бізнесу
UI/UX процесс у Evergreen
Коментарі до процесу
Тестування прототипів
Питання та відповіді

Приклади прототипів

Кабінет дилера для оптових закупівель

— Сайт агрохолдингу з системою для дистриб'юторів. В особистому кабінеті реалізовано взаємодію агрохолдингу з дистриб'юторами: відстеження плану продажів, оформлення заявок, перегляд асортименту і ін.

Кабінет дилера для оптових закупівель

Подивіться приклад прототипу кабінету оптовика

Подивитися

Інтерфейс системи розсилок

— Концепт прототипу системи e-mail розсилки з простим поетапним майстром створення першої розсилки. Ідея блочного редактора робить процес створення листа наочним і не вимагає ніякої верстки.

Інтерфейс системи розсилок

Подивіться приклад прототипу сервісу розсилок

Подивитися

Маркетинговий сервіс UX дизайн

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

Маркетинговий сервіс UX дизайн

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

Подивитися

Державний портал: редизайн

— Сайт Національного антикорупційного бюро України. Спроектований з урахуванням потреб потенційної цільової аудиторії - громадян і журналістів. Ключові завдання - можливість звернутися в НАБУ і стежити за діяльністю.

Державний портал: редизайн

Подивіться приклад прототипу державного порталу

Подивитися

Корпоративний сайт: UX прототип

— Сайт компанії, яка спеціалізується на розсилці e-mail і sms повідомлень. На прототипі зробили акцент на можливостях для бізнесу - показали шаблони і рішення які підприємці можуть застосувати в своєму бізнесі.

Корпоративний сайт: UX прототип

Подивіться приклад прототипу корпсайту

Подивитися

UX і UI адмінки інтернет магазину

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

UX і UI адмінки інтернет магазину

Подивіться приклад прототипу адмін-панелі (1 сторінка)

Подивитися

SaaS сервіс для кухарів (UX і UI дизайн)

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

SaaS сервіс для кухарів (UX і UI дизайн)

Подивіться приклад прототипу SaaS сервісу

Подивитися

Туристичний портал (UX прототип)

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

Туристичний портал (UX прототип)

Подивіться приклад прототипу портала туроператора

Подивитися

UX проектування інтернет магазину

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

UX проектування інтернет магазину

Подивіться приклад прототипу інтернет магазину

Подивитися

Мобільний додаток (UX дизайн)

— Мобільний додаток для саморозвитку. Розроблявся на Ionic Framework, тому в дизайні були використані компоненти фреймворка. Додаток прототипувався з урахуванням рекомендацій iOS і Android.

Мобільний додаток (UX дизайн)

Подивіться приклад прототипу мобільного додатка

Подивитися

Прототип агропорталу

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

Прототип агропорталу

Подивіться приклад прототипу агро порталу

Подивитися

Некомерційна організація (UX/UI прототип сайту)

— Проектування сайту некомерційної організації, яка представляє Європейську місію по боротьбі з корупцією. Основне завдання сайту - інформування про організацію, її цілі та діяльність в рамках місії.

Некомерційна організація (UX/UI прототип сайту)

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

Подивитися

Чому UX/UI дизайн необхідний для бізнесу

slogan-img

Гортайте, щоб побачити інші причини

  1. Запуск нового продукту. Коли є ідея зробити новий продукт або сервіс, першим етапом завжди є UX дизайн - створення прототипу проекту, а потім UI дизайн - робота над візуальним образом проекту. Це дозволяє повністю зрозуміти як буде виглядати проект і як він буде працювати.
  2. Повний редизайн існуючого продукту. Коли накопичилося безліч негативних відгуків або коли незручність продукту очевидно порівняно аналогів.   Процес редизайн проекту схожий на створення нового продукту тільки враховує переваги і поведінку поточних користувачів - повинен бути впізнаваним для постійних користувачів.
  3. Точкове поліпшення існуючого продукту. Іноді є необхідність переробити розділ сайту або додати новий функціонал в сервіс. Такі зміни проектуються з урахуванням поточної структури і дизайну проекту.
  4. Коли є нова певна група користувачів, яку хочеться привернути до користування продуктом, але існуючий інтерфейс очевидно занадто складний або незрозумілий для них
  1. Запуск нового продукту. Коли є ідея зробити новий продукт або сервіс, першим етапом завжди є UX дизайн - створення прототипу проекту, а потім UI дизайн - робота над візуальним образом проекту. Це дозволяє повністю зрозуміти як буде виглядати проект і як він буде працювати.
  2. Повний редизайн існуючого продукту. Коли накопичилося безліч негативних відгуків або коли незручність продукту очевидно порівняно аналогів.   Процес редизайн проекту схожий на створення нового продукту тільки враховує переваги і поведінку поточних користувачів - повинен бути впізнаваним для постійних користувачів.
  3. Точкове поліпшення існуючого продукту. Іноді є необхідність переробити розділ сайту або додати новий функціонал в сервіс. Такі зміни проектуються з урахуванням поточної структури і дизайну проекту.
  4. Коли є нова певна група користувачів, яку хочеться привернути до користування продуктом, але існуючий інтерфейс очевидно занадто складний або незрозумілий для них

75%

– підвищення виручки компаній, відомих як "design unicorns", які зробили ставку на високий рівень UX

UI/UX процесс у Evergreen

— обов'язкові етапи розробки

Аналітика

Мокап

Прототип

Тестування

UI UX дизайн: коментарі до процесу

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

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

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

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

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

Тестування прототипів

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

Навіщо потрібно тестування?

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

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

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

Що ми тестуємо?

Навігацію

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

Поведінку

Дивимося і аналізуємо дії користувача коли він виконує завдання. Зазвичай проводиться сценарне юзабіліті-тестування і тестування уваги (фокуса) користувача.

Сприйняття

Дозволяє переконатися що прототип проекту відповідає ментальній моделі користувача. Застосовується 5-ти секундний тест або порівняння двох варіантів.

Питання та відповіді

  • Можна зробити сервіс без UX

    Інтерфейсу без UX не існує, навіть якщо інтерфейс виконує одну функцію - це досвід взаємодії користувача. Завдання UX - зробити цей досвід взаємодії простим і зручним.

  • В UX не потрібно вкладати, ми і так знаємо як наш продукт повинен працювати.

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

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

  • Можна зробити сервіс без розробки UI на готовому шаблоні / темі

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

Ви хочете розробити UI UX дизайн продукту?

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