Лого vc.ru

Как решать интерфейсные задачи при помощи белой доски и маркера — советы дизайнера

Как решать интерфейсные задачи при помощи белой доски и маркера — советы дизайнера

Продуктовый дизайнер американского сервиса OpenDNS Адайти Аракумар написал в блоге Uxdesign колонку о том, как решать интерфейсные задачи при помощи белой доски и маркеров. Команда Sketchapp подготовила перевод его заметки.

Простой фреймворк в помощь дизайнерам с выполнением задания на доске во время собеседования.

Зачем писать на доске о выполнении дизайн-заданий

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

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

Одним из общих этапов собеседований было выполнение задания на белой доске. Компании вроде Google внедряют на собеседовании по четыре таких задания в день, что требует максимальных умственных усилий, а ваш мозг «кипит» оставшийся день.

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

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

Что они хотят от задания на доске

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

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

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

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

Почему фреймворк

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

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

Давайте пройдемся по работе с фреймворком для такого задания, как «Создайте приложение для детского конструктора».

Фреймворк

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

Квадранты

Я нарисовал четыре квадранта на белой доске и присвоил им названия:
  • Пользовательские нужды.
  • Цели пользователей.
  • Ограничения.
  • Гипотезы.

Нужды пользователей

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

Для кого создается дизайн? Каковы их нужды? Какие «проблемные места» вы пытаетесь закрыть при помощи вашего дизайна? Путем создания портрета пользователя, для которого создается дизайн, вы закладываете его образ в голове интервьюера и выстраиваете контекст для самой цели дизайна. Для этого есть хорошее упражнение по созданию персоны, для которой делается дизайн.

Самый лучший способ собрать информацию о вымышленном пользователе — это попросить одного из ваших интервьюеров представить себя на месте пользователя

Это работает. Вы можете в шуточной форме провести с ними первичное исследование и попытаться понять их поведение. Запишите их нужды на доске.

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

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

Давайте предположим, что я создаю дизайн для детей в возрасте 7−12 лет, у которых есть доступ к iPad. Родители позволяют детям купить игрушку, если они вовремя сделают свою работу по дому (это можно выяснить в процессе первичного исследования с интервьюерами).

Цели пользователя

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

Ваш дизайн должен быть направлен на достижение цели

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

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

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

Гипотезы

Будучи дизайнерами, мы часто строим гипотезы. Спустя какое-то время мы их проверяем и вносим соответствующие корректировки

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

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

Ограничения

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

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

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

Почему приложение на конструирования игрушек? Что является критерием успеха этого продукта? Какие исследования рынка и пользователей у вас уже есть? Какие существуют ограничения в разработке и в используемых технологиях? Android или iOS? И почему?

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

Опыт

Теперь у вас есть готовое исследование о пользователе, и вы готовы приступить к так называемой фазе интерактивного дизайна. Это когда вы рисуете картинку того, что вы знаете о поведении пользователя и какие аспекты его действий могут стать трудностями.

Юзер-флоу

Цель пользователя, определенная ранее, — это и есть ваш результат, который надо достичь. Теперь нарисуйте то, как пользователь достигает своей цели без вашего дизайна. Существует вероятность того, что пользователь не дойдет до конечной цели из-за разрывов в процессе. Выделите это визуально в процессе ваших опросов — что можно сделать очень просто. Например:

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

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

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

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

Наброски и новый опыт

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

Ребенок решил, что он хочет игрушку после просмотра мультфильма. Однако он хочет игрушку с другим костюмом.

Некоторые дизайн-упражнения относятся к высокому уровню, но при этом ориентированы на детализацию. Убедитесь, что вы учли эти крайности в ваших сценариях. Поговорите об идеальном пользовательском опыте, а затем начните брейншторм с коллегами, используя вопрос «Что если?».

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

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

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

Заключение

Доверяйте своей интуиции дизайнера

Вы выработали в себе мощную интуицию за годы практики — воспользуйтесь этим. Вполне допустимо сказать во время задания: «Моя интуиция мне подсказывает» — и дальше работать над дизайном.

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

Это свод правил, а не законов

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

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

Присылайте свои колонки и интерфейсные кейсы на interface@vc.ru.

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

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

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

Я посмотрел около 10 случайных вакансий на indeed.com и angel.co, у половины в требованиях было понимание htmls/css, в одной умение кодить было большим плюсом и лишь в одной среди responsibilities было написание кода.

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

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

Доски охуительны. Доски хороши хотя бы потому что они у всех на виду, они отличные "информационные радиаторы". Они коллаборативны, вовлекают в обсуждение команду, вовлекают в проектирование людей кто не знает электронные инструменты. И в то же время достаточно абстракты, чтобы фокусироваться на главном, не вникая в мелкие интерфейсные детали. И конечно они гибки - вы можете изобразить на них что угодно: от user journey до майлстоунов и списка задач.

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

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

0

Какие инструменты для быстрого проектирования для вин/онлайн вы бы порекомендовали?

0

Я работаю в Axure. И везде его рекомендую:)

Прямой эфир
Команда калифорнийского проекта
оказалась нейронной сетью
Подписаться на push-уведомления