Frayed Ribbon

Click image to enlarge

Snarky comment: This application uses the coolest new command pattern from Microsoft: the Ribbon! File, Edit, View, ...hey, wait a minute. You're not fooling anyone—that's just a menu disguised as a Ribbon. My suggestion: leave the Ribbon design to the professionals.

What's wrong here?
The Ribbon in this application is nothing more than a menu presented as tabs. This goes against everything Microsoft has published and evangelized about the use and design of the Ribbon pattern. The whole point of the Ribbon is to expose program functionality to users for easier access and with fewer clicks. Quoting Microsoft, "While you might simply refactor a traditional menu bar and toolbar design of an existing program to a Ribbon format, doing so misses most of the value of using a Ribbon. Instead of refactoring your existing commands, it's better to redesign completely how commands are performed in your program." For further information (hint, hint), Microsoft has extensive guidance on Ribbon design in the MSDN library.

Source: Universal Remote MX-6000 Editor Software

Brown Out

TITLE: Select Date

BUTTONS: Close

Snarky comment: I've seen my share of poorly designed date-pickers in my day, but this one takes the cake. It's all about the colors here.

What's wrong here?

1. The calendar looks unbalanced—because it is. The columns are only as wide as their respective headings. A slightly wider box or a slightly smaller font size for the day of the week could have avoided this. And a smaller font size for the weekday might have also looked less...amateurish.
2. Contributing to the imbalance, the Select Date heading isn't centered properly.
3. Future dates look disabled, while dates in the past look selectable. Better: reverse the colors used to differentiate past and future days. Further differentiating the current day would also help.
4. How do you navigate to the next month? Keep looking. Find it yet? OK, look more closely. Black chevrons to the sides of the month and year are so cloaked by the brown background, they're nearly imperceptible. Better: Light (preferably white) chevrons.
5. How many ways can you close a calendar? Since this one opens in a separate browser window, you have three options: close the window, click the (letter) "x" in the top right corner, or click Close. Overkill.

Source: Dolce International reservations

Expired Design

Click image to enlarge

MESSAGE: Your session has expired. Please sign in again

BUTTONS: Close

