{"id":4859,"title":"\u0422\u0435\u0441\u0442 \u0434\u043b\u044f \u043f\u0440\u043e\u0434\u0430\u043a\u0442\u043e\u0432: vc.ru \u0432 \u0432\u0430\u0448\u0438\u0445 \u0440\u0443\u043a\u0430\u0445","url":"\/redirect?component=advertising&id=4859&url=https:\/\/vc.ru\/special\/bettervc&hash=06e04557a2c39e6c33fa846ba405896b7fed5804f421a1db543b59166c87d7da","isPaidAndBannersEnabled":false}

Как junior-дизайнер создавал приложение по менеджменту задач и при чем тут рисунки на полях блокнота

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

Проблема

Проблема заключалась в том, что хоть я и сталкивался с разными CRM-системами («Битрикс», Armo, Trello,… ), планировщиками задач (Google Task, системные заметки телефона, Google Keep), но ни один из них не смог полностью удовлетворить мою главную потребность — привести в порядок мои мысли и выразить их как конкретную задачу.

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

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

Поиск идеи и wireframes

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

Более опытные дизайнеры могут возразить, а почему я так быстро перешел к wireframes и пропустил другие важные этапы? Где CJM, где user flow, где анализ потребностей рынка, персоны, интервью?

Необходимо объясниться. Помимо своего концепта в голове, у меня так же были и другие мотивы. Во-первых, в то время я как раз потерял работу (спасибо глобальной пандемии), и для меня это стало толчком для развития и перехода из веб-дизайна, коим я тогда занимался, в сторону UX/UI. Хотелось быстрее выкатить этот концепт как один из примеров для отклика на вакансии.

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

Забегая вперед, примерно так выглядели уже почти финишные wireframes

Все это стало причиной того, что я сознательно отказался от многих этапов разработки приложения, многое сократил и пропустил. Я думал, что раз сам себе и исполнитель, и заказчик, никаких проблем возникнуть не должно; думал, что все смогу проконтролировать и реализовать.

Спойлер: нет, не смог. Я обо***лся

Первые ошибки

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

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

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

Apple раздора

Вторая проблема, это неправильный выбор платформы, для которой создавался концепт. Дело в том, что меня можно по-своему назвать адептом Google Material Design. Мне очень нравится эта система. Не столько из-за своей внешней оболочки, сколько из-за ее правил.

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

Ну а что касается Human Interface Guidelines… Видите ли, меня зовут Динар. Я родом из маленькой деревушки в Татарстане. Я очень люблю крепкий чай с молоком и ни разу в жизни не пользовался ни одной продукцией Apple. Вообще ни одной. Ни iPhone, ни Mac, ни Apple Watch. Ни-че-го. Сами же гайды Apple выполнены в стиле самой компании. Они больше говорят об эмоциях, примерах использования, но очень мало конкретной информации в виде правил и чисел.

Эти два компонента из HIG стали одними из решающих доводов для смены платформы на iOS

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

Если даже брать их обычные системные гарнитуры. Как по мне, San Francisco лучше Roboto, а Roboto Slab проигрывает New York. Есть еще неплохой Segoe от Мелкомягких, но он не про мобилки.

Давай по новой, Миша, все…

Итого, из-за этих ошибок, пришлось вернуться назад, нормально расписать сценарии, построить user flow. Также под нож пошли все UI наработки, созданные под Android.

Кусочек User Flow. Еще самое начало, все когда все выглядело симпатично, перед тем как утонуть в мешанине текста

Отрисовка макета

После того, как с UX было покончено, начал собственно отрисовку экранов макета.

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

Первые экраны

Начальные экраны банальны и похожи на любое другое приложение. Страницы авторизации, главный экран и профиль. Из необычного тут можно выделить разве что не совсем стандартные Tab Bars. Точнее, это даже Toolbar, который очень похож на Tab Bar. Небольшая жертва правил HIG в пользу стилистики. Все второстепенная информация, настройки, списки и т.д. были стыдливо спрятаны в углу под иконкой профиля.

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

