Ценность быстрого визуального сторителлинга для дизайнеров

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

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

Если вы согласны с тем, что недопонимание возможно, и ожидаете его, то вы сможете учесть и избавиться от него.

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

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

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

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

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

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

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

10-минутные скетчи

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

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

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

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

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

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

Мой дом

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

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

Мы приняли, казалось бы, простое решение изменить размер окна в гостиной:

Мы попросили, чтобы окна были 3 фута в ширину и 6 футов в высоту. Примерно 1 метр в ширину и 2 метра в высоту. Мы хотели наслаждаться красивыми закатами:

Симпатичная картинка выше – это настоящая фотография, сделанная с того места, где будет построен наш дом. Такой вид будет открываться с заднего двора. Мы планировали сделать окна больше, чтобы лучше это видеть:

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

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

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

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

Инструменты

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

Как минимум, вам нужно что-то, чем рисовать и на чем рисовать. Это могут быть карандаш и бумага, маркеры и картон, мел и доска или даже ручка и ваша рука.

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

В настоящее время я использую iPad Pro с Apple Pencil и переключаюсь между Linea Sketch, Procreate и Paper от FiftyThree. У каждой из программ есть свои сильные стороны, но любая из них отлично подойдет для создания примеров, которыми я поделился в этой статье.

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

Используя эти фигуры, чтобы передать взаимодействие или рассказать историю, вы можете создать что-то вроде этого:

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

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