Using Space Effectively: 2D II

From CS294-10 Visualization Fa08

Jump to: navigation, search

Lecture on Oct 1, 2008




  • A general cartographic labeling algorithm, Edmondson, Marks & Shieber (pdf)
  • A survey of automated layout techniques for information presentations, Lok and Feiner (pdf)
  • Dynamic space management for user interfaces, Bell & Feiner (pdf)

Optional Readings

  • Rendering effective routemaps, Agrawala & Stolte (pdf)
  • Artistic resizing, Dragicevic et al. (pdf)
  • Adaptive grid-based document layout, Jacobs et al. (acm)
  • Map labeling bibliography


NickDoty - Oct 01, 2008 02:27:57 pm

I enjoyed this cartographic labeling paper. It certainly seems like a big step in using simulated annealing rather than depth-first search (I'm always happy to see expanded use of AI techniques). But what's interesting is that the choice of search algorithm doesn't seem to be particularly important here, though it does speed up execution. Much more important is the metrics they choose to evaluate a particular map result. In making automated systems for visualization we still need to encode aesthetic/psychological/visualization rules (like what kinds of overlaps are confusing for people, whether people prefer labels above a line or below a line, etc.).

Matt Gedigian - Oct 01, 2008 04:12:11 pm

The fisheye magnification reminded me of this Liquid Browsing interface. They have a few different tools inspired by the same interface concept. One thing they do is combines magnification with another manipulation to eliminate overlap in a scatterplots. When you zoom in, overlapping points spread apart , allowing you to click on them individually. They sacrifice accurate visual representation to enhance interactivity.

Witton Chou - Oct 01, 2008 05:30:59 pm

I really liked the idea of dynamic space management. The idea that neighboring windows will shift around to maintain visibility is a useful concept. However, I wonder how this effects how well the user responds to the displacements of certain windows. I know when I have multiple windows, I'm typically pretty good at keeping track where my windows are placed. However, I wonder how well I would be able to track other windows' positions other than the one I'm focused on if I were to use a system like this. Do the pros outweigh the cons in usability and efficiency?

I made a page on how to get Flex since the Adobe site seems to hide the link pretty well.

Acquiring Flex

Kuang - Oct 01, 2008 04:24:35 pm

I thought the survey of layout techniques useful. The map labeling paper shows that even with general techniques, how much work there is to apply them to a particular domain.

Ketrina Yim - Oct 01, 2008 07:33:43 pm

After reading the "Artistic Resizing" paper, my first thought was "Finally!". Having done a little graphic design, I can say that there are few creative restrictions that are more obnoxious than those imposed by the programmers (no offense). And then there's the need to create different sizes of the same bitmap so that the window can be resized!

That's why Artistic Resizing is fascinating. Graphic designers can specify how they want the GUI to arranged when it is resized. The tabs example was especially interesting; no longer do tabs need to be cut off when the window is narrowed. I'm hoping Artistic Resizing will usher in a new generation of resizeable GUIs, with SVGs so that graphic designers no longer need to create multiple instances of the same icons just so that a user can change a window's view.

Scott Murray - Oct 02, 2008 04:12:55 pm

I'm rarely a big fan of design patterns, algorithms intended to encapsulate the training and experience of accomplished human designers. And sometimes it's hard for me to see why we should automate certain things at all, as in the "Dynamic Space Management" paper. But the "General Cartographic Labeling Algorithm" appealed to me, I think because of its scalability. Cartography is the ideal application domain for design patterns. With a well-designed algorithm, computers can render maps on-the-fly of all scales and dimensions in just moments. Hiring a professional mapmaker to construct such a thing by hand, is far more time consuming (although the result may be more beautiful).

Anyone interested in map rendering should check out Open Street Map. All of OSM's data is freely available, so you could write your own renderer (if you don't like their color choices or labeling algorithm, for example).

Seth Horrigan - Oct 04, 2008 09:44:07 pm

The UIST paper on dynamic space management got me thinking about current common desktop or mobile user interfaces. Mostly they are designed in a completely static fashion. If they are designed well, that static structure focuses the user's attention on the salient points of the interface and reduces or obscures unimportant information. In cases such as web browsers, the structure of a good browser allows the user to easily interact without consuming much space at all, thus allowing the majority of the space to be devoted to the webpages being displayed. Along this line of thought, I would expect browsers that could remove everything except the web display space to please me the best, but somehow I dislike the way that MS IE (and MS WMP) hide most of the buttons and functions available. I suppose the problem for me is that I like to have everything that I wish to do visible to me, and needing to search for it through menus etc bothers me.

