Zooming user interface

From HandWiki
Short description: Graphical interface allowing for image scaling
Example of a ZUI

In computing, a zooming user interface or zoomable user interface (ZUI, pronounced zoo-ee) is a type of graphical user interface (GUI) on which users can change the scale of the viewed area in order to see more detail or less, and browse through different documents. Information elements appear directly on an infinite virtual desktop (usually created using vector graphics), instead of in windows. Users can pan across the virtual surface in two dimensions and zoom into objects of interest. For example, as the user zooms into a text object, it may be represented as a small dot, then a page thumbnail, then a full-size page, and finally a magnified view of the page.

ZUIs use zooming as the main metaphor for browsing through hyperlinked or multivariate information. Objects present inside a zoomed page can, in turn, be zoomed themselves to reveal further detail, allowing for recursive nesting and an arbitrary level of zoom.

Researchers have described the ZUI paradigm as a Post-WIMP interface and potential successor to the traditional windowing GUI.[1]

The term ZUI was coined by Franklin Servan-Schreiber while working at Sony Research Laboratories, in partnership with Ben Bederson and Ken Perlin of New York University.[2]

History

In 1962, Ivan Sutherland presented the first program for zooming through and creating graphical structures with constraints and instancing, on a CRT in his Sketchpad program.[3]

A more general interface was developed by the Architecture Machine Group at MIT in the 1970s. Hand tracking, touchscreen, joystick, and voice control were employed to control an infinite plane of projects, documents, contacts, video, and interactive programs. One of the instances of this project was called Spatial Dataland.[4]


The longest running effort to create a ZUI has been the Pad++ project begun by Ken Perlin, Jim Hollan, and Ben Bederson at New York University[5][1] and continued at the University of New Mexico under Hollan's direction. After Pad++, Bederson developed Jazz, then Piccolo,[6] and now Piccolo2D[7] at the University of Maryland, College Park, which is maintained in Java and C#.

More recent ZUI efforts include Archy by the late Jef Raskin, ZVTM developed at INRIA (which uses the Sigma lens[8] technique),[9] and the simple ZUI of the Squeak Smalltalk programming environment and language.


In 2002, Pieter Muller extended the Oberon System with a zooming user interface and named it Active Object System (AOS).[10] In 2005, due to copyright issues, it was renamed to Bluebottle, and in 2008, to A2.


In 2006, Hillcrest Labs introduced the HoME television navigation system, the first graphical, zooming interface for television.[11]


Apple's iPhone (premiered June 2007) uses a stylized form of ZUI, in which panning and zooming are performed through a touch user interface (TUI). A more fully realized ZUI is present in the iOS home screen (as of iOS 7), with zooming from the home screen into folders and, finally, into apps. The photo app zooms out from a single photo to moments, collections, and years, and similarly, the calendar app zooms out from day, month, and year views.[12] It is not a full ZUI implementation since these operations are applied to bounded spaces (such as web pages or photos) and have a limited range of zooming and panning.

From 2008 to 2010, GNOME Shell used a zooming user interface for virtual workspaces management.[13] This ZUI was eventually replaced by a different, scrolling-based design. Prezi, a web-based presentation tool built on a single zoomable canvas, launched in 2009. Rather than build slides, users place content on an open surface and define a sequence of frames that the software navigates by panning, zooming, and rotating during playback. It was the first ZUI to reach mainstream adoption, surpassing 50 million users by 2014.[14][15]

Stack Zooming, launched in 2010, was designed to navigate one-dimensional datasets such as time series by combining zooming and layering to keep the full dataset visible.[16] In 2012, PolyZoom extended the Stack Zooming concept to two-dimensional spaces.[17]


In 2017, bigpictu.re offered an infinite (pan and zoom) notepad as a web application based on one of the first ZUI open-source libraries.[18]

In 2017, Zircle UI was released. It is an open-source UI library that uses zoomable navigation and circular shapes.[19]

Types of zooming

