UXD - User eXperience Design

Design Pattern 1 - faded breadcrumbs

Design Pattern 1 - faded breadcrumbs
Originally uploaded by uuh...clem

Preface: in my travels around the interwebs I often encounter a neat interaction design that I use my handy Skitch tool to capture. As of now, they sit there until I encounter a project to use them in. To make them more accessible I'm going to post them here, please add comments, since many times I'm not sure how to actually implement these!

Apple's faded breadcrumbs

In (Leopard OS?) search windows, when a list is presented and an item is selected, the path to that item is shown as breadcrumbs in the footer. Because these items can be anywhere, the structure can be very deep, when horizontal room is at a premium, and folder names are long the display truncates the display to a fixed width and fades out the name to white. On mouseover, the title stretches open to show the entire label.

What can it be used for?>

Windows offers the ability to "ellipses" a label that gets too big for it's container. On mouseover, a 'tooltip" window pops up showing the entire label. The fade approach is more elegant, and the animation is actually useful since you don't obscure the other information like popup tooltips do. Websites hopefully have flatter navigation structures nowadays, but horizontal space is always an issue, as it is always finite. Techniques to maximize horizontal space are welcome.

How to do it?

Apple.com is showing this behavior on their footers, go to any page and look at the footer breadcrumbs, click on one and you get the animation effect. However, the fade is not possible in HTML. Also, apple seems to use some 'safari' behavior in their page I don't see in IE 6. Any ideas or libraries? Post below.

Dasher - A new way to write

I simply love finding these little gems on my weekly web excursions.  This time it's a fascinating new piece of software out there called Dasher, and it allows you to write without typing or scripting.  What's that you say?  How else can you write?  Well...The basic idea is that current methods of typing are inefficient, because they don't learn.  Let me explain.  Although there are x number of letters in the alphabet, every pressed key reduces the number of available choices for the next key press, and increases the odds that other specific keys are pressed next.  For instance, 'E' is much more likely to be pressed after 'H' than 'B' is, and 'O' more likely after 'G' than 'C'.  On current writing technologies it's up to the user to learn to be more efficient at writing He than Hb or Go than Gc.  But that doesn't need to be the case.  By taking advantage of the learning and memorization power of the computer, it's possible to create writing interfaces that guide you through the process rather than just recording what you type.  If you'll indulge me in some metaphor, imagine rowing down a river.  Dasher is the river with a strong current to wherever your going, and existing typewriting technology is the river with no current whatsoever.   

What Dasher does is use language patterns to present likely letters and words to the user based on the letters or words they have already written.  The goal is to make writing more efficient by reducing work.  There are no keys to press using dasher.  In fact the mouse is never clicked.  The interface allows one to write by simply navigating the mouse down a path--or tree--through the alphabet.  The start screen displays all 26 letters of the English alphabet.  You select a letter by moving your mouse next to it.  As letters are selected, Dasher displays all available letters again, but this time those more likely to be chosen are larger and therefore easier to select.  As you write, you move forward through the tree, and entire words and phrases are displayed in order of likeliness.   

Dasher needs some work before I start using it instead of my keypad, but the idea has real merit, and it deserves to be explored more.  As an interface designer I see at this tool as a great example of how simple interactions, when thought about creatively, with nothing held sacred, can have potentially revolutionary effects on the way we interact with technology.
 
 

Powered by ScribeFire.

Extending the desktop metaphor

A way cool product in the maiking...

This interface looks and acts much more like a real desktop.
But is it just eye candy, or is it a real advance in digital usability...

Footage of the product on Google Video

The in depth PDF publication

Rethinking the Help System in an Ajax World

In desktop applications and the new genre of Ajax applications it's possible to provide contextual information to the user. This is typically done one of two ways. Either real estate is devoted up front to the display of this information, or a pop-up (or slide-in) of some kind emerges.

The ability to contextualize information physically suggests the necessity to rethink the creation of the help system. Not only must we consider what the information must be, but also when and where it will likely be accessed. The help system truly must be a system, not just an encyclopedia of the features of the tool (that is still a good thing to have, nonetheless).

The down side of a highly contextual help system is cost. Someone has to design it, not just write it (you have to do that too). There may be a good middle ground, though. Consider providing specific help access points contextually in your application for the things users are most likely to get stuck on. Provide opportunities for assistance, advice or suggestions in context where the benefits are significant to the task at hand. Let the user easily get the information, and get rid of it when their needs have been met. This approach can deliver value to your users, while keeping the creation and maintenance costs reasonable.

Technorati : ajax, design, help system, usability

Leveraging the User’s Experience: Insights on Designing for AJAX

