Курс проектирования интерфейсов (2014)

Transcript

1. Проектируем сайт
2. Процесс
3. Сегменты Целевая аудитория Персоны Сценарии Требования Каналы Входы Выходы Метрики Цели сайта Цели бизнеса Требования
4. Интерфейс Хотелки Сегменты Целевая аудитория Персоны Сценарии Требования Каналы Входы Выходы Метрики Цели сайта Цели бизнеса Требования
5. «Черный ящик» AIDA(S) «Главные вопросы» Сегментация по шкалам Пирамида потребностей «Барьер» Дом-модель Прототипы Тестирование Главный экран «Если, То, Благодаря» Контент-план Основные метрики юзабилити action-plan Кликабельные прототип customer journey map Бизнес-модель Ограничения и требования Сегменты Целевая аудитория Персоны Сценарии Требования Каналы Входы Выходы Метрики Цели сайта Цели бизнеса Требования
6. На выходе – интерфейс 1.Навигация 2.Сценарии и их визуализация на схеме 3.Компоновка ключевых экранов (прототип) 4.Контент-план 5.Требования к функциональности 6.Оформление
9. Постановка
10. Черный ящик
11. Вход и выход [вход] В чем проблема и сомнения пользователя? Что он хочет услышать? 
 
 Какие цели у бизнеса? Какой пользы мы хотим добиться? [выход]
12. Вход и выход [вход] В чем проблема и сомнения пользователя? Что он хочет услышать? Никому не интересно, что предприятие хочет рассказать. Наша задача понять, что хочет узнать целевой пользователь Какие цели у бизнеса? Какой пользы мы хотим добиться? [выход]
13. В чем ваша выгода? Чем вы торгуете? Кто ваш клиент?
15. Что у вас за продукт? Всего понемногу Чем вы на самом деле торгуете? Товаром
 Почему его покупают именно у вас? Ничем не лучше, мы такие же, как все
16. Что у вас за продукт? Всего понемногу Чем вы на самом деле торгуете? Товаром
 Почему его покупают именно у вас? Ничем не лучше, мы такие же, как все всегда есть преимущество
17. Что у вас за продукт? Дешевые пляжные туры Чем вы на самом деле торгуете? Эмоциями
 Спокойствием во время отдыха Почему его покупают именно у вас? У нас действительно толковые продавцы
 Мы по-человечески относимся к людям во время продажи и отдыха
18. Что у вас за продукт? Продаем оригинальные запчасти ВАЗ оптовикам Чем вы на самом деле торгуете? Лояльностью клиентов
 Маржой Отсутствием геморроя с поставками Почему его покупают именно у вас? Маржа выше Качество стабильное Поставки в предсказуемые сроки
19. Что у вас за продукт? Про это рассказывают все, потому что такая информация уже есть в наличии Чем вы на самом деле торгуете? 
 Почему его покупают именно у вас?
20. Что у вас за продукт? Про это рассказывают все, потому что такая информация уже есть в наличии Чем вы на самом деле торгуете? А вот это на самом деле интересует клиента
 Почему его покупают именно у вас? И вот это тоже
21. В чем ваша выгода? Что у вас за продукт? Чем вы на самом деле торгуете? Кто ваш клиент? Где вы его будете искать? Почему покупают именно у вас?
22. Персонаж = клиент
23. Целевая аудитория Цели и задачи аудитории Контекст Персонажи Сценарии Требования
24. Сегменты
25. Вопросы
 Кто наши пользователи, и что они делают с системой?
 Сколько их? И чем они друг от друга отличаются в поведении? Методики
 Анализ конкурентов, интервью с пользователями, наблюдения за пользователями, фокус-группы Результат
 Отчет с общими характеристиками ЦА Первичный анализ аудитории
26. Нас интересуют те пользователи, которые ведут себя 
 при взаимодействии с нашим продуктом особенным образом и способны принести максимум выгоды бизнесу через интернет
27. Вопросы
 В чем разница между пользователями? Какие у них особенности в поведении, позволяющие выделить группы? Результат
 Черновое описание целевых групп Выделение групп
28. Какие 3 вопроса надо задать человеку, чтобы понять, что это наш клиент? Выделение групп
29. Выделяем важные для целевой группы параметры при решении типичных задач в заданном контексте
 
 Активность, Возраст, Опыт использования интерфейса, Страсть к приключениям, Готовность тратить деньги на развлечения 1 переменная = 1 шкала
 Для каждой шкалы задаем размерность. 
 Например: много/средне/меньше среднего/мало/нет На каждой шкале будет по нескольку точек – переменных для каждой целевой группы Выделение персонажей
