What happened to the iTunes 10 window controls?

iTunes has a long history of violating the Apple Human Interface Guidelines. In past releases, iTunes designers have removed the title bar and borrowed the brushed aluminum look from Apple hardware.

iTunes 10, released yesterday, carries on the tradition of divergence. This time, the designers have toyed with the window controls. As you can see below, the close, minimize and zoom buttons have shifted from their conventional horizontal arrangement to a vertical arrangement.

itunes_comparison.jpg

I can imagine stylistic and practical explanations for doing this. The new layout has a better visual feel to it, and it uses the space more efficiently. Still, it’s quite a bold departure from such a fundamental aspect of the Aqua interface standard. (The new volume control also violates the standards, but not quite so shockingly.)

Are we glimpsing a brave new world of window controls? What do you think? Read More

Put your best interface foward

I’ve traveled through many airports recently, so I’ve had lots of time to consider airport advertising. Most airport ads are obscure and inscrutable, and software ads in particular are often filled with buzzwords and jargon. Without the generic distinctions of logos, slogans, and color palettes, the majority would be interchangeable.

When I was walking in Boston’s Logan Airport, this is just one of the many lackluster ads I saw:

How will this ad create new business? For those who don’t know what “ERP” is, the ad is impenetrable. For those who do know, the ad doesn’t give them any new information and isn’t particularly memorable. Perhaps the sole function is to promote the brand? If that’s all, I would say that this ad is a squandered opportunity.

Contrast that ad with this one that was a few steps away:

FactSet creates software for financial professionals, and it has chosen to put its product front and center in its campaign. As an interaction designer, I’m biased, of course, but I find this ad much more accessible. Anyone walking past can see the product, and can understand (at the very least) that FactSet delivers a dizzying amount of information. The UI displays enough detail that people in the know will recognize its differentiating qualities. As I was standing near it, quite a few people stopped to take a second look. No one did for the Big ERP ad above.

At Cooper, we know how much work goes into creating a sophisticated information platform like the one FactSet has displayed, so we’d like to extend some appreciation to FactSet for taking pride in their UI, and for putting it front and center. If you’ve got something that you think is vivid, powerful, or differentiating, show it off. If you don’t, hire some great designers so you can. Read More

Hold that elevator!

On a recent research trip I stayed at the Holiday Inn in downtown Fresno, CA. The hotel was unremarkably average — clean and functional, if a little worn around the edges (a little like Fresno itself). There was one thing that struck me as unique — the elevators; specifically, their buttons. I’ve been in quite a few elevators over the years, but this was a first for me. The elevators had 4 buttons to control the doors: Two to close and two to open the doors.

One guess is that this arrangement was the result of a mistake, extra holes were filled with extra buttons for an expedient solution.

But, I prefer to think that this arrangement was the result of a heated argument about the iconography of the buttons — one person preferred the versions with a central line, the other held their ground that the non-lined versions were clearer. After weeks of argument, they broke the stalemate with this solution, “Let the user decide!” As a user in this circumstance, I can only say “Ouch!” Trying to keep the door open for someone approaching was a painful experience, and don’t get me started on the PB, PG & 2R buttons.

What do you all think? How did this happen? And have you seen examples of elevator madness? (If you have pictures, send them to me, and I’ll collect the best in a follow-up post.) Read More

Whimsical interaction design—a follow up

Last year Dave Cronin wrote this post about whimsical interaction design. In that spirit, I wanted to share our work on the litl webbook.

In my mind there are a couple approaches to incorporating whimsy into interaction design: To bring a little dash of entertainment to a capability that already has to be there (e.g., jiggling icons on the iPhone), or to add something for the pure joy of it (e.g., Easter eggs in software).

In this first example, the whimsical element brings a bit of delight to a moment that could have been upsetting to users.

The Retro Outro

The litl can take the form of a traditional laptop, or be flipped into a easel configuration. This flexibility creates potential confusion because the hinge that enables the flipping has two buttons on opposite ends: One is the power button, the other is a menu/select button. When the litl is flipped between configurations, the relative position of the buttons swap left to right, making it easy to imagine pressing the power button when you intend to press the menu button. So we explored some solutions — a confirmation message, or maybe the double-press required by projectors. Both of these felt too “computer-y” for the litl experience.

When the power button is pressed, the video on the screen begins to compress vertically. If you keep holding the button, the video compresses down to a single dot and the litl turns off, just like older CRT TVs — hence, “retro.” If you release the button before the video compresses completely, the video springs back to full screen and the litl stays on. One of the keys to making this work is it’s responsiveness. (The litl development team did a great job of tuning the feel.)

