Pull to refresh

Книга «Дизайн для разработчиков»

Reading time20 min
Views6.7K
image

Привет, Хаброжители!

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

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

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

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

Мы не будем уделять много внимания коду, однако, поскольку книга посвящена веб-дизайну и пользовательскому опыту, в ней периодически будут встречаться фрагменты кода. Максимальную пользу из материала извлекут специалисты, которые имеют опыт работы с языками JavaScript или PHP и базовое понимание HTML и CSS, но практически не знакомы с основами дизайна и проектирования UX.
Структура издания
В части I рассказывается об основных принципах дизайна и о преимуществах, которые дает их понимание. В главе 1 говорится о том, почему разработчикам следует изучить основы дизайна, а также о положительных последствиях этого для взаимодействия между командами специалистов различных профилей. В главе 2 подробно рассматриваются основные принципы дизайна, понимание которых позволяет сделать дизайн безупречным и хорошо организованным.

Часть II начинается с изложения основ проектирования UX. В главе 3 приводится обзор его многочисленных аспектов, включая исследование, копирайтинг и дизайн. Глава 4 посвящена этапу исследования целевой пользовательской аудитории, здесь рассказывается о том, почему необходимо такое исследование, о различных типах данных, которые можно собрать, а также о некоторых наиболее распространенных методах их сбора. В главе 5 мы начнем закладывать фундамент нашего дизайна, организуя контент и определяя пользовательские сценарии, уделяя особое внимание этапу проектирования пользовательского опыта.

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

В главе 8 рассмотрим основы типографики и поговорим о том, как выбор шрифта может изменить тон вашего сайта. В главе 9 большое внимание будет уделено цвету и выбору изображений в зависимости от вашей цветовой палитры. В главе 10 мы соберем все воедино и используем то, что вы узнали из глав 4–9, для создания и оформления главной страницы с использованием многоуровневого подхода.

Часть IV завершает цикл проектирования. В ней мы поговорим о тестировании дизайна и о том, почему разработка лежит в основе пользовательского опыта в веб-сфере. Глава 11 посвящена вопросам тестирования дизайна с целью убедиться, что он обеспечивает достижение целей сайта. В главе 12 рассматриваются взаимосвязи между пользовательским опытом и разработкой, а также приводятся некоторые другие соображения.

Основы пользовательского опыта


В этой главе


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

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

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

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

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

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

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


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

image

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

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

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

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

Что такое пользовательский опыт


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

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

Когда пользователь взаимодействует с физическим или цифровым продуктом, его мнение зависит от того, удобно ли использовать этот продукт. Реализует ли он ожидаемые функции? Хорошо ли работает? Последний вопрос особенно важен в цифровом пространстве, поскольку ошибки или замедления могут негативно повлиять на восприятие пользователем веб-сайта или приложения. Ответы на перечисленные вопросы формируют общую картину пользовательского опыта. Питер Морвиль, влиятельная фигура в области создания информационной архитектуры и UX-проектирования, предложил схему под названием «соты пользовательского опыта» (User Experience Honeycomb) (рис. 3.2). На ней представлены различные качества продукта, необходимые для создания ценного и значимого пользовательского опыта.

image

Пользовательский опыт не ограничивается удобством использования продукта или, как в нашем случае, веб-сайта. Согласно схеме Морвиля, для обеспечения значимого пользовательского опыта продукт должен обладать перечисленными ниже качествами.
  • Полезность — удовлетворяет ли сайт какую-либо потребность и насколько успешно?
  • Удобство использования — легко ли пользоваться сайтом?
  • Простота поиска — легко ли находить нужную информацию и ориентироваться на сайте?
  • Ценность — приносит ли сайт пользу тем, кто его финансирует? Создает ли он прибыль или выполняет какую-либо миссию?
  • Привлекательность — обладает ли сайт хорошим дизайном? Используются ли в его оформлении элементы фирменного стиля бренда, изображения и другие элементы для создания визуально приятного впечатления?
  • Доверие — могут ли пользователи доверять содержимому сайта и его источникам?
  • Доступность — могут ли пользоваться сайтом люди с ограниченными возможностями, применяющие вспомогательные технологии для получения доступа в интернет?
Приведенный выше список предоставляет обобщенный и укрупненный обзор различных аспектов проекта, к которым можно обращаться в процессе его реализации. Цель таких обращений — гарантировать согласованность разных функций или фрагментов контента. Перечисленные качества являются своеобразной путеводной звездой, позволяющей убедиться в том, что при разработке и построении продукта обеспечивается ценность и удовлетворяются потребности клиентов и тем самым создается значимый для них опыт.

Роли специалистов в области UX-проектирования


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

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

Исследование пользователей


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

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

Проектирование пользовательского опыта


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

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

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

