Non-Euclidean User Interfaces

I’ve been wondering for a while about when user interfaces are really going to move out of their mostly Euclidean worldview, giving us something more like this:

(click on the image to pop up a video in a new window… at least until I can figure out why WordPress isn’t letting me properly embed a Vimeo video).

The reason why I think an interface like this can be superior in many ways is that it allows you to specify an area of interest where you get full, detailed information yet you can still see the full document/page/object at the same time.  Which means that one is able to avoid the zoom(in/out)-scroll-zoom(in/out)-scroll paradigm that you often get stuck in when using, for example, the iphone.   In many ways it gives the user an analogue to the way peripheral vision works in the ‘real world’.  You have an area of interest that you can focus on but then you’re also aware of the surroundings and glean information from that as well.

(The mockup I did above just shows a single point-of-interest but it’s certainly expandable to multiple points if you’ve got a touchscreen or other such device.  And there’s all sort of little refinements you’d want to implement if you really wanted to make it swank – drag&drop from one place to another might want to keep the source area zoomed but also follow the dragged object with a zoom-region until you get to the appropriate destination. This all gets even sexier once eye-tracking becomes more available – the area you’re looking at would bubble up to full resolution but you’d still be able to quickly scan the entire page and re-target the area of interest.  Somebody get busy on this, okay?)

Of course it’s not like nobody’s started down this road – there’s plenty of what I’d consider ‘minor’ examples, including an optional behavior under OSX for the ‘Dock’ application launcher.   (Although that particular implementation is done primarily to make the target icon easier to find rather than to add information in the enlarged area).  But the general concept of having an adaptive interface that is smart about where it shows you more detail is really only in its infancy.

Following the same thoughts in a slightly different direction, I’m wondering if anybody has done a video game yet where this sort of rendering is implemented?  In such a scenario we’d have the bulk of the image presented in the normal fashion but as you get nearer to the edge of the screen you’d have a much larger field-of-view (like, out to 180degrees) compressed into a relatively small space.  Yes, you wouldn’t be able to see a whole lot of detail about what exactly is going on to your extreme right or left, but you would be able to see/sense any anomalous motion along the borders… exactly the same sort of thing your peripheral vision provides you.  Take a look at these examples:  For this first one we’ve got a normal rendering of the scene.  Looks safe enough out there.  Relax.

Now consider the same setting where we’re rendering with peripheral vision implemented.

See the guy on the left-hand side?  The one with the BIG GIANT GUN who’s getting ready to SHOOT YOU IN THE FACE…

(Click here to see a video comparison of what these look like in action).  [UPDATE, OCT 17.   VIMEO has some silly policy about not allowing ‘Video Game Footage’ on their site, so they just tookdown the videos.  So this now links over to a slightly lower-rez version on Flickr.]

Clearly our survival as a species has relied on exactly this sort of wider field-of-view awareness of our surroundings and having a game provide the same feeling (at least until we get to the point where fully immersive displays are common) would seem to be a compelling feature.