30. Персонажи
31. Как выделять персону Сбор данных Интервью: просто поговорите с вашими пользователями о том, какие у них проблемы, и как они их решают. Или спросите продавцов про это Опрос: после этого можно составить опросник. Цель – выделить пересекающиеся контексты и проблемы пользователей, и на их основании разбить аудиторию Наблюдение: если есть возможность, понаблюдайте за тем, как пользователи взаимодействуют с вашим (или аналогичным) сайтом или услугой Что узнаем: 1. Кто наши пользователи 2. Цели и задачи наших пользователей 3. Контекст будущего использования нашего сайта 4. Ключевые и второстепенные персоны
32. Зачем нужны персонажи 1.Персонаж = контейнер для требований 2.Помогает синхронизировать видение команды 3.Команда достоверней предсказывает проблемы и поведение посетителей 4.Помогает принимать решения на разных стадиях проекта
33. Персонаж 1. Особенности персонажа 2. Имя и фото 3. Где работает, где живет, чем увлекается, 
 сколько лет 4. История (как возникла проблема) 5. Цель (что сейчас хочу получить в итоге) 6. Опыт использования интерфейса 7. Функция персонажа в экологии продукта
34. Какие проблемы решают персонажи 1. Помогают удерживать фокус на главном и не 
 увлекаться фичами 2. Решают проблему «Резинового среднего 
 юзера» 3. Решают проблему эгоцентричного «Мне так 
 удобно» дизайна 4. Помогают расставить приоритеты в 
 разработке и не тратить время на редкие 
 исключения
35. Сценарии и требования
36. Цели пользователей
37. Цель и задачи человека Цель — это то, ради чего он вообще действует. Желаемый образ будущего. «Как все стало» Задачи — это шаги, которые он предпринимает для достижения цели Сценарий — это последовательность действий при решении задачи
38. Выясняем, какие у наших пользователей цели 1. Выделяем цели посещения для каждой персоны 2. Составляем таблицу персоны / цели 3. Ранжируем цели по важности 1 страница — 1 ключевая персона — 1 главная цель Все что мешает ключевой персоне — выкидываем
39. «Купить телефон Nexus у нормального продавца» «Выбрать, какой покупать фотоаппарат» «Узнать, как проехать к офису компании» «Убедиться, что меня не кинут» «Связаться с компанией, чтобы узнать какие у них условия и сервис» Примеры целей пользователей
40. «Купить телефон Nexus у нормального продавца» «Выбрать, какой покупать фотоаппарат» «Узнать, как проехать к офису компании» «Убедиться, что меня не кинут» «Связаться с компанией, чтобы узнать какие у них условия и сервис» Примеры целей пользователей Цели = глаголы
41. Основные цели бизнеса Подтвердить заказ Зарегистрировать пользователя Добиться заполнения формы Получить данные опроса Получить разрешение на подписку Добиться смены тарифного плана
42. Какие еще бывают цели Увеличить глубину сессии Повысить возвратность аудитории Вовлечь во взаимодействие Увеличить ядро пользователей Спровоцировать вирусное распространение
43. Сценарии
44. Сценарий «как есть» Как возникла проблема Как персонаж перешел к ее решению Какие шаги ему надо предпринять 
 без вашего приложения или сайта Как он получил профит,
 или почему у него не получилось Куда он пошел после сценария
45. Сценарий «как станет» Как возникла проблема Как персонаж перешел к ее решению Какие шаги ему надо предпринять 
 с помощью нашего приложения /сайта Как он получил профит, 
 и чем ситуация стала лучше Куда он пошел после сценария
46. Требования и функциональность
47. Составляем и оптимизируем требования Семен Альтов,
 менеджер-хипстер Екатерина Степановна, пенсионер Выбрать по набору характеристик 2 0 Понять, можно ли доверять магазину 0 1 Убедиться, что не переплатил 1 2 Получить консультацию продавца -1 2 Получаем вес требований Например, мы помогаем выбрать фотоаппарат