ПРИМЕЧАНИЕ Как уже говорилось, UI/UX-дизайнер — это распространенное название должности, которое часто встречается на сайтах по трудоустройству. Однако важно различать понятия UI (user interface, пользовательский интерфейс) и UX (user experience, пользовательский опыт), поскольку, несмотря на некоторое пересечение понятий, разработка пользовательского интерфейса и пользовательского опыта предполагает выполнение разных типов задач.

UX-писатели


Хороший пользовательский опыт не ограничивается возможностями и функциями сайта или приложения; еще одним важным его компонентом является текст, сопровождающий визуальные элементы. Визуальная составляющая дизайна призвана привлечь внимание пользователя к странице (с помощью основных принципов, рассмотренных в главе 2), а текст должен рассказать пользователю о том, на что он смотрит, и при этом быть максимально продуманным.
UX-писатель — это больше чем просто мастер слова из команды маркетологов. Хотя эта роль, скорее всего, будет предусматривать работу с маркетологами, содержание создаваемого данным специалистом текста должно отличаться особым уровнем детализации и продуманностью. Как и в случае с выбором цветов, кнопок и анимации для использования на сайте, выбор слов требует принятия обдуманных решений. Роль UX-писателя не ограничивается рамками роли копирайтера-маркетолога. Например, UX-писатели используют результаты исследований пользователей при написании текста для всех элементов пользовательского интерфейса, с которыми могут контактировать клиенты. Именно эти специалисты следят за тем, чтобы контент был полезным и нужным, и не забывают при этом о звучании бренда в целом.

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

На протяжении своей карьеры я нередко выступала в роли UX-писателя. Пожалуй, самым запоминающимся примером создания продуманного опыта, о котором я уже рассказывала в главе 1, была разработка дизайна сайта webhint.io (который изначально назывался Sonar). Я разработала дизайн страницы индикации очереди на сканирование, которая появлялась перед пользователями по причине технических ограничений базы данных бэкенда. Опираясь на знания нашей основной целевой аудитории, я создала дизайн (рис. 3.3), в котором иллюстрация выбивающегося из сил нарвала сопровождалась заголовком Nellie’s working overtime (Нелли работает сверхурочно). Под ним располагался небольшой фрагмент текста с подробным описанием причины задержки и ссылкой на результаты сканирования, к которым разработчик мог обратиться позднее.

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

image

Методологии проектирования пользовательского опыта


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

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

Существует множество методологий, и часто крупные компании вроде Google разрабатывают собственные подходы к проектированию пользовательского опыта и созданию дизайна для использования в своих проектах. Однако мы рассмотрим две наиболее распространенные методологии: дизайн, ориентированный на пользователя, и модель «двойного алмаза». Эти схемы помогают представить весь ход реализации проекта, от проведения исследований до разработки. Они также могут пригодиться для более детального рассмотрения конкретных частей продукта, сайта или приложения. Таким образом, эти процессы могут быть применены к проекту, связанному как с созданием целого сайта, так и с разработкой новой функции или части уже работающего сайта.

Дизайн, ориентированный на пользователя


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

Этот особый способ мышления можно интегрировать в уже существующие методы работы. Например, если вы являетесь частью команды, использующей Agile, Waterfall или другие методы, вы можете применить к ним принципы дизайна, ориентированного на пользователя. На сайте Usability.gov описано четыре общих этапа разработки такого дизайна, однако конкретные задачи и фазы будут зависеть от того, как именно вы работаете и на каком этапе реализации проекта находитесь.
  • Уточнение контекста использования — необходимо определить, кто является основной целевой аудиторией, почему эти люди используют продукт, каковы их требования и в каких обстоятельствах они будут его применять.
  • Уточнение требований — здесь следует сориентироваться на то, какие бизнес-требования или цели пользователей должны быть достигнуты, чтобы продукт был успешным.
  • Разработка дизайнерских решений — на данном этапе выполняется работа, связанная с созданием вайрфреймов, визуальных макетов, прототипированием и собственно разработкой.
  • Оценка эффективности интерфейса — тестирование макета и прототипов, в идеале при участии реальных пользователей, для сбора отзывов и начала итеративного процесса доработки дизайнов с учетом полученной обратной связи.
Эти четыре этапа итеративного процесса показаны на рис. 3.4. В зависимости от типа реализуемого проекта сбор обратной связи и внесение изменений могут осуществляться непрерывно.

image

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

Модель «двойного алмаза»


Модель «двойного алмаза» (double diamond process) сочетает в себе дивергентное мышление, широкое изучение проблемы, конвергентное мышление и целенаправленные действия. В отличие от описанного выше подхода, данный процесс предполагает выявление проблемы, ее определение и разработку решений. Это не означает, что пользователи не принимаются в расчет или не могут быть вовлечены в процесс. Однако если при использовании подхода, ориентированного на пользователя, основное внимание уделяется созданию дизайна на основе клиентских требований, то в модели «двойного алмаза» в фокусе оказывается построение дизайна, направленного на решение конкретной проблемы.

