Процесс создания положительного опыта взаимодействия мобильных пользователей вышел на новый более зрелый уровень. Чтобы убедиться в этом, достаточно просто посмотреть на имеющиеся в нашем распоряжении инструменты. Прототипы таких инструментов, как Balsamiq, Axure и Fireworks позволяют нам создавать шаблоны страниц и макеты кнопок, а также помогают объяснять пользователям назначение имеющихся функций. Кросс-браузерные фреймворки, такие как PhoneGap, Zurb Foundation и jQuery Mobile помогают нам создать прототипы, используя базовые веб-языки: HTML, CSS и JavaScript.
Почему? Аргументы в пользу использования эскиза.
Мне кажется, что сегодня в плане возможностей мы находимся в лучшем положении, чем когда-либо. Разработчик может создать что-то грандиозное за очень короткий промежуток времени. Однако в такой ситуации появляются скрытые опасности: обилие инструментальных средств искушает нас пропускать ключевые шаги, связанные с необходимостью тщательной проработки продукта, которая требует обязательного выделения времени для того, чтобы разобраться в сложившейся проблеме.
Вот почему я предлагаю использовать эскизы до этапа применения ваших любимых инструментальных средств. Этот шаг будет способствовать более глубокому пониманию проблемы и поиску подходящих решений.
Вероятно, что сейчас, у вас появилась одна из следующих мыслей:
“Существуют жесткие сроки и нет времени на прорисовку эскиза. Нужно приступать к работе над проектом”.
“Проектирование в [сюда нужно вставить название вашего любимого инструмента] безусловно займет меньше времени. Мне нужно как можно скорее получить результат”.
“Необходимо представить результаты работы [клиенту или партнеру по проекту или коллегам]. Мы не можем показать им нарисованный от руки материал”.
“Извините, но я действительно не могу рисовать”.
Мало того, что я прежде неоднократно слышал эти возражения, хочу сказать больше: у меня самого возникали все эти мысли.
Определение проблемы и поиск решения.
Эскизы позволяют исследовать проблему пространства и в то же время найти возможные пути ее решения. Благодаря этому можно понять суть проблемы, а также выяснить возможности ее предотвращения.
Пока мы будем схематически прорисовывать свои мысли, уж появятся новые идеи. Неоднозначность и отсутствие деталей в эскизах способствуют созданию новых идей. Неоднозначность является положительным фактором, поскольку человек автоматически будет пытаться заполнить пробелы. Это то, что делает эскизы “генерирующими”: они позволяют оживить уже имеющиеся идеи и способствуют развитию новых идей. Как говорит Билл Бакстон в Sketching User Experiences (эскиз пользовательского опыта взаимодействия):
“Приобретение знаний от создания эскизов в основном базируется на неоднозначном характере их представления. То есть, они не имеют строго определенного представления, а также стимулируются и находятся под влиянием различных интерпретаций, которые сознательно не интегрированы в них автором”.
Создавая зарисовки различных решений проблемы, мы можем исследовать одно из них без необходимости обязательной реализации. Это дает нам новую возможность вникнуть в суть и поднимает новые вопросы. Создание эскиза — это по существу мозговая атака.
“Цена” эскиза.
Самый быстрый способ задокументировать свои мысли — это взять ручку, лист бумаги и быстро все зарисовать. Попытка сделать то же самое с помощью наших любимых инструментальных средств прототипирования занимает значительно больше времени: мы должны создать новый проект, выбрать для использования правильную библиотеку, разместить небольшие элементы в рабочей плоскости, прорисовать стрелки, соединяющие блоки, произвести необходимые изменения для получения визуальной привлекательности — и на это все уйдет 30 минут или больше.
Если нам не нравится то, что мы видим на листе бумаги, мы можем просто бросить его в мусорное ведро и начать заново. Используя какой-либо инструмент прототипирования, мы уже не сможем так просто избавиться от результатов работу. В первую очередь из-за времени и усилий, потраченных на создание — даже в случае, если идея была не слишком удачна. Начать заново будет намного труднее. С другой стороны, бумажные эскизы являются дешевым и быстрым вариантом.
Самый быстрый способ сохранения и оценки идеи заключается в ее схематической прорисовке.
Эскиз как коммуникационный инструмент.
Слова мимолетны, а картина действительно может говорить тысячи слов. Создание эскиза способствует объединению наших коллег и заинтересованных сторон благодаря возможности представить автором текущее понимание проекта. Чтобы объяснить различные аспекты проекта, мы можем использовать различные визуальные представления (мы расскажем о наиболее распространенных из них в следующей главе). В The Back of the Napkin (обратная сторона салфетки) Дэн Роам говорит:
“Картинки могут представлять сложные понятия и обобщения огромного наборов информации. Таким образом мы с легкостью сможем увидеть и понять суть идеи, а также получить ценную возможность для выяснения и решения всех возможных типов проблем”.
Наши коллеги смогут указать на слабые места в идеях и обсудить с нами возможные решения и альтернативные варианты. Скорее всего, они смогут понять схематические наброски и вы получите от них ценные советы относительно деталей работы над создаваемым проектом. Представление идеи для других людей позволяет задуматься о собственном мышлении; мы сможем увидеть ошибки и найти лучшие альтернативные решения только выбрав этот путь.
Создание эскиза как средство сотрудничества.
Эскиз является мощным инструментальным средством для вовлечения заинтересованных сторон на ранних этапах процесса проектирования. В процессе проектирования возникает характерная дилемма, а что же было раньше курица или яйцо: заинтересованные лица не в состоянии сформулировать полный набор требований без наличия визуального представления решения. В свою очередь дизайнеры не хотят приступать к работе над проектом без наличия строго оговоренных, стабильных требований. Это вполне логично, ведь дизайнеры стремятся избежать ненужных переделок и, как следствие, дополнительной работы.
Одним из вариантов выхода из сложившейся ситуации является создание эскизов возможных решений в совместной мастерской, например, в дизайн-студии (ознакомьтесь со статьей Уилла Эванса “Введение в методологию дизайн-студии“). Мы можем шаг за шагом ознакомить заинтересованных лиц с особенностями своих идей (и альтернативных вариантов) и объяснить им последствия их требований к проекту.
Процесс создания эскиза имеет определенные ограничения по количеству участников. Участие не-дизайнеров может быть исключено (Привлечение заинтересованных лиц к процессу разработки эскиза — это вопрос личного вкуса и многочисленных споров. Как бы там ни было, вам придется сделать свой собственный выбор).
Поскольку эскизы представляют собой грубые и незаконченные наброски намного проще наладить обратную связь с другими специалистами. Некоторые люди не могут избавиться от ограничений, увидев практически готовую версию страницы. Они думают о кропотливой работе, благодаря которой и была создана страница. Высококачественная визуализация также, как правило, отвлекает людей — вместо того чтобы сосредоточиться на сути, многие акцентируют внимание на комментировании визуального дизайна или на незначительных деталях. Эскиз должен ориентировать людей на основную концепцию.
Единственная вещь, которую необходимо будет преодолеть — это ваше нежелание показывать свою не отшлифованную работу.
Создание эскиза — это не просто рисование.
Самое распространенное заблуждение в том, что ваши эскизы должны быть визуально привлекательными. Но создание проектных взаимодействий — это не художественное искусство. Ваши эскизы не должны быть привлекательными; они всего лишь должны передать вашу идею. Эскизы, как предполагается, направлены на разжигание дискуссии и генерирование идеи; они вряд ли будут висеть в рамке на стене. Пока вы будете рисовать рамки, стрелки, кружки и фигуры из линий вы сможете двигаться вперед. Как отмечает Джошуа Бревер в своей статье “Эскиз, эскиз, эскиз“:
“Эскиз — это не конечная цель. Конечной целью процесса прорисовки является приобретение набора полезной информации, получаемой во время работы над эскизом. Так что не волнуйтесь, если не можете создать визуально привлекательный эскиз”.
Обучение особенностям рисования выходит за рамки данной статьи, но я рекомендую вам ознакомиться со следующими докладами, статьями и книгами, которые позволят получить основы:
- “Искусство рисования эскизов интерфейсов” (слайды), Джейсон Месут и Сэм Смит.
- “Процесс создания эскиза 101” (слайды), Джексон Фокс.
- “Искусство небрежного создания UX эскизов“, Пейтер Бьюик.
- Создание эскизов пользовательского опыта взаимодействия: Учебное пособие, Сол Гринберг, Шилаг Карпендейл, Николай Марквардт, Билл Бакстон (Морган Кауфман: 2011).
Как сделать эскиз.
Теперь, когда я (будем надеяться) убедил вас, что эскизы должны быть частью рабочего процесса, давайте поговорим о том, как рисовать эскиз в мобильном проекте.
Расходящееся рисование эскизов.
В начале, вы захотите использовать различные идеи для вашего приложения или веб-сайта. Начните с создания различных эскизов для одной версий экранной кнопки или ее части. У вас две цели: сгенерировать множество различных идей и в то же время изучить и оценить их. Чем больше идей вы придумаете, тем больше возможностей у вас будет для дальнейшего выбора. Этот процесс часто называют “расходящееся рисование эскизов”.
Полезным инструментальным средством для создания такого типа эскизов является многостраничный шаблон. Это средство предлагает достаточно места для создания шести различных версий на одной странице, а также предоставляет некоторые рекомендации относительно доступного пространства экрана. Отображение бок о бок различных версий упрощает дальнейшее сравнение и обсуждение.
Много шаблонов доступно онлайн (Чаще всего я использую шаблон Эрика Лоехфелма). Выберите любой понравившийся вам шаблон.
Черно-белые варианты …
Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров