Все что нужно знать про современный веб-дизайн

Все что нужно знать о -современном веб-дизайне-

Кто эти люди?-

Сергей Попков- Виталий Черемисинов-дизайн- аналитика-

Кто эти люди?-

Проектирование и дизайн финансовых сервисов и сложных интернет проектов.-

финансы ит госсектор -телеком туризм стартапы-

Кто эти люди?-

50+- 15- 200+-сотрудников- лет опыта- проектов-

Умный дизайн и точка.-

Тинькофф-

Битрикс24-

Портал госуслуг-

И еще -масса интересного-www.aic.ru-

Тренды-

1. Material design -

2. Watch UI -

3. Еще проще и больше-

4. Карточки-

5. Лонгриды и сторителлинг-

6. Анимация-

7. Диетический гамбургер-

8. Отказ от фотографий-

Вернемся в реальность-

Закат эпохи -классического веб-дизайна-

Тени-Орнаменты-Коллажи- Фотобанки-

Новые возможности-

Photoshop vs. Sketch-

Visual Frameworks-

Icons Sets-

Шаблоны и готовые решения-

Как теперь думает дизайнер?-

•  простая идея-

•  логика-

•  легкое восприятие-

•  меньше вкусовщины, значит

быстрее-

КРАСОТА ЭТО — -

Как теперь думает заказчик?-

•  конверсия-

•  конверсия-

•  конверсия-

•  меньше вкусовщины, значит

дешевле-

КРАСОТА ЭТО — -

Реальность-•  Простая идея-

•  Правки, правки,

правки-

•  Низкая конверсия-

•  Долго, дорого …-

Реальность-

ЗАКАЗЧИКИ- ДИЗАЙНЕР-

أنـا ال أفـهـمـك

我不懂你

أنـا ال أفـهـمـكأنـا ال أفـهـمـك

Современный-процесс -по созданию-дизайна-

Аудит- Аналитика- Проектирование-

Дизайн- Тестирование- Петля улучшений-

Формируем новый процесс-

Учимся понимать-

Потребность- Дизайн-

Аудит-

Аналитика-

Проектирование-

Косметика-

Тестирование-

Улучшение-

ЗАКАЗЧИК-

Больше смысла-

•  Больше этапов-

•  Корректировка целей и задач заказчика -

•  Вовлечение заказчика с правильной стороны -

•  Снижение рисков-

Эволюция ролей-

ДИЗАЙНЕР- СУПЕРМЕН-

?-

Эволюция ролей-

ДИЗАЙНЕР-

ДИЗАЙНЕР-

ПРОЕКТИРОВЩИК-

АНАЛИТИК-

=

Эволюция ролей-

ДИЗАЙНЕР-

=

КРАСИВАЯ КАРТИНКА-

БЫЛО-

Эволюция ролей-

ДИЗАЙНЕР-

=КОНВЕРСИЯ-

СНИЖЕНИЕ ИЗДЕРЖЕК-

МНОГОКАНАЛЬНОСТЬ-

CRO, ROI, LTV -

ПЕРСОНАЛИЗАЦИЯ-

И Т. Д. -

СТАЛО-

LTV-

О чем все это?-

UI/UX Strategy-GUI-

CJM-IA- WA-

CTA-

•  Особенности целевой аудитории-

•  Какие основные косты терпит компания при работе-с пользователями-

•  Структура работы компании-

•  Как проходит цикл обработки клиента-

•  Какие есть технические и иные ограничения-

ЧТО НЕОБХОДИМО УЗНАТЬ? -Аудит-

Аудит

ЧЕРЕЗ СИСТЕМЫ АНАЛИТИКИ-Аналитика-

•  Конверсионные/навигационные воронки-

•  IN page данные-

•  Места и причины ухода-

•  CRO,ROI и т. п.-

•  Ошибки, которые возникают у пользователей-в момент взаимодействия-

ЧЕРЕЗ ОЧНЫЕ/ДИСТАНЦИОННЫЕ ИССЛЕДОВАНИЯ-Аналитика-

•  Интервью с пользователями-

•  Аудит особенностей работы с проектом-

•  Основные ошибки и барьеры-

•  Точки и причина ухода-

•  Отзывы и пожелания-

ПОРТРЕТЫ ЦЕЛЕВЫХ ПОЛЬЗОВАТЕЛЕЙ-Аналитика-

ПОРТРЕТЫ ЦЕЛЕВЫХ ПОЛЬЗОВАТЕЛЕЙ-Аналитика-

ПОРТРЕТЫ ЦЕЛЕВЫХ ПОЛЬЗОВАТЕЛЕЙ-Аналитика-

ПОРТРЕТЫ ЦЕЛЕВЫХ ПОЛЬЗОВАТЕЛЕЙ-Аналитика-

ПОРТРЕТЫ ЦЕЛЕВЫХ ПОЛЬЗОВАТЕЛЕЙ-Аналитика-

КЕЙС «ИНТЕРНЕТ-ПРОВАЙДЕР» -Аналитика-

•  Использование количественных данных-

•  Использование качественных данных-

Акценты на главной странице-

ИСПОЛЬЗОВАНИЕ КОЛИЧЕСТВЕННЫХ ДАННЫХ-

Аналитика-

Аналитика этапа подключения услуги-

ИСПОЛЬЗОВАНИЕ КОЛИЧЕСТВЕННЫХ ДАННЫХ-

Аналитика-

Аналитика этапа подключения услуги-

ИСПОЛЬЗОВАНИЕ КОЛИЧЕСТВЕННЫХ ДАННЫХ-

Аналитика-

Ошибки на этапе-подключения-

ИСПОЛЬЗОВАНИЕ КОЛИЧЕСТВЕННЫХ ДАННЫХ-

Аналитика-

Визуальные-акценты-

ИСПОЛЬЗОВАНИЕ КОЛИЧЕСТВЕННЫХ ДАННЫХ-

Аналитика-

Пример карточек и скриннера-

ИСПОЛЬЗОВАНИЕ КАЧЕСТВЕННЫХ ДАННЫХ-

Аналитика-

ИТОГИ-

Аналитика-

НЕ ТОЛЬКО РАБОТА В AXURE -Проектирование-

•  Разработка информационной архитектуры-

•  Разработка сценариев поведения-

•  Разработка навигационных диаграмм и CJM-

•  Разработка интерактивных прототипов-

•  Тестирование прототипов-

КЕЙС «ИНТЕРНЕТ-БАНК» -Проектирование-

•  Прорабатываем гипотезы, которые хотим проверить-

•  Предлагаем пользователям выполнить основные действия и пройти основные навигационные сценарии на прототипе.-

•  Каждыи клик или движение мышки мы контролируем через аналитические инструмент-

ПРОГРЕСС ВЫПОЛНЕНИЯ ЗАДАНИЯ И БАРЬЕРЫ -

Проектирование-

НАВИГАЦИОННЫЕ ЦЕПОЧКИ -

Проектирование-

ВЗАИМОДЕИСТВИЕ -

Проектирование-

ЕЩЕ ЧУТЬ-ЧУТЬ … -Дизайн-

•  Подготовка референс-листов (и вот они тренды)*

•  Разработка «дизайн-концепции»-

•  Разработка файлов стилей (GUI)-

•  Технический дизайн или выбор готового framework-

•  Front-end-

Дизайн-

Дизайн-

Тестирование-

•  A/B тестирования-

•  MVT тестрования-

•  Очные и удаленные юзабилити-тестирования-

Тестирование-

+50%

Тестирование-

+17%

Тестирование-

+52%

Спасибо!-www.facebook.com/aic.ru-