Snarky comment: I hate picking on mycokerewards.com. [Actually, I don't.] It almost seems cruel[/easy] and unfair [read: deserved]. (In my opinion.)

What's wrong here?

1. "Session" and "expired" are commonly used words in online services, but why? Why burden customers with this technobabble. Anywhere else, this phrase would have no meaning. Better: You were signed out automatically since no activity occurred in the past 15 minutes.
2. Don't leave me hanging; give me some ending punctuation...please!
3. Could that Close button be more arbitrarily placed?
4. They could have centered the text in the Close button. They should have centered the text in the Close button. They didn't.
   

Source: www.mycokerewards.com

Remedial Menuing

Click image to enlarge

Snarky comment: For the company that perfected integrated, multi-level menu navigation on the web, this new search and browse tool in MSDN is an abomination. Oh, MSDN Subscription Downloads browser, how do I hate thee? Let me count the ways....

What's wrong here?

1. Jittery. Roll over the menu items with your pointer, and the selected item changes size while everything else in the menu twitches—likely the result of a poorly-defined style-sheet. This thing looks and behaves like it was created by an intern with little to no CSS, HTML, Javascript, or UI experience.
2. Spastic. Move your pointer just one pixel too far, and either the next menu pops in or the menu collapses. There's no delay here to ease into, out of, or between menu selections, and there are dead spots between menu items where the child menu disappears altogether.
3. Cramped. Many of the menu items don't even fit in the available menu space [see image, above].
4. No JavaScript? No dice. If you have JavaScript disabled for security or accessibility reasons, you'll be unable to access the downloads in your MSDN subscription library. There's no apparent alternative for browsers without scripting enabled.
5. The IE experience is not so much better as less bad. Are these anomalous behaviors appearing because the menu system is optimized for Internet Explorer? Not so much. While the layout of this over-designed tool works better in Internet Explorer than in other browsers, all of these issues still exist when you're using IE.

Hey, Microsoft: Could you just give us back the old left-side navigation menu?

Source: msdn.microsoft.com

You Must Click This

Click image to enlarge

MESSAGE: Are you a new user? Click this button:

BUTTONS: New User

Snarky comment: When they say click, they truly mean click. No really, you have to click the button.

What's wrong here?

1. Since there are no real options here, you might think you can just press ENTER to continue. You cannot...you can press ENTER until sundown, but you're not getting anywhere. True to its word, you must click the button. This is just bad form. With only one button on the page, there's no good reason why it shouldn't be defined as the form's submit button, letting users either click or press ENTER.
2. What if I'm not a new user? What then? Sadly, there's only one solution there: lie.
3. The message has an odd layout and inconsistent margins.

Source: Nomadix Access Gateway, as implemented for Four Points hotels

Tabbing through the 'Net

Click image to enlarge

Snarky comment: TWiT.tv's site looks beautiful, but the top navigation makes no sense. I remember hearing Alex Lindsay talk about how difficult it was to get the Drupal CMS to do what they wanted it to do with the navigation. Maybe it was difficult to implement 'cause Drupal knows better...?

What's wrong here?

1. Each of these tabs--with the exception of Home and About--takes you to a different site with a completely different look and navigation model. Essentially, the tabs are links to related (and alternatively-hosted) destinations. Why's that bad? Because tabs suggest sections within a site, not links to somewhere else. It's confusing when they behave otherwise. Better: A collection of links on every page at the top of the right column, defined so the target pages open in a different browser window (or tab).
   
2. One could argue that the Home and About tabs aren't necessary either. Home replicates the de facto click-the-top-left-logo-to-go-home link [not shown here], and About could (and probably should) be combined with the oddly-compelling Huh? link in the top right corner.
   
3. Welcome really means Sign In...and it should be labeled so.
4. What purpose does the TWiT logo serve here?
   

Full disclosure: It pains me to call out TWiT.tv as an example. I am a huge fan of the content on the TWiT network: I listen to many of Leo's shows, I'm a monthly contributor, and I participate in the TWiT forums. But a bad UI is a bad UI, and this is what I do--teach people how to create better user experiences by pointing out mistakes to avoid.

Source: TWiT.tv

No...I WON'T Go!

Click image to enlarge

MESSAGE: Opt-out Email Confirmation

BUTTONS: No, I do NOT wish to Unsubscribe/Yes, Unsubscribe me

Snarky comment: If you don't wish to cancel your subscription, then...why are you even here?

What's wrong here?

1. The jargon starts on line one. Opt-out Email Confirmation is unnecessarily technical and doesn't clearly describe the function you can perform here. Better: Cancel Email Subscription.
2. Enter Email. A half-baked instruction as a label is no substitute for an accurately descriptive label and concise inline instructions. Better label: Email address. Better instructions: Type the email address to remove from the subscription.
   
3. But this leads to another issue: Why isn't this field pre-filled? You get here by clicking a link on a message otherwise aware of your e-mail address, so why should you have to type it yourself here?
4. I'm going to pretend that the word "email" without a hyphen doesn't bother me. It does, but I'll pretend it doesn't since I realize it's just a style preference. For the record, Chicago also prefers "e-mail" with a hyphen.
   
5. The first button totes a most tortured label: No, I do NOT wish to Unsubscribe. Presumably you so don't want to cancel your subscription you find it necessarily to yell the word "not." So why does this button even exist? Why would you be here if you didn't want to cancel your subscription?
6. The second button (the default, despite any visual differentiation to that effect), triggers the cancellation process. The language "Unsubscribe me" is cumbersome. Simpler is usually better: OK.
   

Source: Third-party e-mail subscription service used by D-Link

Just Do It

Click image to enlarge

TITLE: HomeSeer Updater

TYPE: Information

MESSAGE: The SmartHome Device Manager (SDM) is required to be installed.  The setup program has been copied to the \BIN\Insteon directory of your system and the updater will run it now.

BUTTONS: OK

Snarky comment: So what? Don't bother me with all this stuff--just do it.

What's wrong here?

1. Setup and update software shouldn't trouble you with superfluous information. You don't need to make a decision here; you can't do anything here. Better: put it in the readme file.
2. "[SDM] is required to be installed" is unnecessarily awkward. Better: "The updater must install the [SDM]."
3. The message suggests that files will be copied to C:\BIN\Insteon, but that's not where they go; instead, they're installed to C:\Program Files\HomeSeer 2\BIN\Insteon. It's a fine point, but assuming the intent of this message is to let you find the files in case the update fails, the reference should be correct.
4. Better: A step in an installation wizard could advise you that it is "now installing the SmartHome Device Manager (SDM)."

Source: HomeSeer updater for INSTEON plug-in

Directionally Challenged

Click image to enlarge

Snarky comment: It's a scroll button. It's an accordion tab. It's confusing and (in my opinion) entirely overdesigned.

What's wrong here? Clicking the navigation buttons shifts the images in the opposite direction expected. You'd figure that clicking scroll buttons on the far left and right sides of these images would reveal image tiles to the left and right, accordingly. And you'd be right...except that the arrows on the left and right sides point in the wrong direction. And there are multiple scroll buttons on one side. As shown here, clicking the right-facing scroll button on the left side slides the images horizontally to the right to reveal a new image to the left; clicking the left-facing scroll button on the far right side slides the images horizontally to the left to reveal two new images to the right. Confused yet? You should be. It's like a horizontal accordion control--but it's not. It doesn't work like an accordion should work, and it's completely confusing. Better: Single scroll buttons on the left and right sides of the image tiles to reveal the images to the left and right, respectively. 

Source: www.infiniti.com

Here or There?

Click image to enlarge

MESSAGE: Your e-mail address will only be used for the purposes you selected above - it will not be shared with third parties. Click here to view our  privacy policy.

Snarky comment: Click here. No...here. No...I mean there.

What's wrong here?

1. Here links are bad enough without them being misleading. In this case, you don't really click here...you click the words "privacy policy." The language "Click here..." is inaccurate (and unnecessary). Better: Read our privacy policy [where the link is on "privacy policy"].
   
2. It's arguable that privacy policy should be a proper noun and, thus, capitalized.
3. What's with the extra space before the link?
   

Source: www.mycokerewards.com