Группен Прототипен II

Группен прототипен II: как сделать так, чтобы ваши идеи были реализованы? Всемирный день юзабилити 2009, Москва UIDesign Group: проектирование интерфейсов, юзабилити-консалтинг | www.uidesign.ru

Группен прототипен II www.uidesign.ru О докладчике  Алексей Копылов – технический директор компании UIDesign Group  Область интересов – концептуальное проектирование пользовательских интерфейсов, новые формы взаимодействия 2

Группен прототипен II www.uidesign.ru Сначала помечтаем Как выглядит создание нового интерактивного продукта в идеале? 3

Группен прототипен II www.uidesign.ru Задумали Личный кабинет 1.1 Создать перевод Счета 2.1 6.1 между своими счетами Подробно о счете Подробно о счете 2.1.1 Создать рублевый Подробно о счете 6.2 платеж Карты 2.2 Создать валютный 6.3 платеж Подробно о счете Подробно о счете Оплатить Подробно о карте 2.2.1 6.4 мобильный Депозиты 2.3 6.5 Оплатить интернет Подробно о счете Подробно о Подробно о счете 2.3.1 Оплатить депозите 6.6 коммунальные услуги Депозитный 2.3.1.1 калькулятор 6.7 Заблокировать карту Кредиты 2.4 Настроить Подробно о счете 6.8 уведомления Подробно о Подробно о счете 2.4.1 кредите Кредитный 6.9 Остальные действия 2.4.1.1 калькулятор Платежи и 6.10 Получить выписку 3.1 заявления 6.11 Закрыть счет Подробно о счете Подробно о счете Категория платежей 3.1.1 6.12 Выпустить карту Шаблоны и Определенный платеж или Установить лимиты регулярные платежи 4.1 6.13 заявление по карте 3.1.1.1 Сгенерировать вирт. 6.14 Подробно о счете карту Подробно о счете 4.1.1 Категория платежей Перевести деньги с 6.27 карты другого банка Подробно о счете Определенный Подробно о счете 4.1.1.1 6.15 Открыть депозит шаблон Распорядиться Адресная книга 4.2 6.16 процентами депозита Подробно о счете 6.17 Пополнить депозит Подробно о счете 4.2.1 Адреса и реквизиты Служебные разделы 6.19 Закрыть депозит Переписка с банком 5.1 Настройки 7.1 Помощь Рассчитать 6.21 доходность депозита Подробно о счете Персональная 8.1 Подробно о счете 5.1.1 7.1.1 Подать заявку на Письмо информация 6.22 кредит Настройка 7.1.2 банкоматов Рассчитать 6.23 задолженность Настройка по кредиту 7.1.3 уведомлений 6.24 Погасить кредит Настройка 7.1.4 Системы Создать кассовую 6.26 заявку 4

Группен прототипен II www.uidesign.ru Вообразили Настройки Помощь ЛОГО и контактная информация Пользователь Иванов Иван Иванович Завершить сеанс Личный кабинет Личный кабинет Иванова И.И. Печать Счета Карты Депозиты Суммарные данные Кредиты (всего на счетах, Список счетов, карт, депозитов, кредитов зарезервировано, Платежи и заявления (по каждому средству указан доступный остаток) доступно, Шаблоны и регулярные автоматически сформировано, платежи выплаты по овердрафтам,...) Адресная книга Переписка с банком Бонусы Платежи Заявления Черновики Создать перевод между своими счетами Создать рублевый платеж Создать валютный Курсы валют платеж Оплатить мобильный Оплатить интернет Оплатить коммунальные услуги Последние 20 платежей Заблокировать карту (без остатков на начало и конец периода) Настроить уведомления Все действия >> Уведомления о письмах из банка Реклама опроса или новых и редко используемых функций Посмотреть все платежи Запросить выписку 5

Группен прототипен II www.uidesign.ru Нарисовали 6

Группен прототипен II www.uidesign.ru Реализовали! 7

Группен прототипен II www.uidesign.ru А в реальности? 8

Группен прототипен II www.uidesign.ru Причины? Одна из причин – прототип не был правильно понят участниками разработки… 9

Группен прототипен II www.uidesign.ru Потребители прототипов Великолепная пятерка: UX- Менеджер Маркетолог Дизайнер Программист специалист 10

Группен прототипен II www.uidesign.ru Потребитель: UX-специалист Юзабилити-инженер + Проектировщик взаимодействия/ дизайнер интерфейсов 11