В 2005 году после изучения и анализа различных методов, используемых компаниями для решения творческих задач, Британский совет по дизайну разработал «дорожную карту» для этого творческого процесса. Люди, работавшие над этим исследованием, выявили общие закономерности в различных процессах и сформулировали на их основе модель «двойного алмаза». Ее название обусловлено визуальным представлением процессов дивергентного и конвергентного мышления на схеме (рис. 3.5).

image

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

На следующем этапе мы снова используем дивергентное мышление для разработки множества возможных решений проблемы, после чего останавливаемся на одном из них. Как и в случае с дизайном, ориентированным на пользователя, можно разбить этот процесс на четыре фазы.
  • Обнаружение (Discover) — в ходе исследований собираются данные для получения представления о проблеме.
  • Определение (Define) — результаты исследований фильтруются с целью определения проблемы, которую необходимо решить.
  • Разработка (Develop) — изучаются и тестируются различные решения.
  • Реализация (Deliver) — решения оттачиваются для выбора и дальнейшей реализации наиболее успешного из них.
Несмотря на то что этот процесс кажется линейным, он не обязательно должен быть таковым и, скорее всего, не будет. Может случиться так, что вы определили проблему, которую необходимо решить, разработали несколько решений для тестирования, но обнаружили, что ни одно из них не нашло отклика у пользователей. В этом случае после анализа обратной связи вы вернетесь ко второй фазе процесса, чтобы переформулировать проблему. Описанные выше схемы вполне могут быть адаптированы и изменены в соответствии с потребностями проекта.

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

Углубленное изучение практик проектирования пользовательского опыта


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

Резюме

  • Этап проектирования пользовательского опыта включает в себя не только разработку вайрфреймов, моделирующих компоновку элементов сайта, но и такие фазы реализации проекта, как исследование и тестирование. Разработчики и члены команды, в большей степени ориентированные на бизнес, скажем, занимающиеся продажами или работой с клиентами, также влияют на пользовательский опыт, например принимая решения в отношении кода или проводя исследования требований клиентов.
  • Под пользовательским опытом понимается взаимодействие человека с продуктом и получаемые им при этом впечатления.
  • Питер Морвиль выделяет семь аспектов пользовательского опыта, ориентируясь на которые мы можем обеспечить содержательный и полезный опыт для своих пользователей. Согласно предложенной им схеме, хороший продукт должен быть полезным, удобным, обеспечивающим простоту поиска, ценным, привлекательным, заслуживающим доверие и доступным.
  • Хотя в сфере проектирования пользовательского опыта задействованы профессионалы нескольких различных ролей, задачи, решаемые этими людьми, часто пересекаются с работой специалистов в таких областях, как исследования и дизайн.
  • Дизайн, ориентированный на пользователя, в первую очередь направлен на удовлетворение потребностей клиента. При этом пользователь участвует в реализации практически всех этапов процесса.
  • Метод «двойного алмаза» ставит во главу угла проблему как таковую и поиск ее решений с помощью дивергентного и конвергентного мышления.
  • Несмотря на существование множества различных методологий UX-проектирования, ни одна из них не является единственно правильной, и на самом базовом уровне все они должны обеспечивать различные фазы реализации проекта. Выбор задач, решаемых в рамках каждой фазы, в конечном счете зависит от вас.
Об авторе
Стефани Стимак — продакт-менеджер, имеет более чем десятилетний опыт работы в области дизайна, специализируется на создании продуктов для разработчиков. Стефани выступала на веб-конференциях по всему миру по темам веб-разработки и дизайна, во многих случаях делая акцент на необходимости и способах преодоления разрыва между этими сферами. Занимаясь дизайнерскими проектами, она сотрудничала с такими компаниями, как Safeway, MBARI, Microsoft Azure, Microsoft Office, Windows, T-Mobile и Blue Cross Blue Shield.

Следуя своему увлечению темами веб, дизайна и разработки, она присоединилась к команде создателей Microsoft Edge, работала над такими инструментами для разработчиков, как webhint.io и DevTools для браузера Edge. В фокусе ее интересов находятся и другие инициативы в области веб-платформ, в том числе Web We Want (webwewant.fyi).

В своей многообразной деятельности автор старается применять образ мышления разработчиков. После шести лет работы в команде Microsoft Edge Стефани занялась управлением продуктами для разработчиков в сфере стартапов.

Более подробно с книгой можно ознакомиться на сайте издательства:
» Оглавление
» Отрывок

По факту оплаты бумажной версии книги на e-mail высылается электронная книга.
Для Хаброжителей скидка 25% по купону — Веб-дизайн
Tags:
Hubs:
Total votes 10: ↑10 and ↓0+10
Comments5

Articles

Information

Website
piter.com
Registered
Founded
Employees
201–500 employees
Location
Россия