Создание задачи

Пользователь создает какую-то общую задачу.

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

Эта страница похожа на привычные всем пользователям приложения «Заметки». Количество информации сокращено до самого минимума (название — описание — сроки/изображение по желанию).

Из особенностей здесь появляется плашка внизу, над клавиатурой. По своей сути она является каким-то гибридом Toolbars, Context Menus, Custom Keybords. Зачем она здесь нужна? Далее эта плашка станет попыткой уместить наши паттерны взаимодействия с бумагой/ручкой в мобильном телефоне.

  • В реальном мире наши элементы интерфейса это: бумага, ручка, рука. Мы берем ручку в руку, пишем текст. Подчеркиваем этой же рукой нужное нам слово. Или, чтобы выделить важный пункт, рисуем звездочку на полях этой же рукой. Или обводим слово несколько раз, делая его толще и контрастнее. Все это мы делаем рукой и ручкой, ну вы поняли.
  • В телефоне такое не сработает. Да, мы взаимодействуем с экраном и пальцем. Но мы не можем просто нажать пальцем сильнее, чтобы текст выделился. Мы не можем провести пальцем под словом, чтобы его подчеркнуть. Мы сначала должны выбрать в интерфейсе функционал «подчеркивание» и применить его к тексту. Который до этого еще предварительно выделили.

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

В начале было Слово

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

Вы пишете один абзац текста — по своей сути, это одна мини-задача — одна строчка в блокноте.

Один абзац, выделенный снизу разделителем, это одна задача или заметка и одна функциональная единица приложения, с которой и будут производиться все действия

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

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

Что бы вы сделали блокноте? Написали бы что-то вроде «позвонить такому-то человечку обкашлять вопросики».

Точно также вы должны поступить в приложение. Напишите себе заметку «позвонить…»

  1. Вот только прямо по ходу набора текста, приложение предложит вам строчку текста «позвонить человеку» превратить в кнопку действия. Чтобы когда через пару часов вы вернетесь к своему списку задач, вы просто нажали на иконку и созвонились.
  2. Или нажмите на основной FAB, выберите действие «Звонок» и перетащите ее в нужную часть текста
  3. Или выделите нужный вам абзац и добавьте нужное действие

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

Разумеется, возможностей редактирования будет гораздо больше. Будут поддерживаться как стандартные стили текста в iOS вроде списков, выделений жирным, курсивом; так и другие действия помимо звонка, вроде маршрута, крайнего срока, добавления файлов или изображений.

Самое важное здесь, это сохранить основной опыт пользования:

  • Появилась задача
  • Записал ее в виде текста
  • К тексту применяется интерактивная функциональность.

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

Например, если вы в режиме набора текста, вам будут предложены только стилизация и списки. Если вы выделили один абзац — функциональность, применимая к абзацу, добавление действий; выделили несколько пунктов — работа с иерархией и папками.

Заключение

Перед тем как подвести итоги, хотелось бы сразу отметить. Концепт, который я представил вам выше, можно назвать всего лишь гипотезой. Чуть более детализированная, чем надо, но все еще гипотеза. И вполне может случиться, что если выкатить ее в продакшн, она никому не будет нужна. Но ведь бесконечное тестирование и аналитика и есть одна из сторон UX- и UI-дизайна?

Что дальше?

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

Уверенно могу сказать одно — я буду дальше работать над концептом. Возможно, не в ближайшие пару месяцев, т.к. пока что мои приоритеты это смена работы и переезд в Москву. Но потом можно будет вернуться: создать интерактивный прототип, оформить промо для Behance, создать приложение, за которое не стыдно. Ведь в конце концов, мне тупо нравится этим заниматься.

Надеюсь, эта статья вызвала у вас интерес. И если бы вы поддержали меня стрелкой вверх, я был бы вам очень благодарен. Если вдруг захочется что-то спросить, всегда буду рад. Telegram — @latipovdinar

