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

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

Принципы дизайна

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

Гештальт-принципы

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

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

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

Визуальная иерархия

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

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

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

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

Дизайнеры должны использовать все эти закономерности человеческого визуального восприятия для выстраивания элементов в желаемом иерархическом порядке. Чтобы создать визуальную иерархию, вы должны сначала оценить относительную важность всех компонентов, которые должны присутствовать на странице. Затем следует определить расположение, размер и цвет компонентов, которые позволят произвести расстановку приоритетов. Дизайн страницы с хорошей визуальной иерархией обязательно направит внимание пользователя на самый важный элемент. Затем, опять же, благодаря продуманному дизайну взгляд пользователя будет переходить с одного элемента на другой в соответствии с расставленными вами приоритетами, двигаясь при этом по привычной траектории: сверху вниз и слева направо. Такой подход помогает пользователю быстрее найти то, что он ищет, и успешно выполнить свою задачу. Более того, он приводит к повышению коэффициента конверсии при выполнении пользователем ключевых действий. Хорошая визуальная иерархия – важнейший компонент превосходного пользовательского опыта.

Принципы композиции

В дополнение к принципам гештальта и визуальной иерархии при создании и оценке дизайна необходимо учитывать следующие композиционные принципы:

1. Единство: Воспринимается страница или экран как единое целое или как набор разрозненных элементов?

2. Контраст: Имеется ли достаточно различий в цвете, размере, расположении и так далее, чтобы это вызывало визуальный интерес?

3. Баланс: Равномерно ли распределен визуальный вес (положение, размер, цвет и так далее) элементов в дизайне?

4. Использование пространства: Насколько загроможденным или разреженным выглядит дизайн? Убедитесь, что на странице/экране оставлено достаточное количество свободного места – неиспользуемого пространства, – чтобы дизайн не выглядел перегруженным.

Адаптивный дизайн

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

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

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

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