Илья
25 октября 2016
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

Как должна работать прокрутка?

(Часть вторая)


Популярность Виндоуса позволяет считать логику его полос прокрутки стандартной: там она устаканилась и не менялась больше двадцати лет. От версии к версии менялся лишь внешний вид:


Кнопки-стрелки прокручивают на одну строку. Они указывают в направлении движения лифта, а не содержания.

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

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

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

О законе Фиттса

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

Настройка рабочего стола Виндоуса 3.1, 1990

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

И человек изобрёл колесо:

Микрософт Интеллимаус, 1996

Колесо управляло движением лифта в полосе прокрутки. При движении вверх содержимое прокручивалось вниз.

Благодаря колесу люди стали всё реже использовать полосы прокрутки для прокрутки, однако на их дизайн это почти не влияло.

Пока в 2007 году Эпл не представил Айфон. Классические полосы прокрутки были совершенно непригодны для управления пальцем. А из-за маленького экрана прокрутка на Айфоне использовалась повсеместно. Как она работала? Стив Джобс «просто брал палец — и прокручивал»:

В 2000-х в Эпле придумали двухпальцевую прокрутку на трекпадах.


Для прокрутки стала использоваться вся площадь экрана — отпала необходимость прицеливания:

Страница прокручивается за любое место. Индикатор положения — справа сверху

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

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

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

О мгновенной, непрерывной, физичной обратной связи

Продолжение

P. S. Я веду практический курс «Пользовательский интерфейс и представление информации». Дата следующего курса пока неизвестна.

 
Мы напишем вам, когда будет открыта запись. Без спама.

Поделиться

Комментарии

Максим Бородин
26 октября 2016

Более актуальная картинка

Андрей Лось
2 ноября 2016

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

В 2010 году (то есть спустя 15 лет после появления на рынке мышей с колесом) Mozilla исследовала, как пользуются интерфейсом браузера Firefox, и в итоге получила такую тепловую карту, где скроллбар — второй по популярности элемент интерфейса:
http://heatmap.mozillalabs.com/

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

Далеко не все ноутбуки под Windows были оснащены нормальным тачпадами с двухпальцевым скроллом. Иногда рядом с тачпадом ещё располагались специальные полосы для прокрутки (довольно неудобные для использования, поэтому всё равно приходилось таскать скроллбар): http://www.laptopmag.com/…/acer/aceraspire3935_touchpad_sf.jpg

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

Есть мелкие обсуждения темы скроллбаров, где участники дискуссии также утверждают, что проводили исследования и ко всеобщему удивлению выяснилось, что скроллбары всё ещё очень популярны:
https://www.quora.com/…by-clicking-and-dragging-scrollbars

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

Этот комментарий не противоречит написанному в совете, он призван уточнить фразу: «Благодаря колесу люди стали всё реже использовать полосы прокрутки для прокрутки, однако на их дизайн это почти не влияло».

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


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

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

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

Вот такой веб 2.0.





Недавно всплыло

3 Как написать заказчику, что я установлю модуль на его сайт после окончательной оплаты, и при этом не обидеть его? 2 Как флексить. Отступить от идеала 2 1