Over on the Makalu blog, I just posted an article called ChessDrop Design Details that gives some insight into our interaction and user experience design process, and presents some of the approaches we discovered to some traditional design challenges in chess products. Hope you enjoy it!
My guess is that they’ve been focusing their efforts on the recently-released CapitalOne mobile app, which I have to say reflects some wonderful design work.
My hope is that in the future, they’ll turn their attention to the website, which still suffers some usability problems like the following.
Curious whether my credit card auto-pay is properly configured, I visited the CapitalOne.com website today, and clicked on “Manage Auto-Pay”. Here’s where that led:
I was almost certain that I already had auto-pay setup, but it looks like I don’t. In that case, let’s click “Get Started” to set it up…
The red alert—cognitively communicating that I did something wrong and, furthermore, am attempting to do something disallowed (adding more than one AutoPay to an account)—reveals that in fact I did already have auto-pay setup, and so all my confusion and frustration was unnecessary.
Both my Jeep Wrangler and Toyota iQ introduced usability improvements that have some unfortunate consequences.
When I switch my Jeep off, its headlights remain on for about 30 seconds. Presumably this was done under the assumption that you’d appreciate the lights in a dark garage, as you make your way to the door.
While that may be nice for people in North America living in big homes with garages, it has had the following consequences for me:
- Hardly an instance of public parking goes by without some bystander shouting to me, “Hey buddy, you left your lights on!”, after which I feel obligated to explain that, “it’s a feature”.
- I’m never quite sure myself whether I actually turned the lights off or not. And so, inevitably, I end up delaying my departure from the vehicle for the 30 seconds or so it takes to confirm that the lights are actually off. (And you can imagine that bystanders find that—a guy staring at his car, with its lights on—equally odd.)
The Toyota has a key-less entry system such that if I’m simply in proximity of the car, and in possession of the key, the doors will automatically unlock if I attempt to open them. While nice, it makes confirming that the doors are actually locked a bit difficult.
Here’s how that usually works:
I get out of the car and lock the driver-side door. Then I try to open the door, to confirm that it’s locked. But because I’m physically near the car and in possession of the key, the door automatically opens. With a sigh, I lock it again, walk away from the car, and then ask somebody else to try to open the door.
(My friend’s Volkswagen solves this problem by additionally retracting the side mirrors, allowing you to visually confirm that the car is locked.)
The Toyota has some other irritations, like sounding the seatbelt alarm when I place my computer bag in the passenger seat. But I think that’s more related to regulations, than attempts at improving automobile usability.
Taking inspiration from microwave ovens and remote control devices of the late 1980s, I present to you ladies and gentlemen the latest in innovative European interface design—the new Spanish parking ticket machine.
At Makalu, we’re longtime users of Basecamp, the online project management system created by the folks at Basecamp (formerly 37signals). 37signals care deeply about design, and this is evident pretty much everywhere in the user experience of their products. Continue reading Thoughtful design — Comparing the user experiences at Basecamp and Atlassian
A passion for design is a passion for the interests of one’s customers, because respect for their time and a desire to make them happy is at the core of the design process.
Naturally, the flip side of that coin is that poor design often reflects, either directly or indirectly, the absence of real interest in the customer on the part of a product creator. And I suppose it’s for that reason I feel so sour, and nearly offended, whenever I stumble or lose time over poor design.
Between Makalu, RaceSplitter and Rego we have a lot of customers to keep track of. And for that, we use the software Daylite from Marketcircle. As powerful as Daylite is, I frequently stumble upon design shortcomings in the product—and today I hit a particularly annoying one.
One of the important new features in Daylite 4 is Find Duplicate Contacts…, allowing us to identify and combine those duplicate contacts which, over time, inevitably find their way into our data. After identifying potential duplicate sets, here’s what the feature’s UI looks like:
The Daylite designers implemented a two-step resolution process:
- First, you select which of the possible duplicate records should be the “master” record, whose data is used for any conflicting fields.
- Second, you click the “Combine” button, which combines the duplicate records into one.
Once you’ve combined a candidate set, you move on to the next and repeat this process.
So what’s the problem here?
The problem is that the user ends up spending about 12 seconds per duplicate candidate set—i.e. 1 to 2 seconds selecting the “master” record, and then 10 seconds after clicking “Combine”, waiting for the database merge to complete.
In my case, I had 300 potential candidate sets, the resolution of which required about an hour of my time.
Had the designers been more thoughtful—had they deeply had my interests in mind—they would have implemented an option for the following alternative workflow:
- Walk through each candidate set, selecting the master record.
- Press a “Combine All” button, and then go back to work on something else while all the database transactions happen.
This workflow would require adding a select box on each candidate set, and possibly a slight change to the feature layout, in order to exclude sets that aren’t in fact duplicates. But in my case such a workflow would have required only about seven minutes of my time.
Postscript: In fairness, there could be a counter-argument. If it turned out that having to process lots of potential duplicates is relatively rare, then an argument could be made against complicating the UI for the majority of use cases. But Daylite is a power-user’s application, meant for a multi-user, complex business environment. And, as with my own case, it’s only after running into a lot of duplicates that I was even prompted to look for such a feature! So I’m not sure that argument would apply here.
Ryan Singer wrote on Twitter:
Affordances are tricky to pin down because they’re nested. A hammer affords driving nails; its handle, swinging; it’s grip, grasping; etc.
I’ve always thought of affordances as elements, characteristics or properties that a designer introduces to explicitly communicate the possibility of an intended action.
For example, the lock-screen swipe control in iOS 6 doesn’t just provide for unlocking, it explicitly communicates through words and a particular visual control the right-swipe-to-unlock action. In iOS 7, though, we lose the visual control and are left only with the words, “Swipe to unlock”. (We are suggested a direction, though, by the right-moving light behind the words.)
According to Wikipedia, though, an affordance is any quality of an object which allows an individual to perform an action—such as the hammer qualities mentioned by Ryan.
But in the hammer example, the grip wasn’t added to communicate the action of gripping; rather it was added to provide for gripping. The handle wasn’t designed to communicate swinging; rather, it was designed to take advantage of the principle of leverage through swinging.
In my own thinking about affordances in the design of products, I think I’ll start differentiating between inherent affordances and explicit affordances; the latter intended to communicate, in addition to providing for, actions.
From Matt Gemmell’s recent article, Tail wagging:
There’s a question I try to ask myself when I’m creating something: “Is this true?”
An eternal struggle I have is to articulate the answers to, “Why do we participate in the activity of design?” Although the context of this article by Matt Gemmell is contemporary—Jony Ive’s rumored changes coming in iOS 7—the article is (in my opinion) timeless in how it touches on so many fundamental aspects around that basic question.
When it comes to layout design, the very essentials can be learned in an afternoon by reading a book like Robin Williams, [[[The Non-Designers Design Book]]]. Of those essentials, one thing we learn is that you don’t need to put boxes around and lines under everything on the page. As an example, the book suggests printing an Excel spreadsheet with and without the grid-lines enabled. The difference in readability is striking!
American Express is a 62 billion dollar company. You’d hope a company that size could hire some designers who’ve at least learned the basics. But judging from the look of their statements, that wouldn’t seem to be the case.
Just look how illegible this statement is:
Now consider the same statement, with nothing more changed than simply removing the unnecessary boxes and lines. (Of course, the layout could still be dramatically improved; but just look at the difference made by applying the basic design rules learned in an $8 Kindle book!)
Ok, I’m being a little overly critical of AMEX here. To be honest, they are one of my favorite companies. Great customer service, and their web app is pretty darn nicely designed!
Just wish they designed their statements a little better!
As Skype has evolved over the years, I’ve gotten the impression they’ve hired a bunch of visual designers and told them:
Hey, go make the site look like the other sites out there. You know, BIG and spacey, like Apple! Web 2.0, right? And throw in some icons and progress bars. And gradients. Oh, and tabs!
Here’s the awful mess of a result of visual design sans usability design.
This is the “dashboard” of the Skype Manager. I have absolutely no idea what information it’s trying to communicate to me. But hey, the manager at Skype can check off, “Have a Dashboard, like everybody else!” off his list.
When designing the purchase experience for Money for Something, we wanted to make it as easy as possible to buy the book. With that objective, we integrated Stripe’s technology — the customer enters their name, credit card details, and clicks “Place Order”. A moment later, they have the book.
Even though Stripe does the processing on their servers, the experience is fully integrated within our own site. It couldn’t be more elegant or efficient.
Contrast that with the experience someone living in Europe typically has when buying something online from a European organization.
Buying airline tickets at Air France
This morning, I wanted to buy airline tickets from AirFrance.es, and pay with the business credit card issued by my German bank.
At checkout, I’m asked to enter my name, credit card details and billing address. A stern warning advises that if the data doesn’t precisely match the billing address of the credit card, the transaction will be denied.
Already setting a dire tone, and raising questions. Should I include the hyphen in the street name, “Robert-Bosch”? Should I spell out “Strasse” or leave it just “Str.”? I take a guess and hope for the best.
Clicking “Pay”, I watched the browser cycle through various URLs on different domains before landing on a blank screen with an iFrame inserted in the middle. The content looks like something out of a 1999 HTML web design book and it’s in German, rather than the Spanish I was seeing on the AirFrance site. In fact, it’s completely bank-branded.
I’m asked to enter my MasterCard “SecureCode™”? Off I go to Yojimbo, hunt around for my MasterCard note, decrypt, and thank god, there it is, my MasterCard SecureCode. Yes!
Enter it, click “Weiter” (continue), and…
“Your SecureCode has expired. Please create a new one.”
Of course it’s expired. What self-respecting SecureCode doesn’t expire?
Right. How do I create a new SecureCode? The message gives no indication.
Calling my German bank, I wait on hold for a while as they look for somebody that speaks English. That person informs me that to create a new SecureCode, I need to start the purchase process again, but this time, click “Forgot SecureCode” on the confirmation screen.
Yes, that’s how you create a new SecureCode; you click “Forgot SecureCode”.
(Naturally, to even get to the confirmation screen again, I had to delete some browser cookies, which are stuck in the state of “Your SecureCode has expired.”)
So it ended up taking me five minutes to configure my flight, and 45 minutes to pay for it. Awful.
Buying vitamins at MAS Musculo
Yesterday, I visited MasMusculo.com to purchase some multi-vitamins. Again, it took about five minutes to find my vitamins, which came to a total of 27 Euros.
Once again, though, the purchase workflow was interrupted by an awkward visit to some unrelated URL, where I was shown a blank screen with an iFrame containing content from my personal credit card provider, Deutsche Bank.
On this screen, I’m asked to enter my personal PIN, and the code from coordinate “G5” on my SecureCard™.
What’s a SecureCard™? This is a card containing a grid of numbers, identified by alpha columns and numeric rows, one of which you’re randomly asked for (in my case, “G5”). Sigh. Off I go hunting for my SecureCard™.
Of course, you can’t just type in your PIN and data from the SecureCard. No, somebody could have installed a keylogger on your computer, and over time, collect all the data from your SecureCard™ and then fraudulently buy vitamins!
To enter your PIN and SecureCard™ data, I’m shown a virtual keyboard with the key locations randomly distributed, i.e. it’s not 1, 2, 3… but rather something like 6, 3, 9, 2.
(No, this is not a million dollar wire transfer. This is a 27 Euro vitamin purchase.)
After carefully punching in all the data using this mind-numbing virtual keyboard, I hit “Pay”, and wait. Yeah, you know what’s coming…
Your data did not match, or there was a system error. Please contact the System Administrator.
Bang. Head. On. Desk.
Three more tries, and they all fail. I call Deutshe Bank and can’t get through to an operator because “Your PIN number is incorrect.” Finally, after jumping through some second-level security questions, I get to an operator who tells me my PIN is in fact correct, and the SecureCard™ issue number is correct. So they have no idea why the system is failing, and they don’t know who my System Administrator might be.
So what do I do? I go to Amazon.co.uk and purchase the same vitamins from the United Kingdom for 45 Euros (including shipping). I pay an additional 60% on my purchase, to get one-click convenience, and save additional lost time.
Europe — the land of ancient cathedrals and still not-quite-sure about this whole credit card thing — is ripe for company like Stripe, Square, PayPal or somebody else in the payment space to come in and make life easier.
My new book, Money for Something teaches the fundamentals of investing, and hopefully motivates the reader that they should be investing.
The actual act of investing, though, requires making a personal and very important decision — the choice of the particular “asset allocation” in which to invest. The book, and its companion website, provides a handful of popular allocations that should work well for most people.
When wrapping up that particular chapter, though, it occurred to me that when I’ve read such books in the past, I’ve always ended up thinking, “I sure wish that in addition to giving me the information necessary to make a decision, the author had also described the decision they took!”. And so I decided to go one step further, and conclude the chapter with a short note about “what I do”, in which I describe my own asset allocation, known as the Permanent Portfolio.
As it turns out, the great majority of emails I’ve received from readers getting started with their own investment program have chosen to invest in the Permanent Portfolio, and I think that’s worth of a bit of reflection.
Whether we are product designers, lawyers, tax advisors, or writers, it’s easy to assume that the job-to-be-done is providing the information or tools necessary for our users to make decisions. In reality, though, the job-to-be-done in the mind of our users is to make the right decision, and we can support that objective by taking our services one step further, with a suggestion, recommendation, perhaps thoughtful defaults settings, or in the case of my book, a section called, “What I do.”
Whenever we travel, it’s almost always my wife who does the online research, and settles on a particular flight, hotel and/or rental car. She then emails me URLs, with a request to make the bookings.
In my experience, those URLs — which usually span at least four lines in the email — almost never lead to what my wife had configured and thought she was sending to me. Just today, a rental car she found in Holland, showed up as a car in Albania for me! In the end, we always end up sitting down and doing both the research and booking together.
I imagine this scenario is not uncommon, where one person does the research, and another does the booking. It would be great if companies operating these websites foresaw this workflow, and ensured that researched configurations can accurately be passed to another person for booking.
Random thoughts having spent a day with 37signals’s new Basecamp Next — not so much about the product itself, but rather the context around the product.
It’s an achievement. I know from experience how hard it is to ship something new. At Makalu we’re working on two new products which, compared to the new Basecamp, are dead simple — yet they’re taking far longer to ship than I would have imagined. What 37signals have achieved in 10 months — not only the product itself, but also all the prep work for migration, the marketing materials, etc. — represents an impressive accomplishment. I imagine there must have been some laser-like focus, on a small handful of guiding principles or ideas.
It’s a little rough around some edges. Using the product, I’ve hit some bugs (or at least what looks like bugs), and seen UI imperfections (inconsistent margins, etc.). You get the feeling 37signals shares the Facebook philosophy, “Done is better than perfect.” (And I can agree with that!)
Features or reasons? Rather than a features list, the marketing site provides a list of “great reasons” to use Basecamp, each linking to a focus page about that feature (or “reason”). It’s an interesting idea, but my first impression is that the list is too much of a cognitive load. I feel overwhelmed looking at those 20-something reasons. I didn’t read any, and the whole list just seems to blur together.
It was a big risk. It was a risk on many levels, but an interesting one that occurs to me is the following: The cost of migrating to a new system probably kept a lot of existing Basecamp customers from even considering alternatives. So choosing to develop a completely new product, rather than improving on the existing one, would seem to creates an opportunity for any customer feeling lock-in to reconsider their options (since either way, they are going to face some migration costs.)
It came at the right time. In Makalu, we’d recently been reflecting that although we’ve been with Basecamp for over six years, we actually don’t use it anymore. We make heavy use of Campfire, but had gotten to the point that we were only using Basecamp for time tracking. That, I believe, is because we realized it’s simply not time efficient to work heavily with Classic. It seems 37signals may have felt that way too, as the focus of Basecamp Next was speed and efficiency. Having used Next for a day, I’m optimistic that I will end up really using the product, and for that reason, it really seems to have come along at the right time.
It represents a missed opportunity for a lot of competitors. We’ve had several contacts from start-ups of competing products (asking us to try their product). Most have taken the approach of trying to incrementally improve on the basic model implemented in Basecamp Classic. Basecamp Next represents a complete rethink of web-based project management. It’s interesting to think that any of those start-ups could have also recognized that perhaps now is the moment to rethink the whole model. But most didn’t. Most just followed, and tried to copy who they perceived to be the leader. An important lesson to be learned there!
In the mainstream, we commonly admire the design works of luminaries such as Apple, IDEO, Frog Design and, well, why not — Makalu Interactive. But there are others out there, designers flying way below the radar, who equally deserve our admiration and respect — including the gifted ones (elegantly named, “Grupo Setex”) who designed the Spanish Parking Meter.
Pour a cognac, put on some Vivaldi, and spend some quality time soaking in the inspiration:
Grupo Setex designer, Juan Ive, speaking at the 2011 Lowest Bidder conference explained in an authoritive-sounding Spanish/British accent:
When we looked carefully at the common parking meter, we thought, “It’s just too simple. People aren’t spending enough time truly getting to know it.” Thinking outside the box, and inspired by Microsoft, we worked hard to obscure the inherent simplicity, through carefully crafted layers of complexity. Our use of five colors, seven font sizes, obscure symbols (even we can’t remember what that thing next to the “1” label is), repeating sets of plus/minus controls, and the mysterious “A/1” button, work together to ensure that no user will get a ticket out of this device in less than ten minutes (if at all). We’ve heard it’s the talk of the town — I think we nailed it!
Since they installed these monstrosities around Marbella, I’ve been watching, and I’ve never seen a single device able to produce such a fast and consistent response among its users — The Contorted Face of Confusion.
Although not design related, the kicker is the pricing — 30 minutes for 30 cents or, get this, an hour for 70 cents. Think about that. And, finally, what I just discovered today — these machines will happily take your money on Sunday, without advising you that Sunday is free parking day in Marbella. Brilliant.
I love the Nespresso coffee system. In fact, Nespresso almost does for coffee what Apple does for electronics and digital. Elegant, well-designed coffee makers, combined with a convenient and clean capsule system, and supported by a fast, online ordering system results in a great user experience, and a near-perfect coffee every time.
But, as with all things, there’s still room for improvement.
Frequently, in our three-year-old “Cube” coffee maker, the previously-used capsule remains stuck in the capsule chamber. About the only way we’ve seen to get it out, is to start the coffee process, and open the chamber while the high-pressure water is flowing, which usually results in the old capsule being ejected and cleared away.
Sometimes, though, we put in a new capsule without having noticed that the previous capsule is stuck. At this point, you can’t close the chamber. Removing the new capsule involves removing the used-capsule container, and with a finger inserted from beneath, trying to pop the new capsule out the top (and catching it in the air before it falls back in!)
Hopefully, Nespresso will solve these problems in their future models.
Alex and I were discussing over coffee at the office this morning the amazing job Apple did in their retail experience, and were imagining the areas in which clothing retailers could improve their shopping experience. One glaring example in which some attention is badly needed is the changing room.
The changing rooms in many retail outlets are surprisingly overlooked, when you consider they’re often the place at which a consumer makes the final purchase decision.
Many retailers start off the experience by suggesting you’re an unwanted thief. You have to ask for a key, because all the doors are locked. And don’t think about taking in more than three garments at a time.
Some have curtains, rather than doors, which can leave the timid a bit too focused on preventing the world from getting a sneak peek at their backsides. The good places have solid doors, that make a comforting clunk when closing.
Often, changing rooms provide nowhere to place the clothes you’re taking off. Who wants to drop their clothes in a big clump on the floor? The good places provide hangars, a bench or a shelf. (And this concept can be extended to other consumer needs we can anticipate — like what to do with the 22 pins evidently required to hold a folded shirt in place.)
And last, but definitely not least, there’s the lighting. How do they get such an obvious thing so wrong? We’ve all been there, getting half-naked in a changing room lit by cheap florescent bulbs, casting their light down at just such an unflattering angle that one glimpse in the mirror provokes a quick decision that the more prudent purchase would be a gym membership.
Speaking of convoluted user interfaces, check out the Auto-Lock setting in Skype for iPhone:
Take a big breath, and read this slowly — “Don’t Auto-Lock” is “On”. Disabling Auto-Lock will prevent screen locking during a Skype call.
So, do I currently have Auto-Lock disabled by having this setting “On”? Or would I turn this off to disable the enabled “Don’t Auto-Lock”? Jeebus.
Why couldn’t these people have simply labeled this setting “Auto-Lock” and having the default setting to “Off”?
Today when I launched Daylite, it alerted me to the availability of a new version. I know from experience, though, that it’s bad news to try updating Daylite, before updating Daylite Server. Since Daylite Server doesn’t have a “Check for Updates” feature, I went off to MarketCirle.com.
Frustrated that I couldn’t find a download link for the server update, until after having made like five clicks — one of which was on a “Would you like to download the Trial Version of Daylite?” box — I tweeted the following to someone in MarketCircle support (who will remain nameless, because I like them, and do appreciate their quick responses):
A challenge: Go to marketcircle.com and figure out how to download the updated version of Daylite Server. Count how many clicks. Does the path to accomplish that actually involve clicking “Daylite Trial”?
No kidding, here’s what I got back:
I did it in two. 1) Scroll down to the Blog section on the home page and click the latest post. 2) Click on the DLS download link.
So if you want to update, you scroll to the very bottom of the website, then go visit the blog. Who on earth is doing interaction design at MarketCircle?
I know from experience it’s really hard to always achieve consistency, so this is really more an exercise in conscious observation, than criticism.
Postini is a hosted spam service, now owned by Google, which filters your mail before it arrives to your account, placing anything it considers spam into a “quarantine”. When you ask Postini to deliver an incorrectly caught good message, it gives you the option of adding the sender to a whitelist.
A nice little UI/UX test is the “Squint Test” — i.e. as you look at a screen or interface, squint or defocus your eyes, and see if you can discern the system’s structure and navigation.
Let’s say you’re a Lending Club or Bank of America customer. You’re probably going to represent one of the site’s more frequently accessing class of visitor, and so it’d be nice if logging in was one of the more efficient workflows.
To simulate the squint test, I’ve blurred both home pages. Have a look, and see if you can quickly identify the login links at Lending Club and Bank of America.
At Bank of America, if you guessed that the login is that big red block in the upper left, you’d be right.
At Lending Club, if you guessed that smallish gray button in the upper right, you’d be wrong; that says “Join Lending Club”. iIf you guessed one of those two big buttons in the middle of the home page, you’d be wrong; those are “See for yourself” and “Check your rate” (respectively).
The login, which is probably the most clicked item on the whole home page at Lending Club, is the small text item to the left of the Join button, which reads “Sign in”.
SPRINT ARE BRINGING OUT THE BIG GUNS, with this truly powerful advertisement for the, uh — not sure exactly what it’s called, The Sprint HTC EVO 4G? Doesn’t matter, just have a look:
After a moment to catch my breath, my first thought was that forever I’ve been opening the Weather app on my iPhone, never really imagining the day would come when I could instead watch a man talking about the weather in a Flash player.
My second thought was, “I do need a phone with a peg leg.”
Anyway, more seriously, let’s check out this ad.
FIRST ad displaying more than six trademark symbols.
C’mon, Matt, I said seriously. (And it needs to be taken seriously; Sprint probably paid somebody $25,000 for this ad.) Ok, here we go.
First, I don’t get the usage of “FIRST”. But maybe that’s just me.
The main point of this ad is that the EVO runs Adobe Flash. And in case that doesn’t mean much to you, the ad emphasizes that 85 of the top 100 sites use Flash. (In the small print, they point out that they got this data from Adobe, who in turn, got the data from Alexa.)
Does this mean my poor iPhone can only deal with 15 of the top 100 sites? Let’s go check out the Alexa Top 100.
Google (seems responsible for at least 20 of the top 100). Facebook. YouTube. Yahoo. Wikipedia. Twitter. Amazon. LinkedIn. eBay. Flickr. Apple. New York Times.
Hmmm — where is the Flash on these sites? Oh, I see — mostly it’s the ads. The ads on these sites are often Flash.
So what this ad is really saying is that if I’ll switch to a Sprint HTC EVO 4G, in addition to getting a phone with a peg leg, I’ll finally be able to see all those slide-out, content obscuring ads I’ve been missing!
Daring Fireball just linked to an article about how Toshiba’s new teaser site for its upcoming tablet sends a message to iPhone users. Well, here’s my message to Toshiba:
It seems Apple has no competition these days, and judging just from advertising, I’m thinking we’re a good ways off from seeing any. Why? Try as they may to copy, companies like Samsung just don’t get it. My colleague Alex and I today were discussing the striking difference in advertising, in the latest issue of Fortune magazine (which is full of Samsung Galaxy ads.)