48. Проектирование функциональности каталог товаров подробные обзоры товаров визард 
 (гуру) достоверные отзывы о сервисе достоверные отзывы о товаре возможность вернуть товар без переплаты инструкции в формате pdf понять, что покупать • • • • найти конкретный товар • понять, как пользоваться • • убедиться в качестве товара • • убедиться в надежности поставщика • • функция гарантирует получение ценности функция существенно помогает получению ценности
49. Проектирование функциональности каталог товаров подробные обзоры товаров визард 
 (гуру) достоверные отзывы о сервисе достоверные отзывы о товаре возможность вернуть товар без переплаты инструкции в формате pdf понять, что покупать • • • • найти конкретный товар • понять, как пользоваться • • убедиться в качестве товара • • убедиться в надежности поставщика • • затраты 80 240 120 230 150 7000 15 время 9 12 8 40 24 2 1
50. Разбираемся с источниками Какие источники трафика мы можем привлечь без дополнительных денег? Существующие у компании базы данных Накопленная известность бренда Большой объем уникальной информации
 Какая рекламная активность уже есть? Уже существующая офлайн реклама Проведение акций Бонусные программы Чем пользуются наши конкуренты? Откуда приходят посетители к местным / федерльным /мировым конкурентам? На что мы тратим рекламный бюджет? Контекст / SEO / Медийная реклама / Контент-поддержка
51. Сценарии – артефакты – экраны 1. Описываем сценарии (Это описание шагов пользователя по дороге к цели его визита) 2. Фиксируем артефакты (Объекты, которые встречаются в требованиях и сценариях решения задач) 3. Компонуем артефакты по экранам. Даем экранам называния.
 Так, чтобы по называнию экрана было понятно, что там происходит 4. Рисуем карту переходов
52. Диаграмма действий и состояний
53. Самые важные страницы сайта Входы Цели Страницы навигации Страницы нагрева Стартовая
54. Landing page Сценарий посещения сайта начинается до сайта: 1. У пользователя возникает проблема. Он ее мысленно формулирует и несет в интернет. 2. Потом из интернета попадает на какую-то страницу сайта 3. ...на которой его сценарий должен продолжиться 4. Такая страница называется landing page
55. Какие бывают 
 страницы приземления Страница товара Страница категории Страница акции Статья Главная страница или страница раздела
56. Другие страницы Разводящие страницы — страницы, которые помогают пользователю выбрать один из нескольких сценариев. Например, главная страница сайта Нагревающие страницы — страницы, помогающие пользователю понять, что его выбор действительно хороший. Например, страницы обзорных статей, страницы сравнения товаров Сервисные и навигационные страницы — страницы, помогающие пользователю найти нужную ему информацию. Например, страницы результатов поиска, страницы визардов или страницы с фильтрами
57. Особые случаи Работа с повторной продажей Пользователь уже ответил на многие вопросы Не заставляйте его повторять ненужные операции Важно, чтобы он быстро вспомнил логику навигации. Например, повторил заказ Хорошо бы проявить заботу и благодарность. Предложить скидку за повторную покупку, например Длительная 
 продажа Часто пользователи покупают не при первом посещении Помогите им поделиться информацией Покажите, что они смотрели в прошлый раз Предложите подписаться на рассылку Помощь в телефонной продаже Очень важно уметь открыть одну и ту же страницу 
 
 Очень важно иметь простую для объяснения по телефону навигацию:
 – Простые адреса 
 – Внятную структуру 
 отдельной страницы 
 – Четкое зонирование 
 Сайт должен показывать то, что подкрепит устное высказывание 
 – Изображение товара 
 – Наглядное сравнение – Конструктивные 
 схемы
63. Прототип
64. Стадии прототипа 1. Название и описание сути продукта 2. Первый прототип главного экрана 3. Первый прототип точек входа 4. Карта состояний 5. Кликабельный прототип в устройстве 6. Альфа с реальными данными и юзерами
65. 1-я стадия прототипа — текст Если мы создадим интерфейс, 
 То решим проблему таких-то людей Благодаря таким-то свойствам продукта
66. Если мы создадим платформу для создания отзывов людей, которые изредка путешествуют и не умеют грамотно формулировать свои мысли и генерировать качественный контент,
 То мы решим проблему невозможности выразить себя и рассказать о своих впечатлениях красиво и эффектно Благодаря нативным средствам и помощникам, не дающим написать лишнее, и удобному интерфейсу, возможности легко обработать фотки, и механизму шаринга 1-я версия
