Author: Michael Dain

Download my album for money?

Michael Dain, Wednesday, June 25, 2008 @ 12:07 pm

As a happy transient fom the world of record stores to downloading my tunes happily from emusic, Loronix, moistworks and other fee based or file sharing sites, I am interested in how the music world is balancing art with commerce. With iTtunes being my least favorite way to get music, yet for convenience, it has surpassed 5 billion downloads, the pricing structure still seems broken. Radiohead made everyones news with releasing their record as a "how much would you like to pay" model. My problem with this was how difficult, confusing and somewhat rinky-dink the download/pay experience was handled. It actually made me not want to pay. Now comes the same idea done right - the 'mashup' artist Girl Talk, who put out one of my favorite records last year, has a pay what you like model done right.

The first page offers a clear value proposition, name your price - but if you pay 5 bucks you can get lossless versions. Pay 10 and get a 'real' cd whenever they create it. Then process the transaction using paypal, so no messy credit card transactions. Download at the same time so paying is not tied to actually getting the files (you can still bail on paying) However, being a fan I settled on $2.50, a tip so to speak. How about you, does the straightforwardness and ease of use make you want to pay at least something? Or to be profound - does ease of use translate into profits? I'm banking on yes, since the site was being hit so hard that it won't even load the cover picture, and it is my profession as well. I would love to see statistics on how this works out for Greg, but being a 'pirate' music site, we may never know what the ratio of payers to moochers is, which is a shame.

• Digg
• Reddit
• del.icio.us

Comments (1)

User Experience Design

All the news that was fit to print

Michael Dain, Thursday, May 22, 2008 @ 2:41 pm

The New York Times has unveiled an archival service called Times Machine which archives the past 100 years of the newspaper of record. Along with the benefit of seeing ads for trusses, we see a very sophisticated and robust interface using HTML + CSS + Javascript of a very easy way to scan large amounts of printed text. There have been so many of these kind of apps, almost always using Flash with proprietary back end processing, it's refreshing to see these sorts of interfaces with the code all public and easy to steal learn from.

In this case, the clever interaction design (and a hurdle for HTML) is to pair the actual article image (spanning multiple columns) with the text summary. The implementation makes scanning the paper a breeze and has a great visual clue of highlighting the image and overlaying the summary text. I'm delving into the markup to see how they managed to dynamically pair the images with the representative text, and seeing what other magic is under the hood.

Another nice feature was the rotating 'share' button, which takes care of not prominently promoting digg or reddit, but subtly reminding users that if they like to vote, here's where to do it. The only bad feature is that this is for paying customers only, but NYT has made free its online articles, hopefully in time this will follow suit, the days of microfilm readers may be numbered.

• Digg
• Reddit
• del.icio.us

Comments (1)

User Experience Design

Top 5 Iphone styled websites

Michael Dain, Friday, May 16, 2008 @ 10:43 am

In the oxymoron that was mobile web design for many years we struggled to try our HTML pages out on different mobile devices only to have to resort to stripping out anything resembling good design or usabilty. On my trusty RAZR phone, I was content with using java apps to display things in a meaningful way, but having to learn the arcane hotkeys for each app became a chore, and they went little used. With the iphone, the promise was that regular sites look like their BS (big screen) brethren, where users can not have to learn new interaction conventions for their favorite sites outside of zooming and moving around to fit the screen. However, there is a second wave of web apps that optimize their site for the iphone. Using conventional xhtml, css, and some javascript, with a few unordered lists you can distill most complex sites into something new, and in many cases are easier, faster, and better user experiences than the 'real' sites! I hope this gives notice to web designers to pare down things that users rarely need and keep things simple. You may have your favorites, please add them to the comments, and non-iphoners can usen this emulator to try out the alternate sites:

5. iPhlickr - http://www.chandlerkent.com/iphlickr/
What sets this apart is a seeming blur between the iphone features and the browsing world, when you select a photo, you can then share it, send it, or view it within the flickr world, unfortunately when iphone apps become available next month, flickr will probably become an 'app', but until then, this is a very ingenious and useful approximation.

4. Wikipedia

Iphones aren't fast in downloading data (yet) so when I want some info, I don't want a huge load time with lots of info that isn't getting me to my goal, this interface is very fast, and also does a great job in reformatting wikipedia content to take advantage of show/hide heading behaviors, which is a new iphone 'standard', and one that helps parse long documents quickly.