Группен прототипен II www.uidesign.ru Потребитель: UX-специалист Мотивы  Получить на выходе то, что задумывалось  Тратить как можно меньше времени и усилий  Недвусмысленно передать сложные интерфейсные решения  Разделять работу между коллегами  Иметь проверенные решения 12

Группен прототипен II www.uidesign.ru Получить то, что задумывалось Зависимость контроля от прилагаемых усилий полный контроль над результатом усилия ∞ 13

Группен прототипен II www.uidesign.ru Минимизация усилий Зависимость количества коммуникаций от детальности прототипов коммуникации детализация 14

Группен прототипен II www.uidesign.ru Передача решений Двухмерная структура детализации готовый дизайн продукт графический flash-прототип детализация прототип кликабельный визуальная прототип html-прототип программный html-прототип бумажный прототип Wizard of Oz набросок раскадровка степень интерактивности Copyright © Fred Beecher 15

Группен прототипен II www.uidesign.ru Разделение работы I Смешанная (переменная) детализация Главная Поиск работы Подбор персонала Моя работа Статистика Построение карьеры Обучение Форум Главное меню Добавить вакансию | Детальный поиск | Фоторезюме | Список кадровых агентств | Реклама вакансий на сайте | Реклама вакансий в газете Ключевые слова: Город: Раздел для поиска: Найти! Системный администратор любой Финансы и бухгалтерия Поиск работы > Детальный поиск резюме > Главный бухгалтер Подобрать: Спонсор раздела (как стать спонсором?) По дате поступления: за сегодня (12) Кадровое агентство ТризаЭксклюзив за неделю (78) Мы работаем на российском рынке с 1991 года. Подбор все имеющиеся (123) ЛОГОТИП персонала – наша профессия По рубрикам: Сайт ТризаЭксклюзив | Вакансии ТризаЭксклюзив IT и телекоммуникации (25) финансы и бухгалтерия (98) топ-менеджмент (25) работа без спеециальной Результаты поиска резюме (128) фильтр подготовки (98) Страница 1 2 3 … 9 10 11 … 17 18 19 следующая По наличию: фотографиии (25) Вид краткий | полный Сортировка по дате | по зарплате развернутого резюме (98) Баннер 240х400 Системный администратор, от 34000 руб (13/06/2005 По опыту работы: без опыта 12:23) до 1 года О кандидате: мужчина, возраст 24 года, образование неполное до 3-х лет высшее, опыт работы 3 года, город Москва до 5 лет свыше 5 лет Профессиональные навыки: Монтаж LAN "с нуля",монтаж телефонной сети "с нуля",установка ПО все на рабочие станции,администрирование сети ,обслуживание оргтехники.Настройка роутера LAN / WAN,Wi-Fi,VPN. Контактное лицо: Маша Иванова (masha@buh.com) Тел: 321-0934, факс: 732-7432 Посмотреть подробное резюме | Предложить свою вакансию | Отправить ссылку другу | Распечатать текст резюме 16

Группен прототипен II www.uidesign.ru Разделение работы II Использовать онлайн инструменты протопирования 17

Группен прототипен II www.uidesign.ru Проверка результата Проверять можно на каждом этапе – от тестирования концепции до тестирования готового продукта Но! – чем абстрактнее прототип, тем абстрактнее комментарии. На этапе концепции можно тестировать навигацию 18

Группен прототипен II www.uidesign.ru Потребитель: Программист © http://www.flickr.com/photos/doergn/ 19

Группен прототипен II www.uidesign.ru Потребитель: Программист Мотивы  Точно понимать, что именно нужно реализовать  Знать, что делать в исключительных ситуациях  Использовать повторный код  Иметь контроль над изменениями 20

Группен прототипен II www.uidesign.ru Что именно нужно реализовать I Любая недоговоренность в прототипе это снятие с себя ответственности за часть интерфейсных решений. Программист отвечает за код. В конечном итоге, он несет ответственность за все – наша задача снять с него ответственность за интерфейсные решения 21

Группен прототипен II www.uidesign.ru Что именно нужно реализовать II Документ-приложение помогает описать неочевидные моменты в интерфейсе Интерактивные прототипы и раскадровки помогают продемонстрировать сложное взаимодействие Использовать специальный визуальный язык описания прототипов Карта местности помогает понять место конкретного контекста в интерфейсе 22

Группен прототипен II www.uidesign.ru Что именно нужно реализовать III Самый дешевый вариант 23

