Как показать интерфейс клиенту Так, чтобы не было мучительно больно

Содержание

Слайд 2

О чем этот рассказ? Почему, даже предлагая хорошее решение, мы часто

О чем этот рассказ?

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

с необоснованной критикой?
Почему экономия на презентации работ часто выходит боком.
Что, как и когда можно показывать клиенту.
Слайд 3

Анти-кейс я никогда, никогда, никогда больше не буду отправлять результаты работ

Анти-кейс я никогда, никогда, никогда больше не буду отправлять результаты работ по

электронной почте
Проблемные места
1001 неприятное последствие
Как решить проблему
Что и когда презентовать
А может все-таки сэкономим?
Слайд 4

...в один из типичных рабочих дней, как это принято, отправляю клиенту

...в один из типичных рабочих дней, как это принято, отправляю клиенту

пачку структурных схем страниц по проекту.
Слайд 5

На утро приходит ответ с парой десятков замечаний и легким недовольством в тоне письма.

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

в тоне письма.
Слайд 6

Многие из комментариев противоречивы – где-то не заметили очевидного, где-то не

Многие из комментариев противоречивы – где-то не заметили очевидного, где-то не

так поняли, где-то поменяли первоначальное мнение, где-то предлагают неуместное решение.
Слайд 7

Спустя пару десятков писем в переписке все, кажется, утвердили. Но красивая

Спустя пару десятков писем в переписке все, кажется, утвердили. Но красивая

изначальная идея уже не так хороша. И хуже того – со следующими страницами эпопея повторяется.
Слайд 8

При этом на живых презентациях всегда было более гладко – есть

При этом на живых презентациях всегда было более гладко – есть

взаимопонимание, уходят многие вопросы. И даже если само обсуждение сложное – результат есть и он позволяет проекту двигаться вперед.
Слайд 9

В какой-то момент мы поняли, что практику «отправил и ждешь» нужно

В какой-то момент мы поняли, что практику «отправил и ждешь» нужно

забыть – все, что может быть понято неправильно, будет понято неправильно. С этого момента при любой возможности стараемся презентовать работы лично.
Слайд 10

Слайд 11

Анти-кейс Проблемные места почему так происходит 1001 неприятное последствие Как решить

Анти-кейс
Проблемные места почему так происходит
1001 неприятное последствие
Как решить проблему
Что и когда презентовать
А

может все-таки сэкономим?
Слайд 12

Почему так происходит? При проектировании интерфейса мы можем решить поставленную задачу несколькими способами.

Почему так происходит? При проектировании интерфейса мы можем решить поставленную задачу

несколькими способами.
Слайд 13

Один из этих подходов быстрее и дешевле во внедрении.

Один из этих подходов быстрее и дешевле во внедрении.

Слайд 14

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

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

Слайд 15

Третий вариант продаст больше рекламы.

Третий вариант продаст больше рекламы.

Слайд 16

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

Проблема в том, что таких требований десятки и все их нужно

как-то сочетать в предлагаемом решении.
Слайд 17

И из пространства возможных решений приходится выбирать 1-2 наиболее оптимально подходящих к требованиям.

И из пространства возможных решений приходится выбирать 1-2 наиболее оптимально подходящих

к требованиям.
Слайд 18

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

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

решений часто видит не то что мы.
Слайд 19

И, скорее всего, он уже пишет вам письмо с читающимся между

И, скорее всего, он уже пишет вам письмо с читающимся между

строк вопросом «что за халтуру вы мне прислали?!».
Слайд 20

А значит процесс работы над проектом затягивается до выяснения обстоятельств. И отношения постепенно накаляются…

А значит процесс работы над проектом затягивается до выяснения обстоятельств. И

отношения постепенно накаляются…
Слайд 21

Анти-кейс Проблемные места 1001 неприятное последствие к чему приводит недопонимание Как

Анти-кейс
Проблемные места
1001 неприятное последствие к чему приводит недопонимание
Как решить проблему
Что и когда

презентовать
А может все-таки сэкономим?
Слайд 22

К чему кроме испорченных нервов приводит недопонимание?

К чему кроме испорченных нервов приводит недопонимание?

Слайд 23

Увеличение объема работ за счет незапланированных переделок. А это съедает маржу и отвлекает ресурсы.

Увеличение объема работ за счет незапланированных переделок. А это съедает маржу

и отвлекает ресурсы.
Слайд 24

Увеличение издержек на ведение проекта – менеджер тратит больше времени, своего и клиента.

Увеличение издержек на ведение проекта – менеджер тратит больше времени, своего

и клиента.
Слайд 25

Увеличение сроков работ – а это ломает планы и клиента, и команды проектирования.

Увеличение сроков работ – а это ломает планы и клиента, и

