What are some common mistakes regarding usability for web applications?
Poor form validation design.
I hate it when I submit a form which fails validation and the application does any of the following:
- Fields are BLANK when the form reloads. This happened to me while signing up for a web app on my iPhone. I was royally pissed because there were over 8 fields.
- Displays only one validation error per form submit.
- Does not present a summary of errors at the top of the form.
- Does not visually highlight the invalid field inputs.
Poor design when it comes to Primary vs Secondary action buttons on forms.
Users use the back & forward buttons in their browser (or on their mouse). And they use the refresh button too. So be careful with form posts on your website.
Nobody likes this...
This dialog box appears when you refresh the page that the data is posted to. Fortunately, it can be avoided by using method="get" when possible, or method="post" followed immediately by a redirect where necessary. If you must use a post for length or security reasons, the redirect should go to a different URL than the form action to avoid this message.
Asking mandatory personal information in registration forms when they are not necessary.
- asking an address on a website where this information is useless
- Forcing to enter a "real" name
Making this information mandatory is the best way to get a really polluted database full of "dummy", "email@example.com", etc. because most people don't like to give that kind of information when it's not really necessary.
Moreover, not being able to modify any of this information is a really bad design.
target="_blank" on anchors is one of the most common, and the one I hate most. There are some cases which it makes sense, though, to my opinion.
Here's a rather known list of Top 10 Mistakes on Web Design: http://www.useit.com/alertbox/9605.html
Making me hunt for the "forgot your password?" link, and then once I click it, sending me my password in the clear1 once I find it. Our dear Jeff Atwood covered it quite well in "You're Probably Storing Passwords Incorrectly"
1 Admittedly, this part is more of a programming problem, but I consider it a usability problem as well.
Nowhere to close your account or or making it really hard to find where to close your account.
Ideally you want a section "Account" or something worded similarly, and on that page, aside from all the other stuff you want there, a clearly labeled link or button that says "close my account". You can follow that with a page that asks users why they're leaving or invites them to give feedback, but all that stuff should be deprioritised compared to the actual "close my account" (or delete, remove, etc.) call to action.
Fields with super strict validation. For example, if you typed a postal code and "V5X4O4" works but "V5X 4O4" doesn't.
Icons with no textual label or title (on hover or not).
If a title is being truncated, I think you should be able to see a tooltip with the full title on hover.
When important buttons are obfuscated from end users in favour of advertisements or promotional material. Think of PayPal's "Continue without an account" button.
- AUDIO THAT PLAYS WITHOUT PERMISSION! Lol - Also, no mute button.
The question is a bit too general and actually more of a discussion.
I can contribute one thing I've seen repeatedly:
Forms that have a "clear all" button.
- Some of those even design both "submit" and "clear all" buttons the same, giving them equal weight.
- Not to mention that I've seen examples (don't have a specific link in mind right now...) where the "clear" is on the left and the "submit" on the right, causing some users to press the first button closest to their cursor when leaving the last field.
I see no reason at all for a "clear" button, but if you absolutely insist then just use a very subtle link, allowing just one simply and obvious action for the user.
Having to register to perform some basic operations that doesn't really need registration. Or allow a "one-click" registration method.
The user should have the right to decide. I end up with a lot of "one-time use" accounts on so many websites !
Some examples where it shouldn't be necessary :
- downloading files (how many "code" website ask you to register to allow you to download a sample file ?)
- searching (yes, some forums disable search for non registered users)
- accessing an article (when its access is free)
Sites with floating status bars
Such as Meebo Bar. These are obnoxious and rarely provide useful functionality. They take up unnecessary space and pop up distracting balloons.
My biggest pet peeve are sites that for one reason or many don't correctly support plus signs in email addresses. A lot of the time, websites won't validate an email address with a '+' before the '@'. The worst though is when a site accepts the address, but then doesn't escape and/or unescape the data correctly and either tries to send email to an address with a space in it or with the two sides of the '+' smashed together.
This free validator written in PHP purportedly follows all the RFCs and their associated errata.
Web Apps that run on a secure HTTPS connection, but load content from an HTTP connection. On one hand this is totally fine, but for IE users in particular (not me typically) the security warning is awkward and confusing for users...
Not only is it highly aggravating to dismiss on every page, but the wording is awkward, and the button actions are different for IE(6&7) vs. IE8+
Old IE dialog:
New IE dialog:
So, if as a user you "just want to load the full page" (e.g. you are looking for the "go away" button)... it is the default Yes in IE6 & IE7, but the non default No in IE8+.
Note: I'm fully aware as a developer what the purpose of the dialog is and even why Microsoft changed it but for end users it just confuses them especially in IE8. End users see a dialog come up asking for "permission", "confirmation", etc. and expect to click the "ok" or "yes" option because they don't read the dialog. One can argue that the users should read it, but it is just easier if developers ensure they don't have mixed content if it can at all be avoided.
Many sites don't use different colors for visited links.
Jakob Nielsen: Change the Color of Visited Links
Recently I've noticed something I never considered a usability problem:
Hover for making actions available. Like for example on twitter.com where hovering a tweet displays the retweet and reply commands.
This simply doesn't work on touch-based devices at all. There's no hover!
Another pet peeve of mine are websites that don't open external links in a new tab. Look, I'm browsing in a tree. I expect every domain I'm on to represent a branch, when I'm done with it I will close the tab. I certainly don't want clicking 'back' ten times to travel up the branch.
Sites that have menu structures that "float" up and down either side of the screen as you scroll. I can see why they've done it, but it's often very distracting and more often not as "slick" as the designer had obviously hoped for.
An example to which I am referring can be seen here: http://www.deluxe-menu.com/floatable-menu-sample.html
A List Apart has an article by Aza Raskin: "Never Use a Warning When you Mean Undo".
Users tend to ignore or dis-like "warning" pop-ups, but offering a user the chance to "undo" is much more user-friendly.
although they are quite popular these days, they're also considered an accesibility issue, especially for people who fail to recognize words they don't know (or don't even have special characters such as ýáěíč on their keyboard)
personally, I rather use simple rational questions to serve this functionality
example: please write the next whole number that comes after number eleven
Sites that uses lots of cpu and memory
The new improved Google image search puts my cpu on heavy job and takes up several hundreds of megabytes. Much resource hungry.