Zooming interfaces have implemented several types of zooming behaviors, including:

  • Geometric zooming scales objects in direct proportion to the zoom level,[1] and is the most common zoom method in zoomable user interfaces.[20]
  • Semantic zooming changes the representation of an object based on scale, rather than simply resizing it.[5][21] In Pad's multiscale calendar, zooming out shows a grid of years while zooming in reveals individual days;[5] in Pad++, a digital clock shows hours and minutes at normal size, seconds when zoomed in, and just the hour when zoomed out.[1]
  • Fisheye zooming preserves the area of focus in full detail while compressing surrounding elements more with distance.[22] Furnas demonstrated the technique using a botanical taxonomy, in which nodes far from the current focus were removed entirely from the display when their degree of interest fell below a threshold.[22]
    • Logical fisheye zooming shows the focus in full detail and filters everything else by a degree-of-interest score based on structural distance rather than screen position.[22][23] Implemented in Furnas's C program viewer, which shows the current line in full detail while removing distant code below the degree-of-interest threshold.[22]
    • Graphical fisheye zooming distorts coordinate space so nearby elements enlarge and distant ones compress, with each element's pre-assigned importance also shaping how much space and detail it receives.[24] Implemented in Sarkar & Brown's interactive graph browser.[24]
    • Intelligent zooming combines fisheye zooming with adaptive presentation; the system determines the most appropriate display format for each element.[25] Implemented in Bartram et al.'s network supervisory control interface for telecommunications.[25]
    • Semantic fisheye zooming extends fisheye views by using semantic distance metrics, preserving the area of focus in full detail and de-emphasizing other elements based on how closely each element relates to the current task, rather than by physical distance on-screen.[26] Implemented in a tabular flight itinerary browser,[26] and an experimental VUE-based concept map interface.[27]
  • Topological zooming uses graph structure to calibrate detail. The focus node renders at full resolution; everything farther out is replaced with coarser, precomputed approximations of the graph.[28] Implemented in Gansner et al.'s topological zooming tool for visualizing large graphs.[28]

See also

