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

Проектирование мобильного опыта взаимодействия заметно ушло вперед. В подтверждение этому можно привести все те инструменты, которые имеются у нас в руках. Средства создания прототипов, такие как Balsamiq, Axure и Fireworks, позволяют нам разрабатывать удобные макеты и кликабельные мокапы, предлагая свою помощь в деле создания пользовательского интерфейса. Кроссбраузерные фреймворки, такие как PhoneGap, Zurb Foundation и jQuery Mobile, помогают нам создавать прототипы, используя родные для Web языки: HTML, CSS и JavaScript.

Основная аргументация в пользу скетчей

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

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

Возможно, что в данную минуту у вас в голове пронеслись следующие мысли:

«Перед нами стоят жесткие сроки сдачи готового продукта, у нас нет времени, чтобы рисовать эскизы. Нам нужно сразу приступать к работе»

«Проектирование в [вставьте сюда свой любимый инструмент] осуществляется на порядок быстрее. Мне нужен готовый результат как можно скорее»

«Мы должны представить результаты нашему [клиенту, партнеру, начальнику]. Мы не можем показать эскиз, нарисованный от руки»

«Извините, но я совсем не умею рисовать»

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

Определение задачи и поиск ее решения

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

Схематическое изображение наших мыслей приводит к возникновению новых идей, что происходит во многом благодаря неопределенности и малой детальности эскизов. Неопределенность в данном случае является преимуществом, поскольку мы автоматически стараемся восполнить существующие пробелы с помощью своей фантазии. Именно эта черта придает созданию скетчей «генеративный» характер: мы фиксируем уже имеющиеся идеи и придумываем новые. Как отметил Билл Бакстон в «Sketching User Experiences»:

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

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

«Цена» создания скетчей

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

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

Рисование скетчей как инструмент коммуникации

Пусть это звучит банально, но изображение действительно способно «сказать» тысячу слов. Рисование скетчей позволяет нам передать коллегам и заинтересованным лицам наше текущее понимание проекта. Мы можем использовать разнообразные визуальные методы представления, дабы разъяснить различные аспекты проекта (самые популярные из них мы рассмотрим в следующем разделе). Дэн Роум в «The Back of the Napkin» утверждает следующее:

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

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

Рисование скетчей как инструмент сотрудничества

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

Выход из этой дилеммы заключается в том, чтобы начать создание скетчей для возможных решений в ходе совместного обсуждения, проводимого, к примеру, в студии дизайна (подробнее об этом в статье Уилла Эванса «Introduction to Design Studio Methodology»). Следовательно, мы сможем пошагово показать заинтересованным лицам наш концепт проекта (и его альтернативы) и разъяснить им влияние их требований на дизайн.

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

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

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

Создание скетчей – это не урок рисования

Распространенное заблуждение – ваши скетчи должны быть обязательно красивыми. Однако проектирование взаимодействия — это не вид искусства. Ваши скетчи не должны быть привлекательными; они должны лишь передавать вашу идею. Как и предполагается, они лишь разжигают дискуссии и генерируют идеи; они вряд ли будут висеть в рамке на стене. Вам достаточно лишь уметь рисовать прямоугольники, стрелки, окружности и линии. Как заметил Джошуа Брюэр в «Sketch, Sketch, Sketch»:

Скетч – это не конечная цель. Конечная цель процесса рисования – то, что вы узнаете в ходе создания скетча. Потому не стоит переживать, если вы не в состоянии нарисовать скетч.

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

• “The ‘Art’ of Sketching Interfaces”
• “Sketching 101”
• “The Messy Art of UX Sketching”
• Sketching User Experiences: The Workbook, Saul Greenberg, Sheelagh Carpendale, Nicolai Marquardt, Bill Buxton (Morgan Kaufman: 2011)

Как рисовать скетч

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

Дивергентное создание скетчей

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

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

Большинство шаблонов доступно онлайн (я использую чаще всего шаблоны Erik Loehfelm). Выберите тот, который вам нравится.

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

Если вы ощущаете нехватку идей, изучите некоторые галереи мобильных интерфейсов для вдохновения (к примеру, Inspired UI, Pttrns, Lovely UI и UI Parade). Все они демонстрируют решения, сгруппированные по темам и возможностям (к примеру, главные меню, окна чата). Добавляйте вещи, которые вам понравились, в свои скетчи, и смешивайте их со своими собственными идеями.

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

Конвергентное создание скетчей

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

Чтобы получить более детальную информацию по поводу дивергентного и конвергентного создания скетчей, смотрите презентацию Leah Buley «Good Design Faster», а также статью Brandon Shauer «Sketchboards: Discover Better + Faster UX Solutions».

Создание UI-потоков

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

Вы можете визуализировать различные результаты в UI-потоке (такие как список результатов поиска по сравнению с пустым списком). Вам поток в таком случае не будет линейным; различные ветви отобразили бы разные результаты. Однако постарайтесь ограничить количество ветвей в отдельном UI-потоке. Каждая ветвь увеличивает комплексность, делая ваш поток сложнее для понимания. Его становится трудно объяснить.

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

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

Чтобы получить некоторое представление о том, как создать скетчи и UI-потоки для мобильных экранов, изучите статью Gisele Muller «Inspiring UI Wireframe Sketches»; MOObileFrames, блог, в котором собраны различные мобильные скетчи; и Wireframes, сайт Jakub Linowski. Вы можете также использовать PDF-руководство от Jakub «Interactive Sketching Notation» для своих UI-потоков.

Какие шаги нужно сделать

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

• Перечислите информацию, которая у вас есть и которую вы хотите получить.
• Сделайте базовый набор скетчей (к примеру, вариации ключевого экрана или начальный UI-поток).
• Просмотрите получившиеся скетчи.
  • В чем заключаются сильные и слабые стороны каждого варианта?
  • Непротиворечивы ли UI-элементы и данные (т.е. используются ли похожие элементы для решения похожих задач)?
  • Выводятся ли данные одинаково?
  • Понятны ли настройки взаимодействия?
• Узнайте мнение других людей. Начните с коллег и продолжите потенциальными пользователями, если это возможно.
  • Каковы их первые впечатления?
  • Что им больше всего понравилось? Почему?
  • Что им не понравилось? Почему?
  • Что показалось непонятным в ваших скетчах?
  • Какие улучшения они предложили? Почему они предложили их?
• Повторите для концепта.
  • Можете ли вы объединить различные сильные стороны отдельных концептов в один новый концепт?
  • Можно ли уточнить скетчи?
  • Можно ли урезать или упростить шаги?
• Изучите результаты в свете начальных откликов.
  • Появились ли новые вопросы?
  • Какие идеи у вас возникли?

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

За пределами создания скетчей

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

Либо вы можете импортировать свои экраны в более продвинутый инструмент, такой как Axure, и построить в нем прототип.

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

Заключение

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

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

• Будьте ленивы.

Не стоит изобретать колесо. Используйте шаблон для рисования скетчей.

• Вдохновляйтесь работами.

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

• Остановитесь на достаточно хорошем варианте.

Скетчи должны донести вашу идею. Не заблудитесь в (несущественных) деталях.

• Как говорил Парето?

Небольшой набор возможностей вашего решения будет использоваться чаще всего. Сфокусируйтесь на нем. Какие 20% вашего решения будут использоваться 80% всего времени?

• Будьте непротиворечивы.

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

• Создавайте аннотации.

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

• Будьте открыты.

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

• Если остались сомнения, создайте еще несколько скетчей.

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

Удачного создания скетчей!

Источник: uxdesign.smashingmagazine.com/2013/06/24/sketching-for-better-mobile-experiences/