3. Amazon

A old-time favorite (was iphonized pretty much right away), but Amazon should be applauded by honing down their value propositions to fit on this screen, that is product, price, ratings. Thats it, and thats what In need when I'm thinking about picking up that camera in Circuit City, i want to swoop in and Amazon it for comparison and this does the job.

2. Reqall - www.reqall.com

I mentioned how much I liked this the other day, a technologically amazing mashup of voice/text note taking, plus some nice keyword recognition make a pretty darn useful to-do list! Add on the iphone interface, with good integration of thick finger style tabs, gets a reasonable amount of navigation in a small place to seal the deal. Bummer is that it makes you login every time, but I am lobbying for that to be fixed

1. Google reader - www.google.com/reader/i

I could say the google iphone interface, but the reason for this post is a huge shout out to Google for their revamping of the RSS interface for the iphone. I am super picky about RSS readers, my copy of NewsFire broke the other day in an update and I was in a panic to find a replacement, to no avail (I fixed it by installing a previous version). The thing I dislike most about other RSS readers is using the metaphor of email. I think we all get too much email, and RSS is not email, its more like a very personalized newspaper. The google reader nails this, and has kept me busy on train trips really enjoying reading stories, with excellent ajax integration, which really shines on the iphone since refreshing the page can take 20+ seconds, keeping info inline is imperative.

I also want to give credit to the password filler-inner 1password for their iphone interface, and twistori that shows that the same design works on both BS and little if the concept and interaction are clear. If I had a wishlist for sites I wish worked on the iphone it would be cellartracker (their regular site is not too great either, but the content is invaluable on mobile) and chase - if you are really embracing mobile users, let me really bank online.

The environment will change in the next month with the introduction of iPhone apps, but the resourcefulness of these developers to take 'plain ol' HTML and make a good user experience in a very constrained environment shouldn't be lost. Give your comments and contribute your favorites I may have missed.

Related Services: iPhone Application Development, Custom Software Development

• Digg
• Reddit
• del.icio.us

Comments (2)

User Experience Design

Design Pattern 7: Required fields

Michael Dain, Thursday, May 8, 2008 @ 11:20 am

