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

Slide 1

Slide 1 text

Проектируем сайт

Slide 2

Slide 2 text

Процесс

Slide 3

Slide 3 text

Сегменты Целевая аудитория Персоны Сценарии Требования Каналы Входы Выходы Метрики Цели сайта Цели бизнеса Требования

Slide 4

Slide 4 text

Интерфейс Хотелки Сегменты Целевая аудитория Персоны Сценарии Требования Каналы Входы Выходы Метрики Цели сайта Цели бизнеса Требования

Slide 5

Slide 5 text

«Черный ящик» AIDA(S) «Главные вопросы» Сегментация по шкалам Пирамида потребностей «Барьер» Дом-модель Прототипы Тестирование Главный экран «Если, То, Благодаря» Контент-план Основные метрики юзабилити action-plan Кликабельные прототип customer journey map Бизнес-модель Ограничения и требования Сегменты Целевая аудитория Персоны Сценарии Требования Каналы Входы Выходы Метрики Цели сайта Цели бизнеса Требования

Slide 6

Slide 6 text

На выходе – интерфейс 1.Навигация 2.Сценарии и их визуализация на схеме 3.Компоновка ключевых экранов (прототип) 4.Контент-план 5.Требования к функциональности 6.Оформление

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

Постановка

Slide 10

Slide 10 text

Черный ящик

Slide 11

Slide 11 text

Вход и выход [вход] В чем проблема и сомнения пользователя? Что он хочет услышать?     Какие цели у бизнеса? Какой пользы мы хотим добиться? [выход]

Slide 12

Slide 12 text

Вход и выход [вход] В чем проблема и сомнения пользователя? Что он хочет услышать? Никому не интересно, что предприятие хочет рассказать. Наша задача понять, что хочет узнать целевой пользователь Какие цели у бизнеса? Какой пользы мы хотим добиться? [выход]

Slide 13

Slide 13 text

В чем ваша выгода? Чем вы торгуете? Кто ваш клиент?

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

Что у вас за продукт? Всего понемногу Чем вы на самом деле торгуете? Товаром  Почему его покупают именно у вас? Ничем не лучше, мы такие же, как все

Slide 16

Slide 16 text

Что у вас за продукт? Всего понемногу Чем вы на самом деле торгуете? Товаром  Почему его покупают именно у вас? Ничем не лучше, мы такие же, как все всегда есть преимущество

Slide 17

Slide 17 text

Что у вас за продукт? Дешевые пляжные туры Чем вы на самом деле торгуете? Эмоциями  Спокойствием во время отдыха Почему его покупают именно у вас? У нас действительно толковые продавцы  Мы по-человечески относимся к людям во время продажи и отдыха

Slide 18

Slide 18 text

Что у вас за продукт? Продаем оригинальные запчасти ВАЗ оптовикам Чем вы на самом деле торгуете? Лояльностью клиентов  Маржой Отсутствием геморроя с поставками Почему его покупают именно у вас? Маржа выше Качество стабильное Поставки в предсказуемые сроки

Slide 19

Slide 19 text

Что у вас за продукт? Про это рассказывают все, потому что такая информация уже есть в наличии Чем вы на самом деле торгуете?   Почему его покупают именно у вас?

Slide 20

Slide 20 text

Что у вас за продукт? Про это рассказывают все, потому что такая информация уже есть в наличии Чем вы на самом деле торгуете? А вот это на самом деле интересует клиента  Почему его покупают именно у вас? И вот это тоже

Slide 21

Slide 21 text

В чем ваша выгода? Что у вас за продукт? Чем вы на самом деле торгуете? Кто ваш клиент? Где вы его будете искать? Почему покупают именно у вас?

Slide 22

Slide 22 text

Персонаж = клиент

Slide 23

Slide 23 text

Целевая аудитория Цели и задачи аудитории Контекст Персонажи Сценарии Требования

Slide 24

Slide 24 text

Сегменты

Slide 25

Slide 25 text

Вопросы  Кто наши пользователи, и что они делают с системой?  Сколько их? И чем они друг от друга отличаются в поведении? Методики  Анализ конкурентов, интервью с пользователями, наблюдения за пользователями, фокус-группы Результат  Отчет с общими характеристиками ЦА Первичный анализ аудитории

Slide 26

Slide 26 text

Нас интересуют те пользователи, которые ведут себя   при взаимодействии с нашим продуктом особенным образом и способны принести максимум выгоды бизнесу через интернет

Slide 27

Slide 27 text