{ "author_name": "Динар Илгизович", "author_type": "self", "tags": ["\u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0435\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435","\u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u044b"], "comments": 16, "likes": 26, "favorites": 63, "is_advertisement": false, "subsite_label": "tribuna", "id": 142452, "is_wide": true, "is_ugc": true, "date": "Mon, 20 Jul 2020 12:43:41 +0300", "is_special": false }
0
16 комментариев
Популярные
По порядку
Написать комментарий...
3

Привет! Подскажите, в каком приложении делали карту user flow? 

Ответить
1

Привет
На этапе обдумывания накидываю все свои мысли на доску в Miro (с одной "r", не путать с Mirro). Лично для меня этот сервис удобнее всего, хоть аналогов есть приличное кол-во
А вот для презентации, например для Bh, уже перерисовываю финишный вариант в Figma. Чтобы все рамки, линии, текст совпадали с единой стилистикой. Плюс в Figma это очень легко делается компонентами: создал 2-4 основных компонента блоков, а потом просто соединяешь их как конструктор и меняешь текст

Ответить
2

Молодец, Динар! Лучше не откладывай, а добей до MVP и смотри: полетит-развивай, нет-забудь. Важны не фичи, а одна главная ценность - ее и надо заворачивать в MVP

Ответить
3

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

Ответить
0

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

Ответить
2

Ну вот, я зря искал название приложения, чтобы поискать его в AppStore? :)

По поводу переизобретения велосипеда: Figma переизобрели Sketch, Notion переизобрели Evernote, Facebook переизобрели MySpace и Classmates, Tesla переизобретают автомобиль и т.д. Думаю, больше примеров не надо.

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

Все менеджеры задач, которые я пробовал для своих личных тасков, по итогам были выкинуты за 1-2 дня. Поэтому для меня это насущная проблема. Я даже использовал одно время джиру для этого (и она справлялась для моих задач лучше, например, чем Todoist :D), а сейчас использую Notion, хотя она и не очень подходит для подобного.

Ответить
0

Можете в 20 словах максимум описать какую проблему решает приложение?

Ответить
2

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

Ответить
0

Есть такая проблема, решил ее Apple Pencil на айпад с клавиатурой, как ни странно

Ответить
0

Похоже на переизобретение приложений с поддержкой нативного текстового ввода (Todoist, Things, Apple Reminders и прочее).

Плашка с телефоном, мне кажется, не нужна - либо номер телефона (iOS умеет понимать что это номер телефона по тапу в тексте), либо поиск по контактам после ввода имени и дропдаун с выбором контакта было бы интереснее.

Ответить
0

"поиск по контактам после ввода имени и дропдаун с выбором контакта было бы интереснее" — это вы очень хорошо подметили
Просто в моем user flow этот функционал чуть ли не ровно так, как вы и написали. Правда презентовать эту фичу я не стал, сам не знаю почему

Насчет переизобретения. Думаю как-нибудь просмотреть эти приложения, мб действительно велосипед уже давно изобретен

Ответить
0

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

Но даже если велосипед и изобретён, многие крупные приложения до сих пор даже элементарный нативный текст не распознают и во время/место/проект/приоритет не конвертируют (привет Microsoft ToDo). А тех что можно купить один раз без подписки и того меньше (это навскидку - рисерч я не проводил, конечно). Сам знаю только Things 3 из таких, но это только для Apple-экосистемы актуально, даже веб приложения нет. Todoist многие считают лучшим в этой нише, но там подписка, что в целом не то чтобы плохо, но многих отталкивает. Сам я пару лет им платил, а потом осознал что могу не платить, и теперь не плачý и сижу на бесплатной версии.

Так что свою аудиторию вы вполне можете найти. 

Удачи и успехов!

Ответить
0

 Но мы не можем просто нажать пальцем сильнее, чтобы текст выделился

