Все что нужно знать про современный веб-дизайн
TRANSCRIPT
Все что нужно знать о -современном веб-дизайне-
Кто эти люди?-
Сергей Попков- Виталий Черемисинов-дизайн- аналитика-
Кто эти люди?-
Проектирование и дизайн финансовых сервисов и сложных интернет проектов.-
финансы ит госсектор -телеком туризм стартапы-
Кто эти люди?-
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-