Google Wave Скроллер

Google Wave Скроллер

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

Итак, разрешите вам представить для начала мой перевод статьи Лукаса Матиса о скроллах в Google Wave. Между делом, обратите внимание на его замечательный блог Ignore The Code.

Несмотря на некоторую отрицательную реакцию на Google Wave, я считаю этот инструмент на удивление полезным. Одну вещь только никак не могу взять в толк — это скроллбары. Они ведут себя не так как обычные скроллбары и я не могу понять достоинств реализации скроллбаров гуглом. И мне кажется, я такой не один. В неофициальном мануале есть немалое пояснение о том как работают эти скроллбары. В гугл-сапорте есть статья под названием Что за хрень со скроллбаром?, а для хрома есть даже расширение, которое заменяет эти сроллы на стандартные.

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

Но давайте взглянем на то, что сделали в Гугле.

Scrollbars

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

Определение размера документа

Гугл определяет размер документа, используя маленький горизонтальный «стоппер» внизу скриншота. Чем дальше стоппер, тем больше документ. На большинстве систем размер документа определяется длиной этой передвигаемой полоски — «ползунка». То есть чем меньше размер ползунка, тем больше документ. Такая система делает размер документа интуитивно понятным. Если размер ползунка занимает треть длины скролла, то мы видим третью часть документа.

Скролл по клику

Большинство систем делают возможным скролить, используя стрелки скроллбара. Вот как это работает на макоси:

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

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

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

Скролл путем перетаскивания

Вот как это происходит в макоси:

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

Реализация гугла ведет себя заметно хуже, чем родная реализация скролла.implementation.

Плюсы

Неофициальный Google Wave мануал утверждает, что гуглоскроллбар работает лучше на девайсах с маленьким экраном:

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

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

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

Минус и его преодоление

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

Proposed change to Google's scrollbar

Тем не менее, не зная, какую именно проблему они пытаются решить своим скроллом, невозможно сказать поможет ли им такое решение.

Расскажите друзьям

Оцените статью:
  • 1
  • 2
  • 3
  • 4
  • 5

Комментарии — 30

Евгений
На какие еще замечательные или спорно-замечательные интерфейсные решения гугла вы обращали внимание?
Siva
хочу инвайт :)
Анатолий Rr Буров
Думаю, размещать стрелки посреди вертикали, где сейчас находится стопер, не стоит: они как будто будут управлять самим блоком со стрелками. К тому же волну могут редактировать другие люди, и поэтому стопер будет уезжать вниз из-под курсора. Мне кажется, лучше зафиксировать стрелки на верхнем конце скролбара.
brabadu
У классического скролла тоже есть нехилый минус. Когда документ большой скролл уменьшается. И при росте документа размер скролла стремится к нулю :)
Часто (и чем меньше экран тем быстрее) становится неудобно "нащупывать" этот самый скролл и приходится по сто раз клацать ниже/выше самого бара чтобы перейти на нужное место.
Илья
2 Siva. Давай мыло.
#
Илья
I2Y
"Вам понадобится другой браузер для просмотра этого видео." - Что это за безобразие?

P.S. Opera 10.01
#
I2Y
Евгений
Это значит, что Опера не поддерживает тег video. Если вам интересно увидеть, что скрыто за этими словами, попробуйте Firefox, Chrome или Safari.

Переводя статью, я не стал заменять этот тег. Если вам действительно интересно, попробуйте в другом браузере.

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

А вот для мобильных устройств нужно что-то менять. Классический скрол там ацки неудобен.
Lcd
Тенька имеет еще одно назначение - она показывает реальную позицию прокрутки в документе. Например, если волна большая, а вы утянули скролл далеко вниз, то тенька останется наверху, и, по мере подгрузки волны, будет перемещаться к скроллу. А насчет стрелочек полностью согласен - ужасная реализация
#
Lcd
FisheR
Google Wave Скроллер - шняга!!!
Eugeny
Поделитесь пожалуйста инвайтом ) evgenykud@gmail.com
#
Eugeny
Илья
evgenykud@gmail.com - отправил. Он не сразу прийдет.
#
Илья  
Siva
Илья, pavel@sivulich.com, спасибо )
Александр
Можно и мне инвайтик, spegulo@mail.ru, спасибо :)
#
Александр
Ruby Roid
И мне, если можно rubyroid07@gmail.com
Заранее спасибо =)
#
Ruby Roid
Sem Vosem
И мне! semvosemq3@gmail.com
#
Sem Vosem
Antsar
Ой, а можно и мне? mrilyuha сабака gmail.com Благодарю!
Илья
ну и мне, пожалуйста ;) mctroj (a) gmail.com
Спасиб!
#
Илья
Leo
Без чувства меры смею просить инвайт на Wave, плиз! Будьте любезны, если еще имеете такую возможность, киньте, а?! makarovleo@gmail.com
#
Leo  
Ruby Roid
Эх, кажется, мне не повезло... :(
#
Ruby Roid
Влад
vlad--ivanov@mail.ru
Пожалуйста, дайте Wave... А ни у кого нет в Google Voice?
Siva
если кому нужен инвайт, пишите :)
Русла
Я был бы очень рад инвайту :)
Дайте пожалуйста

Заранее спасибо
#
Русла  
Руслан
Вот мэйл
rusya_182(at)mail.ru
#
Руслан  
Руська
Вас пока дождешься.
Мне уже гугл сам инвайт прислал
#
Руська
эхх
эхх
#
эхх
mr47
Стучите в аську дам инвайт на гугл вейв (взамен на инвайт хабра) ....
185-923-шесть
#
mr47
Nonuriso
mr47 - какой-то не равнозначный обмен :)
#
Nonuriso
Евгений
Скопились инвайты на вэйв. Раздаю.
mr47
Может быть, :) мне просто очень нужен инвайт на хабр ))))
#
mr47

Новый комментарий

как выглядит какой тег
жирный текст <b>жирный текст</b>
курсивный тект <i>курсивный тект</i>
зачеркнутый текст <s>зачеркнутый текст</s>
подчеркнутый текст <u>подчеркнутый текст</u>
ссылка <a href="адрес">ссылка</a>
function foo() { ... }
<pre><code>function foo() { ... } </code></pre>
разрешенные теги или посмотреть как будет выглядеть
как выглядит какой тег
жирный текст <b>жирный текст</b>
курсивный тект <i>курсивный тект</i>
зачеркнутый текст <s>зачеркнутый текст</s>
подчеркнутый текст <u>подчеркнутый текст</u>
ссылка <a href="адрес">ссылка</a>
function foo() { ... }
<pre><code>function foo() { ... } </code></pre>
разрешенные теги или посмотреть как будет выглядеть

metin2 pvp metin2 pvp serverler pvp serverler