book-open 1 test
Курс «Продуктовый дизайн» - Погружение в профессию

Эскизное и концептуальное проектирование цифровых продуктов — Глава 3

Процесс работы всегда начинается с черновых набросков концепции. Ребята всей командой рисуют скетчи и собирают модели, а потом долго сидят и размышляют. Если результат их не устраивает, они все начинают с нуля.

← Назад | Продолжение (Глава 4) →

(Перед вами бесплатный курс от InVision Studio «Продуктовый дизайн». В курсе 7 глав. Если вы здесь впервые, то лучше начните сначала)

Над переводом работали:  Федор Фоминых и Ринат Шайхутдинов.

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

Интересуетесь свежими статьями по продуктовому дизайну (UX/UI)? 🚀

Подписывайтесь на канал в Telegram | ВКонтакте, Instagram, Facebook

Архитектор Фрэнк Гери на старте проекта специально игнорирует тягу к совершенству. Фрэнк понимает, что такой подход создает иллюзию уверенности. Фрэнк знает толк в важности открытий. Крейг Уэбб — его партнер по дизайну в Gehry Partners, постоянно слышит как Гери твердит: «Да если бы я знал, куда иду, я бы вообще туда не пошел». Для Гери суть творчества — это постигать неизведанное.

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

Я научился говорить на языке набросков и моделей.

— Фрэнк Гери, Gehry Partners

В студии Фрэнка Гери всё что можно заклеено сотнями эскизов и моделей оставшихся от творческих проектов разных времён. Чтобы точнее попасть в цель они на старте каждого проекта стараются охватить как можно большее количество открытых для развития вариантов.

Рис. 1. Студия Фрэнка Гери — это множество набросков и моделей, артефактов творческих процессов, самое ценное в которых — новые открытия.

Результаты работы Гери уникальны, а его методы работы открыты для всех. Для творческих личностей вполне нормально широко размахнуться на старте и потом до самого финиша просто выбрасывать всё лишнее. Но среди разработчиков ПО бытует другой подход — прямо на старте начинать ковыряться в деталях и везде наводить сплошную красоту.

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

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

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

Важно научиться действовать как Фрэнк Гери — накидывать множество черновых вариантов и уже потом спокойно выбирать из них подходящее решение.

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

Скетчинг — невероятно мощный инструмент и одновременно полезный для каждой задачи.

— Кэвин Ченг, Incredible Labs

Сила скетчинга для дизайнеров

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

Все самое важное в своей жизни я начинаю с карандаша и бумаги.

— Расс Унгер, 18F

Карандаш важен для творческого процесса, потому что:

  1. Карандаш универсален. Не обязательно быть дизайнером чтобы выражать свои идеи через карандаш. Любой человек может использовать карандаш для выражения своих идей.
  2. Карандаш идеален для черновых зарисовок. Зарисовки говорят о незаконченности мысли призывая зрителей к обсуждению.
  3. Карандаш прост в эксплуатации. Не надо ничего настраивать или обновлять — просто сосредотачиваешься на идее и рисуешь.
  4. Карандаш быстрый. В течении минуты вы можете накидать кучу разных вариантов и тут же без сожалений о потраченном времени выбросить лишние.

Когда идея ложится на бумагу зажигается магия. Дэйв Грей, основатель XPLANE и соавтор Gamestorming считает, что зарисовка это лучший способ поговорить с самим собой.

Габриэла Гольдшмидт почетный профессор Израильского технологического института Технион, сделала аналогичные наблюдения исследуя зарисовки архитекторов. (опубликовано в журнале Creativity Research Journal). Она обнаружила, что идея зарисовки имеет свойство непредсказуемо меняться уже в процессе рисования. И зачастую нарисованное сильно отличается от того что изначально было в голове. Значит, рисование это вид мыслительной деятельности.

Профессиональный совет: Играем вместе (Gamestorming together). Обратите внимание на книгу «Gamestorming: A Playbook for Innovators, Rulebreakers, and Changemakers» за авторством Дэйва Грея, Сунни Брауна и Джеймса Макануфо. В книге более 80 игр, многие из которых включают в себя скетчинг который призван помочь вам объединить команду для совместной разработки новых идей.

Многие продуктовые дизайнеры знают это на уровне интуиции. Стэнли Вуд, директор по дизайну Spotify, признался что многие дизайнеры у них рисуют чтобы обдумать свои идеи. В большинстве случаев они никому не показывают нарисованное.

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

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

— Диоген Брито, Senior Product Designer at Slack

В MailChimp команда дизайнеров обнаружила, что работа над эскизами это прямой мост к коллегам — разработчикам. Тодд Домини, директор по дизайну MailChimp, как-то сказал, что «люди боятся пикселей!» Когда разработчикам показываешь проработанный до мелочей дизайн-проект (hi-fi), они расстраиваются что вся важная работа прошла мимо, а они нужны как простые исполнители. Но стоит им показать эскиз, становится ясно что их приглашают принять участие в настоящем творчестве.

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

Для скетчинга не требуется художественное образование

Когда мы слышим слово «зарисовки» в памяти сразу всплывает бородатый художник (непременно в берете) из уютного парижского кафе который неторопливо выводит на бумаге идеальные линии и мягкие тени. Но поверьте, чтобы накидать черновой интерфейс или раскрыть идею продукта вам не нужен ни берет ни художественное образование (хотя, каппучино может хорошо помочь). Если вы умеете писать буквы и неплохо рисуете квадратики — можете смело браться за скетч.

