Почему индикаторы прогресса ожидают назад?

Новая загрузочная панель Gmail привлекла мое внимание сегодня:

Панель загрузки Gmail

Цветной рисунок внутри панели анимируется справа налево.

Графики выполнения Mac OS делают то же самое:

Индикатор выполнения Mac OS

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

Обновление

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

  
  1. Увеличение числа пульсаций - «Индикатор прогресса с увеличением пульсации более вероятно, будет восприниматься как имеющий более короткую продолжительность»

  2.   
  3. Ускорить прогресс и избежать пауз в конце . Индикаторы хода - с самым быстрым прогрессом, достигнутым в конце процесса, - были восприняты быстрее, чем индикаторы прогресса - с паузами рядом процесс завершения.

  4.   
274 голоса | спросил fredley 8 MarpmThu, 08 Mar 2012 21:22:36 +04002012-03-08T21:22:36+04:0009 2012, 21:22:36

5 ответов


266

Исследования показали, что он выглядит быстрее и в восприятии UX есть все;)

A исследование (PDF) [1] демонстрирует, что анимация может увеличиться воспринимаемая скорость загрузки до 11% над баром, который не анимирован. Имея обратный анимированный фон, как в панели загрузки Gmail, или имеющий фоновый импульс быстрее, когда бар близится к завершению, оба создают этот эффект. Существует видео , демонстрирующее анимации и подведение итогов статьи.

  

[1] Harrison, C., Yeo, Z., & Hudson, S.E. (2010). Более быстрый прогресс   bar: Манипулирование воспринимаемой продолжительностью с визуальным увеличением.   Материалы компьютерно-человеческого взаимодействия.

ответил csulok 8 MarpmThu, 08 Mar 2012 21:59:34 +04002012-03-08T21:59:34+04:0009 2012, 21:59:34
277

Это потребовалось навсегда, чтобы использовать Image Ready. лол


Идти вперед:

введите описание изображения здесь>> </p>

<p> <br> <br>
Переход назад: </p>

<p> <img src =


Когда спираль движется против направления стержня, она визуально ускоряет скорость движения бара.

Бары очень близки друг к другу, поэтому спрячьте ее ладонью и посмотрите только по одному. :)

ответил Jung Lee 11 MaramSun, 11 Mar 2012 07:37:04 +04002012-03-11T07:37:04+04:0007 2012, 07:37:04
38

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

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

ответил msanford 8 MarpmThu, 08 Mar 2012 21:29:48 +04002012-03-08T21:29:48+04:0009 2012, 21:29:48
14

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

Примеры индикаторов выполнения анимации осуществляются двумя способами: (1) область, представляющая прогресс, расширяется, а правый край перемещается вправо; и (2) цветной рисунок внутри смещается, справа налево («противоположное» направление).

Анимация (1) служит для указания общего прогресса - и хотя этот край заметно перемещается, он также косвенно подтверждает, что что-то происходит.

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

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

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

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

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

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

ответил gojomo 9 MarpmFri, 09 Mar 2012 12:31:21 +04002012-03-09T12:31:21+04:0012 2012, 12:31:21
1

Я подумал об этом как винт Архимеда, или как пропеллерный вал подводной лодки.

 что-то вроде этого

Вид подталкивает подводную лодку вперед.

ответил packetChor 13 MarpmMon, 13 Mar 2017 23:00:16 +03002017-03-13T23:00:16+03:0011 2017, 23:00:16

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132