Группен прототипен II www.uidesign.ru Что именно нужно реализовать IV Визуальный язык описания прототипа позволяет полнее контролировать результат шапка колонка 1 контент колонка 2 200 120 - 180 720 - 1600 24

Группен прототипен II www.uidesign.ru Исключительные ситуации Не забудьте описать исключительные ситуации в интерфейсе – богатый источник отсебятины для программистов 25

Группен прототипен II www.uidesign.ru Повторный код Программисты применяют повторный код всегда, когда это только возможно. Указывайте, что паттерны являются типовыми или же, наоборот, уникальными. 26

Группен прототипен II www.uidesign.ru Потребитель: Маркетолог 27

Группен прототипен II www.uidesign.ru Потребитель: Маркетолог Мотивы  Продать продукт (список функций)  Сделать продукт внешне привлекательным  Реализовывать стратегию продвижения бренда 28

Группен прототипен II www.uidesign.ru Список функций I Если маркетолог – важная птица, то нужен документ, показывающий соответствие между списком функций и пользовательским интерфейсом 29

Группен прототипен II www.uidesign.ru Список функций II Персонажи позволяют навести мостики с маркетологами, и облегчить обоснование интерфейсных решений 30

Группен прототипен II www.uidesign.ru Создание привлекательного продукта Главную страницу (экран) нужно проектировать в конце. Для маркетолога делается суррогатная главная страница для отработки дизайна Вместо главной страницы лучше использовать самую навороченную 31

Группен прототипен II www.uidesign.ru Продвижение бренда Специальным образом выделять зоны брендирования Указывать точные значения шрифтов и цветов, соответствующих гайдлайну 32

Группен прототипен II www.uidesign.ru Потребитель: Дизайнер 33

Группен прототипен II www.uidesign.ru Потребитель: Дизайнер Мотивы  Точно понять задание  Создать запоминающийся продукт  Знать границы творчества  Реализовывать стратегию продвижения бренда 34

Группен прототипен II www.uidesign.ru Точное задание Дать дизайнеру подборку ортогональных прототипов (для минимизации усилий) Создать спецификацию на графический стиль/пиктограммы Дать подробные требования к дизайну (+язык описания прототипов) Решить, кто будет создавать визуальный пиктографический язык, и кто будет за него отвечать? 35

Группен прототипен II www.uidesign.ru Знать границы Явным образом озвучить жесткие ограничения Использовать «дикие» цвета Выстраивать продуктивные отношения шапка колонка 1 контент колонка 2 200 120 - 180 720 - 1600 36

Группен прототипен II www.uidesign.ru Потребитель: Менеджер 37

Группен прототипен II www.uidesign.ru Потребитель: Менеджер Мотивы  Уложиться в срок  Получить запланированный результат  Избежать раздутия проекта  Иметь контроль над изменениями  Разрешать конфликты вовремя и предупреждать их  Видеть проблему с разных сторон 38

Группен прототипен II www.uidesign.ru Как уложиться в срок и получить результат? Этап концепции обязателен! Подробный план с разбитием на очереди «Чем тяжелее идет концепция тем легче деталка» А. Остапец 39

Группен прототипен II www.uidesign.ru Контроль над изменениями Выделение изменений в прототипе явным образом Мета-информация об изменениях Уникальные идентификаторы крупных конструкций для быстрого поиска Интегрированные средства коммуникации 40

Группен прототипен II www.uidesign.ru Контроль над изменениями: ID для контекстов 41

Группен прототипен II www.uidesign.ru Интерфейс с разных сторон/разрешение конфликтов Создать междисциплинарную команду Регулярно проводить мозговые штурмы! 42

Группен прототипен II www.uidesign.ru Интерфейс с разных сторон/разрешение конфликтов II И самое главное: – вовлечь заказчика! (с) 2009 - www.flickr.com/photos/tambovskiy_volk 43

Группен прототипен II www.uidesign.ru Мы сделали это! 44

Группен прототипен II www.uidesign.ru Спасибо за внимание С удовольствием отвечу на Ваши вопросы UIDesign Group: проектирование интерфейсов, юзабилити-консалтинг | www.uidesign.ru 45

http://www.jvetrau.com	227
http://feeds.feedburner.com	53
http://www.boobox.ru	19
http://gridread.dev	1

Группен Прототипен II

by UIDesign Group on Nov 18, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

4 Embeds 300

Statistics

Группен Прототипен II — Presentation Transcript