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

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

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

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

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

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

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

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Ценность быстрого визуального сторителлинга для дизайнеров

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

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

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

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Ценность быстрого визуального сторителлинга для дизайнеров

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

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

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Ценность быстрого визуального сторителлинга для дизайнеров

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

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Ценность быстрого визуального сторителлинга для дизайнеров

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

Мой дом

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

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

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Ценность быстрого визуального сторителлинга для дизайнеров

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Ценность быстрого визуального сторителлинга для дизайнеров

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Ценность быстрого визуального сторителлинга для дизайнеров

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Ценность быстрого визуального сторителлинга для дизайнеров

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

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

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

Инструменты

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Ценность быстрого визуального сторителлинга для дизайнеров

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

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

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

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

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Ценность быстрого визуального сторителлинга для дизайнеров

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Ценность быстрого визуального сторителлинга для дизайнеров

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

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

Свежие вакансии
                        MYTONA MYTONA Game UI/UX Designer Удаленно Санкт-Петербург По договоренности ₽
                        ООО "Компания В.И.К." ООО "Компания В.И.К." Дизайнер (в офис) Офис Краснодар 35 000 ₽
                        ООО РЖД-Технологии ООО РЖД-Технологии Графический дизайнер Офис Москва
                        Ак Барс Цифровые Технологии Ак Барс Цифровые Технологии UI/UX дизайнер Офис Казань от 70 000 ₽
                        Kodix Kodix UX/UI Designer Офис Москва (Moscow, Russia)
Все вакансии

Оригинал: automattic.design/

Если вы нашли ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

Похожие записи

Новый подход к подбору цвета интерфейса

Совместное использование нового способа построения цветовых систем для доступных пользовательских интерфейсов. Создайте…

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

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

Базовая сетка 4px для достижения визуальной точности

Я пользуюсь базовой сеткой 4px уже более 2-х лет и пытаюсь заставить мою команду начать использовать ее.