30 thoughts on “Non-Euclidean User Interfaces

  1. Really like the peripheral vision idea for games. I can see that being very useful.

    The first idea about the fish-eye kind of zoom is already available in Compiz-Fusion on Linux. I’m sure there are videos available for it. I just enabled it now and it is quite useful.

    As for embedding videos, i think you need to be in Code view rather than Visual to embed videos properly. That’s how it is with Youtube videos, anyway.

  2. Your really liked your “bubble view”. It’s a world-class product – unless it’s already patented.
    Just imagine old people with bad eye sight.

  3. @Ola – don’t know if it’s patented or not… hopefully I’ve just set it free in the wild, without restrictions. Because I want to be like the hero in a Charlie Stross novel :-)

  4. @bert – similar, yes. But magnifying glasses (like the one we put into Aperture too) have the problem of obscuring some things beneath them and they’re generally not adaptive in size/shape.

  5. I remember a friend of mine changing the fov to something like 180 in the original Quake to gain an advantage in the periphery. Obviously, it wasn’t optimized (I think it distorted things directly in front of you) and I found it unplayable =)

    I know it doesn’t avoid the scrolling/zooming, but this reminds me of the TED talk on Seadragon and the mock up they had for the Guardian newspaper.
    http://www.ted.com/index.php/talks/blaise_aguera_y_arcas_demos_photosynth.html

  6. Pingback: Ajaxian » Non-Euclidean Browser UI

  7. This kind of user interface just makes me feel sick!
    I like the concept but maybe the zoom level is too high for me.
    I feel sick trying to follow the zooming region.

  8. There’s more than one type of non-euclidean geometry – elliptical (the geometry of the surface of the sphere) and hyperbolic. AFAIK Traditional magnification is spherical and only applies to a part of the surface. I think what is being suggested here is more like hyperbolic geometry, which applies to the whole surface, and has the ability to encompass a much larger surface area, by compressing it towards the edges. The classic example of this is some of Escher’s works such as his Circle Limit series (http://mcescher.com/Gallery/recogn-bmp/LW436.jpg)
    The math is kinda intense though ;)

  9. I like the idea. But the problem with the example video given is that the most difficult area to read is immediately on the edge of the area of interest. Instead, the most difficult areas to read should be as far from the area of interest as possible.

    Basically the magnification level decreases linearly from the area of interest to the edge of the screen.

  10. @arthur – I agree that the example shown has some significant readability problems in the transition area but that’s not by design – it’s just an artifact of the less-than-stellar warping tools in Shake :-). If I were to design a real-world implementation of this it would take into account areas of text and instead of warping individual letters it would scale them but maintain their aspect ratio (similar to the OSX dock – notice how individual icons scale as a unit rather than across their width). Generally there would be a lot of individual use-cases implemented based on a variety of factors.

    @pat – generally it’s a lot more pleasant to use something like this if you’re the one controlling it. Similar to how passengers in a car are much more likely to get motion-sick than the driver is.

    Thanks to others for game links and such!

  11. No offense, but I hope the peripheral vision thing never happens. Do you see things like that when you view with your own eyes? With your own vision your peripheral view is much less noticeable (and thus not so distorted to your mind, more just “not there”). Until we get off our traditional displays I think the way we do things is just fine.

  12. @Max – the brain is extraordinarily adaptable when it comes to stuff like this. You get used to it after a very short period of time and then it’s second nature. Google about the experiment someone did where they put upside-down glasses on cats :-)

  13. Pingback: RIA Revolution » Non-Euclidean Browser UI

  14. try enclosing the vimeo embed link between p tags in the advanced editor. that’s what I had to do to get YouTubes to work in WordPress. it would garf them otherwise.

  15. @greg – well, the problem seems to be that Vimeo has taken down the videos – some silly ‘policy’ about now allowing ‘game videos’. Annoying. I’ll try to get them up elsewhere.

  16. Pingback: non-euclidean browser ui - design ~ tina

  17. Hi Ron,

    1. The first concept is good. Lets you find what you want on the screen. But i think one should use this only to find some specific data on the screen but while actually accessing that data, I think the page should be zoomed in [normal zoom] and not your kind of zoom [reading is strainy]

    2. Second concept is bad. Because in a video game you want the experience to be realistic and not provide you more vision. If playing becomes easy, there would be no fun in playing.

    regards,
    vnayak.

  18. Thanks for the comments Vnayak, but I don’t really agree with point#2. If the only point of a videogame was to make it harder then you might as well reduce the field of view to something even smaller and add in a simulation for bad vision while you’re at it! :-)

    The point is that we’d like to emulate the experience of reality, and our normal vision includes the ability to sense motion (without seeing much detail) on the periphery of your vision cone. This is a suggestion for a method to provide a similar experience within the limitations of a normal computer monitor.

  19. Pingback: Moving Non-Euclidean Geometry to Physical Form « The Mozilla Phone

  20. Pingback: טל טבקמן | ממשק ניווט המתבסס על עיוות חזותי

  21. Hello!
    Very Interesting post! Thank you for such interesting resource!
    PS: Sorry for my bad english, I’v just started to learn this language ;)
    See you!
    Your, Raiul Baztepo

  22. Hello !!! ^_^
    I am Piter Kokoniz. oOnly want to tell, that I’v found your blog very interesting
    And want to ask you: what was the reasson for you to start this blog?
    Sorry for my bad english:)
    Thank you:)
    Your Piter Kokoniz, from Latvia

    • Hi Piter – I guess I mostly started this blog just to toss random ideas into the wild so I could stop thinking about them :-)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s