Moo!

Over the past year me and my colleagues have been working hard on a fantastic project: SalesChamp. SalesChamp is a sales application running on tablets. It’s not purely an iPad application. As all the magic is happening in HTML5 this baby is cross-platform. As we are closing in on our TTM deadline we are readying all the important marketing stuff, like a kick-ass website and of course, business cards.

Play your cards right

Simon, the SalesChamp mascotteI’ll write more on SalesChamp — all the cool stuff you can do with it and all the cool stuff that make it do what it does — soon, but for now I want to talk about the business cards. As we are positioning SalesChamp as a ‘service with a personality’ (‘swap’ — I just made that up) we have a mascotte of course. Meet Simon! Simon is a true sales champ, our very own hero.

So, with such a great guy as the face of our app we wouldn’t get away with boring business cards. So, instead of the default boilerplate stuff I tried to put some fun in them by adding famous sales and marketing quotes on the back side of the cards. In total we designed 14 different backs, each of them with a few words of clever business wisdom.

Here’s one such example, with a quote from my favourite cognitive scientist:

Pretty cool, right?

Delivering an experience

After finalizing the designs we had to get them printed of course. I ordered them from Moo, and this week the cards were delivered. Not only did Moo deliver the cards, they delivered an experience! What a stellar job they do at going the extra mile. When I opened the (nicely designed) box I found 5 really cool (and solid) card holders containing our cards:

Packaging of SalesChamp cards ordered from Moo

The card holders had two tabs in them labelled ‘mine’ and ‘theirs’. Quite handy to organize received cards on conferences and such. It’s all in such details, like the little “buzzword challenge”-card, a game to fit as much terms like ‘viralize’ or ‘socialocomotion’ in your next meeting and see how long you can get away with it. Or the encouraging “Quick, schedule a meeting! Your Business Cards have arrived.”-message.

Piggybacking Moo’s new product: NFC business cards

A very cool product that Moo is working on are their NFC business cards. And of course they were smart enough to include a sample directly in my order. Scanning the card directed my web browser to a digital version of my freshly printed business card. A very clever move, as this is a great way to introduce a new product in a very friendly and cost-efficient way. I’m not sure if they are doing this, but if I were Moo I would keep track of who scans the NFC cards and target them for specialized offers later on.

NFC business card sample from Moo

A little disappointment

After ooh’ing and ah’ing about the packaging it was time to check out what it was all about: our cards. Unfortunately, my buzz was killed when I saw them. Due to some mishap the text on the front was very grainy. Not the crispness I saw one week earlier in the vector PDF on my retina screen. Fortunately, Moo is not only known for its great print service, they are also known for their great support. I am currently talking to their support to get this issue fixed and to get the cards re-printed. So hopefully I will have the final cards very soon.

Great experience

All-in-all this was a great experience. The cards are very well designed and align perfectly with our positioning. Except for the printing issue I am very impressed with Moo. And if you can get people to photograph and blog about their unboxing experience you’re doing something very well. I trust things will be sorted out with the re-print soon and we can start handing-out our cards. In the meantime, check out our (temporary) end result:

Business card of Vincent van Scherpenseel, Product Manager at SalesChamp

 

Update 13 november 2012: and as expected the newly re-printed cards look terrific! One very great delighter was the fact that Moo sent the cards via express shipping again. Because of this I received the cards exactly one day before an important SalesChamp demonstration meeting :)

Fingerprint affordances on touch screens

My colleague Martin Kačmar from Brno recently visited our Haarlem office. Apart from attending the terrific PhoneGap Day we couldn’t let this opportunity go by to show him some examples of what Holland is really like. Hence, a visit to the Zaanse Schans was arranged. During our tour through the outdoor museum we visited “Specerijenmolen De Huisman“, a mill which was used for grinding herbs and spices in the good old days (no, not that kind of herbs…).

Wooden barrels with screens in them

