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

Новости

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

На ночь глядя разбираемся с Tensorflow, менторством джуниоров и магией бумаги.

AppTractor

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

/

Автор:

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

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

Обучение

От данных к действиям с Airbnb Plus

История Data Science-интерна, который провел лето в Airbnb.

AppTractor

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

/

Автор:

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

Этим летом Габриэль Сикуэйра прошел стажировку по Data Science в новой команде Airbnb Plus. В этой статье он отвечает на некоторые распространенные вопросы о Data Scientists в Airbnb и проливает некоторый свет на то, что действительно делает стажер в Больших Данных.

 

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

Интервью

Евгений Кот (Wrike): Dart стал гораздо серьезнее!

Каково будущее Dart? Что нового в версии Dart 2.0 по сравнению с предыдущей? Евгений Кот ответил на наши вопросы про язык, на котором разрабатывается продукт в Wrike, а также рассказал про DartUp – первую русскоязычную конференцию пo Dart/Flutter, которая пройдет 1 декабря в Санкт-Петербурге.

AppTractor

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

/

Автор:

Евгений Кот – фронтенд тимлид в компании Wrike. До этого чем только не занимался, был C++ и C#. В Dell начал заниматься фронтендом, так и завертелось. Также Евгений –  Dart GDE (Google Developer Expert).

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

Когда я только пришёл в Wrike ( это было четыре года назад) нас было гораздо меньше, а фронтенд за это время вырос аж в семь раз! Тогда мы писали всё на JavaScript. Также у нас был ExtJS третьей версии, включая части других фреймворков. Продукту всё-таки уже десять лет.  Эти технологии не так плохи сами по себе, но вдесятером поддерживать такой проект становилось всё сложнее. В тот момент стало понятно, что компания и команда будут расти вместе с продуктом. Нам была нужна типизация – чем строже, тем лучше. В те времена выбор был небольшой: Flow и TypeScript только начинали развиваться, но не давали должной уверенности. Стали искать альтернативы и наткнулись на Dart. Тогда, конечно, инструменты были “сырее” и сам язык был немного другой. Но мы не побоялись и поставили на “тёмную лошадку”. О том, почему мы перешли на Dart,  можно почитать в нашей статье.

Dart — язык программирования, созданный Google. Dart позиционируется в качестве замены/альтернативы JavaScript. Один из разработчиков языка Марк Миллер написал, что JavaScript «имеет фундаментальные изъяны», которые невозможно исправить. Поэтому и был создан Dart.

Первая общедоступная информация об этом языке программирования появилась 12 сентября 2011 года на конференции разработчиков Goto. 10 октября 2011 была проведена официальная презентация языка Google Dart.

Задачи, поставленные перед разработчиками языка:

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

Dart: как и где он используется?

Ну-с, немного ликбеза. Dart – язык, созданный Google уже больше шести лет назад. Он имеет строгую типизацию, SDK и свою экосистему и может исполняться на различных платформах. Сами разработчики позиционируют его как “язык, оптимизированный для клиентской разработки“. Таким образом, он лучше всего подходит для разработки именно клиентских приложений – Web и Mobile. На бекенде его тоже можно использовать, но там конкуренция инструментов гораздо выше.

Чтобы понять бенефиты Dart, надо просто попробовать написать большое приложение, например, на JavaScript – недостатки слабой системы типов рано или поздно всплывут. Тут конечно можно со мной поспорить, и я с радостью это сделаю, пишите в соцсети :-) Мы используем его для создания web-части нашего продукта. Также у нас есть несколько критических сервисов, написанных на Dart, и мы присматриваемся к мобильным возможностям языка.

Многие нам говорят – “так на нём никто не пишет, только Wrike, что же его использовать”. Это совсем не так. В русскоговорящем сообществе мы, пожалуй, самые большие его потребители –  это правда. Даже коллеги из Google признают, что у нас самое большое после них web-приложение. Но компаний много: например, Workiva. Сам Google перешёл на Dart в AdWords – это их основной сервис для зарабатывания денег. Малейшая бага – и всё, миллионов нет.

В русскоязычном сегменте появляются вакансии и компании, которым интересен данный язык программирования. Кстати, на конференции DartUP, которая пройдет в Петербурге уже 1 декабря, будут выступать разработчики из других “евангелистов” языка.

Вы организовали сообщество русскоязычных Dart-разработчиков, которое официально было признано Google. C чего все начиналось?  Как вы поддерживаете и развиваете сообщество?

Ну как это обычно бывает – используешь сам, а потом понимаешь, что только с коллегами обсуждать скучно и нужна “свежая кровь”. Началось всё с небольшого митапа три года назад – тогда Dart в России вообще никто не использовал. С тех пор это переросло в небольшое, но уютное комьюнити. Основным каналом общения остаётся чат в телеграмме, но также есть Slack. Периодически мы организуем митапы побольше, все видео доступны на YouTube канале:

Мне кажется сообщество – это как костер:  оно само себя поддерживает, если есть топливо. Мы отвечаем на вопросы в чате, организуем митапы, делимся своим опытом. Понятно, что с каждым инфоповодом в канал приходят новые люди, основной вопрос: “Ну что там, можно Dart для продакшена использовать?”. Ответ – “да” обычно не устраивает, так что бывают и холивары.

В чем основные преимущества Dart? Можно ли его использовать для создания мобильных приложений?

Это система типов + SDK + поддержка различных платформ. Я могу написать один блок кода и переиспользовать его везде. Сейчас никого этим не удивишь. JavaScript есть в каждом “утюге” и языки с типизацией уже не в новинку (TS, Kotlin и так далее). Но преимущество состоит как раз в сочетании всех этих факторов. В Dart 2.0 разработчики выкрутили типизацию на максимум. На Dart писать просто приятно. В целом, все разговоры X лучше Y всегда должны начинаться с вопроса: “Для каких  именно задач это можно применять?”. И тут уже можно что-то обсуждать.

Что касается мобильных приложений, теперь есть Flutter! Он позволяет писать код сразу под Android и iOS – эти приложения будут быстрыми и красивыми. Звучит как рекламный слоган, но это действительно так. Архитектура Flutter отличается от всех остальных мультиплатформенных фреймворков (ReactNative, Xamarin и прочих), поэтому это что-то совершенно иное.

Подкаст AppTractor: Flutter

Расскажите немного про Dart 2.0. Какие нововведения в нем произошли по сравнению с предыдущей версией языка?

Когда язык только проектировался, он должен был “убить” JavaScript, но “под капотом” он был достаточно слабо типизирован. И это, на мой взгляд, определило его провал в те годы. Ведь зачем нужен ещё один JS, который, по своей сути, не очень от него отличается? Во второй версии Dart стал гораздо серьезнее во многих вопросах. Это открыло дорогу многим оптимизациям (например, более агрессивному TreeShaking). Также была проделана большая работа по инструментам: появилось много пакетов, новый сборщик и так далее. Теперь это более production ready язык, чем был когда-либо.

Как родилась идея организовать конференцию DartUp, которая совсем скоро пройдёт в Спб? Что вы от нее ожидаете?

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

Конференция DartUp полностью бесплатна, нужно только зарегистрироваться. И как и год назад, мы  наварили специального Dart-пива.

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

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

Новости

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

У нас лучшие идеи для приложений, архитектура и конкурс ВКонтакте.

AppTractor

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

/

Автор:

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

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

Реклама

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

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

Вакансии

Популярное

X
X

Спасибо!

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