sketches

Неряшливое искусство UX-скетчей

Useme переводы -
Share Button

Автор статьи: Peiter Buick
Оригинал статьи опубликован в Smashing Magazine (13.12.2011)

Многие говорят, что создание скетчей – это очень важно при проектировании или решении проблем, но, кажется, очень мало людей действительно создают скетчи. Будучи UX-специалистом, я делаю скетчи каждый день. Я часто занимаю целые стены в нашем офисе и завешиваю их скетчами, размещая всё: от сценариев использования до прототипов и презентаций.

Мой рабочий стол

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

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

Создание скетчей ≠ Рисование

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

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

Когда вы оцениваете собственные скетчи, спросите себя: “Каким образом я могу лучше донести эти мысли?”. Определить своё умение рисовать достаточно легко, но попробуйте разделить эти два понятия (рисовать и передавать мысли). Взгляните на свой скетч так, как будто это постер. Что в первую очередь бросается в глаза? Где детализированная информация? Помните, что глаз смотрит на наиболее детализированные и контрастные области.

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

ОК, давайте начнём.

Работа в слоях

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

Техника

Начинайте со светло-серым маркером (20%-30% серый) и постепенно добавляйте слои с деталями с помощью более тёмных маркеров и ручек.

Зачем?

Начиная работу со светло-серым маркером, вы упрощаете задачу. Это позволяет вам допускать ошибки и оценивать идеи по мере работы над задачей. Нарисовали корявую линию светлым маркером? Ничего страшного. Линии будут едва заметными в то время, когда вы закончите.

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

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

Внимание

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

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

Расслабьтесь

Техника

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

Зачем?

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

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

Используйте ваши сильные стороны 

Техника

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

Зачем?

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

Внимание

Этот приём нельзя использовать на доске, поэтому вам всё же придётся научиться рисовать вертикальные линии.

Создавайте скетчи взаимодействия

Техника

Начинайте с основного скетча, а потом используйте клейкие бумажки, добавляя подсказки (tooltips), всплывающие элементы (pop-overs), модальные окна и другие интерактивные элементы.

Зачем?

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

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

 

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

 

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

Копируйте и вставляйте в реальном мире

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

Техника

Используйте ксерокс, чтобы быстро создавать шаблоны из существующих скетчей или перерисовать определённую область скетча.

Зачем?

Ксерокс – это олдскул-версия комбинаций Control+C и Control+V. Он делает создание шаблонов и подложек более эффективным. Он также повышает вашу уверенность, поскольку, если вы сделаете ошибку (а вы будете делать ошибки), то сможете легко её исправить.

  • Необходимо последовательно перерисовать часть интерфейса на нескольких скетчах? Сделайте несколько копий, а потом рисуйте прямо по ним.
  • Вы испортили часть скетча? Нет проблем. Прикройте скетч куском бумаги или закрасьте корректором, сделайте копию, а потом рисуйте прямо по ней.
  • Вы работаете над мобильным проектом? Или хотите сделать серию скетчей одинакового размера? Создайте макет и копируйте его в качестве подложки. Тем не менее, легче распечатать подложки для различных устройств и браузеров. Хорошую подборку можно найти в статье “Бесплатные печатные PDF-шаблоны для создания скетчей, каркасов и заметок” (FreePrintableSketching, WireframingandNoteTakingPDFTemplates)
  • Вы хотите изменить вид сайдбара в ваших пяти последних скетчах? Нарисуйте новый сайдбар, сделайте несколько копий, а потом наклейте новые сайдбары поверх старых. Это просто.
  • Чтобы использовать скетч в качестве подложки для другого похожего, поменяйте настройки интенсивности или плотности на вашем ксероксе, чтобы получить копию скетча с 20% от оригинального значения.

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

Рисуйте поверх копии, чтобы поменять сайдбар

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

Дизайн в деталях

Используйте линейку, а именно расчерченную линейку.  Расчерченная линейка является прозрачной и, как правило, на ней напечатана сетка с размером клетки ⅛”, что позволяет видеть линию, которую вы рисуете, по отношению к остальной части скетча.

Техника

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

Зачем?

Это поможет вам провести серию линий на определённом расстоянии друг от друга, что прекрасно срабатывает для таких элементов как пункты списка, графики, кнопки и всего остального, что требует равномерного распределения. Это как-будто аналоговая версия “направляющих” (smart guides).

Быстрое нанесение равномерно распределённых линий с помощью расчерченной линейки и 30% серого маркера 

Техника

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

Зачем?

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

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

Использование линейки для создания секций скетча с помощью 70% серого маркера

Техника

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

Зачем?

Это быстрее, чем хватать ножницы – линейка у вас уже в руках. Также можно пронести её через таможенников в аэропорту.

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

Обрыв клеящейся бумажки с помощью линейки

Расскажи историю целиком

Техника

Рисуйте приложение в контексте того, где и как оно будет использоваться, или обрамите устройством, на котором оно буде запущено.

Зачем?

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

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

Внимание

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

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

Выкиньте скетчбук

Техника

Рисуйте на копировальной бумаге размером 8.5х11”.

Зачем?

Скетчи создаются для того, чтобы ими делиться. Вы можете легко повесить листы размером 8.5х11” на стену, чтобы поделиться идеями с остальными или рассмотреть проект целиком. Если вам нужно сохранить скетч или два, то можете просто отсканировать их на компьютер без подшивки в скетчбук. Всё ещё не уверены? Копировальная бумага дешевле. Это позволит вам использовать скетчи в качестве подложки без ксерокопирования. Вам не нужно будет выбирать между книжной подшивкой и спиральной подшивкой.

Одна из многих стен со скетчами в нашем офисе

Так чего же вы ждёте?

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

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

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

Вперёд! Не грузитесь инструментами. Создавайте бардак. И получайте удовольствие!

Инструменты

Вот некоторые ссылки на инструменты, которые описаны в данной статье.

Все изображения сделаны Майклом Клейнпастом (Michael Kleinpaste)

Автор статьи: Peiter Buick
Оригинал статьи опубликован в Smashing Magazine (13.12.2011)

Share Button