Touch screen in a wooden barrel at the Zaanse Schans museum (picture courtesy of Tekst & Uitleg)Inside the mill we stumbled across some wooden barrels with screens in them. I instantly recognized these barrels: they were created by Tekst & Uitleg, the neighbours from our previous office. While clicking through the wooden barrel-enclosed interface I spotted a very clever detail on the screen: a fingerprint affordance.

Three reasons why I loved them:

1. The fingerprints made it clear that it was a touch screen

The fingerprints made it immediately clear that the screen was a touch screen. Especially in this situation, where you have a screen in an unfamiliar setting (a wooden barrel) this is needed. More so when you take into account that the screen might still be playing a video started by a previous visitor.

2. The placing made clear what was clickable

Fingerprint affordances on touch screen at the Zaanse Schans museumThe fingerprints were placed on key navigation items, making it immediately clear that they could be clicked. This was very useful, as it wasn’t really clear what was clickable and what wasn’t if you would take away the fingerprints. This does not give you permission to serve mystery meat for navigation of course, but in this case it really helped the designers of Tekst & Uitleg to come up with a navigation that is really embedded in the content.

3. The fingerprints were done very subtly

The fingerprints were done subtly, without taking away attention from what was shown on the screen. At first I thought the screen was dirty with fingerprints from other visitors. These were not natural affordances like real fingerprints, but they really looked like it. It was as if the previous users showed me where I should click to see things happening on the screen.

All-in-all I really liked this solution. Compliments to Tekst & Uitleg for designing these fantastically fake fingerprints!

 

Google’s Changed Password Reminder

Two weeks ago I lost my fantastic Nexus S at Awakenings Festival. Five years back this wouldn’t be such a big problem. But nowadays that small device contains my entire (personal and business) life. I had a track-my-device app installed, but as the network was overloaded by 30.000 people asking each other “Where are you?” on WhatsApp, it didn’t work.

So, the first thing I did was to call Vodafone to block my SIM card. The good news was I could pick up a new SIM card the next day, even though it was a Sunday. But I still had that annoying feeling of having lost all my personal belongings. It felt a bit as if I was walking the festival terrain naked.

Passwords suck

Passwords suck. They are insecure, inconvenient bastards. But they are the best we have in 99% of the situation. I was concerned about the possibility of passwords (e.g.: my e-mail password) being extracted from the device. Even though the chances of someone being skilled enough to do that are very low, I wanted to be safe rather than sorry. So I immediately hurried to the office. My Saturday night was going to be awesome: changing all my passwords.

So, after 3.5 hours the clock hit 1.30am and I had finally changed all my passwords. But that’s not where the inconvenience ends. In the weeks to come you need to enter your new passwords everywhere you re-login. And of course it takes three tries before you realize that you’ve reset your passwords.

Google's reminder that you've changed your password.

Google’s big detail

That’s when I found Google’s great reminder function. After entering my old password Google kindly reminded me that my password has been changed.

Apart from this nice reminder, it has another big benefit: if you didn’t change your password you can alert Google Support immediately to get your account re-instated.

The 1%

This is absolutely a delightful UX detail. It may seem obvious, but mind you that probably about 1% of all the thinking, designing and building of an app is spent on ‘preconditions’ like login, logout and lost password functionality.

If you want to delight your users, make sure to spend a reasonable amount of time on these preconditions. And watch your logs. With the huge amount of users Google has it shouldn’t take long to recognize the pattern of failed logins after a password change.

Passwords suck, but they are probably going to stick around for quite some time. The least we can do is make using them easier.

Information Overload @ UX Cocktail Hour

I love those talks where you are first blown away by the sheer brilliance of the subject (and the speaker), then get that feeling “it’s so obvious, how could I not have seen that?“. Those are the best. It’s the only occassion where you walk out feeling so incredibly dumb, yet with a big smile on your face.

