В каком виде передавать информацию проектировщику? Теряется ли информация при передаче от аналитика к проектировщику? Как минимизировать потерю информации и как достичь согласия и взаимопонимания в UX-команде? Как перестать бояться чистого листа? Какое влияние на весь процесс оказывает системный подход и дизайн-мышление?

1. От слов к делу:
как перейти от анализа к проектированию интерфейса
Все понимаем.
Поговорим?
Екатерина Юлина
Старший проектировщик интерфейсов
КБ «Собака Павлова»

3. Концептуальное
проектирование —
часть дизайн-процесса

4. Аналитик передал многобукв
А что с этим делать?
Business Model Canvas
Персонажи Impact Map
Сценарии использования
Анализ конкурентов
Объектно-информационная модель
Customer Journey Map
Обоснование проекта Ожидания

6. Информации никогда
не бывает достаточно
Сколько вам потребуется составить портретов
пользователей, чтобы собрать Звезду Смерти?

7. Проектирование — это решение задачи
Задача с кучей неизвестных, константами и пренебрежительно малыми величинами
ИМХО
Интерфейс — это система
Можно начинать откуда угодно
Первые эскизы архиважны!!!
Повод начать разговор
«А что если?»
Увлекательная игра, в которую можно играть до бесконечности
Ошибки — это нормально
«Я не потерпел неудачу. Я уже нашел 10 000 способов, которые не работают» (с)
Т. Эдисон

8. Brainstorm и лучшие умы бюро

9. Как мы мыслим
Информационный мусор
Освобождаем голову от очевидностей и банальностей
Моделируем и детализируем сценарии
Игровые ситуации: дьявол кроется в деталях
Визуализируем идеи
Скетчи на доске, в блокноте, салфетках, стикеры, бумажные прототипы и <td> </td>
Альтернативы
Рассматриваются диаметрально противоположные варианты (современно — старомодно,
инновационно — традиционно)

10. Визуализируем идеи

14. Главное — найти точку опоры

15. Инструментарий
proto.io

16. Белый лист: опять за рыбу деньги!
Что делать-то будем?

17. Создать сетку
Для какого устройства интерфейс? Какие размеры? Количество колонок?
С чего начать
Организовать «дерево» системы
Создать страницы (логическая структура), зона отстойника
Крупными мазками по холсту
Шапка, мастхэв-элементы, логотип и т.д.
Зарисовать то, что известно
На этом шаге создаются какие-то серые недетализированные блоки
Добавить в прототип
осмысленность
Размеры и формы элементов, добавление поведения и событий

18. Концепт-прототипы

19. Концепт-прототипы

20. Обсуждение внутри
команды
То, не то?
Размер «зоны покрытия»?
Что еще можно показать?
↓
Одобрение от «генштаба»
↓
Презентация заказчику

21. Concept #1
не принят
Что дальше?

22. Круг шаблонов
сузился
Мы уже знаем один неработающий вариант

23. Начинаем сначала
brainstorm & rapid prototyping

24. Concept #2
принят
Что дальше?

25. Детализизация
прототипа
Но это уже совсем другая история…

26. Методологии
• Дизайн-мышление
• Думай как дизайнер / Ж. Лидтка, Т. Огилви
• Дизайн-мышление в бизнесе / Тим Браун
• http://www.youtube.com/watch?v=_yEgrW9GeqQ
• ТРИЗ
• http://www.youtube.com/watch?v=ah4Dhcqurkc
• http://goo.gl/i7HJlO
• User-Centered Design
• Д. Норман, А. Купер, Я. Нильсен, В. Папанек и др.

27. Спасибо
за внимание!