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

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

(Часть третья)


Лифт в шахте полосы прокрутки показывает, какую долю документа мы видим на экране. Стало быть полоса прокрутки — условное представление длины документа. Как повысить её информативность?

Показать, где в договоре рискованные формулировки:

Сервис «Договоры»

Подсветить результаты поиска:

Хром

Во всплывающей подсказке во время прокрутки отобразить текущую страницу:

Гугль-докс

В адресной книге вместо полосы прокрутки показать алфавит:

Айфон

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

Инфоскроллер символически представляет в полосе прокрутки весь документ — видны текст, заголовки, рисунки, таблицы:

Новая жизнь полосы прокрутки


Инфоскроллер

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

Форма заявки на открытие кредитной карты «Связного банка»

Ведро сайта «Связного банка»

При прокрутке длинной формы «оглавление» стоит на месте и показыает, какие разделы уже заполнены, в каких допущены ошибки.

Предельный вариант реализации этой идеи — превратить полосу прокрутки в уменьшенную копию самого документа:

Редактор кода «Сублайм-текст»

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

Навигатор Фотошопа — двумерная реализация того же:



Продолжение

Интерфейс и информация — дисциплина Школы дизайнеров. Набор открыт. Чем раньше поступите, тем ниже стоимость и выше шанс на бесплатное место.
 

Поделиться
Отправить

Комментарии

Дмитрий Трифонов
1 ноября 2016

Профессор Токийского университета в курсе Interactive Computer Graphics предлагает интересную концепцию — при прокрутке уменьшать содержимое страницы для упрощения визуального поиска внутри документа:
https://coursera.org/…/lecture/dDfjD/1-1-scrolling-interface (https://coursera.org/learn/interactive-computer-graphics/lecture/dDfjD/1-1-scrolling-interface)

Иван Дианов
7 ноября 2016

Ещё пример.

Записи блогов http://www.discourse.org/ подгружаются аджаксом при скролле. Стандартный скроллер браузера не знает, что часть страницы отсутствует и не может промотать сразу в конец обсуждения.

Поэтому разработчики сделали второй «глобальный» скроллер. Он может перенести к нужной дате или записи.


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

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

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

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





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

Несмотря на то, что между нами была договорённость о работе по ФФФ, клиент был в бешенстве 5 Расскажите о клише и устойчивых выражениях 13 2 Поделитесь соображениями, как работать, путешествуя 8