команды проектирования.
Слайд 26

Ухудшение качества итогового результата – путем нарастающего потока правок красивая изначальная концепция рушится.

Ухудшение качества итогового результата – путем нарастающего потока правок красивая изначальная

концепция рушится.
Слайд 27

Все это делает проект менее интересным для подрядчика – как в

Все это делает проект менее интересным для подрядчика – как в

плане прибыли, так и в плане примера для портфолио.
Слайд 28

И, конечно, снижает вероятность повторного обращения со стороны клиента.

И, конечно, снижает вероятность повторного обращения со стороны клиента.

Слайд 29

Все это плохо не только для компании-подрядчика – в случае in-house-команды

Все это плохо не только для компании-подрядчика – в случае in-house-команды

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

Никому не нужна лишняя головная боль, так что проблему лучше решать.

Никому не нужна лишняя головная боль, так что проблему лучше решать.

Это поможет и текущему проекту, и последующим.
Слайд 31

Анти-кейс Проблемные места 1001 неприятное последствие Как решить проблему несколько способов

Анти-кейс
Проблемные места
1001 неприятное последствие
Как решить проблему несколько способов предусмотреть сложности
Что и когда

презентовать
А может все-таки сэкономим?
Слайд 32

Наша задача – сделать так, чтобы и мы, и клиент одинаково

Наша задача – сделать так, чтобы и мы, и клиент одинаково

понимали пространство возможных решений и выбрали из него оптимальный вариант.
Слайд 33

Слышали ли вы от него фразу «Так покажите же нам и плохие варианты»?

Слышали ли вы от него фразу «Так покажите же нам и

плохие варианты»?
Слайд 34

Она о том же – клиент тоже хочет знать, какие еще решения задачи могут быть.

Она о том же – клиент тоже хочет знать, какие еще

решения задачи могут быть.
Слайд 35

Хотя, конечно, еще и хочет убедиться в том, что вы не

Хотя, конечно, еще и хочет убедиться в том, что вы не

халтурите и предлагаете не первое попавшееся решение.
Слайд 36

Не буду о важности хорошо поставленного процесса проектирования, включающего предварительные исследования,

Не буду о важности хорошо поставленного процесса проектирования, включающего предварительные исследования,

формализацию требований и другие критичные проектные работы – без него проблемы начнутся еще раньше.
Слайд 37

Как мы можем «синхронизировать» понимание задачи с клиентом?

Как мы можем «синхронизировать» понимание задачи с клиентом?

Слайд 38

Формировать правильные ожидания в начале работ. Отдельный доклад на тему управления

Формировать правильные ожидания в начале работ.

Отдельный доклад на тему управления ожиданиям

читался
на конференции Software People 2009
http://www.jvetrau.com/2009/05/25/software-people-2009-presentation/
Слайд 39

Обучать клиента – хорошо, если он понимает о чем мы говорим.

Обучать клиента – хорошо, если он понимает о чем мы говорим.

Слайд 40

Скрывать уровни абстракции – в этом случае тратить времени на обучение клиента нужно будет меньше.

Скрывать уровни абстракции – в этом случае тратить времени на обучение

клиента нужно будет меньше.
Слайд 41

И главное – регулярно презентовать результаты работ и то, как мы

И главное – регулярно презентовать результаты работ и то, как мы

решаем с их помощью поставленную задачу.
Слайд 42

Анти-кейс Проблемные места 1001 неприятное последствие Как решить проблему Что и

Анти-кейс
Проблемные места
1001 неприятное последствие
Как решить проблему
Что и когда презентовать десяток способов вовлечь

клиента в работу над интерфейсом
А может все-таки сэкономим?
Слайд 43

Выбор того что показывать достаточно большой, причем многие из демо-материалов в

Выбор того что показывать достаточно большой, причем многие из демо-материалов в

любом случае готовятся в ходе работ.
Слайд 44

Самое простое и эффективное – структурные схемы страниц и дизайн-макеты. Ведь

Самое простое и эффективное – структурные схемы страниц и дизайн-макеты. Ведь

мы делаем их в любом случае как часть работ по проектированию интерфейса. К тому же понять не так тут поводов больше всего.
Слайд 45

Структурные схемы страниц и дизайн-макеты

Структурные схемы страниц и дизайн-макеты

Слайд 46

Презентовать их нужно обязательно лично с самых первых этапов проекта. Подробно

Презентовать их нужно обязательно лично с самых первых этапов проекта. Подробно

рассказывая о каждом элементе – что это и зачем используется.
Слайд 47

А еще вы сможете объяснить, почему выбраны именно эти решения, а

А еще вы сможете объяснить, почему выбраны именно эти решения, а

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

Выбор из пространства решений

