Рекомендации по оптимизации пользовательского восприятия и эстетики
Применяется к следующей рекомендации контрольного списка по оптимизации взаимодействия Well-Architected Framework в Power Platform:
| XO:07 | Применяйте классические принципы дизайна к визуальным элементам, такие как цветовые схемы, типографика и макет. Стремитесь к целенаправленной, сбалансированной и интуитивно понятной визуальной иерархии, которая направляет внимание пользователей на важные элементы и действия. |
|---|
В этом руководстве описаны рекомендации по универсальным шаблонам визуального дизайна, которые влияют на восприятие пользователя и могут существенно повлиять на удовлетворенность и принятие приложения. Визуальные элементы служат основополагающими строительными блоками, используемыми для создания впечатлений. Применение визуальных принципов, которые соответствуют тому, как люди естественным образом воспринимают и обрабатывают информацию, обеспечивает структурированные методы, помогающие выбирать и упорядочивать визуальные элементы для создания эффективного и привлекательного приложения.
Ключевые стратегии проектирования
Обширные исследования человеческого восприятия визуального дизайна показывают, что пользователи не рассматривают визуальные элементы изолированно. Вместо этого они воспринимают их по отношению к другим элементам и контексту, в котором они появляются. Эти отношения влияют на восприятие пользователей, привлекая внимание к конкретным областям, вызывая эмоции, помогая пониманию, улучшая эстетику и укрепляя идентичность бренда. Тщательный выбор и расположение визуальных элементов могут создать привлекательный, запоминающийся и эффективный пользовательский опыт, соответствующий целевой аудитории.
Эффект эстетики и удобства использования
Эффект эстетического удобства использования относится к тенденции считать привлекательные продукты более удобными для использования. Пользователи формируют первоначальное мнение о приложении примерно за 50 миллисекунд. На это первое впечатление влияют различные факторы, включая структуру, цвета, интервалы, симметрию, количество текста и шрифты. Положительное первое впечатление может повысить общую удовлетворенность пользователей. Исследования показывают, что пользователи более снисходительны к незначительным проблемам с удобством использования, когда они находят интерфейс визуально привлекательным. Кроме того, качество дизайна может служить показателем надежности.
Баланс и вес
Визуальный баланс представляет собой чувство равновесия и гармонии в зрительном восприятии. Это помогает пользователям более эффективно обрабатывать и систематизировать визуальную информацию за счет снижения когнитивной нагрузки. Сбалансированные композиции обычно воспринимаются как более приятные и простые для понимания, что позволяет пользователям эффективно концентрировать внимание и с большей легкостью ориентироваться в визуальных стимулах. Этот когнитивный аспект визуального баланса подчеркивает его важность для облегчения четкого общения и улучшения общего пользовательского опыта.
Композиция сбалансирована, когда все элементы находятся в оптическом равновесии. Зачастую математическое размещение требует корректировки. Некоторые элементы, влияющие на визуальный вес, — это размер, цвет, плотность и пустое пространство.
Размер: более крупные элементы имеют тенденцию иметь больший визуальный вес, чем более мелкие. Чтобы добиться баланса, более крупные элементы можно уравновесить, сгруппировав их с более мелкими элементами или отрегулировав их размещение в макете.
Цвет: яркие или насыщенные цвета могут привлечь больше внимания и выглядеть тяжелее, чем приглушенные или нейтральные цвета. Балансировка цветов предполагает их равномерное распределение по интерфейсу или использование дополнительных цветов для создания визуальной гармонии.
Плотность: плотность элементов означает, насколько плотно они упакованы в данном пространстве. Балансировка плотности предполагает обеспечение равномерного распределения элементов в интерфейсе во избежание перенаселенности или разреженности областей.
Пробелы: также известные как отрицательное пространство, пробелы относятся к пустым областям между элементами. Пространство помогает создать визуальную передышку и может сбалансировать композицию, выделяя и подчеркивая определенные элементы.
Сбалансированная композиция представляет собой сумму визуальных сил между элементами.
Балансировка макета является одной из самых трудных задач, так как ее сложно измерить.
Color
Цвета, оттенки, тени и тона могут передавать смысл, вызывать эмоции и создавать эстетическую привлекательность. Цвет играет решающую роль в направлении внимания пользователя, установлении иерархии, передаче информации и повышении удобства использования. Несколько причин объясняют, почему продуманный цветовой дизайн пользовательского интерфейса может влиять на пользователей так, как вы хотите:
Внимание и восприятие. Некоторые цвета более привлекательны, чем другие, что позволяет дизайнерам сосредоточить внимание зрителей на определенных элементах. Цветовой контраст может улучшить читаемость и выделять различные компоненты, способствуя быстрой обработке информации.
Эмоциональный отклик. Цвета имеют психологические ассоциации, которые вызывают эмоции и настроения. Теплые цвета, такие как красный и оранжевый, могут создать ощущение энергии и волнения, а холодные цвета, такие как синий и зеленый, могут вызвать спокойствие и умиротворение. Вы можете вызвать желаемые реакции, чтобы повлиять на пользователей в направлении желаемого опыта.
Узнаваемость бренда. Последовательное использование цвета в материалах для брендинга помогает создать сильную визуальную идентичность и способствует узнаваемости бренда. Пользователи часто ассоциируют определенные цвета с конкретными брендами и связывают свой опыт с лояльностью и доверием к бренду.
Визуальная иерархия. Цвет можно использовать для создания визуальной иерархии и организации информации. Назначайте разные цвета элементам в зависимости от их важности или категории, чтобы создать четкую иерархию и облегчить навигацию и понимание.
Близость
Предметы, расположенные ближе друг к другу, кажутся более родственными. При расположении элементов убедитесь, что между тесно связанными и несвязанными элементами существует заметная разница в расстоянии.
Этот принцип Гештальта предполагает, что пространственное расстояние между визуальными элементами влияет на то, как они воспринимаются и мысленно организуются, и подчеркивает его важность для облегчения эффективной обработки и понимания визуальных стимулов.
Сгруппируйте связанные элементы, которые функционально схожи или принадлежат к одной иерархической категории. Например, кнопки, которые выполняют аналогичные действия или параметры в раскрывающемся меню, должны быть сгруппированы близко друг к другу, чтобы обозначить их связь. На панели навигации пункты меню, расположенные близко друг к другу, предлагают связанный набор опций, а больший разрыв между категориями меню визуально отличает их. Связанные элементы формы должны быть сгруппированы вместе, например поля адреса в разделе «Адрес».
Повысьте читаемость интерфейсов с большим количеством текста, регулируя расстояние между абзацами, предложениями и словами. Меньший интервал между абзацами указывает на логическую связь или продолжение мысли, тогда как больший интервал означает переход или перерыв в содержании. Этот прием способствует эффективному пониманию текстовой информации.
Убедитесь, что между связанными и несвязанными элементами есть заметное различие, чтобы избежать путаницы. Шкала расстояния может помочь последовательно определить необходимое расстояние в зависимости от размера элемента.
Этот круг слева в большей степени связан с треугольником, чем с другим кругом.
Расстояние между абзацами меньше, чем расстояние между разделами.
Непрерывность
Элементы, расположенные на линии или кривой, воспринимаются как более связанные, чем элементы, расположенные не на линии или кривой.
Располагайте элементы интерфейса, такие как меню навигации или этапы процесса, вдоль линии или кривой, чтобы обозначить последовательность или прогрессию. Этот макет помогает пользователям воспринимать взаимосвязь между элементами и понимать логический поток информации или действий.
Размещайте связанные элементы, такие как флажки или переключатели, а также элементы маркированного списка, вдоль линии, чтобы визуально сгруппировать их вместе. Такое расположение предполагает, что эти элементы имеют общую цель или принадлежат к одной и той же категории, что облегчает навигацию и понимание. Если похожие элементы имеют дополнительный отступ внутрь, позиция элемента коррелирует с более низким положением в визуальной иерархии.
Используйте линии или кривые, чтобы направлять внимание пользователей и создавать визуальные пути через интерфейс. Например, стрелка может направить взгляд пользователя от одного раздела контента к другому по определенному пути, указывая на связь или развитие. Этот метод помогает пользователям более интуитивно ориентироваться в интерфейсе и поощряет исследование.
Расположите ключевые элементы интерфейса, такие как кнопки призыва к действию или важную информацию, вдоль заметных линий, чтобы привлечь внимание пользователей и создать фокусные точки. Например, шаблон Fluent MessageBar часто отображается как заметное сбалансированное сообщение в области содержимого, при этом сообщение находится слева, направляя к кнопкам призыва к действию, расположенным справа. Эта стратегия макета выделяет эти элементы и подчеркивает их значимость, увеличивая вероятность взаимодействия.
В нашем восприятии кривые/линии более значимы, чем цвет.
Мастера используют непрерывность, чтобы показать пользователям, что шаги связанны между собой, не перегружая их слишком большим количеством информации.
Закрытие
Человеческий мозг склонен видеть законченные формы, распознавая единый знакомый шаблон среди отдельных объектов, даже если некоторая информация отсутствует.
Обеспечьте визуальную согласованность элементов дизайна, таких как формы, цвета и размеры, чтобы помочь пользователям изучить закономерности, которые им следует ожидать, даже если они представлены в разных контекстах.
Используйте простые и знакомые значки или символы, которые позволят пользователям заполнить недостающую информацию на основе их предыдущего опыта. Например, значок лупы обычно ассоциируется с функцией поиска, даже без сопутствующего текста.
Постепенное предоставление информации пользователям, также известное как постепенное раскрытие. Позвольте пользователям заполнять недостающие детали при взаимодействии с интерфейсом, тем самым избегая перегрузки их слишком большим количеством информации и поощряя исследования.
Создавайте связные визуальные шаблоны, которые побуждают пользователей воспринимать объекты как целые сущности. Например, группирование связанных элементов вместе может помочь пользователям понять их взаимосвязь и назначение. Визуально упорядочивайте элементы последовательно, используя принципы Гештальта для обозначения сегментации. Эффективно используйте пространство, чтобы создать ощущение замкнутости вокруг элементов интерфейса.
Используйте анимацию и переходы, чтобы направить внимание пользователей и передать изменения в состояниях интерфейса. Плавные переходы между различными состояниями или экранами могут помочь пользователям понять взаимосвязь между элементами и заполнить недостающую информацию. Множество современных элементов управления, доступных в Power Apps, по своей сути отображают анимацию.
Квадрат распознается до того как будут распознаны четыре неполных круга.
Анимация с карточки на модальное окно помогает закрыть пробел между ними и связывает их друг с другом.
Фокусная точка
Фокусная точка – это элемент дизайна, который сразу привлекает внимание зрителя. В идеале дизайн должен иметь последовательность фокусных точек, обычно от одной до трех, расположенных так, чтобы целенаправленно направлять пользователя через контент.
Разработайте интерфейс с четкой иерархией информации, в которой наиболее важный контент или действия будут выделены в качестве фокуса. Используйте визуальные подсказки, такие как размер, цвет, контраст и расположение, чтобы выделить эти элементы. Представляйте информацию постепенно, начиная с наиболее важных моментов. Этот метод помогает пользователям быстро идентифицировать наиболее релевантный контент или действия и направляет их через интерфейс в логической последовательности.
Разместите основные кнопки призыва к действию на видном месте в интерфейсе, сделав их наиболее сильными фокусами. Эти кнопки должны визуально отличаться от других элементов и стратегически располагаться, чтобы направлять пользователей к желаемым действиям, таким как совершение покупки или регистрация. Язык Fluent Design рекомендует использовать для этих элементов цвет темы бренда.
Эффективно используйте контраст для создания фокусов. Элементы, которые выделяются за счет различий в цвете, яркости, размере или типографике, естественным образом привлекают внимание пользователя. Контраст более ярких поверхностей с более темным текстом или фирменными элементами создает более заметный фокус.
Используйте пустое пространство, чтобы выделить фокусные точки, создав визуальное отделение от окружающих элементов. Этот метод помогает предотвратить отвлечение и позволяет пользователям сосредоточиться на самом важном контенте или действиях. Элементы пользовательского интерфейса с большим пространством вокруг них привлекают больше внимания и, как правило, воспринимаются как более важные, чем элементы с меньшим пространством.
Поддерживайте единообразие в использовании фокусных точек по всему интерфейсу, чтобы обеспечить целостный пользовательский интерфейс. Устанавливая шаблон фокусных точек, вы формируете ожидания пользователей относительно иерархии, которую им необходимо понимать для навигации по интерфейсу, и помогаете им находить важную информацию или действия на различных экранах или страницах.
Имейте в виду, что важно сохранять баланс и не перегружать пользователей слишком большим количеством конкурирующих фокусных точек.
Глаза пользователя в первую очередь привлекает синий квадрат.
Фокусными точками можно сделать такие элементы, как призыв к действию, чтобы пользователь обязательно обратил на них внимание.
Сходство
Объекты, которые кажутся похожими, часто воспринимаются как группа или шаблон, что заставляет пользователей ожидать, что они будут иметь одинаковую функциональность.
Убедитесь, что элементы интерфейса со схожими функциями имеют единый визуальный стиль. Например, кнопки, выполняющие аналогичные или равнозначные действия, должны иметь одинаковый цвет, форму и размер, сигнализируя пользователям об их общих функциях. И наоборот, убедитесь, что элементы, которые значительно различаются по функциональности, четко различимы. Оба метода предотвращают путаницу и разочарование, устанавливая четкие визуальные подсказки.
Используйте единообразные значки и символы для представления схожих действий или функций во всем интерфейсе. Пользователи склонны ассоциировать знакомые значки с конкретными функциями, основываясь на своем прошлом опыте. Чтобы оправдать эти ожидания, используйте общепризнанные метафоры-значки. Обеспечьте единообразие стиля значков, используя значки из одного и того же набора, например из библиотеки значков Fluent UI.
Используйте цветовое кодирование, чтобы обозначить сходство между элементами или категориями. Например, использование одного и того же цвета для выделения связанных элементов в списке или группировка похожих точек данных на диаграмме повышает визуальную согласованность и помогает пользователям различать закономерности.
Сохраняйте единообразие типографики и стиля текста для элементов, служащих аналогичным целям. Согласованные стили, размеры и форматирование шрифтов способствуют созданию целостного визуального языка, облегчая распознавание пользователями соответствующего контента или действий.
Обеспечьте последовательную интерактивную обратную связь для аналогичных действий в интерфейсе. Будь то наведение курсора мыши на кнопку или нажатие на ссылку, пользователи должны ожидать единообразных ответов, которые укрепят связь между визуальным сходством и функциональной эквивалентностью. Хотя платформа по своей сути обеспечивает большую часть интерактивного поведения, например значения цвета состояния при наведении и нажатии, помните об этом принципе проектирования при создании элементов компонентов с нуля или при реализации состояний обратной связи вручную.
Убедитесь, что визуальное сходство дополняется другими подсказками, такими как текстовые метки или звуковая обратная связь, чтобы удовлетворить потребности пользователей с различными нуждами и предпочтениями. Эффективная передача функциональности посредством множества сенсорных модальностей повышает удобство использования и инклюзивность.
Элементы группируются по форме и цвету, а не по расположению (столбцы и строки).
Если одна карточка на панели мониторинга открывается как боковая панель, пользователи будут ожидать, что все они открываются таким же образом.
Фигура и фон
Люди инстинктивно воспринимают элементы либо как «фигуру» (то, что выделяется на переднем плане), либо как «фон» (то, что отходит на задний план). Таким образом, контекст влияет на восприятие, и крайне важно обеспечить достаточное разграничение, чтобы отличить важные элементы от фона. Пустое пространство (негативное пространство) улучшает понимание контента.
Используйте контраст в цвете, размере или визуальном стиле, чтобы установить четкую связь между фигурой и фоном. Важные элементы должны заметно выделяться на фоне, делая их легко различимыми и эффективно направляя внимание пользователей. Поверхности более светлых тонов и более контрастные визуальные элементы на фоне имеют большее значение. Такой подход уменьшает визуальный беспорядок и помогает пользователям идентифицировать ключевую информацию. Обеспечьте достаточный контраст между элементами переднего плана и фона, чтобы улучшить читаемость для пользователей с нарушениями зрения, улучшив их способность получать доступ к контенту и понимать его.
Сохранение единообразия в размещении и стиле элементов интерфейса усиливает связь между фигурой и фоном и помогает пользователям понять структуру интерфейса. Последовательное использование шаблонов дизайна и визуальных подсказок гарантирует, что пользователи смогут быстро различать элементы переднего плана и фона на разных экранах и в разных контекстах. Непоследовательность в дизайне может нарушить мысленные модели пользователей и помешать им эффективно перемещаться по интерфейсу.
Низкий контраст и минимальное пустое пространство помогают воспринимать белые прямоугольники как часть фона.
Боковое изображение должно восприниматься как фон, чтобы пользователи могли сфокусироваться на важном контенте.
Группирование
Элементы, как правило, воспринимаются как группы, если они совместно расположены в области с четко определенной границей.
Группирование связанных элементов внутри визуальных контейнеров, таких как рамки, карточки или рамки, помогает пользователям воспринимать их как целостные единицы. Такой подход визуально организует контент и функциональность, упрощая идентификацию и обработку информации. Четкая группировка помогает избежать загроможденного интерфейса и снижает путаницу и неэффективность. Группировка также эффективна, когда близость невозможна; например, панель сообщений, охватывающая несколько элементов управления на экране, воспринимается как связанная единица из-за ее границ и цвета фона.
Поддержание единого визуального стиля для сгруппированных элементов укрепляет их связь и повышает удобство использования. Использование похожих цветов, шрифтов или значков для этих элементов подчеркивает их принадлежность к одной и той же категории или функции. Несоответствия в визуальном представлении могут ослабить воспринимаемую группировку и заставить пользователей не заметить отношения между элементами или неправильно истолковать их значение или цель.
Добавление границ вокруг элемента или группы элементов отделяет их от окружающих элементов.
Секционирование контента помогает пользователям понять, что тема изменилась.
Сигналы и шум
Визуальные сигналы, такие как линии, контраст и интервалы, используются, чтобы показать пользователям, что что-то важно. Однако слишком много сигналов или сигналы, выделяющие неважную информацию, быстро становятся шумом.
Используйте основные принципы, например, жирный текст, контрастные цвета или значки, чтобы сообщать пользователям важную информацию или действия. Например, используйте яркий цвет для важных кнопок или заголовков, чтобы они выделялись.
Будьте избирательны в том, что вы выделяете, чтобы не перегружать пользователей слишком большим количеством информации. Сигнализируйте только те элементы, которые действительно важны для задачи или цели пользователя. Слишком большое количество сигналов может создать путаницу и затруднить пользователям расстановку приоритетов. Определите информацию, которая наиболее важна для пользователя, и подчеркните ее соответствующим образом. Обычно рекомендуется иметь только одну кнопку призыва к действию на странице. В формах выделяйте обязательные поля, чтобы привлечь внимание пользователя. Это не позволяет пользователям потеряться в ненужных деталях и помогает им сосредоточиться на самом важном.
Убедитесь, что сигналы следуют единому визуальному языку во всем интерфейсе, чтобы служить ориентиром, помогающим пользователям распознавать закономерности и интуитивно понимать значение различных сигналов.
Адаптируйте сигналы к конкретному контексту и потребностям пользователя. Например, если пользователи просматривают интерфейс, в котором представлены определенные задачи, четко сигнализируйте о критическом статусе и элементах, требующих действий, чтобы привлечь их внимание. Контекстные сигналы помогают пользователям быстро найти нужную информацию, не отвлекаясь на посторонние детали.
Сигналы помогают пользователям перемещаться по контенту и показывают, что важно.
Визуальный шум создает путаницу, и его влияние противоположно влиянию сигналов.
Возможности в Power Platform
В приложениях на основе холста используйте контейнеры макета, чтобы группировать связанные элементы. В идеале вы должны организовать все элементы страницы в контейнерах, а контейнеры макета также могут эффективно разделять дочерние контейнеры, настроив свойство промежутка.
В формах приложений на основе модели разделы можно использовать для группировки связанных полей или элементов.
Обеспечьте согласованность общих визуальных элементов с помощью повторно используемых пользовательских компонентов.
В приложениях на основе холста современные элементы управления включают в себя встроенную сигнализацию. В частности, элементы управления кнопка и эмблема предлагают варианты свойств стиля, что делает их эффективными сигналами. Придерживайтесь лучших практик для каждого компонента и выборочно применяйте сигнализацию, чтобы обеспечить оптимальную связь.
Дополнительные сведения
- Принципы группировки
- Гештальт-психология
- Эффект эстетики и удобства использования
- Шкала расстояний системы Fluent UI Design