67. Если мы создадим платформу для создания отзывов людей, которые изредка путешествуют и не умеют грамотно формулировать свои мысли и генерировать качественный контент,
 То мы решим проблему невозможности выразить себя и рассказать о своих впечатлениях красиво и эффектно Благодаря нативным средствам и помощникам, не дающим написать лишнее, и удобному интерфейсу, возможности легко обработать фотки, и механизму шаринга 1-я версия «Не верю» (с) Станиславский
68. Если мы создадим сайт, который не будет позволять писать лишнее, то автору будет проще формулировать свои мысли о путешествиях, благодаря тому, что мысль станет короче и понятней. Если мы создадим сайт, который будет помогать обрабатывать фотки, то у пользователя будут получаться приличные фотки, благодаря тому, что обработанные фотки будут выглядеть лучше. 2-я версия
69. Если мы создадим сообщество для путешественников, то решим проблему тех у котого нет компании для путешествий, поможем им найти попутчика, благодаря интеграции с соцсетями, виральности и рейтинговой системе. 3-я версия
70. Если мы создадим сервис, на котором пользователь сможет присоединяться к своим друзьям в поездке, то мы решим проблему поиска компании для путешествий, благодаря тому, что друзья пользователя будут заранее писать о своих планах, и пользователь будет знать, куда и когда едут его друзья, и сможет к ним присоединиться 4-я версия
71. Если мы создадим сервис, который будет гарантировать объективность отзывов, то мы решим проблему доверия к информации о турфирмах и отелях, благодаря тому, что мы будем прозванивать клиентов через день после звонка в фирму и через неделю после тура. 5-я версия
72. Если мы создадим сервис, который будет гарантировать объективность отзывов, то мы решим проблему доверия к информации о турфирмах и отелях, благодаря тому, что мы будем прозванивать клиентов через день после звонка в фирму и через неделю после тура. Барьер сложность мешающая получить желаемое
73. Если мы создадим сервис, который будет гарантировать объективность отзывов, то мы решим проблему доверия к информации о турфирмах и отелях, благодаря тому, что мы будем прозванивать клиентов через день после звонка в фирму и через неделю после тура. Барьер сложность мешающая получить желаемое Ценность то ради чего клиент отдает деньги
74. Если мы создадим сервис, который будет гарантировать объективность отзывов, то мы решим проблему доверия к информации о турфирмах и отелях, благодаря тому, что мы будем прозванивать клиентов через день после звонка в фирму и через неделю после тура. Тяжелая работа и серьезные затраты
75. Самый главный экран для персонажа Что он увидит? Что он должен 
 понять / сделать? Что нам нужно на выходе? Как человек попал сюда? Какой у него мотив?
76. ДОЛЖНО БЫТЬ НЕСКОЛЬКО ПОКОЛЕНИЙ ПРОТОТИПОВ Чтобы вы их сравнивали, а не отстаивали Первые прототипы не заслуживают вашей веры Это просто лопата, чтобы копаться в реальности
82. Usability сайта
83. Usability сайта «Это степень эффективности, результативности, продуктивности и удовлетворенности, с которой определенный пользователь решает определенную задачу в определенных условиях»
84. Usability сайта Простота обучения: Насколько быстро пользователь сможет освоить выполнение задач, если до этого он никогда не видел интерфейс? Эффективность использования: После того, как пользователь научился пользоваться интерфейсом, насколько быстро он сможет выполнять задачи? 
 Запоминаемость: Если пользователь работал ранее с сайтом, сколько он смог запомнить и не придется ли ему изучать систему снова?
 Количество и серьезность ошибок: Как часто пользователь ошибается при работе с системой, насколько серьезны эти ошибки? 
 Субъективное удовлетворение: В какой мере пользователю нравится работать с системой?
85. Некоторые эмпирические правила Закон Хика: Чем больше вариантов выбора, тем сложнее принять решение Закон Фиттса: Чем меньше элемент, тем сложнее по нему кликнуть
86. Как группировать элементы Близость элементов Схожесть элементов Целостность (консистентность) Симметрия (равновесность) Сходство действия
87. Задачи навигации Обзор Что здесь есть? Ориентирование Где я и куда мне идти? Обучение Что здесь можно делать и как? Быстрый доступ Как мне попасть в ...?
88. 5 оснований для навигации Тематика (Про что это?) Области деятельности Дизайн / Программирование / Тестирование Категория (В какой форме?) Классы объектов Новости / Товары / Акции Операция (Что сделать?) Действия и операции Послать заявку / Задать вопрос / 
 Купить билет / Выбрать курорт Роль (Кому это надо?) Группы клиентов по потребностям Коммерческому директору / Системному администратору / Журналисту Проблема (Что случилось?) Ситуации, в которых может оказаться пользователь Все сломалось / Надоело самому обслуживать компьютер / Бизнес вырос