Information Overload presentation at UX Cocktail Hour AmsterdamLast night at UX Cocktail Hour I attended a presentation by Karl Fast, professor User Experience Design at Kent State University. His talk on the opportunity of information overload (io) was such an experience.

Extensive research in people playing Tetris showed that players make extra moves for every block they need to fit. Why do people make extra rotations and movements in Tetris? To check their next move before sticking to it.

The same goes for chess, where even especially the best players move their piece to a new position but don’t release it before checking whether it’s a good move. They change the world to determine if they should change the world.

Apart from the fact that it was refreshing for a change not to hear someone talk about how bad io is but instead embracing it, it also hit home within the local UX community. At least it did with me. We spend so much time assisting people to make the perfect move, while they make all kinds of other -seemingly random- moves. Even just to check if they are right.

Value in making the wrong move

There is value in making the wrong move. Just as there is value in having a board cluttered with sticky notes. There is value in touch. Which makes me wonder, can an online project management tool ever beat three people standing around a whiteboard? Of course it has additional benefits, such as keeping track forever and sharing with people who are not in the same room. But at its essential task, sorting information and providing overview, nothing beats the good old whiteboard.

The ever increasing blur between virtual and actual

It’s an interesting time. On the one hand we have apps mimicking the real world, look at the sticky notes in Trello for example. Yet at the same time we have the real world mimicking the virtual world, look at digital whiteboards for example. Entire walls are being converted into touch screens.

Somewhere in between is the sweet spot, the place where the line between what’s real and what’s virtual has become so incredibly thin that the virtual world is a full extension to the real world, and vice versa.

Information Overload presentation at UX Cocktail Hour Amsterdam

Responsive HTML5 Touch Interfaces

At Yahoo!’s BayJax event Stephen Wood from Flickr gave an excellent talk on creating Responsive Touch Interfaces in HTML5. In his talk he discusses many things that probably a lot of people creating web apps for touch devices are struggling with.

You should definitely see the whole video, but the most important points are:

  1.  When swiping focus entirely on the user’s gesture. Don’t do anything else. No pre-loading, nothing. When interface interaction stops the user will feel as if the interface has broken down. Supporting the gesture with all resources possible is the most important thing.
  2. Don’t read from the DOM during gestures. Going to the DOM will block and stop the interface. Keep track of the gesture coordinates yourself (write-only DOM).
  3. Use hardware acceleration (even though it’s a “crash festival”).
Now grab your morning coffee and watch the entire thing :)

Cool XKCD Reference in Liberated Pixel Cup

This is probably as geeky as it gets. Liberated Pixel Cup, a free (as in speech) game making contest sponsored by the CC, FSF, Mozilla and OpenGameArt.org, references one of the best XKCD comics in their kick-ass HTML5 demo.

Little Bobby Tables in Liberated Pixel Cup

Meeting Bobby Tables

To meet Bobby Tables: when the Liberated Pixel Cup demo loads move all the way to the left until a new screen is loaded (separated by a black bar). Then move some more to the left until you see Little Bobby standing beneath two trees. Talk to him and then you can even play as Bobby Tables :)

The original XKCD comic that was referenced:

Exploits of a Mom by XKCD

Design Beautiful Errors

I love contingency design: the very important details of handling errors and turning a negative user experience into a positive one. Usually when working on form interaction I design four things:

  1. A default field value to guide the user;
  2. The error message, and where it is located;
  3. The styling of the field when on-error;
  4. What happens when the error is corrected (usually the same as when the field was filled correctly).

Let’s take a closer look at this.

Prevent errors and give immediate feedback

Rule #1 requires us to prevent errors as much as possible. A default value can help a lot, as it shows the user how to enter their data. Also providing immediate feedback is of great help. Getting the user back on track right away greatly improves the user experience and speeds up the whole process. Having to submit the form before seeing your mistake is really un-cool.

