Методы разработки дизайна
Дизайнер Дэмиен Ньюман проиллюстрировал процесс разработки дизайна (рис. 7.1), чтобы показать фундаментальную, но малоизвестную истину об этом процессе: путь к идеальному, законченному, хорошо продуманному продукту – это хлопоты, хлопоты и еще раз хлопоты. Как правило, приходится выбрасывать много сделанной работы, прежде чем вы создадите нечто, что вам захочется сохранить. И зачастую вы не знаете, что следует сохранить, а что отправится в мусор, пока не вовлечете в этот процесс других людей. Но показывать коллегам свои черновики дизайна – это все равно что показывать людям, как делают колбасу: так можно испортить им аппетит. Хитрость заключается в том, чтобы сделать процесс разработки дизайна итеративным, что позволит вам выполнить работу максимально эффективно и при этом вовлечь в процесс других. Методы, описанные в этой главе, созданы специально для того, чтобы помочь вам в этом. Они сосредоточены на итеративной разработке дизайна в сочетании со структурированными вспомогательными действиями, которые вы можете выполнять вместе с коллегами, не имеющими опыта работы с UX. Так вы сделаете их партнерами и соавторами процесса разработки UX‑дизайна. В этой главе мы рассмотрим следующее.
Краткое описание дизайна. Как бы вы в общих чертах описали ваше целевое решение по дизайну? Каковы его особенности и в чем уникальность продукта? Для кого он предназначен и что он должен поощрять или помогать делать?
• Принципы дизайна. Каким должно быть восприятие от использования продукта?
• Создание эскизов. Какие формы может принимать дизайн продукта?
• Скетчборды. Как может выглядеть система или продукт в целом и какой диапазон идей возможен на каждом этапе процесса?
Рис. 7.1. Эти каракули Дэмиен Ньюман нарисовал, чтобы изобразить беспорядочность процесса разработки дизайна
• Потоки задач. Как восприятие будет развиваться с течением времени?
• Вайрфреймы. Подробное описание того, как будет выглядеть и функционировать продукт.
⚓ ПО ПОВОДУ ВИЗУАЛЬНОГО ДИЗАЙНА
Описанные в этой главе методы охватывают направление разработки дизайна высокого уровня, последовательное восприятие и проектирование взаимодействия. Они не охватывают визуальный дизайн – чтобы рассказать о нем достаточно подробно, потребовалась бы отдельная книга. Если вы хотите больше узнать о визуальном дизайне, прочтите следующие книги:
• Джейсон Бэйрд «Принципы красивого веб-дизайна»
• Марк Бултон «Дизайн для Интернета»
• Робин Уильямс «Книга по дизайну для недизайнеров»
Метод 13Краткое описание дизайна
Как бы вы в общих чертах описали ваше целевое решение по дизайну? Каковы его особенности и в чем уникальность продукта? Для кого он предназначен и что он должен поощрять или помогать делать?
В кратком описании вы записываете свои мысли об оптимальном дизайне продукта и выдвигаете гипотезы о том, как лучше всего воплотить его в жизнь. Подобно краткому описанию проекта, это описание предназначено для четкого резюме, в каком направлении вы планируете двигаться (рис. 7.2). Однако оно чуть больше сосредоточено на особенностях дизайна. В нем формулируется представление о восприятии пользователя и то, как это представление будет воплощено в жизнь. Краткое описание дизайна вы создаете для своей команды, для всех заинтересованных сторон, которые должны утвердить направление дизайна, и для себя. Если краткое описание проекта помогает вам сформировать общее представление о целях проекта, то краткое описание дизайна помогает получить общее представление об индивидуальности и сути UX‑дизайна.
Среднее время
2–3 часа на то, чтобы свести воедино все, что вы узнали, и создать документ с описанием.
Рис. 7.2. Пример краткого описания дизайна[25]
Когда используется
• Когда вы хотите уточнить ожидания команды от дизайна и заранее устранить любые пробелы или несоответствия в ожиданиях.
• В качестве результата разработки стратегии и исследовательской работы, описанной в предыдущих главах.
Попробуйте так
Существует два способа составить краткое описание дизайна. Один из них – составить в начале подходящий шаблон и заполнить его деталями. (Можно взять схему, подобную той, что показана на рис. 7.2.) Другой способ – взглянуть на то, что вы знаете или узнали в результате своих исследований, и построить краткое описание дизайна с нуля. В любом случае есть несколько важных вопросов, на которые вам необходимо ответить в кратком описании дизайна.
1. Фокус
В чем заключается суть работы над дизайном? Что в результате этой работы будет создано, улучшено и т. д.?
2. Аудитория
Для кого будет предназначен дизайн? Какова основная аудитория, каковы основные персоны, для которых вы будете разрабатывать дизайн? Описание, конечно, должно быть кратким, но если вы добавите в него подробностей, то сможете еще раз проверить, соответствуют ли ваши предположения о пользователях – их потребностях, мышлении и приоритетах – предположениям ваших товарищей по команде.
3. Характеристики и функции
Каковы основные экраны, состояния или сценарии? Какие элементы восприятия будут иметь решающее значение для продукта?
4. Ощущение
Если вы добьетесь успеха, каковы будут ощущения пользователя от взаимодействия с продуктом? В основном это касается бренда. Когда люди станут пользоваться продуктом, будет ли он казаться им веселым и игривым, мрачным и серьезным, конкретным и профессиональным? Беседуя с заинтересованными сторонами и членами команды о том, каким они хотели бы видеть продукт, вы обнаружите, что, помимо обсуждения характеристик и функций, люди часто произносят слова, которые эффективно описывают желаемое ощущение от продукта. Если вы обратили внимание и записали эти слова, упомяните их в кратком описании дизайна.
5. Ограничения и ожидания
Какие ограничения необходимо соблюдать? Что наиболее важно для того, чтобы дизайн оказался успешным? Что именно вы должны сделать правильно, а чего делать нельзя ни в коем случае?
Советы и рекомендации по краткому описанию дизайна
Работайте в рамках ограничений. Один из способов составить краткое описание дизайна – определить ограничения, которые накладываются на дизайнерское решение. Эти ограничения могут включать в себя характеристики и функции, предложение ценности или бренда, которые необходимо усилить или которым должно соответствовать ваше решение, а также клиентов или пользователей, для которых создается дизайн.
Используйте краткое описание дизайна для проверки предположений. Одна из наиболее важных целей краткого описания дизайна – убедиться в том, что вы знаете (и, возможно, даже можете помочь определить), какие идеи или ожидания от продукта имеются у ваших коллег, не связанных с UX. Предоставив людям, не разбирающимся в UX, описание того, как должен выглядеть конечный результат, вы даете им то, на что они могут отреагировать.
Добавьте изображения. Постарайтесь обойтись в кратком описании не только словами. Украсьте его подходящими изображениями (например, пиктограммами или фотографиями), которые придадут описанным идеям визуальный и эмоциональный отклик. Это поможет команде почувствовать компоненты дизайна и лучше их запомнить. Кроме того, это поможет вам начать использовать визуальные эффекты, которые намекают на качество будущего восприятия, которого пытается добиться команда. Например, если продукт должен ощущаться как личный опыт, добавьте в него фотографии, которые кажутся честными, правдивыми, не постановочными. Если продукт должен вызывать ощущение роскоши, включите в него изысканные, профессиональные изображения безупречного качества, а также обратите внимание на чистоту и изысканность макета самого документа.
Если вы работаете удаленно. Поделитесь черновиком краткого описания дизайна с членами команды и активно собирайте их отзывы. Если вы, что называется, спустите краткое описание дизайна сверху, это может вызвать у команды резкую реакцию. Поэтому оформляйте сбор мнений о черновике как начало дискуссии, пока не поймете, что информации и согласия между членами команды достаточно, чтобы считать текущий вариант описания окончательным. Личное общение немного ускоряет этот процесс, так как позволяет собрать людей вместе и в ходе общей беседы узнать их мнение.
Метод 14Принципы дизайна
Каким должно быть восприятие от использования продукта?
Принципы дизайна помогут вам сформулировать характеристики, которые должны сделать UX запоминающимся или необычным. Продукт обладает индивидуальностью или чувством – вам кажется, что это звучит странно? Некоторые продукты не имеют индивидуальности, но тем не менее они могут оставлять отчетливое впечатление. Другие продукты могут казаться сложными, загадочными или слишком технологичными. Возможно, вы также имели дело с продуктами, которые кажутся веселыми, дружелюбными, простыми и приятными (рис. 7.3–7.4) либо провоцирующими играть, общаться, работать, заниматься творчеством и т. д. Как правило, пользователи больше ценят продукты, обладающие именно такими особенностями.
Рис. 7.3. Принципы дизайна, составленные для цифрового видеорегистратора Tivo
Рис. 7.4. Эти принципы дизайна очевидны во множестве точек соприкосновения – от простого, эргономичного пульта управления до забавного логотипа и руководства пользователя, написанного приятным языком и не перегруженного техническими терминами
Принципы дизайна – это инструмент, который поможет вам определить, какие индивидуальные особенности подходят для вашего продукта, а потом следить за тем, чтобы по мере продвижения работы создавался дизайн именно с такими качествами. Поскольку эти принципы определяют направление разработки дизайна продукта, в идеале их следует определить до начала работы над деталями. Принципами дизайна, как и кратким описанием дизайна, стоит поделиться с командой, чтобы при разработке продукта все придерживались одного и того же направления. Принципы дизайна как инструмент могут служить для вас барометром, позволяющим в процессе работы постоянно оценивать, соответствует ли им дизайн.
Среднее время
В сумме 2–4 часа.
Когда используется
• Когда вам нужен инструмент, который обеспечит согласованность и последовательность UX.
• Когда вы не знаете точно, каково представление о вашем продукте или какова его индивидуальность.
Попробуйте так
1. Подумайте, что делает ваше предложение уникальным
Подумайте о том, что вы узнали в результате проведенных исследований. Вы обнаружили какие-либо отличительные особенности и уникальные характеристики, которые являются ключевыми для вашего продукта? Есть ли в ваших шаблонах контента какие-либо активы, которые важно применить? В ходе исследования пользователей вы обнаружили какие-либо интересные возможности, которые отлично подходят для реализации в вашем продукте?
2. Создайте список принципов
На основе этой информации составьте список фраз, описывающих то, каким в идеале должен быть готовый продукт. Постарайтесь писать короткие содержательные фразы не канцелярским, человеческим языком. Помните: вы пытаетесь понять, как реальный человек описал бы ваш продукт после его использования.
3. Сократите список
Если в вашем списке много пунктов (например, больше пяти), постарайтесь его сократить. Отдайте предпочтение характеристикам, которые наиболее точно дают пользователям то, что им нужно, и создают предложение, отличающееся от предложений ваших конкурентов. Возможно, вам удастся объединить несколько характеристик, чтобы получить более точные и менее общие утверждения, которые действительно отражают то восприятие, которого вы пытаетесь добиться от своего продукта. В конечном итоге вам нужно сократить список примерно до пяти утверждений.
4. Сделайте каждое соображение более ярким
Выберите фотографию (или несколько фотографий), чтобы символически проиллюстрировать свои соображения, как показано на рис. 7.5–7.7. Добавьте для каждого принципа дополнительные примечания о некоторых потенциальных последствиях. Подумайте, как каждый принцип может повлиять на отдельные компоненты дизайна.
5. Делитесь и обсуждайте с коллегами
Как только вы будете удовлетворены составленными принципами, поделитесь ими со всей командой. Подумайте о том, чтобы красиво оформить каждый принцип на отдельном большом листе, чтобы придать ему значимость и вдохновить коллег.
6. Регулярно пересматривайте их
По мере продвижения по этапам разработки дизайна, таким как создание эскизов, вайрфреймы, разработка прототипов и проверка, постоянно возвращайтесь к своим принципам дизайна и спрашивайте себя: «Соответствует ли то, что я делаю, этому принципу?» Если нет, подумайте, что можно изменить, чтобы привести дизайн в большее соответствие с принципом.
Советы и рекомендации по принципам дизайна
Принципы не должны быть общими. Принципы дизайна должны помогать вам принимать решения при разработке дизайна продукта. Это означает, что они должны быть осязаемыми и в определенной степени узконаправленными. Чтобы понять, является ли утверждение достаточно конкретным и запоминающимся, спросите себя, может ли оно описать какой-либо из продуктов ваших конкурентов. Если этот так, то, вероятно, формулировку необходимо доработать.
Рис. 7.5–7.7. Три разных принципа дизайна работают вместе, передавая общее ощущение, которое продукт должен вызывать у пользователей
Выходите за рамки простоты. Не поддавайтесь желанию добавить в список принципов «удобно для пользователя», «легкое в применении» или «простое». Все это полезные вещи, но для хорошего дизайна они уже являются минимально необходимыми. Благодаря быстро развивающимся стандартам дизайна простота восприятия больше не означает дифференцированность восприятия.
Составьте принципы дизайна вместе с группой. Если вы хотите привлечь к созданию принципов дизайна членов вашей команды, не занимающихся UX, для начала создайте большой список потенциальных формулировок, как описано ранее. Затем проведите совещание или мини-семинар и предложите команде сократить список и изменить ваши формулировки, чтобы сделать их лучше. Вы можете провести практическое занятие и разработать на нем принципы дизайна в общем виде, как, например, на рис. 7.8. Вы также можете предложить команде обсудить, какие последствия может иметь применение каждого принципа к дизайну продукта.
Рис. 7.8. Принципы дизайна не обязательно должны быть тщательно отточены. Главное, чтобы они отражали определенные ощущения
Если вы работаете удаленно. Как только вы ознакомите команду с принципами дизайна, попросите кого-нибудь распечатать их (в идеале в виде постеров или привлекательно оформленных широкоформатных документов) и повесить там, где ваши коллеги будут регулярно на них натыкаться. Так принципы дизайна всегда будут в центре внимания всей команды. В любом случае не забывайте регулярно обращаться к ним по мере процесса разработки. Принципы дизайна подобны Полярной звезде, которая помогает вам направлять корабль и не сбиваться с пути.
Метод 15Создание эскизов
Какие формы может принимать дизайн продукта?
Создание эскизов – занятие, знакомое почти каждому. Это когда вы садитесь с ручкой за лист бумаги и рисуете свои идеи. Однако при проектировании UX эскизы особенно важны. Я имею в виду тот момент в процессе работы, когда вы начинаете выяснять, какие потенциальные формы может принять окончательный дизайн. Это важный шаг перед началом работы над деталями дизайна.
Эскизы являются важным инструментом дизайна по следующим причинам.
Они дешевы. Создание эскизов – это быстрый и недорогой способ довести ваши идеи до совершенства перед переходом к более точному и трудоемкому инструменту, такому как вайрфреймы. Если вы находитесь на этапе создания эскизов и обнаруживаете, что определенная идея не сработает, вы можете быстро развить или изменить ее. Все, что вам нужно, – это набросать еще один эскиз.
Они помогают вам исследовать. Обычно существует множество направлений, в которых может развиваться дизайн UX. Эскиз – это инструмент мышления, который помогает вам наметить идею, а затем раз за разом ее корректировать. Его также можно использовать для создания ряда потенциальных решений конкретной проблемы. Это делает эскизы превосходным инструментом для изучения ограничений и компромиссов, а также для анализа логических связок одного дизайна с другим.
Они защищают вас от перфекционизма. Поскольку создание эскизов помогает вам исследовать разные направления, оно естественным образом препятствует тому, чтобы вы слишком рано увлеклись одной конкретной идеей. Создание эскизов позволяет одновременно обдумывать множество идей и даже объединять их, превращая в нечто большее, чем любая отдельная концепция.
Они предполагают концептуальную обратную связь. Эскизы всегда нарисованы неаккуратно. Их невозможно спутать с готовыми конструкциями. Следовательно, если вы поделитесь эскизом с кем-то (например, с членом команды), он с большей вероятностью выскажет вам свое мнение об основной концепции, чем даст подробный отзыв о макетах, шрифтах, цветах и т. д. На ранних этапах процесса разработки дизайна обратная связь в отношении концепции является предпочтительной. И наоборот, если вы демонстрируете более проработанный дизайн, но при этом еще не завершили реализацию основной идеи, люди могут сосредоточиться на эстетике деталей и решат, что давать отзывы, которые позволят изменить или даже улучшить общую концепцию, уже слишком поздно.
Они позволяют привлекать других. Создание эскизов как возможно наиболее ценный инструмент для монокоманды (чей успех часто зависит от поддержки со стороны коллег, не занимающихся UX) дает вам возможность переводить абстрактные идеи на осязаемый визуальный язык, которым вы можете делиться с другими. Это позволяет вам донести свои мысли до членов команды и учесть их отзывы, прежде чем тратить время на проработку дизайна.
Эскизы может создавать любой. Кроме вас, эскизы могут создавать и другие. Фактически, если вы предложите межфункциональной команде выразить свои идеи при помощи ручки и бумаги, это позволит вовлечь их в процесс, и они расскажут вам о своих новых замечательных идеях, что прекрасно!
По всем этим причинам эскизы являются важным инструментом в наборе UX‑команды, и каждый должен иметь возможность пользоваться им с определенной степенью уверенности.
Среднее время
Столько, сколько вам понадобится. 30 минут целенаправленного рисования эскизов могут иметь решающее значение.
Когда используется
• Когда вы начинаете изучать идеи дизайна.
• Когда вы хотите вовлечь команду в конструктивное, предметное обсуждение возможных направлений дизайна.
• Когда вы не уверены, в каком направлении может развиваться дизайн, и вам нужен инструмент, который подстегнет ваш творческий процесс.
Попробуйте так
1. Начните с того, что вам нужно: бумаги и ручки
Для рисования подойдет самое простое: старый огрызок карандаша и клочок бумаги. Однако чистый лист бумаги (а лучше – специальный блокнот для рисования) и ручки разного цвета и толщины линии позволят придать процессу рисования атмосферу вдумчивость, а также сделать ваши эскизы более понятными для других людей. Подумайте о том, чтобы собрать небольшой набор для рисования, такой как на рис. 7.9. Всегда храните под рукой пенал с этим минимальным набором инструментов:
• черная ручка или маркер с тонким кончиком – для рисования эскизов;
• красная ручка или маркер с тонким кончиком – для пометок и примечаний;
Рис. 7.9. Комплект для создания эскизов
• черная ручка или маркер с толстым кончиком – для создания толстых линий, которые будут привлекать внимание к наиболее важным или структурным частям эскиза;
• синий карандаш типа non-photo – для создания первого черновика, перед тем как обвести его маркером; он особенно полезен, когда вы рисуете сложные объекты, например руки или людей. Рисунок, сделанный таким карандашом (в основном), не отображается на фотографиях и изображениях со сканеров, что позволяет сделать черновой набросок, а затем обвести его черным маркером;
• темно-серый маркер с плоским кончиком используется для создания теней от объектов или рисования в тех частях эскиза, которые следует рассматривать как фон;
• для создания эскизов хорошо подойдет обычная бумага для ксерокса, или, если вы рисуете экраны для устройства того или иного типа или с определенным разрешением, может оказаться полезным сделать наброски на шаблонах, таких как на рис. 7.10–7.13, которые включают в себя трафарет или контур с точным размером и соотношением сторон экрана. Как это ни парадоксально, но, взяв слишком хорошую бумагу, вы будете бояться делать эскизы, поэтому используйте красивые ручки, но некрасивую бумагу[26].
Рис. 7.10. Шаблон для эскизов для веб-браузера
Рис. 7.11. Шаблон для эскизов экрана мобильного телефона
Рис. 7.12. Шаблон для эскизов для планшета
Рис. 7.13. Эскиз на шаблоне для браузера
2. Ограничьте время на работу
Когда вы будете готовы сесть и начать рисовать эскиз, подумайте о том, чтобы ограничить время на это занятие. Например: «Я сделаю набросок своей идеи за ближайшие полчаса». Ограничение по времени полезно, потому что оно помогает вам двигаться быстрее, а не обдумывать идею до идеала. Когда вы рисуете, стремиться к совершенству не обязательно. Это потребуется позже. Здесь речь идет о генерировании множества всевозможных идей.
3. Сделайте эскиз своих первых идей по ключевым частям восприятия
Для начала спросите себя, что в этом продукте интереснее всего. Если я пользователь, к чему именно я стремлюсь? Какой экран, состояние или конфигурация данных окажутся наиболее привлекательными и, скорее всего, произведут на меня впечатление или составят для меня наибольшую ценность? Какая часть восприятия может заставить вопить от восторга? Выберите один из ключевых моментов и набросайте для него возможные макеты экрана.
4. Дополнительные варианты эскизов
После того как вы сделали эскиз для одной-двух идей, относящихся к определенному состоянию или экрану, попробуйте заставить себя сделать эскизы хотя бы нескольких дополнительных способов разработки этой части продукта. Например, если первый эскиз был очень насыщен текстом, попробуйте представить эту же информацию визуально. Продолжайте исследовать, экспериментировать, придумывать хотя бы несколько идей для каждого экрана, эскиз которого вы рисуете. Можно использовать шаблон «шесть разных эскизов», показанный на рис. 7.14 и 7.15, чтобы быстро набросать шесть небольших эскизов с вариантами оформления конкретной страницы или моменты взаимодействия. Это выглядит как дополнительная работа, но, стимулируя себя продолжать работу после реализации первых хороших идей, вы приучаете себя мыслить нестандартно. Этот способ позволяет монокоманде UX применить такое же строгое, исследовательское, генеративное мышление, какое отличает целую команду дизайнеров.
5. Выберите лучшие идеи
Убедившись в том, что вы всё тщательно изучили, определите, какие направления или идеи кажутся вам наиболее перспективными для дальнейшего развития. Только после этого можно раскочегарить компьютер и приступить к детальной разработке дизайна. Вы можете обнаружить, что смешиваете и сочетаете некоторые идеи из своих первоначальных эскизов. И это здорово! Ваши эскизы должны помочь вам прийти к дизайнерским решениям, которые выходят за рамки любой конкретной идеи.
Рис. 7.14. Заставляя себя исследовать шесть различных альтернативных подходов, вы выходите за рамки своих первых нескольких хороших идей
Рис. 7.15. Такие шаблоны использовать не обязательно, но они помогут вам не забыть набросать несколько вариантов, не останавливаясь на одном[27]
Советы и рекомендации по созданию эскизов
Понятность важнее красоты. Чтобы рисовать превосходные эскизы, не обязательно быть великим художником. При создании эскизов эстетика не слишком важна. Однако ваши эскизы должны быть такими, чтобы кто-то другой, посмотрев на них, смог понять их смысл – или чтобы вы сами могли понять смысл, если вытащите их из ящика стола два-три месяца спустя. Чтобы сделать ваши эскизы четкими, пишите примечания или добавляйте визуальной ясности при помощи маркеров. Зачастую короткого текста со стрелкой, указывающей на определенную часть эскиза, достаточно, чтобы прояснить, почему несколько закорючек – это великолепная идея. Кроме того, сосредоточьтесь на основных фигурах. Эскизы, приведенные на рис. 7.16, созданы дизайнером Рэйчел Глэйвс из Adaptive Path. Рэйчел показывает, что большинство элементов пользовательского интерфейса можно легко нарисовать с помощью нескольких основных фигур: линий, прямоугольников и стрелок.
Инструменты для рисования эскизов. На случай, если вас не устраивает, как выглядят ваши эскизы, существуют инструменты, которые могут помочь. Balsamiq – это онлайн-программа для создания вайрфреймов в виде эскизов, которую можно использовать для создания эскизов дизайна.
• Описывайте словами. Если вам не нравится то, что у вас получается, попробуйте сначала описать идею словами и только потом попытаться нарисовать ее. Некоторые люди от природы лучше воспринимают слова, и использование «текстовых набросков» может оказаться не менее действенным способом изучения возможностей.
Рис. 7.16. Используйте в первую очередь простые формы
• Носите комплект для эскизов с собой. Держите набор для рисования под рукой, чтобы вы могли рисовать в любых местах, во время совещаний или бесед. Когда разговор затягивается и участники зацикливаются на обсуждении, что еще можно было бы сделать с дизайном продукта, возьмите ручку и нарисуйте то, что задумали вы или кто-то другой, – это очень полезно. Так вы сможете превратить чисто умозрительный разговор в нечто более осязаемое. Тот, кто рисует эскизы, руководит беседой, и это очень сильная позиция. Точно так же, если вы вручите ручку коллеге и попросите набросать его идею, то сможете получить более четкое представление о том, что он имеет в виду.
Оформляйте эскизы так, чтобы вашей аудитории было удобно. Чтобы побудить заняться эскизами людей, привыкших оценивать дизайн, выполненный с более высокой точностью, полезно потратить некоторое время (не слишком много), чтобы объединить эскизы в один более конкретный результат. Отсканируйте свои эскизы и поместите их в презентацию или документ, в котором они будут представлены в качестве наглядных примеров, иллюстрирующих письменный обзор приведенных концептуальных направлений.
• Если вы работаете удаленно. Даже если вы не можете присутствовать лично, вы все равно можете добиться того, чтобы обсуждение прошло так, как если бы вы были там. Для этого необходимо строго установить тайминг и организовать структуру, чтобы команда могла увидеть ваши эскизы, нарисовать свои собственные и очень подробно обсудить их все. Чтобы сделать это удаленно, запланируйте несколько длительных периодов времени для онлайн-сеанса с межфункциональной командой. Что нужно сделать?
– Либо выделите на встречу больше времени, чем обычно (скажем, два часа), либо четко ограничьте рабочую сессию очень узкими временными рамками, чтобы наверняка обсудить все необходимое в отведенное время.
– Выберите технологию проведения сеанса, которая обеспечит оптимальный обмен опытом. Обычно это означает наличие выделенной линии для конференц-связи, по которой каждый сможет позвонить, и программного обеспечения для конференц-связи, благодаря которому все смогут видеть лица друг друга и обмениваться документами. Вы можете использовать такие программы, как Adobe Connect, GoToMeeting, join.me или даже Skype, а также такие инструменты, как ConceptShare, ProofHQ и Cozimo, которые предназначены для визуальной связи через интернет и позволяют обмениваться эскизами, вайрфреймами и другими визуальными артефактами.
– На подобных совещаниях очень важно иметь четкую повестку дня и четкий, заранее всем понятный процесс распространения контента. Если совещание срывается из-за каких-либо технических проблем, то, даже если в этом нет ничьей вины, это всех раздражает, и атмосфера открытости, дружелюбия и участия, которую вы пытаетесь создать, исчезает.
– Если совещание посвящено обмену эскизами (или их совместному созданию), вы можете сделать их заранее, отсканировать, а затем разослать по электронной почте, чтобы люди могли обратиться к ним на совещании. Или, если у вас есть планшет (например, Wacom или даже iPad с хорошей программой для рисования, например приложением Paper), вы сможете рисовать в реальном времени в ходе совещания и обсуждения идей. Если вы просите своих коллег рисовать эскизы, а у них нет такого оборудования, как у вас, вы можете просто попросить их нарисовать эскизы ручкой на бумаге и поднести к камерам или сфотографировать на смартфон и отправить всем членам группы по электронной почте (также можно воспользоваться инструментом для совместной работы: scribblar.com).
Метод 16Скетчборды
Как может выглядеть система или продукт в целом и какой диапазон идей возможен на каждом этапе процесса?
Скетчборд – это способ показать эскизы, созданные вами и вашей командой, и облегчить их обсуждение. Скетчборд можно считать большим плакатом, на котором вы объединяете свои эскизы и первоначальные идеи дизайна системы. Скетчборды также помогают выйти за рамки отдельных экранов и представить, как пользователь будет перемещаться между разными частями продукта или системы. Скетчборд предназначен для того, чтобы помочь вам продумать дизайн системы в более широком смысле и побудить вас создавать качественные и креативные проекты. Впрочем, у скетчбордов есть и множество дополнительных преимуществ.
• На них интересно смотреть, они вызывают у людей любопытство и вовлекают их в ваш рабочий процесс.
• Они дешевы и быстро собираются, поэтому вы можете легко собрать скетчборд, когда вам понадобится подумать о пользовании продуктом в широком смысле.
• Они служат хорошей основой для отображения новых идей и даже для записи заметок, вопросов, разъяснений, приоритетов и т. д. Таким образом, скетчборд представляет собой яркое, визуально понятное изображение вклада всей команды в дизайн UX.
Среднее время
В целом 3–4 часа.
• 1 час на сборку скетчборда (при условии, что эскизы уже сделаны).
• 1–2 часа на обсуждение вместе с командой.
• Около 1 часа на обсуждение заметок и новых эскизов и определение следующих шагов.
Когда используется
Когда вы создали несколько первоначальных эскизов или готовы сузить свои идеи и нуждаетесь в мнении команды, чтобы перейти к подробному дизайну. Такой способ работы определяет решения. Совместное дизайнерское мышление и критическое обсуждение преимуществ и недостатков определенных подходов позволяют выявить хорошие идеи, которые при этом становятся очевидными. Вам не придется выступать адвокатом или апеллировать к пользователецентристским добродетелям ваших коллег – они сами смогут прийти к тем же выводам, работая со скетчбордом.
Попробуйте так
1. Соберите все необходимое
После создания эскизов нескольких предварительных идей дизайна продукта (или его части) соберите все необходимые материалы и приготовьтесь собрать скетчборд. Ниже перечислено то, что вам понадобится.
• Бумага. Большой лист бумаги размером примерно 1 × 2 метра (2 листа А0). Самая подходящая рабочая поверхность – у оберточной бумаги бурого цвета, так как она резко контрастирует с эскизами, которые обычно выполняются на белой бумаге. Кроме того, бурая бумага выглядит менее формально, что оказывает небольшой психологический эффект: ее проще исписать черновиками (рис. 7.17). Кроме того, она бывает дешевле, чем белая бумага.
• Лента. Лента должна быть липкой, но не слишком (рис. 7.18). Хорошо подойдет малярная лента или одноразовые кружочки из бумаги, которые часто используются архитекторами и чертежниками для подвешивания чертежей и схем на стену. Главное – найти достаточно прочную ленту, которая будет удерживать на стене большой лист бумаги, не испортив краску, и при этом позволит прикреплять бумагу к бумаге (ваши эскизы – к бумаге скетчборда), а также снимать их и перемещать на новое место, не разрывая бумагу под ними.
Рис. 7.17. Подумайте о том, чтобы купить целый рулон оберточной или крафтовой бумаги и по мере необходимости отрезать от него куски нужного размера
• Стикеры для заметок, которыми можно отметить части вашего скетчборда, соответствующие частям продукта. Подумайте, как использовать цветные стикеры. Например, зеленые – для положительных комментариев, красные – для отрицательных. Это позволит вам быстро определить тенденции, просто отойдя в сторону и взглянув на скетчборд.
• Большие маркеры для крупных четких надписей и заметок.
• Распечатки с важной информацией, которая повлияла на ваш дизайн. Их следует крепить прямо к скетчборду, чтобы связать эскизы с потребностями пользователя и бизнеса, которые вдохновили вас на их создание. Это пригодится, когда на скетчборд будут смотреть другие люди и обмениваться мнениями об изображенных на нем идеях. Это облегчит обсуждение приоритетов, целей и компромиссов. Типы документов, которые вы можете сюда включить: персоны, варианты применения, истории пользователей, принципы дизайна, информация о маркетинговых сегментах, списки функций и т. д.
Рис. 7.18. Если вы собрали все принадлежности для создания скетчбордов в удобный набор, вы будете готовы к импровизированному сеансу их создания, когда вам представится такая возможность
• Любые эскизы или варианты дизайна, которые вы создали на данный момент. К ним может относиться как дизайн высокой степени проработки, так и рисунки на салфетке. На скетчборде можно разместить вообще все, что у вас есть.
2. Соберите ваш скетчборд
Теперь, когда у вас все готово, соберите скетчборд. Начните со структуры. Подумайте обо всех экранах или разделах вашего продукта. Это могут быть просто разделы верхнего уровня или, если вы думаете о конкретном порядке или сценарии работы, последовательные части такого сценария. (Для получения дополнительных указаний по созданию сценариев см. метод «Потоки задач» в этой главе.) Наклейте стикеры для каждой из этих частей или разделов вдоль верхней части бумажного листа. Кроме того, оставьте место на скетчборде для документов, которые вы распечатали, и дайте название этому разделу – что-то вроде «Требования», «Исходные данные» или даже просто «Документы» (как вам удобно). Здесь прикрепите документы, которые послужили для вас источником вдохновения во время работы над первоначальными идеями дизайна.
3. Прикрепите свои эскизы
Затем в каждой из отмеченных вами секций закрепите скотчем все свои первоначальные варианты дизайна или эскизы, как показано на рис. 7.19. Если оказывается, что есть раздел без эскизов, вероятно, это означает, что вам нужно сделать еще несколько набросков. Точно так же, если вы обнаружите, что у вас есть раздел с одной или двумя потенциальными идеями и при этом остается место, это означает, что вам, вероятно, нужны еще эскизы. Скетчборд помогает быстро увидеть, где вы продвигались с трудом, а где – немного легче. Постарайтесь, чтобы у вас было несколько разных идей о том, как можно реализовать дизайн на каждом этапе процесса работы над продуктом.
Рис. 7.19. На этом скетчборде справочные документы размещаются слева, а эскизы – справа
4. Запланируйте сеанс обзора
Теперь наступает самая важная часть. Соберите группу, состоящую из членов вашей команды, коллег или даже просто друзей, и используйте скетчборд, чтобы объяснить свои идеи и получить обратную связь. Начните с объяснения факторов, которые повлияли на ваше мышление. После этого обсудите свои первоначальные идеи о том, как могло бы выглядеть дизайнерское решение. Попросите людей, чтобы, пока вы объясняете свои идеи, они задавали вопросы и честно, непринужденно делились своими впечатлениями. Все это – ценная информация о том, как дизайн может произвести впечатление на других людей. Пока группа высказывает свое мнение, делайте заметки рядом с эскизами. Вы можете писать их прямо на бумаге или на стикерах рядом с соответствующими эскизами. Если вы начнете говорить об альтернативном варианте конкретного эскиза (который часто обусловлен вашими предварительными эскизами), создавайте новые эскизы прямо в процессе обсуждения и добавляйте их на скетчборд. Если какие-то эскизы явно выделяются в лучшую сторону, поставьте рядом с ними большую звезду и укажите, что вам следует развивать их дальше. Имейте в виду, что вы также можете менять эскизы местами и регулировать общий ход процесса, когда вся группа приходит к выводу, что нужно просто изменить структуру.
5. Обсудите лучшие идеи
Ваша цель – к концу сеанса работы со скетчбордом прийти к некоторому пониманию того, какие идеи выглядят достаточно перспективно, чтобы на их основе разработать более детальный дизайн. Эти варианты детального дизайна тоже могут представлять собой обычные эскизы, но они также могут быть вайрфреймами, интерактивными прототипами или даже рабочим кодом – всем, что имеет смысл для процесса разработки продукта.
Советы и рекомендации по скетчбордам
Заставляйте людей двигаться. Одна из причин хорошей работы метода скетчбордов – в том, что они переворачивают с ног на голову традиционный процесс представления и одобрения дизайна. Они заставляют людей вставать со своих мест и активно двигаться во время работы. Скетчборды превращают людей из наблюдателей процесса разработки дизайна в его участников. Они также обеспечивают дополнительную гарантию качества для UX‑команды, помогая вам убедиться в том, что вы разрабатываете продукт не на основе первой пришедшей в голову идеи, а в процессе тщательного творческого исследования. Чтобы это сработало, в ходе сеанса использования скетчборда придерживайтесь правила «никто не сидит на кресле ровно» – поддерживайте активность и вовлеченность коллег в рабочий процесс.
Знайте свой уровень. Скетчборды можно применять для решения задач по устранению дизайнерских проблем различной специфики. Скетчборд можно использовать в начале проекта, чтобы рассмотреть основные компоненты или разделы продукта и начать вырабатывать предварительные идеи о том, как может выглядеть каждый из них. С другой стороны, можно использовать скетчборд на более позднем этапе процесса, чтобы изучить конкретную область или часть рабочего процесса. Можно даже создать скетчборд, сфокусированный на одном экране или моменте, и использовать его для анализа всех вариантов состояния в зависимости от информации, поступившей от пользователя: как он попал на этот экран, зарегистрирован ли он в системе, и т. д. Прежде чем приступить к созданию скетчборда, важно понять масштаб проблемы, которую вы пытаетесь решить. Вам будет трудно управлять процессом, если вы размахнетесь на пятикилометровый скетчборд для всей системы, а в конце концов сгрузите все идеи на полутораметровом изображении одного состояния. Выберите область для своего скетчборда и не выходите за ее границы.
Фокусировка на отдельных аспектах. Скетчборды могут быть превосходным инструментом для критического взгляда на конкретные аспекты дизайна продукта. Вместо одного рабочего сеанса со скетчбордом рассмотрите возможность провести несколько сеансов с участием разных типов людей, которые будут сосредоточены на разных вопросах. Это позволит вам продумать все аспекты продукта. Например, запланируйте встречу с командой инженеров, чтобы провести анализ технической осуществимости, и еще одну встречу со специалистами по контенту, чтобы обсудить, может ли система управления контентом (CMS) поддерживать такой дизайн и какой объем контента необходимо будет создать или приобрести.
Рис. 7.20. По большому количеству аннотаций и заметок между эскизами можно сделать вывод, что работа с этим скетчбордом уже состоялась
Если вы работаете удаленно. Сеансы скетчборда проходят очень оживленно и требуют от участников физической активности. По этой причине их трудно проводить на расстоянии. Однако скетчборды весьма портативны (как показано на рис. 7.20), и их можно легко взять с собой туда, где находится остальная часть вашей команды. Если ваше личное присутствие невозможно, но вы все равно хотите попробовать, следуйте тем же советам по удаленной работе, которые приведены для метода «Составление эскизов» в этой главе.
Метод 17Потоки задач
Как восприятие будет развиваться с течением времени?
Люди не знакомятся с цифровыми продуктами последовательно, страница за страницей или экран за экраном. Они вламываются через черный ход, беспорядочно перескакивают из одной части в другую, ломают формы и обманывают вашу логику. Поток задач заставляет вас задуматься о том, как люди на самом деле используют ваш продукт. Каковы наиболее вероятные сценарии и последовательности действий, которых будут придерживаться пользователи? Какие потенциальные черные ходы они могут использовать, чтобы оказаться в том или ином месте? Как показывает практика, UX чаще всего рушится в промежуточные моменты, когда кто-то переходит от одного шага или экрана к другому (независимо от того, насколько тщательно был разработан каждый шаг). Поток задач помогает спроектировать процесс, который течет плавно даже в переходных точках.
Вы можете создать поток задач в любой программе, подходящей для построения диаграмм. (Подойдет любая программа, описанная в этой главе как метод вайрфреймов.) Или вы можете просто[28] нарисовать поток задач на бумаге, как показано на рис. 7.21. Если у вас мало времени, бумага и ручка даже предпочтительнее, поскольку они позволяют легко добавлять дополнительные детали без необходимости «проектировать» документ с описанием потока, что само по себе может быть отдельной задачей.
Среднее время
1–2 часа на продумывание конкретного потока задач и составление документа.
Рис. 7.21. Грубое представление потока задач
Когда используется
Когда вам нужна полная картина того, как сочетаются элементы более широкого UX для вас и вашей команды.
Попробуйте так
1. Выберите, откуда начать
Вы можете сделать это либо от начала к концу, либо от конца к началу.
• Когда вы рассматриваете процесс от начала к концу, спросите себя: с чем пользователь должен столкнуться в первую очередь? Какова отправная точка? Каковы основные части продукта? Что появляется первым и что может произойти по мере того, как пользователь глубже погружается в продукт?
• При рассмотрении от конца к началу в первую очередь обратитесь к наиболее интересным шагам процесса или «моментам истины» и спросите себя: что происходит до и после них? Моменты истины – это точки вашего продукта, которые представляют собой пункты назначения или переходные точки для ваших пользователей. Это суть того, ради чего здесь оказался пользователь. Моментами истины могут быть, например, экраны покупки и подтверждения на сайте электронного магазина, стена или лента активности на сайте социальной сети.
• Другая альтернатива – сосредоточиться на составлении эскизов на основе сценариев, что представляет собой смесь подходов «от начала к концу» и «от конца к началу». Вместо того чтобы просто сосредоточиться на верхнем слое или ключевых моментах, изучите, как пользователи могут начать с верхнего уровня и проделать весь путь до ключевых моментов.
• Выберите свой подход, а затем нарисуйте начальный экран или шаг в виде небольшой картинки. (Вам не обязательно изображать весь экран, но если показать достаточно деталей, чтобы передать суть экрана, то его будет легче узнать в потоке задач.)
2. Подумайте, что будет после этого (или перед этим)
После выбора отправной точки подумайте, как ваши пользователи до нее доберутся и куда они пойдут дальше. Повторяйте этот процесс, либо продвигаясь от начала к концу, либо продолжая от ключевого момента, с которого вы начали, до тех пор, пока не достигнете начальной и конечной точек.
3. Подумайте об альтернативных точках входа и выхода
На каждом этапе спрашивайте себя: есть ли другой способ сюда добраться? Или пользователь хотел бы попасть куда-то еще (не обязательно на следующий шаг в потоке задач)? Также подумайте, что произойдет, если на этом этапе люди откажутся продолжать и выйдут из системы. Что они увидят, если вернутся позже? Или, если они потом зайдут с другого устройства или компьютера, что они увидят?
4. Добавляйте аннотации
Определив все ключевые шаги или экраны для потока задач, вернитесь к ним позже и добавьте примечания по поводу того, как должны происходить переходы, или другую важную информацию, которую необходимо записать и которая не очевидна при простом просмотре потока задач.
Советы и рекомендации по потокам задач
Упрощайте. Чтобы еще больше упростить задачу, наклейте стикеры на большой лист бумаги, чтобы наметить поток задач. Каждый стикер соответствует одному экрану. Разложите их на большом листе бумаги, чтобы определить связи между ними, и прямо на бумаге нарисуйте соединительные линии, напишите аннотации и т. д. В случае изменения потока просто поменяйте порядок или сделайте другие стикеры. (За этот совет спасибо UX‑дизайнеру Джеймсу Голдсуорси.)
Не пытайтесь объять необъятное. Вместо большого потока задач, охватывающего всю систему, создайте отдельные потоки, ориентированные на основные сценарии. Это не так сложно. И это упрощает обдумывание и помогает сосредоточиться на том, чтобы получить как можно более четкие и неразрывные нити восприятия. Затем можно вернуться и подумать о том, как отдельные потоки задач связаны друг с другом.
Используйте точку, в которой вы находитесь, в качестве отправной для интерактивного прототипа. Таким может быть первый шаг при определении того, какие экраны включить в прототип и когда должна возникнуть интерактивность.
Рис. 7.22. На этой схеме, разработанной Брэндоном Шауэром из Adaptive Path, описаны этапы, через которые проходит пользователь, ключевые точки взаимодействия и вспомогательные процессы, которые происходят «за кулисами»
Что делать, если каналов несколько. Если вы работаете над потоком задач, в котором происходят переходы между каналами или имеются нецифровые компоненты, можно вместо него создать схему взаимодействия, подобную той, что изображена на рис. 7.22. Схемы взаимодействия взяты из области дизайна услуг, но они выполняют функцию, аналогичную потоку задач, – отображают то, как восприятие разворачивается с течением времени. Чтобы больше узнать о схемах взаимодействия или о дизайне услуг в целом, прочтите книгу «Дизайн услуг» (Service Design) Энди Полейна, Лавранса Лёвли и Бена Ризона[29].
Если вы работаете удаленно. Где бы вы ни находились, потоки задач организовать легко. На самом деле удаленная работа даже лучше, так как оставляет больше времени на сосредоточенное размышление. Однако ваши коллеги также могут помочь вам в исследованиях крайних случаев и альтернативных путей, которые иногда выбирают пользователи. (В подобных вещах лучше всего разбираются инженеры.) Также выделите время для телефонного звонка или сеанса удаленной связи, чтобы обсудить имеющееся на данный момент и узнать, что ваша команда об этом думает. Если вам удобно создавать эскизы или собирать поток задач «на лету», это также можно сделать во время сеанса связи, воспользовавшись программой для демонстрации экрана.
Метод 18Вайрфреймы
Подробное описание того, как будет выглядеть и функционировать продукт
Вайрфреймы – это основа дизайна UX. Многие из методов, которые к этому привели, были направлены на то, чтобы уже в этот момент вы могли создать умные, подходящие, актуальные варианты дизайна. Вайрфрейм – это скелетное изображение того, как должен выглядеть продукт (рис. 7.23). Если вам кажется, что это звучит просто, вспомните о том, что в скелете очень много костей. Вайрфрейм, подобно скелету, показывает, как вся система объединяется во взаимосвязанную структуру, составляющую единое целое.
Вайрфреймы обычно представляют собой черно-белые схемы или изображения всех частей продукта или услуги. В цифровом продукте они соответствуют отдельным экранам. При описании услуги они могут соответствовать точкам, в которых клиент соприкасается с услугой (это взаимодействие может происходить как в цифровом виде, так и на бумаге или даже представлять собой личное общение). Вайрфреймы (как правило) выполняются в черно-белых цветах, потому что они сосредоточены только на основных моментах: какая информация должна появиться на экране? Как она должна отображаться? Какие детали показаны? Какие инструменты навигации доступны (если это цифровой продукт), чтобы помочь пользователю перейти от одной части продукта к другой? Вайрфреймы дают некоторое представление о том, как вся информация и все детали связаны друг с другом: как вы переходите от одного шага к следующему и какова соответствующая иерархия информации.
Рис. 7.23. Пример готового вайрфрейма
Помимо черно-белых диаграмм, в вайрфреймы обычно входят примечания о том, как продукт должен себя вести. Например, что должно произойти при нажатии на ту или иную кнопку? Как при тех или иных условиях должны меняться интерактивные элементы? Эти примечания делают вайрфреймы своеобразным мостом между дизайнерской документацией и техническими спецификациями. Вайрфреймы часто можно просто передать инженерам для реализации.
Среднее время
Несколько часов, дней или недель в зависимости от масштаба системы. При работе над цифровым продуктом учитывайте полезное практическое правило: работа с каждым экраном занимает в среднем 2–4 часа.
Когда используется
Когда вы всерьез готовы проработать детали дизайна продукта.
Таблица 7.1. Программное обеспечение для создания вайрфреймов[30]
Попробуйте так
1. Выберите инструмент
Для начала примите решение о том, как вы будете создавать вайрфреймы. Обычно это означает выбор программного обеспечения. Для создания вайрфреймов подойдет практически любая программа, позволяющая рисовать фигуры. Но существуют программы, которые UX‑специалисты выбирают чаще других. Большинство из них оснащены простыми инструментами, позволяющими легко рисовать элементы пользовательского интерфейса на диаграммах. Многие из этих программ также содержат библиотеки стандартных элементов пользовательского интерфейса, а значит, позволяют вам собирать вайрфрейм, просто перетаскивая элементы на страницу. В таблице 7.1 показаны некоторые из наиболее популярных программ для создания вайрфреймов.
2. Создайте шаблон
После выбора инструмента вы можете захотеть сразу приступить к рисованию экранов. Подумайте о том, чтобы сначала создать для своих вайрфреймов шаблон, подобный тому, что изображен на рис. 7.24. Такой шаблон должен учитывать тип устройства или форм-фактор, для которого вы создаете дизайн. Например, вы разрабатываете дизайн для iPhone? Веб-страницу размером 1024 × 768? Страницу для печати размером 8,5 × 11? Создайте шаблон с заданным соотношением сторон и пропорциональными размерами области, для которой вы создаете дизайн. Возможно, вам придется немного уменьшить размеры, чтобы они соответствовали используемому вами программному обеспечению. В своем шаблоне добавьте место для названия, которое будет идентифицировать страницу, экран или вариант дизайна. Также добавьте место для заметок или аннотаций.
3. Составьте список вайрфреймов
Последний шаг перед тем, как приступить к созданию вайрфреймов: составьте список моделей, которые, по вашему мнению, вам понадобится создать, и соберите вместе все эскизы, из которых вы хотите сделать вайрфреймы. Если в вашем списке есть экраны, для которых у вас еще нет идей, начните набрасывать эскиз дизайна, прежде чем приступать к созданию цифрового вайрфрейма.
Рис. 7.24. Шаблон вайрфрейма, созданный в OmniGraffle. В левой части шаблона предусмотрено место для аннотаций. Справа – место для вайрфрейма. Серые прямоугольники представляют собой сетку из четырех столбцов
Если вам нужно доработать какие-либо эскизы, сделайте это на бумаге, прежде чем перейти к работе с программой. Как только вы переключитесь на цифровую технологию, вам будет сложно отделить функциональные вопросы от естественного желания улучшить вайрфреймы, поэтому, прежде чем приступить к работе, составьте базовый план. Однако ваши вайрфреймы не обязательно должны быть точной копией ваших эскизов. На самом деле вполне вероятно, что во время работы над вайрфреймами вы будете думать о деталях и тонких нюансах дизайна. Некоторые вещи, работающие на бумаге, не всегда работают на экране, и это нормально. Это часть рабочего процесса.
4. Начинайте рисовать вайрфреймы
Итак, вы готовы приступить к созданию вайрфрейма. Отмените все другие дела. Включите приятную музыку. Налейте себе чашку хорошего чая и приготовьтесь окунуться в затмевающий время поток вайрфреймов. Работая над воплощением дизайна каждого экрана или каждой части продукта, думайте о следующих вещах.
Последовательность и состояние. Как сюда доберется пользователь и куда он пойдет дальше? Имеет ли эта точка несколько состояний в зависимости от того, каким путем до нее доберется пользователь?
Плотность информации. В чем здесь заключается главная идея или действие? На что я должен был бы обратить внимание в первую очередь? Отличается ли это от того, что я в первую очередь замечаю в разрабатываемом дизайне?
Сетка. Насколько четким, сбалансированным и упорядоченным кажется дизайн?
Принципы дизайна. Вызывает ли этот экран или часть продукта то восприятие, которое описано несколькими фразами?
Сообщения об ошибках и различные состояния. Что видит пользователь, когда дела идут не так, как планировалось?
Время от времени вставайте, прогуливайтесь, после чего возвращайтесь и смотрите на свои вайрфреймы свежим взглядом. В этот момент спрашивайте себя: как можно сделать это еще проще? Продолжайте до тех пор, пока ваши вайрфреймы не окажутся такими, что можно будет остановиться и показать их другим людям.
5. Поделитесь вайрфреймами и прислушивайтесь к обратной связи
Поделитесь своими вайрфреймами с командой (или вообще с кем-нибудь, кого вы сможете найти). Получите отзыв о том, имеет ли дизайн смысл, соответствует ли поток задач тому, как люди предположительно будут использовать продукт, и не кажется ли что-либо странным. Спросите, чего ваши собеседники ожидают от взаимодействия с определенными частями дизайна. Соответствуют ли их ожидания тому, что планировали вы? Примите отзыв с должным уважением – как ценный честный вклад, который поможет вам дополнительно улучшить дизайн UX.
Советы и рекомендации по вайрфреймам
Показывайте свою работу другим. Создание вайрфрейма может оказаться самой трудоемкой частью рабочего процесса. Поэтому оно является важной, но сложной частью работы для монокоманд UX. Как добиться того, чтобы вы сделали прекрасную дизайнерскую работу, не передвигая пиксели по экрану сутки напролет день за днем? Заранее позаботившись о создании эскизов и скетчбордов, вы сможете сбалансировать время, которое тратите на совместную работу с другими людьми, и время, когда вы работаете самостоятельно. Что бы вы ни делали, следите за тем, чтобы не зарыться в процессе создания вайрфрейма, а вовремя показать свою работу другим людям. Никогда не ныряйте в кроличью нору идей, не обсудив с коллегами, действительно ли то, о чем вы думаете, жизнеспособно. Для монокоманды UX проверка и демонстрация работы поднимает завесу тайны над дизайном и помогает вашим коллегам понять процесс разработки UX.
Создайте сетку. Подумайте о том, чтобы добавить в шаблон вайрфрейма едва видимую сетку. Ею вы сможете пользоваться для создания последовательных, сбалансированных и четких вариантов дизайна. Часто используется сетка 12 × 12, потому что она дает возможность разделить всю модель на одинаковые строки и столбцы по 3 или 4 штуки. Однако для разных типов устройств можно порекомендовать разные сетки. Чтобы узнать об этом больше, возьмите хорошую книгу о системах сеток, например «Создавая и ломая сетку» (Making and Breaking the Grid) Тимоти Самары (www.amazon.com/dp/1592531253/)[31].
Подумайте о совместимости инструментов. Выбирая инструмент для создания вайрфреймов, подумайте о том, с кем вы будете делиться этими документами и насколько они должны быть редактируемыми. Это может повлиять на выбор инструмента для их создания. Если вы собираетесь передавать вайрфреймы графическим дизайнерам, приоритетом должна быть хорошая интеграция с Photoshop (это может служить аргументом в пользу выбора одного из продуктов Adobe). Если можно просто сохранить вайрфреймы в формате PDF и разослать их, то подойдет практически любой инструмент. Но если вам нужно поделиться вайрфреймами с другими людьми и вы пользуетесь Mac’ом, в то время как все остальные работают на ПК, вам может понадобиться инструмент, который хорошо работает с ПК (скажем, OmniGraffle не подойдет).
Рассмотрите новые методы. Метод дизайн-коллажей похож на создание вайрфреймов, но он отличается более инклюзивным и менее техническим подходом. Вместо того чтобы рисовать экран с нуля, при создании коллажа вы буквально собираете его из общих элементов интерфейса (рис. 7.25). Например, распечатываете взятые с сайтов образцы виджетов или продуктов, которые вам нравятся (подходящим источником также могут послужить библиотеки шаблонов), а затем с помощью ножниц, чистого листа бумаги и скотча начинаете собирать дизайн, в котором, как вам кажется, есть все необходимые элементы. Возможно, вам придется изменить некоторые виджеты, дорисовав их. Возможно, вам даже придется создать несколько новых. Основная идея состоит в том, чтобы использовать найденное вдохновение в качестве отправной точки. Это отличный способ справиться со страхом, внушаемым пустой страницей. Для монокоманды дизайн-коллаж также может стать интересным групповым упражнением, если привлечь к процессу создания вайрфреймов людей, не имеющих опыта работы с UX.
Рис. 7.25. Веб-страница, собранная при помощи дизайн-коллажа. Следующим шагом будет превращение ее в вайрфрейм
Если вы работаете удаленно. Для удаленно работающих сотрудников дизайн может оказаться сложной частью рабочего процесса. Некоторые моменты требуют полной концентрации внимания (что отлично подходит для удаленной работы). Однако некоторые моменты требуют быстрых итераций, множества отзывов и хорошего умения читать язык тела, чтобы понять, как люди на самом деле относятся к обсуждаемому вопросу (тут лучше подходит личная беседа). Также понадобится много говорить и объяснять происходящее, и по телефону это делать, конечно, сложнее, чем лично. Часто примерно в середине работы над проектом наступает момент, когда дизайн вроде бы наконец обретает форму – и (сюрприз!) вдруг кажется, что все летит наперекосяк, и ваши коллеги начинают выражать серьезную обеспокоенность по поводу направления дизайна. Именно в этот момент находиться вдали от остальной команды может быть труднее всего.
Часто этот момент наступает одновременно с тем, когда дизайн выходит из удобного, неоднозначного состояния эскизов и начинает принимать определенную (и определенно цифровую) форму. Возможно, люди, увидев наконец что-то определенное и осязаемое, забеспокоятся обо всем, что еще не доведено до ума. Опасаясь, что их принудительно заставят двигаться в направлении, которое еще не полностью ясно, люди иногда приходят в бешенство. Я называю это периодом расстановки приоритетов. В это время определенно следует тесно, лицом к лицу общаться с командой. Если возможно, составьте план заранее и ожидайте, что во время создания вайрфрейма пройдет период расстановки приоритетов, и вам нужно будет в течение нескольких дней находиться вместе со своей командой лично или постоянно онлайн.
Методы, описанные в этой главе, охватывают различные вещи, о которых вам необходимо думать при проектировании UX: от базового позиционирования продукта до того, какие различные формы может принимать UX, и тактических тонкостей функционирования дизайна. В основе лежит то, что разработка дизайна должна представлять собой процесс исследования, к которому вы сможете привлечь разных людей.
Поэтому, если вы действительно хотите получить хорошую отдачу от вложенных усилий, сконцентрируйтесь на скетчбордах. Они – ваше тайное оружие, которое позволит вам привлечь людей к процессу, заинтересовать их и доставить им удовольствие. Скетчборды не только позволяют другим увидеть, как протекает работа над проектированием UX, но и помогают вам усовершенствовать дизайн.