Connect with us

Разработка

Как получить список экранов и функционала из Value Proposition

Иван Серебренников, UX-дизайнер EPAM, ведущий канала UX Boost в Telegram, рассказал нам о том, как составить карту экранов на основе ценностного предложения.

AppTractor

Опубликовано

/

     
     

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

Пользователь — я сам (чтобы упростить исследование).

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

Итак, берем Value Proposition:

Как получить список экранов и функционала из Value Proposition

И заполняем его. Вот первая итерация:

Как получить список экранов и функционала из Value Proposition

Справа каша, хорошо бы как-то сгруппировать:

Как получить список экранов и функционала из Value Proposition

Все равно, пока непонятно, как вытащить из этого внятное решение, доступное для разбивки на фичи/экраны, при этом не пропустив важного.

Как быть?

Давайте попробуем декомпозировать.

Вот первый кусочек:

Как получить список экранов и функционала из Value Proposition

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

Слева направо:

  • Задача, в рамках которой все происходит (проектировать сложные интерфейсы).
  • Боль, которую пользователь при этом испытывает (много метаний между делами).
  • Пейн реливер, который мог бы избавить от этой боли (помощь в фокусе. Заниматься долго одним делом, откладывая важное, но отвлекающее, на потом).
  • Фича/решение, которая будет предоставлять этот пенй реливер (“откладывалка” отвлекающего).

Ну что, вполне доступный для проектирования кусок, и (скажу как пользователь) — в виде продукта он уже был бы ценен для меня.

Буду ли я использовать именно его для создания продукта? Посмотрим.

Что дальше?

Нужно добавить еще кусочков.

Немного поколдуем, немного сгруппируем…

  • Одна задача — приводить проекты к успеху. Проектом я называю в том числе “организовать работу дизайн команды на проекте”, или “провести воркшоп”.
  • Четыре боли.
  • У обной из болей — два реливера.
  • Все это покрывается тремя модулями продукта, причем два из них пересекаются, когда покрывают боль “много метаний между делами”.

Как это нарезать на кусочки?

Нарезка вот такая:

Приводить проекты к успеху (задача):

  1. но целей слишком много (боль) — нужна помощь в правильной загрузке и отдыхе. Брать на себя столько, сколько могу сделать, иметь выделенное на отдых и восстановление (реливер) — в этом поможет умный постановщик целей (кусок продукта);
  2. но неточность целей (боль) — нужно, чтобы мои цели были поставлены в SMART — в этом поможет умный постановщик целей (кусок продукта);
  3. но есть страх, что не двигаюсь к целям (боль) — нужно, что путь к цели был построен понятно, был измерим, и было легко брать из него куски в работу (реливер) — в этом поможет трекер движения к целям (кусок продукта);
  4. но есть страх, что не двигаюсь к целям (боль) — нужно, чтобы я видел, что осталось для достижения цели, и легко мог прикинуть, сколько на это надо времени (реливер) — в этом поможет трекер движения к целям (кусок продукта);
  5. но много метаний между делами (боль) — нужна помощь в фокусе. Заниматься долго одним делом, откладывая важное, но отвлекающее, на потом (реливер) — в этом поможет откладывалка отвлекающего (кусок продукта);
  6. но много метаний между делами (боль) — нужна помощь в фокусе. Заниматься долго одним делом, откладывая важное, но отвлекающее, на потом (реливер) — в этом поможет трекер движения к целям (кусок продукта).

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

Как от этого придти к экранам?

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

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

Как получить список экранов и функционала из Value Proposition

Я использовал знакомый мне кусочек BPMN. Отобразил самое ключевое для меня в сценарии. Тут пока: не показаны ошибки, есть белые пятна, которые надо бы проработать, а последняя часть, где Ваня таки проверяет почту, а приложение его сопровождает — вообще заменено одним большим прямоугольником. При этом мне все равно гораздо понятнее, что делать с приложением.

Вырисовывается примерно следующее: у меня будет приложение, где будет нечто вроде стики нотсов, только с чеклистами, кнопками, и навигацией. Плюс будут скрины для онбординга и общего образования пользователя. Это приложение поможет Ване сначала настроить почту и подготовить ее для удобного использования, а потом заняться каким-то важным непочтовым делом. Во время этой работе приложение поможет Ване:

  • “пропускать мимо ушей” уведомления о неважной почте;
  • понимать, что пришли важные, но не требующие немедленного ответа письма (и сооветственно, решать “отвечу в ближайший слот проверки почты, а пока работаю дальше”);
  • в случае прихода “горящих” писем — видеть их, правильно переключаться на них (не потеряв важного для текущей задачи), быстро отвечать, не идти дальше в почту и возвращаться к задаче.

Позже я проработаю то, как приложение будут помогать Ване, когда придет время таки прочитать почту.

Что же получается по экранам?

  1. Обучающие скрины
  2. Уведомления
  3. Стики-нотс с:
    • чеклистами
    • опросниками
    • действиями
    • навигацией

