Too Flashy

Click image to enlarge

Snarky comment: Why write 11 lines of code when you can write 400—or build it in Flash?

What's wrong here?

1. First and foremost: Is Flash doing anything here to enrich the user experience? No. Then don't use it! There was no reason to build this in Flash. This list was embedded in an HTML page to capture one answer in a series of questions. Most of the other questions were presented using HTML. This could and should have been nothing more than a series of checkboxes in HTML.
2. But as long as they're using Flash, let's have at it....
   Why are these options boxes aligned like molecules?
   Why aren't they all the same size?
   Why is the name of the store middle aligned, but the checkbox is not?
   Why does Sam's Club have to wrap?

Source: Kodak Big Picture Panel survey

Any Questions?

Click image to enlarge

TITLE: Frequently Asked Questions:

MESSAGE: Parking Violation Payment Locations:

1. For your convenience, Parking Violations can be paid On-Line or Pay By Phone at: Parking Citation Services 240-453-0113
(Credit Cards Only)

Online Ticket Payment (click on link)

Snarky comment: Yeah, I have some questions for Montgomery County, Maryland: Where are the questions? And why is your online ticket payment page so hideously designed, written, and organized?

What's wrong here?

1. There are no questions on this page. The page has nothing to do with questions--it's a ticket payment page. Why the Frequently Asked Questions heading?
2. The page has multiple levels of headings, each with unnecessary colons.
3. The deeper you get into the content, the larger the font gets.
4. There's inconsistent (and incorrect) use of capitalization throughout the page.
5. The click on link instructions are not only unnecessary, but not helpful. If you don't know to click on the link, you probably also don't know what a link is.
6. Anyone else notice that trailing space on the link?

Source: www.montgomerycountymd.gov

One and All

Click image to enlarge

TITLE: Your opinion counts here.

MESSAGE: Which of the following beverages from the Coca-Cola Company have you tried?

BUTTONS: SUBMIT

Snarky comment: I'm so glad Coca-Cola wants my opinion now, because I've been offering it for years. OK, here goes: If your web development team continually demonstrates that they don't understand even the most basic UI concepts, maybe you should hire someone else.

Everybody repeat after me: "Radio buttons are for mutually exclusive options. Check boxes are for multiple options."

What's wrong here? Each of these questions invites multiple answers. Yet the radio buttons only allow you to provide one. In my case, I've tried all of these beverages, but I can only select one. This bad programming decision will ultimately skew (if not invalidate) the results of this survey. I wonder if the suits reviewing the resulting data will realize this.

Source: www.mycokerewards.com

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