The Magical Powers of Progressive Disclosure
We’ve been designing some new components here at Convio lately, and one of those is what we’ve affectionately been calling “The Disclosinator” (adding -ator to the end of words makes you sound cool). The Disclosinator is designed to…well, to disclose things. But really what it does, or at least what it does first, is to hide things. It’s plain-jane progressive disclosure: the page loads, some functionality is hidden, and users can click to expose disclosinate it.
But here’s the funny thing — in usability testing, very experienced users of the system are discovering functionality they never knew existed because we’ve hidden it. Mind you, this is functionality that has existed for years, and users who have been using the system for years.
Ok, I hear you, I hear you out there. You’re saying that it’s not because it’s hidden at all, it’s just users doing what users do during usability testing, which is to poke around and click on new things. And maybe you’re right, maybe it’s just the novelty of it all. What remains true is that hiding some functionality with progressive disclosure, at least in laboratory settings, actually makes it easier to find.
Unnoticed Problems
People are fond of saying, “Don’t fix what isn’t broken.” However, in the world of usability, oftentimes people don’t know that some things are inherently broken. Take the measuring cup, for example. If you ask people what’s wrong with it, they’ll give you answers such as, “It’s slippery” or “the handle gets hot easily” — but rarely will they point this out:
It’s actually hard to measure accurately without pouring a bit, bending down to look, pouring some more, bending down again
Enter Oxo. They didn’t reinvent a completely new measuring cup — they simply saw an issue and decided to fix it by improving upon the original design.

