We recently put our website through some user testing on www.usertesting.com. It was an enlightening experience. I would recommend website developers put their own websites/apps though it (or any form of user testing). You’ll learn a lot about how normal (non-technical) people interact with websites and apps.
Some takeaways for me were:
1) Most users don’t understand disabled/greyed out form fields (text/select boxes with the “disabled” attribute applied). Though the form fields look visibly disabled, they will still try to interact with it, and wonder why it doesn’t work. I guess this makes sense as I don’t often see these disabled form fields in the wild. An alternative design would be to simply hide the field completely. Use the visibility: hidden CSS property (instead of display: none) to prevent the form/webpage jumping about as fields are hidden/shown.
2) Make sure your website doesn’t jump about as elements on the page are shown/hidden, causing the browser to reflow the layout. This confuses users as the thing they were interacting with jumps to the different position on the page, leaving them wondering what happened. The same goes for appending/removing HTML content above the area they are interacting with, causing that content to scroll off screen.
3) Provide feedback at or near the point of interaction. We found this out as a user filled in a fairly large form, and missed a required field. The field highlighted to indicate that something was wrong, but it was some distance from the the form’s submit button, so the user didn’t realise what was wrong. They clicked the submit button over and over and thought the website was broken. We should have provided feedback next to the form’s submit button (e.g. “Some Required fields are missing. See above.” etc).
4) Many users have fairly low res widescreen monitors (used on small/portable laptops). Think 1280 by 720. They also use browsers with toolbars installed, file/edit menus & bookmark bars exposed, reducing the amount of vertical real estate left for the webpage. So be careful using position: fixed headers and footers (where the header/footer stays in position as the user scrolls), as this will further reduce vertical real state for your website’s content. Forms won’t fit in completely, elements meant to be viewed as a whole will be chopped off the screen, leaving your users to scroll incessantly. Try to reduce the header/footer height as much as possible. Pinterest is a good example http://about.pinterest.com
5) User don’t read. They just don’t. Unless that text is the focus of attention. Any text you place around important UI elements, such as instructions/hints next to field inputs (password must be X characters long), text in a sidebar, or important legal info, users just won’t notice or pay attention to. And it gets worse the more text you have. I’ve dealt with clients who kept adding text & instructions as a crutch to get around design flaws in the UI. “Make sure you complete Y before doing X”. “Don’t do A before B or C will crash” etc. Inevitably the user will do A before B and phone up the client complaining that the site is broken. So the client would add additional instructions, highlight them on red, make them bolder/larger etc. making the problem worse. So keep text hints down to a minimum, or rethink your apps design and UX.
6) Users do notice and comment on spelling mistakes, mis-aligned elements, low-res images, fonts etc. Developers often get annoyed at designers complaining that their photoshop design compositions haven’t been followed pixel perfectly (elements misaligned, wrong colours & fonts etc.) when developers implement those designs. But I would say to developers that this stuff is important to get right.