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

Нажмите для полного просмотра!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Содержание ▲

Вы можете ознакомиться и скачать Как показать интерфейс клиенту Так, чтобы не было мучительно больно. Презентация содержит 101 слайдов. Презентации для любого класса можно скачать бесплатно. Если материал и наш сайт презентаций Вам понравились – поделитесь им с друзьями с помощью социальных кнопок и добавьте в закладки в своем браузере.

Слайды и текст этой презентации

Слайд 1

Описание слайда:

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

Слайд 2

Описание слайда:

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

Слайд 3

Описание слайда:

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

Слайд 4

Описание слайда:

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

Слайд 5

Описание слайда:

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

Слайд 6

Описание слайда:

Многие из комментариев противоречивы – где-то не заметили очевидного, где-то не так поняли, где-то поменяли первоначальное мнение, где-то предлагают неуместное решение.

Слайд 7

Описание слайда:

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

Слайд 8

Описание слайда:

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

Слайд 9

Описание слайда:

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

Слайд 10

Описание слайда:

Слайд 11

Описание слайда:

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

Слайд 12

Описание слайда:

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

Слайд 13

Описание слайда:

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

Слайд 14

Описание слайда:

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

Слайд 15

Описание слайда:

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

Слайд 16

Описание слайда:

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

Слайд 17

Описание слайда:

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

Слайд 18

Описание слайда:

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

Слайд 19

Описание слайда:

И, скорее всего, он уже пишет вам письмо с читающимся между строк вопросом «что за халтуру вы мне прислали?!».

Слайд 20

Описание слайда:

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

Слайд 21

Описание слайда:

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

Слайд 22

Описание слайда:

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

Слайд 23

Описание слайда:

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

Слайд 24

Описание слайда:

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

Слайд 25

Описание слайда:

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

Слайд 26

Описание слайда:

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

Слайд 27

Описание слайда:

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

Слайд 28

Описание слайда:

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

Слайд 29

Описание слайда:

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

Слайд 30

Описание слайда:

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

Слайд 31

Описание слайда:

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

Слайд 32

Описание слайда:

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

Слайд 33

Описание слайда:

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

Слайд 34

Описание слайда:

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

Слайд 35

Описание слайда:

Хотя, конечно, еще и хочет убедиться в том, что вы не халтурите и предлагаете не первое попавшееся решение.

Слайд 36

Описание слайда:

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

Слайд 37

Описание слайда:

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

Слайд 38

Описание слайда:

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

Слайд 39

Описание слайда:

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

Слайд 40

Описание слайда:

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

Слайд 41

Описание слайда:

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

Слайд 42

Описание слайда:

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

Слайд 43

Описание слайда:

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

Слайд 44

Описание слайда:

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

Слайд 45

Описание слайда:

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

Слайд 46

Описание слайда:

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

Слайд 47

Описание слайда:

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

Слайд 48

Описание слайда:

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

Слайд 49

Описание слайда:

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

Слайд 50

Описание слайда:

Дизайн?

Слайд 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 неприятное последствие Как решить проблему Что и когда презентовать А может все-таки сэкономим? идеальный способ окружить себя проблемами