Shocking!

It occurs to me that as we embrace the paperless office, there is a common UI component which is bound to suffer: tabs. Without seeing actual folders, how will kids understand tabs? Much as archaic words such as “clockwise” and “2D” mean little to children theses days, the notion of a manilla folder with a little paper protrusion will seem just as shamanistic.

I remember my first summer job temping in an insurance office. Everyday, all day, I would take sheets from an endless stack of papers and place them in the correct folder. Alphabetizing (another soon-to-be-forgotten word) is pretty much the worse job you can have in an office. I despised it. And since school clearly had failed me, the only way I could ever correctly file something, was to sing the Alphabet Song. From the beginning. Every time. Worse still, because I am slightly OCD, of course I had to finish it, even after passing the letter in question. This includes the catchy little ending: “now you know your ABCs next time won’t you sing with me.” Maddening.

I am glad my kids will never know that pain. But with the office going digital, children born today might never see real folder with an actual tab. Which is why what Weebly.com is doing is so wrong. The website building software starts off OK, tabs flipping to different pages for “folders” filled with elements to add to your page. It is the last tab that goes rogue. You click the settings tab and it opens up a dialog. What?

Look people, I know we all love to use tabs. They are such a easy way to organize information and controls. I think they are a bit of a crutch, but most of the time they work well. But there are a few things we all need to agree on:

1. Tabs are not buttons. They don’t open dialogs or change things not structured under them.
2. Swapping tabs should never submit changes or permanently alter content.
3. Stick to one row. If you find yourself needing two rows or tabs, re-exame the problem. Maybe there is a better way to structure the data. No one likes jumping tab rows.

If we don’t hold the line, future generations will have no idea how tabs used to work. People will be using them for everything and a valuable piece of our UI heritage will be lost.

I have never met anyone who claims to design interaction flows for telephone menus. This could be because people who do are too ashamed of their job to ever mention it in public, or it could be because the menu trees are all designed by small monkeys in a hats.

If said monkeys are reading this, I would like to suggest the following rules when designing your flow:

1. Don’t ask me for my phone number. Or if you have to, make sure it is done as a last resort. If you can get my phone number from my caller ID, or my account, please do. Typing in your own phone number and having it repeated back to you in a slow, monotone is painful.
2. I KNOW your menu has changed, I am LISTENING CLOSELY, please stop telling me that. I don’t just punch random keys, I promise. If you are never going to update your message, don’t make it something that talks about something being ‘new’ or ‘changed’.
3. On a related note, I can only imagine you never expected anyone to actually dial your number, since any call volume seems to be highly unusual to you. How about you skip the surprise and just tell me how many days I can expect to wait?
4. Don’t make me press a number to end the call. I can end it quite well by just hanging up. Menu choices like “If you are done, press 1″ are silly. There is one big red button I hit when I am done.
5. Look at the default case, can you remove any key presses? Maybe make the default action just to continue on ahead? If so, remove the extra steps.
6. Don’t start a menu tree choice out at 2. Or 3. The first choice is 1.
7. If 0 is cancel, let it always be cancel, don’t move it to 2 sometimes and 3 others.
8. Model towards a web browser. Give us a back button (like 0) so we can walk back through the tree if we feel we have made a mistake.
9. Use your own product. A lot. Make sure you can handle it, because if you can’t then all the other monkeys of the world aren’t going to like it any better.

I actually think there would be some interesting challenges in phone menu design, and it has the benefit of being a pure information architecture problem.

There is no sport in pointing out flaws in Microsoft Office products. In fact, in their defense, they have the difficult task of continuously adding new features to a set that was complete 10 years ago. When the pressure is on to shoehorn in 3-5 new back-of-the-box of features to a yearly release, complexity is a way of life. IT staff don’t buy software based on “20 useless features removed!”

My latest UI annoyance came after PowerPoint repeatedly requested that I center my bulleted list. There was clearly a default setting for the slide which was to center any new text element. This came into direct conflict with my desire to add a bulleted list. This is unfortunate. I can think of no reason to EVER center align a bulleted list. That pretty much defeats the whole purpose of a bulleted list.

Which brings me to my UI rant of the day. Be context aware, please. There are few times I get more frustrated with an interface than when it becomes clear that the application’s left hand has no idea what the right one is doing. It can be challenging, for sure, but this is what interaction designers are tasked to handle. Build that flow chart, map out the states, try to anticipate what the user is doing, and act like you are there to help. Ironically, it doesn’t take much to look smart.

I thought we had an agreement here, guys. Somewhere in the Hippocratic Oath for UI designers we all agreed to only use red for error messages. Now I feel that some of my brothers and sisters have gotten off message.

I saw the above example today, letting me know: “OMG! YOUR PAYMENT! IT WAS RECEIVED!” Which is fine, but it took me a second to realize that, in fact, everything was OK. Would not a green also have been attention grabbing and ignited less of a fight-or-flight instinct in the user?

Whole Foods has installed a nifty new credit card reader that, after processing your payment, flashes a big, red “ACCEPTED!” I still do a double take. What did it just tell me? Is everything OK? “Your credit card was not REJECTED! Don’t worry, YOUR BANK ACCOUNT has not just been reduced to ZERO FUNDS!”

Let us go back to keeping red for non-normal states. Trust me, there are other colors that will stand out almost as well, and, at least in the US, they won’t imply emergency.

Thankfully touchscreens are making this particular ATM problem a thing of the past, but I do feel that this is a prime example of why you should test your system in the environment in which it will be used.  In the lab, I have no doubt that these prompts and buttons line up great.  However, add in a glare and a slight angle, and suddenly the choice isn’t so clear.

Even ‘free-range’ lab testing is no substitute for real-world observation.  It is right to ask, as Schrödinger once did, if it is even possible to observe a ‘natural’ interaction?  Or does our mere observation always taint the data?  Probably, but it is worth the effort to try.

I feel the hotel is sending me mixed messages with this one.  On the one hand, the red strike-through cigarette is says: “Don’t Smoke.”  While the ashtray which sits upon it says: “Go right ahead, smoke in bed, burn holes in the sheets, just don’t get any ash on the floor.”  I guess they are just being realistic.

A friend of mine sent this along as another stellar example of instructive content.  The best part of this photo, to me, is an image of a increasingly frustrated parking lot owner, who keeps adding more signs to the machine.  Clearly since the last 3 he added had no effect, the solution must be to add one more.  The three “step 3″s is amusing as well.

You probably need enlarge this one to get the full effect. A co-worker of mine likes to say: “somethings just don’t need a label.” I argue that this might be a good example of that.

I found this bathroom gender identification sign in a hotel a little bit odd. Is it just his pose seems exaggeratedly “manly”? Or does the angle of the legs look a bit too similar to the “skirt” of the female sign? Maybe I was just jet-lagged, but it made me question the choice I was about to make.