UXD - User eXperience Design

Goldberg workflow

In a current project there is the need to use email to allow customers to 'sign up' for information updates. In working through the user experience I have been looking deeper into how different programs have enabled email to process and initiate workflow that it led me to solve a problem in a surprising way. It also reminded me of how in user research it can be nonsensical and even counterintuitive how people use software to help them with their tasks. Its all a strange rube goldberg like process, which gives me an excuse to share the "Pitagora switch" video, which always invigorates me when a software project seems to lose momentum.

I started with a basic problem of the customer (In this case, me) who is a amateur oenophile. I try a new wine and would like to keep track of my thoughts and rankings in the easiest way possible. I have an account on Corkd, a wine rating site, but the customer experience is lacking in some ways, and adding wines is a chore. A friend mentioned that he only buys wine based on label, and that is important, so I would like to keep a photo for reference as well. Many sites do photos, many do blogs, but I wanted to do them both together. So I set up my own site with a bit of wordpress and a domain name, I was up and running. However, it still seemed a chore, if I was enjoying a wine, I would have to go to the computer, log in, write, set up, upload photos, remember which one... oh, again, too much work, and the site and content stagnated.

Armed with some experience in the email interfaces to these blogging/cms systems, I came up with a weird way to make the process easier. It does involve an iphone, but that is just to enable the 'mobile' experience. As I went through it, it worked perfectly, and was quite a bit of fun, not to mention a triumph of non-linear thinking! To summarize:

1. Enjoy some wine - be sufficiently inspired to blog something about it
2. Use the iphone (or I suppose any picture phone) to photograph the wine label
3. Email the picture to flickr (check flickr account details for your personal email address that posts the picture)
4. Set up flickr to be aware of the 'wineskeptic' blog by pointing it to a script within wordpress that will accept XML posts
5. This enables the little 'blog this' link above the picture, using the iphone web browser enter the tasting notes. Save.
6. Check the blog, notes and picture are posted, success!

I hadn't really used the flickr service for anything but archiving and sharing photos before, and its a very cooperative model they enabled. The photo is not the main reason for the post. If you have experiences with similar ways you mashed up some technologies to solve a workflow problem, please comment!

Design Pattern 3 - not page flips

In interaction design it is considered a noble pursuit to find metaphors that take real life interactions and mimic them onto the computer screen. There are some notable successes such as the desktop metaphor, as well as some notable failures, such as the desktop metaphor. It reminds me of a friend who was experiencing trouble with their hard drive (this was a macintosh) so they dragged all their files 'out' of the hard drive onto the desktop and then reformatted the drive. After doing this he understood that the metaphor didn't hold up to this kind of use. As computer users become more savvy, metaphors that exist only in the computer realm are becoming more common and accepted.

I was perusing an online catalog, IKEA, and noticed they had dismissed the odd, yet well used idea of a page 'flipping' or 'dog-earing' when you clicked on the corner to advance. As seen in the movie, the advance takes place, shifts the page, then switches it with the next page. Not only does this transition take less time, it effectively communicates in shorthand the idea of 'flipping' without using a direct paper metaphor. Nicely done.

When to use

Pagination seems most useful when transitioning print to screen. Since many magazines and newspapers have abandoned the fidelity to print, and removed the need to screen capture print ready art, this is becoming rarer and rarer. I do think paginating between photos in an album is an experience not well handled in many photo sites web interfaces (I mean you flickr!).

How does it work?

Since this is flash, you can get away with the movement out of the constraining box, which is tougher in HTML, since absolute sizing is not as common, moving and swapping is probably available within a DHTML library, but movement across frames seems to be very flash specific behavior.

Design Patterns 2 - web fonts

Calibri

In the oxymoron that is web typography, i want to give great praise to Microsoft that gave the world Georgia, Trebuchet MS, Verdana Tahoma and some other fonts I don't care too much for. It is ironic that they have really pushed forward the world of web design far more than the "design oriented" mac crowd. They are continuing the good work with their new Vista font - Calibri. A lovely font that can rescue many sites from Arialville, and comes with install of IE 7 or of course Vista. It is also the default system font which saves default Word users from Times New Roman, which is a huge improvement. I also want to give a public "meh" to Apple for keeping their system fonts (I'm thinking "Lucida Grande" ) to themselves and not offering free downloads to Windows users. Come on, is there that much profit in this that we can't rely on a base set of screen readable fonts for our users? Pretty please guys?

For mac users - I would love to link up where to download this, but searching seems to reveal you get it as part of installing a powerpoint 2007 viewer, and as a PC user, I think if you install Safari, they may bundle in Lucida, good luck!

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.