I periodically visit Google Analytics as it has the interesting responsibility of presenting a massive amount of data in a consumable form.  Given the numbers in the screen capture below, I derive more value out of interpreting their design decisions than I do analyzing my “readership” ;)

You’ll find much discussion on the relative merits of pie charts (or lack thereof).  Keeping the discussion focused on this display, the pie chart and area required to display it consume nearly 50% of the available width.  It’s the main draw here – large and full of bright, vivid colors.  It’s labelled with the percentages (kinda what the wedges should already be tellin’ ya, amirite?), forcing you to map between the various colors and labels several inches away.

If relative comparison is important (it is important for platform support decisions), what if we embedded a bar chart inside the table?

This allows easy comparison between the browsers themselves though I’m unsure if, without first looking at a visit percentage, it would be clear the row color consumes 50% of the table cell.  It may also not be as aesthetically pleasing than the tidy compartmentalization on the first image.  There are benefits to this approach, some of which come simply from choosing to use a bar chart in lieu of a pie chart: better area utilization, avoids having to map swatches/browsers to slices, etc.

Continue Reading

Here I am creating a new To Do item.  In the “Date Due” field, watch what happens when I type “Monday” and press ENTER.  Remember that today is Saturday, June 6, 2009.

M-o-n-d-a-y <enter> June 8, 2009 <enter> <committed>.

Would anyone have been surprised if instead, any one of the following occurred?

• A popup chastised me for “Invalid format!”
• A popup chastised me for “Invalid format! Please use DD/MM/YYYY!”
• A date picker appeared, with the next months’ worth of Mondays highlighted, expressing its confusion over my ambiguity.
• A confirmation dialog appeared asking me if I really meant July 8th, 2009.  Yes/No/Cancel?

Probably not.

Now I’m not saying this free-form entry field for dates is a usability needle-mover, just that I was pleasantly surprised that when I said Monday, Apple Mail assumed I meant the following Monday.  By the way, Outlook 2007 makes the same assumption in the Tasks view.

As designers and developers, we need to have this courage of our convictions to say “Yes, this is a reasonable interpretation of that input” (tested, backed by research, etc.!), giving our solutions the same social presence as that had by a helpful assistant.  This means making reasonable assumptions when told what to do, and not harassing our users with needless confirmation.  In 2009, with the availability and power of development frameworks, there’s no excuse for it.

Continue Reading

In January of this year, Alan Cooper was interviewed over at Info Queue:

I wrote a book called “About Face” in 1995 and I wrote a book called “The Inmates Are Running the Asylum” in 1999 and both of these books were pluming this idea of how does software get constructed and how can it be designed well from the point of view of how it behaves in the world, as though it were a person with a social presence.

What I’m seeing more of these days is increasingly complex software with more verbose labeling and explanatory passages.  It’s not surprising given Cooper’s impact on design and that others like Luke Wroblewski in Web Form Design suggest something similar:

• Think about how a form can be organized as a conversation instead of an interrogation.
• Clear, conversational language can clear up potential ambiguity.

Take the advanced administrative interface for Netgear’s ReadyNAS Duo network storage device.

Previous iterations of interfaces like these would have made do with the terse, less expository text adjancent the combo box.  With the conversational tone and actionable quality of the additional text, boneheads like myself have all the information they need to know whether or not to enable this feature.  For interfaces like this used once in a blue moon, learning is irrelevant.  Infrequent use means that you re-learn the entire thing from scratch each time you use it and this text is a life saver.

What’s great about Netgear’s decision to bold the label is that advanced users can happily scan on by without reading the additional text.  I’m pleasantly surprised by this level of sophistication from a network hardware company.

Continue Reading

To the left are the standings for the NHL’s Eastern Conference.  The teams placing 1st through 8th are ordered by points and when the points are equal, tie-breaking rules are applied.  I’ve highlighted the 1st place (Boston) and 8th place (Montreal) teams.

Why is playoff ranking important?  It determines who has home ice advantage during the playoffs.  During a best-of-seven series games are played as such: home-home-away-away-home-away-home.  The team ranking higher plays 4 home games and 3 away games.

During the playoffs, it’s typical for a new interface to be used to display playoff matchups.  For the 2009 Stanley Cup Playoffs, here is that UI, with the Eastern Conference selected (notice the word “EAST” in white).

Before we get started, sports fans will recall how games are listed in box scores.  It’s always “away team – home team – eastern time zone time”.  For example if Vancouver was playing at San Jose at 7pm PST, you would see a listing for “VAN-SJ, 10pm EST”.  This is the same across all sports, not just hockey.