89. Темы
 про что 
 это? Категории
 в какой форме? Операции
 что сделать? Роли
 кому это надо? Проблемы
 что 
 случилось? Интернет-магазины ✓ ✓ Форумы ✓ ✓ Блоги ✓ ✓ СМИ , Порталы ✓ ✓ Корпоративные сайты ✓ ✓ ✓ 5 оснований для навигации
90. Inbound marketing
95. Упражения
96. Сегменты Целевая аудитория Персоны Сценарии Требования Каналы Входы Выходы Метрики Цели сайта Цели бизнеса «Черный ящик» AIDA(S) «Главные вопросы» Сегментация по шкалам Пирамида потребностей «Барьер» Дом-модель Прототипы Тестирование Главный экран «Если, То, Благодаря» Контент-план Основные метрики юзабилити action-plan Кликабельные прототип customer journey map Бизнес-модель Требования Ограничения и требования
97. Кто эти люди? Где мои деньги?
98. Постановка Компания Цели бизнеса (2 предложения о том, какая от этого польза) Цели сайта = Метрики (ранжированный список того, что мы можем посчитать) Ограничения (чего нельзя делать или превышать) Пользователь Сегменты аудитории (три основных группы) Персонажи и их цели (три типичных портрета) Успешные сценарии (самая длинная схема)
99. Что и кому мы продаем?
100. В чем ваша выгода? Чем вы торгуете? Кто ваш клиент?
101. В чем ваша выгода? Что у вас за продукт? Чем вы на самом деле торгуете? Кто ваш клиент? Где вы его будете искать? Почему покупают именно у вас?
102. Составляем и оптимизируем требования Семен Альтов,
 менеджер-хипстер Екатерина Степановна, пенсионер Выбрать по набору характеристик 2 0 Понять, можно ли доверять магазину 0 1 Убедиться, что не переплатил 1 2 Получить консультацию продавца -1 2 Получаем вес требований Например, мы помогаем выбрать фотоаппарат
103. 1-я стадия прототипа — текст Если мы создадим интерфейс, 
 То решим проблему таких-то людей Благодаря таким-то свойствам продукта
104. Кто я такой, и что я здесь делаю? Что он увидит? Что он должен 
 понять / сделать? Что нам нужно на выходе? Как человек попал сюда? Какой у него мотив?
105. Проектирование функциональности каталог товаров подробные обзоры товаров визард 
 (гуру) достоверные отзывы о сервисе достоверные отзывы о товаре возможность вернуть товар без переплаты инструкции в формате pdf понять, что покупать • • • • найти конкретный товар • понять, как пользоваться • • убедиться в качестве товара • • убедиться в надежности поставщика • • затраты 80 240 120 230 150 7000 15 время 9 12 8 40 24 2 1
106. Landing – постановка В каком контексте находится человек до посещения? В чем проблема пользователя? Какая цель и ожидания персонажа от сессии в интернете? На какие вопросы пользователь ищет ответ? Какие барьеры нам надо снять? Какие аргументы у нас есть? На какую метрику работает страница?
107. Что почитать
108. Что почитать Книги для начинающих Норман Д. Дизайн привычных вещей Купер А. Психбольница в руках пациентов Круг С. Не заставляйте меня думать! Общая 
 методология Раскин Дж. Интерфейс: новые направления в проектировании компьютерных систем Мандел Т. Дизайн интерфейсов
109. Что почитать Паттерны взаимодействия Тидвелл Дж. Разработка пользовательских интерфейсов Юзабилити- тестирование Головач В. Юзабилити- тестирование по дешевке
 www.usethics.ru/lib/ testing_by_the_cheap.html Проектирование 
 веб-сайтов Джонсон Дж. Web-дизайн: типичные ляпы и как их избежать Нильсен Я. Веб-дизайн. Книга Якоба Нильсена
110. jetstyle.ru kulakov@gmail.com +7 912 68 88 119