AutoCAD начала 80-х
Зум появился очень давно, на заре эры графических интефейсов, с первыми векторными редакторами.
Но с тех пор он не был использован почти нигде, кроме САПР и программ для работы с графикой. Про него вспомнили только когда появились мобильные устройства — на маленьком экране не умещались большие фотки и веб-страницы.
В мобильных интерфейсах зум стал вполне привычным и естественным и продолжает эволюционировать. Но на десктопе зум заброшен и, на мой взгляд, совершенно напрасно. Zoomable user interface (ZUI) даёт ряд преимуществ, позволяющих лучше решить актуальные задачи. Я решил описать эти преимущества по типам зума, с примерами.
Геометрический зум
Существует поиск по имени файла, поиск внутри документов, папки и теги, но не всегда же помнишь ключевые слова — приходится пользоваться визуальным поиском. А при работе с изображениями или большим количеством файлов от него вообще никуда не деться. Я уверен, визуальный поиск намного упрощается, если использовать зум вместо скролла. Зум позволяет видеть все объекты одновременно (замаппить на один экран) и быстрее найти нужный. Вот несколько примеров.
Seadragon (2006)
Это технология для просмотра больших изображений или больших коллекций изображений через интернет. Куплена Microsoft, используется в нескольких не особо известных продуктах. На основе этой технологии был разработан Deep Zoom, ставший в свое время «фишкой» для Silverlight. Есть Ajax API, но на таче работает только через тап.
Можно пойти дальше и замаппить интерактивные элементы, например, окна. Оконный менеджер с зумом и маппингом — это истинная многозадачность! Позволит обойтись без использования нескольких мониторов.
Metisse (2006)
На мой взгляд, они сделали его излишне сложным и анимированным. Ещё до того, как я увидел Metisse, я нарисовал свой, более простой и строгий концепт (демо на Seadragon — нужен скролл). Впрочем, под Windows это вряд ли возможно.
Зато точно можно маппить вкладки в браузере. Один хабраюзер даже пытался и, надо сказать, был в этом не одинок — после того, как Mozilla перенаняла сотрудников компании Humanized к себе на работу вместе с ее основателем, Азой Раскиным, который создал концепт Tab Candy, его встроили в Firefox 4. Но реализация была не очень — любое изменение размеров окна браузера приводило к уничтожению расположения картинок-табов в пространстве, что делало саму затею бессмысленной. И оба проекта, похоже, закрыты. Хотя всё равно это просто маппинг, куда интереснее когда с содержимым окон можно взаимодействовать, как в Metisse. Может быть это можно сделать через расширение к браузеру (если решить проблемы XSS / same-origin policy).
Семантический зум
Зум может быть использован для визуализации не только изображений, но и других видов информации. Семантический зум — когда уровень детализации изменяется, чтобы вместить релевантную информацию в текущий размер объекта, похоже на генерализацию в картографии. С одной стороны, он позволяет не перегружать интерфейс информацией, с другой — получить метаданные объекта не делая дополнительных кликов и главное не теряя фокуса — быстрый переход от общего к частному. Кроме того, используя семантический зум, можно сделать текст читаемым на любом уровне зума.
Веб-карты — хороший пример семантического зума, он попал туда из картографии, а точнее из ГИС, с подачи Google Maps (2006) — в своё время это был очень смелый шаг. Это, пожалуй, единственный продукт с ZUI, который известен широкой публике.
Семантический зум полезен везде, где у объектов есть метаданные. Не нашёл хорошего простого примера — нарисовал свой, абстрактный файловый менеджер:
Изменяется как детализация содержимого, так и метаданных.
Microsoft предлагают разработчикам использовать семантический зум в приложениях Windows 8 для абстракции данных. Хотя геометрия объектов при этом теряется, это тоже интересный вид семантического зума. Но, похоже, разработчикам до него нет дела.
Навигация с помощью зума
При визуальной навигации можно запомнить, как выглядит то или иное место или путь до него, refinding короче. Или заглянуть на несколько уровней вглубь дерева. Обычно никто не верит, что такое возможно, — уверены, что для сохранения интерактивности не хватит производительности, но я показываю им следующий пример. Осторожно, после просмотра ваша жизнь вероятно уже никогда не станет прежней!
Eagle Mode (2008)
Основной частью является «фрактальный» файловый менеджер, позволяющий заглядывать на несколько уровней вглубь. Очень крутая штука, но не верится, что кто-то кроме автора действительно пользуется ею, так как нет привычного взаимодействия — привычных меню, drag and drop, и даже пана. Что интересно, есть С++ API. На Android автор его тоже запускал — не тормозит.
Комбинации
Комбинируя описанные выше принципы и преимущества, можно создать множество крутых и полезных интерфейсов — приведу несколько примеров.
Code Canvas (2009)
Продвинутый ZUI для Visual Studio от Microsoft Research, который, несмотря на интерес общественности, так и не был выпущен. Есть ещё одна похожая штука — Code Bubbles (2010) — также не была выпущена. А Debugger Canvas (2013) всё-таки был выпущен.
Raskin (2011)
Визуальный файловый органайзер для Mac, поближе познакомиться с ним мне пока не удалось, приведу комментарий моего знакомого:
Я пробовал воспользоваться Raskin for Mac, но это просто зумируемое пространство со всем контентом на диске Мака, в котором сразу загружаются все детали, что делает программу очень медленной и неудобной для практического применения. Кроме того, программа показывает и системные данные, что в этой ситуации нелогично, т.к. такого рода приложение должно быть сфокусировано на контент пользователя, предоставляя отдельно специализированные средства для работы с системой. Учитывая, что Аза делал этот проект после работы над Archy, мне представляется крайне странным, почему он сделал настолько бесполезный интерфейс, опираясь на столь мощную идею, как ZUI.
Raskin, конечно, назван в честь Джефа Раскина, очень, кстати, советую прочитать его книгу The Humane Interface, где он, помимо прочего, рассказывает и о ZUI (6-2 Better Navigation: ZoomWorld). Вот еще хорошая статья про него, там изложены основные идеи книги.
ChronoZoom (2012)
«An infinite canvas in time» — визуализация хронологии событий, позволяющая изучать историю на любых отрезках времени, от миллиардов лет до одного дня. Создан несколькими университетами (в том числе МГУ) и Microsoft Research, особенно интересен тем, что реализован на HTML5. Подробнее о проекте.
Zet Universe
Это средство для визуальной организации и поиска информации, где можно создать сколько угодно «бесконечных рабочих столов» — пространств. Контент в них – файлы, веб-страницы, и прочее — организовывается в «визуальные кластеры», превращая пространства в своеобразное подобие обычного стола. Пространства можно расшаривать с другими пользователями через Dropbox. Сейчас активно работают над бетой. Часть команды Zet Universe работала в Microsoft над созданием видео Productivity Future Vision (2009).
Раньше и я хотел сделать нечто подобное, но с чёткой иерархией папок — древовидный файловый маппер с семантическим зумом — интерактивное демо (нужен скролл). Но вскоре я придумал другой интерфейс и решил что с ним можно сделать нечто более интересное и актуальное.
Меня всегда привлекали файловый менеджмент и веб-публикация, новый интерфейс позволил объединить их — представить информацию одинаково для создателя и потребителя контента. Я не верю, что «файлы умрут», по крайней мере в обозримом будущем. Я использовал виды зума, упомянутые в этой статье, и добавил zoom peek при навигации — появление контента внутри папки. Хотя по большому счёту это файловый менеджер (десктопный, мобильный, облачный), покажу функционирование зума на примере веб-приложения публикации фото, так интереснее.
Интерфейс Monolith — интерактивное демо (нужен скролл)
При этом сохраняется привычное взаимодействие, работа почти как в Explorer — контекстное меню, drag'n'drop, дублирование «фрактальной навигации» кликами, пан как в Google Maps, адресная строка (омнибокс). В демке этого нет, но соль в том, что не важно, сколько элементов на экране — 5, 200 или 1000 — картинки все равно различимы, по крайней мере на мониторе, и не тормозит даже на мобильном. Плитки не обязательно должны быть квадратными — фотки гораздо удобнее просматривать когда их пропорции сохранены.
Любая система хранения и каталогизации информации имеет тенденцию в процессе использования превращаться в свалку, и найти что-либо логически становится довольно сложно. C использованием этого интерфейса плоский (flat view) маппинг — когда нет вложенности и весь контент виден сразу — может быть использован как инструмент для уборки, так и как инструмент, позволяющий не прибираться вообще. Кстати, в обычных интерфейсах тоже существует плоский вид, например в Directory Opus, но там дерево слишком растягивается в высоту.
Можно сделать зависимость размера или цвета плиток от размера файлов или папок, можно пойти дальше и замаппить так корень диска — сразу будет видно как расходуется место. Или заменить рабочий стол — всё будет под рукой. Но вернусь к реальности.
Apple реализовали преимущества маппинга, зума и абстракции данных в фотогалерее iOS 7 (2013):
И это действительно удобно, жаль для Andriod такого нет (UPD: есть!). Зум присутствует и в некоторых других приложениях
Заключение
Зум появился в массовом продукте, что подтверждает его актуальность и полезность — ждите дальнейшего развития ZUI, особенно на тач устройствах. Но надеюсь и не только на тач — ZUI позволяет реализовать одинаковые принципы управления на всех платформах, на устройствах с разным разрешением и разным соотношением сторон экрана.
Уверен, описанные выше преимущества — хороший повод задуматься над использованием зума в своём приложении. Если сомневаетесь, можете почитать философию ZUI от автора Eagle Mode — он рассмотрел там плюсы и минусы.
PS: В интерфейс слово «зум» вероятно пришло из фотографии. В русском языке, наверное, более подходящим будет слово «масштабирование», но мне оно не нравится, да и представьте, насколько длиннее была бы эта статья!
Ещё немного особого зума, на сладкое
