UX, UI, prototype

1. КАК СДЕЛАТЬ ПРОТОТИП
Ирина Рыжова, UI/UX designer
22 марта 2014, Астрахань, IT-школа ЮФО

2. О чем поговорим?
• Зачем все это затевается?
• Опыт взаимодействия
• Прототипы, блок-схемы, наброски – все видовое
разнообразие
• От идеи к прототипам: персонажи и сценарии
• Секрет быстрого проектирования интерфейсов
• Инструменты создания блок-схем и прототипов
• Немного о посадочных страницах
• Рецепты успеха или как не сделать ошибку
2

3. 3
ГОЛОВНАЯ БОЛЬ ПОЛЬЗОВАТЕЛЕЙ

4. Кому нужно проектирование
интерфейсов – пользователям
• проще и удобнее работать с продуманным
приложением,
• а значит, они быстрее выполняют свои задачи
• и получают удовольствие
4

5. Кому нужно проектирование
интерфейсов – участникам проекта
• маркетологам проще продавать/продвигать продукт с удобным
интерфейсом
• программистам и дизайнерам вносить меньше изменений при
разработке и меньше времени тратить на поддержку продукта
• product owner проверить быстро и дешево идеи на ранней
стадии, где пока еще дешево внести изменения (в 100 раз
дешевле)
• ощутить повышение лояльности клиентов и увеличение
конверсии
• всем +1 к карме
5

6. UX ≠ Usability
Usability – удобство
использования
User Experience – опыт
взаимодействия как
«ощущение и реакция
человека, вследствие
использования»
6
UX
Usability

7. Формирование впечатлений
• Визуальный дизайн
• Проектирование взаимодействия
• Информационная архитектура
• Реализация
• Технология
• Контент
• Ожидания пользователей
• И еще много всего…
7

8. С чего начать? План действий
1. Создание персонажей
2. Описание сценариев
3. Создание карты переходов
4. Создание скетчей
5. Создание прототипов
8

9. Создание персонажей
9

10. Создание персонажей
10
Имя, возраст, пол,
внешность?
Образование, работа?
Семья? Привычки?
Любимые
сайты/приложения?
Цели? Контекст
взаимодействия?

11. Разберемся на примере
Дано: идея сайта-биржи мастеров (монтажники,
электрики, сантехники и пр.).
Одни смогут заявить о себе как о профессионале и
заработать денег, другие – получить качественный
ремонт
11

12. Создание персонажей. Пример
Кирилл, 32 года, Астрахань
Профессия: сантехник
Деятельность: руководит бригадой
Цели: найти больше выгодных заказов
Часто использует сайты: yandex.ru
Место взаимодействия: из дома, в дороге
Устройства: ноутбук, iPad
Платформа: iOs, MacOS
…
12

13. Создание персонажей. Пример
Василий Федорович, 65 лет,
Астрахань
Профессия: адвокат
Деятельность: пенсионер
Цели: отремонтировать ванную комнату
Часто использует сайты: Одноклассники
Место взаимодействия: из своей квартиры
Устройства: ноутбук
Платформа: Windows XP
…
13

14. Богатое воображение приводит к…
14

15. Создание персонажей. Выбор
основных персонажей
1. Выпишите все варианты без детализации
2. Сгруппируйте
3. Персонажей не более 5, если больше –
упрощайте идею или делайте несколько
продуктов
4. Выберите ключевой персонаж
15

16. Создание сценариев
1. Определите основные задачи
2. Одна задача – один сценарий
3. Завязка, развитие действия, кульминация и
финал: определите откуда пользователь
пришел, куда переходил, как добился цели,
на чем завершил задачу
16

17. Разберем пример
«Поиск бригады для ремонта в ванной»
1. В.Ф. попал на список бригад, автоматически выбран его город,
пришел из поисковой системы по соответствующему запросу
2. В.Ф. любитель посмотреть «все варианты», поэтому долистывает
весь список до конца, не использует фильтр
3. Решает оставить объявление, заполняет форму и нажимает кнопку
«Оставить объявление»
4. Попадает на страницу с регистрацией, вводит данные (логин, пароль,
телефон), нажимает «Зарегистрироваться»
5. Попадает на страницу с опубликованным объявлением, радостный
проверяет включен ли телефон
17

18. Карта переходов
• Учтены все сценарии – выписываем страницы
• Страницы названы адекватно
• Логичное размещение страниц
• Отсутствие повторяющихся страниц
18

19. Когда это все не нужно?
19

20. Когда это все не нужно?
20
• презентация идеи в виде
тестовой LP
• единственный персонаж
олицетворяете с собой
• «маленький» продукт

21. Называйте вещи своими именами
Sketch (cкетч) – первоначальный набросок от руки
Wireframe (блок-схема) – чертеж, представляющий
«скелет» страницы сайта или приложения
Prototype (прототип) – интерактивная модель для
тестирования концепции или процесса
Mockup (макет) – неработающая модель в
натуральную величину, выглядящая так, как будет
выглядеть работающий экземпляр
21

22. Создание набросков
22

23. Создание набросков
23
• Нужны бумага, карандаш и маркер/ручка/…
• Не тяните время, 5 минут на страницу
• Беспощадно отбрасывайте лишнее
• Не детализируйте! Дьявол в деталях
• Комментируйте
• Рисуйте все карандашом, главное выделите
маркером/ручкой/фломастером/…
• Прокачивайте навык рисования)

24. Создание набросков. Хитрости
24
Скетчпады – блокнот, разлинованный макетами
браузеров, смартфонов, планшетов

25. Создание набросков. Хитрости
25
Лекала. Для любителей делать все аккуратно

26. Создание набросков. Хитрости
26
Модели устройств для тестирования

27. Создание wireframe
27

28. Метод прогрессивному джипега
28

29. UI kit
29

30. Создание wireframe в Balsamiq
30
http://balsamiq.com/products/mockups/

31. Прототипы
31

32. Создание прототипов в Axure. От
wireframe до мокапов
32
http://www.axure.com/

33. Создание прототипов в Axure.
Интерактивность
33
http://www.axure.com/

34. Создание прототипов в Axure.
Коллективная работа
34
http://www.axure.com/

35. Создание прототипов мобильных
приложений. Prototyping On Paper
35

36. Посадочная страница
36

37. Посадочная страница
• страница входа
• лицо вашего продукта
• место получения лидов и продажи товаров,
услуг
37

38. Создайте первое впечатление
38

39. Сделайте акцент на одном
предложении
39

40. Максимально упростите навигацию
40

41. Качественный контент
41

42. Меньше обязательных полей
42

43. Не забудьте сказать «Спасибо!»
43

44. Тестирование
44

45. Список для UX-новобранца
Можете найти здесь:
http://uxastro.svbtle.com/uiux
А еще можете связаться со
мной:
irisharyzhova@yandex.ru
45