Ты дизайнер и задумывался над тем, как создать удобный, красивый и функциональный интерфейс? Давай-ка, дружок, поймём для начала, что является основой интерфейса. Конечно же, хорошая история. Убедительно рассказанная история — убедительный интерфейс. Так, что же такое история в интерфейсе? Почему надо её рассказывать? Как историю сделать убедительной? Как презентовать результат?

1. Проектирование историй
в интерфейсах
Все понимаем.
Поговорим?
Екатерина Юлина
Старший проектировщик интерфейсов
КБ «Собака Павлова»
yulina@pavlova.cc

2. АХТУНГ!!!
Бездушные интерфейсы

3. Я в них верю
Реальные люди
Контекст
Мотивы поведения
Факторы

4. Их опыт и
дизайн-
идеи
Эпизоды
События
Факты
Фразы
Эмоции
Мимика

5. Фокус
внимания
Цель понятна
Задачи ясны

6. Палка-
выручалка
Разработка
Презентация
Тестирование

7. Сторителлинг в
проектировании
интерфейсов
Как создавать истории, улучшающие дизайн
Уитни Ксенбери, Кеин Брокс

8. Сторителлинг

9. Use Case и прочие #простигосподи UML

10. Дизайн-процесс

11. Ошибки —
это нормально
Так вот ты какой,
здоровый
мазохизм! ;)

12. Книжки

13. «Успеваю или не успеваю?»
Приложение для водителей

14. Роли на проекте
Проектировщик
Проектирует, прототипирует
Аналитик
Собирает требования и данные
Менеджер
Управляет проектом, командой и заказчиком
Заказчик
Рассказывает про свое ИТ-хозяйство
Представитель ЦА
Знает, почем фунт лиха

15. #Многобуквие
Вопросы по проекту
Сущности в работе
Жизненные ситуации
Кейсы
Опросники
Анкеты
Объектно-информационные
модели

16. А? Что? Где?

17. Проектировщик — это
переводчик с русского на интерфейсный

18. Начать можно
с чего угодно
«Идите и делайте; вы всегда успеете
оправдаться позже».
Грейс Хоппер

19. Разбор контекста
использования
Появление первых
картинок
Еще не интерфейс,
но уже и не буквы

20. Обсуждение и новые вводные

21. Язык интерфейса
• Среда (web, mobile, терминалы, Smart TV)
• Платформа (iOS, Android, Windows)
• Гайдлайны и лэйауты
• Виджеты, кнопки, навигация, всплывашки, табы и т.д.
• Поведения и события элементов
• Визуальная подача (серые квадраты всем надоели)

22. Первый заход на интерфейс…
Главный экран
Режим навигатора

23. …ищем решения на бумаге…

24. …ищем решения на бумаге…

25. …создаем интерфейс
Главный экран убили,
появился экран Рейс

26. Не выходит
каменный цветок
Что делать?

28. Сюжетная линия
«Успеваю или не успеваю»

29. Фрагмент интерфейса
Но не то! Не то! Нужно другое решение!

30. «Дайте мне точку опоры —
и я переверну Землю!»
Архимед

31. Заметки
в блокноте
Где разместить
большую кнопку SOS?

34. Уже теплее

35. История про водителя
Водитель должен сообщить о прибытии на склад
загрузки, чтобы диспетчер понимал, успевает ли
водитель по графику.
(Персонаж) в (место) должен сделать (действие),
потому что (мотив).

36. История
вырисовывается
Что дальше?

37. Насыщение информацией

38. Все получилось!

39. История в картинках
Рассказ сценария картинками
Слайды с картинками приложения и рассказ истории залу

48. Заказчик
Рассказывает
про свое ИТ-хозяйство
Мне, честно, нравится
последний вариант, думаю,
пальцем в точку :-)
Обратная связь

49. Кайдзен
Слушайте
Наблюдайте
Визуализируйте
Спрашивайте
Фантазируйте
Говорите
Ошибайтесь

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

51. Спасибо ;)
Вопросы?

52. Как получить презентацию
Напиши сюда: yulina@pavlova.cc