It is one of the first problems of HTML markup that had no standard way to communicate to the user what they should do, I'm talkin' about the required form field. Personally, I have used some sort of asterisk in the past, coloration can work as well, but anything eye catching can distract from an error state (hey, you didn't notice we required that field, try again). So it caught my eye that the good people at reqall have an interesting pattern. In this case, make required fields have a bottom that is different from the non-required fields. This is fairly subtle, it took me a moment to figure out what it meant, but I give them kudos for trying something new. This is a long neglected design pattern of how to handle this in a consistent way, and this is a good a place to start. Its also a way to give a shout out to this service which mashes up text-to-speech, reminder lists, task distribution and has a nifty iphone interface as well, check it out!

How to do it

Here's a capture from their stylesheet, an interesting element here is I didn't know that you could restyle the drawn box of an input, so there is room for much variation. I also like the way they specified 'solid' to get rid of the horrid default 'picture frame' style of merging borders when they don't match, which always makes me flashback to 1998 web design.

input.essential {
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 3px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #016098;
border-right-color: #016098;
border-bottom-color: #990000;
border-left-color: #016098;
}

• Digg
• Reddit
• del.icio.us

Comments (2)

User Experience Design

Design Pattern 6: Definition lists : point/counterpoint

Michael Dain, Wednesday, April 16, 2008 @ 10:05 am

I encountered a similar situation to Noel's when developing a site recenty. The design called for, or made reference to, a opening and closing header with details shown or hidden by a click on that header. I approached it in a different way, which may be interesting to compare the two, but leave it out there to debate the merits of each. When solving a problem, I normally begin with the same axiom that was mentioned in an earlier post - What is it? What is it's nature? HTML markup, as you may know doesn't have much in it, a mere 20 or so tags, but with the addition of ID's or classes, you can uniquely identify everything the web has to deliver, which is pretty powerful.

In looking at the elements controlled by another element, the most fitting markup is a definition list. For some reason these elements are mysterious and not too often used. It is a list <dl> that can contain two elements <dt> and <dd>. Normally they have a default display of one element being bigger and the other slightly indented, as to look like a directory. So, with little or no work we can describe the two types of list elements, the 'header' - <dt> and the information that can be 'opened' the <dd>.

So having my markup, well, marked up, I can set aside the HTML, produce some styles for the list, but what about the complicated part? Adding the behavior to hide/show, make the <dt> clickable, swap the GIF's that indicate opening and closing, and while we're at it why not a 'expand all' or 'close all'. Finding it was no mean feat, but with some very creative google searching I found the script - http://www.tjkdesign.com/articles/toggle_elements.asp. So this handles all the heavy lifting, and basically degrades nicely in a non-javascript situation to show all elements. Problem solved.

The satisfying thing about this solution is that the code is clean, and easy to change, and any presentation issues are handled within CSS, along with any behavior in javascript, and handled by the client. I think the two approaches compliment and contrast each other nicely, add your own solutions to the comments if there are even better ones.

• Digg
• Reddit
• del.icio.us

Comments (1)

User Experience Design

Design Pattern 5: Can u rd this?

Michael Dain, Thursday, April 10, 2008 @ 9:29 am

Over the past several years, the web has been innudated with blurry, hard to read text. Users are forced to squint, struggle and enter this text exactly in order to proceed with their goal. I'm refferring to a method called a captcha, an image that normally contains letters that are intentionally obscured so that computer programs cannot 'read' them. While the need for this is understood, security against malicious scripts, the burden it puts on the user has only increased since these letters are usually not a 'word' and bent 'm's and 'l's easily become unreadable. All of this is to tell the system you are actually a human being, hardly something humans feel necessary to prove.

The amazing thing in the research realm of computer vision is that some algorithms are becoming able to 'read' this obscure text, making it necessary to make them even more unreadable. Recently, I have found this alternate 'maptcha' - being used on a number of sites, replacing the text with a simple addition problem. Not only was it less burdensome on the eyes, it seemed a bit fun to do a small math or counting exercise. I am curious if this is terribly insecure, or just a small revolt against the difficulty many users have with the other method. Either way, a great pattern to emulate, and much easier to use.

• Digg
• Reddit
• del.icio.us

Comments (1)

User Experience Design

Design Pattern 4 – Inline help

Michael Dain, Monday, April 7, 2008 @ 2:15 pm

I just had quite an enjoyable spring break trip with the family to Washington DC. For a town with lots of visitors, it was important to help people manage the different ways to get around, or more importantly get out of the way of the residents. Among many places, within the beautifully designed metro stations, there was often voice over assistance on different helpful topics. While I was surprised at the lack of multi-language support amongst these alerts, there was a particular custom that made me think of a similar pattern in software design, the help system.

Often designed separately, help in software systems is almost always out of sight of the actual user experience, and thus out of mind. On my projects I make it the habit to make room for, and design with inline help in mind. Inline meaning the help topic is written out on the page next to the area where it will be consumed. I find it keeps people from having to take fingers off the keyboard and mouseover a "?" icon to see if it anything helpful is there hiding. During planning, if the final text is missing, placeholder text is substituted. It helps show the developers that labels alone cannot help users determine how to proceed with completing the task. It also reminds us of what kind of help will be needed eventually in each interaction. I'm surprised at how much reaction it spurns in design meetings and helps clarify confusing procedures amongst other benefits. In short, the pattern is to provide some help where we are looking, rather than make users hunt, or worse, ask for it.

Back to DC, in the Smithsonian, as well as the metro, there are many escalators, and if you pay attention to the voice over, the helpful message is to "stand on the left and walk on the right". Having been plowed into more than a dozen times by people trying to get past me, it finally dawned on me that this is lacking inline help. I took this (blurry) picture in the Smithsonian, which it had two footprints on each side of the tread. The 'help' actually contradicted the rule. With some bad photoshop I erased the footsteps to the version shown here. While reminiscent of some ancient dance chart, I thought if this was the way it was stenciled, that people pick up on the intended behavior because it is where their focus is, not on the announcement, but on their feet.

• Digg
• Reddit
• del.icio.us

Comments (1)

User Experience Design

Goldberg workflow

Michael Dain, Friday, February 22, 2008 @ 5:11 pm

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!

• Digg
• Reddit
• del.icio.us

Comments (0)

User Experience Design

Design Pattern 3 – not page flips

Michael Dain, Wednesday, February 20, 2008 @ 11:27 am

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.

• Digg
• Reddit
• del.icio.us

Comments (0)

User Experience Design

Design Patterns 2 – web fonts

Michael Dain, Thursday, February 14, 2008 @ 10:15 am

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!

• Digg
• Reddit
• del.icio.us

Comments (2)

User Experience Design

Design Pattern 1 – faded breadcrumbs

Michael Dain, Tuesday, February 12, 2008 @ 11:48 am

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.

• Digg
• Reddit
• del.icio.us

Comments (0)

User Experience Design

Agnostic lightboxing

Michael Dain, Friday, January 25, 2008 @ 6:34 pm

The memo may not have gone out yet, but for a year or so now the scourge of popup windows has been erased from the user experience. I know that it has been blocked by browsers for quite a while but UXD designers once and a while need this modal stalwart, the dialog box to get their business done without distractions. Thanks to great coders out there, we have a replacement we call "lightbox" which you experience probably daily as the darkening out of the screen and the overlay of that modal box. Its very quick to implement, easy to code, and with some variations, can hold music, slideshows and other nifty content types. I use it constantly, but it has one drawback, the reliance on either prototype or jquery as a backbone to do it's magic.

While I put myself kind of in the prototype + scriptaculous crowd, the battle between these libraries makes it hard since you can only include one of them. Thus someone writes some "perfect for your audience" lightbox effect, but you need to change to jquery to use it. This happened on my own site where some lightboxes needed to play mp3's and others needed to show image slideshows, I had to make compromises and change from page to page, which was extra work, and kind of weird.

No more, thanks to Mr. Jackson, we have a new lightbox (that uses the correct attribute 'rel') that can take advantage or either library, or even mootools or YUI, neato! Look forward to delving into it, check out the download at http://mjijackson.com/shadowbox/ and cheers for choice!

• Digg
• Reddit
• del.icio.us

Comments (0)

User Experience Design

New Years Resolution

Michael Dain, Friday, January 25, 2008 @ 12:19 pm

I had a recent experience which helped emphasize how important it is to see things within the context of the user's environment. In this instance, I'm speaking of buying a new TV. Our "old" TV had served us well, was a high-def projection model, but with prices falling and screens getting brighter and flatter, I was able to convince the wife it was a fairly cheap midlife crisis purchase after all. But which to buy? Brand and reputation aside, the differentiating factor between sets were size, display type and resolution. If you haven't been pouring over spec sheets lately, the main idea is that there are two display types - Plasma and LCD and two main resolutions 720p and 1080p. For size, I wanted bigger or same as my other model so I wanted 47", 50" or 52". In my usually thorough fashion, I poured over different websites and user opinions and ended up buying the cheapest one that fit the bill... a 47 inch 1080p LCD.

The reality of setting this thing up turned out to be a fairly educational experience, all my time staring at rows of displays at Best Buy or Costco or reading Consumer Reports gave me a vague idea what were some good qualities to look for. But much like talking about what a user wants it didn't prepare me for what the real user experience difference there was between the resolutions and sizes. I really ended up finding out what all the jargon meant only when presented with the device in my own environment. It reminded me of a project where all the developers had 1680x1050 resolution monitors and the users had 1020x800 laptops. It was too tough to get the developers to realize that the way they displayed the app was removing some of the problems like cropping of text, the addition of scrolling to content, and other display problems they just weren't seeing because of their screen size. The solution I presented was to open the application in the specified fixed resolution (1000x780 or so). My point being that if they shared the pain with the users, we could build a better app, but high resolution is hard to give up, and they secretly went back to opening it full screen.

Setting up the TV I was unprepared for how vibrant the colors, and how sharp the picture, especially the high definition picture broadcast here in Chicago. There are definite advantages to higher resolution that 1080p provides (near 2 million pixels), but I noticed that as I moved backward, the screen became 'smaller' and the higher pixel count less noticeable. In all the reviews I had read, they focused mostly on comparing black levels and picture contrast, but never talked about how distance really effects the way you perceive detail, this article at cartonbale.com describes it well.
As I sat further back I became more and more convinced that a bigger TV was necessary, I just wasn't seeing the benefits, so I traded it in for a lower resolution 720p model at 50" for the same price.

The new model was certainly the right size, but now all I could see was the lack of fine detail, of course as I moved back, it looked fine, even better than before since the TV was noticeably larger. But I couldn't get over the feeling of something missing. A decent relationship with the pythagorean theorem helped (TV's are measured diagonally for some reason) determine mathematically what I was perceiving but couldn't find on spec sheets or by comparing screens next to each other at Best Buy. For purposes of this article I found this calculator will help you out with the math.