Now, notice the areas indicated in green and remember: Boston is the #1 team in the playoff seeding, and Montreal is #8.

“Well Boston is the home team for the first game, so I’ll put their icon second”, choosing to use box score game description to denote the brackets.

The problem is that when displaying playoff brackets you always display the higher-seeded team first from which any sports fan is able to instantly derive where the games are played / who has home ice advantage.  Otherwise this picture is interpreted as “#1 Montreal versus #8 Boston”.

Yahoo! even confused itself.  By the time the next person started working on the bottom of the UI, they must have understood playoff rankings and used the position of the bracket icons to draw the seeds – listing Montreal as #1 and Boston as #8 (3rd green box above the photographs).  Oops!

There is no standard to be found for how to display playoff brackets, it’s a format that’s been around as long as I can remember – not in the rulebooks though.  If you have a look at NHL.com or ESPN.com you’ll see what I mean.  This is How It’s Done(tm).

This underscores the need for domain knowledge when working on a UI and beyond that, a basic level of understanding contemporary design patterns that you won’t find in books.  I would characterize this as a very soft, advanced skill because unless you understand the basics you can find yourself “off the reservation” doing something that’s done on a couple of sites / applications / devices you personally prefer.

Continue Reading

My company recently switched (back) to WebEx for our web conferencing needs.  To begin the signup process, you complete an “email answer-back”, meaning that WebEx sends you an email which verifies that you have access to your email account.

The first step is to assign you a password.

There are a few things that have me concerned:

1. The new password is displayed on my screen, “in the clear”.  Rather than assigning me a made-up password, how about allowing me to change the password right now?  Certainly WebEx doesn’t expect me to remember this randomly generated password.  If the next reasonable step is to change it, allow me to do that right from this screen rather than require me to search through the WebEx plug-ins or website.
2. The password is so complex, I have to write it down.
3. There’s no indication that I’m able to change it, and quite the contrary – a strongly worded message instructing me to remember it.  I darn well better write it down! (I took a screenshot – it was easier than writing)

I’d prefer not to write it down (I don’t have to write down any other passwords – why start now?).  My first order of business will be to figure out how to change my password.

Before getting started, I’ll quickly peruse the receipt WebEx sent out:

I have a dream… That one day, WebEx will refrain from displaying my password.  At this point, I’m assuming the worst WebEx is doing is storing my password in the clear in their own internal databases, though with their propensity to flaunt my secrets willy-nilly, let’s just assume they have a monthly newsletter containing the passwords for all new accounts, distributed to local newspapers and radio stations.

Well, I’m going to give WebEx a piece of my mind.  By sending a carefully crafted letter to customer service, I hope to achieve real results!

WebEx, digging deep into their bag of tricks, surprises me yet again!

Not only is WebEx putting my password in Christmas cards to all of their customers, they don’t want to hear about what I think of such things.

WebEx, you’ve won.  I’ve given up.  I’m walking away, with my tail between my legs.  I’m quietly changing my password and moving on.

Well, not before WebEx sends me a few parting shots.

Is the password “invalid”?  Or does it not meet WebEx’s security requirements?  More than one “letters”?  More than one “numbers”?  With examples of what letters and numbers are?  The “host name” is an “easy-to-guess characters”?

To be clear, I’m not picking on the individual responsible for this dialog and error message, I’m picking on WebEx for choosing to assign work in a sensitive area (enforcement and communication of password strength requirements) to a non-native speaker.

How about something like this?

Here is a dialog:

• That does the work of both dialogs above.
• Indicates which of the criteria have been met (although I should incorporate display of the company and host names just so you’re sure).
• Allows you to proceed while alerting you to your password strength.

Taking this further:

• Distinguish between “required” and “optional” criteria (perhaps with horizontal rule and some labeling).
• Indicate password strength along a spectrum or use of grading.  “Your password is of MEDIUM strength.”

If your password requirements are too stringent, people have to change the way they work with your system, and that’s never a good thing.

Stepping back, if WebEx were to run a survey on their brand after the first 15 minutes, what do you think the results would be?

• “insecure” – passwords in the clear both in the browser and via email
• “sloppy” – customer service email address incorrect, confusing wording/grammar in the password dialogs
• “annoying” – requiring me to remember difficult passwords, not immediately apparent how to change them, excessive password requirements (if it’s stronger than my bank and doesn’t have my money, it’s excessive)

