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.

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.

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?

What a cool idea Google has: bucket testing.

The company regularly tests out unannounced new features across a small percentage of its users to see if they are worth implementing on a wider scale (this is called bucket testing).

As a user experience professional, I remember my job isn’t just designing user experiences. I’m not simply an advocate behind company walls, lobbying for our users and their needs, pushing back when requirements or features get “too functional,” in the sense that they’re so functional they alienate and introduce hard-to-use UI.

My job is also to user test our features and designs, to get feedback as part of the design process to make sure our assumptions are validated by real, living and breathing people. So, what Google does is cool… bucket testing. It’s food for thought: kind of a shotgun usability test, automated instead of personal. One drawback I see is I’d be basing design decisions on self-reported claims about their needs instead of observing what they’re actually doing. All sorts of people write about this distinction, notably Jakob Nielsen and another usability guru, Steve Krug.

In the last release, we did some crazy stuff: we got rid of the Previous button.

Yes, I know, what were we thinking? Part of our design team’s reasoning had to do with clarifying the visual cues in our multi-step forms, which our clients have to use for virtually everything they put together (i.e. Advocacy Action Alerts, Fundraising campaigns, Email campaigns, etc.). There’s so many buttons and links, garish greens and squished dull grays and purples all coagulated together in a row. It wasn’t pretty, nor was it usable, and with some of the bandwidth we had, our team jumped in to do a little cleanup: functionally, usability, and visually as well.

It was fun, and it was a first step to visually refreshing an admin interface that needed it. BUT (where’s the story without this word, right?), there was a lot of pushback. It was good pushback in the sense that we had a whole lot of feedback internal to the company from all sorts of people: developers, product managers, services, training, engineering management, our own usability team, the entire gamut. What was good about all this were the kind of conversations we were able to have:

• What kind of negative (or positive) impact will this have on our clients?
• How are we going to communicate the change to our users?
• Will our users like the change?
• Will the change be appropriate for all the different levels of users, from the novices and “I’m scared of technology” folks all the way to the power users?
• Can we solve the problem another way without impacting so many people?
• What design principles are we abiding by?
• How does this affect accessibility? Visual impairment? Screen readers and tab indexes?
• Does the design decision have hard evidence and numbers supporting it?
• Ultimately, is this the right decision?

You can imagine that all the feedback gave our team an opportunity to think long and hard about the choices we were making, and also to engage in discussion, build consensus and arrive at a solution we could all agree on as the best solution.

On the one hand, why all the hubbub over a Previous button? Or a Next button? But then again, I ran across this discussion on the Interaction Designers forum, and with over 75 comments, it seemed like no one person has a good answer.

Cheers and Kudos to the entire Convio team that was willing to start our own conversations so we could arrive at the best solution for our clients, no matter how small or insignificant the change might seem to be.

With Easter Seals as one of our clients, we’re all into accessibility. I even got a coworker who’s visually impaired in one eye and she has strong opinions about some of our designs. Together with Richard (our accessibility compliance guru), that’s great for us because it means our team’s under the scrutiny of some pretty watchful and interested parties. It means we have accountability for this thing called accessibility that all too often gets short shrift in the www.

I recently read a post titled, Are you giving accessibility the consideration it deserves in the user experience? Talk about direct. But this is worth noting:

There are still lots of ways for designers to screw up accessibility, and I think that a lack of exposure to how our work behaves for people using assistive technologies means that we don’t understand the impact of the decisions we make sometimes.

Developing an understanding and awareness of simple ways to avoid common accessibility problems, and ensuring that, as we design, we spend just a little time checking our work to make sure that we’re making life easier and not unnecessarily difficult will provide lots of benefits for very little investment.

I guess that’s why subscribing to blogs like 456 Berea Street is a good thing, as is watching videos of people dealing with computer accessibility.

A big part of usability has to do with taking complex data, and presenting it in a visual form that makes sense of as much information as possible as simply as possible.  After all, spreadsheets with their many rows and columns of data are great, but they’re not the most intelligible.  Good information design is one of the problems our team’s constantly trying to tackle.  There’s a whole lot of complex data our clients are trying to pull, having to do with click-thru rates against different segments from major donors to activists to those who are mildly interested, parsed out by geographic location across different swathes of calendar dates.

All of this is just to say that we’re always on the lookout for interesting ways information is graphically visualized and presented.  When the thing being represented is interesting, all the better.  So recently I ran into this graphic of the mysterious world underneath the seas that powers and drives our internet.  Ever wonder how many cables run between Japan and the United States, or which cities are the hubs of our information network?

Smashing Magazine has a treasure trove of modern data visualization, and how can we talk about this topic without referencing the very famous (perhaps, most famous) Charles Joseph Minard’s graphic of Napolean’s March to Moscow?

Wells Fargo hired Pentagram in 2005 to start a project redesigning their ATMs, both the hardware and software UI.  ATMs, we all know, are a bane of interaction design.  They’re prevalent, necessary, and well-frequented for most of us.  Unfortunately, they’re also terribly confusing and cumbersome.  Among their many problems include:

• the path to completing tasks often crisscrosses different buttons at different cardinal points of the screen.
• “Yes” and “No” actions are frequently switched depending on which task you’re trying to complete
• the only feature most people care about is “Withdraw Cash”.  And no one really knows what else you can do besides “Make a Deposit”.

Former Pentagram designer Holger Struppek writes about the Wells Fargo ATM project.  Research:

From looking at usage statistics, the design team learned that the single-most used feature of an ATM is the cash withdrawal. Even though many more services are available, most people simply want to be able to quickly and safely punch in their security code, get the cash, and leave. The objective for the new UI was to continue to offer quick and easy cash withdrawals, while making the other services more visible and accessible.