References

  1. ↑ 1.0 1.1 1.2 1.3 Bederson, Benjamin B.; Hollan, James D.; Perlin, Ken; Meyer, Jon; Bacon, David; Furnas, George (March 1996). "Pad++: A zoomable graphical sketchpad for exploring alternate interface physics". Journal of Visual Languages and Computing 7 (1): 3–32. doi:10.1006/jvlc.1996.0002. 
  2. ↑ Bederson, Benjamin B. (2011). "The promise of zoomable user interfaces". Behaviour & Information Technology 30 (6): 853–866. doi:10.1080/0144929X.2011.586724. 
  3. ↑ Sutherland, Ivan Edward (September 2003), Sketchpad: A man-machine graphical communication system, ISSN 1476-2986, http://www.cl.cam.ac.uk/techreports/UCAM-CL-TR-574.pdf 
  4. ↑ Dataland: the MIT's '70s media room concept that influenced the Mac
  5. ↑ 5.0 5.1 5.2 Perlin, Ken; Fox, David (1993). "Pad: An alternative approach to the computer interface". pp. 57–64. doi:10.1145/166117.166125. 
  6. ↑ Piccolo (formerly Jazz): ZUI toolkit for Java and C# (no longer actively maintained)
  7. ↑ Piccolo2D: Piccolo's successor.
  8. ↑ Pietriga, Emmanuel; Appert, Caroline (2008). "Sigma lenses: focus-context transitions combining space, time and translucence". Proceedings of the twenty-sixth annual SIGCHI conference on Human factors in computing systems. doi:10.1145/1357054.1357264. 
  9. ↑ ZVTM
  10. ↑ Muller, Pieter Johannes (2002). The active object system design and multiprocessor implementation (PDF) (PhD). Swiss Federal Institute of Technology, Zürich (ETH Zurich). Archived from the original (PDF) on 2016-05-28. Retrieved 2021-02-01.
  11. ↑ Derene, Glen (2007). "Wii 2.0: Loop Remote Lets You Click by Gesture". Popular Mechanics. http://www.popularmechanics.com/video/wii-20-loop-remote-lets-your-click-by-gesture-video-447868210. Retrieved November 11, 2011. 
  12. ↑ "iOS 7". https://www.apple.com/ios/ios7/. 
  13. ↑ "GNOME Shell, 2010-02-20 build: a Zoomable User Interface". 2010-02-20. https://www.youtube.com/watch?v=NN4lW_eaeO8. 
  14. ↑ Anthes, Gary (1 December 2012). "Zoom In, Zoom Out". https://cacm.acm.org/news/zoom-in-zoom-out/. 
  15. ↑ Butcher, Mike (19 November 2014). "Prezi Secures $57M Growth Round from Spectrum and Accel, Passes 50M Users". TechCrunch. https://techcrunch.com/2014/11/19/prezi-secures-57m-growth-round-from-spectrum-and-accel-passes-50m-users/. 
  16. ↑ Javed, Waqas; Elmqvist, Niklas (2010). "Stack zooming for multi-focus interaction in time-series data visualization". pp. 33–40. doi:10.1109/PACIFICVIS.2010.5429613. 
  17. ↑ Javed, Waqas; Ghani, Sohaib; Elmqvist, Niklas (2012). "PolyZoom: Multiscale and multifocus exploration in 2D visual spaces". doi:10.1145/2207676.2207716. 
  18. ↑ "bigpicture.js, a library that allows infinite panning and infinite zooming in HTML pages". 2015. https://github.com/josephernest/bigpicture.js. 
  19. ↑ "Zircle UI: A frontend library to develop zoomable user interfaces". 2017–2021. https://zircleui.github.io/docs/. 
  20. ↑ Hornbæk, Kasper; Bederson, Benjamin B.; Plaisant, Catherine (December 2002). "Navigation patterns and usability of zoomable user interfaces with and without an overview". ACM Transactions on Computer-Human Interaction 9 (4): 362–389. doi:10.1145/586081.586086. ISSN 1073-0516. "Most common is geometric zoom, where the scale linearly determines the apparent size of the object.". 
  21. ↑ Bright, Peter (13 September 2011). "Hands-on with Windows 8: A PC operating system for the tablet age". Ars Technica. https://arstechnica.com/microsoft/news/2011/09/hands-on-with-windows-8-a-pc-operating-system-for-the-tablet-age.ars. 
  22. ↑ 22.0 22.1 22.2 22.3 Furnas, George W. (1 April 1986). "Generalized fisheye views". pp. 16–23. doi:10.1145/22627.22342. 
  23. ↑ Sander, Georg (6 April 1999). "Graph layout for applications in compiler construction". Theoretical Computer Science 217 (2): 175–214. doi:10.1016/s0304-3975(98)00270-9. 
  24. ↑ 24.0 24.1 Sarkar, Manojit; Brown, Marc H. (1 June 1992). "Graphical fisheye views of graphs". pp. 83–91. doi:10.1145/142750.142763. 
  25. ↑ 25.0 25.1 Bartram, Lyn; Ovans, Russell; Dill, John; Dyck, Michael; Ho, Albert; Havens, William S. (1994). "Contextual assistance in user interfaces to complex, time-critical systems: The intelligent zoom". Canadian Information Processing Society. pp. 216–224. doi:10.20380/GI1994.26. 
  26. ↑ 26.0 26.1 Janecek, Paul; Pu, Pearl (22 May 2002). "A framework for designing fisheye views to support multiple semantic contexts". pp. 51–58. doi:10.1145/1556262.1556269. 
  27. ↑ Afram, Andrew J.; Briedis, John; Fujiwara, Daisuke; Jacob, Robert J. K.; Cao, Caroline G. L.; Kahle, David (October 2007). "Evaluation of Semantic Fisheye Zooming to Provide Focus+Context". Proceedings of the Human Factors and Ergonomics Society Annual Meeting 51 (5): 459–463. doi:10.1177/154193120705100507. 
  28. ↑ 28.0 28.1 Gansner, Emden R.; Koren, Yehuda; North, Stephen C. (31 August 2005). "Topological fisheye views for visualizing large graphs". IEEE Transactions on Visualization and Computer Graphics 11 (4): 457–468. doi:10.1109/TVCG.2005.66. PMID 16138555. Bibcode: 2005ITVCG..11..457G. 

Template:User interfaces

id:Prezi



Retrieved from "https://handwiki.org/wiki/index.php?title=Zooming_user_interface&oldid=4411828"