Теоретически force touch который на новых моделях как-то назвали по-другому может.

Ответить
0

Любопытная информация
Немного просмотрел о технологии Force touch, который конкретно на айфонах называется 3d touch (а с недавнего времени Haptic Touch)
Создалось ощущение, что для работы с текстом он не сильно то и предназначен, разве что более удобное и гибкое выделение
Но при этом в центре управление про долгом нажатии есть крутые шторки. И было бы интересно узнать, можно ли такие же шторки приделать по долгому нажатию на слова. Мб кто из более опытных в комментариях поделится

Ответить
0

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

Ответить
0

Очень интересная идея! И действительно большинство приложений, (и todoist в том числе, хотя он и в наибольшей степени приближен к простоте) не учитывают алгоритмы работы человеческого мозга. У меня тоже есть идея переизобрести Evernote  и Notion вместе взятые. К слову , Evernote использую около 6 лет и todoist более 3 лет, но они не совсем справляются со своими обязанностями, хотя являются лучшими в своих сегментах. ИМХО. Пытался пересесть на Notion , но мозг категорически не желает с ним дружить , уговариваю уже четвертый раз))).

Ответить
Читать все 16 комментариев
Чайник

Я купил чайник недавно. Вот такой как на картинке. С одной стороны это я сейчас хвастаюсь.С другой стороны, интересно почему я купил его? Начнем с того, что он стоит почти 100€ и это в целом для электрического чайника дофига. При этом в нем нельзя даже посмотреть сколько там воды. Не говоря уже о настройке температуры. Внутри совершенно обычный…

«Авито» не публиковал мои объявления, а затем заблокировал профиль из-за подозрения в получении прибыли
С фокусом проблемы, сорян. @alpajessica

Если не интересно читать про мошенников, а хочется поднять себе настроение, то вам в конец статьи - там милейшие фотокарточки чудесных пёселей.

Как превратить юристов из бюрократов в опору компании

Бывает, что корпоративные юристы — люди, которые не показываются из кабинета и иногда вставляют палки в колёса другим отделам. Но в «Фоксфорде» они сами ходят к бизнес-заказчикам и предлагают идеи. Юрист онлайн-школы «Фоксфорд» Катя Кулакова рассказывает, как работает юридический отдел, который живёт интересами компании.

Катя Кулакова, юрист онлайн-школы "Фоксфорд"
Как малому бизнесу понять свою «зону смерти»

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

Как успешно пройти испытательный срок?

Свершилось – вы получили работу мечты! Но впереди еще три месяца испытательного срока. Это время дается вам и работодателю, чтобы определиться, насколько вы друг другу подходите. Как использовать это время с максимальной для себя пользой? Рассказывает главный специалист отдела подбора персонала Ольга Шабалина. Как всегда, упаковали полезные…

Реально ли заработать 10.000% торгуя на фондовом рынке? или "потерянный кошелек"

И все же, представьте себе ситуацию, что парень из моего рассказа в 2010 году опубликовал пост и рассказал, что он собирается вложить 1.000 долларов в биткоин и по его подсчетам к 2021 году он будет обладателем суммы в 220 млн. По вашему, что в ответ сказали бы ему читатели? В каком направлении посоветовали бы ему идти комментаторы?😂

«22 тысячи в год на домашнюю гигиену — и вы не пациент стоматолога»: сколько стоит уход за зубами и что нужно делать

Подробный гид от основателя «Белой Радуги» о том, какие гаджеты для домашней гигиены нужны всем, а что — маркетинг и вообще опасно.

На работе
31 июля завершается приём заявок в 1-й этап отбора программы B2C Future Solutions
Виртуальный оператор Danycom подал иски к «Мегафону» и МТС на сумму около 8 млрд рублей Статьи редакции

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

Платёжная система Square Джека Дорси купит австралийский сервис рассрочки Afterpay за $29 млрд Статьи редакции

Сделка может стать одной из крупнейших в истории Австралии.

null