Being clear about the objective, the task and the goal that needs to be accomplished and completed, is one of those “must-haves” for designers.  For Pentagram, not only did they do away with the antiquated hardware buttons on the side of the screen (hooray!), they thought about how to meld shortcuts and personalization together:

Instead of one Quick Cash button, we introduced a whole column of shortcut buttons that behave somewhat like the History menu in a web browser. It is still possible to customize them through Set My ATM Preferences, but hardly necessary since they always reflect the most recent transactions.

Cool idea.  I think it actually works well.  My one beef with it (besides the color palette, but what can you do? Those are the corporate colors…) is the use of the icons on the top right of each button.  Why does “Get Cash” have a negative “No Smoking” “don’t-do-this” icon?  Shouldn’t it have been a cash with a 3D down arrow, signifying withdrawal?

Good read nonetheless, and a reminder that interaction design is the same whether online or offline because the subject is always the same: the human person.

When we first put the idea and mockups in front of Ben Brumfield, the lead developer for the project, his enthusiasm erased any doubt we might have had about how far we could actually go. For designers, after all, that road between concept and implementation is seldom trod faithfully. I mean, the concept is like the charted course at the beginning of the voyage, and one can only hope s/he doesn’t end up like Columbus in a totally different place, on an unpredicted, unplanned route.

We’re very thankful to say the designer/developer rift prevalent in much of our industry didn’t exist at all in this project. And what was produced is, I think, a rather pleasant and rich user experience. From static experience to a fluid, inline, fully CRUD (create, read, update, delete) UI, we were pleased at the result:

This cross-posted from the original post on our Convio company blog.

Good usability is like housecleaning – you only notice if it’s not done. So I’d never thought much about my alarm clock – the same one I’ve had since I was around 13 (that’s well over half my life at this point). But then I came across a discussion of bad design in everyday objects and realized how lucky I was.

If you’re anything like me, you put enormous trust in your alarm clock. “Waking up naturally” and “not being chronically late” are not two ideas that can co-exist in my world. Most of my home electronics are strictly about convenience (microwave, coffee maker) or entertainment (music, television). Even my cell phone, while handy, is not that crucial to my everyday life. But without my alarm clock I’d be – well, I’d probably be home in bed. Which doesn’t sound so bad, actually; but it would certainly have an effect on my professional life. When I travel, I always have some degree of anxiety that I won’t wake up. If I’m in a hotel, I typically set the alarm clock, and also the alarm on my phone, and also request a wake-up call, just in case. How do I love my alarm clock, (and eye other, lesser models with suspicion)? Let me count the ways…

• It has two alarms. I don’t like setting my alarm on the weekends, but I inevitably have to. So I reserve Alarm 2 for weekend wakeups. This way I never really have to worry about if my “work” alarm is still set for the right time, since I rarely change it. The display tells me which alarm is currently on.
• It’s easy to set the alarm. The time setting controls are touch-panel buttons – fast and slow, forward and reverse. “Fast” in either direction moves the setting at the truly fast rate of about 15 minutes per second (actually, less than a second — I’ve done agility training with my fingers and that fast button, and I can’t get down to below 15 minutes per touch). “Slow” is about one minute per second. I don’t have to worry about going over my desired time, because I can always back up.
• It’s easy to NOT set the time. Both the alarms and the time set controls are slide switches. The time-set slide switch is on the side, far away from the alarm-set controls, which are on the front. Since the time setting function only works if the time-set switch is on “time set,” it’s almost impossible to change the time by mistake. If I do need to set the time, it’s just as easy as setting the alarm. Many alarm clocks require you to press two buttons simultaneously to set the time (or the alarm, for that matter). Time setting should not depend on timing, if you know what I mean.
• The snooze button is prominent and nowhere near the “off” button. All I have to do is slap the top of the alarm in my sleep-fogged haze, and I get 7 more minutes of blessed sleep time. I know some people don’t believe in snooze buttons, but I don’t understand those people.
• The snooze button obeys me, for as long as I tell it to. I’ve heard of some snoozes that simply stop working after an hour. I don’t often feel the need (or have the luxury) of snoozing for over an hour, but if it happens, I don’t want my snooze button to get distracted from its job.
• The alarm stays on for an hour. This was less lovely when I used the buzzer setting, but since I’ve discovered that I can actually wake up to the radio, it’s nice to then get ready for my day with the radio on. And if it turns itself off, I know I’m running late. I usually turn it off as I’m headed out the door, but if I forget, it will do it for me.
• I can turn the alarm off without un-setting it. I can also turn the radio on and off throughout the day without disturbing the alarm setting. The controls to do this are two wonderfully simple panel buttons – one says “On.” The other says “Off.”
• The display has two brightness settings. As I’ve gotten older and also developed the habit of keeping my alarm far, far away from the side of my bed, being able to set the display to “bright” has come in handy. The “dim” setting is appropriately dim, and the “bright” setting is appropriately bright.

Sadly, my alarm clock is also incredibly ugly. I didn’t realize just how ugly until I was photographing it for this article. Here it is in all its 20 year old glory:

It’s true that my alarm clock favors function over form. It was made in the 1980s, after all, and has been with me through 3 states and probably 10 residences (I moved around a lot in college). But for all its boxy brown dowdiness, I wouldn’t trade it for another model if you paid me. And I guess that betrays my design bias, too - first, make it usable. I promise, though, that nothing I design will be quite as ugly as my beloved alarm clock.