Выбор из пространства решений

Слайд 49

К тому же многие сталкивались с тем, что часть клиентов не

К тому же многие сталкивались с тем, что часть клиентов не

мыслит абстрактно и не понимает wireframes. Личная презентация в таком случае чуть ли не единственный способ быть понятым.
Слайд 50

Дизайн? А почему все черно-белое? А что, градиентов и картинок не

Дизайн?

А почему все черно-белое?
А что, градиентов и картинок не будет?
А почему

ширина правой колонки – 205 пикселей?
А кто будет это верстать?
Слайд 51

Еще лучший способ рассказать о решении – показать весь процесс в динамике.

Еще лучший способ рассказать о решении – показать весь процесс в

динамике.
Слайд 52

Идеальный вариант – интерактивный прототип. Во-первых, система уже «работает» – клиент

Идеальный вариант – интерактивный прототип. Во-первых, система уже «работает» – клиент

сам может покликать ее, а тому кто видел это своими глазами сложно переоценить достигнутый эффект.
Слайд 53

Во-вторых, можно пройтись по основным процессам, попробовать выполнить типовые задачи, понять

Во-вторых, можно пройтись по основным процессам, попробовать выполнить типовые задачи, понять

насколько удобны конкретные решения на практике.
Слайд 54

Интерактивный прототип

Интерактивный прототип

Слайд 55

Еще лучше то, что можно поэкспериментировать с разными решениями задачи и,

Еще лучше то, что можно поэкспериментировать с разными решениями задачи и,

опять же, сразу пощупать их вживую.
Слайд 56

Версии интерактивного прототипа

Версии интерактивного прототипа

Слайд 57

А если прототип будет достаточно проработанным – он включает в себя

А если прототип будет достаточно проработанным – он включает в себя

JavaScript-динамику, имитирует работу с сервером, выполнен в финальном дизайне – клиенту и вовсе не придется мыслить абстрактно.
Слайд 58

Да и сам клиент сможет показать свой будущий продукт коллегам, партнерам

Да и сам клиент сможет показать свой будущий продукт коллегам, партнерам

и потенциальным клиентам – а это уже начало возврата инвестиций в проектирование.
Слайд 59

С интерактивным прототипом есть только одна проблема – хороший прототип долго

С интерактивным прототипом есть только одна проблема – хороший прототип долго

создавать и не всегда просто поддерживать.
Слайд 60

Поэтому есть и другие способы показать процесс в динамике. В первую

Поэтому есть и другие способы показать процесс в динамике. В первую

очередь это диаграммы процессов и переходов между страницами.
Слайд 61

Пользовательский сценарий

Пользовательский сценарий

Слайд 62

Они показывают, как система решает конкретную задачу с помощью страниц интерфейса

Они показывают, как система решает конкретную задачу с помощью страниц интерфейса

– например, покупка товара в интернет-магазине или регистрация нового пользователя.
Слайд 63

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

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

будет показать не в виде абстрактных прямоугольников, а самих структурных схем. А это еще на один уровень абстракции меньше.
Слайд 64

Проектирование на ватмане

Проектирование на ватмане

Слайд 65

Мы выделяем на этих диаграммах основные и второстепенные сценарии работы, показываем

Мы выделяем на этих диаграммах основные и второстепенные сценарии работы, показываем

точки входа и выхода из процесса, связываем это все с портретами пользователей.
Слайд 66

А если нам известны данные веб-аналитики – можно объединить диаграмму процесса

А если нам известны данные веб-аналитики – можно объединить диаграмму процесса

с «воронкой» и наглядно показать, где и сколько пользователей мы теряем.
Слайд 67

Диаграмма + воронка конверсии

Диаграмма + воронка конверсии

Слайд 68

Причем если у нас есть возможность сравнить старое решение с новым

Причем если у нас есть возможность сравнить старое решение с новым

в виде двух диаграмм – это еще нагляднее покажет эффективность предлагаемых решений.
Слайд 69

Особенно приятно то, когда клиенты просят оставить такие листы ватмана себе

Особенно приятно то, когда клиенты просят оставить такие листы ватмана себе

– причем случается это достаточно часто.
Слайд 70

Альтернативный способ показа будущего продукта в динамике – заранее подготовленное видео

Альтернативный способ показа будущего продукта в динамике – заранее подготовленное видео

или презентация с проходом по основным сценариям.
Слайд 71

Презентация этапа работ

Презентация этапа работ

Слайд 72

Они подходят скорее для случаев, когда лично встретиться нет возможности. Хотя

Они подходят скорее для случаев, когда лично встретиться нет возможности. Хотя

это достаточно скучные вещи (интерактивность у них невысокая), работают они в любом случае лучше простого письма.
Слайд 73

