5 ms·
Zooming User Interface (ZUI)
- aappleby 2y agoI made a proof-of-concept text viewer with this in mind - https://github.com/aappleby/wideboard https://github.com/aappleby/wideboard
- skulk 2y agoI wonder if instead of shrinking the text geometrically when zoomed out, you could shrink it semantically (with a LLM or something similar) as in the wikipedia image ZUI example. Of course this would require an enormous amount of pre-processing to get multiple levels of zoom shrinkage.
- postepowanieadm 2y agoThat's a really cool idea!
- bradmcnally 2y agoThere is a great demo of this in Sensecape. https://youtu.be/MIfhunAwZew?t=165 https://youtu.be/MIfhunAwZew?t=165
- solardev 2y agoThat's really cool! How does it do the idea summarization?
- peddling-brink 2y agoJust as much as a map. I did something similar using a local LLM to summarize paragraphs. Using a public turbo model or even something local would be very doable.
- hateful 2y agoI like this idea, but it should have a limit - because every time I zoom in to read the name of a road on a map and the text resizes to a smaller size for infinity I wish it didn't.
- solardev 2y agoYou probably know this, but in Google Maps at least, you can use browser zoom (ctrl/cmd +/-) to change the size of labels without zooming into the actual map. ------ Speaking of maps, I got to work a fun zoom project a few years ago: https://map.fieldmuseum.org/ https://map.fieldmuseum.org/ We used https://openlayers.org/ https://openlayers.org/ and thought long and hard about how to best handle zooming and variable levels of information density & visual hierarchy. If you zoom all the way out, we just highlight where the building is relative to the surroundings. As you start to zoom in, we start to highlight major exhibitions and entrances. Then as you zoom in more, we start showing recommended paths, smaller exhibitions, etc. The label sizes try to scale up and down at each level, smoothly, in order to balance readability and density. Eventually you can reach the max zoom level and the labels will just grow bigger and bigger, but the SVGs dynamically shrink so they remain pictograms and not just contextless-lines. Then if you keep going, you eventually find microscopic easter eggs :) The code is pretty jank (and abandoned), but it's FOSS vanilla JS/HTML/CSS, and the only dependency is on OpenLayers: https://github.com/arcataroger/openlayers_indoor_map https://github.com/arcataroger/openlayers_indoor_map
- Solvency 2y agojust because this zooms doesn't mean you made a ZUI. the spirit of a ZUI is change of information/density/etc at different levels of zoom. like google maps.
- hateful 2y agoOr that infinite scroll game of life that was on here a few weeks ago! more density, same information!
- tomthe 2y agoWait, how is this possible?? I tried to visualize a few tens of MB of text in the browser [1] on a canvas and it gets really choppy if I don't optimize it by not showing stuff that can't be read. Impressive that it can handle gigabytes of text! [1]: https://tomthe.github.io/hackmap/ https://tomthe.github.io/hackmap/
- wongarsu 2y agoI'd wager by making the requirements simpler. Wideboard is rendering monospace, so every document is made up of of 8x16px cells, and you just have to decide which glyph to render in each. From a quick skim of the source code this is mostly precalulated. Basically each document is rendered as one rectange, where the shader converts the current position to the row/column of the character to be rendered. There is one texture that holds the length and starting offset of each line (using one pixel per line), and another texture that for each offset tells you which glyph to render (using one pixel per glyp). The third texture is the glyph map that holds the actual glpyhs (a simple 256x256 texture of all supported characters). The last texture is static, the other two are calculated once as the document is loaded, and there is a neat shader that uses all three textures to render the actual document view. Since the shader is sampled at fewer points if the rectangle takes up fewer pixels on your screen this works out well for zoomed out views.
- azinman2 2y agoHint: it's a dead end people! Been around forever as an idea, lots of academic studies and some industry apps. Doesn't really work and has never taken off despite many attempts. Many reasons for this, including the real world doesn't include zoom at multiple orders of magnitude, going in all planes is harder than a linear list for people to scan, semantics in 2D isn't something that's easy to grasp cognitively unless you specifically arranged things that way (which isn't the case for this kind of software, and even then you can lose what's happening / adjusting everything to account for something new isn't well supported), and not many use cases where this is broadly useful (especially compared to other tried-and-true approaches).
- arrakeen 2y agoi don't know, miro and figma seem to be pretty popular applications using a ZUI
- ramesh31 2y agoFigma is popular in spite of this. It's my number one frustration. Actually being able to link someone to a specific view is nigh impossible to do consistently.
- solardev 2y agoCan't you link them to a specific frame? I used to use that feature all the time. Did they remove it? https://forum.figma.com/t/link-to-selected-frame-should-be-restored-to-the-share-dialog/27280 https://forum.figma.com/t/link-to-selected-frame-should-be-r...
- deleted 2y ago[deleted]
- ramesh31 2y ago>Hint: it's a dead end people! Been around forever as an idea, lots of academic studies and some industry apps. Indeed. For a concrete example see Ted Nelson's "Zigzag" UI concept: https://en.m.wikipedia.org/wiki/ZigZag_(software) https://en.m.wikipedia.org/wiki/ZigZag_(software) https://www.youtube.com/watch?v=WEj9vqVvHPc https://www.youtube.com/watch?v=WEj9vqVvHPc tl;dr: a lot of good and interesting ideas that should never actually be implemented.
- harporoeder 2y agoWhile I'm not sure I would claim it is practical, playing around with eaglemode is fun. It is available in the AUR among other places 1. https://eaglemode.sourceforge.net/screenshots.html https://eaglemode.sourceforge.net/screenshots.html 2. https://aur.archlinux.org/packages/eaglemode https://aur.archlinux.org/packages/eaglemode
- benpm 2y agoit's a novelty but a fun novelty. check out Eagle Mode
- dhc02 2y agoReminds me of Prezi. Do people still use Prezi?
- czscout 2y agoFirst thing that came to mind. I remember in school at least 10 years ago we used it because a teacher liked it. Most of us just used it as a Powerpoint alternative, but a few kids definitely harnessed the extra power available over a generic slideshow. I remember being really impressed at the creative presentations a few people made with it. Fun times.
- orthoxerox 2y agoI remember it being "the future of slideshows" back in 2012, and then the hype died.
- dhc02 2y agoI made a resume with Prezi that landed me a pretty great job, and then never used it again. It was really great for that one use case: something the recipient could click through and continuously be surprised by the complexity of without having to know the tool. Click. Wow! It got bigger. Click. Woah! It got bigger and rotated!
- niutech 2y agoDo you remember Microsoft Deep Zoom and Deep Earth? https://en.wikipedia.org/wiki/Deep_Zoom https://en.wikipedia.org/wiki/Deep_Zoom
- solardev 2y agoThis seems like a very sensible (and common) UI paradigm for mapping applications with a variable area of concern. Deep Zoom was pretty revolutionary for its time, but these days we just take it for granted in Google Earth/Maps, being able to zoom all the way from space into street view, seamlessly, with raster and vector tiles effortlessly combined and streamed. It's really pretty amazing if you think about it, IMO. It's pretty common in variable-scale video games, too. Like Dyson Sphere Project, where you can zoom out from the ground level view of buildings to a solar system and star clusters to a galaxy: https://youtu.be/kNmZTISiH40?si=TfvRoRjHMLSWHF4X&t=36 https://youtu.be/kNmZTISiH40?si=TfvRoRjHMLSWHF4X&t=36 (because you eventually need to collect and transport resources between star systems)
- gasi 2y agoTo make images zoomable, check out https://zoomhub.net https://zoomhub.net Can be extended to full ZUIs, e.g. https://zoomhub.net/showcase/ecommerce/watches https://zoomhub.net/showcase/ecommerce/watches (desktop preferred)
- RyJones 2y agoI worked for a Microsoft spin out in 2007 called ZenZui, which provided a ZUI for Windows Mobile devices. Then the iPhone was released!
- Cockbrand 2y agoWasn't this pretty much the UI/UX for microfiche, when it was still a thing?
- tripdout 2y agoThere's a Wayland compositor called Newm [0] that uses a similar approach [1]. 0: https://github.com/jbuchermn/newm?tab=readme-ov-file https://github.com/jbuchermn/newm?tab=readme-ov-file 1: https://www.youtube.com/watch?v=otMEC03ie0g https://www.youtube.com/watch?v=otMEC03ie0g
- whartung 2y agoNo mention of Zoomracks? https://en.wikipedia.org/wiki/Zoomracks https://en.wikipedia.org/wiki/Zoomracks Usually the go to early example of a zooming UI.
- timetraveller26 2y agoThe Oberon interface has always been intriguing to me. An infinite zoomable window manager. https://ignorethecode.net/blog/2009/04/22/oberon/ https://ignorethecode.net/blog/2009/04/22/oberon/
- runlaszlorun 2y agoHa, I just mentioned Oberon in another HN thread. I was actually reading the Oberon book last week. Wirth goes from OS to programming language to hardware to compiler in one manual. I didn't actually realize it was a zooming interface though.
- eterps 2y agoThe Oberon version in Wirth's book doesn't have a zooming interface. But the variant of Oberon called 'Bluebottle' does.
- solardev 2y agoBrings back bad memories of Miro. It's that sort of ZUI that encourages every middle manager to spend hour-long meetings looking for ten cards and three wireframes across four projects, when it could've just been an email with bullet points and a screenshot.
- fgblanch 2y agoI think the only proven use cases for ZUIs have been Maps, Calendars, and Photo apps (Apple Photos and Google Photos). The last two to switch between different time period views: Day->Month->Year for photos and Day>Week>Month for calendars.
- solardev 2y agoThere is maybe some room for design too (Figma), but there are many times I wish it DIDN'T do that and encouraged better frame/file organization instead. Similarly, it's too often used for (mis)organization, like in Miro or Prezi or "mind map" apps. I feel like those try to shoehorn information into Sherlock-like "mind palaces" in a way that only makes sense for the creator but are inscrutable to everyone else and just makes information harder to find later on. They always lead to some sort of pixel-hunting where the presenter zooms out and in, out and in, out and in, wasting time on navigation and placefinding instead of information dissemination. ------- On the other hand, it CAN be useful for some visualizations, like taxonomy: https://itol.embl.de/itol.cgi https://itol.embl.de/itol.cgi or https://www.onezoom.org/life.html https://www.onezoom.org/life.html "Drill down for details" like in disk space analysis: https://www.youtube.com/watch?v=BKClylmlv3w&t=1s https://www.youtube.com/watch?v=BKClylmlv3w&t=1s (or similar one in D3: https://observablehq.com/@d3/zoomable-sunburst https://observablehq.com/@d3/zoomable-sunburst) Treemaps: https://observablehq.com/@d3/zoomable-treemap https://observablehq.com/@d3/zoomable-treemap I think the overall point is some types of hierarchical information naturally lend themselves to "drill down" type UIs more than others. When you have levels of detail you don't need to see at first glance, drilling/zooming is awesome. When you have a bunch of things of equal hierarchy, presenting them in a big flat pile isn't any better in the virtual world than in the real world... it's the digital equivalent of 10,000 sticky notes on a wall.
- DonHopkins 2y agoTree-Maps: A Space-Filling Approach to the Visualization of Hierarchical Information Structures: https://www.cs.umd.edu/~ben/papers/Johnson1991Tree.pdf https://www.cs.umd.edu/~ben/papers/Johnson1991Tree.pdf HCIL Archive: Treemap Home Page: https://www.cs.umd.edu/projects/hcil/treemap/ https://www.cs.umd.edu/projects/hcil/treemap/ How Ben Shneiderman’s Treemaps Found Place In The Museum Of Modern Art: https://analyticsindiamag.com/how-ben-shneidermans-treemaps-found-place-in-the-museum-of-modern-art/ https://analyticsindiamag.com/how-ben-shneidermans-treemaps-... >Ben Shneiderman was inspired by the 1960's 'Op Art' and the exhibits that he came across at the Museum of Modern Art in New York. Op Art or Optical art is a form of kinetic art related to geometric designs that create movement in the eyes. Ben Shneiderman's Treemap Art: https://treemapart.wordpress.com/ https://treemapart.wordpress.com/ >This site features draft designs and full views of the Treemap Art project. View more about the exhibitions. >By Ben Shneiderman >Although I conceived treemaps for purely functional purposes (understanding the allocation of space on a hard drive), I was always aware that there were appealing aesthetic aspects to treemaps. Maybe my experiences with OP-ART movements of the 60s & 70s gave me the idea that a treemap might become a work of art. That idea was revived in 2013 by way of my contacts with Manuel Lima who produced a beautiful coffee-table book on the history of trees that has several chapters on treemaps and their variations. >I believe that there are at least four aesthetic aspects of treemaps: >1. layout design (slice-and-dice, squarified, ordered, strip, etc.), >2. color palette (muted, bold, sequential, divergent, rainbow, etc.), and, >3. aspect ratio of the entire image (square, golden ratio, wide, tall, etc.). >4. prominence of borders for each region, each hierarchy level, and the surrounding box Ben Shneiderman: Every AlgoRiThm has ART in it: Treemap Art Project: https://www.youtube.com/watch?v=4LW4m6BdQXI https://www.youtube.com/watch?v=4LW4m6BdQXI >Ben Shneiderman, distinguished university professor, University of Maryland, College Park and National Academy of Engineering member, spoke at the October 16, 2014 DC Art Science Evening Rendezvous (DASER). Ben Shneiderman described the invention of treemaps and showed examples of its usage. He then turned to the aesthetics of treemaps, which led him to create the “Every AlgoRiThm has ART in it: Treemap Art Project” exhibit on view in the Keck Center first floor galleries (www.cpnas.org). He demonstrated how users of the free treemap application can generate their own artworks, without programming. The Shape of PSIBER Space: PostScript Interactive Bug Eradication Routines — Don Hopkins — October 1989 (a paper I wrote when I worked with Ben Shneiderman at his University of Maryland Human Computer Interaction Lab): https://donhopkins.medium.com/the-shape-of-psiber-space-october-1989-19e2dfa4d91e https://donhopkins.medium.com/the-shape-of-psiber-space-octo... >The Pseudo Scientific Visualizer >Darkness fell in from every side, a sphere of singing black, pressure on the extended crystal nerves of the universe of data he had nearly become… And when he was nothing, compressed at the heart of all that dark, there came a point where the dark could be no more, and something tore. The Kuang program spurted from tarnished cloud, Case’s consciousness divided like beads of mercury, arcing above an endless beach the color of the dark silver clouds. His vision was spherical, as though a single retina lined the inner surface of a globe that contained all things, if all things could be counted. >[Gibson, Neuromancer] >The Pseudo Scientific Visualizer is the object browser for the other half of your brain, a fish-eye lens for the macroscopic examination of data. It can display arbitrarily large, arbitrarily deep structures, in a fixed amount of space. It shows form, texture, density, depth, fan out, and complexity.
- DonHopkins 2y agoTodepond's "Screens in Screens" explores infinite zoomability! https://www.youtube.com/watch?v=Q4OIcwt8vcE https://www.youtube.com/watch?v=Q4OIcwt8vcE "Another thing I know about screens is, you can go into them as far as you want forever. And you can come out of them too, but you might not end up in the same place that you started. You might get lost. Or you might not."
- rifty 2y agoThis distinction feels mostly a metaphoric and superficial difference in practice if the iOS home screen is considered a zooming UI because of how it visually presents things. Interfacing-wise it doesn't feel like a significant difference if I consider the app switcher as an infinitely pannable canvas of apps I zoom into, or a stack of apps I scroll through and then open. It feels to me, instead of exploring different interfacing experiences in terms of zooming/non-zooming it might be more useful to think along the lines of structured/unstructured, contained/uncontained, or gestures/buttons for example.