Рис. 2. Быстрый неряшливый набросок может хорошо передать ваши идеи или помочь в поиске новых.

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

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

— Фред Бичер, The Nerdery

Профессиональный совет: Как побудить человека зарисовать его идею
Наверняка вы были в такой ситуации когда человек вам что-то объясняет, объясняет, а вы просто не понимаете его. Вы предлагаете ему зарисовать идею, но он отговаривается что не умеет. И как бы вы его не просили, он будет отказываться потому что не хочет выставить напоказ свои слабые навыки рисования. Деннис Кардис (директор отдела дизайна WSOL), знает как избавить людей от страха перед рисованием. Он начинает накидывать идею клиента на бумаге и специально делает это с ошибкой. Клиент его поправляет и заново объясняет свою идею словами. Деннис снова рисует и снова с ошибкой. Так происходит до тех пор пока клиент не забирает карандаш и рисует так, как должно быть. Деннис наконец-то «понимает» идею, но клиента уже не остановить — получив в руки инструмент и сделав первый шаг клиенты увлекаются и продолжают развивать свои идеи на бумаге. Для большинства людей делать наброски не совсем привычно. Придётся вам разбудить их творческое мышление и научить излагать свои идеи на бумаге.

Рисуем наши скетчи и развиваем идеи вместе 

Чтобы дать команде чувство уверенности, можно применить простое действие. Тодд Заки Варфел старший директор отдела дизайна Workday разработал тренинг по скетчингу под названием «6 - 8 - 5». Суть тренинга — люди создают 6-8 дизайнерских решений на каждого за 5 минут. С такими таймингами никто просто не успеет уйти в прорисовку красоты. Смысл упражнения в том, чтобы сосредоточиться на проработке идей и забыть про комплекс «я плохой художник». В этом тренинге не должно быть аккуратных и красивых рисунков.

Вот как это работает:

  1. Соберите свою команду — дизайнеров, разработчиков, менеджеров по продуктам и экспертов, обладающих важными знаниями в предметной области. Не собирайте вместе больше 8 человек, иначе мы можем потерять продуктивность. 
  2. Раздайте всем по листочку А5 формата. Разбейте лист сеткой на шесть квадратов для шести скетчей. Если не хватит — возьмите ещё листов.
  3. Формулируем проблему и максимально чётко указываем желаемую цель. Например: Мы хотим чтобы клиенты как можно раньше проявляли активность в нашем приложении. Как этого достичь? 
  4. Ставим таймер на 5 минут и просим каждого зарисовать несколько решений. Каждый участник молча работает самостоятельно и не мешает соседям. 
  5. После, вся команда показывает результаты и обсуждает каждую идею. Быстрая обратная связь хорошо помогает определить наиболее перспективные идеи.

Если есть желание и возможность то можно провести дополнительный круг для более тщательной проработки. Совместная работа над задачей позволяет каждому поделиться своими мыслями а большое количество разных точек зрения даёт как правило хороший результат.

Скетчинг — это важнейшая часть нашего процесса. Мы собираем всех вместе для зарисовок, и это даёт нам общее видение и общие интересы.

— Аарон Иризарри, Nasdaq

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

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

Подбираем инструменты для скетчинга

Выбор инструмента в скетчинге напрямую влияет не только на скорость творческих поисков но и на то как далеко они продвинутся. Тонкая ручка и острый карандаш заставляют вас подробно прорисовывать эскиз, а это влияет на скорость. Джейсон Фрид, соучредитель Basecamp на ранних стадиях всегда берёт самый толстый фломастер и огромные листы тонкой бумаги. С таким набором при всём желании не получится нарисовать подробный интерфейс. Зато легко можно сосредоточиться на рабочем процессе и на том, как люди будут использовать ваш продукт.

Проработать ваши идеи более подробно хорошо помогут фломастеры medium Sharpie или Staedtler Triplus Fineliner (мои любимые). Бумагу для работы лучше выбрать самую обычную (Loose paper) так как скетчи мы будем передавать друг другу, клеить на стены, выбрасывать или наоборот бережно хранить.

UI-дизайнеры, которые занимаются подробной проработкой интерфейсов используют Copic gray markers — это придает эскизам необходимую глубину и чистоту.

Создание эскизов в команде на удаленке

Lullabot это креативное агентство которое обслуживает таких клиентов как SpaceX, The Grammys, GE и Марту Стюарт. Командные зарисовки — важнейшая часть их творческого процесса. И несмотря на то что вся команда работает удалённо, каждый проект у них обязательно начинается с зарисовок.

Креативный директор Джаред Пончот купил каждому дизайнеру USB-камеру IPEVO за 60 баксов и команда получила простой и недорогой способ рисовать удалённо. Джаред покупает камеры ключевым сотрудникам компании, разработчикам, клиентам, чтобы все они могли участвовать на старте эскизной работы.

Рис. 3. Камера IPEVO идеально подходит для обмена эскизами с удаленной командой дизайнеров.

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

Рис. 4. Креативный директор Lullabot Джаред Пончот делает зарисовки со своей удаленной командой дизайнеров.
Рис. 5. Камеру IPEVO можно использовать в Google Hangouts для демонстрации эскизов удаленной команде.

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

Сначала идеи, затем реализация

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

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

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

— Джош Брюэр, Abstract

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

Чек-лист поможет начать с карандашей, а не пикселей:

[Скетчинг снимает] все барьеры на пути движения идей к реализации.

— Liz Danzico, SVA MFA Interaction Design


← Назад | Продолжение (Глава 4) →


Курс «Продуктовый дизайн» - Погружение в профессию