Вопросы  В чем разница между пользователями? Какие у них особенности в поведении, позволяющие выделить группы? Результат  Черновое описание целевых групп Выделение групп

Slide 28

Slide 28 text

Какие 3 вопроса надо задать человеку, чтобы понять, что это наш клиент? Выделение групп

Slide 29

Slide 29 text

Выделяем важные для целевой группы параметры при решении типичных задач в заданном контексте    Активность, Возраст, Опыт использования интерфейса, Страсть к приключениям, Готовность тратить деньги на развлечения 1 переменная = 1 шкала  Для каждой шкалы задаем размерность.   Например: много/средне/меньше среднего/мало/нет На каждой шкале будет по нескольку точек – переменных для каждой целевой группы Выделение персонажей

Slide 30

Slide 30 text

Персонажи

Slide 31

Slide 31 text

Как выделять персону Сбор данных Интервью: просто поговорите с вашими пользователями о том, какие у них проблемы, и как они их решают. Или спросите продавцов про это Опрос: после этого можно составить опросник. Цель – выделить пересекающиеся контексты и проблемы пользователей, и на их основании разбить аудиторию Наблюдение: если есть возможность, понаблюдайте за тем, как пользователи взаимодействуют с вашим (или аналогичным) сайтом или услугой Что узнаем: 1. Кто наши пользователи 2. Цели и задачи наших пользователей 3. Контекст будущего использования нашего сайта 4. Ключевые и второстепенные персоны

Slide 32

Slide 32 text

Зачем нужны персонажи 1.Персонаж = контейнер для требований 2.Помогает синхронизировать видение команды 3.Команда достоверней предсказывает проблемы и поведение посетителей 4.Помогает принимать решения на разных стадиях проекта

Slide 33

Slide 33 text

Персонаж 1. Особенности персонажа 2. Имя и фото 3. Где работает, где живет, чем увлекается,   сколько лет 4. История (как возникла проблема) 5. Цель (что сейчас хочу получить в итоге) 6. Опыт использования интерфейса 7. Функция персонажа в экологии продукта

Slide 34

Slide 34 text

Какие проблемы решают персонажи 1. Помогают удерживать фокус на главном и не   увлекаться фичами 2. Решают проблему «Резинового среднего   юзера» 3. Решают проблему эгоцентричного «Мне так   удобно» дизайна 4. Помогают расставить приоритеты в   разработке и не тратить время на редкие   исключения

Slide 35

Slide 35 text

Сценарии и требования

Slide 36

Slide 36 text

Цели пользователей

Slide 37

Slide 37 text

Цель и задачи человека Цель — это то, ради чего он вообще действует. Желаемый образ будущего. «Как все стало» Задачи — это шаги, которые он предпринимает для достижения цели Сценарий — это последовательность действий при решении задачи

Slide 38

Slide 38 text

Выясняем, какие у наших пользователей цели 1. Выделяем цели посещения для каждой персоны 2. Составляем таблицу персоны / цели 3. Ранжируем цели по важности 1 страница — 1 ключевая персона — 1 главная цель Все что мешает ключевой персоне — выкидываем

Slide 39

Slide 39 text

«Купить телефон Nexus у нормального продавца» «Выбрать, какой покупать фотоаппарат» «Узнать, как проехать к офису компании» «Убедиться, что меня не кинут» «Связаться с компанией, чтобы узнать какие у них условия и сервис» Примеры целей пользователей

Slide 40

Slide 40 text

Slide 41

Slide 41 text

Основные цели бизнеса Подтвердить заказ Зарегистрировать пользователя Добиться заполнения формы Получить данные опроса Получить разрешение на подписку Добиться смены тарифного плана

Slide 42

Slide 42 text

Какие еще бывают цели Увеличить глубину сессии Повысить возвратность аудитории Вовлечь во взаимодействие Увеличить ядро пользователей Спровоцировать вирусное распространение

Slide 43

Slide 43 text

Сценарии

Slide 44

Slide 44 text

Сценарий «как есть» Как возникла проблема Как персонаж перешел к ее решению Какие шаги ему надо предпринять   без вашего приложения или сайта Как он получил профит,  или почему у него не получилось Куда он пошел после сценария

Slide 45

Slide 45 text

Сценарий «как станет» Как возникла проблема Как персонаж перешел к ее решению Какие шаги ему надо предпринять   с помощью нашего приложения /сайта Как он получил профит,   и чем ситуация стала лучше Куда он пошел после сценария

Slide 46

