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

Смотреть слайды в полном размере
Презентация Как показать интерфейс клиенту Так, чтобы не было мучительно больно


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

Презентация содержит 101 слайд и доступна для скачивания в формате ppt. Размер скачиваемого файла: 9.01 MB

Просмотреть и скачать

Pic.1
Как показать интерфейс клиенту Так, чтобы не было мучительно больно
Как показать интерфейс клиенту Так, чтобы не было мучительно больно
Pic.2
О чем этот рассказ? Почему, даже предлагая хорошее решение, мы часто сталкиваемся с необоснованной к
О чем этот рассказ? Почему, даже предлагая хорошее решение, мы часто сталкиваемся с необоснованной критикой? Почему экономия на презентации работ часто выходит боком. Что, как и когда можно показывать клиенту.
Pic.3
Анти-кейс я никогда, никогда, никогда больше не буду отправлять результаты работ по электронной почт
Анти-кейс я никогда, никогда, никогда больше не буду отправлять результаты работ по электронной почте Анти-кейс я никогда, никогда, никогда больше не буду отправлять результаты работ по электронной почте Проблемные места 1001 неприятное последствие Как решить проблему Что и когда презентовать А может все-таки сэкономим?
Pic.4
. . . в один из типичных рабочих дней, как это принято, отправляю клиенту пачку структурных схем стр
. . . в один из типичных рабочих дней, как это принято, отправляю клиенту пачку структурных схем страниц по проекту.
Pic.5
На утро приходит ответ с парой десятков замечаний и легким недовольством в тоне письма.
На утро приходит ответ с парой десятков замечаний и легким недовольством в тоне письма.
Pic.6
Многие из комментариев противоречивы – где-то не заметили очевидного, где-то не так поняли, где-то п
Многие из комментариев противоречивы – где-то не заметили очевидного, где-то не так поняли, где-то поменяли первоначальное мнение, где-то предлагают неуместное решение.
Pic.7
Спустя пару десятков писем в переписке все, кажется, утвердили. Но красивая изначальная идея уже не
Спустя пару десятков писем в переписке все, кажется, утвердили. Но красивая изначальная идея уже не так хороша. И хуже того – со следующими страницами эпопея повторяется.
Pic.8
При этом на живых презентациях всегда было более гладко – есть взаимопонимание, уходят многие вопрос
При этом на живых презентациях всегда было более гладко – есть взаимопонимание, уходят многие вопросы. И даже если само обсуждение сложное – результат есть и он позволяет проекту двигаться вперед.
Pic.9
В какой-то момент мы поняли, что практику «отправил и ждешь» нужно забыть – все, что может быть поня
В какой-то момент мы поняли, что практику «отправил и ждешь» нужно забыть – все, что может быть понято неправильно, будет понято неправильно. С этого момента при любой возможности стараемся презентовать работы лично.
Pic.10
Как показать интерфейс клиенту Так, чтобы не было мучительно больно, слайд 10
Pic.11
Анти-кейс Анти-кейс Проблемные места почему так происходит 1001 неприятное последствие Как решить пр
Анти-кейс Анти-кейс Проблемные места почему так происходит 1001 неприятное последствие Как решить проблему Что и когда презентовать А может все-таки сэкономим?
Pic.12
Почему так происходит? При проектировании интерфейса мы можем решить поставленную задачу несколькими
Почему так происходит? При проектировании интерфейса мы можем решить поставленную задачу несколькими способами.
Pic.13
Один из этих подходов быстрее и дешевле во внедрении.
Один из этих подходов быстрее и дешевле во внедрении.
Pic.14
Другой способ позволит сделать максимально эффективными ключевые сценарии использования.
Другой способ позволит сделать максимально эффективными ключевые сценарии использования.
Pic.15
Третий вариант продаст больше рекламы.
Третий вариант продаст больше рекламы.
Pic.16
Проблема в том, что таких требований десятки и все их нужно как-то сочетать в предлагаемом решении.
Проблема в том, что таких требований десятки и все их нужно как-то сочетать в предлагаемом решении.
Pic.17
И из пространства возможных решений приходится выбирать 1-2 наиболее оптимально подходящих к требова
И из пространства возможных решений приходится выбирать 1-2 наиболее оптимально подходящих к требованиям.
Pic.18
Но когда результат отправляется клиенту без особых пояснений, он в пространстве решений часто видит
Но когда результат отправляется клиенту без особых пояснений, он в пространстве решений часто видит не то что мы.
Pic.19
И, скорее всего, он уже пишет вам письмо с читающимся между строк вопросом «что за халтуру вы мне пр
И, скорее всего, он уже пишет вам письмо с читающимся между строк вопросом «что за халтуру вы мне прислали?!».
Pic.20
А значит процесс работы над проектом затягивается до выяснения обстоятельств. И отношения постепенно
А значит процесс работы над проектом затягивается до выяснения обстоятельств. И отношения постепенно накаляются…
Pic.21
Анти-кейс Анти-кейс Проблемные места 1001 неприятное последствие к чему приводит недопонимание Как р
Анти-кейс Анти-кейс Проблемные места 1001 неприятное последствие к чему приводит недопонимание Как решить проблему Что и когда презентовать А может все-таки сэкономим?
Pic.22
К чему кроме испорченных нервов приводит недопонимание?
К чему кроме испорченных нервов приводит недопонимание?
Pic.23
Увеличение объема работ за счет незапланированных переделок. А это съедает маржу и отвлекает ресурсы
Увеличение объема работ за счет незапланированных переделок. А это съедает маржу и отвлекает ресурсы.
Pic.24
Увеличение издержек на ведение проекта – менеджер тратит больше времени, своего и клиента.
Увеличение издержек на ведение проекта – менеджер тратит больше времени, своего и клиента.
Pic.25
Увеличение сроков работ – а это ломает планы и клиента, и команды проектирования.
Увеличение сроков работ – а это ломает планы и клиента, и команды проектирования.
Pic.26
Ухудшение качества итогового результата – путем нарастающего потока правок красивая изначальная конц
Ухудшение качества итогового результата – путем нарастающего потока правок красивая изначальная концепция рушится.
Pic.27
Все это делает проект менее интересным для подрядчика – как в плане прибыли, так и в плане примера д
Все это делает проект менее интересным для подрядчика – как в плане прибыли, так и в плане примера для портфолио.
Pic.28
И, конечно, снижает вероятность повторного обращения со стороны клиента.
И, конечно, снижает вероятность повторного обращения со стороны клиента.
Pic.29
Все это плохо не только для компании-подрядчика – в случае in-house-команды разработчики в следующий
Все это плохо не только для компании-подрядчика – в случае in-house-команды разработчики в следующий раз постараются сделать интерфейс сами, чтобы не сталкиваться с проблемными коллегами. А ваша концепция может сильно пострадать в результате такой самодеятельности.
Pic.30
Никому не нужна лишняя головная боль, так что проблему лучше решать. Это поможет и текущему проекту,
Никому не нужна лишняя головная боль, так что проблему лучше решать. Это поможет и текущему проекту, и последующим.
Pic.31
Анти-кейс Анти-кейс Проблемные места 1001 неприятное последствие Как решить проблему несколько спосо
Анти-кейс Анти-кейс Проблемные места 1001 неприятное последствие Как решить проблему несколько способов предусмотреть сложности Что и когда презентовать А может все-таки сэкономим?
Pic.32
Наша задача – сделать так, чтобы и мы, и клиент одинаково понимали пространство возможных решений и
Наша задача – сделать так, чтобы и мы, и клиент одинаково понимали пространство возможных решений и выбрали из него оптимальный вариант.
Pic.33
Слышали ли вы от него фразу «Так покажите же нам и плохие варианты»?
Слышали ли вы от него фразу «Так покажите же нам и плохие варианты»?
Pic.34
Она о том же – клиент тоже хочет знать, какие еще решения задачи могут быть.
Она о том же – клиент тоже хочет знать, какие еще решения задачи могут быть.
Pic.35
Хотя, конечно, еще и хочет убедиться в том, что вы не халтурите и предлагаете не первое попавшееся р
Хотя, конечно, еще и хочет убедиться в том, что вы не халтурите и предлагаете не первое попавшееся решение.
Pic.36
Не буду о важности хорошо поставленного процесса проектирования, включающего предварительные исследо
Не буду о важности хорошо поставленного процесса проектирования, включающего предварительные исследования, формализацию требований и другие критичные проектные работы – без него проблемы начнутся еще раньше.
Pic.37
Как мы можем «синхронизировать» понимание задачи с клиентом?
Как мы можем «синхронизировать» понимание задачи с клиентом?
Pic.38
Формировать правильные ожидания в начале работ.
Формировать правильные ожидания в начале работ.
Pic.39
Обучать клиента – хорошо, если он понимает о чем мы говорим.
Обучать клиента – хорошо, если он понимает о чем мы говорим.
Pic.40
Скрывать уровни абстракции – в этом случае тратить времени на обучение клиента нужно будет меньше.
Скрывать уровни абстракции – в этом случае тратить времени на обучение клиента нужно будет меньше.
Pic.41
И главное – регулярно презентовать результаты работ и то, как мы решаем с их помощью поставленную за
И главное – регулярно презентовать результаты работ и то, как мы решаем с их помощью поставленную задачу.
Pic.42
Анти-кейс Анти-кейс Проблемные места 1001 неприятное последствие Как решить проблему Что и когда пре
Анти-кейс Анти-кейс Проблемные места 1001 неприятное последствие Как решить проблему Что и когда презентовать десяток способов вовлечь клиента в работу над интерфейсом А может все-таки сэкономим?
Pic.43
Выбор того что показывать достаточно большой, причем многие из демо-материалов в любом случае готовя
Выбор того что показывать достаточно большой, причем многие из демо-материалов в любом случае готовятся в ходе работ.
Pic.44
Самое простое и эффективное – структурные схемы страниц и дизайн-макеты. Ведь мы делаем их в любом с
Самое простое и эффективное – структурные схемы страниц и дизайн-макеты. Ведь мы делаем их в любом случае как часть работ по проектированию интерфейса. К тому же понять не так тут поводов больше всего.
Pic.45
Структурные схемы страниц и дизайн-макеты
Структурные схемы страниц и дизайн-макеты
Pic.46
Презентовать их нужно обязательно лично с самых первых этапов проекта. Подробно рассказывая о каждом
Презентовать их нужно обязательно лично с самых первых этапов проекта. Подробно рассказывая о каждом элементе – что это и зачем используется.
Pic.47
А еще вы сможете объяснить, почему выбраны именно эти решения, а другие отброшены. Ну и ответить на
А еще вы сможете объяснить, почему выбраны именно эти решения, а другие отброшены. Ну и ответить на сотню других вопросов сразу же – возникают они обязательно, лучше не оставлять это не самому эффективному способу проектной коммуникации – переписке.
Pic.48
Выбор из пространства решений
Выбор из пространства решений
Pic.49
К тому же многие сталкивались с тем, что часть клиентов не мыслит абстрактно и не понимает wireframe
К тому же многие сталкивались с тем, что часть клиентов не мыслит абстрактно и не понимает wireframes. Личная презентация в таком случае чуть ли не единственный способ быть понятым.
Pic.50
Дизайн?
Дизайн?
Pic.51
Еще лучший способ рассказать о решении – показать весь процесс в динамике.
Еще лучший способ рассказать о решении – показать весь процесс в динамике.
Pic.52
Идеальный вариант – интерактивный прототип. Во-первых, система уже «работает» – клиент сам может пок
Идеальный вариант – интерактивный прототип. Во-первых, система уже «работает» – клиент сам может покликать ее, а тому кто видел это своими глазами сложно переоценить достигнутый эффект.
Pic.53
Во-вторых, можно пройтись по основным процессам, попробовать выполнить типовые задачи, понять наскол
Во-вторых, можно пройтись по основным процессам, попробовать выполнить типовые задачи, понять насколько удобны конкретные решения на практике.
Pic.54
Интерактивный прототип
Интерактивный прототип
Pic.55
Еще лучше то, что можно поэкспериментировать с разными решениями задачи и, опять же, сразу пощупать
Еще лучше то, что можно поэкспериментировать с разными решениями задачи и, опять же, сразу пощупать их вживую.
Pic.56
Версии интерактивного прототипа
Версии интерактивного прототипа
Pic.57
А если прототип будет достаточно проработанным – он включает в себя JavaScript-динамику, имитирует р
А если прототип будет достаточно проработанным – он включает в себя JavaScript-динамику, имитирует работу с сервером, выполнен в финальном дизайне – клиенту и вовсе не придется мыслить абстрактно.
Pic.58
Да и сам клиент сможет показать свой будущий продукт коллегам, партнерам и потенциальным клиентам –
Да и сам клиент сможет показать свой будущий продукт коллегам, партнерам и потенциальным клиентам – а это уже начало возврата инвестиций в проектирование.
Pic.59
С интерактивным прототипом есть только одна проблема – хороший прототип долго создавать и не всегда
С интерактивным прототипом есть только одна проблема – хороший прототип долго создавать и не всегда просто поддерживать.
Pic.60
Поэтому есть и другие способы показать процесс в динамике. В первую очередь это диаграммы процессов
Поэтому есть и другие способы показать процесс в динамике. В первую очередь это диаграммы процессов и переходов между страницами.
Pic.61
Пользовательский сценарий
Пользовательский сценарий
Pic.62
Они показывают, как система решает конкретную задачу с помощью страниц интерфейса – например, покупк
Они показывают, как система решает конкретную задачу с помощью страниц интерфейса – например, покупка товара в интернет-магазине или регистрация нового пользователя.
Pic.63
Тут отлично подойдет ватман или другая большая поверхность – страницы можно будет показать не в виде
Тут отлично подойдет ватман или другая большая поверхность – страницы можно будет показать не в виде абстрактных прямоугольников, а самих структурных схем. А это еще на один уровень абстракции меньше.
Pic.64
Проектирование на ватмане
Проектирование на ватмане
Pic.65
Мы выделяем на этих диаграммах основные и второстепенные сценарии работы, показываем точки входа и в
Мы выделяем на этих диаграммах основные и второстепенные сценарии работы, показываем точки входа и выхода из процесса, связываем это все с портретами пользователей.
Pic.66
А если нам известны данные веб-аналитики – можно объединить диаграмму процесса с «воронкой» и нагляд
А если нам известны данные веб-аналитики – можно объединить диаграмму процесса с «воронкой» и наглядно показать, где и сколько пользователей мы теряем.
Pic.67
Диаграмма + воронка конверсии
Диаграмма + воронка конверсии
Pic.68
Причем если у нас есть возможность сравнить старое решение с новым в виде двух диаграмм – это еще на
Причем если у нас есть возможность сравнить старое решение с новым в виде двух диаграмм – это еще нагляднее покажет эффективность предлагаемых решений.
Pic.69
Особенно приятно то, когда клиенты просят оставить такие листы ватмана себе – причем случается это д
Особенно приятно то, когда клиенты просят оставить такие листы ватмана себе – причем случается это достаточно часто.
Pic.70
Альтернативный способ показа будущего продукта в динамике – заранее подготовленное видео или презент
Альтернативный способ показа будущего продукта в динамике – заранее подготовленное видео или презентация с проходом по основным сценариям.
Pic.71
Презентация этапа работ
Презентация этапа работ
Pic.72
Они подходят скорее для случаев, когда лично встретиться нет возможности. Хотя это достаточно скучны
Они подходят скорее для случаев, когда лично встретиться нет возможности. Хотя это достаточно скучные вещи (интерактивность у них невысокая), работают они в любом случае лучше простого письма.
Pic.73
А что делать, если на текущей стадии нет конкретных результатов работ – только данные предварительно
А что делать, если на текущей стадии нет конкретных результатов работ – только данные предварительного исследования или анализа? Это могут быть, например, персонажи, описание сценариев взаимодействия, moodboards.
Pic.74
Предварительные документы
Предварительные документы
Pic.75
Нужно показывать и их тоже – ведь наша задача не только в том чтобы сдать работы в виде пачки структ
Нужно показывать и их тоже – ведь наша задача не только в том чтобы сдать работы в виде пачки структурных схем страниц и дизайн-макетов, но и обеспечить гладкий процесс работы над проектом. Хорошо, когда клиент вовлечен в процесс, понимает куда мы идем и на чем основываем свои решения.
Pic.76
Обзор процесса работы
Обзор процесса работы
Pic.77
Кроме того, мы можем получить полезные инсайты и комментарии. Ведь документы это не только результат
Кроме того, мы можем получить полезные инсайты и комментарии. Ведь документы это не только результат работ, но и приглашение к обсуждению проблемы. Многим проще критиковать, чем предлагать свое и стоит использовать эту особенность на пользу дела.
Pic.78
Правки от клиента
Правки от клиента
Pic.79
Кстати, говоря о вовлечении, можно пойти еще дальше – включать клиента в процесс продумывания интерф
Кстати, говоря о вовлечении, можно пойти еще дальше – включать клиента в процесс продумывания интерфейса.
Pic.80
Самый простой способ – рисование скетчей, когда мы вместе рисуем экраны на бумаге, флипчарте или мар
Самый простой способ – рисование скетчей, когда мы вместе рисуем экраны на бумаге, флипчарте или маркерной доске.
Pic.81
Скетчи интерфейса
Скетчи интерфейса
Pic.82
Это позволяет показывать процесс нашей работы, то как мы выбираем оптимальные решения из пространств
Это позволяет показывать процесс нашей работы, то как мы выбираем оптимальные решения из пространства доступных.
Pic.83
Работа над скетчами
Работа над скетчами
Pic.84
Правда, скетчи чересчур абстрактны для многих клиентов и не гарантируют принятие созданных на их осн
Правда, скетчи чересчур абстрактны для многих клиентов и не гарантируют принятие созданных на их основе структурных схем страниц.
Pic.85
Еще лучший способ оживить рассказ и вовлечь клиента в процесс – сбор интерфейса из готовых компонент
Еще лучший способ оживить рассказ и вовлечь клиента в процесс – сбор интерфейса из готовых компонентов.
Pic.86
Это может быть построение формы из набора полей на листе бумаги.
Это может быть построение формы из набора полей на листе бумаги.
Pic.87
Сбор формы из готовых элементов
Сбор формы из готовых элементов
Pic.88
Или попытка собрать страницу из готовых интерфейсных блоков, вырезанных из бумаги.
Или попытка собрать страницу из готовых интерфейсных блоков, вырезанных из бумаги.
Pic.89
Сбор интерфейса из компонентов
Сбор интерфейса из компонентов
Pic.90
Эти способы вряд ли применимы на всех этапах – требуют от встречи приличного количества времени. Но
Эти способы вряд ли применимы на всех этапах – требуют от встречи приличного количества времени. Но они здорово помогут вам и клиенту лучше понять друг друга.
Pic.91
А это и есть одна из главных задач презентации работ по проектированию интерфейса – не только решить
А это и есть одна из главных задач презентации работ по проектированию интерфейса – не только решить задачу клиента, но и быть уверенным в том что это решение лучшее из возможных в текущих ограничениях.
Pic.92
Анти-кейс Анти-кейс Проблемные места 1001 неприятное последствие Как решить проблему Что и когда пре
Анти-кейс Анти-кейс Проблемные места 1001 неприятное последствие Как решить проблему Что и когда презентовать А может все-таки сэкономим? идеальный способ окружить себя проблемами
Pic.93
И вот вопрос в том, стоит ли тратить столько времени и сил на разжевывание чего-то каждому клиенту?
И вот вопрос в том, стоит ли тратить столько времени и сил на разжевывание чего-то каждому клиенту?
Pic.94
Может все-таки экономить на этом этапе? Тем более, что уже поджимают сроки на других проектах…
Может все-таки экономить на этом этапе? Тем более, что уже поджимают сроки на других проектах…
Pic.95
Да и тут, в общем-то, все и так понятно – решения хорошие и проверенные, не хуже чем в целом по отра
Да и тут, в общем-то, все и так понятно – решения хорошие и проверенные, не хуже чем в целом по отрасли – откуда быть проблемам?
Pic.96
Мы думали так не раз, на многих проектах. И очень часто повторялась все та же история – недопонимани
Мы думали так не раз, на многих проектах. И очень часто повторялась все та же история – недопонимание, бесконечные переделки, цепочка проблем.
Pic.97
А значит по факту тратилось намного больше времени, чем было сэкономлено.
А значит по факту тратилось намного больше времени, чем было сэкономлено.
Pic.98
Хуже того – мешая другим проектам и заставляя пытаться сэкономить и там.
Хуже того – мешая другим проектам и заставляя пытаться сэкономить и там.
Pic.99
Хуже того – мешая другим проектам и заставляя пытаться… Упс, кажется это уже где-то было.
Хуже того – мешая другим проектам и заставляя пытаться… Упс, кажется это уже где-то было.
Pic.100
Тоже не хотите попадать в этот порочный круг? Помните о том, что лучше не экономить на презентациях.
Тоже не хотите попадать в этот порочный круг? Помните о том, что лучше не экономить на презентациях.
Pic.101
Спасибо!
Спасибо!


Скачать презентацию

Если вам понравился сайт и размещенные на нем материалы, пожалуйста, не забывайте поделиться этой страничкой в социальных сетях и с друзьями! Спасибо!