Make sure however, that you give the immediate feedback where it makes sense: when the user enters an illegal character it makes sense to alert her right away. However, when she’s still inside the field (typing or idling) it doesn’t make sense to check whether a minimum input length has been met.

Show what went wrong, and where

Rule #2 tells us that we can’t absolutely stop errors from happening, but we can handle (and should) them gracefully. The error message should be as clear as possible and explain what went wrong, not just telling something went wrong. Avoid generic messages like “Invalid input”. Use something helpful like: “Your telephone number should at least contain 10 digits.”.

Also show which field is on error. This should be immediately clear to the user. Do this by highlighting the field and by placing the error close to the field. But don’t put it too close. This error message tooltip on 99designs.com overlaps the invalid field, which makes it very hard for the user to correct the problem:

A blocking tooltip on 99designs.com

Notify the user that he corrected the error

When the user fixes the incorrect value make sure that the error message disappears instantly and the form field returns to its regular completed-state. Preferably this completed-state makes it absolutely clear to the user that he entered the required data correctly. The best forms leverage this completed-state to tell the user that he’s well on his way to completing his goal (the complete form fill). Cheer on the user!

Form completion example using checkmarks

Allow for international input

One very important thing to always keep in mind is that people may have valid input that doesn’t match your validation rule. If you target an international audience you need to take care that you accept all different address notations. Even something so seemingly simple as a name may collide with your validation rules.

Read more about international form input in the excellent “Personal names around the world” post in the Q&A section of W3C’s website.

Track your errors

Then finally, as rule #3 tells us, track your errors. Make sure that you detect that errors happen and log everything you can. Use web analytics solutions like Google Analytics and Mouseflow, use application and server level logging. Reveal why users are struggling with your application, so you know what to do to fix it.

Conclusion

We’ve looked at how to avoid errors from happening, handle them gracefully when they do occur and how to track them. But above all: we’ve looked at what we can do to salvage a negative user experience.

Error handling is usually the most overlooked aspect of any interaction design. Wrongly so. It is the moment where your application can make all the difference and delight your users.

Don’t underestimate error handling and start designing beautiful errors.

Facebook’s Tiny Serving of Mystery Meat

One thing that always annoys me about Facebook is the quick-reply functionality in Facebook Messages. When the ↵-checkbox is checked or unchecked (I don’t know which state it is) hitting the enter key submits the message, instead of starting a new line.

Facebook's mystery meat

They are using the correct character, that’s not the problem. The problem is that it’s not clear what it means if the checkbox is checked or unchecked. The tooltip (“Quick reply mode: press Enter to send”) is not helpful either, because it’s the same for both the checked and unchecked state!

I’ve had my messages cut short and sent more than once (and of course I didn’t note down what the checkbox state was at the time). So now I work around the problem by hitting shift+enter when I want to start a new line. That always works as I expect.

How Facebook could easily fix this

Facebook could simply show a different tooltip dependent on the checkbox state and make it clear whether quick reply mode is on or off.

Or they could hide the Reply-button when quick reply mode is on. It takes more balls to do that, but they’ve done that for wall comments as well so people using Facebook are quite used to it.

Update: cool, Facebook is now actually hiding the Reply-button to make the checkbox state clear.

Leverage Your Error Reports

When Google Chrome can’t reach a website, and has received the same outcome from multiple Chrome users, it reports that you’re not the only one struggling with the website. This is helpful, because as a user you learn that the problem is probably not on your end.Website downtime detected in Google Chrome

What to do with out-of-scope errors?

I could have called this post “1 + 1 = 3”, but this is probably a bit clearer. Anyway, the point is that when you have a large data set of error reports (and Google Chrome definitely falls in this category) you should take advantage of that. As I wrote recently you need to keep track of all error reports. If you get a lot of them (and fixing the error is out of your hands, as in Chrome’s example) you can leverage this data in a way that still benefits your users. Simply by explaining that other users are also struggling with this.

Even if you can’t fix the error you can help your users. Perhaps this should be rule #4?