Could dynamic space management solve this? Could we somehow maintain everything visibly while not cluttering the interface? Would there be effective and usable ways to display everything hidden under the menus on the screen without consuming the entirety of it and without being absurdly distracting. I do not know, but I think I too often accept a tedious method of accessing a common feature or function hidden within menus and dialogs simply because I am used to the painfully difficult method that I have always employed.

Ljuba - Oct 05, 2008 11:19:38 am

I wanted to alert the class to the very cool demo on the Flare website under Treemap ( which does an excellent job of enlarging areas of a tree-based visualization as you hover the mouse over different parts of it. The great thing about this implementation is that the distortion doesn't reduce readability because of the structured nature of the original visualization. It kind of reminds me of the Mac OS X Dock magnification, where tiny icons enlarge in proportion to the proximity of the cursor to them. Very effective visualization!

Matt Gedigian - Oct 05, 2008 05:04:01 pm

@Seth Speaking of mobile interfaces, there is a video of an interface concept for a mobile web browser here. I was going to mention in in connection to Pad++ readings but I'll use your comment as an excuse to bring it up now. Having options on screen rather than buried in menus is nice because it allows recognition rather than recall -- but on mobile screens every pixel counts (and on touch screens users require large targets to paw at with their fat fingers). Tufte praised the iPhone interface for minimizing (and in some cases completely eliminating) "computer administrative debris". In the concept video they keep all the controls "off-screen", maximizing usable space during viewing, but requiring the user to summon the controls before using them.

Chris - Oct 05, 2008 08:05:21 pm

I've had very mixed experiences with systems like the ones discussed in the Survery of Automated Layout Techniques, and my experiences have largely been binary. There are some systems which I tend to trust (e.g, Latex) while there are some which I find myself actively fighting whenever I use them (e.g, Keynote, Word). I would have liked it if the article went into more detail about the particular algorithms used by various packages and evaluated the algorithms.

One thing that I have found is that I often prefer to have no control or complete control, while partial control is almost always frustrating. When I use Latex, I give minimal (text-based) input and am forced to trust the program to make wise choices on layout. When I use something like Keynote, I give a fair amount of input (moving boxes, etc) and find it frustrating how the layout moves around based seeming on the phase of the moon. One exception to this rule is Omnigraffle, which does take some control but tends to make wise choices.

I would be curious if other people have had the same experience, or if there has been any research into the topic: What is the optimal amount of control to give to the user: None (non-WYSIWYG), Some (user gives input which the system lays out), Full (the system makes no adjustments to the user's input). It seems to me that opting for "Some" carries the greatest risk, but could end up being the most useful.

Dmason - Oct 06, 2008 11:11:40 am

I found the adaptive layout and cartography papers to offer some interesting and awful alternatives to the tools we come to know and love. For instance, Google Maps, which currently offers an excellent and scaled geographic representation. I think it does a great job of offering directions and choosing a good heirarchy of information in its maps (I discuss some issues with this in length in my Assignment 1b). However, the alternatives offered in the paper provided an interesting foil, and I was especially taken by the trails at the ends of roads when you take a turn. This is an excellent idea I would like to see more often used, but I don't think it could ever function on its own. For instance, what happens if you get lost?

In truth, after using items like Google Maps, InDesign, Latex, etc. I find that automated algorithms make it easier to obfuscate the information than they do to make it more accessible. I'd like to see Google offer an abstracted version of their directions in addition to the full-scale map -- much better I would believe than the small multiples of maps they use at each turn, which are usually zoomed in too close to give enough context. I found the paper identifying the need to fill in every page, not just the first few pages, to address some commonly overlooked issues. I liked the proposition of filler-images that just fill space to aid with the layout. I guess I never noticed that the New Yorker was doing that all along...

Simon Tan - Oct 07, 2008 12:52:49 am

@Ljuba: I always thought the Mac OS X dock icons were actually an example of poor usability design, because the growing and shrinking icons make it difficult for people to definitively click on their target icon. It's basically a moving target, and I think it's been shown that people do better with that effect turned off.

This leads me to believe that "fish-eye" magnification is only useful (if ever) when the user is never required to point at a precise location while the effect is on. It seems to be a "read-only" tool, useful for situations where you want to inspect a chart or map, but not have to decisively select something on it.

@Dmason: Abstracted version of driving directions? Kind of like Professor Agrawala's Line Drive maps? I feel that those are a very effective use of space (and ink, when printing directions), and also wish more mapping websites would have them. They are a great example of clearing away "chartjunk" (or in their case, "mapjunk") and keeping important things visible.

Sarah Van Wart - Oct 07, 2008 06:55:00 AM

Regarding the Lok and Feiner article ('A survey of automated layout techniques for information presentations'): though it seemed like the article was largely geared towards print, I think that applying this constraint-based automated layout system to web-browser-delivered information would be extremely useful. Already in most web browsers, the designer is forced to relinquish control over a number of factors. That is, the designer cannot control the user's local browser settings (font-size, color settings, etc.), the size of the user's monitor, the particular choice of browser, etc. Each user is likely to see a slightly different version of the content on his/her monitor. Since this is the case, why not try to optimize the way in which space is used via some constraint-based system? A set of templates could be established in which spans, divs, imgs, etc. are related to one another through spatial and abstract constraints, and the different templates could dynamically render as window size changes. As it stands now, there are few websites out there that look good for all resolutions and screen-sizes, and the article's notion of automating layouts could really improve user experience over the web.

Michael So - Oct 07, 2008 10:28:48 pm

That video of an interface concept for a mobile web browser (the link to video supplied by Matt Gedigian) was really neat. And I think it is a good application of zooming and showing how zooming can lead to using space effectively. I never really thought of hiding the web browser buttons like the Back, Forward, Refresh, etc. But it is true that the web page display is the most important thing because it's the reason why the user is on a web browser. So having the whole display being the web page and having the controls hidden on the side is a really neat interface especially for mobile devices where space is pretty small. And the zoom out feature where you get an overview of all the tabbed web pages is pretty cool because I don't think you get that kind of overview in web browsers on your computer. Instead of a sorta thumbnail image of the tabbed web pages, you get an image of a tab at the near the top of your web browser along with text indicating the title of that web page. I think a thumbnail pic is more effective at recognizing what the tabbed web page is.

Maxwell Pretzlav - Oct 07, 2008 11:33:14 pm

@Simon: I agree with your comments concerning the fisheye magnification. I was just experiencing that exact phenomenon when messing with the flare demos. If you go to the Scatter view, and select Distortion you will see a scatter plot that expands as the cursor moves on the grid. I found it incredibly hard to hover over specific objects (which shows their actual values in a tooltip) as the objects on the scatterplot accelerate as your cursor nears them; however this view is very successful in showing detailed relationships in a small area.

@Michael: There are a number of desktop browsers that have some sort of "thumbnail tabs" feature. I have experimented with Omniweb and personally found it more irritating than helpful. I found that it took longer to differentiate between many similar looking pages than it did to simply read tabs, especially since most web pages are black text on a white background and look very similar at a small size. I see there is a firefox plugin that takes a more "exposé" style approach to thumbnails, but I haven't tried it.

Calvin Ardi - Oct 08, 2008 12:49:41 am

@Simon The line drive maps you linked to are efficient, but sometimes give me too little information. Often times I'll sketch a map of where I need to go (usually when I don't have access to a printer), but I prefer having some more streets labeled and outlined. For example, if I take a wrong turn or if by some chance a road is closed, I'll be able to quickly navigate a path without having to follow the one I "predetermined" earlier.

Regarding the OS X dock icons comment; I have my setup such that the dock autohides and appears only when I move my cursor at the bottom of the screen. The icons under the cursor and immediately around it will magnify slightly, which has it's usefulness. For example, at a quick cursory glance I can tell where the cursor is based on the largest icon. This may not be as useful for displays with smaller resolutions, but perhaps it may help out with the larger resolutions on monitors 30" and up.

@Michael There are a few features like what you're talking about with the Opera web browser (and soon to be implemented in Firefox, if I'm not mistaken). Opera has this feature called Speed Dial and pre-loads 9 webpages at the startup, with thumbnail images allowing for quick overviews of each of the sites you have set. I'd find thumbnails on the tabs to be a bit of a nuisance (unless I had a display with a large resolution); Opera handles this by providing thumbnails of inactive tabs on mouseover.