Slide 46 text

Требования и функциональность

Slide 47

Slide 47 text

Составляем и оптимизируем требования Семен Альтов,  менеджер-хипстер Екатерина Степановна, пенсионер Выбрать по набору характеристик 2 0 Понять, можно ли доверять магазину 0 1 Убедиться, что не переплатил 1 2 Получить консультацию продавца -1 2 Получаем вес требований Например, мы помогаем выбрать фотоаппарат

Slide 48

Slide 48 text

Проектирование функциональности каталог товаров подробные обзоры товаров визард   (гуру) достоверные отзывы о сервисе достоверные отзывы о товаре возможность вернуть товар без переплаты инструкции в формате pdf понять, что покупать • • • • найти конкретный товар • понять, как пользоваться • • убедиться в качестве товара • • убедиться в надежности поставщика • • функция гарантирует получение ценности функция существенно помогает получению ценности

Slide 49

Slide 49 text

Проектирование функциональности каталог товаров подробные обзоры товаров визард   (гуру) достоверные отзывы о сервисе достоверные отзывы о товаре возможность вернуть товар без переплаты инструкции в формате pdf понять, что покупать • • • • найти конкретный товар • понять, как пользоваться • • убедиться в качестве товара • • убедиться в надежности поставщика • • затраты 80 240 120 230 150 7000 15 время 9 12 8 40 24 2 1

Slide 50

Slide 50 text

Разбираемся с источниками Какие источники трафика мы можем привлечь без дополнительных денег? Существующие у компании базы данных Накопленная известность бренда Большой объем уникальной информации  Какая рекламная активность уже есть? Уже существующая офлайн реклама Проведение акций Бонусные программы Чем пользуются наши конкуренты? Откуда приходят посетители к местным / федерльным /мировым конкурентам? На что мы тратим рекламный бюджет? Контекст / SEO / Медийная реклама / Контент-поддержка

Slide 51

Slide 51 text

Сценарии – артефакты – экраны 1. Описываем сценарии (Это описание шагов пользователя по дороге к цели его визита) 2. Фиксируем артефакты (Объекты, которые встречаются в требованиях и сценариях решения задач) 3. Компонуем артефакты по экранам. Даем экранам называния.  Так, чтобы по называнию экрана было понятно, что там происходит 4. Рисуем карту переходов

Slide 52

Slide 52 text

Диаграмма действий и состояний

Slide 53

Slide 53 text

Самые важные страницы сайта Входы Цели Страницы навигации Страницы нагрева Стартовая

Slide 54

Slide 54 text

Landing page Сценарий посещения сайта начинается до сайта: 1. У пользователя возникает проблема. Он ее мысленно формулирует и несет в интернет. 2. Потом из интернета попадает на какую-то страницу сайта 3. ...на которой его сценарий должен продолжиться 4. Такая страница называется landing page

Slide 55

Slide 55 text

Какие бывают   страницы приземления Страница товара Страница категории Страница акции Статья Главная страница или страница раздела

Slide 56

Slide 56 text

Другие страницы Разводящие страницы — страницы, которые помогают пользователю выбрать один из нескольких сценариев. Например, главная страница сайта Нагревающие страницы — страницы, помогающие пользователю понять, что его выбор действительно хороший. Например, страницы обзорных статей, страницы сравнения товаров Сервисные и навигационные страницы — страницы, помогающие пользователю найти нужную ему информацию. Например, страницы результатов поиска, страницы визардов или страницы с фильтрами

Slide 57

Slide 57 text

Особые случаи Работа с повторной продажей Пользователь уже ответил на многие вопросы Не заставляйте его повторять ненужные операции Важно, чтобы он быстро вспомнил логику навигации. Например, повторил заказ Хорошо бы проявить заботу и благодарность. Предложить скидку за повторную покупку, например Длительная   продажа Часто пользователи покупают не при первом посещении Помогите им поделиться информацией Покажите, что они смотрели в прошлый раз Предложите подписаться на рассылку Помощь в телефонной продаже Очень важно уметь открыть одну и ту же страницу     Очень важно иметь простую для объяснения по телефону навигацию:  – Простые адреса   – Внятную структуру   отдельной страницы   – Четкое зонирование   Сайт должен показывать то, что подкрепит устное высказывание   – Изображение товара   – Наглядное сравнение – Конструктивные   схемы

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

No content

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

No content

Slide 62

Slide 62 text

No content

Slide 63

Slide 63 text

Прототип

Slide 64

Slide 64 text

