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

Категория: Дизайн


500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500

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

Слайд 93
Описание слайда:
И вот вопрос в том, стоит ли тратить столько времени и сил на разжевывание чего-то каждому клиенту?

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

Слайд 95
Описание слайда:
Да и тут, в общем-то, все и так понятно – решения хорошие и проверенные, не хуже чем в целом по отрасли – откуда быть проблемам?

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

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

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

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

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

Слайд 101
Описание слайда:
Спасибо!



Похожие презентации

Mypresentation.ru

Загрузить презентацию