What baffles me about all of this is that this process is undertaken by all of WebEx’s users.  Anyone hosting a conference signs up for an account like this.  The password requirements are so strict that a majority of them will experience at least one, if not both password error dialogs.

After recently finishing The Designful Company and going through the WebEx provisioning process, you realize that it’s not just the product itself…  We’re a world away from the WebEx conferencing software (which works quite well) though we’re still solidly in the realm of an experience that would benefit greatly from design.

Continue Reading

There are (fortunately!) many examples of modeless feedback these days, and I’d like to take an opportunity to briefly highlight two of them.

THE GOOD

Amazon.com’s new modeless indicator of shopping cart content!  The button you click to access your cart changes to reflect the number of items you’ve added.

Note the placement of the number ‘inside’ the cart.  Terrific.

The icing on the cake: a mouseover displaying the contents of your cart!

If anyone is interested, that D3X is on my wish list, so feel free ;-)

THE BAD

Well, bad modeless feedback is akin to bad pizza – it’s tough to get it so wrong as to be detrimental.  Hey, at least it’s modeless :-)

THE ?

Ever notice that Gmail will display the name of the next off-screen responder in your conversation?  It’s here:

And a close up:

Is it the next off-screen person in the conversation?  Or the next person that isn’t me?  It’s puzzling enough that I’ve never bothered to understand its utility, though scrolling through a long conversation, it’s a bit distracting to see the color and value change frequently.

What exactly does it mean and how would it change my behaviour?  Would the contents of this mouseover ever prompt me to scroll or stop scrolling?

?

Continue Reading

As stackoverflow grows in popularity, I’m seeing it as frequently as Yahoo! Answers when asking technical questions.  Doing a bit of Rails lately, there I found the answer to my question-of-the-moment.  Stackoverflow is about us helping one another, so I had a look at the front page to see if I could return the favor, when I noticed this question:

There are some great examples in there, tinged with frustration – the same motivator that is responsible for this blog.  I pointed the OP towards this site, as I have about a years worth of gripes saved up :-)  Before posting, I noticed that it’s possible to get credit for responding.  In order for me to login (to get credit), I have to choose an OpenID provider.  OpenID?  What’s that?

From OpenID.net, “What is OpenID?”

OpenID lowers user frustration by letting users have control of their login.

Less frustration?  More control?  Let the healing begin!

Here we are at the OpenID login prompt.

I’m not quite sure what to enter in this field, though I do know how to use a drop-down.  Let’s see what happens.  Note though, that I’m interacting with the components in reverse order, using the drop-down to fill (or understand) the contents of the login field.

I have Yahoo!, Google, Technorati, Flickr and Blogger accounts and maybe an AOL account from 10 years ago.  Which of these is the right choice?  What are the ramifications?  My Google and Yahoo! addresses contain a lot of personal information; will it be visible on the site if I choose it?  Will stackoverflow have access to my personal information?  I choose Google (for no reason really) while feeling a sense of empowerment and control like never before.

Next, the “login field” appears as below:

Is this correct?  Or a bug?  What does this mean?  Should I replace this with my Gmail address?

The only two things I know about OpenID so far:

• I should feel like I just landed on the moon having ridden a rainbow of non-frustration.
• The administrator at stackoverflow knows that “OpenID is awesome” and that it belongs with at least one person.

That posting at uservoice (a request to not require OpenID) has many comments: should stackoverflow be using OpenID?  Will it limit site adoption?  My guess is that it would have many more comments though it was declined as a feature request and cannot be voted on.  Understandably so, as OpenID is quite contentious.

Jeff Atwood, author of codinghorror and the founder of stackoverflow has this to say:

…which means the real question is not whether or not stackoverflow should be using OpenID.  It is this:

How can stackoverflow increase satisfaction with its OpenID implementation, such that the purported benefits of less frustration and more control are realized?

One would start by learning from others, such as Yahoo’s OpenID Best Practices:

Promote the utility, not the technology. To reach the majority of users who aren’t familiar with OpenID as a technology, promote the ability to log in using an existing account, not “OpenID” itself.

Or even uservoice.com.  In order to login and reply at uservoice, Jeff would have had to go through their OpenID sign-in process:

An OpenID login process, with no mention of OpenID.  Clicking on “Google” sent me over to Google and voila!  I’m logged in, all the while completely unaware of OpenID and its empowering effects.