В данном случае я хочу пойти итеративно — набросать screen flow для освещенной выше части приложения, потом запрототипирую ее, а потом актуализирую более-менее полный набор сценариев, которые буду покрывать своим приложением (добавляю всякие разные ошибки, переносы временных слотов и прочую глубину).

Итого

Мне хотелось придти от понимания ценностного предложения к понимаю скринов и их содержимого — я его получил :) При желании я могу работать над этой частью и расширять свое понимание, но хочется нырнуть, попроектировать-порисовать, и потом сделать шаг назад и доработать “архитектуру”.

Комментарии
Если вы нашли опечатку - выделите ее и нажмите Ctrl + Enter! Для связи с нами вы можете использовать info@apptractor.ru.
Advertisement
Click to comment

You must be logged in to post a comment Login

Leave a Reply

Новости

Интересные материалы: 24.05

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

AppTractor

Опубликовано

/

Автор:

Весь день мы собираем лучшие материалы о разработке и маркетинге технологий, стартапов, мобильных приложений и игр для iOS и Android из самых разных источников:

Комментарии
Продолжить чтение

Дизайн и прототипирование

Инструменты дизайна и прототипирования – что используют разработчики приложений

Как создается дизайн для нового приложения? Какие инструменты для разработки дизайна мобильных приложений используют студии? Как у них выстроен поток создания дизайна — от прототипа до конечного продукта? Мы поговорили с несколькими российскими студиями и выяснили, как они рисуют прототипы и доводят их до производства.

AppTractor

Опубликовано

/

Автор:

Дмитрий Нор, директор компании SkySoft

  

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

После того, как требования известны, мы приступает к созданию прототипа. В основном мы используем программу Balsamiq Mockups, так как в ней можно делать прототипы для веб-сайтов и мобильных приложений. Программа простая и очень удобная. И с помощью нее можно решить практически любые задачи по созданию прототипов. Иногда мы используем Axure RP. Выбор программы зависит от задач проекта и в основном он делается так: в чем удобнее, там и рисуем.

После того как прототип или прототипы (опять же зависит от сложности проекта и его задач) мы отдаем его на согласование клиенту и рассказываем, как потом все будет работать (если он сам не понимает). Если у клиента не возникает желания что-то переделать, то пускаем в дальнейшую работу, если возникает – переделываем и после утверждения пускаем в дальнейшую работу.

Потом рисуется сам дизайн по прототипу. Иногда рисуется самостоятельно, иногда берутся готовые шаблоны (все опять же зависит от задач проекта и его бюджета). Из программного обеспечения мы в основном используем Adobe Photoshop. Его функционала достаточно для создания тех проектов, которые мы делаем. Иногда мы используем Adobe Illustrator. В этом приложении удобно рисовать векторную графику.

После того, как макет дизайна готов – мы отдаем на согласование клиенту. Если возникают правки – делаем, еще раз согласовываем и запускаем в дальнейшую работу.

Дина Мильштейн, руководитель отдела дизайна EastBanc Technologies

    

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

На старте проекта для каждого мобильного приложения мы вырабатываем дизайн-концепцию на 5-10 экранов и согласовываем с заказчиком.

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

Прототипирование UI/UX — бумага и Sketch

Чтобы разобраться, как будет работать мобильное приложение, мы делаем первые наброски на бумаге, а потом переносим их в Sketch. Мы прошли путь от Photoshop к Sketch, эргономичной программы, сделанной для разработки интерфейсов. От Photoshop категорично не отказываемся, он идеально подходит для работы с растрами. Выбор инструмента всегда зависит от задачи. Всё должно быть уместным.

Нужен цифровой бренд-бук. Если его нет — надо создать

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

Иллюстрации в Illustrator

Мы делаем наши приложения «тёплыми», чтобы люди, работая с ними, испытывали не только удобство, но и теплые эмоции. Поэтому в случаях, когда это уместно, мы добавляем иллюстрации в наши приложения. Идеальным инструментом для создания иллюстраций, на наш взгляд, является программа Illustrator.

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

Когда логика и стилистика готовы, мы примеряем этот «костюм» на заказчика и представляем ему решение. Чтобы презентовать задуманное, используем анимированный прототип решения в Invision. Это повышает эффективность коммуникации как с заказчиком, так и с разработчиками.

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

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

Анимация и поведение — Flinto

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

Нарезка и передача в разработку — Zeplin

Дальше двигаемся итерациями: отрисовали, согласовали с заказчиком, отдали разработчикам в Zeplin. И так до финального релиза — методично и кропотливо трудимся над разделами в рамках согласованной концепции, сохраняя первоначальное качество.

Качественный результат гарантирован процессом

Мы щепетильно относимся к мелочам и фактам. Всё должно соответствовать задаче и выглядеть достоверным, чтобы заказчик сразу соотносил увиденное со своими рабочими процессами.

На каждом этапе разработки UI/UX от идеи до готового продукта мы последовательно фиксируем понятный, ограниченный и полностью проработанный элемент визуальной платформы. На рынке постоянно дорабатываются существующие и появляются новые инструменты. Главное держать в голове, зачем они нужны именно вам и какой именно результат вы планируете получить.