When the first GUIs were created they leveraged perhaps the most ubiquitous items people experienced in an office environment: a desktop with folders and documents.

As we move into the world of AJAX and rich interactions, the principle of leveraging experience can be extended not just to objects but how we interact with those objects. Google maps provide a familiar example. Using rich interactions, we are able to interact with the map almost as if it were a physical object (without having to figure out how to fold it – a benefit to be sure). Another form of interaction being seen more and more is the concept of a sliding drawer. Objects we may need are closely available, but are not consuming precious screen real estate until needed.

As rich interaction and AJAX technologies mature, they present endless possibilities for the designer to create something that is innovative through its familiarity.

Great Article on Prototyping Complex Interactions

If you haven't already read it, you really should. Andres Zapata has published an excellent article over at boxesandarrows entitled The Guided Wireframe Narrative for Rich Internet Applications. A brief taste:

The key to using a low-context medium (wireframes) to illustrate high-context information (rich internet applications) is to narrate the information in layers or in dimensions. In short, because we couldn’t build a prototype (due to time and budget constraints), we built a story. But because it wasn’t a linear application, multiple stories needed to be constructed. We call these stories the Guided Wireframe Narrative.

Our story or narrative focused on four main dimensions:

• Hierarchy


• Screen real estate


• Design conventions


• Interaction patterns

We call these multiple stories microflows.  Lots of food for thought here. Go and read it now.

 

An example of Ajax providing a good user experience

A little while back I commented on the need for designers to use new technologies not for their own sake, but as a means to an end (on the web, that end being a good user experience).  Here's a perfect example of what I meant. 
Duo consulting has done some really nice work for the Chicago Parks District.  The web site takes advantage of 'web 2.0' features to maximize the user experience, and as a result, a highly successful site that among other things, greatly increased online registration for park district classes, and decreased cart abandonment by 80%.
Here's the Ajax enabled online registration app. that they built...
And here's the original post on the Duo Consulting blog.

Ajax and user experience

The increasing ubiquity of Ajax is becoming somewhat of a vicious cycle, as more demand creates more hype which creates even more demand.  As such, it presents interesting challenges for designers.  How do designers weight the pressure to 'Ajaxify', with the needs of the user. 

While Ajax does represent the beginnings of a new way of using the web, Ajax doesn't make sense all the time.  Yet it has become such a hot topic that design and development firms are experiencing more and more demand for anything 'Ajax'.  Frequently, those clamoring for the technology don't really know what it is, nor what it can be usefull for, but they know what they've heard...that it's the hot new thing, and there web site or web app is just not worth the browser its rendered on unless its got Ajax. 

The results can be frustrating to see.  For instance, have you ever come across an instance of a drag and drop module where a simple mouse click is so much easier and more effective?  Yeah it's cool...because, um...well, I'm dragging and dropping something...on a web site...and it's Ajax! 

Designers need to curb clients enthusiasm, so to speak, and make them understand that having the best web site doesn't mean using the latest and flashiest technologies.  It means applying a strong methodology, good user research, and an understanding of heuristic principles to build something that provides users with a useful and satisfying experience.

Usability Roundup - The Back Button

An oldie but a goodie -- the back button. The bain of designers, developers and usability experts everywhere. Some love it, some hate it. Here is a roundup of some of the best resources on this topic.

• Web Navigation - a treasure trove of web usability research by Professor Andy Cockburn of the University of Canterbury, Christchurch, NZ. If you are after some hard data rather than speculation, this is a very good place to start.
• Navigation Blindness - Why users ignore navigation and what to do about it.
• Flash Back Button Fix - Robert Penner came up with this back button/bookmark fix for flash a while back.
• Attack of the Back Button - Some words of warning from John Rhodes. While some of the techniques on this page may be a little worn, the sentiments are not.
• dojo.io.bind() Intro - A discussion of the usability issues around Ajax/XHR breaking the back button and a possible solution to the problem within the Dojo toolkit.
• Fixing the back button that AJAX broke - An excellent analysis of the problems of the back button, and the related problem of bookmarks, and a lengthy rumination on some possible solutions.
• Flash Usability - The flash folks have been wrestling with the back button for a bit longer than the Ajax folks. This is a long article with just a little bit on the back button, but some of their suggestions are quite useful.
• Breadcrumb Navigation - With breadcrumbs, users used the back button less frequently, but overall task efficiency was no better.
• Exploring User Mental Models of Breadcrumbs in Web Navigation - Another study on bread crumbs as a solution to back button issues.
• SmartBack: Supporting Users in Back Navigation - excellent overview of research in navigation and some tested ideas on how to inprove back navigation. Could be very interesting for those implementing their own "undo" functions in Ajax.
• Fixing the Back Button and Enabling Bookmarking for AJAX Apps - Mike Stenhouse's crack at fixing this problem.