David Poll - Oct 08, 2008 05:11:36 am

With respect to the Line Drive maps, I've actually seen them before (going back to taking Prof. Agrawala's UI course as an undergrad), and in spite of new perspective, my overall opinion of it has remained approximately the same. I find that they're very useful, but because of the warping of the map, it can become difficult to glean some information from them... What I'm seeing more and more is that context has a lot to do with the usability of a visualization. Both with Line Drive and with (for example) the election maps, the distorted visualizations suddenly begin to make more sense. I think this just underscores some of what we've been talking about: judgments about a visualization must take into account the story they are trying to tell. With the election maps, for example, one can tell the story of the population distribution of the US and how, in spite of the US being geographically overwhelmingly Republican, each race can be so close. It's barely clear what the meaning of the distorted map is, but the moment it's juxtaposed with the non-distorted map, it tells a story about the difference between geographic political distribution and population-based political distribution.

Yuta Morimoto

I think distortion such as the fisheye in the flare demo is not appropriate for scatter plot. In scatter plot, I need to the point of data comparing the axis. So if I use a distortion in scatter plot, I will only find it hard to specify the coordinate value. Actually, I tried to use distortion in scatter plot wit prefuse and just had a bad visualization.

"Dynamic Space Management" reminds me many small electronics devices just having tiny screen. Actually, they already have certain space management mechanism. they hide meaning less features on application automatically, so I can use the limited space more effectively. For example, system tray of MS Windows located in the bottom-right of the monitor uses such space management scheme. If many icons are in notification area, they automatically hide if inactive for some time. But, sometime this automatic hide system confuse me, since I forget the presence of the application..

