Click here to subscribe
Pleasing Jakob Nielsen, Part 3
So here we are, the final article on how to please Jakob Nielsen by not falling on any of the design mistakes of 2005 (part 1 and part 2 are also available). In this final article, I’ll talk about contact information, liquid layouts and photo enlargement. Again, if you haven’t read Jakob’s post, read it first and come back here to see how to implement the tips.
Contact information
The lack of contact information in a website has always been a problem. Either webmasters force users into clicking numerous times to get to it, or its just not there. If you’re making a public website, you most likely want this information to be out there.
This being said, always make sure you have your contact information handy (in my own example, I have it on the sidebar in all screens), and that you don’t force your users to guess how they should contact you. Most of them will prefer to give up, not look around for it.
Liquid layouts
Here’s a tricky one. Liquid layouts have their pros and cons, everyone who’s worked on doing both kinds knows that. Pro: people with big screens won’t feel like your website is a tiny thing in the middle of white (or whatever else) space. Con: liquid layouts can make line lengths unbearable which basically means noone will read what you write. So, the best way to use a liquid layout and not tamper with the readability of your content is to establish constraints like a minimum width and a maximum width, so that even if liquid, your layout keeps a certain balance.
Here’s how to use a liquid layout to wrap the content of a website, using CSS and constraints for minimum and maximum width:
#wrap {width: 80%;max-width: 1000px;min-width: 700px;margin: 0 auto;}
People familiar with CSS will not be amazed by this piece of code - it is extremely basic, yet hopefully helpful. You can, see how it behaves on this website, though. Load the page and control the width of your browser window to see how the layout reacts and how the constraints limit the expansion (and contraction) of the width.
Update: Fixing it on IE
Josh (down in the comments) reminded me that IE doesn’t support the max-width and min-width constraints. There’s always something that breaks with IE, it seems. Anyway, there is has been a work-around to this problem that people can tap, which is internet explorer’s Dynamic Properties, or expression controls. Here’s a piece of code that works for IE:
width:expression(document.body.clientWidth > 1000? "1000px": "auto" );width:expression(document.body.clientWidth < 700? "700px": "auto" );
Basically the two added lines make internet explorer evaluate the width of the element and resize it if necessary. So IE reads the first line as: “if the width is more than 1000px, set it to 1000px” and the second as “if the width is less than 700px, set it to 700px”. This gets the desired effect going, but is quite a hack.
As with pretty much everything related to IE, this is a severely outdated link (it was written for IE 5) but if you want to see more about Dynamic Properties, click here. The (not really) funny part is that in that document you can read: “Dynamic properties simplify and minimize the amount of code required in a document”. I’ll leave judging that one to yourselves.
Inadequate photo enlargement
Jakob Nielsen says:
“The worst mistake is when a user clicks the “enlarge photo” button and the site simply displays the same photo. It’s always a mistake to offer no-ops that do nothing when clicked. Such do-nothing links and buttons add clutter, waste time, and increase user confusion: What happened? Did I do something wrong?”
It is true. This is found in so many e-commerce sites that it makes me wonder why people don’t complain more often — brain snaps into place and says “people can’t be bothered”. A good rule of thumb is to thumbnail everything in order to make images actually zoom in when you want. Another approach is to just detect when the image before details is the same size as the zoomed image and not have any way to zoom if there’s no point.
Final wrap-up
So this is it for the 3-part series on how to please Jakob Nielsen by fixing the top ten web design mistakes on your webpages. One thing that’s always good to remember, though, is that rules are always rules, and some of them are meant to be broken. The biggest rule of all is to think as a visitor to your site and see if it does everything you expect it to, and if it does it well.
If you acomplish this by using Jakob’s advice or not is ultimately up to you, but the goal is still the same: to get the best possible user experience from your material.
[...] -> Pleasing Jakob Nielsen, Part 1 -> Pleasing Jakob Nielsen, Part 2 -> Pleasing Jakob Nielsen, Part 3 [...]
Pingback by Casual.info.in.a.bottle » Blog Archive » Web2 e usabilita’ : alcune segnalazioni… — October 11, 2005 @ 8:55 am