The iphone has a great screen - 160 pixels per inch and distance between dots is .15 mm which means it really goes right up to inches from your eye.

Display monitors like the 22 inch that we use on our computer - 90 pixels per inch - distance between dots .28mm - we can determine that closeup viewing within 1 foot looks good.

The first set - 1080p 47" set was 46 pixels per inchand a whopping .54mm between dots, still, closeup viewing even within 5 feet doesn't reveal the gaps.

The 720p 50 inch plasma set was 29 pixels per inch with a chasm of .86 mm between the dots, still, I don't know if it's the dots or the gaps or what, but with this display showing a mere 1 million pixels, it certainly seemed less detailed.

Or to put it more succinctly (courtesy of some forum post found at avsforum.com:

The human eye can resolve 300 dots per inch at 1 foot. The value is linearly scaleable. In other word 30 dots per inch at 10 feet. A 50 inch diagonal tv has a Horizontal width of 50 x .87= 43.5 inches. 1080 displays have 1920 horizontal pixels. 1920/43.5= 44.37 pixels per inch a 720 display would have 1280 /43.5=29.42 pixels per inch. A person with 20:20 vision can only resolve 30 dots per inch at 10 feet. Thus at 10 feet both 720 and 1080 displays should look identical . However as we get closer to the screen the 1080 display would start to look sharper. At about 8 feet the 1080 would really start to shine.

Removing all the picky bits about LCD vs plasma, setup, color temperatures and such, the lesson learned was even with the science involved, the main way to pick a TV is where you are going to put it and watch it. While a little part of me wants to upgrade to the 1080p set at 50inches, the extra money may not be that well spent considering my distance from the screen. So next time you're at the showroom, ask them what their return policy is, trying it at home is the only way to find out.

• Digg
• Reddit
• del.icio.us

Comments (2)

User Experience Design

Blue Christmas

Michael Dain, Thursday, December 27, 2007 @ 3:38 pm

I took time out this Christmas season to reformat my hard drive. Yes, it seems pitiful when you work with these machines all day, and have a chance to spend quality time with loved ones how machine maintenance would top the list of things to do. However, it did give me a chance to mull over a bit of design mystery which seemed a decent enough present to share with you all. Cozy up to the fire and let me tell thee about Windows Vista.
Being a Mac user, I do have a generally favorable impression of the Redmond efforts, I have a healthy background in their CMS system Sharepoint, and felt as long as you keep up to date on their latest and greatest (read beta) releases, you can almost forgive them for not being more mac-like. So armed with my copy of parallels, I installed versions of XP and Vista, and when my hard drive went belly up I decided to keep just the Vista version. Vista has a great deal of interesting abilities. I am a big fan of the voice dictation software/interface. In a quiet room, it is almost faster than typing. I think the paradigm of the 'explorer bar' is pretty well conceived mashup of a breadcrumb menu plus drop-downs. I'm surprised not to see a web version of this, since it really does have a fairly good affordance to the user of traversing a deep directory structure.

What really bothers me about the switch is the overall 'blueness' of the interface. It's relentless, and of course being good web 2.0 citizens, they got their gradient on, so its basically blue gradients for miles. Now, giving them credit, aqua (mac os x's first scheme) had the same problem, blue gradients for days, and the extraneous grey pinstripe thing, but yet it didn't seem as gratuitous as Vista. This is coupled with the inability to 'go grey' as XP used to allow. So, by redecorating, vista has 'painted' itself into a corner, unless users are expected to select their own gradient mixes (yellow to orange, puce to purple) they are somewhat stuck with blue. Also knowing microsoft, these are just bitmaps, so no redecorating is possible without replacing a bunch of .BMP's someplace deep in the WIN32 folder.

