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

Learn Your A, B, 3s

TITLE: Alert

TYPE: Warning

MESSAGE: You may want to let the meeting organizer know you changed this meeting. If the meeting organizer sends an update for this meeting, your changes will be lost. Is this OK?

BUTTONS: Yes/Cancel

Snarky comment: What's it gonna be: Yes or Cancel? Huh...? What's it gonna be?

What's wrong here?

1. Mismatched choices. Yes or Cancel? Why? These options have nothing to do with each other. Better: Yes/No or OK/Cancel.
   
2. No default button. Press Enter and nothing happens. Worse yet, press Y and nothing happens. You need to click Yes or press ALT+Y to choose Yes.
   

Source: Microsoft Office Outlook Web Access (Provided by Microsoft Exchange Server 2003)

Groups of None

TITLE: Message Options

BUTTONS: Close

Snarky comment: What do you suppose happened here? Do you think the developer just missed the target when dragging these controls into the two group boxes?

What's wrong here?

1. Group boxes as headings. This is likely a UI implementation error, as opposed to an intentional design statement. Presumably, the Message Settings and Tracking Options groups should contain the controls that they respectively precede.
2. No colons. This is one of a number of windows that lacks colons on field labels. While by itself this is not a problem, it's inconsistent throughout the application. Field labels in some windows have colons, others don't.
   
3. No Cancel. So, then, what happens when you click the close box ("X") in the top right corner? Does it have the same effect as clicking Close or does is cancel the changes? It's unclear. Better: OK/Cancel.
   

Source: Microsoft Office Outlook Web Access (Provided by Microsoft Exchange Server 2003)