UX без болю Як проектувати для реальних задач?

Євген Шилов

Ex Junior Strategist

Head of Digital

UX/UI Designer eugeneshylov.com

eugeneshylov.com

evgen.shylov@gmail.comUX/UI Designer

Концепція продукту

Дизайн взаємодії

Дизайн графічного інтерфейсу

Стратегія

Продуктовий менеджмент

Інформаційна архітектура

Ідея

Задачі бізнесу і юзера

Портрет користувача

Карта цілей

Мапа сайту

Сценарій взаємодії

Матриця функціональних елементів

Вайрфреймінг

Прототипування

Тестування

Hi-Fi Prototype

Interactions

Mockups

UI

Анімація

Фреймворк

Витрати Дохід

Користь Відношення

(RTB, point of love)

Точки контакту у реальному світі

Користувачі Задачі

Компоненти

Учасники

(Stakeholders)

Концепція

ПЕРСОНА

КОРИСТУЄТЬСЯ ВАШИМ ПРОДУКТОМ

З ТІЄЇ ПРИЧИНИ, ЩО

В МОМЕНТ

И ОЧІКУЄ

… ім’я та соціальний тип …

… мотивація персони …

… коли і де …

… ціль персони …

ЗАДАЧІ

ПОПЕРЕДНІЙ ДОСВІД

ДЕМОГРАФІЯ

ФУНКЦІЇ

СКЛАДНІСТЬ

ЕСТЕТИКА

Сценарій взаємодії описує один можливий шлях,

який користувач здійснює для досягнення однієї цілі.

Одні й ті ж люди різні в різних ситуаціях

…і на різних стадіях користування продуктом

BrowsingSearching Discovery

Точка входу Вирішена задача

Точка входу Вирішена задача

Точка входу

Вирішена задача

Точка входу

Вирішена задача

UX починається до початку взаємодії

і не закінчується в принципі ніколи

Люди приходять до вас з певним багажем знань

і йдуть з тим — який ви їм дасте.

UX дуже складно змінити кардинально.

Facebook Connect

Pop-up Form

Video Player

Video Player - Votes

Homepage

Login user

Що варто знати для створення

ефективної інформаційної архітектури?

Бізнес Контент

КористувачІнформаційна архітектура

— Суть бізнесу

— Місія, політика, культура (для великих проектів)

— Очікування перед ЦА

Бізнес

— Структура і наповнення майбутнього продукту

— Повний об’єм інформації, закладеної у проект

— Меседжі, які бізнес транслює аудиторії

Контент

— Персони, етнографія, потреби

— Умови і контекст користування

— Яку проблему користувача вирішуємо?

— Які задачі ми ставимо перед користувачем?

— Які очікування формуємо?

— Які очікування має сам користувач?

Користувач

Інформаційна

архітектура

сайту з 6 сторінок

Wire + Frame

Чорнові Детальні

ЩО?

Основні групи контенту

ДЕ?

Структура інформації

ЯК?

Інтерфейсна взаємодія

Що не так з вайрфреймами?

Статичні

Потребують документування

Складно тестувати

Погано продають

Прототип

Для чого прототипувати?

Спроектувати взаємодію

Протестувати її

«Продати» ідею розробникам

Mock-up

Анімація

UX UI

TInformation Architecture

UX

Visual Design

MInformation Architecture

UX

Visual Design

Interviewing Animation

З чого почати?

– формалізуйте проблему

– дізнайтесь для кого ви проектуєте

– look for best practices

– випишіть обмеження

З . А . П . Я . Т . А . Я

З А П Я Т А Я

Яку задачу вирішує сайту / продукт?

Аналіз бізнесу: категорія, ЦА, конкуренти, прибуток

Потребитель: аналіз ЦА, персони

Аналіз бізнесу: категорія, ЦА, конкуренти, прибуток

Технології: HTML + CSS + JS. Здатність до масштабування.

Action: Чіткий Call-to-Action.

Я: коротко про себе, контакти.

Один сервіс = = одна задача

Omnigraffle XMind

Визначити проблему з реального життя і спроектувати

концепцію сервісу, яка б її вирішувала.

Практика

ПЕРСОНА

КОРИСТУЄТЬСЯ ВАШИМ ПРОДУКТОМ

З ТІЄЇ ПРИЧИНИ, ЩО

В МОМЕНТ

И ОЧІКУЄ

… Олег, 36 років, редактор новин …

… хоче придбати унікальний відео-контент …

… коли готує випуск, а потрібного футажа нема під рукою …

… за недорого придбати права на використання футажа …

Посередник між фрілансерами і компаніями, які ці відео купують. Телеканалам не треба

розпорошувати свої знімальні групи, а можна прибати футаж який їх цікавить у локальних

операторів (фрілансери зі своїми камерами, або навіть телефонами).

Витрати Дохід

Користь Відношення (RTB, point of love)

Точки контакту у реальному світі

Користувачі Задачі

Компоненти

Учасники

(Stakeholders)

“Witness”

Оператор — ім’я, рейтинги, портфоліо, гроші. Сервіс доступу.

Редактор-міжнародник, і регіональних новин.

Може зробити унікальний контент. Можливість вибору, альтернатива Ройтерс.

Замовити відео та технічні харктеристики.

Футажі — відеосток.

Оператор — додаток, де зливає. Сайт — для обох. Телекритика, суспільні видання. Галузеві тусовки.

Унікальність, кастом контент.

Фрілансери, Редактори.

Продаємо відео, яке зняв фрілансер телеканалу. Приймаємо замовлення на унікальний контент ща роялті.

Надави можливість продавати та купувати унікальний контент.

Команда

Розробка, технічна підтримка, реклама для фрілансерів, юридичний супровід.

Сайт + додаток

ПЕРСОНА

КОРИСТУЄТЬСЯ ВАШИМ ПРОДУКТОМ

З ТІЄЇ ПРИЧИНИ, ЩО

В МОМЕНТ

И ОЧІКУЄ

… Соня, 40 лет, кошатница …

… хоче віддати кошенят …

… коли в її житті стало забагато кошенят …

… що вона їх віддасть/продасть …

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

та фізичними особами.

Витрати Дохід

Користь Відношення (RTB, point of love)

Точки контакту у реальному світі

Користувачі Задачі

Компоненти

Учасники

(Stakeholders)

«Купи слона»

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

Унікальність, кастом контент.

Ті, хто хочуть взяти тварину.

З реклама зоомагазинів.

Надави можливість продавати та купувати унікальний контент.

Команда проекту, Інвестори

Моб, сайт. Сайти волонтерських організацій,

На сайт на додаток