Java, UX, HTML, CSS, WEB-design

Умные переходы в дизайне взаимодействия с пользователем

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

Название: Умные переходы в дизайне взаимодействия с пользователем . Краткое описание: [ad_1] ⭐ Адриан . Дата публикации: 12.02.2022 . Автор: Алишер Валеев .

Для чего создан сайт Novosti-Nedeli.ru

Данный сайт посвящен новостям мира и мира технологий . Также тут вы найдете руководства по различным девайсам.

Сколько лет сайту?

Возраст составляет 3 года

[ad_1]

  • Адриан Зумбруннен

  • 0 Комментарии

Умные переходы в дизайне взаимодействия с пользователем

  • 9 минут чтения

  • Юзабилити, Дизайн взаимодействия, Графический дизайн

Краткое резюме ↬

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

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

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

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

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

Анимированная прокрутка

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

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

Анимация прокрутки

Сравните это с этим:

Прокрутка без анимации

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

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

Еще после прыжка! Продолжить чтение ниже ↓

Переключение с сохранением состояния

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

Переключить меню

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

Забрать: Сделайте элемент вашего сайта понятным в каждом состоянии.

Свернутые формы и комментарии

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

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

Постепенное раскрытие информации на бета-сайте New York Times

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

Анимированное поле для комментариев

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

Как видите, это уменьшает беспорядок и делает форму комментария более привлекательной. Но как насчет того, чтобы свернуть все предыдущие комментарии?

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

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

Потяните, чтобы обновить

Одним из самых захватывающих взаимодействий, появившихся вскоре после появления iPhone, было «потяните, чтобы обновить», впервые предложенное Лореном Брихтером. Это позволяет пользователю обновлять прокручиваемый контент в обратном хронологическом порядке. Вы можете увидеть эту концепцию в действии в приложении Twitter. После того, как вы прокрутили до начала потока твитов, прокрутите немного дальше, чтобы обновить поток.

Потяните, чтобы обновить в Твиттере

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

Забрать: Соединяя намерение с действием, опыт становится более плавным.

липкие этикетки

Липкие метки — еще одна тонкая, но полезная комбинация компонента пользовательского интерфейса и значимого перехода. Посмотрите, как Edenspiekermann использует эту технику в своем портфолио.

Использование Эденспикерманом липких этикеток

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

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

Доступность Переход

Понятие аффорданса происходит из когнитивной психологии и относится к определенным характеристикам объекта, которые направляют зрителя.

В контексте дизайна пользовательского интерфейса глоссарий удобства использования (PDF) веб-сайта ЕС определяет его следующим образом:

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

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

iOS_Lockscreen-500-финал

На экране блокировки iOS 6 вокруг значка камеры была рябь, что указывало на возможность перетаскивания. Apple удалила его в iOS 7, по-видимому, потому, что пользователи к нему привыкли, и теперь значок больше похож на отдельную кнопку. Однако происходит то же самое: когда вы перетаскиваете кнопку, экран блокировки подпрыгивает, открывая камеру под ним. Это отличный способ указать пользователям на функции интерфейса.

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

Скрытие на основе контекста

В Google Chrome для iOS с момента запуска было скрыто на основе контекста. Вот как это выглядит:

Скрытие на основе контекста

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

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

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

Забрать: Используйте скрытие на основе контекста, чтобы повысить внимание пользователя и сэкономить место на экране.

Переход фокуса

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

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

Забрать: Ориентировать пользователя независимо от того, как он перемещается.

Вывод

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

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

Если вам понравилась эта статья, вы можете подписаться на меня в Твиттере или присоединиться ко мне за плиткой швейцарского шоколада в Швейцарии.

Какие шаблоны перехода вы нашли особенно полезными в своих проектах?

Дальнейшее чтение

  • Значимые переходы: анимационная графика в пользовательском интерфейсе
  • «Mission Transition», Марк Косси, Smashing Magazine
  • «12 основных принципов анимации» аниматоров Диснея Олли Джонстона и Фрэнка Томаса.
  • Улучшение пользовательского потока через переходы между страницами
  • Почему важны переходы
  • Использование движения для взаимодействия с пользователем в приложениях и на веб-сайтах
Сокрушительная редакция
(ал, ил, эа)



[ad_2]
Source: https://smashingmagazine.com

Заключение

Вы ознакомились с статьей — Умные переходы в дизайне взаимодействия с пользователем

Пожалуйста оцените статью, и напишите комментарий.

Похожие статьи

Добавить комментарий

Ваш адрес email не будет опубликован.

Кнопка «Наверх»