At the same time, Apple's Leopard has removed all hints of ever styling the chrome of their windows, even the pinstripe thing is removed and has gone all grey. They have also been having some fun with drop shadows (the 'other' gradient), in early beta's, and in Steve's intro speech, they spoke of how active windows really stand out. That was because active windows had about 100 pixels of drop shadow built in - which they wisely dumped. Overall, no color seems the best choice, in a black text on grey world, it tends to de-emphasize things well enough to let the user focus on the content at hand, photos, and clickable things (hopefully blue).

So, overall, why blue? If we look to web design, its pretty much the default color. It is hard to find a site that does not use blue as a background or decorative accent. Of course it is the 'real' clickable link color, and it is the color of azure sky in deepest summer, which is not a bad thing at all. In fact, since red is out, and yellow is kind of tricky, you pretty much have blue as your only possible primary color choice. However, color wheel not withstanding, it is hard to understand why blue has so much power over our virtual lives. About.com claims it's the color most preferred by men. It is also peaceful, tranquil, and productive. It is the least appetizing color- perhaps why foodtv chose green?

Perhaps web 2.0 has brought a reaction to this overall blueness, noting ebay has gone with yellow, but there will still be a strong reason to pick blue, it's like choosing IBM (pun intended) or the reason Microsoft is still the best choice for many reasons, nobody got fired choosing blue. Every other color has strong emotions tied to it, and neutrality (read grey) while being most suited to 'new' web design tends not to excite people too much. I actually have a difficult time finding a site where blue is not the predominant non-meaningful color. So, while I'm scouring google scholar for some actual research statistics on this phenomenon, please leave your comments on what interfaces sucessfully break this blue flu, and have a happy 2008!

