You Suck at UI

Identifying bad UI on Desktops and the Internets.

Posts tagged web

Jun 15
Visiting the Aéroports de Montréal site, obviously the most important thing to all users is the airport news (who would go there primarily for arrival/departure information, anyway?).

Since I’m so interested in the airport news, I click through to read and… a MS Word document in .doc format?! That somehow seems OK to someone? Have they never used the Web before?

Visiting the Aéroports de Montréal site, obviously the most important thing to all users is the airport news (who would go there primarily for arrival/departure information, anyway?).

Since I’m so interested in the airport news, I click through to read and… a MS Word document in .doc format?! That somehow seems OK to someone? Have they never used the Web before?


Which of these cities could I possibly mean?

No worries, Aeroplan (Air Canada’s rewards program). Parsing is haaaaard.

Which of these cities could I possibly mean?

No worries, Aeroplan (Air Canada’s rewards program). Parsing is haaaaard.


May 29
Ambient signifiers are great and all, but this one from the AMT seems overly ambient.

You see, the slight blue tint on the times indicates that it’s OK to board/disembark the train with a bicycle at this particular stop. This might make slightly more sense if not all of the stops and trans allowed this on the Saturday schedule.

Ambient signifiers are great and all, but this one from the AMT seems overly ambient.

You see, the slight blue tint on the times indicates that it’s OK to board/disembark the train with a bicycle at this particular stop. This might make slightly more sense if not all of the stops and trans allowed this on the Saturday schedule.


May 24
tabindex allows web developers to specify how the browser should advance from field to field when the user presses the tab key.

Normally, this is used when the tabs are interpreted by the browser in a different order than we’d expect users to act.

Rackspace, however, found it somehow necessary to put these fields out of order so tabbing goes to the wrong place.

tabindex allows web developers to specify how the browser should advance from field to field when the user presses the tab key.

Normally, this is used when the tabs are interpreted by the browser in a different order than we’d expect users to act.

Rackspace, however, found it somehow necessary to put these fields out of order so tabbing goes to the wrong place.


May 20
This one is very simple: never, ever require that your users shorten their passwords. You should encourage them to use the longest password they can possibly manage. Security is hard—don’t make it harder by placing arbitrary size limits on them.

Bonus: when you tell me I can’t enter a password that’s longer than 12 characters, it sets off the amateur hour alarms in my head. I sure hope you’re hashing it, and modern hash algorithms aren’t limited to 12 characters. Hire developers who know what they’re doing.

This one is very simple: never, ever require that your users shorten their passwords. You should encourage them to use the longest password they can possibly manage. Security is hard—don’t make it harder by placing arbitrary size limits on them.

Bonus: when you tell me I can’t enter a password that’s longer than 12 characters, it sets off the amateur hour alarms in my head. I sure hope you’re hashing it, and modern hash algorithms aren’t limited to 12 characters. Hire developers who know what they’re doing.


I truly believe that everyone should use 24h time. At the very least, use AM and PM. Ambiguity causes a lot of trouble.

If you must use 12 hour time without denoting AM or PM, you certainly shouldn’t prefix your times with a leading zero. 07:00 always looks like 7 AM, not 19:00.

I truly believe that everyone should use 24h time. At the very least, use AM and PM. Ambiguity causes a lot of trouble.

If you must use 12 hour time without denoting AM or PM, you certainly shouldn’t prefix your times with a leading zero. 07:00 always looks like 7 AM, not 19:00.


May 14
Error messages are generally very bad. This one from Tumblr is particularly frustrating. Did my post work? What happens when I press “back?” Will I lose all of my hard work? No indication.

I ended up reloading (and resubmitting) a dozen times before it worked. Some indication of what to do next would have been nice.

Error messages are generally very bad. This one from Tumblr is particularly frustrating. Did my post work? What happens when I press “back?” Will I lose all of my hard work? No indication.

I ended up reloading (and resubmitting) a dozen times before it worked. Some indication of what to do next would have been nice.


Requiring me to enter my telephone number in a specific format is bad. Computers are good at doing things like separating digits into groups or determining that “514 907 0000” and “514-9070000” are the same number.

Requiring me to enter these digit groups into separate text inputs is worse.

Automatically advancing my cursor to the next box when I’ve typed enough characters is unacceptable. In this capture, I’ve typed “514[tab]907” and the application has done the wrong thing. If you wanted me to enter the digits as one group, then give me one text field.

To be totally fair, this isn’t actually Videotron’s bad UI, directly. The URL is to agendize.com, which seems to be a partner of theirs. In any case: bad going.

Requiring me to enter my telephone number in a specific format is bad. Computers are good at doing things like separating digits into groups or determining that “514 907 0000” and “514-9070000” are the same number.

Requiring me to enter these digit groups into separate text inputs is worse.

Automatically advancing my cursor to the next box when I’ve typed enough characters is unacceptable. In this capture, I’ve typed “514[tab]907” and the application has done the wrong thing. If you wanted me to enter the digits as one group, then give me one text field.

To be totally fair, this isn’t actually Videotron’s bad UI, directly. The URL is to agendize.com, which seems to be a partner of theirs. In any case: bad going.


May 5
PayPal (again with the stupid middle-of-the-word capitalization) is owned by eBay (ahem). I know this. You might know this. It’s irrelevant to most people, though.

PayPal is almost certainly one of the most phished sites in all of the Web.

In the above example, PayPal has branded their site (on the paypal.com domain) as eBay. This is a horrible idea if they’re interested in training users to avoid phishing attacks. Even their own site considers this type of activity to be potentially fraudulent.

PayPal (again with the stupid middle-of-the-word capitalization) is owned by eBay (ahem). I know this. You might know this. It’s irrelevant to most people, though.

PayPal is almost certainly one of the most phished sites in all of the Web.

In the above example, PayPal has branded their site (on the paypal.com domain) as eBay. This is a horrible idea if they’re interested in training users to avoid phishing attacks. Even their own site considers this type of activity to be potentially fraudulent.


May 4
Floating some sort of message or other control/decoration at the bottom of a web page might seem like a good idea, but it can be troublesome for users who navigate with the keyboard, instead of the mouse, such as on CBS News.

The problem is when a user presses the Page Down key (or the space bar), flow is interrupted because part of the previous page was hidden by the floating object. It’s impossible to read full pages at a time, and this is annoying at best.

Floating some sort of message or other control/decoration at the bottom of a web page might seem like a good idea, but it can be troublesome for users who navigate with the keyboard, instead of the mouse, such as on CBS News.

The problem is when a user presses the Page Down key (or the space bar), flow is interrupted because part of the previous page was hidden by the floating object. It’s impossible to read full pages at a time, and this is annoying at best.


Page 1 of 2