Улучшите свой UX с помощью этих успешных принципов дизайна взаимодействия

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

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

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

Интерактивный дизайн (IxD) определяется Ассоциацией интерактивного дизайна (IxDA) как «структура и поведение интерактивных систем. Дизайнеры взаимодействия стремятся создать значимые отношения между людьми и продуктами и услугами, которые они используют, от компьютеров до мобильных устройств, бытовой техники и так далее».

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

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

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

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

Никому не нравится, когда его бьют по голове криками «следуй правилам», но по-настоящему превосходный дизайн взаимодействия опирается на набор стандартов, лучших практик, соглашений и эмпирических правил (эвристики). Это не мягкая наука, но они составляют основу IxD и ​​делают возможным взаимодействие с наименьшим количеством трения. Стандарты интерфейса не препятствуют творчеству — это не жесткие и быстрые правила, а основополагающие рекомендации, которые помогают дизайнеру создать основу «удобного и знакомого дизайна», на основе которой можно внедрять инновации.

Принципы интерактивного дизайна и лучшие практики

Дизайн взаимодействия подпадает под дисциплину взаимодействия человека и компьютера (HCI), «мультидисциплинарную область исследований, посвященную разработке компьютерных технологий и, в частности, взаимодействию между людьми (пользователями) и компьютерами». Фонд дизайна.

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

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

Давайте углубимся в некоторые из наиболее важных принципов (ни в коем случае не исчерпывающий список):

Возможность обнаружения

По сути, если пользователь не может его найти, значит, его не существует. Должно быть ясно, как колокол, какие действия возможны в пользовательском интерфейсе менее чем за микросекунду — например, маркировка значков в качестве лучшей практики. Непомеченные значки равносильны созданию препятствий на пути пользователя, потому что им придется остановиться, чтобы расшифровать значение. Вы прерываете «поток». И вот шок… Они не заинтересованы в изучении вашего пользовательского интерфейса.

Сигнификаторы

Эффективное использование означающих, тесно связанное с возможностью обнаружения, гарантирует, что аффордансы — возможность действия над объектом — четко обозначены в пользовательском интерфейсе. Обозначения дают сильные подсказки, такие как сигналы или указатели. Указывая на доступное взаимодействие, они мигают зеленым светом, когда пользователь кричит: «Вот я, вы можете коснуться (щелкнуть, провести пальцем и т. д.) меня!» Аффорданс может существовать в пользовательском интерфейсе, но может оставаться скрытым, потому что, если ему не хватает означающего, он остается невидимым. Примером может быть «скрытое жестовое взаимодействие», которое не проявляется, пока пользователь случайно не проведет пальцем влево или вправо (например, чтобы что-то удалить).

Возможности определяют, какие действия возможны. Означающие определяют, как люди обнаруживают эти возможности: означающие — это знаки, воспринимаемые сигналы того, что можно сделать. Означающие имеют гораздо большее значение для дизайнеров, чем аффордансы. — Дон Норман (Норман, 2013 г.)

Обратная связь

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

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

Концептуальные модели и ментальные модели

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

Ментальные модели, или когнитивные карты, — это образы в сознании пользователя, которые информируют его об ожидании определенного взаимодействия и о том, как что-то работает в реальном мире. Когнитивные карты — это внутренние представления нашей физической среды, особенно связанные с пространственными отношениями. Эффективно используя ментальную модель пользователя, дизайнеры взаимодействия могут создавать системы, которые «кажутся» интуитивно понятными.

Дизайнер изобретает концептуальную модель — проектную модель, и именно так дизайнер предполагает работать с устройством или программным обеспечением. Единственный способ донести эту модель до пользователей — реализовать ее через пользовательский интерфейс. Затем пользователи взаимодействуют с концептуальной моделью и создают свою собственную ментальную модель того, как что-то работает.

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

Сопоставления

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

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

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

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

Ограничения

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

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

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

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

Непротиворечивость, стандарты и эвристика

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

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

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

Например, соответствие соглашению может заключаться в том, как организована страница. Интернет-пользователи тратят 69% своего времени на просмотр левой половины страницы и 30% на просмотр правой половины. Следовательно, сайт с большей вероятностью будет прибыльным, если он будет следовать обычному макету.

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

Шаблоны и обучаемость

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

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

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

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

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

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

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

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

Закон Фиттса

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

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

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

Диаграмма Гутенберга, макеты Z- и F-шаблонов

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

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

F — быстро и относится к тому, как пользователи читают контент. F-паттерн был популяризирован благодаря исследованию отслеживания взгляда NNGroup, в ходе которого было зарегистрировано более 200 пользователей, читающих контент в Интернете. Было обнаружено, что шаблоны сканирования людей были довольно постоянными на разных типах сайтов.

Почему это важно? Например, на сайте электронной коммерции, чтобы максимизировать сканирование, вы можете упорядочить наиболее важный контент в соответствии с F-шаблоном.

Признание вместо припоминания

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

Например, использование значков в пользовательском интерфейсе является эффективным, поскольку позволяет мгновенно распознавать символ. Наш мозг обрабатывает (распознает) символы примерно в 1000 раз быстрее, чем читает текст. Если дизайнер отображает стандартный значок предупреждающего знака в диалоговом окне, это немедленно заставляет пользователя сосредоточиться и обратить внимание, потому что следующее действие может быть разрушительным. Но если значок разработан таким образом, что заставляет пользователей вспоминать и расшифровывать значение — например, поднятая рука вместо значка предупреждения — это снижает эффективность и удобство использования пользовательского интерфейса.

Эстетичный и минималистичный дизайн

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

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

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

Микеланджело сказал о своей работе: «Я увидел ангела в мраморе и вырезал его, пока не освободил».

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

Предотвращение ошибок

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

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

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

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

Будущее интерактивного дизайна

Новые устройства, среды и интерфейсы будут продолжать развиваться с новыми возможностями взаимодействия. Контроллеры для видеоигр постоянно развиваются и предоставляют разнообразные элементы управления вводом, а также тактильную обратную связь. Жестовые интерфейсы будут развиваться от сенсорных экранов, поддерживающих 2D- и 3D-жесты (например, жесты на устройствах iOS и Android), до использования жестов рук в 3D-пространствах для взаимодействия с пространствами виртуальной реальности, игровыми консолями и устройствами IoT, которые позволяют нам управлять нашей средой. .

Как и в случае с проектом Google Project Soli, мы можем сказать «сайонара» мыши, трекпадам и джойстикам и переключиться на более естественные жестовые взаимодействия, используя руки и пальцы для управления устройствами. В некоторых случаях — например, в диалоговом пользовательском интерфейсе — методы ввода могут меняться с клавиатуры на голос. Тем не менее принцип немедленной и непрерывной обратной связи в той или иной форме (голосовой, тактильной и визуальной) все равно будет необходим.

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

Дальнейшее чтение в блоге Toptal Design:

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