OneNote для дизайнеров взаимодействий

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

            
            

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

Набор

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

1. Tablet PC со стилусом в режиме планшета
   Обратите внимание, что нужная нам скорость и гибкость достигается только при использовании стилуса с планшетным компьютером вроде Tablet PC.
2. Проектор или большой общий монитор
   Общий монитор позволяет команде видеть идеи дизайна в процессе и позволяет им участвовать в режиме реального времени (Это часть более обширной методики, которую мы называем парным дизайном).
3. Microsoft OneNote
   Рукописные инструменты OneNote позволяют быстро и легко делать наброски наших идей, копировать и вставлять их для внесения изменений, изменять размер, отправлять их клиенту и, если нужно, экспортировать в другие программы.
4. Snag-It или подобные быстрые инструменты захвата экрана со стилусом
   Чтобы обойти некоторые ограничения программы, Snag-it позволяет делать рукописные линии на графике, рисуемые поверх нее, и просто выделять объекты.

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

На встречах дизайнеров

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

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

Если идею нужно подкорректировать, он может скопировать и вставить оригинал и изменять уже новую версию.

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

Когда большие идеи становятся достаточно хорошими, мы обычно переходим к более формальному программному обеспечению, вроде Adobe Fireworks, чтобы протестировать наши идеи по поводу экранов на более реалистичном пиксельном уровне. Мы редко остаемся в OneNote на протяжении всего проекта.

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

OneNote для дизайнеров взаимодействий: Основные моменты

Краткий курс: Пять инструментов

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

1. Бесконечное полотно

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

2. Инструменты для рисования

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

3. Инструменты для выбора

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

4. Контекстное меню

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

5. Snag-It

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

К тому же, в OneNote нет хорошего встроенного средства для создания сплошного белого прямоугольника для всплывающих окон, меню и пр., поэтому наличие графического изображения позволяет нам легко перекрывать элементы, которые находятся «снизу». Создавать такие графические изображения нам позволяет очень простой инструмент на основе стилуса, и для этого отлично подходит утилита Snag-It.

Изучение этих пяти основных инструментов OneNote поможет вам стать профессиональным пользователем OneNote.

Лучшие практические подходы для ваших набросков

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

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

• Всегда связывайте рисунки в карты или по вопросам
• Соединяйте рисунки при помощи стрелок, чтобы было понятно, как они связаны
• Записывайте интересные мысли людей или моменты
• Записывайте ход мыслей команды на полях
• Ничего не стирайте, просто зачеркивайте (или записывайте, что вы отклонили и почему)

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

• Все, что на экране, мы рисуем черными линиями.
• Серые линии используются для менее важных элементов на экране, типа «здесь будет текст».
• Голубые линии для того, что будет вводить пользователь
• Серый маркер отлично подходит для различных вещей, например, очерчивания меню или изображения плавающих палитр или окон
• Желтый маркер подходит для отображения того, что нужно выделить
• Красный используется для «мета-данных», то есть, всего, что не должно быть на экране или в реальности: мыслей дизайнера, личных мыслей, стрелок, которые соединяют зарисовки, и вычеркивания.
• Зеленые линии предназначены для комментариев клиента в процессе просмотра

И в конце концов, дело в эстетике, которая делает их достаточно приятными, чтобы рассматривать в качестве части нашей профессиональной деятельности.

• Делайте максимально ровные линии: Они не должны быть идеальными, но старайтесь их делать более ровными и менее волнистыми
• Избегайте открытых углов: Лучше, чтобы линии пересекались, чем отвлекали взгляд на открытые части
• Делайте толстые линии для того, чтобы отделить границы экрана
• Тонкими линиями можно очертить элементы на экране
• Толстыми красными линиями можно соединять экраны, начиная с момента взаимодействия

---

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

OneNote для исследований и презентаций в дизайне взаимодействий

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

Как мы используем его в исследованиях

[Из видео, немного исправлено:] Использование ноутбука в интервью для исследования создает барьер между вами и человеком, которого вы опрашиваете, а набор текста может сам по себе быть довольно отвлекающим и пугающим для опрашиваемого. Однако, по печатным записям можно искать, что позволяет на них ссылаться, когда вы составляете свои записи. OneNote представляет собой отличный компромисс. Используя планшет, мы отодвигаем физические преграды ноутбука, и, так как у вас есть ручка в режиме рукописного текста, вы можете потом вернуться и искать по своим записям, как если бы они были печатными (Распознание рукописного текста здесь довольно впечатляющее).

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

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

И я хотел бы отметить, что исследование – это не то, в чем OneNote преуспел больше всех. Существуют несколько альтернативных инструментов, таких как LiveScribe Echo SmartPen и даже просто ручка с бумагой, которые намного дешевле. Но поскольку мы снабжаем своих дизайнеров планшетами, OneNote – это хороший инструмент для проведения исследований.

Презентации дизайна

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

[Из видео, немного исправлено:] Когда нужно показать зарисовки в OneNote непосредственно клиенту, мы запускаем GotoMeeting или другое приложение для интернет-встреч и открываем программу. Мы беседуем по телефону и используем режим OneNote “John Madden”, чтобы привлечь внимание клиента к обсуждаемому объекту (Мне кажется, что официальное название звучит как «Use Pen as Pointer», но здесь никто его так не называет), который делает пометки, исчезающие примерно через шесть секунд. При помощи данного режима мы обводим важные элементы и наводим соединения между экранами.

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

Моменты, с которыми вам придется столкнуться

[Из видео:] OneNote не является идеальным решением для наших целей. В любом случае, пока. Если вы собираетесь использовать его в работе, вас придется столкнуться с несколькими моментами (Обратите внимание, что я говорю о текущей версии на момент написания статьи. Версия для Windows 8 сейчас находится в стадии бета-релиза, но для нас она пока недостаточно полная, чтобы понять, какие из этих проблем будут решены в готовом релизе).

Следует признать, что мы не являемся целевой аудиторией данной программы (Она предназначена – внезапно – для того, чтобы делать заметки, а не для дизайна. Microsoft! Позвоните нам. Мы поможем исправить эту штуку). Это значит, что здесь есть несколько проблем, которые надо исправить, чтобы программа работала на дизайн.

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

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

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

Программа не понимает «символы» как Illustrator или Fireworks, поэтому, если вы вносите в рисунок изменения, которые повлияют на все остальные рисунки, вам придется проделать немало работы, чтобы синхронизировать их все.

Программа старается изо всех сил различать рукописный текст (слова) и рисунки, но иногда она ошибается, и преобразование того, что она посчитала текстом, может привести к довольно странным результатам, так как она попытается перестроить и остальной ваш «текст». Единственный способ этого избежать – переключить на режим «Create Drawings» (Создать рисунок).

Спасибо, OneNote

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

Это перевод серии статей под названиями “OneNote for Interaction Designers“, “OneNote for Interaction Designers: The Nuts and Bolts” и “OneNote for IxD Research and Presentation” от Chris Noessel . Перевели в компании UXDepot с одобрением издания Cooper.

PS от переводчиков: Надеюсь, вам понравилась статья. Мы будем рады, если вы укажете нам на ошибки в переводе, чтобы мы могли их оперативно исправить. Пишите нам по адресу editor@uxfox.ru, пожалуйста 🙂