Thoughtful gesture? Peter Coffee’s column misses the point.

As I leafed through my ever growing stack of tech magazines yesterday, a column in eWeek by Peter Coffee, entitled Thoughtful gestures – don’t make complexity elegant; make it disappear caught my eye. 

Mr. Coffee was writing about a patent application from Apple for processing multipoint gestures on a touch input device. The language of patent applications is notoriously dense and jargon laden, so in laymans terms, this is about making it easier to interpret what a user wants when they touch a screen or touch pad at multiple points at the same time.  Some simple examples of multipoint gestures include squeezing, stretching or twisting motions while touching a screen with your finger tips.

Mr. Coffee's contention is that this invention is a way of making more complex tasks easier to perform, that it has no real-world, practical application, and that this is the wrong problem for inventors to tackle. He states that “I’d rather see interface efforts based on watching what users do, understanding common needs and designing systems in which those actions are simple. Making complexity elegant is an achievement, but I'd rather just make that complexity invisible.”

This is a fine sentiment, and a good one-sentence description of user experience design, but he really misses the point of how new input device inventions relate to user-experience design.

He illustrates the uselessness of gestural interfaces by describing two ways of saving a users work – one using a whole series of convoluted gestures that makes the user look like she’s doing the Macarena, and a simple, elegant way of using keyboard strokes. Boy, based on that example, gestural interface sure sounds like a bad idea, and inventors should stick to improving how to use existing input devices.

The trouble with this example is that the same argument was made about the mouse when it joined the keyboard as an interface device. There were (and are) many things that are easier to do with a keyboard than with a mouse – saving a file using shortcuts, typing a letter, entering data in a spreadsheet, just to name a few. Does that make the mouse useless? Why use something as complicated as a mouse?

Let’s take the case of a user putting together a process diagram in Visio. Using a keyboard interface, a user can perform a lot of complicated keyboard strokes to generate, place, link and annotate the diagram elements. Meanwhile, back in the real world (as Mr. Coffee would say) the user simply drags and drops the elements in place using his mouse, touch pad or pointer.

Clearly, different interfaces are good for different types of actions, and it’s up to the user experience designer to apply the appropriate combination of available interfaces in a way that lets the user simplify and streamline their interactions.

So where might using a multipoint gesture interface simplify a current, real world interaction? How about Google Maps: Multipoint gestures such as squeezing, stretching or turning, combined with single point gestures like dragging, could make navigation significantly simpler and faster than the current mouse-based approach.

The point of inventions like this is not to make more complex acts achievable, but what things can be simplified using these inventions. Almost all ways in which we interface with computers are pretty complex. For example, learning to use a keyboard is a lot more complex and time consuming than learning to use a mouse, and learning to navigate using keyboard shortcuts requires much more familiarity with an application than using a mouse. Gestural interfaces need be no more complex than keyboard or mouse interfaces.

So inventors, keep inventing!  Between user experience designers, developers and usere, we'll take the best inventions to  make things genuinely simple.

Visualizing Rich Interactions in Paper Prototypes

Wireframes and paper prototypes work well in documenting the standard page metaphor of the Web, as the functionality of each screen can be captured in a single wireframe. Rich interactions, though, pose the challenge of expressing a series of states that may occur on a single screen.

As technologies like AJAX gain greater popularity, designers face the challenge of exploring and developing new and innovative visual vocabularies and flexible tools for capturing the microflows of rich interactivity.

At Pathfinder, we are drawing inspiration from the discipline of storyboarding, which is, of course, closely related to wireframing. Storyboards express ideas in a sequence of "key frames," showing only the minimum number of frames to convey the idea. The richness of storyboards comes not from just the individual pictures, but from the change from picture to picture. It's possible, then, to embed a miniature storyboard into a wireframe, thus illustrating the quality of the rich interaction.

A second technique is to create a visual taskflow representation to the system. In this format, all screens are miniaturized to capture both the linear and non-linear flows within individual screens and from screen to screen.

Our fellow practitioners are tackling this challenge as well. Bill Scott considers several strategies for creating interactive wireframes, including the PowerPoint clickthroughs, the development of quick and easy RIA toolkits, and standardized notations to indicate interaction effects in traditional, static wireframes. His personal technique involves the creation of storyboards in Visio, which he then animates. The strategy is detailed in his blog entry, "Interactive Wireframes: Documenting RIAs."