Стадии прототипа 1. Название и описание сути продукта 2. Первый прототип главного экрана 3. Первый прототип точек входа 4. Карта состояний 5. Кликабельный прототип в устройстве 6. Альфа с реальными данными и юзерами

Slide 65

Slide 65 text

1-я стадия прототипа — текст Если мы создадим интерфейс,   То решим проблему таких-то людей Благодаря таким-то свойствам продукта

Slide 66

Slide 66 text

Если мы создадим платформу для создания отзывов людей, которые изредка путешествуют и не умеют грамотно формулировать свои мысли и генерировать качественный контент,  То мы решим проблему невозможности выразить себя и рассказать о своих впечатлениях красиво и эффектно Благодаря нативным средствам и помощникам, не дающим написать лишнее, и удобному интерфейсу, возможности легко обработать фотки, и механизму шаринга 1-я версия

Slide 67

Slide 67 text

Slide 68

Slide 68 text

Если мы создадим сайт, который не будет позволять писать лишнее, то автору будет проще формулировать свои мысли о путешествиях, благодаря тому, что мысль станет короче и понятней. Если мы создадим сайт, который будет помогать обрабатывать фотки, то у пользователя будут получаться приличные фотки, благодаря тому, что обработанные фотки будут выглядеть лучше. 2-я версия

Slide 69

Slide 69 text

Если мы создадим сообщество для путешественников, то решим проблему тех у котого нет компании для путешествий, поможем им найти попутчика, благодаря интеграции с соцсетями, виральности и рейтинговой системе. 3-я версия

Slide 70

Slide 70 text

Если мы создадим сервис, на котором пользователь сможет присоединяться к своим друзьям в поездке, то мы решим проблему поиска компании для путешествий, благодаря тому, что друзья пользователя будут заранее писать о своих планах, и пользователь будет знать, куда и когда едут его друзья, и сможет к ним присоединиться 4-я версия

Slide 71

Slide 71 text

Если мы создадим сервис, который будет гарантировать объективность отзывов, то мы решим проблему доверия к информации о турфирмах и отелях, благодаря тому, что мы будем прозванивать клиентов через день после звонка в фирму и через неделю после тура. 5-я версия

Slide 72

Slide 72 text

Slide 73

Slide 73 text

Slide 74

Slide 74 text

Slide 75

Slide 75 text

Самый главный экран для персонажа Что он увидит? Что он должен   понять / сделать? Что нам нужно на выходе? Как человек попал сюда? Какой у него мотив?

Slide 76

Slide 76 text

ДОЛЖНО БЫТЬ НЕСКОЛЬКО ПОКОЛЕНИЙ ПРОТОТИПОВ Чтобы вы их сравнивали, а не отстаивали Первые прототипы не заслуживают вашей веры Это просто лопата, чтобы копаться в реальности

Slide 77

Slide 77 text

No content

Slide 78

Slide 78 text

No content

Slide 79

Slide 79 text

No content

Slide 80

Slide 80 text

No content

Slide 81

Slide 81 text

No content

Slide 82

Slide 82 text

Usability сайта

Slide 83

Slide 83 text

Usability сайта «Это степень эффективности, результативности, продуктивности и удовлетворенности, с которой определенный пользователь решает определенную задачу в определенных условиях»

Slide 84

Slide 84 text

Usability сайта Простота обучения: Насколько быстро пользователь сможет освоить выполнение задач, если до этого он никогда не видел интерфейс? Эффективность использования: После того, как пользователь научился пользоваться интерфейсом, насколько быстро он сможет выполнять задачи?   Запоминаемость: Если пользователь работал ранее с сайтом, сколько он смог запомнить и не придется ли ему изучать систему снова?  Количество и серьезность ошибок: Как часто пользователь ошибается при работе с системой, насколько серьезны эти ошибки?   Субъективное удовлетворение: В какой мере пользователю нравится работать с системой?

Slide 85

Slide 85 text

Некоторые эмпирические правила Закон Хика: Чем больше вариантов выбора, тем сложнее принять решение Закон Фиттса: Чем меньше элемент, тем сложнее по нему кликнуть

Slide 86

Slide 86 text

Как группировать элементы Близость элементов Схожесть элементов Целостность (консистентность) Симметрия (равновесность) Сходство действия

Slide 87

Slide 87 text

Задачи навигации Обзор Что здесь есть? Ориентирование Где я и куда мне идти? Обучение Что здесь можно делать и как? Быстрый доступ Как мне попасть в ...?