Oxo measuring cup
It’s simple, and it solves a real problem — even though most people wouldn’t have noticed that it’s a problem to begin with. That’s what lies at the heart of user experience.
Check out this blog for more information on Oxo’s measuring cup (even includes a video clip of the design process).
Friday Fun: Low-Tech Photoshop
Sometimes in the midst of designing a screen, I wonder to myself why Adobe Photoshop has to be such a complex tool. But then I saw this photo and it quickly shut me up and made me into an appreciative Photoshop-lover once again.
Election Day is Over
Election Day is over, a new president has been chosen, and the country is breathing a sigh of relief. The campaign drama has ended, and a new drama will begin.
Some of the best pictures of the new president-elect can be found at the Big Picture, one of the best sites (in my opinion). Great pictures like the one below find their way to its pages.
Unfinished Swan: using white space
Designers talk about the use of white space in their designs:
- “It needs to breathe a little better. Maybe a little more white space?”
- “I’m having a hard time figuring out the different pieces. Maybe some more white space is in order?”
- “Maybe there’s too much white space? The design looks a little too loose and not held together well.”
Yes, I’ve heard that and a whole lot more. There’s a lot of merit to it. But have you ever heard of using white space as the premise for a game? This isn’t web design or user experience related, but it’s a pretty cool idea and marvelous execution. It’s also in the spirit of Halloween.
The Unfinished Swan - Tech Demo 9/2008 from Ian Dallas on Vimeo.
Windows 7: First Look and First Thoughts
When Microsoft does something, people are prone to take a look at it with great interest. Whether or not one likes them or uses their products, fact of the matter is they’re the industry leader and the decisions they make about their products affect hundreds of millions of users in the industry. So, when Microsoft introduced the ribbon UI in their new Office products, it was of very great interest to our team. Is there some way we can benefit from the new design metaphors and patterns they’re putting in place? It may seem strange and a radical departure from their previous UI, but what will adoption rate be? Does that affect how we design UI?
Microsoft presented a Windows 7 first look. Ars technica published a few screenshots and it made for very interesting reading.
First off, Windows 7 is very clearly a release focused on user experience. Unlike Vista, nothing new under the hood is really changing. It’s all the about the user interactions, and the upgrade of optimizing for user experience. To that end, Microsoft has huge gains if they can nail this one. It is, after all, the primary differentiator upon which Apple has recently been dominating the market–if not in fact of dollars and laptops sold, then at least in market perception. Microsoft has a huge resource in their Customer Experience Improvement Program (CEIP for short), and there’s a lot of data there that can be leveraged. Not only for them, but for other designers like us. For example, there’s this gem:
Through the Customer Experience Improvement Program (CEIP), an optional, off-by-default feature of many Microsoft programs, the company has learned a great deal about the things that users do. For example, from CEIP data Microsoft knows that 70% of users have between 5 and 15 windows open at any one time, and that most of the time they only actively use one or two of those windows.
As user experience folks, we know this. But having actual numbers and raw data reinforces the significance of this fact. And Microsoft has sought to leverage this gem of data to change their approach to the Windows 7 taskbar, jump lists, and windows management (e.g. maximizing, restoring, resizing, viewing, etc.).
My first gut reaction to the Windows 7 preview is skepticism. I’m not sure the changes they’re introducing into the OS will be a significant improvement to the actual user experience. Microsoft products have (of late) exhibited the tendency to be overly helpful, sometimes even hindrances to the actual functionality the user wants to access. I feel that way about the windows management system, particularly the preview popup functionality off the taskbar, and the jump lists. Moreover, the look and feel of the OS seems a tad overboard, introducing a little too much visual clutter (and flash) so that the OS disturbs rather than enhances and empowers the user.
What does Windows OS need to do to go to the next level? I’m not sure and I’m still trying to figure it out. But I’m gratified to know that the big guys in Seattle are probably wondering the same thing.
And while we’re on Office news, here’s the latest via Microsoft: Office is going online in the next release. Very cool.
Case Study: Mapping Newspaper Political Endorsements
I’m always on the lookout for fresh, new examples of data visualization. It’s best to learn from other folks who are doing a good job.
So I ran across this and it struck me as a neat mashup of available data which was originally presented in a numbers format, but has been re-presented in a visual format to draw out (visually) some of the overall trends and patterns.
Phillip Kromer took newspaper endorsement data from the Editor and Publisher pages, and mapped the results. It’s an interactive map trying to understand the oft-heard accusation of left-leaning bias in the media. I’m not looking at this from a political slant, but interested in the data visualization and what I can learn from it as a designer.
My first impression was: “Cool!” But that quickly devolved into, “This is confusing. What’s going on?” It looks neat, but the context wasn’t clear to me until I paused to understand the legend. Even then I found myself reading the thing multiple times, checking the visual, and trying to understand what was being portrayed so I could start drawing conclusions.
One point of confusion, unfortunately, are the many layers of data on this visualization, but that their sum complexity rather than providing a keener insight into the problem, only muddies things up for the viewer who’s trying to sort through everything. Here’s what I mean:
- Layer 1: Red state and Blue state. Although it’s a bit simplistic of a model, it’s what many of us are used to. New York is a blue-leaning state, as is California. Texas, on the other hand, is a red-leaning state.
- Layer 2: Circles represent media outlets and their circulation size. Big circle means big circulation size, and small circle means small circulation size. No problem so far.
- Layer 3: Here’s where we get confusing, and if you’re not careful, it can be a doozy. Color of circle indicates a media outlet’s political endorsement: Red-filled circle = McCain, and blue-filled circle = Obama. No sweat.
- Layer 4: Exterior color of the circle (or lack of) indicates which candidate the media outlet endorsed in the 2004 election.
Now, I don’t know about you, but I think Layer 3 is fine. It makes sense. Even Layer 4 (conceptually) is okay… but the legend is absolutely confusing:
It’s confusing because Kerry (’04) is in Red and Bush (’04) is in Blue. Huh? Why do that? That breaks the mental category which which we’re familiar. We’re used to working that way, why upend it and introduce a legend that breaks our familiar categories? Sure, the legend makes sense in an of itself. But because of a viewer’s pre-cognitive categories, it can really leave a viewer in a lurch who’s trying to interpret this visualization.
That’s something we definitely want to avoid as we try to build a usable product. How do people think? What are they bringing to the table even before they reach this feature or task we’re building, and how do we account for that so the UI is consistent (or, even better, leverages) what they already know and are famliar with?
Where Do I Vote? Google’s Steady Enhancement
Google Maps recently put a Vote widget on their Maps landing page that tells voters where they can vote. It’s simple, it’s useful, it’s relevant to the times.
One thing I appreciate about Google (in addition to their motto, “Don’t be evil.”) is the progressive, steady enhancement and additions they keep on putting into their products. The amount of change, for example, is remarkable each time I open up Google Docs, although one could hardly tell if you were to open it up each day. It might be one button. It might be changing the look of the tabs along the far right (especially the discussion and sharing functionality). But the sum total of this steady change is a constantly evolving product. Bad decisions can be backed out and don’t have such significant impact. And good decisions stay in, and themselves continually improve.
What can we do to incorporate this steady drumbeat of progress into our team chemistry and workflow?
Link of the Day: ILoveSketch
Talk about cool, this is a fascinating new sketch tool. I don’t know that it’s terribly relevant to web application design. However, I can see its relevance for 3-dimensional modeling, particularly for video game character and environment design; automobile or airplane conceptual modeling; animation concepting.
It’s neat to see tools for artists continue to advance in such a way that their creative modes need to constantly change and adapt to take advantage of these new mediums.
ILoveSketch from Seok-Hyung Bae on Vimeo.