Nicholas Kong - Oct 08, 2008 01:03:55 pm

@Simon and Calvin As Simon pointed out, it's true that icons are moving targets the way the Mac OS X dock icon magnification is currently implemented. However, work has been done (McGuffin and Balakrishnan, CHI 2002) showing that Fitts' Law can model targets that increase in size, and that it is only the final target's size that matters. That is, magnification does give benefits in terms of ease of selection. However, this is contingent on ensuring that the target's final shape completely contains the target's initial shape. To this end, McGuffin and Balakrishnan propose a prototype "dock" where occlusion of neighboring icons is allowed. For some people the reduction in aesthetics might not be worth the slight increase in usability, but I think it would be a good idea to at least add an occlusion-enabled option for the OS X dock.

James Hamlin - Oct 08, 2008 01:57:44 pm

The moving targets in the fish-eye or even bifocal view are definitely no good for making selections. I'm not a Mac-user and haven't come into much contact with this visualization tool elsewhere, but I've experimented with the flare demos and find it difficult to move the cursor to a desired point above a target element. But for viewing a small local region, I like them.

I'm waiting for Microsoft to implement something like one of the layout systems from the Dynamic Space Management for User Interfaces paper. When I'm stuck using Windows, especially when I've only one monitor, positioning conveniently the many windows I've usually got open becomes a royal pain, and there's no reason the window manager shouldn't help me with that.

Razvan Carbunescu - Oct 08, 2008 02:35:33 pm

Playing a little catch-up but I really liked the labelling paper after I sat down and really read and paid attention to all the small things it did. One of the problems that I had with it was the selection of positions and size for the town labels which creates a good bit of variation in the map that distracts slightly (or me at least) from the general view. That being said when I tried to look at different towns and identify each town the size factor actually helped allot like for example pg15 the final map in the bottom left corner where 5 towns are all cluttered together and you can actually only see 4 towns initially you realize that one of the labels is actually left aligned vs the town.

Jeff Bowman - Oct 08, 2008 12:45:53 pm [time-corrected]

@Simon: I disagree about the dock icons, as a matter of principle. While 2D layout can refer to visualization, the fisheye magnification to which the slides refer is more of a feature for selection, not a feature for visualization. Conversely, if the point of the fisheye is to display richer information on the icon, then the fisheye selection becomes much more valuable and intuitive.

This brings up an interesting topic: Fitt's Law and Tufte's principles do not always directly overlap. A good example is the rich data density of Tufte's sparklines: Doing data selection or manipulation on a sparkline makes little sense, but for presenting data, sparklines produce a very concise representation.

[add comment]
Personal tools