Поделиться через


Рекомендации по оптимизации взаимодействий

Применяется к следующей рекомендации контрольного списка по оптимизации взаимодействия Well-Architected Framework в Power Platform:

XO:08 Отдавайте приоритет отзывчивости и обратной связи. Упростите понимание сути взаимодействий с интерфейсом, добавляя взаимодействия, соответствующие ментальным моделям и ожиданиям пользователей.

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

Определения

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

Ключевые стратегии проектирования

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

Интуитивно понятная ассоциация

Интуитивно понятная ассоциация — это воспринимаемый сигнал или подсказка о том, что объект может быть использован для выполнения определенного действия. Например, «ручка обеспечивает захват»; то есть ручка предполагает, что ее можно схватить. Использование интуитивно понятных ассоциаций помогает пользователям построить правильные ментальные модели результатов своих действий.

Современные элементы управления, доступные в Power Apps, используют новейшие компоненты пользовательского интерфейса Fluent UI, которые объединяют визуальные элементы, такие как тени, градиенты и анимацию, чтобы сигнализировать об их интерактивности. Например, приподнятые кнопки предполагают, что их можно нажать, а выделенные текстовые поля указывают на готовность к вводу данных. Эти элементы управления соответствуют установленным шаблонам и соглашениям проектирования, обеспечивая знакомый и интуитивно понятный интерфейс для пользователей, привыкших к современным программным интерфейсам.

Два образца кнопок, иллюстрирующих интуитивную понятность, с нажатой кнопкой под приподнятой кнопкой.

Ментальная модель

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

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

Распространенный способ проиллюстрировать ментальную модель — показать статус или состояния данных таблицы, которые важны для понимания пользователя. Например, если запись неактивна или закрыта, вся форма должна быть доступна только для чтения, чтобы соответствовать ожидаемому поведению.

Графическое изображение ментальной модели пользователя в сочетании с системой приложений.

Когнитивные искажения

Когнитивные искажения — это упрощения и эмпирические правила, согласно которым мы выносим суждения и прогнозы. Существует более 150 когнитивных искажений. Их можно разделить на четыре группы:

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

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

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

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

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

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

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

Иллюстрация иллюзии Мюллера-Лайера, которая показывает, что две линии одинаковой длины кажутся разной длины из-за изменения направления стрелок.

Иллюзия Мюллера-Лайера демонстрирует, что, несмотря на то, что линии объективно имеют одинаковую длину, наш мозг интерпретирует длину по-разному из-за окружающего визуального контекста (стрелок), что приводит к ошибке восприятия (или иллюзии), когда кажется, что одна линия длиннее другой.

Закон Фиттса

Закон Фиттса показывает, что время, необходимое для обнаружения цели, зависит от расстояния до цели и ее размера. Большие элементы, расположенные близко к пользователям, выбираются легко. Например, если кнопка слишком мала или находится далеко от содержимого, к которому она относится, пользователю потребуется больше времени, чтобы выбрать ее.

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

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

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

Диаграмма цели — круг с центральной точкой — иллюстрирует закон Фиттса или показывает, как размер и расстояние влияют на скорость и точность взаимодействия с пользователем.

Закон Хика

Закон Хика утверждает, что по мере увеличения количества стимулов время, необходимое для принятия решения, также увеличивается, подчеркивая важность простоты в процессах принятия решений.

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

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

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

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

Графика с восьмью парными фигурами (по два круга, квадрата, звезды и треугольника), каждая пара которых окрашена в разные цвета, как демонстрация закона Хика о принятии решений.

Краевой эффект

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

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

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

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

Диаграмма из семи объектов в ряд (четыре серых круга, один синий квадрат и два серых круга) со стрелками над первым и последним кругами и синим квадратом, иллюстрирующая эффекты избирательного внимания и эффектов первичности/новизны в когнитивной психологии.

Принцип Парето

Принцип Парето (также известный как правило 80/20, закон нескольких жизненно важных факторов и принцип разреженности факторов) гласит, что для многих результатов примерно 80% последствий происходят из 20% причин, или, более широко, меньшая часть входных данных часто дает большую часть результатов.

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

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

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

Закон Якоба

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

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

Закон Миллера

Закон Миллера гласит, что среднестатистический человек может одновременно удерживать в рабочей памяти около семи (плюс-минус два) объектов. Это открытие подчеркивает когнитивные ограничения обработки информации человеком и имеет серьезные последствия во многих областях, включая дизайн пользовательского интерфейса. Исследования Миллера продолжают способствовать нашему пониманию объема памяти и влияют на стратегии оптимизации когнитивных функций и разработки эффективных сред обучения и интерфейсов.

Разбиение на части — это эффективный метод представления групп контента в управляемом виде. Организуйте контент в виде значимых фрагментов или групп, содержащих от пяти до девяти элементов. Использование визуальных подсказок (таких как интервалы, границы или цвет) четко разграничивает различные фрагменты контента, помогая пользователям воспринимать структуру информации и эффективно перемещаться по интерфейсу.

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

Правило последнего впечатления

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

Некоторые способы усилить положительное впечатление включают в себя следующие аспекты:

  • Персонализация: адаптируйте пользовательский интерфейс к индивидуальным предпочтениям и поведению. Предлагайте персонализированные рекомендации, предложения по контенту или варианты настройки на основе пользовательских данных и предпочтений.

  • Микровзаимодействия: включите небольшие восхитительные анимации или взаимодействия по всему интерфейсу, чтобы сделать взаимодействия более увлекательными и приятными. Например, едва уловимая анимация при наведении курсора на кнопки или забавные экраны загрузки могут добавить индивидуальности пользовательскому интерфейсу.

  • Удивление и радость: добавьте неожиданные элементы или "пасхалки", которые удивят и порадуют пользователей. Например, скрытые функции, юмористические сообщения или интерактивные элементы, поощряющие исследования и открытия.

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

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

  • Отзывы и подтверждение: предоставляйте немедленную и содержательную обратную связь на действия пользователей, чтобы уверить их в том, что их взаимодействия зарегистрированы и поняты. Используйте визуальные подсказки, анимацию или уведомления для подтверждения данных, введенных пользователем, и их действий в режиме реального времени.

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

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

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

Диаграмма сплошной неправильной волнистой линии, проведенной слева направо, одна стрелка указывает на самый высокий пик, а другая — на самый низкий уровень, демонстрирующая правило последнего впечатления.

Закон Постеля

Закон Постеля, или принцип устойчивости, перефразирован так: «Будьте либеральны в том, что вы принимаете, и консервативны в том, что вы посылаете». Другими словами, будьте чуткими, гибкими и терпимыми к различным действиям, которые может предпринять пользователь; например, при приеме переменных входных данных от пользователей, преобразовании входных данных в соответствии с требованиями, определении границ ввода и предоставлении четкой обратной связи пользователю. В то же время будьте конкретны, когда вы просите пользователя сделать что-либо.

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

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

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

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

Контрольный список оптимизации взаимодействия