От слов к делу:как перейти от анализа к проектированию интерфейса

Все понимаем. Поговорим?

Екатерина ЮлинаСтарший проектировщик интерфейсов КБ «Собака Павлова»

Концептуальное проектирование —

часть дизайн-процесса

Аналитик передал многобукв

А что с этим делать?

Business Model Canvas

Персонажи Impact Map

Сценарии использования

Анализ конкурентов

Объектно-информационная модель

Customer Journey Map

Обоснование проекта Ожидания

Информации никогда не бывает достаточно

Сколько вам потребуется составить портретов пользователей, чтобы собрать Звезду Смерти?

Проектирование — это решение задачи Задача с кучей неизвестных, константами и пренебрежительно малыми величинами

ИМХО

Интерфейс — это система Можно начинать откуда угодно

Первые эскизы архиважны!!! Повод начать разговор

«А что если?» Увлекательная игра, в которую можно играть до бесконечности

Ошибки — это нормально «Я не потерпел неудачу. Я уже нашел 10 000 способов, которые не работают» (с) Т. Эдисон

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

Как мы мыслимИнформационный мусор Освобождаем голову от очевидностей и банальностей

Моделируем и детализируем сценарии Игровые ситуации: дьявол кроется в деталях

Визуализируем идеи Скетчи на доске, в блокноте, салфетках, стикеры, бумажные прототипы и <td> </td>

Альтернативы Рассматриваются диаметрально противоположные варианты (современно — старомодно, инновационно — традиционно)

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

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

Инструментарий

proto.io

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

Создать сетку Для какого устройства интерфейс? Какие размеры? Количество колонок?

С чего начать

Организовать «дерево» системы Создать страницы (логическая структура), зона отстойника

Крупными мазками по холсту Шапка, мастхэв-элементы, логотип и т.д.

Зарисовать то, что известно На этом шаге создаются какие-то серые недетализированные блоки

Добавить в прототип осмысленность Размеры и формы элементов, добавление поведения и событий

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

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

Обсуждение внутри команды

То, не то? Размер «зоны покрытия»? Что еще можно показать?

↓ Одобрение от «генштаба»

↓ Презентация заказчику

Concept #1не принят

Что дальше?

Круг шаблонов сузился

Мы уже знаем один неработающий вариант

Начинаем сначала

brainstorm & rapid prototyping

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

Детализизацияпрототипа

Но это уже совсем другая история…

Методологии• Дизайн-мышление

• Думай как дизайнер / Ж. Лидтка, Т. Огилви

• Дизайн-мышление в бизнесе / Тим Браун

• http://www.youtube.com/watch?v=_yEgrW9GeqQ

• ТРИЗ

• http://www.youtube.com/watch?v=ah4Dhcqurkc

• http://goo.gl/i7HJlO

• User-Centered Design

• Д. Норман, А. Купер, Я. Нильсен, В. Папанек и др.

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