Slide 88

Slide 88 text

5 оснований для навигации Тематика (Про что это?) Области деятельности Дизайн / Программирование / Тестирование Категория (В какой форме?) Классы объектов Новости / Товары / Акции Операция (Что сделать?) Действия и операции Послать заявку / Задать вопрос /   Купить билет / Выбрать курорт Роль (Кому это надо?) Группы клиентов по потребностям Коммерческому директору / Системному администратору / Журналисту Проблема (Что случилось?) Ситуации, в которых может оказаться пользователь Все сломалось / Надоело самому обслуживать компьютер / Бизнес вырос

Slide 89

Slide 89 text

Темы  про что   это? Категории  в какой форме? Операции  что сделать? Роли  кому это надо? Проблемы  что   случилось? Интернет-магазины ✓ ✓ Форумы ✓ ✓ Блоги ✓ ✓ СМИ , Порталы ✓ ✓ Корпоративные сайты ✓ ✓ ✓ 5 оснований для навигации

Slide 90

Slide 90 text

Inbound marketing

Slide 91

Slide 91 text

No content

Slide 92

Slide 92 text

No content

Slide 93

Slide 93 text

No content

Slide 94

Slide 94 text

No content

Slide 95

Slide 95 text

Упражения

Slide 96

Slide 96 text

Сегменты Целевая аудитория Персоны Сценарии Требования Каналы Входы Выходы Метрики Цели сайта Цели бизнеса «Черный ящик» AIDA(S) «Главные вопросы» Сегментация по шкалам Пирамида потребностей «Барьер» Дом-модель Прототипы Тестирование Главный экран «Если, То, Благодаря» Контент-план Основные метрики юзабилити action-plan Кликабельные прототип customer journey map Бизнес-модель Требования Ограничения и требования

Slide 97

Slide 97 text

Кто эти люди? Где мои деньги?

Slide 98

Slide 98 text

Постановка Компания Цели бизнеса (2 предложения о том, какая от этого польза) Цели сайта = Метрики (ранжированный список того, что мы можем посчитать) Ограничения (чего нельзя делать или превышать) Пользователь Сегменты аудитории (три основных группы) Персонажи и их цели (три типичных портрета) Успешные сценарии (самая длинная схема)

Slide 99

Slide 99 text

Что и кому мы продаем?

Slide 100

Slide 100 text

В чем ваша выгода? Чем вы торгуете? Кто ваш клиент?

Slide 101

Slide 101 text

Slide 102

Slide 102 text

Slide 103

Slide 103 text

Slide 104

Slide 104 text

Кто я такой, и что я здесь делаю? Что он увидит? Что он должен   понять / сделать? Что нам нужно на выходе? Как человек попал сюда? Какой у него мотив?

Slide 105

Slide 105 text

Проектирование функциональности каталог товаров подробные обзоры товаров визард   (гуру) достоверные отзывы о сервисе достоверные отзывы о товаре возможность вернуть товар без переплаты инструкции в формате pdf понять, что покупать • • • • найти конкретный товар • понять, как пользоваться • • убедиться в качестве товара • • убедиться в надежности поставщика • • затраты 80 240 120 230 150 7000 15 время 9 12 8 40 24 2 1

Slide 106

Slide 106 text

Landing – постановка В каком контексте находится человек до посещения? В чем проблема пользователя? Какая цель и ожидания персонажа от сессии в интернете? На какие вопросы пользователь ищет ответ? Какие барьеры нам надо снять? Какие аргументы у нас есть? На какую метрику работает страница?

Slide 107

Slide 107 text

Что почитать

Slide 108

Slide 108 text

Что почитать Книги для начинающих Норман Д. Дизайн привычных вещей Купер А. Психбольница в руках пациентов Круг С. Не заставляйте меня думать! Общая   методология Раскин Дж. Интерфейс: новые направления в проектировании компьютерных систем Мандел Т. Дизайн интерфейсов

Slide 109

Slide 109 text

Что почитать Паттерны взаимодействия Тидвелл Дж. Разработка пользовательских интерфейсов Юзабилити- тестирование Головач В. Юзабилити- тестирование по дешевке  www.usethics.ru/lib/ testing_by_the_cheap.html Проектирование   веб-сайтов Джонсон Дж. Web-дизайн: типичные ляпы и как их избежать Нильсен Я. Веб-дизайн. Книга Якоба Нильсена

Slide 110

Slide 110 text

jetstyle.ru kulakov@gmail.com +7 912 68 88 119