Stackoverflow gets a lot of things right.  The site is responsive, the UI is slick, sharp and minimalist and if you get as much of your technical help from message boards and blog posts as I do, you’ve got to love the idea behind it.

What Jeff should keep in mind is that if he’s going to evangelize, he’s got to do more than the bare minimum.  Simply stating your opinion and creating an implementation-model UI isn’t going to win him any OpenID converts.  In fact, quite the opposite – provably so from the momentum of the aforementioned uservoice posting before it was locked.

I do hope stackoverflow nails their OpenID flow, at least for my sake because I’d love to get credit for my responses ;-)

Continue Reading

That’s a line from 2007’s The Lookout, now playing on the Encore network.

What accounts for Firefox’s success has been covered ad nauseum in comparisons of the two browsers – better security, smaller disk and memory footprint, faster rendering, etc.

What many may not know about Firefox is that it has a tool that has become a necessity for web development – Firebug.  Firebug is an add-on that allows you to inspect HTML, CSS, and JavaScript and modify content on-the-fly, allowing you to quickly find and solve problems with pages during development.

In 2007, Microsoft introduced the Internet Explorer Developer Toolbar, which does similar things though not nearly as well.  Going from Firebug to IEDT is a noticable step down.

Combined with a better interpretation and implementation of various web standards (most importantly CSS), Firefox and Firebug are the tools of choice for every web developer I’ve ever met.  Internet Explorer is quickly becoming (let’s not kid ourselves – it already is) an also-ran for the web development community, only fired up when a bug is filed.

Take Salesforce as an example.  Salesforce is considering dropping support for Internet Explorer 6 later this year, at least for newer features.

“In addition to working on next-generation UI, we frequently wrestle with random, difficult-to-reproduce, hard-to-fix bugs in IE6.  And while we admittedly love a challenge…working around bugs in older browsers isn’t really how we want to spend our time.  In fact, investigating and coming up with solutions for bugs that appear only in IE6 robs us of time we would rather spend on new feature development, which is what we love doing and where we believe our customers would also prefer we focus our efforts.”

“But our current thinking is that our next-generation UI enhancements, to be released starting later this year, will not be supported on IE6.

This is one part natural decline in usage of IE6 and one part frustration in working with a poor client tool.

As another example, at work we make heavy use of Rally, a tool for managing Agile software development processes.  Rally is all but unusable on IE7 (I wouldn’t even attempt to use it with IE6) as it makes heavy use of AJAX.  The more front-end code you’re cutting, the more it behooves you to develop in an environment that provides a compelling advantage and right now that’s Firefox.

Microsoft has the money and Microsoft has the power yet developers have fled from the platform.

The web is now being defined by those developing for it and they’re increasingly focusing on Firefox first and Internet Explorer second. It’s the quickest way to get a site launched.

…which begs the question – do they really have the power?

Continue Reading

I received an email blast from Bioware, makers of Mass Effect, one of my favourite games of 2007 (the other being Bioshock, not actually made by Bioware – strangely enough).  The email pertains to some new footage of Dragon Age being available, a game under development.

First, an age check:

Why, after being asked for my age did I end up here?

By offering 2008 as a choice in the dropdown, I end up doing something I do on a regular basis – enter today’s date.  It was purely automatic; I did it without thinking.

I occasionally make this mistake during “age gates” when the dates run up to the present.  Are there really that many 1-2 year old cruising Bioware, looking for hot footage of this game?  At least kick out the current year to nudge me out of autopilot.

Starting up Safari did the trick ;-)

Continue Reading

With my recent upgrade from the D200 to the D300, I realized that my 512MB and 2GB CompactFlash cards just aren’t going to cut it anymore.  RAW files are twice as big as when I picked these up for my D70, and these cards are just taking up space.

I always consult Rob Galbraith’s CF/SD Performance Database when picking up new cards.  The SanDisk Ducati 8GB was what I choose (I’m still on the fence about whether or not the tie-in is cheesy or sexy) for two reasons: 1) Top performer at that capacity and 2) Rebates!

Here’s the second page of the rebate form:

When designing a rebate form that is to be filled out and printed, I have two suggestions:

1. Make the PDF a fillable form, meaning you can fill it out electronically and then print it.
2. This form is 62% covered in solid black and red meaning I have to pour ink into my printer like oil into my first car.

SanDisk is no stranger to providing rebates, so I’m guessing they either struck a deal with HP to use up all of our ink, they dislike the environment, hope we don’t fill out the forms or some combination of the above :-)

Continue Reading