Дизайн Вадим Скворцов
2 981

Описать задачу в виде истории

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

В закладки
Аудио

Мы в «Контуре» делаем сервисы для юридических лиц. Адрес юридического лица — один из основных реквизитов компании. Чтобы с адресами не было путаницы, существуют справочники адресов, например, КЛАДР. Вы с ними сталкиваетесь, когда вводите адрес доставки в интернет-магазине: интерфейс подсказывает по мере ввода улицу и номер дома.

Недавно в моём проекте появилась задача по переходу с одного справочника адресов на другой, и я вспомнила про комикс пятилетней давности. Я делала задачу по внедрению КЛАДРа: нужно было научиться выбирать город, район, улицы и всё остальное из справочника. Справочник сложно устроен, в нём много уровней и зависимостей, которые нужно учитывать в интерфейсе.

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

Когда мы обсуждали задачу с разработчиком, он гордо сказал, что не читает технические задания. Его можно понять: текст плохо работает для описания нелинейных структур, к тому же чтение — труд. Разработчик добавил, что любит картинки, а ещё больше — комиксы. Я не поняла, шутит он или нет, но ответила «Вызов принят!». Сразу захотелось сделать что-нибудь интересное, чтобы разработчик сделал так, как я придумала.

Я взяла человечков из комикса xkcd и нарисовала свой по мотивам описания задачи. В комиксе я рассказываю разработчику, как всё должно работать. Идея зашла на ура: разработчик был в восторге и сделал всё как надо.

Так, с помощью графической истории я описала сложную задачу. Комикс сработал, потому что:

  1. Картинки воспринимаются гораздо легче, чем текст. Текст — не самый лучший инструмент передачи информации в наше время, когда все привыкли к Instagram и YouTube. Для сложных нелинейных структур он плохо работает: приходится запоминать условия и сопоставлять одно с другим. В комиксе это гораздо проще показать — условия «если это, то» помещаются в одну-две картинки.
  2. Это не просто картинки, это история. Истории помогают упорядочивать нашу жизнь — мы воспринимаем жизнь не как набор случайных событий, а как сюжет.

Если вам нужно сформулировать и поставить кому-то задачу или описать сложный процесс, попробуйте сделать это в виде истории. Или в виде графической истории — комикса. Расскажите, что нужно сделать или что произойдёт, когда задача будет сделана. Гораздо интереснее читать комикс про разработчика Макса, чем читать техническое задание.

{ "author_name": "Вадим Скворцов", "author_type": "editor", "tags": [], "comments": 17, "likes": 31, "favorites": 66, "is_advertisement": false, "subsite_label": "design", "id": 51998, "is_wide": true, "is_ugc": false, "date": "Wed, 28 Nov 2018 15:37:55 +0300" }
{ "id": 51998, "author_id": 120027, "diff_limit": 1000, "urls": {"diff":"\/comments\/51998\/get","add":"\/comments\/51998\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/51998"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114, "possessions": [] }

17 комментариев 17 комм.

Популярные

По порядку

Написать комментарий...
11

У меня очень хорошее отношение к компании СКБ Контур, и в частности к дизайнерам этой компании.

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

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

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

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

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

Ответить
6

Думаю это действительно не больше чем просто маленький кейс фо фан для разнообразия коммуникации м/у дизайнером и программистом

Ответить
0

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

Ответить
0

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

Ответить
6

Думал что программисты инфантильные, но каждый день дарует новое дно

Ответить
2

Если программист не понимает ТЗ или не может обсудить непонятные моменты, то нафига он такой нужен?

Ответить
0

Скоро уже к каждому программисту придётся приставлять рисовальщика комиксов, видимо они уже не в состоянии читать текст.

Ответить
2

Контур, по моему скромному мнению, делает лучший дизайн пользовательского интерфейса. И программисты у Контур самые лучшие.

Как же приятно их сервисами пользоваться.

Ответить
3

Ты случайно не в контуре работаешь?))

Ответить
0

Нет :) Но наша фирма использует их сервисы.

Ответить
1

Согласен! Довольно достойный уровень.

Всегда есть что улучшать, но общее впечатление о продуктах - приятное!

Ответить
1

Контур в Новосибирске - дно, которое уже не пробьешь. Делали с ними один сайт не так давно. На стадии дизайна - все неплохо. Дальше - просто трэш (как говаривал один мой приятель - "ё*ля в ботах"). Ни одна кнопка, ни один раздел на сайте не заработал корректно с первого раза. Тестировщика у них нет в принципе, все отдается в стадии полуготовности с видом - "ну, принимайте работу". Ладно, сами протестируем и потратим на это кучу времени, не гордые. Но у них блин процессы организованы так, что добрую половину багов приходилось отлавливать и прописывать 2 раза (некоторые - по 3 раза и это не единичные случаи). То есть они умудрялись терять зафиксированные клиентом, заскриненные и описанные по пунктам ошибки. Это у них норма. Программист в принципе не понимал задачу, похоже. Но общаться с ним запрещено регламентом компании. Некомпетентность команды проекта зашкаливает похлеще счетчика гейгера на фукусиме.
И только ближе к концу работ, которые затянулись на месяц относительно договора (на месяц про*рать сроки, блин) я понял, почему контора зовется Контур. Все же на поверхности, простите за каламбур: клиент обращается, клиент мучается, клиент выпрыгивает из окна их офиса на 13-м этаже, приезжает полиция, обводит тело, остается что? Правильно, контур!
Глубокий нейминг, однако. Жаль сразу не отгадал, до начала работы.
Так что неудивительно, что они там комиксы друг другу рисуют. Я вообще с бубном перед ними танцевал, чтобы сайт допилить.

Ответить
0

Сдается мне, проблема не в скорости считывания ТЗ, а в скорости усваиваемости информации мозгом разработчика ))

ВременнЫе потери на этапе услышал-осознал-подумал-переспросил.

Так-то фан, конечно.

Ответить
0

а почему просто не поговорить?

Ответить
0

Вот если бы существовал Principle

Ответить
0

Ждём следующую статью типа "Дизайнер снял кино, чтобы программист лучше понял задачу".
Всё таки выбирая между комиксом и фильмом по комиксу многие выберут фильм...))

Ответить
0

Вообще комикс получился больше похож на интервью.

Ответить
0
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Нейронная сеть научилась читать стихи
голосом Пастернака и смотреть в окно на осень
Подписаться на push-уведомления
{ "page_type": "default" }