The Giggle

The other whimsical detail we added just for the fun if it. If you press both of the buttons on the hinge at the same time, the litl will giggle, as though you’ve tickled it. It’s just a fun element that further emphasizes that the litl is different that other computers and has a personality all it’s own.

It can be hard to work whimsy into enterprise applications and tools that people use all day. That extra little bit of entertainment usually comes at the cost of speed and efficiency. But for consumer products it may be worth considering some whimsical solutions to sticky design problems, or just adding some fun surprises. It’s a great way to create an atmosphere and experience that becomes a deeper kind of branding. Read More

The Barcode Hunt

I’m a frequent Costco shopper—buying things in bulk just makes sense for a growing family. Every trip has the same ritual to it; find the things we need, avoid the things we don’t, try lots of samples (a.k.a. lunch) and then… wait in the enormous lines. Many people dread going to Costco solely because of the long lines. I would hazard to guess that this is one of the biggest friction points in their customer experience.

So, what’s the problem? While there are lots of small factors that slow things down, one stands out in my mind—I like to call it ‘the barcode hunt’.

To illustrate: By the end of my Costco trip I’m ready to be done, and the toddler that’s usually with me is WAY ready to be done. So, while waiting in line I try to organize my cart so the checker can scan the large items in the cart and get us on our way quickly. But invariably there are a few things—always heavy and bulky on the bottom of the cart—that need to be moved to find the barcode. By my guesstimation, this box dance burns about 30 seconds per transaction. Multiply that by all the shoppers Costco sees in a day, and you can see why the lines are always so long.

But what could Costco do to speed things up?

Yeah, in a future world of RFID and spimes this problem will wondrously disappear—or so we’ve been told (I’m still waiting for my jetpack). But in the short term, there’s lots of time being wasted.

My modest proposal could save those 30 seconds: Print the barcode on all 6 sides of as many products as possible.

6_barcode_box
Every item in the cart would be scannable in any position, speeding the checker’s task and getting me on my way faster.

A change like this could work wonders for checkout lines everywhere, including self-checkout kiosks. (for some fun ethnography: go watch people using self-checkout kiosks find the barcodes on products—it’s an eye opening experience). But I focus on Costco for two specific reasons: motivation and muscle.

Motivation

Costco has one of the highest customer satisfaction ratings in the country. They sell good products at good prices, stand behind all the goods they sell and go out of their way to treat their employees well. They have crafted a customer experience that, with the exception of the lines, is top notch. Having proven that they ‘get’ customer experience, it seems that a relatively small change like this could take hold.

Muscle

Costco is an 800lb retail gorilla that uses their market muscle to get better pricing and quality from their suppliers. If they choose to, they could dictate barcode location rules to their suppliers. Costco also has a huge house brand, ‘Kirkland Signature’, where they have complete control of the final form of their packaging and could easily shift to a 6 barcode design.

How about it Costco, will you make my next lunch visit, err I mean, shopping trip a bit more streamlined? Read More

Credit cards for preschoolers?

I have a daughter named Skye. A few years ago, I was planning a family trip to England, and I signed her up for United’s frequent flier program, Mileage Plus. A few months after we returned, the junk mail started arriving. I knew when I signed her up that she would get some junk mail — Mileage Plus statements, promotions and such.

What I didn’t expect was this:
skye-junk-mail.gif

This is a credit card offer from Chase. Skye has gotten at least 30 of these fairly thick envelopes in the last year alone.

Many people might ask, “What’s the big deal? We all get lots of credit card offers.”

Well, the big deal is that Skye is three years old. United knows that she’s a preschooler; they required her date of birth when I created her Mileage Plus account. Somewhere in the information chain between United and Chase’s bulk mail department, that information was ignored.
Read More

Using jigs when rendering screens

As part of most Cooper projects we create a visual styleguide that details all of the visual elements of the design. Additionally, we create detailed scenario renderings to illustrate the behaviors of the design. While the visual styleguide is the source of record for precise measurements, it is great if the detailed scenario renderings can follow the styleguide exactly. I’ve come up with a technique that I use to verify and correct the accuracy of my renderings in a quick, visual way.

When working with wood, it is very common to use a jig (a device for guiding a tool) to ensure accurate repeatable results. This same technique can be applied rendering screens; allowing you to easily check the position of design elements, and correct them as needed. The easiest way to explain this is to walk through an example. Read More