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

 

Билл Бакстон, пионер из Канады в области взаимодействия человека и компьютера и главный дизайнер Microsoft Research, считает, что в разработке программного обеспечения отсутствует «процесс проектирования», который помогает разработчикам UX получить четкость в отношении своих проектных решений до создания системы. Исходя из этого, Бакстон и его коллеги написали Sketching User Experiences: Getting the Design Right and the Right Design, 2007.

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

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

— Билл Бакстон

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

 

Преимущества эскизов

В частности, эскизы могут помочь вам в процессе проектирования следующими способами (Greenberg et al., Стр. 4):

• Более открыто и творчески думать о своих идеях
• Создавать шикарные идеи, не беспокоясь об их качестве
• Изобретать и исследовать концепции, быстро фикируя идеи
• Фиксировать идеи, с которыми вы сталкиваетесь
• Обсуждать, критиковать и делиться идеями с другими
• Выбирать стоящие идеи
• Накапливать свои идеи для последующего размышления
• Получать удовольствие при разработке

 

Это эскиз?

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

• Быстры: не нужно долго делать
• Своевременны: создавайте их, когда возникнет такая необходимость.
• Одноразовы
• Достаточны: создавайте эскизы как коллекцию, которая иллюстрирует различные аспекты взаимодействия с течением времени.
• Минималистичны: используйте эскизы, чтобы разработать одну концепцию за раз.

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

— Билл Бакстон

Эскизы против прототипов, сражайтесь!

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

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

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

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

— Билл Бакстон

Author/Copyright holder:Jorge Gonzalez. Copyright terms and licence: CC BY-SA 2.0

Эскизы и прототипы по-разному применяются в проектной воронке. Адаптировано от Билла Бакстона, опыт пользователя Sketching: получение права на дизайн и правильный дизайн, 2007.

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

Author/Copyright holder: Jose Rojas and Interaction Design Foundation. Copyright terms and licence: CC BY-NC-ND

Конструкционная воронка иллюстрирует использование эскизов для определения правильной конструкции, а также применение методов юзабилити для ее усовершенствования. По мере увеличения инвестиций (красная стрелка) вы теряете возможность вносить существенные изменения в выбранный проект. Адаптировано от Билла Бакстона, Bill Buxton Sketching User Experiences: Getting the Design Right and the Right Design, 2007.

Получение правильного дизайна

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

Author/Copyright holder: Jose Rojas and Interaction Design Foundation. Copyright terms and licence: CC BY-NC-ND

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

Адаптировано от Билла Бакстона, Sketching User Experiences: Getting the Design Right and the Right Design, 2007.

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

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

Более того, все отзывы коллег и пользователей будут направлены только на то единственное решение, которое вы представите. Это обстоятельство может еще больше дезориентировать вас, оставит без альтернативных возможностей. Кроме того, клиенты относятся предвзято к презентации одного проекта или концепции. Они могут отреагировать сдержано и проявить меньше заинтересованности, чем при наличии возможности выбора из нескольких вариантов дизайна (Tohidi et al., 2006).

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

— Билл Бакстон

Достижение правильного дизайна

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

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

Author/Copyright holder: Jose Rojas and Interaction Design Foundation. Copyright terms and licence: CC BY-NC-ND

Усовершенствуйте выбранный дизайн с помощью итеративного подхода к юзабилити.

Bill Buxton Sketching User Experiences: Getting the Design Right and the Right Design, 2007.

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

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

Author/Copyright holder: Jose Rojas and Interaction Design Foundation. Copyright terms and licence: CC BY-NC-ND

Полный обзор роли дизайна, юзабилити и других областей бизнес-предприятия в цикле разработки продукта. Адаптировано от Саула Гринберга, Sheelagh Carpendale, Николая Марквардта и Билла Бакстона, Sketching User Experience: The Workbook, 2011.

ABC’s Sketching

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

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

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

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

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

Author/Copyright holder: Jose Rojas and Interaction Design Foundation. Copyright terms and licence: CC BY-NC-ND

Используйте вариации осанки, эмоции лица и объекты для передачи широкого спектра действий и ситуаций. Адаптировано от Саула Гринберга, Sheelagh Carpendale, Николая Марквардта и Билла Бакстона, Sketching User Experience: The Workbook, 2011.

Улучшение эскиза: аннотации, стрелки и заметки

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

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

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

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

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

Author/Copyright holder: Yandle. Copyright terms and licence: CC BY-SA 2.0

Аннотации, стрелки и заметки увеличивают коммуникативную силу ваших эскизов.

Методы эскизов

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

1. Начертание эскиза

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

Author/Copyright holder: Espen Klem. Copyright terms and licence: CC BY 2.0

Определите суть объекта, дизайна или действия, которое вы собираетесь сделать

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

2. Отбор проб с помощью камер

Цель этого метода — использовать неподвижные фотографии и видео для отображения некоторых особенностей мира. Вы можете применить эту методику во время своих еженедельных покупок в продуктовых магазинах, при поездке на работу, или, когда вы встречаетесь с друзьями на ужин. Широкое распространение смартфонов облегчает эту задачу. «Захватывайте» объекты, проекты и действия, которые радуют, вдохновляют и раздражают вас.

Запись неудачных проектных усилий

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

Запись успешного проекта

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

Взять с собой

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

Ссылки и где узнать больше

Bill Buxton Sketching User Experiences: Getting the Design Right and the Right Design, 2007.

Саул Гринберг, Sheelagh Carpendale, Николай Маркардт и Билл Бакстон, Sketching User Experience: The Workbook, 2011

Tohidi, M., Buxton, W., Baecker, R. & Sellen, A., «Правильный дизайн и дизайн»: тестирование многих лучше, чем одно из конференций ACM-SIGCHI по человеческим факторам в вычислительных системах (p 1243-1252), 2006: http://www.billbuxton.com/rightDesign.pdf