Евгения Горбунова, Finch

  

Мы уже 10 лет создаем приложения для крупных брендов вроде ТНТ, Спартака, ТВ-3, Столото. В нашей работе мы используем достаточно стандартный набор инструментов: Sketch, Zeplin, Sympli, Adobe Photoshop, Adobe Illustrator.

Для дизайна макетов в основном используем Sketch. Что касается самого процесса разработки дизайна, то тут всегда по-разному. Обычно мы работаем по алгоритму «бумага» → «прототип» → «дизайн». То есть наш дизайнер сперва тратит время на поиска решения на бумаге, затем начинает рисовать прототипы и макеты в Sketch и только после этого занимается дизайном. На последнем этапе, как правило, клиенты оставляют наибольшее количество правок: цвета не те, иконки другие, форму стоит поменять и т.д. Поэтому у нас бывали случаи, когда после финального дизайна, мы начинали все по новой и вновь ныряли с головой в проект, чтобы найти другое решение.

Ольга Костина, ведущий UI/UX дизайнер Seven Winds Studio

   

В нашей студии разработка дизайна мобильных приложений происходит следующим образом. На основе ТЗ создаётся прототип. До настоящего времени мы использовали для прототипирования NinjaMock, но планируем перейти на другую платформу. Сейчас присматриваемся к другим сервисам, среди которых Marvel, Invision и Flinto.

Дизайн интерфейса создаём в Sketch, и затем экспортируем готовые экраны в Zepelin для работы верстальщиков с ними. Иногда, наравне со Sketch, используем Figma. Этот сервис удобен тем, что над одним проектом могут работать несколько дизайнеров одновременно, и все изменения сохраняются в одном проекте, c которым впоследствии работают те, кто верстает экраны.

Юлия Гулюк, Grapheme

    

Раньше для проектирования и разработки интерфейсов мы использовали связку Sketch Zeppelin, а для демонстрации дизайна клиенту мы создавали интерактивные прототипы в Marvel или Invision. Когда макет дизайн был утвержден, мы прибегали к помощи моушн-дизайнера, чтобы упростить коммуникацию с верстальщиками. Он визуализировал идеи команды дизайнеров, чтобы разработчикам можно было наглядно объяснить, какие эффекты задумали дизайнеры и как их нужно реализовать. В общем, это был достаточно сложный процесс. Он требовал применения различных инструментов и отнимал много времени специалистов. Особенно много времени и сил уходило на коммуникацию. Но самым большим недостатком этого подхода была невозможность установить Sketch на любые другие платформы, кроме macOS.

Потом мы открыли для себя Figma и стали счастливее. Это приложение позволяет работать всей команде одновременно в одной среде на любой ОС. Там же осуществляется коммуникация как друг с другом, так и с клиентом посредством комментариев к элементам, ведь в Figma можно делать интерактивные прототипы и сразу показывать клиентам. Обычно работа над дизайном проекта начинается с прототипирования. У нас этим занимается любой свободный дизайнер. Со свежей головой он вникает, задает вектор и приглашает в приложение еще одного дизайнера, если приложение сложное или требуется взгляд со стороны. На этом этапе идет детальная разработка прототипов. Уже здесь команда решает, какая будет сетка и почему, какие будут шрифты, кегли, легко ли они будут читаться пользователем. Все это прорабатывается параллельно с архитектурой приложения, создания гайдов для элементов. Пожалуй, это самая сложная и длительная часть в разработке дизайна приложения.

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

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

Подкаст AppTractor: дизайн мобильных приложений

Комментарии
Продолжить чтение

Новости

Интересные материалы: 23.05

В новом дайджесте рассказы про Material Design, ухудшающие A/B тесты и, как обычно, улучшения продуктивности – теперь для соло-разработчиков.

AppTractor

Опубликовано

/

Автор:

Весь день мы собираем лучшие материалы о разработке и маркетинге технологий, стартапов, мобильных приложений и игр для iOS и Android из самых разных источников:

Комментарии
Продолжить чтение

Медиа

Podlodka #60: Женщины в IT

Для юбилейного выпуска выбрали щекотливую тему – женщины в IT.

AppTractor

Опубликовано

/

Автор:

Podlodka

Несмотря на довольную веселую подачу с шутками и прибаутками, авторы попытались разобраться в сложной теме дайверсити. Действительно ли есть такая проблема, а главное, что с этим всем делать, чтобы не перегнуть палку? Выпуск полон историй из жизни Кати Петровой из стартапа и Аси Кононовой из Яндекса, а также присыпан щепоткой микроагрессии от Егора и Стаса. Словарное слово выпуска: “цисгендер”.

Комментарии
Продолжить чтение

Реклама

Наша рассылка

Нажимая на кнопку "Подписаться" вы даете согласие на обработку персональных данных.

Вакансии

Популярное

X
X

Спасибо!

Теперь редакторы в курсе.