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

Группен прототипен: как сделать так,
чтобы ваши идеи были реализованы?

UIDesign Group: проектирование интерфейсов, юзабилити-консалтинг | www.uidesign.ru

Группен прототипен www.uidesign.ru

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

2


Задумали
Личный кабинет

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
заявку

3


Представили
Настройки Помощь

ЛОГО и контактная информация

Пользователь Иванов Иван Иванович Завершить сеанс

Личный кабинет Личный кабинет Иванова И.И. Печать

Счета
Карты
Депозиты
Суммарные данные
Кредиты (всего на счетах,
Список счетов, карт, депозитов, кредитов
зарезервировано,
Платежи и заявления (по каждому средству указан доступный остаток)
доступно,
Шаблоны и регулярные автоматически сформировано,
платежи выплаты по овердрафтам,...)
Адресная книга

Переписка с банком
Бонусы
Платежи Заявления Черновики
Создать перевод
между своими счетами
Создать рублевый
платеж
Создать валютный Курсы валют
платеж
Оплатить мобильный

Оплатить интернет
Оплатить
коммунальные услуги
Последние 20 платежей
Заблокировать карту
(без остатков на начало и конец периода)
Настроить уведомления
Все действия >>

Уведомления
о письмах из банка
Реклама опроса
или новых и редко
используемых
функций

Посмотреть все платежи Запросить выписку

4


Нарисовали

5


Реализовали!

6


А в реальности?

7


Причины?

Одна из причин – прототип был не
понят…

8


Потребители прототипов

Великолепная пятерка:

UX- Менеджер Маркетолог Дизайнер Программист
специалист

9


UX-специалист
А именно:
 юзабилити-инженер
 проектировщик
взаимодействия/дизайн
ер интерфейсов

10


UX-специалист
Его мотивы
 Получить на выходе то, что
задумывалось
 Как можно меньше времени и усилий
тратить на каждую итерацию
 Недвусмысленно передать сложные
интерфейсные решения
 Разделять работу между коллегами
 Иметь проверенные решения
11


Получить то, что задумывалось
Зависимость контроля от прилагаемых усилий

полный
контроль над
результатом

усилия ∞
12


Минимизация усилий
Зависимость количества коммуникаций от
детальности прототипов

коммуникации

детализация
13


Передача решений
Двухмерная структура детализации

готовый дизайн продукт

графический flash-прототип
детализация

прототип кликабельный
визуальная

прототип
html-прототип
программный
html-прототип
бумажный прототип Wizard of Oz

набросок раскадровка

степень
интерактивности Copyright © Fred Beecher

14


Разделение работы
Смешанная детализация
Главная Поиск работы Подбор персонала
Моя работа Статистика Построение карьеры Обучение Форум
Главное меню
Добавить вакансию | Детальный поиск | Фоторезюме | Список кадровых агентств | Реклама вакансий на сайте | Реклама вакансий в газете

Ключевые слова: Город: Раздел для поиска:
Найти!
Системный администратор любой Финансы и бухгалтерия

Поиск работы > Детальный поиск резюме > Главный бухгалтер

Подобрать: Спонсор раздела (как стать спонсором?)
По дате поступления:
за сегодня (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
Посмотреть подробное резюме | Предложить свою вакансию |
Отправить ссылку другу | Распечатать текст резюме

15


Проверка результата

Проверять можно на каждом этапе – от
тестирования концепции до тестирования готового
продукта

Но! – чем абстрактнее прототип, тем абстрактнее
комментарии.

На этапе концепции лучше всего отдельно
тестировать навигацию, отдельно экраны
16


Программист

© http://www.flickr.com/photos/doergn/

17


Программист
Мотивы
 Точно понимать, что именно нужно
реализовать
 Концентрируются на контроле
 Концентрируются на процессе
 Концентрироваться на исключительных
ситуациях
 Где возможно использовать повторный код
 Иметь контроль над изменениями
18


Что именно реализовать I

Любая недоговоренность в прототипе это снятие
с себя ответственности за часть интерфейсных
решений.

Программист отвечает за код. В конечном итоге,
он несет ответственность за все – наша задача
снять с него полную ответственность за
интерфейсные решения

19


Что именно реализовать II
Не нужно отрисовывать абсолютно все –
достаточно создать приложение с описанием
всех экранных объектов, которые встречаются в
интерфейсе

Используйте карту местности

Интерактивные прототипы помогают
продемонстрировать сложное взаимодействие,
но имеют свои недостатки

Раскадровки также помогают при демонстрации
сложных взаимодействий
20


Что именно реализовать III
Самый дешевый вариант

21


Исключительные ситуации

Программисты молча ждут от вас описания
исключительных ситуаций!

22


Повторный код

Программисты применят повторный код всегда,
когда это только возможно.

Указывайте, что паттерны являются типовыми или
же, наоборот, уникальными.

23


Маркетолог

24


Маркетолог
Мотивы
 Продать продукт (список функций)
 Сделать продукт внешне
привлекательным
 Концентрируются на мнениях и
предпочтениях
 Реализовывать стратегию
продвижения бренда

25


Список функций

Если маркетолог – важная птица, то нужен
документ, показывающий соответствие между
функциями и определенными местами в
прототипе или же документ, показывающий как
старый функционал реализован в новом виде
(миграция функционала)

26


Создание привлекательного прдукта
Главная страница проектируется в конце! Но для
маркетолога делается недо-главная страница
для отработки дизайна

27


Продвижение бренда
Специальным образом выделять зоны
брендирования

28


Дизайнер

29


Дизайнер
Мотивы
 Точно понять задание
 Создать запоминающийся продукт
 Улучшать свою репутацию
 Быть как можно меньше стесненным в
выразительных средствах
 Понимать границы творчества
 Реализовывать стратегию
продвижения бренда
30


Точное задание
Для минимизации усилий дизайнера дать ему
подборку ортогональных прототипов

Создать задание в виде спецификации на
графический стиль/пиктограммы

Решить, кто будет создавать визуальный
пиктографический язык! и будет за него
отвечать?

31


Понимать границы
Дать подробные требования к дизайну

Явным образом озвучить жесткие ограничения

Выстраивать продуктивные отношения

Хорошие дизайнеры вылавливают ваши ошибки

32


Менеджер

33


Менеджер
Мотивы
 Сформулировать задачу
 Уложиться в срок
 Получить запланированный результат
 Избежать раздутия проекта
 Иметь контроль над изменениями
 Разрешать конфликты вовремя и
предупреждать их
 Видеть проблему с разных сторон
34


Как уложиться в срок и получить
результат?
Этап концепции обязателен!

Подробный план с разбитием на очереди

Затраты на концепцию фиксированы, на деталку
приблизительны!

«Чем тяжелее идет концепция тем легче деталка»
А. Остапец
35


Контроль над изменениями
Выделение изменений в прототипе явным
образом

Мета-информация об изменениях

Уникальные идентификаторы крупных
конструкций для быстрого поиска

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

36


Интерфейс с разных
сторон/разрешение конфликтов

Создать междисциплинарную команду

Регулярно проводить мозговые штурмы!

37


Интерфейс с разных
сторон/разрешение конфликтов II

Вовлечь заказчика!

38


Мы сделали это!

39


Спасибо за внимание
С удовольствием ответим на Ваши вопросы

UIDesign Group: проектирование интерфейсов, юзабилити-консалтинг | www.uidesign.ru
40

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

Recommandé

Recommandé

Contenu connexe

Plus de UIDesign Group

Plus de UIDesign Group (20)

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