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

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

Почему это важно?
По словам Microsoft, люди теперь теряют фокус после восьми секунд просмотра из-за эффектов «сильно оцифрованного» образа жизни. В качестве справочной информации средний уровень внимания составляет девять секунд.

Дилемма дизайнера

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

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

Есть две вещи, которые необходимо сделать правильно в веб-разработке:

1. Сделайте правильный выбор между начальными и второстепенными функциями.

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

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

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

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

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

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

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

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

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

2. Принцип гештальта

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

• Близость,
• Сходство,
• Непрерывность.

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

1. Близость

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

2. Сходство

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

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

3. Непрерывность

Непрерывность возникает, когда глаз вынужден долго перемещаться по одному объекту, а потом плавно переходит к другому объекту. Мы склонны группировать и организовывать линии или кривые, которые следуют установленному направлению по сравнению с теми, которые определяются резкими изменениями направления.

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

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

3. Воспринимаемая свобода

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

В разработке программного обеспечения это в значительной степени решено с использованием стандартных пользовательских интерфейсов (например, Bootstrap – это бесспорный чемпион интерфейсных фреймворков).

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

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

4. Призыв к действию

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

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

Размещение важно

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

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

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

Не забывайте о цветовой психологии

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

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

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

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

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

1. Ответная реакция

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

2. Динамическая подсказка

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

3. Информирование во время процесса

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

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