• Digg
• Reddit
• del.icio.us

Comments (2)

User Experience Design

Worst user experience ever….

Michael Dain, Friday, December 14, 2007 @ 10:58 am

We were in a meeting talking about possible ways to showcase user experience design when I brought up statistics or quantifiable metrics. Everyone groaned, as they do when I bring things up, but mainly because it tends to be a bit of a sore spot in the world of usability, It seems obvious that good user experiences lead to more popularity, sales and general peace and happiness. However, percentage gains and metrics are suspect since there is no way to have a double blind scientific study of 'usable' vs 'unusable'. Thus, the practice of reviewing and refining the user experience can often be considered optional or put off till after release or just too hard to 'bake in' to the process because it doesn't produce hard numbers. In my defense I did come up with a situation where hard numbers and user behavior told a very interesting story.

The 'worst experience ever' in the title came to mind as an illustration of the confusion and opportunities that surround metrics and usability design. I speak of last months release of Radioheads "In rainbows" (since decommissioned). If you haven't downloaded the music yet, or heard the story umpteen times, it happens that Radiohead created a sanctioned way to pre-offer their new record it for download as mp3. Radically, customers could pay what they wished for it, including nothing. The real story as I saw it came from the way they managed this transaction - in the most confusing, user unfriendly way possible. The site is garish and difficult to comprehend, even though the download to the music is the only goal. You are asked to pay before even sampling the album. When purchasing, the amount is left blank, and in pounds, so no translation of other currency, no 'suggested' price. If you enter an amount below 1 pound you are greeted with errors, any questions or advice explaining the process all appear in popup windows, its a mess. When the user is finally able to complete the transaction, they receive nothing, but wait for an email with download instructions.

With all these hurdles, it only seemed natural to pay nothing, which I did, since it all seemed like some kind of con, as trustful as I am of their brand. After a few days (I did it before 'release'), an email arrives with a download link. Then you can finally sample what you (didn't) pay for. It was my intention to check out the record (which was quite good, actually), then return to offer a few buck donation to the cause. However, you have to essentially re-purchase the record as another 'person' so it seemed as though I would be guilty of 'stealing' it the first time, and I got busy and...well...

Even though it has been a kept secret of the band, news stories came out speculating that as many as 60% of people did not pay. Many commentators used this metric as somehow holding some significance of why and how people think of paying for music. No one mentioned the horrible shopping experience, outside of a few blogs like this one. In all, it should be noted that every person using the site did complete the task successfully, and no animals were harmed in the 'stealing' of the music. The only casualty was the business model. If the goal was to monetize the download, it failed in every respect by making it difficult and unwieldy for the user to pay a fair amount. However, the user was satisfied by getting the music they wanted. So perhaps usability is better defined as aligning business strategy with user goals? I know the statistics on the user behavior was much reported, so perhaps it's time for a double blind study for their next record - with a better user experience will people pay more? Can't wait.

• Digg
• Reddit
• del.icio.us

Comments (1)

User Experience Design