MVP. Как выводить на рынок товары и услуги, которые нравятся покупателям - Дэн Олсен

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

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

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

После того как создали начальный набор вайрфреймов, вы можете и должны протестировать их на пользователях. В главах 9 и 10 описаны методы получения обратной связи от пользователей, которая необходима для итеративного улучшения ваших проектных решений. Конечно, вы можете начать со статичных вайрфреймов, но использование при тестировании кликабельных версий приносит намного больше пользы. Это позволяет тестировать не только макеты, но и пользовательские потоки, а также обеспечивает пользователям гораздо более реалистичное представление о продукте. Как только результаты тестирования подтвердят, что ваши вайрфреймы просты в использовании и соответствуют ценностному предложению, наступит момент для перехода к следующему «слою айсберга»: визуальному дизайну.

Визуальный дизайн

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

Цвет

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

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

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

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

Типографика

Типографика определяет расположение и внешний вид текста и является еще одним важным элементом визуального дизайна продукта. На заре существования интернета браузеры поддерживали лишь небольшое количество шрифтов, таких как Arial, Georgia и Verdana. Но широкое внедрение веб-шрифтов CSS3 обеспечило дизайнерам огромное богатство выбора.

Современные шрифты отличаются множеством стилевых разновидностей: формальный или неформальный, классический или современный, легкий или тяжеловесный. При выборе шрифтов необходимо руководствоваться их соответствием той тональности, которую вы хотите придать своему продукту. Ключевое различие между шрифтами обусловлено наличием или отсутствием засечек. Это небольшие декоративные штрихи на концах букв; в шрифтах без засечек они отсутствуют. Традиционный дизайнерский совет гласит, что шрифты с засечками лучше подходят для печатных материалов, которые имеют очень высокое разрешение (в точках на дюйм),