Monday Sep 08, 2008

Page Thumbnails for UI Design

Early in a UI design project, it's efficient to be able to quickly arrange and rearrange the high level navigation and flow of the application or site without getting mired in the details of each page. You can accomplish this by drawing plain old lines and boxes with descriptive labels, but odds are that you have a general idea of what you expect the page to do, e.g., it is a form, or a table listing a bunch of objects, or just a page full of text. It's at this point in design where Page Thumbnails can come in handy. Basically, these are just shorthand visual representations of particular types of pages that, unlike a plain old boxes, imply functionality or purpose of the pages. Drawing the navigation flow using these makes for a more informative and visually compelling view of the proposed design.

I created an initial set of Page Thumbnails as an OmniGraffle stencil. OmniGraffle is a Mac application that works great for wireframing, page layout and vector-based drawing. One cool feature is that it allows users to create custom stencils of reusable objects that can be dragged off of a palette and into your document. The stencils can then easily be shared with other users via websites like You can read a bit more about it and download the Page Thumbnails stencil from Graffletopia.

Here's a snapshot of the thumbnails as they appear on the stencils palette:

Page Thumbnails Stencil

These were created based on my experience in web application design and in messing around mapping some existing sites, but the stencil is certainly not complete. The applications that the xDesign group designs at Sun share a lot of common structure (e.g., navigation schemes, page layout) and this constrains the set of thumbnails needed -- so a small set can go a long way. Web sites, on the other hand, are far less constrained in terms of purpose, scope, navigation, etc., and so the potential set of representative thumbnails is broader. To make this stencil (and the method) more broadly applicable, I included a couple of blank objects on the stencil that can be customized and saved for reuse.

I put together an example of a fictitious site to illustrate the idea, and you can see a bit of that below. The full example is also available as a pdf file.  I hope you find the stencil useful. Feel free to leave comments/complaints/questions in the comments section.

Example of Page Thumbnails in action

Tuesday Nov 20, 2007

Of Notebooks and Pens

Maya Venkatraman is an Interaction Designer at Sun Microsystems. She started working in the area of Human Computer Interaction in graduate school, where she earned her Ph.D, and has been working in the industry for almost a decade, designing software that is easy to use.

I watched the amazing movie Pan's Laybrinth recently. I wandered over to the Pan's Laybrinth website (a webby award winner!) and found pictures of pages from the directors notebook. Apparently, he is in the habit of putting his thoughts into a journal. Years later in the midst of a project he will remember something he sketched that would be perfect for what he was currently creating. Take a look at this snapshot of the journal. Talk about content rich. Maybe I am a Luddite, but I just don't see someone being able to do this using, say a blackberry.
Now if they had  a FlyTop  pen (or the more grownup version by Logitech) and the paper that goes with it - they would have best of both worlds. The flexibility of paper, combined with all the goodness of Digitality(tm). I stumbled onto this product about a year ago, and am surprised that it has not yet taken the world by storm. (...all it needs is a wireless chip..) Maybe sometime in the future, the notepad portlet/widget, will also connect to my physical notebook. Maybe I will be able to throw some of my web pages on to the wall or white board, and some to my real desktop (surface of four legged table). I could place my digital pen notebook on top of the notepad widget area, to upload the pages I have written. Maybe I am more of a Futurist than a Luddite.


Tuesday Sep 11, 2007

Jakob Nielsen talks about blogging, search, and documentation

Jen McGinn is an interaction designer in xDesign who is working to improve the user experience with the Java Enterprise System installers. She has an MS is Human Factors in Information Design and works out of Sun's campus in Massachusetts.

Jakob Nielsen, formerly a Distinguished Engineer here at Sun, visited with some of the folks on our Menlo Park campus today, to give a brown bag talk on his July 9th AlertBox article "Write Articles, Not Blog Postings".

He started off the talk by saying that his analysis was based on Peter Pirolli's 1999 work with Stuart Card, Information Foraging.

He talks in what I know as terms from economics — the opportunity cost of pursuing a line of action; the diminishing returns (utility function) on each unit of information gained; and the cost of obtaining that information (cost function). He goes on to talk about an example of the two Australian scientists who discovered that ulcers were actually caused by a virus. When they won the Nobel prize for their work, it was reported in every newspaper around the world. After reading about the finding in a newspaper, a physician might want to read up on the authoritative source. What kind of information is your reader looking for? Authoritative sources or quick information?

He suggests that blogs are "stream of consciousness" where their authors are just talking about thoughts off the tops of their heads. He sees the value of blogs is to "pump out" new content. An audience member (Richard?) compares his own experiences with blogs and bloggers as being more similar to newspaper columns and columnists — not that they are necessarily providing authoritative info, but that bloggers can connect the reader to some content that the reader is interested in, providing both entertainment and the ability to navigate the web. The audience member also notes the collaborative nature of blogs — that people can easily communicate and participate in new and developing works — and that they have the timeliness that traditional authoritative documents can't have. Nielsen agrees, but says that the linear structure of blogs does not lend itself to good usability. Another audience member suggests using a table of contents, and another suggests tag clouds. Nielsen suggests that those are not conducive to problem solving, because they do not highlight what is most important or salient.

Nielsen asserts that search engines are trying to answer 2 questions: what is this about, and how important is it (page or relevance ranking). But what we really are looking for is a measure of usefulness — how will this search hit help me solve my problem.

He goes on to say that blogs lack editorial style and polish, but that there is a cost to that effort (back to utility and cost functions), and that extra cost and effort would not allow for blog content to be produced and released quickly. Compiling, summarizing, and concluding are three things that are not typically included in blog posts. But later, he says that blogs written by multiple people can be more valuable, because it's hard to create valuable content every day, but easier with multiple contributors.

Another listener suggests that different audiences and tasks are better suited to be answered by informal and formal communications. For example, when he wears his developer hat, he is interested in knowing what other people are doing, but when he's a system admin, he wants official documentation. Paul laughingly suggests that that's a tech writing 101 concept, to perform an audience analysis. Janice Gelb suggests that having both product docs and blogs means that we have two separate places for people to look for information. Nielsen suggests that the two types of content ought to be better integrated by referring to one another. This information sharing between silos also helps to educate the search engines.

Role-based personalization can be more helpful than customization, because the information is tailored for a person based on known categories of attributes, versus the user having to do something to customize their system. If only we could guess what people need and give them the three things that are the most useful, they would be ecstatic. His counter-example is an online book-seller, which makes lots of personal recommendations, but almost never recommends anything that anyone really wants. What does work well, though, is its cross-selling mechanism, letting you know about the books bought by other people who bought that book, because it's built on lots and lots of people's past behavior.

Hey, past behavior is a good indicator of future behavior :) That's a tenet of user research, which is why we are creating personas based on customers' behavior. But that's a topic for another day ...


xDesign is a software user experience design group at Sun.
Follow us on Twitter : Flickr : Blog (see feeds below)


« April 2014