Применение принципов превосходного UX-дизайна
Вы определились с набором функций, которые, по вашему мнению, должны быть в составе MVP. Пользовательский опыт (UX) – представленный на верхнем уровне пирамиды соответствия продукта рынку – это именно то, что воплощает в жизнь и делает доступными для потребителя все функции и преимущества продукта. Даже принимая исключительно правильные решения на четырех предыдущих уровнях, вы не добьетесь соответствия продукта рынку, если у вас не будет хорошего пользовательского опыта.
В отличие от других глав второй части этой книги, здесь не будет описан отдельный этап процесса создания бережливого продукта. Данный раздел полностью посвящен UX-дизайну, поскольку он крайне важен для достижения соответствия продукта рынку. Поэтому при разработке прототипа MVP я рекомендую воспользоваться приведенными здесь рекомендациями.
Они не превратят вас в дизайнера мирового класса, но дадут представление о UX-дизайне и понимание ключевых концепций. Представленная здесь информация будет особенно полезна менеджерам по продуктам, разработчикам и другим лицам, которые тесно взаимодействуют с проектировщиками. Полученные знания помогут вам вести содержательные дискуссии с дизайнерами и, в конечном счете, создавать более качественные продукты.
Что отличает превосходный UX-дизайн?
У каждого из нас есть опыт использования продуктов как с фантастически прекрасным, так и с плохим интерфейсом. Последние не отличаются интуитивной понятностью и удобством использования. Вам не удается найти нужную кнопку там, где вы ее ожидаете увидеть, и вообще не понятно, что делать дальше. Часто интерфейс приложения заводит вас в тупик или выдает загадочное сообщение об ошибке. Бывает, что шрифт на экране оказывается нечитаемым или дизайн оформления выглядит неэстетично. Все перечисленные проблемы являются признаками плохого UX-дизайна.
Напротив, продукт, оснащенный отличным пользовательским интерфейсом, кажется простым и удобным в использовании. Найти искомое именно там, где вы его ищете, и понять, что делать дальше, не составляет труда. Пользовательский интерфейс выстроен настолько естественно, что вы можете полностью сосредоточиться на выполнении своих задач. Вы даже можете получать эстетическое удовольствие от использования такого продукта, иные эмоциональные выгоды, такие как уверенность в своих силах или душевное спокойствие. Отличный дизайн может привести вас к тому, что психологи называют «состоянием потока», когда вы полностью погружаетесь в работу. Когда вы находитесь в таком состоянии, все остальное отходит на задний план, вы испытываете полную вовлеченность и удовольствие от выполняемой задачи. Дружественный пользовательский интерфейс может стать очень важным отличительным признаком любого продукта.
Итак, что же делает пользовательский опыт превосходным? Независимо от того, насколько удобен в использовании или красиво сделан продукт, он не может обеспечить отличный пользовательский опыт, если сам пользователь не посчитает ценными те преимущества, которые предоставляет продукт. В пирамиде соответствия продукта рынку потребительские выгоды, которые он призван обеспечить, находятся на уровне ценностного предложения, который, в свою очередь, расположен на два уровня ниже уровня пользовательского опыта. Пользовательские преимущества реализуются с помощью функционала, состав которого определяет команда разработчиков. Плохой пользовательский опыт не позволяет пользователю реализовать заложенные в продукте преимущества. Превосходный же пользовательский опыт помогает с легкостью реализовать все преимущества, которые предлагает функционал продукта. Отлично проработанный пользовательский опыт служит прекрасным дополнением преимуществ, которые клиенты считают ценными, обеспечивая высокую степень удобства и удовлетворения от использования продукта.
Удобство использования
Первым ключевым атрибутом отличного пользовательского опыта является удобство использования (юзабилити). Оно достигается сосредоточением разработчиков на целях пользователей и задачах, которые им приходится решать для достижения этих целей. Каков процент пользователей, успешно решивших каждую из своих задач с помощью вашего продукта? Какая часть пользователей сумела достичь поставленной цели, но столкнулась с проблемами на своем пути? Получить ответы на эти вопросы позволяет юзабилити-тестирование, в ходе которого вы просите пользователей выполнять ключевые задачи с использованием вашего продукта и наблюдаете за тем, что и как они делают.
Помимо успешного выполнения задач, юзабилити включает в себя еще и понятие эффективности. Если клиенты могут справиться с освоением той или иной функции продукта, но для этого им требуется совершить слишком много попыток или потратить слишком много времени, это приводит к снижению удобства использования. Эффективность легко оценить, измерив затраченные пользователем усилия. Например, вы можете просто посчитать количество кликов, касаний, нажатий клавиш или других действий пользователя, необходимых для выполнения определенной задачи в соответствующем пользовательском интерфейсе. Аналогичным образом, вы можете замерить количество времени, которое пользователь тратит на выполнение каждой поставленной ему задачи. Собранные показатели эффективности можно сравнивать при выборе наиболее подходящего пользовательского интерфейса или для улучшения существующего дизайна.
Необходимо принимать во внимание не только физические усилия пользователя, такие как клики «мышью» и нажатия клавиш, но и умственные. Вы должны учитывать когнитивную нагрузку, которую пользовательский интерфейс вашего продукта возлагает на пользователя. Вы можете морально подавить пользователей, нагружая их огромным объемом информации или предоставляя слишком большое количество вариантов выбора. Вы также можете подвергнуть лишним испытаниям их умения или память. Хороший пользовательский интерфейс не требует от пользователей больших физических или умственных усилий.
Вероятность успешного решения пользователем своей задачи напрямую связана с количеством затраченных на это усилий. Понаблюдав за свою карьеру за огромным количеством тестов юзабилити и множество раз проведя анализ показателей использования различных продуктов, я пришел к общему пониманию, которое сформулировал в виде того, что называю «Законом юзабилити Олсена»:
Чем больше усилий требуется для выполнения того или иного действия, тем ниже доля пользователей, которые будут выполнить это действие.
Чем меньше усилий требуется для выполнения действия, тем выше доля пользователей, выполняющих это действие.
Я неоднократно убеждался в справедливости этого закона при оценке пользовательского опыта. Важно помнить об этом не только для повышения удобства использования продукта, но и для повышения коэффициента конверсии таких действий пользователей, которые важны для успеха вашего бизнеса. Примерами таких действий являются отправка заполненной регистрационной формы или завершение процесса оплаты.
В дополнение к объективным поведенческим показателям, о которых я упоминал выше, важно иметь представление о том, насколько простым или сложным в восприятии пользователей является использование вашего продукта. Например, вы можете спросить их: «Насколько прост или сложен продукт в использовании?» – и попросить дать оценку по 7-балльной биполярной шкале:
1. Очень сложен.
2. Сложен.
3. Немного сложен.
4. Не прост и не сложен.
5. Скорее прост.
6. Прост.
7. Очень прост.
В завершение теста на удобство использования вы также можете задать пользователям и другие вопросы, такие как «Насколько полно продукт соответствует вашим потребностям?» или «Насколько вы удовлетворены продуктом?». Не стоит ожидать, что ответы будут основываться на вашем предполагаемом ценностном предложении или на наборе функций, о которых они, скорее всего, даже не знают. Вместо этого ответы будут зависеть от того, насколько успешным оказался их реальный опыт использования продукта. Вы не получите никакой похвалы за наличие ценной функции, если пользователи не смогут ее обнаружить или не сумеют понять, как она работает.
Удобство использования продукта необходимо оценивать применительно к определенному профилю пользователя. Ваши целевые потребители обладают разным уровнем знаний или навыков. У них различный уровень технической подготовки и познаний в соответствующей области. Ожидания в отношении юзабилити будут совершенно разными для продукта, предназначенного для высококвалифицированных опытных пользователей, и продукта, ориентированного на массового потребителя. В этом вопросе вам должен помочь метод персонажей, который был описан в главе 3 и к которому мы вновь обратимся далее.
Простота обучения также является важным атрибутом юзабилити. Сколько времени и усилий требуется пользователю, чтобы пройти путь от первого знакомства с вашим продуктом до мастерского владения всеми его функциями? Это особенно важно для новых пользователей. Как правило, они очень быстро делают вывод о том, подходит им продукт или нет, и простота обучения имеет решающее значение в их оценке. Многие продукты, оснащенные превосходным пользовательским опытом, удовлетворяют потребность в быстрой «адаптации пользователя» с помощью подробных руководств или гидов, предназначенных для тех, кто впервые использует данный продукт. Впоследствии, когда эти электронные помощники выполнят свою миссию и станут ненужными пользователю, они могут быть отключены.
Удовольствие от использования продукта
Вторым ключевым атрибутом отличного пользовательского опыта является удовольствие от использования продукта. Хорошее юзабилити помогает избежать плохой оценки UX, но его одного недостаточно для обеспечения отличной оценки пользовательского опыта. Если удобство использования дает ответ на вопрос «Могут ли клиенты использовать ваш продукт?», то наличие или отсутствие удовольствия от использования позволяет понять, нравится ли клиентам пользоваться вашим продуктом. Удовольствие, выходящее за рамки просто отсутствия разочарования, говорит о появлении положительных эмоций. Клиентам приятно пользоваться теми продуктами, которые их радуют.
Одним из аспектов удовольствия от использования продукта является эстетика – то есть привлекательный внешний вид продукта. Клиенты видят продукт еще до того, как начинают им пользоваться, поэтому визуальная привлекательность помогает создать положительное первое впечатление. Приятный дизайн может вызывать ощущение высокого качества продукта, большее доверие и чувство непринужденности. Положительные эмоции, которые помогает вызвать эстетика продукта, могут привести к повышению удовольствия клиентов от его использования.
Иногда удовольствие от использования достигается за счет простоты пользовательского интерфейса. В UX-дизайне меньше часто означает больше – устранение визуального беспорядка снижает когнитивную нагрузку на пользователя и помогает ему сосредоточиться на том, что действительно важно. Достаточно вспомнить минималистичный дизайн домашней страницы Google, на которой нет ничего, кроме поисковой строки.
Пользовательский опыт, при взаимодействии с которым появляется впечатление, будто он умеет читать ваши мысли, тоже доставляет пользователю удовольствие. Использование разумно выбранных установок по умолчанию или проактивных ответов на популярные вопросы может вызывать ощущение понимания и сопричастности. Google Suggest, описанный в главе 5, является хорошим примером такого подхода.
Продукты могут выражать индивидуальность и тем самым вызывать у пользователей положительные эмоции. Обычно это достигается при помощи тональности используемого языка. Юмор – еще один хороший способ вызвать у пользователя восторг. Он реализуется с помощью соответствующих текстовых сообщений и/или вызывающих улыбку изображений.
Удовольствие от использования часто достигается за счет ответной реакции продукта на действия пользователя. Отличным примером является эффект «резиновой ленты», которым интерфейс iOS откликается на попытки пользователя прокрутить сверх допустимого предела отображаемый на экране документ или веб-страницу. Это настолько забавный эффект, что многие люди – сознательно или нет – вызывают его на экране своих устройств снова и снова. Анимация и звуковые эффекты тоже могут вызывать восторг. Я знаю, что многим пользователям Quicken нравится слышать звук кассового аппарата «ка-цзинь» после совершения каждой финансовой транзакции. Сигнал запуска Apple Mac – это еще один звук, который вызывает положительные эмоции у многих пользователей.
Удивление – важная составляющая удовольствия. Ваш продукт может вызывать положительные эмоции у пользователей, делая неожиданные для них вещи. В первые дни существования Twitter его платформа испытывала частые перегрузки. Вместо того чтобы показывать пользователям в таких случаях скучную страницу с сообщением об ошибке, разработчики демонстрировали им ставшую широко известной картинку с терпящим бедствие китом – «fail whale»[15].
В этой связи на память приходит еще один приятный сюрприз из области UX, с которым я столкнулся при использовании приложения поставщика услуг электронного маркетинга MailChimp. Перед отправкой подготовленного вами электронного письма MailChimp позволяет просмотреть, как оно будет выглядеть при разной ширине экрана получателя. При изменении ширины экрана предварительного просмотра в пользовательском интерфейсе отображается талисман MailChimp – шимпанзе, указывающий вытянутой рукой выбранное значение пикселей на линейке. При этом появляется предупреждение, что ширина вашего электронного письма не должна превышать определенного количества пикселей. Когда вы растягиваете письмо сверх определенного размера, выражение лица шимпанзе меняется с радостного на страдальческое, и появляются текстовые предупреждения: «Это уже перебор!» и «Остановите это!». Если вы продолжаете расширять письмо сверх рекомендуемого максимума, указывающая рука шимпанзе отваливается с сопроводительным изображением: «ХЛОП!» Этот восхитительный эффект пользовательского интерфейса показался мне настолько остроумным и удивительным, что спустя годы я до сих пор вспоминаю о нем.
Айсберг UX-дизайна
Как же создать пользовательский опыт, который клиенты сочтут удобным и доставляющим удовольствие при использовании? Разработка дружественного пользовательского опыта требует наличия навыков в нескольких различных областях, в совокупности известных как UX-дизайн. В моем представлении UX-дизайн – это айсберг, показанный на Рисунке 8.1. Как и в реальном мире, у этого айсберга на поверхности находится лишь небольшая видимая пользователю часть UX-дизайна, в то время как скрытым от глаз остается нечто гораздо большее. Он состоит из четырех слоев: концептуального дизайна, информационной архитектуры, интерактивного дизайна и визуального дизайна. Далее я подробно опишу каждый уровень, а сейчас представлю лишь краткий обзор Концептуальный дизайн – нижний слой айсберга – представлен основополагающей концепцией, которая формирует суть пользовательского опыта. Следующий уровень – это информационная архитектура, которая определяет, как вы структурируете информационную составляющую и функциональность вашего продукта. Следующий уровень – это интерактивный дизайн, который отвечает за то, как пользователь и ваш продукт взаимодействуют друг с другом. Верхний слой – видимая часть айсберга – это визуальный дизайн: то, как ваш продукт выглядит в глазах пользователей. Для всех нас визуальная обработка – это основной способ, которым наш мозг усваивает информацию. Но просто приятного на первый взгляд внешнего вида недостаточно для того, чтобы пользовательский опыт продукта соответствовал всем стандартам качества. Превосходный UX-дизайн требует внимания и навыков, применительно ко всем четырем слоям айсберга, а также правильно организованного рабочего процесса проектирования, который последовательно продвигается от нижнего уровня к верхнему.
Рисунок 8.1. Айсберг UX-дизайна
Концептуальный дизайн
Нижний слой айсберга представлен концептуальным дизайном, связанным с основной концепцией, которую вы используете при разработке своего продукта. В идеале концептуальная модель должна соответствовать образу мышления целевых потребителей. Продукт, основанный на хорошо продуманном, ориентированном на клиента концептуальном дизайне, интуитивно понятен и прост в использовании.
Этот слой айсберга UX-дизайна часто вносит значительный вклад в создание инноваций. Если вы представите себе айсберг UX-дизайна как верхнюю часть пирамиды соответствия продукта рынку (то есть стоящим там, где находится слой пирамиды, обозначенный как «опыт пользователя»), то заметите, что уровень концептуального дизайна расположен непосредственно над слоем, обозначающим набор функций продукта. Концептуальный дизайн – это то, что вдыхает жизнь в объекты и придает им форму. Под этим я подразумеваю не визуальное представление или технические детали работы функций, а скорее их сущность – то, как они создают ценность для пользователя.
Практические примеры весьма полезны для объяснения идеи концептуального дизайна. Поэтому вспомните историю из первой главы о том, как команда разработчиков Quicken добилась значительно большей простоты использования своего приложения, чем 46 конкурирующих с ним продуктов. Успех во многом был обусловлен концептуальным дизайном продукта, в котором за основу был взят образ обычной чековой книжки – хорошо знакомой и интуитивно понятной потребителям.
Концептуальный дизайн на примере Uber
Теперь давайте обсудим пример с приложением Uber – популярным сервисом для организации поездок на такси. Какой концептуальный дизайн команда разработчиков использовала для своего мобильного приложения? Приложение Uber использует дизайн, построенный на карте местности. И хотя такой поход является довольно распространенным, инновация концептуального дизайна Uber заключалась в том, чтобы показывать пользователям местоположение ближайших доступных для заказа автомобилей такси в режиме реального времени. Стоит отметить, что применение такого дизайна потребовало внедрения технических инноваций, чтобы отслеживать местоположение водителей Uber в режиме онлайн. Разработчики исходили из понимания того, что клиенты служб такси расстраиваются, когда сталкиваются с опозданиями или неявкой такси к назначенному времени. При формировании своего ценностного предложения разработчики Uber решили, что будет крайне важно обеспечить пользователям продукта прозрачность в отношении того, когда прибудет заказанный ими автомобиль. Инновационный дизайн Uber показывает предполагаемое время ожидания, а также текущее местоположение заказанного вами такси. Концептуальный дизайн, который Uber выбрал для пользовательского опыта своего продукта, сразу делает его ценностное предложение очевидным и позволяет клиенту с первого взгляда заметить принципиальные отличия этого сервиса от конкурентов.
Исследование пользователей
Разработать хороший концептуальный дизайн проще, когда у вас есть глубокое понимание целевых клиентов и их потребностей. Важной, но часто упускаемой из виду составляющей UX является «U»: пользователь[16]. Вы наверняка помните, что пирамида соответствия продукта рынку начинается с целевого потребителя; человека, для которого вы разрабатываете свой продукт.
Вы получаете представление о своем целевом клиенте путем проведения исследований пользователей, которые являются специфическим разделом UX-дизайна. В ходе таких исследований применяется целый ряд методов получения информации о клиентах, такие как установочное интервью, юзабилити-тесты и опросы. В главе 4 я поделился своими рекомендациями по поводу проведения интервью для выявления целевых потребителей. В главе 9 описываются методики проведения собеседований с клиентами для получения от них ценных отзывов о ваших проектах. В главе 13 представлен фреймворк для проведения исследования пользовательского опыта и описаны другие методы получения обратной связи (помимо интервью). Исследование пользователей охватывает все уровни UX-айсберга. Когда клиенты оставляют отзывы, относящиеся к пользовательскому опыту вашего продукта, бывает весьма полезно проанализировать полученную информацию и сопоставить ее с соответствующим слоем айсберга UX-дизайна.
При проведении исследования пользователей, очень важно убедиться, что оно не замыкается на самом исследователе. Члены команды разработчиков должны принимать в этом самое непосредственное участие. Личное участие в проводимых исследованиях гораздо более эффективно, чем просто чтение итогового отчета. Это можно сравнить с разницей между просмотром футбольного матча на стадионе в непосредственной близости от происходящих на поле событий и чтением газетной статьи с обзором состоявшегося матча. «Разборы полетов», во время которых члены команды разработчиков обсуждают свои наблюдения, максимально способствуют усвоению собранного материала и должны проводиться сразу после проведения исследования. Документирование кратких результатов и ключевых выводов также важно для закрепления полученной информации и передачи ее всем заинтересованным лицам. Одним из наиболее полезных результатов исследования пользователей является создание персонажей.
Метод персонажей
Без знания своих целевых потребителей невозможно создать для них превосходный пользовательский опыт. В UX-дизайне для осуществления такого близкого знакомства используется метод персонажей, который был описан ранее в главе 3 в контексте идентификации целевых потребителей (см. Рисунок 3.1). Напомню вкратце, что персонаж – это архетип реальных пользователей вашего продукта. Грамотно составленный профиль персонажа содержит описание потребностей целевого пользователя, а также соответствующие ему психографические, поведенческие и демографические характеристики. Персонажи помогают принимать более обоснованные решения при разработке продукта, который обеспечивает потребительские преимущества в рамках сформированного вами ценностного предложения.
В контексте UX-дизайна в описание персонажей включаются дополнительные атрибуты, помимо тех, что помогают более наглядно представить потребности пользователей. Во-первых, это уровень технической подготовки персонажа. Если целевой пользователь общается с технологиями на «вы», для него потребуется разработать очень простой интерфейс, с выделением наиболее важных функций, сопровождающийся четкими инструкциями и хорошей справочной системой. В том случае, когда целевой клиент является технически продвинутым пользователем, вместо большого количества подробных подсказок он предпочел бы иметь в своем распоряжении более мощные инструменты, обеспечивающие большую гибкость и производительность. В среде UX-проектировщиков существует вечная проблема, возникающая в тех случаях, когда в одном продукте необходимо совместить интересы разных типов пользователей.
Вторым дополнительным атрибутом персонажей, который может помочь в создании дружественного UX-дизайна, является контекст использования продукта. Если пользователь работает с вашим приложением, находясь в постоянном цейтноте, для него необходимо предусмотреть быструю и легкую доступность ключевой информации и часто используемых функций. В обратной ситуации более правильным решением будет сделать элементы управления пользовательского интерфейса менее заметными, выдвинув на первый план основной контент. Если вы знаете, что ваш продукт будет использоваться в шумной среде, в окружении большого количества посторонних звуков, то включать в него функцию голосового управления, скорее всего, нецелесообразно.
Команды разработчиков используют персонажей в процессе проектирования пользовательского опыта, чтобы постоянно напоминать себе о том, для кого они разрабатывают продукт. Вот почему так важно дать персонажу имя. В ходе обсуждения различных вариантов дизайна любой член команды может спросить себя: «Что из этого больше всего соответствует потребностям Нэнси?» Некоторые команды даже вырезают из картона фигуры персонажей и помещают их внутри своего рабочего пространства, чтобы во время работы над UX-дизайном никогда не забывать о пользователе.
Как только у вас появится концептуальный дизайн, который, как вы считаете, будет интуитивно понятен и ценен для вашего персонажа, следующим шагом должно будет стать высокоуровневое определение компонентов продукта и того, как они должны быть организованы.
Информационная инфраструктура
Следующим (вторым снизу) слоем айсберга UX-дизайна является информационная архитектура. Этот термин часто используется в сокращении – IA. Это составляющая проектирования, ответственная за определение того, как должны быть структурированы информационная и функциональная части программного продукта. Обычно в состав продукта входят несколько страниц или экранов, поэтому существует множество способов их организации. Клиент получает доступ к различным экранам, используя встроенную в приложение навигационную систему. При поиске определенной страницы пользователь полагается на навигационные метки, чтобы понять, как организован продукт и где находится нужная ему страница. С целью выяснить мнение пользователей о взаимной связанности различных компонентов продукта и определить предпочитаемую ими схему организации часто используется метод, который называется «Сортировка карточек». Хорошо продуманная информационная архитектура организует внутренние компоненты продукта интуитивно понятным пользователям образом, снабжает их легко понятными указателями, что в совокупности обеспечивает высокий уровень юзабилити и результативности поиска.
Под результативностью поиска следует понимать, насколько легко пользователям продукта удается найти предмет своих поисков. Чтобы измерить этот показатель, вы могли бы попросить группу участников тестирования найти внутри вашего продукта определенную страницу или экран, после чего высчитать процент успешных попыток. Вы также можете оценить результативность поиска, просмотрев шаблоны навигации с использованием аналитических инструментов. Это позволит получить ответы на такие вопросы, как «Всегда ли пользователи выбирали кратчайший путь, чтобы попасть на нужную страницу? Или они добирались до цели обходными путями и часто нажимали кнопку “Назад” в своем браузере?»
Обратите внимание, что IA имеет дело с набором функций продукта на верхнем уровне: то есть определяет, что это за функции, как они должны быть организованы и промаркированы. На этом уровне вы еще не занимаетесь такими деталями, как потоки пользователей, макеты страниц или внешнее представление. Информационная архитектура – это основополагающий слой, который способствует созданию превосходного пользовательского опыта, делая внутреннюю структуру продукта интуитивно понятной для пользователей. Основным результатом работы проектировщиков IA, который передается на следующий уровень разработки, является карта сайта.
Карты сайтов
Карта сайта используется для описания структуры продукта. Несмотря на то что термин «карта сайта» происходит от слова «сайт» (как в «веб-сайте»), под ним следует понимать результат проектирования структуры любого программного продукта, включая мобильные приложения. Карта сайта показывает все страницы или экраны, входящие в состав продукта, то, как они распределены по разделам, а также высокоуровневые шаблоны навигации. Кроме этого, карта сайта содержит заголовки страниц и метки, используемые для обозначения разделов продукта. Сформированную карту сайта необходимо протестировать на пользователях, чтобы убедиться, что метки действительно передают смысловое содержание страниц и что пользователи легко ориентируются в предложенной структуре продукта. На Рисунке 8.2 приведен пример карты сайта для веб-приложения, позволяющего проводить рекламные кампании с использованием видеороликов.
Каждый прямоугольник на этой карте обозначает определенную страницу. Соединительные линии показывают пути навигации между страницами. В некоторых случаях навигация предполагается односторонней, что обозначено стрелкой (см. условные обозначения на левой стороне). Элементы глобальной навигации – страницы, на которые пользователь может перейти из любого места, – четко определены. Уровень элементов глобальной навигации, расположенный в верхней части карты, включает в себя основные разделы продукта. Ниже показаны страницы, на которые попадают пользователи, когда переходят по ссылкам с верхнего уровня. Для каждого раздела сайта, входящие в него страницы показаны в иерархическом порядке. Кроме этого, на карте обозначено, какие страницы ведут себя нестандартным образом – открываются во всплывающем окне либо в новой вкладке браузера.
После создания карты сайта, описывающей разделы и страницы продукта, а также их структурные взаимосвязи, следующим шагом должно стать определение того, как пользователь будет взаимодействовать с вашим продуктом.
Рисунок 8.2. Пример карты сайта
Интерактивный дизайн
Следующий слой айсберга представляет интерактивный дизайн, который определяет, как ваш пользователь и продукт взаимодействуют друг с другом. Интерактивный дизайн определяет пользовательские потоки: какие действия доступны пользователю на каждом шаге и как на эти действия должен реагировать продукт. Он также определяет порядок ввода информации пользователем, например, в определенную форму. Любой элемент управления в составе пользовательского интерфейса или ссылка, с которыми пользователь может совершать какие-либо действия (будь то щелчок, наведение курсора, перетаскивание, ввод текста, касание, свайп и так далее), относятся к сфере интерактивного дизайна.
Предположим, что у вашего продукта есть регистрационная форма. Решения о том, какую именно информацию вы хотите получить от пользователя, как должны быть оформлены поля для заполнения, какие при этом используются шаблоны, – все это часть интерактивного дизайна. Так же как и решение о том, что должно происходить после того, как пользователь нажмет кнопку «Зарегистрироваться». Любая пользовательская задача, состоящая из нескольких страниц или шагов, требует применения интерактивного дизайна. Навигация, отвечающая за обеспечение возможности переходов между страницами или экранами приложения, также является широко используемым инструментом интерактивного взаимодействия, связанного с информационной архитектурой.
Если продукт предлагает пользователю помимо обычных какие-либо особые «операционные режимы» – например, режим редактирования или предварительного просмотра, – это также относится к дизайну взаимодействия пользователя с продуктом. Аналогично, если приложение предусматривает отслеживание различных состояний (признаков) объекта, которые влияют на то, какие действия с этим объектом может или не может совершать пользователь, это также являются частью интерактивного дизайна. Например, на сайте интернет-магазина имеется выставленный на продажу товар. Он может находиться в различных состояниях: быть в наличии, или отсутствовать, лежать в корзине покупок или в составе уже сделанного заказа. Все переходы между этими состояниями определяются решениями, принимаемыми в области интерактивного дизайна: для того чтобы пользователь имел возможность положить товар в корзину и перейти к его оплате, он должен быть в наличии, чтобы оформить заказ. Хорошо продуманный интерактивный дизайн обеспечивает видимость текущего состояния объекта на каждом шаге пользовательского потока. Часто эти состояния могут быть тесно связаны с концептуальным дизайном продукта (нижний слой айсберга). В приведенном выше примере концептуальный дизайн подразумевает наличие виртуальной корзины для покупок, похожей на реальную корзину, которой пользуются покупатели в супермаркете. В приложении Uber также имеется фундаментальная связь между концептуальным дизайном и текущим состоянием поездки пользователя. Прежде чем вы закажете такси, приложение показывает на экране все ближайшие доступные для заказа автомобили; но как только вы сделаете свой заказ, вы будете видеть текущее положение только заказанного такси.
Другой важной частью интерактивного дизайна является реакция продукта на действия пользователя. Сюда относятся, в том числе, и сообщения об ошибках. Например, если вы заполняете регистрационную форму на веб-сайте и вводите адрес электронной почты в неверном формате (например, делаете опечатку), ответной реакцией должно стать появление сообщения об ошибке с просьбой проверить правильность ввода адреса электронной почты. Сообщения об ошибках должны быть хорошо продуманными, чтобы четко объяснять пользователю причину возникновения ошибки и что он может сделать для ее исправления.
Время отклика представляет собой еще один аспект взаимодействия пользователя с продуктом. Если пользователь после нажатия на кнопку не получает никакой ответной реакции, то он, скорее всего, решит, что его действие не было распознано, или что приложение не работает. Низкая производительность приводит к ухудшениям в интерактивном дизайне. Пользователям необходимо подтверждение того, что система понимает и принимает их действия. Даже если конечный результат отработки команды пользователя не может быть предъявлен достаточно быстро, пользователь все равно должен получить какую-либо обратную связь, подтверждающую, что его действие зафиксировано. Популярным решением для таких случаев является показ анимированных спиннеров, песочных часов и тому подобных элементов, указывающих на необходимость ожидания. Вы также можете отобразить сообщение, объясняющее, что в этот момент делает продукт (например, «Идет поиск наилучшего варианта среди тысяч рейсов, соответствующих вашему запросу»).
Если для выполнения задачи продукту требуется достаточно продолжительное время, важно дать пользователю представление о достигнутом прогрессе и о том, сколько времени осталось до завершения процесса. Подходящим решением для этого случая является индикатор выполнения, подобный тому, что вы видите на экране при загрузке больших файлов. Для длительных пользовательских потоков, таких как многостраничные гиды, полезно давать представление как об уже пройденном, так и об оставшемся до завершения количестве шагов, применив на верхнем уровне навигации индикатор вида: «Вы находитесь здесь».
Интерактивный дизайн приложения TurboTax
Давайте рассмотрим продукт, в котором реализован сложный процесс, состоящий из множества шагов, но при этом он весьма прост в использовании благодаря своему великолепному интерактивному дизайну. Существует не так много задач, которые по степени сложности могут сравниться с заполнением налоговых деклараций. Уйма форм с бесчисленным количеством вопросов, на которые необходимо ответить, чтобы правильно рассчитать сумму налога. Тем не менее, команде разработчиков приложения TurboTax удалось создать пользовательский опыт, который позволяет даже новичку шаг за шагом пройти через весь этот процесс, что само по себе является серьезным достижением.
Продукт может работать в двух режимах, первый из которых – так называемый «Легкий шаг». Концептуальный дизайн в этом случае представляет собой структурированный опросник, отвечая на который пользователь постепенно проходит через всю процедуру заполнения налоговой декларации. Приложение последовательно определяет, какой вопрос должен быть задан следующим, основываясь на предыдущих ответах. Такой подход позволяет на каждом шаге сосредоточить внимание пользователя на чем-то одном, не загружая его другими вопросами и сложными взаимосвязями.
Основное взаимодействие приложения и пользователя заключается в демонстрации вопросов и получении ответов в интерфейсе пошагового прохождения. Переход к следующему вопросу осуществляется нажатием кнопки «Далее». Пошаговый процесс продолжается до тех пор, пока не будет собран весь объем информации, необходимый для заполнения налоговой декларации. Благодаря тщательно продуманному интерактивному дизайну TurboTax облегчает пользователям выполнение этой сложной задачи. Работа в режиме «Легкий шаг» также позволяет опытным пользователям перепрыгивать с одного этапа заполнения на другой, внося необходимую информацию по своему усмотрению.
«Легкий шаг» является основным режимом работы продукта, установленным по умолчанию. Еще один режим работы приложения, который называется «Формы», предоставляет доступ к реальным налоговым формам и рабочим листам, поля которых предзаполнены в соответствии с ответами, которые были даны пользователем в режиме «Легкий шаг». При этом каждое из внесенных числовых значений может быть отредактировано. Таким образом, пользователи TurboTax могут по своему желанию составить декларацию, пройдя через процедуру вопросов-ответов, без перехода в режим ручного заполнения налоговых форм либо заполняя необходимые поля самостоятельно. При этом приложение позволяет пользователю легко переключаться между режимами. Многие в итоге даже не видят заполняемые формы; режимом непосредственного заполнения пользуются, как правило, только те, кто имеет необходимый для этого опыт. Благодаря использованию двух различных режимов работы интерактивный дизайн TurboTax позволяет с помощью одного и того же продукта эффективно удовлетворять потребности как начинающих, так и опытных пользователей.
Блок-схемы
Итак, каким же образом можно взять сложный процесс или задачу – например, такую как заполнение налоговой декларации – и упростить ее? Основным артефактом проектирования для достижения этой цели являются блок-схемы. Они определяют возможные потоки для выполнения ключевых задач в пользовательском опыте продукта. Помимо этого, они показывают точки принятия решений и возможные действия, которые могут быть совершены как пользователем, так и функционалом продукта. Все действия обозначаются на блок-схеме прямоугольными блоками с соответствующим описанием, а точки принятия решений представлены в виде ромбов. Блоки соединяются стрелками, показывающими направление разрешенных пользовательских потоков.
На Рисунке 8.3 показан пример блок-схемы, разработанной талантливым UX-дизайнером Кристин Лью (источник: http://christineliu.info) для мобильного приложения CarMax. Это приложение помогает пользователю выбрать понравившийся автомобиль, а затем связаться с дилерским центром CarMax. Приложение использует данные, содержащиеся в профиле пользователя на Facebook, чтобы предложить автомобили, которые могут ему понравиться. Пользователи могут просматривать предлагаемые варианты автомобилей, включая их подробные характеристики, пока не найдут тот, что им понравится. На этом этапе они могут связаться с дилером CarMax по электронной почте, через онлайн-чат или по телефону, чтобы запланировать свой визит в дилерский центр. Блок-схема начинается с этапов загрузки и запуска приложения, а затем показывает пути, по которым пользователь может перемещаться между различными экранами вплоть до получения конечного результата. Обратите внимание, что блок-схема описывает верхний уровень пользовательского опыта, не вдаваясь в детали дизайна отдельных экранов (такие как расположение элементов или визуальный дизайн).
Помимо важной роли, которую блок-схемы играют в UX-дизайне, они могут обеспечить каждого участника команды разработчиков пониманием того, какой пользовательский опыт заложен в основу продукта. Это может представлять особую ценность для тех членов команды, которые будут его внедрять и тестировать.
В тех случаях, когда разработчики имеют дело с довольно простым пользовательским потоком, они часто пропускают этап формальной разработки блок-схем и сразу переходят к интерактивным вайрфреймам. Поскольку эти артефакты проектирования более наглядны и интерактивны, чем блок-схемы, их эффективность в представлении желаемого интерактивного дизайна оказывается более высокой. Они хорошо иллюстрируют потоки и взаимодействия при выполнении предопределенного пользовательского сценария (когда пользователи делают именно то, что вы от них ожидаете). Вы можете дополнить вайрфрейм аннотациями, относящимися к возможным ошибкам, и другими важными примечаниями. Однако если пользовательский поток предусматривает наличие множества ответвлений и различных состояний, то с обязательным отражением всех этих сложных моментов лучше справляется именно блок-схема.
Рисунок 8.3. Пример блок-схемы
Вайрфреймы
Обычно вы создаете вайрфреймы (мы рассматривали этот инструмент в главе 7) уже после того, как получили четкое представление о предполагаемых пользовательских потоках для вашего продукта. Вайрфреймы являются важной реперной точкой в процессе создания бережливого продукта. К этому моменту вы уже потратили значительное количество времени на выявление целевых клиентов, их потребностей, формирование ценностного предложения, функционала, проектирование информационной архитектуры и пользовательских потоков. Теперь вы наконец переходите к той части разработки, которая определяет, что именно будут видеть пользователи при использовании продукта или, иными словами, что будет отображаться на каждой странице или экране.
На данном этапе процесса проектирования вы не должны беспокоиться о точности передачи изображения вплоть до пикселя или таких аспектах визуального дизайна, как цветовая гамма. Вы создаете макет для каждой страницы или экрана, определяя, какие элементы должны там находиться и как они будут расположены относительно друг друга. Вы задаете себе примерно следующие вопросы: «Должна ли на этой странице быть одна или две колонки?» или «На этой странице изображение должно быть слева, а форма справа или наоборот?». Ранее вайрфреймы могли быть созданы только статичными, но в последнее время все большее распространение получает их кликабельные разновидности, которые позволяют оживить пользовательские потоки. Современные приложения для проектирования позволяют легко и относительно быстро создавать такие вайрфреймы.
Когда речь идет о разработке мало-мальски сложного продукта, вы при всем желании не сможете завершить разработку вайрфреймов с первой попытки; выполнение этой задачи требует прохождения нескольких итераций, поскольку у нее нет заведомо правильного решения. Вы достаточно подробно изучили проблемное пространство, чтобы определить свои цели, и теперь пытаетесь создать в пространстве решений различные средства их достижения. Вместо того чтобы зацикливаться на первом пришедшем вам в голову варианте дизайна, будет разумнее применить дивергентное мышление. Такой подход заставит вас выдвигать как можно больше различных дизайнерских идей. Это похоже на мозговой штурм: сначала вы должны сосредоточится на генерировании, а не на оценке возникающих идей. В будущем у вас будет достаточно времени, чтобы отсеять все лишнее. На следующем этапе процесса проектирования вы сможете, включив конвергентное мышление, выбрать из всех предложенных идей дизайна самые перспективные. Если вы сузите область поиска слишком рано, в конечном счете, это может закончится тем, что действительно лучшее решение останется вне зоны вашего внимания.
Вместо того чтобы разрабатывать с нуля вайрфрейм для каждой страницы или экрана, опытные дизайнеры, изучив концепцию продукта в целом, группируют страницы или экраны по принципу их схожести. Для каждой образованной таким образом группы используется свой шаблон, который определяет расположение элементов страницы/экрана. Например, вы можете создать шаблон, который будет общим для всех страниц с двумя столбцами. Сквозное использование набора шаблонов страниц или экранов для всего продукта помогает обеспечить единство дизайна. С той же целью необходимо стандартизировать компоненты, которые отображаются на разных страницах продукта.
После того как создали начальный набор вайрфреймов, вы можете и должны протестировать их на пользователях. В главах 9 и 10 описаны методы получения обратной связи от пользователей, которая необходима для итеративного улучшения ваших проектных решений. Конечно, вы можете начать со статичных вайрфреймов, но использование при тестировании кликабельных версий приносит намного больше пользы. Это позволяет тестировать не только макеты, но и пользовательские потоки, а также обеспечивает пользователям гораздо более реалистичное представление о продукте. Как только результаты тестирования подтвердят, что ваши вайрфреймы просты в использовании и соответствуют ценностному предложению, наступит момент для перехода к следующему «слою айсберга»: визуальному дизайну.
Визуальный дизайн
Визуальный дизайн – это верхушка айсберга UX-дизайна, та часть, которая сразу бросается в глаза любому, кто смотрит на продукт. Иногда его еще называют графическим дизайном, созданием образа или «хромом». Так же, как хромированный кузов не влияет на то, как ведет себя автомобиль на дороге, именно его наличие определяет внешний вид машины. Помимо создания эстетически привлекательного продукта, хороший визуальный дизайн помогает укрепить его визуальную иерархию (обсуждается далее в этой главе) и способствует простоте использования. Кроме этого, визуальный дизайн способен придать индивидуальность вашему бренду и вызвать восхищение пользователей. Тремя основными компонентами визуального дизайна являются цвет, типографика и графика.
Цвет
Цвет – важный аспект визуального дизайна продукта. Для всех остальных слоев айсберга вы можете создавать артефакты проектирования в черно-белом цвете, и при этом они будут отлично работать. Но когда вы создаете макеты высокой точности в рамках визуального дизайна, вам просто необходимо четко определиться с используемой цветовой гаммой.
Применение цвета улучшает эстетическое представление продукта и позволяет при необходимости делать акценты на отдельных элементах, расположенных на его страницах. Вы также можете использовать цвет для передачи определенных атрибутов или эмоций. Теплые цвета, такие как красный, оранжевый и желтый, обычно воспринимаются как более энергичные и страстные, в то время как более приглушенные холодные цвета, такие как зеленый, синий и фиолетовый, выглядят более спокойно и сдержано. Многие приложения и веб-сайты используют синюю цветовую гамму, потому что она вызывает ощущение надежности и спокойствия. Зеленый цвет ассоциируется с природой, ростом и деньгами. Фиолетовый связан с роскошью и креативностью. Красный ассоциируется с агрессией, страстью, властью и опасностью. Оранжевый цвет – энергичный и яркий. Желтый символизирует счастье и солнечный свет. Коричневый ассоциируется с теплом и землей. Черный намекает на утонченность, элегантность и загадочность. Белый цвет ассоциируется с чистотой, непорочностью и простотой. Я перечислил распространенные обобщения, при этом восприятие цветов может существенно различаться в разных странах мира. Поэтому, если ваши целевые пользователи принадлежат к определенной культуре, при разработке дизайна следует обратить внимание на возможные особенности восприятия того или иного цвета.
Качественный визуальный дизайн подразумевает, что вы используете для своего продукта хорошо продуманную цветовую палитру, вместо того чтобы раскрашивать элементы страницы как придется. Необходимо подобрать такую комбинацию цветов, чтобы они гармонично смотрелись вместе, и затем уже не отклоняться от сделанного выбора при оформлении каждой страницы или экрана продукта. Сквозное использование одной цветовой палитры помогает создать целостное визуальное представление. Цветовая палитра обычно состоит из одного или двух основных и одного или двух фоновых цветов. Может также использоваться один или два акцентных цвета, которые выступают в качестве дополнения к основным цветам. Полная палитра включает в себя еще и оттенки основного цвета – обычно они отличаются меньшей насыщенностью.
Использование различных цветов может как способствовать, так и препятствовать удобству восприятия и использования продукта. Для обеспечения удобочитаемости текста необходимо усилить контраст между цветами, используемыми для текста и фона. Черный текст на белом фоне отличается высокой контрастностью, в то время как светло-голубой текст на светло-сером фоне имеет низкую контрастность и будет плохо различим. Для повышения юзабилити цвета, которые используются для ключевых элементов управления, таких как кнопки и основные навигационные элементы, должны способствовать их выделению на общем фоне. Например, оранжевую кнопку на черном фоне будет трудно не заметить в отличие от синей кнопки на чуть более темном синем фоне.
Типографика
Типографика определяет расположение и внешний вид текста и является еще одним важным элементом визуального дизайна продукта. На заре существования интернета браузеры поддерживали лишь небольшое количество шрифтов, таких как Arial, Georgia и Verdana. Но широкое внедрение веб-шрифтов CSS3 обеспечило дизайнерам огромное богатство выбора.
Современные шрифты отличаются множеством стилевых разновидностей: формальный или неформальный, классический или современный, легкий или тяжеловесный. При выборе шрифтов необходимо руководствоваться их соответствием той тональности, которую вы хотите придать своему продукту. Ключевое различие между шрифтами обусловлено наличием или отсутствием засечек. Это небольшие декоративные штрихи на концах букв; в шрифтах без засечек они отсутствуют. Традиционный дизайнерский совет гласит, что шрифты с засечками лучше подходят для печатных материалов, которые имеют очень высокое разрешение (в точках на дюйм), в то время как шрифты без засечек следует использовать для веб-сайтов с более низким разрешением. Однако с распространением веб-шрифтов в интернете все чаще стали использоваться шрифты с засечками. При небольших размерах экрана шрифты с засечками могут быть трудночитаемы; однако они часто используются в заголовках и других крупных текстовых элементах. В отношении шрифтов необходимость соблюдения единообразия является даже более критичной, чем в случае с применением цветов. Как правило, используется комбинация всего из двух шрифтов: один – для основного текста, второй – для дополнительного укрупненного, применяемого, прежде всего, для заголовков. В большинстве случаев при создании веб-сайтов и мобильных приложений шрифт без засечек применяют для основного текста, а с засечками – для дополнительного.
Размер шрифта – еще одна важная часть используемой типографики. Основной текст, который обычно имеет наименьший размер шрифта, тем не менее, должен быть достаточно крупным, чтобы его можно было прочитать. Заголовки всегда имеют больший размер. Как и в случае с цветами и видами шрифтов, необходимо избегать нагромождений слишком большого количества различных текстовых размеров и поддерживать единство стиля применительно ко всему продукту. Шрифты также могут иметь разные варианты начертания, такие как полужирный, курсив или подчеркивание.
Типографика так же, как и цвет, играет важную роль в создании визуальной иерархии дизайна (об этом пойдет речь позже). Чтобы получить в итоге желаемую визуальную иерархию, вы должны обдуманно подходить к выбору цветовой палитры, относительных размеров, типов начертания и расположению текстовых элементов на страницах и экранах своего продукта.
Графика
Изображения, как фотографии, так и иллюстрации, часто используются в визуальном дизайне. Для определенных категорий продуктов, таких как сайты интернет-магазинов, правильное использование изображений является очень важным аспектом. Возьмем к примеру приложение Airbnb: чтобы клиенты чувствовали себя комфортно, выбирая жилье для аренды, им необходимо видеть его фотографии. В главе 7 рассказывалось о том, как Airbnb удалось более чем удвоить коэффициент конверсии за счет использования фотографий более высокого качества. Изображения часто присутствуют на целевых и других маркетинговых страницах. Обычной практикой является размещение на целевой странице большой, выделяющейся фотографии типичного пользователя вашего продукта либо какого-то другого художественного или вдохновляющего образа / сюжетной сцены. Например, Netflix часто использует крупные изображения своих пользователей, наслаждающихся просмотром фильма.
Иллюстрации часто используются для объяснения того, как работает ваш продукт. Вы также можете использовать в своем визуальном дизайне другие графические элементы, такие как линии, формы, текстуры, градиенты и тени. Эти небольшие штрихи могут помочь вам добиться желаемого внешнего вида продукта за счет придания ему структуры, глубины и пикантности.
Иконки – это небольшие символы, используемые для представления объектов или смысловых понятий. Чаще всего они используются для кнопок или других элементов управления пользовательского интерфейса, особенно при нехватке свободного места. Во многих приложениях иконки являются основным способом обозначения кнопок управления. В браузерах иконки используют для таких часто используемых кнопок, как «Назад», «Вперед» и «Обновить». Adobe Photoshop использует панель инструментов, состоящую из иконок, в качестве основного способа обеспечения доступа клиентов к функционалу этого программного продукта. Аналогичным образом продукты Microsoft Office используют «ленту», наполненную иконками. Помимо элементов управления, иконки используются также на маркетинговых страницах как дополняющие и усиливающие приведенный там текст. Иконографика – это особый раздел визуального дизайна; создателям иконок приходится вручную прорисовывать отдельные пиксели, чтобы явить миру свои крошечные шедевры. Важность иконок возросла с расширением использования мобильных устройств. Небольшой размер экрана в еще большей степени заставляет разработчиков мобильных приложений экономить место; поэтому многие элементы управления в таких приложениях представляют собой иконки.
Одна из особенностей применения иконок состоит в том, что пользователи должны с первого взгляда распознавать их значение. Учитывая маленький размер иконки и отсутствие сопроводительного текста, добиться этого далеко не просто. Соответственно, если для обозначения какого-либо элемента дизайна уже существует стандартная иконка, я настоятельно рекомендую вам использовать именно ее вместо попыток изобрести новый символ. Допустим, вы создаете приложение, которое воспроизводит аудиозаписи, и подбираете иконки для кнопок воспроизведения и паузы. В этом случае совершенно неразумно создавать свои собственные обозначения, когда всем пользователям хорошо знакомы: указывающий вправо треугольник, означающий «воспроизведение», и две вертикальные линии, обозначающие кнопку «пауза».
Большинство приложений используют целый набор значков, и в этом случае важно обеспечить единство их дизайна. Конечно, каждая иконка должна быть уникальной, но общий вид, цвет и стиль должны соответствовать одному стандарту. Согласованность визуального дизайна продукта важна для создания превосходного пользовательского интерфейса. Полезными инструментами для достижения такой согласованности являются стандарты стиля и компоновочные сетки.
Стандарты стиля
Стандарт стиля – это результат визуального дизайна, который используется для достижения единообразия во внешнем представлении продукта. Наличие такого стандарта особенно важно для продуктов с большим количеством страниц или экранов. Стилевой стандарт определяет детали визуального оформления – такие как цветовая палитра, размеры, шрифты и графика – для часто используемых элементов дизайна. Следование разработанному стандарту позволяет обеспечить согласованность в работе команды дизайнеров и сократить нагрузку на разработчика пользовательского интерфейса.
Компоновочные сетки
Компоновочная, или макетная, сетка – это инструмент визуального проектирования, который помогает обеспечить согласованное расположение элементов дизайна на каждой странице или экране продукта. Такие сетки уже давно используются в типографской верстке, и их применение в веб-дизайне и мобильном дизайне помогает существенно улучшить пользовательский интерфейс. Компоновочная сетка состоит из определенного количества столбцов одинакового размера, разделенных «желобами» или полями.
Вы можете подобрать размер сетки, наиболее подходящий для вашего макета. На Рисунке 8.4 представлен пример компоновочной сетки, состоящей из 12 столбцов шириной по 94 пикселя каждый, разделенных желобами шириной в 18 пикселей. Общая ширина сетки составляет в этом случае 1326 пикселей и оптимизирована для экранов шириной в 1366 пикселей, чтобы пользователям не приходилось при просмотре сдвигать страницу по горизонтали. Такая ширина макета позволяет разместить дополнительно вертикальную полосу прокрутки и любые другие визуальные элементы интерфейса браузера или операционной системы, имеющие размер до 40 пикселей.
Рисунок 8.4. Пример компоновочной сетки
Основное преимущество компоновочной сетки состоит в том, что она позволяет выравнивать размещение всех элементов страницы или экрана по мере их добавления. Примерами элементов страницы или экрана могут служить текстовые блоки, изображения или кнопки. Элементы могут занимать более одного столбца. Главное, чтобы левая и правая границы элементов начинались и заканчивались на линиях сетки. Взятая нами для примера сетка, состоящая из 12 столбцов, может быть равномерно поделена по 2, 3, 4 и 6 столбцов, что допускает широкий диапазон возможных размеров элементов. На Рисунке 8.5 представлен пример вайрфрейма, который создан с использованием компоновочной сетки для размещения элементов страницы.
Рисунок 8.5. Вайрфрейм, созданный с использованием компоновочной сетки
Сетка, показанная на этих двух рисунках, разбивает рабочее пространство только по горизонтали (на столбцы). Сетки, которые используются в печатном дизайне, часто включают и разбиение по вертикали (на строки). Линии сетки для вертикального позиционирования оказались менее полезными для создания веб-страниц из-за больших различий в высоте экрана различных устройств. Кроме того, контролировать точное вертикальное положение элементов бывает невозможно из-за того, что браузеры динамически масштабируют содержимое в зависимости от ширины используемого экрана. В результате цифровые компоновочные сетки, как правило, ограничиваются разбиением рабочего пространства только по горизонтали. С появлением адаптивного дизайна, о котором пойдет речь ниже, дизайнеры получили больше возможностей контролировать вертикальное положение элементов в своих веб-проектах.
Стоит напомнить, что на этапе создания вайрфрейма макет обычно передает лишь приблизительное расположение и относительный размер используемых элементов. В свою очередь, компоновочные сетки позволяют создавать макеты с точностью до пикселя, что позволяет перейти от вайрфреймов низкой точности к макетам с высокой точностью воспроизведения.
Макеты
Макеты, которые мы уже рассматривали в главе 7, – это высокоточные результаты проектирования, представляющие визуальный дизайн. Они основаны на предварительно разработанных вайрфреймах и используют цветовую палитру, элементы типографики и графики для создания внешнего вида продукта. Макеты обычно создаются визуальным дизайнером с помощью таких инструментов, как Adobe Illustrator или Sketch, а затем экспортируются в графические файлы (PNG, GIF или JPG). Вы можете использовать такие статичные макеты для получения обратной связи от пользователей, однако тестирование с использованием кликабельных макетов принесет гораздо большую пользу. Они дают пользователям лучшее представление о продукте и о том, как он работает. Такие инструменты, как InVision, позволяют преобразовать набор статичных макетов в пользовательский поток. С помощью этого и ему подобных инструментов вы можете определить область макета, доступную для клика или нажатия (например, разместив там кнопку или ссылку), и указать, к какому следующему макету должен быть осуществлен переход по этой ссылке. В главах 9 и 10 рассказывается, как организовать получение отзывов пользователей о макетах и использовать результаты тестирования для итеративного улучшения ваших проектов. Как только у вас появится набор кликабельных макетов, которые, по оценке целевых потребителей, достаточно просты в использовании и соответствуют ценностному предложению, этап разработки UX-дизайна будет завершен. Следующим шагом станет реализация пользовательского опыта путем создания продукта. В главе 12 обсуждается, как это сделать с использованием принципов Agile-разработки.
Я рассказал вам об айсберге UX-дизайна и о том, как последовательное прохождение по всем четырем его слоям позволяет воплотить в жизнь ваши идеи. Я описал ключевые результаты проектирования, которые будут получены на этом пути, включая те, что должны быть протестированы на потребителях для оценки разработанного пользовательского опыта и степени соответствия продукта рынку. В следующем разделе я поделюсь с вами несколькими важными принципами, которые могут помочь в создании превосходного UX-дизайна.
Принципы дизайна
Дизайн – это волшебная часть процесса создания бережливого продукта. Именно он позволяет трансформировать неосязаемые идеи о пользовательских преимуществах и необходимых функциях в реальный пользовательский опыт. Во многих отношениях дизайн – это скорее искусство, чем наука, однако существует несколько дизайнерских принципов, соблюдение которых будет весьма полезным для получения наилучшего конечного результата.
Гештальт-принципы
Гештальт-принципы – это совокупность полезных теорий о визуальном восприятии объектов. Само слово «гештальт» означает «целостную структуру, образ, который, хотя и состоит из множества частей, воспринимается как нечто единое целое». Это то, к чему наша мыслительная система визуальной обработки пытается свести все то, что мы видим. Существует несколько принципов гештальта, но я сосредоточусь лишь на двух из них: принципах близости и подобия.
Согласно гештальт-принципу близости, мозг воспринимает близко расположенные друг к другу объекты как более связанные, чем объекты, которые разделяет заметно большее расстояние. Учитывая этот факт, при создании дизайна вы должны размещать связанные объекты ближе друг к другу. Данному принципу необходимо следовать при компоновке элементов ваших вайрфреймов. Это относится к упорядочиванию не только контента, но и элементов управления пользовательским интерфейсом. Например, на рисунке 8.5 вы можете видеть, что все основные навигационные кнопки расположены в одном ряду. Если ваш пользовательский интерфейс предлагает пользователю выбор из трех вариантов действий, то все три кнопки или ссылки для осуществления этого выбора должны располагаться рядом друг с другом. Следует избегать близкого размещения несвязанных между собой элементов, иначе это может запутать пользователя. Например, размещение кнопки отмены, касающейся одной из функции слишком близко к другой функции, находящейся на той же странице, может привести к непониманию того, к какой из этих двух функций относится кнопка отмены.
Гештальт-принцип подобия утверждает, что мозг воспринимает объекты, обладающие сходными характеристиками, как более связанные, в отличие от объектов, не похожих друг на друга. Следовательно, в дизайн-проектах связанные или родственные объекты должны выглядеть похоже, то есть иметь одинаковую форму, размер или цвет. Необходимо избегать того, чтобы несвязанные объекты выглядели как однородные. Требование к соблюдению принципа подобия при создании визуального дизайна могло бы выражаться, например, в том, что все гиперссылки должны быть синего цвета и подчеркнутыми или чтобы все кнопки вызова функций имели одинаковую форму закругленного прямоугольника. Принципы гештальта, учитывая, что они описывают то, как работает наше визуальное восприятие, приводят нас к следующему дизайнерскому принципу: визуальной иерархии.
Визуальная иерархия
Визуальная иерархия – это важный принцип дизайна, который связан с тем, как пользователь определяет, какие элементы более важные, чем другие. Это, в свою очередь, влияет на порядок, в котором пользователь переключает свое внимание с одного объекта на другой.
Размер и цвет элементов – два основных атрибута, которые создают визуальную иерархию. Человеческий мозг исходит из того, что более крупные объекты имеют большую важность, тогда как объекты меньшего размера не настолько существенны. Кроме этого, мозг воспринимает как более важные элементы с высокой контрастностью, например, достигаемой за счет цвета. Выделяющиеся на общем фоне изображения могут давать тот же эффект. Наши глаза естественным образом притягиваются к фотографиям людей, особенно к лицам.
Расположение элементов на странице также влияет на визуальную иерархию, поскольку пользователи начинают осмотр с верхней ее части. Поскольку в английском и большинстве других языков чтение происходит слева направо, пользователи в первую очередь обращают свое внимание на левую сторону страницы. Поэтому при прочих равных условиях первыми в глаза бросаются элементы, расположенные в левом верхнем углу экрана.
Чтобы быстро определить визуальную иерархию страницы или экрана достаточно сильно прищуриться. При этом вы не сможете прочитать текст или разглядеть детали, но все еще будете в состоянии различать расположение, размер и цвет основных элементов дизайна. Такой же эффект можно получить, если сделать снимок экрана, а затем размыть его (с помощью приложения для графического дизайна). Если этот экран был сформирован с четким соблюдением принципа визуальной иерархии, вы даже по размытому снимку сможете легко определить наиболее важные элементы дизайна.
Дизайнеры должны использовать все эти закономерности человеческого визуального восприятия для выстраивания элементов в желаемом иерархическом порядке. Чтобы создать визуальную иерархию, вы должны сначала оценить относительную важность всех компонентов, которые должны присутствовать на странице. Затем следует определить расположение, размер и цвет компонентов, которые позволят произвести расстановку приоритетов. Дизайн страницы с хорошей визуальной иерархией обязательно направит внимание пользователя на самый важный элемент. Затем, опять же, благодаря продуманному дизайну взгляд пользователя будет переходить с одного элемента на другой в соответствии с расставленными вами приоритетами, двигаясь при этом по привычной траектории: сверху вниз и слева направо. Такой подход помогает пользователю быстрее найти то, что он ищет, и успешно выполнить свою задачу. Более того, он приводит к повышению коэффициента конверсии при выполнении пользователем ключевых действий. Хорошая визуальная иерархия – важнейший компонент превосходного пользовательского опыта.
Принципы композиции
В дополнение к принципам гештальта и визуальной иерархии при создании и оценке дизайна необходимо учитывать следующие композиционные принципы:
1. Единство: Воспринимается страница или экран как единое целое или как набор разрозненных элементов?
2. Контраст: Имеется ли достаточно различий в цвете, размере, расположении и так далее, чтобы это вызывало визуальный интерес?
3. Баланс: Равномерно ли распределен визуальный вес (положение, размер, цвет и так далее) элементов в дизайне?
4. Использование пространства: Насколько загроможденным или разреженным выглядит дизайн? Убедитесь, что на странице/экране оставлено достаточное количество свободного места – неиспользуемого пространства, – чтобы дизайн не выглядел перегруженным.
Адаптивный дизайн
Определяя расположение элементов дизайна, вы волей-неволей пытаетесь представить размер экрана, на котором эти элементы будут отображаться. В сфере печатного дизайна вы заранее знаете точную ширину и высоту бумажного листа, на котором они будут напечатаны. К сожалению, в цифровом мире все не так просто. Клиенты будут использовать созданный вами продукт на устройствах, имеющих различные размеры экрана, поэтому представить их заранее довольно проблематично.
Очевидно, что экраны смартфонов гораздо меньше, чем у ноутбуков и настольных мониторов. Например, размер экрана оригинального iPhone составлял всего лишь 360 на 480 пикселей. Сейчас размер экрана смартфонов варьируется в очень широком диапазоне. Планшеты, по размеру своего экрана, заполнили нишу между смартфонами и компьютерными мониторами. Фаблеты по этому же параметру находятся где-то между смартфонами и планшетами. В верхней части этого рейтинга находятся настольные мониторы с очень высоким разрешением. Диапазон различных разрешений экрана цифровых устройств расширился еще больше с появлением AppleWatch и других подобных гаджетов с их миниатюрными экранами.
Каким же образом команда разработчиков должна справляться с настолько огромным и разрозненным представительством экранных разрешений? На выручку приходит адаптивный дизайн для веб-продуктов. Он позволяет демонстрировать на экранах разного размера соответствующие версии пользовательского интерфейса. Дизайн подстраивается под размер экрана пользователя, обычно под его ширину. Все начинается с установления так называемых «точек останова», которые определяют разные вариации ширины экрана, после чего для каждого из образовавшихся вариантов применяются стилизованные под них различия дизайна. Обычно используются две полярные версии: большой ширины – для экранов компьютеров и малой ширины – для экранов смартфонов. Многие продукты также используют промежуточную точку останова для создания планшетной версии.
С уменьшением ширины экрана некоторые элементы страницы начинают «съезжать» на следующую строку. Другие элементы по той же причине слишком сильно уменьшаются в размерах или просто исчезают с экрана. Адаптивный дизайн позволяет осуществлять динамические изменения пользовательского интерфейса, не требуя для этого серьезных дополнительных усилий или изменений программного кода.
Проектирование для экранов разных размеров
Необходимость учитывать факт использования потребителями экранов разных размеров является реальностью современного дизайна программных продуктов. Для веб-продуктов адаптивный дизайн является отличным инструментом, предлагающим элегантное и простое решение этой проблемы. Комплекты для разработки мобильного программного обеспечения (SDK) также включают в себя инструменты, которые позволяют создавать для одного и того же приложения различные макеты, оптимизированные под разные размеры экрана.
У вас может возникнуть вопрос: на какой размер экрана (большой или маленький) следует ориентироваться, начиная процесс разработки UX-интерфейса? Если вы изначально разрабатывали свой продукт под экран большего размера, адаптация его к меньшему экрану может оказаться непростой задачей. Созданный объем контента может просто не поместиться на маленьком экране, и вам придется делать трудный выбор – определить элементы, которые придется удалить. Вероятно, вы будете вынуждены изменить и систему навигации. Необходимо будет пересмотреть и переделать контент, размер которого слишком широк для маленького экрана. Поэтому в подобных случаях разработчики часто создают отдельный продукт, переписывая программный код. Однако такое решение не является идеальным. Во-первых, необходимость в дальнейшем каждый раз вносить изменения и дополнения в два отдельных фрагмента кода приводит к снижению эффективности и увеличению вероятности ошибок. Во-вторых, разработанные по отдельности мобильная и немобильная версии продукта часто оказываются настолько непохожими друг на друга, что это приводит к неорганичности пользовательского опыта, вызывая у клиентов непонимание и раздражение.
Поскольку разработка дизайна для экранов маленького размера является более сложной из-за нехватки свободного места, многие команды разработчиков придерживаются правила: «сначала – мобильные устройства» и начинают с создания версии дизайна, заточенной под самый маленький экран. Это заставляет их сразу расставлять приоритеты. После того как мобильный дизайн оказывается в достаточной степени проработан, они переходят к созданию версии дизайна для экранов больших размеров, на которых могут с легкостью поместиться дополнительные элементы контента и функциональности. Обратите внимание: речь идет не о том, что эти две версии должны разрабатываться последовательно или по отдельности. Работа должна вестись параллельно; просто мобильный дизайн «рулит» этим процессом. Довольно часто вместо того, чтобы быть просто уменьшенной копией полноразмерного продукта, мобильная версия обладает уникальной функциональностью, которой нет у веб-продукта (например, позволяет использовать возможности геолокации или других датчиков, присутствующих в мобильных устройствах). Или же она может предлагать более специализированное подмножество полного функционала веб-продукта. В любом случае, параллельная разработка помогает гарантировать, что версии продукта, предназначенные для использования на устройствах с различными размерами экрана, работают согласованно и создают пользовательский опыт, обеспечивающий соответствие продукта рынку.
Копирайтинг также является частью UX-дизайна
Прежде чем завершить эту главу, необходимо упомянуть о еще одной, часто упускаемой из виду компоненте пользовательского опыта: копирайтинге. Сюда относится создание любого текста, который видят клиенты, причем как на маркетинговых страницах, так и внутри самого продукта. Использование недостаточно качественных текстов на маркетинговых страницах может привести к значительному снижению конверсии. В свою очередь, тексты, которые вы используете внутри продукта – этикетки, инструкции, описания и сообщения об ошибках, – оказывают существенное влияние на удобство использования. Обычно в распоряжении пользователя имеется не так много подсказок, поэтому надписи на кнопках и ссылках должны быть абсолютно ясными и понятными. У вашего продукта будут серьезные проблемы с юзабилити, если пользователь, желая выполнить какое-то важное действие, сомневается, какую именно кнопку ему следует для этого нажать. Описания функций и инструкции пользователя должны быть написаны простым языком с использованием понятных слов, а не внутреннего или отраслевого жаргона. Сообщения об ошибках должны быть полезными и разъясняющими, а не вызывающими лишь новые вопросы. Хорошей новостью является то, что ошибки, допущенные при копирайтинге, можно относительно легко выявить и исправить; достаточно провести юзабилити-тесты продукта. Если в процессе тестирования пользователи испытывают трудности с пониманием определенного слова или фразы, разумно будет попросить их предложить свой вариант формулировки. Довольно часто таким образом можно получить отличные предложения.
«Команда “А”»
Как вы могли заметить по количеству тем, рассмотренных в данной главе, UX-дизайн подразумевает применение множества различных навыков. У многих компаний наблюдается «пробелы в дизайне» из-за нехватки специалистов, участие которых является необходимым для создания превосходного UX-дизайна. Во многих командах разработчиков дизайнеры просто отсутствуют. И даже если у вас есть дизайнер, он, вполне возможно, не владеет всеми аспектами UX-дизайна. Чаще всего такой специалист бывает силен либо в визуальном дизайне (в том, как выглядит продукт), либо в интерактивном дизайне (в том, как продукт работает). Для создания превосходного пользовательского опыта ваша команда должна быть талантливой в каждой из этих областей. Кроме этого, вам потребуется фронтенд разработчик, который сможет грамотно реализовать созданный дизайн, а также сильный менеджер по продуктам. Помимо того, что каждый член команды в отдельности обладает необходимыми навыками, крайне важно чтобы они могли эффективно работать вместе. Я называю команды, обладающие всем этим набором из четырех основных навыков – продакт-менеджмент, интерактивный дизайн, визуальный дизайн и фронтенд-разработка – «Командой “А”» (как в популярном сериале 1980-х годов)[17]. Очевидно, что для создания успешного продукта важны также и другие роли или навыки: бэкенд-разработчики, специалисты по обеспечению качества (QA), DevOps-инженеры и так далее. Но в деле создания превосходного пользовательского опыта наличие «команды “А”» имеет решающее значение.
UX – это то, что видит пользователь
В конце концов, вердикт о том, насколько хорош созданный вами пользовательский опыт, выносит пользователь, и это напрямую влияет на степень соответствия продукта рынку. Вспомните описанный в главе 3 «Жизненный цикл внедрения новых технологий», согласно которому, новаторы готовы мириться с недостаточно качественным пользовательским опытом прорывного продукта, ради получения предлагаемых им преимуществ. Но по мере продвижения по этому жизненному циклу и попыток проникновения в более широкие сегменты пользователей вы столкнетесь с тем, что они окажутся уже не столь терпимыми к недостаткам вашего UX, который одновременно будет становиться все более важным аспектом соответствия продукта рынку. Несмотря на то что создание превосходного дизайна требует большого мастерства и значительных затрат ресурсов, это ни в коей мере не оправдывает низкое качество пользовательского опыта вашего продукта. А, как я уже говорил ранее, для выявления любых проблем с продуктом лучше всего подходит тестирование на пользователях. О том, как протестировать прототип MVP на пользователях, пойдет речь в следующей главе.