Интересные альтернативы и улучшения пользовательского интерфейса для полос прокрутки - PullRequest
4 голосов
/ 13 июля 2010

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

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

Ответы [ 3 ]

2 голосов
/ 14 июля 2010

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

Хорошие вещи у скромной полосы прокрутки:

  • Возможность прокрутки одной панели.

  • Возможность прокрутки одной строки (точная настройка).

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

  • Обеспечивает произвольный доступ к любому месту панели простым линейным перетаскиванием.

  • Интуитивно показывает относительную позицию в контенте (например, позволяет пользователю судить, насколько он близок к концу).

  • Интуитивно показывает относительный размер контента по размеру слайдера относительно дорожки.

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

  • Поддерживает clickamatic (нажатие и удерживание кнопки мыши для прокрутки нескольких строк или полных панелей).

  • Очень плавная обратная связь в реальном времени с действиями пользователя.

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

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

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

McCrickard DS и Catrambone R (1999) За полосой прокрутки: эволюция и оценка альтернативной навигации методы. Институт Джорджии Технологический технический отчет GIT-ГВУ-97-19.

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

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

  • Больше кнопок. Я видел предложения включить как вверх, так и вниз кнопки вверху и внизу, чтобы пользователь мог переключаться между прокруткой вниз и вверх, не поворачивая всю высоту панели. Или у вас могут быть кнопки для немедленной прокрутки к началу и концу содержимого, что удобно для пользователей, которые не знают о Ctrl-Home и Ctrl-End, что избавляет их от длительного перетаскивания ползунка. MS Word включает кнопки для выполнения последнего поиска или перехода, среди других возможностей.

  • Сплит-бар. ОВ темах полос прокрутки MS Word, MS Word и Excel имеется разделенный элемент управления, позволяющий разделить окно на две панели.Это было бы удобно для многих других приложений, таких как браузеры и большие списки и таблицы.

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

  • Левая боковая полоса прокрутки.Есть некоторые исследования, предполагающие, что мы обычно должны ставить вертикальную полосу прокрутки с левой стороны , а не справа (см. Kellener E, Barnes GM, & Lingard R (2001), Эффекты ориентации полосы прокрутки и выравнивание элементов, Труды Общества человеческого фактора и эргономики 45-е ежегодное собрание).Наличие положения полосы прокрутки в соответствии с выравниванием содержимого означает меньшее среднее расстояние поворота для более быстрого использования полосы прокрутки.В том же духе, размещение полосы прокрутки слева в браузере приведет к сокращению расстояния между полосой прокрутки и кнопкой Назад для более быстрой навигации.Однако появление колеса прокрутки могло сделать эту идею устаревшей.

2 голосов
/ 03 августа 2013

Отличный вопрос. См. RockScroll , который теперь является стандартным в Visual Studio 2013 Preview : http://www.hanselman.com/blog/IntroducingRockScroll.aspx

RockScroll в свою очередь вдохновил MetalScroll :

enter image description here

что в свою очередь вдохновило RockMargin .

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

enter image description here

Кроме того, большинство программ для сравнения файлов используют необычные полосы прокрутки. См. Beyond Compare 3.0 от Scooter Software, в котором «доступность инфоскроллера» отделена от полосы прокрутки. Доступность слева перетаскивается как полоса прокрутки. Кроме того, чтобы уменьшить необходимость горизонтальной прокрутки, есть нижняя панель, которая помещает текущую строку с левой панели сверху, а текущую строку с правой панели ниже. Перемещение информационного скроллера позволяет пользователю одновременно прокручивать оба документа, что значительно облегчает «объединение» изменений между двумя версиями одного и того же документа. Пожалуйста, смотрите:

http://www.scootersoftware.com/images/TextCompare1.jpg

WinMerge имеет другую, одинаково прокручиваемую левую панель, которая работает как полоса прокрутки и дублирует существующие полосы прокрутки. http://winmerge.org/about/screenshots/filecmp.png

enter image description here

Наконец, Google Chrome интегрирует функции поиска (" строка поиска ") в полосу прокрутки.

enter image description here

И Грег Райз предложил ABC Scrollbar :

enter image description here

и оверлейные полосы прокрутки , которые минимизируют не-клиентскую область:

enter image description here

И исследование, Техники прокрутки с усилением взгляда .

0 голосов
/ 13 июля 2010

Мне нравится полоса прокрутки Google Wave - кажется, что они согласовали полосы прокрутки с законом Фитта.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...