[HN Gopher] Evolving the Infinite Canvas
       ___________________________________________________________________
        
       Evolving the Infinite Canvas
        
       Author : pps
       Score  : 66 points
       Date   : 2023-12-26 17:49 UTC (1 days ago)
        
 (HTM) web link (wattenberger.com)
 (TXT) w3m dump (wattenberger.com)
        
       | hyperhello wrote:
       | I was impressed by the way the windows are page-local but the
       | content appears as though it were screen local. I also dug the
       | auto non-overlapping tiles.
       | 
       | I think it needs a more guaranteed high frame rate and some
       | polish for me to judge whether it's actually better for uses I
       | make up, but it's really innovative.
        
         | Waterluvian wrote:
         | I'm thinking the canvas is just given a fixed position and a
         | low z-index and then a "normal" webpage can be made with areas
         | that have a zero opacity element (or no element but then layout
         | is harder).
         | 
         | It feels super impressive but the more I think of it, I think
         | the trick is actually quite simple. I wonder what edge cases
         | I'm not thinking about.
        
       | kleer001 wrote:
       | Ok, but why? Please excuse my ignorance, it's well earned. I
       | haven't been in the web design space for over 20 years. So,
       | seriously, like, what is this for?
       | 
       | Just so we can? For presenting a specific kind of information?
        
         | stuartjohnson12 wrote:
         | It's so that the topology of the design system can mirror the
         | topology of the information being stored. Top-to-bottom and
         | left-to-right works great for information with a linear,
         | generally one-way directional flow.
         | 
         | But how do you show that certain concepts are similar and
         | related? Wiki informational design says that you should do that
         | by splitting things up into atomic concepts that individually
         | have a linear informational flow and using hyperlinks to
         | connect them. You might group things into common categories.
         | 
         | Links can show a connection, but not how close those
         | connections are or any correlations. The idea of whiteboarding
         | is that you're not limited to segmented linear information
         | flows, and you can represent your thoughts visually.
         | 
         | The "infinite canvas" is to a whiteboard what a wiki is to a
         | filing cabinet of notecards. Or what a plotted graph is to a
         | table of numbers.
        
         | DecoPerson wrote:
         | This appears to be exploration, to see if we can find new
         | useful ways to display and interact with information.
         | 
         | There have been many, many experiments in the past. Design
         | features that work (such as listy designs, tabular designs, 2D
         | designs, non-overlapping designs, etc etc) have stuck around.
         | By "work", I mean that they are useful, practical, easy to
         | understand, easy to implement, non-patented, etc etc.
         | 
         | If we stop experimenting, then we will stop finding new useful
         | design features and UI design will stagnate.
         | 
         | Yes, current UI design is "good enough." But where's the fun in
         | that? Whatever you believe the purpose of life is,
         | experimenting and furthering humanity's knowledge is typically
         | considered a good thing.
         | 
         | I think that this particular experiment is useful, and that
         | there is potential here for more efficient note-taking and
         | knowledge sorting (which could, in the future, potentially
         | benefit everyone). Imagine an author writing plot point ideas
         | into an infinite canvas, then assembling them on the fly. And
         | then they bring those points into a second canvas, where they
         | group them by character. Then they can freely move the plot
         | points between characters, or leave them to the side, not
         | assigned to any character but there, on the "plot points by
         | character" canvas, ready to be dragged on. But then if they're
         | looking at the plot points on the "plot points by time" canvas,
         | and they set a plot point's character to "X", then it will
         | automatically move that plot point into the region of character
         | "X" on the "plot points by character" canvas.
         | 
         | That's just one example. I can imagine more, such as a
         | materials researcher trying to design an industrial process.
         | They could be working through potential chemical products,
         | trying to decide which to use at a particular point of the
         | process. This freeform canvas would let them keep a card for
         | each potential choice right next to the place in the process
         | that it would be used. That proximity of information could be
         | useful.
         | 
         | I've found that Blueprints (a 2D scripting language) in Unreal
         | Engine get really messy, and you're constantly neatening your
         | programs. This particular experiment, with its anti-overlap and
         | automatic grouping features, might lead to good changes in
         | Blueprints in UE that make them neater by nature.
        
       | nicksergeant wrote:
       | Infinite canvases like Figma give me infinite anxiety. There's no
       | way to easily and sensibly hyperlink to specific areas/contexts
       | within the canvas, and it's really difficult to find things
       | unless you know exactly where to look.
       | 
       | It's like the manifestation of a cluttered desk of papers in the
       | digital world - exactly what we tried to avoid when building new
       | digital interfaces for so many decades.
       | 
       | Edit: there is a way to hyperlink directly to sections in Figma
       | (see comments below), but I've never been a recipient of them
       | :lol:
        
         | cush wrote:
         | > There's no way to easily and sensibly hyperlink to specific
         | areas/contexts within the canvas
         | 
         | There are absolutely ways to hyperlink to specific areas and
         | contexts within the canvas. It's one of the core features
         | that's always been part of Figma. For example, click on
         | anything on the canvas and you'll observe the URL change. You
         | can share that URL
        
           | nicksergeant wrote:
           | That does indeed work! Fascinating.
           | 
           | Now I'm endlessly curious as to why I've never gotten a
           | correctly located link from many designers in several orgs.
           | It is, however, sufficiently buried that I think most
           | designers just copy the browser URL and call it a day.
           | 
           | I honestly can't remember a single time I've gotten a
           | targeted Figma link like this from a designer.
        
             | kamikaz1k wrote:
             | Because people will delete and create new modes as they
             | iterate so those hash links become stale. So while the
             | person who replied to you is technically correct,
             | effectively it is still very unstable.
        
               | pfranz wrote:
               | Similarly, on pages like GitLab you can link to specific
               | line(s) of code in a file...but it often is the head of
               | that branch. The URL will resolve in the future, but its
               | pretty common that the chunk of code has moved.
               | 
               | I wish it was easy to grab a URL for that specific
               | version, with a banner at the top saying it's not the
               | newest version of the code (something I sometimes see
               | with documentation). I don't see why Figma couldn't do
               | this, too.
        
               | Towaway69 wrote:
               | > Similarly, on pages like GitLab you can link to
               | specific line(s) of code in a file...but it often is the
               | head of that branch. The URL will resolve in the future,
               | but its pretty common that the chunk of code has moved.
               | 
               | On GitHub you can hit the 'y' key[1] and it will add the
               | revision into the URL.
               | 
               | GitLab will most probably have something similar.
               | 
               | [1]=https://docs.github.com/en/get-
               | started/accessibility/keyboar...
        
             | andsoitis wrote:
             | To be fair, you didn't figure it out either so one could
             | consider this a feature discoverability issue.
             | 
             | I didn't know either, but plan to share with my coworkers!
        
           | nicksergeant wrote:
           | > For example, click on anything on the canvas and you'll
           | observe the URL change.
           | 
           | I think this might be the problem. The URL doesn't change as
           | you move around, so folks just copy the URL at the point in
           | time of whatever they're staring at, and end up sharing
           | whatever area was previously focused / clicked on,
        
             | ypeterholmes wrote:
             | The feature is pretty easy to use- at what point do we just
             | accept that some people shouldn't be using the tool? If we
             | always design for the least capable user, we will be
             | unnecessarily handcuffing ourselves.
        
       | teucris wrote:
       | I used to be an infinite canvas fanatic, even building products
       | that leveraged the concept, but ultimately I've abandoned it.
       | There are too many issues with having an infinite canvas that
       | make it untenable. This isn't to say they should never be used,
       | but rather that I believe there are good reasons why they aren't
       | used more.
       | 
       | 1. Ambiguous structure - users cannot easily glean the structure
       | of content from the layout alone. For instance, on an arbitrary
       | canvas, you don't know if two things are close to each other to
       | indicate a relation, or just for aesthetic reasons. This can be
       | mitigated by ensuring relations are exposed in other ways, but
       | unless everyone is _super_ strict about including an underlying
       | structure, this will always be an issue. Also, without a
       | representation of the underlying structure, an infinite canvas is
       | fundamentally inaccessible.
       | 
       | 2. Navigation - finding all possible content on a canvas is hard.
       | This can be mitigated with something like a mini-map, but frankly
       | sticking to one dimension of "infiniteness", eg scrolling, has
       | shown to be the most effective for the average person to handle.
       | 
       | 3. Implicit, but heterogeneous, affordances - when you have an
       | infinite canvas, there are many more actions needed eg. pan,
       | scroll, select, possibly lasso, possibly zoom...all of which need
       | a mouse movement or keybinding or touch gesture, depending on the
       | device and context. These all need to be discovered, or taught,
       | and are often initially hidden from the view. This makes the
       | learning curve far steeper, especially when users are accessing
       | content from many different types of devices.
       | 
       | 4. Responsiveness - it's hard enough to make a paragraph of text
       | easily viewed on multiple screen sizes, let alone a complex
       | layout of objects with relations possibly conveyed spatially.
       | Infinite canvases are difficult to reformat to get a good,
       | legible layout on a screen other than the one the creator used.
       | There are workarounds, but they often lose information
       | unintentionally by repositioning items in ways the author didn't
       | anticipate.
        
         | amelius wrote:
         | Counterpoint: spreadsheets are Infinite Canvases, and are quite
         | successful ...
        
           | defart wrote:
           | You are usually not dropped in the middle of a spreadsheet
           | with infinite rows/cols in each direction. You start at
           | topleft which makes navigating much less 'exploratory'
        
           | evnc wrote:
           | This is an interesting point, because they are kinda infinite
           | spaces but they also impose a _structure_ on the space, which
           | I would assert is a part of why they are so successful, in
           | contrast to the  "infinite structureless blank paper" that
           | the OP is talking about.
           | 
           | The trick is getting the amount of structure just right, not
           | too much to be too restrictive and not so little that users
           | are lost in the way the person you're replying to describes.
        
             | rchaud wrote:
             | Infinite canvases require panning and zooming with the
             | mouse and tracking motion visually. A lot of users probably
             | don't like the cognitive load of that compared to other
             | types of apps.
             | 
             | Excel handles this better because navigating around a large
             | sheet feels more like "snapping" as there's no UI motion as
             | your view zooms in and out. Plus with shortcuts like CTRL +
             | rArrow, which immediately snaps your selected cell to the
             | rightmost end of the current range of cells, the infinite
             | canvas feels downright zippy. Excel sheets also have tabs
             | that signal to the users about how they can split up their
             | data instead of filling up Sheet1 with every scenario.
             | Infinite canvases make you create a new file.
        
       | dimal wrote:
       | I hated this post up until the last section, then it won me over
       | at the end. None of the infinite canvas interfaces look like
       | anything more than a pile to me. I see no structure at all. If I
       | was forced to use an interface like this for anything crucial, I
       | couldn't function.
       | 
       | But the last section that shows the same information presented in
       | different formats won me over. This is more of what I'd like to
       | see. Let people who think spacially work spacially if that's what
       | works for them. Let the people that think however it is that I
       | think work in whatever format the fits in their brain best.
       | Embrace neurodiversity.
        
       | smokel wrote:
       | One nice implementation of an infinite canvas is Kinopio [1]. Not
       | affiliated, just a fan.
       | 
       | [1] https://kinopio.club/
        
       ___________________________________________________________________
       (page generated 2023-12-27 23:00 UTC)