А что делать, если на текущей стадии нет конкретных результатов работ

А что делать, если на текущей стадии нет конкретных результатов работ

– только данные предварительного исследования или анализа? Это могут быть, например, персонажи, описание сценариев взаимодействия, moodboards.
Слайд 74

Предварительные документы

Предварительные документы

Слайд 75

Нужно показывать и их тоже – ведь наша задача не только

Нужно показывать и их тоже – ведь наша задача не только

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

Обзор процесса работы

Обзор процесса работы

Слайд 77

Кроме того, мы можем получить полезные инсайты и комментарии. Ведь документы

Кроме того, мы можем получить полезные инсайты и комментарии. Ведь документы

это не только результат работ, но и приглашение к обсуждению проблемы. Многим проще критиковать, чем предлагать свое и стоит использовать эту особенность на пользу дела.
Слайд 78

Правки от клиента

Правки от клиента

Слайд 79

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

Кстати, говоря о вовлечении, можно пойти еще дальше – включать клиента

в процесс продумывания интерфейса.
Слайд 80

Самый простой способ – рисование скетчей, когда мы вместе рисуем экраны

Самый простой способ – рисование скетчей, когда мы вместе рисуем экраны

на бумаге, флипчарте или маркерной доске.
Слайд 81

Скетчи интерфейса

Скетчи интерфейса

Слайд 82

Это позволяет показывать процесс нашей работы, то как мы выбираем оптимальные решения из пространства доступных.

Это позволяет показывать процесс нашей работы, то как мы выбираем оптимальные

решения из пространства доступных.
Слайд 83

Работа над скетчами

Работа над скетчами

Слайд 84

Правда, скетчи чересчур абстрактны для многих клиентов и не гарантируют принятие

Правда, скетчи чересчур абстрактны для многих клиентов и не гарантируют принятие

созданных на их основе структурных схем страниц.
Слайд 85

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

Еще лучший способ оживить рассказ и вовлечь клиента в процесс –

сбор интерфейса из готовых компонентов.
Слайд 86

Это может быть построение формы из набора полей на листе бумаги.

Это может быть построение формы из набора полей на листе бумаги.

Слайд 87

Сбор формы из готовых элементов

Сбор формы из готовых элементов

Слайд 88

Или попытка собрать страницу из готовых интерфейсных блоков, вырезанных из бумаги.

Или попытка собрать страницу из готовых интерфейсных блоков, вырезанных из бумаги.

Слайд 89

Сбор интерфейса из компонентов

Сбор интерфейса из компонентов

Слайд 90

Эти способы вряд ли применимы на всех этапах – требуют от

Эти способы вряд ли применимы на всех этапах – требуют от

встречи приличного количества времени. Но они здорово помогут вам и клиенту лучше понять друг друга.
Слайд 91

А это и есть одна из главных задач презентации работ по

А это и есть одна из главных задач презентации работ по

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

Анти-кейс Проблемные места 1001 неприятное последствие Как решить проблему Что и

Анти-кейс
Проблемные места
1001 неприятное последствие
Как решить проблему
Что и когда презентовать
А может все-таки

сэкономим? идеальный способ окружить себя проблемами
Слайд 93

И вот вопрос в том, стоит ли тратить столько времени и

И вот вопрос в том, стоит ли тратить столько времени и

сил на разжевывание чего-то каждому клиенту?
Слайд 94

Может все-таки экономить на этом этапе? Тем более, что уже поджимают сроки на других проектах…

Может все-таки экономить на этом этапе? Тем более, что уже поджимают

сроки на других проектах…
Слайд 95

Да и тут, в общем-то, все и так понятно – решения

Да и тут, в общем-то, все и так понятно – решения

хорошие и проверенные, не хуже чем в целом по отрасли – откуда быть проблемам?
Слайд 96

Мы думали так не раз, на многих проектах. И очень часто

Мы думали так не раз, на многих проектах. И очень часто

повторялась все та же история – недопонимание, бесконечные переделки, цепочка проблем.
Слайд 97

А значит по факту тратилось намного больше времени, чем было сэкономлено.

А значит по факту тратилось намного больше времени, чем было сэкономлено.

Слайд 98

Хуже того – мешая другим проектам и заставляя пытаться сэкономить и там.

Хуже того – мешая другим проектам и заставляя пытаться сэкономить и

там.
Слайд 99

Хуже того – мешая другим проектам и заставляя пытаться… Упс, кажется это уже где-то было.

Хуже того – мешая другим проектам и заставляя пытаться… Упс, кажется

это уже где-то было.
Слайд 100

Тоже не хотите попадать в этот порочный круг? Помните о том,

Тоже не хотите попадать в этот порочный круг? Помните о том,

что лучше не экономить на презентациях.