На Рисунке 8.5 представлен пример вайрфрейма, который создан с использованием компоновочной сетки для размещения элементов страницы.
Рисунок 8.5. Вайрфрейм, созданный с использованием компоновочной сетки
Сетка, показанная на этих двух рисунках, разбивает рабочее пространство только по горизонтали (на столбцы). Сетки, которые используются в печатном дизайне, часто включают и разбиение по вертикали (на строки). Линии сетки для вертикального позиционирования оказались менее полезными для создания веб-страниц из-за больших различий в высоте экрана различных устройств. Кроме того, контролировать точное вертикальное положение элементов бывает невозможно из-за того, что браузеры динамически масштабируют содержимое в зависимости от ширины используемого экрана. В результате цифровые компоновочные сетки, как правило, ограничиваются разбиением рабочего пространства только по горизонтали. С появлением адаптивного дизайна, о котором пойдет речь ниже, дизайнеры получили больше возможностей контролировать вертикальное положение элементов в своих веб-проектах.
Стоит напомнить, что на этапе создания вайрфрейма макет обычно передает лишь приблизительное расположение и относительный размер используемых элементов. В свою очередь, компоновочные сетки позволяют создавать макеты с точностью до пикселя, что позволяет перейти от вайрфреймов низкой точности к макетам с высокой точностью воспроизведения.
Макеты
Макеты, которые мы уже рассматривали в главе 7, – это высокоточные результаты проектирования, представляющие визуальный дизайн. Они основаны на предварительно разработанных вайрфреймах и используют цветовую палитру, элементы типографики и графики для создания внешнего вида продукта. Макеты обычно создаются визуальным дизайнером с помощью таких инструментов, как Adobe Illustrator или Sketch, а затем экспортируются в графические файлы (PNG, GIF или JPG). Вы можете использовать такие статичные макеты для получения обратной связи от пользователей, однако тестирование с использованием кликабельных макетов принесет гораздо большую пользу. Они дают пользователям лучшее представление о продукте и о том, как он работает. Такие инструменты, как InVision, позволяют преобразовать набор статичных макетов в пользовательский поток. С помощью этого и ему подобных инструментов вы можете определить область макета, доступную для клика или нажатия (например, разместив там кнопку или ссылку), и указать, к какому следующему макету должен быть осуществлен переход по этой ссылке. В главах 9 и 10 рассказывается, как организовать получение отзывов пользователей о макетах и использовать результаты тестирования для итеративного улучшения ваших проектов. Как только у вас появится набор кликабельных макетов, которые, по оценке целевых потребителей, достаточно просты в использовании и соответствуют ценностному предложению, этап разработки UX-дизайна будет завершен. Следующим шагом станет реализация пользовательского опыта путем создания продукта. В главе 12 обсуждается, как это сделать с использованием принципов Agile-разработки.
Я рассказал вам об айсберге UX-дизайна и о том, как последовательное прохождение по всем четырем его слоям позволяет воплотить в жизнь ваши идеи. Я описал ключевые результаты проектирования, которые будут получены на этом пути, включая те, что должны быть протестированы на потребителях для оценки разработанного пользовательского опыта и степени соответствия продукта рынку. В следующем разделе я поделюсь с вами несколькими важными принципами, которые могут помочь в создании превосходного UX-дизайна.
Принципы дизайна
Дизайн – это волшебная часть процесса создания бережливого продукта. Именно он позволяет трансформировать неосязаемые идеи о пользовательских преимуществах и необходимых функциях в реальный пользовательский опыт. Во многих отношениях дизайн – это скорее искусство, чем наука, однако существует несколько дизайнерских принципов, соблюдение которых будет весьма полезным для получения наилучшего конечного результата.
Гештальт-принципы
Гештальт-принципы – это совокупность полезных теорий о визуальном восприятии объектов. Само слово «гештальт» означает «целостную структуру, образ, который, хотя и состоит из множества частей, воспринимается как нечто единое целое». Это то, к чему наша мыслительная система визуальной обработки пытается свести все то, что мы видим. Существует несколько принципов гештальта, но я сосредоточусь лишь на двух из них: принципах близости и подобия.
Согласно гештальт-принципу близости, мозг воспринимает близко расположенные друг к другу объекты как более связанные, чем объекты, которые разделяет заметно большее расстояние. Учитывая этот факт, при создании дизайна вы должны размещать связанные объекты ближе друг к другу. Данному принципу необходимо следовать при компоновке элементов ваших вайрфреймов. Это относится к упорядочиванию не только контента, но и элементов управления пользовательским интерфейсом. Например, на рисунке 8.5 вы можете видеть, что все основные навигационные кнопки расположены в одном ряду. Если ваш пользовательский интерфейс предлагает пользователю выбор из трех вариантов действий, то все три кнопки или ссылки для осуществления этого выбора должны располагаться рядом друг с другом. Следует избегать близкого размещения несвязанных между собой элементов, иначе это может запутать пользователя. Например, размещение кнопки отмены, касающейся одной из функции слишком близко к другой функции, находящейся на той же странице, может привести к непониманию того, к какой из этих двух функций относится кнопка отмены.
Гештальт-принцип подобия утверждает, что мозг воспринимает объекты, обладающие сходными характеристиками, как более связанные, в отличие от объектов, не похожих друг на друга. Следовательно, в дизайн-проектах связанные или родственные объекты должны выглядеть похоже, то есть иметь одинаковую форму, размер или цвет. Необходимо избегать того, чтобы несвязанные объекты выглядели как однородные. Требование к соблюдению принципа подобия при создании визуального дизайна могло бы выражаться, например, в том, что все гиперссылки должны быть синего цвета и подчеркнутыми или чтобы все кнопки вызова функций имели одинаковую форму закругленного прямоугольника. Принципы гештальта, учитывая, что они описывают то, как работает наше визуальное восприятие, приводят нас к следующему дизайнерскому принципу: визуальной иерархии.
Визуальная иерархия
Визуальная иерархия – это важный принцип дизайна, который связан с тем, как пользователь определяет, какие элементы более важные, чем другие. Это, в свою очередь, влияет на порядок, в котором пользователь переключает свое внимание с одного объекта на другой.
Размер и цвет элементов – два основных атрибута, которые создают визуальную иерархию. Человеческий мозг исходит из того, что более крупные объекты имеют большую важность, тогда как объекты меньшего размера не настолько существенны. Кроме этого, мозг воспринимает как более важные элементы с высокой контрастностью, например, достигаемой за счет цвета. Выделяющиеся на общем фоне изображения могут давать тот же эффект. Наши глаза естественным образом притягиваются к фотографиям людей, особенно к лицам.
Расположение элементов на странице также влияет на визуальную иерархию, поскольку пользователи начинают осмотр с верхней ее части. Поскольку в английском и большинстве других языков чтение происходит слева направо, пользователи в первую очередь обращают свое внимание на левую сторону страницы. Поэтому при прочих равных условиях первыми в глаза бросаются элементы, расположенные в левом
