More from my talk at WebSG…
The most important role of any web designer is to make decisions for the user so that they have to think less. Web design is an interesting mix of art and engineering, it’s no use having information on the web if it’s not usefully presented.
Tiny Fonts
Possibly the most common error I found when perusing the local Singapore web, was the curse of the ‘tiny font’. I don’t know how great everyone’s eyes are out here but they must be better than mine! 10px Arial is used on virtually every site as not only body copy but as headers, navigation & supplemental information.
The main issue with these sites is not their use of Arial at 10px, but overuse leading to a lack of hierarchy. Without obvious differential between headings and body content there is no way for users to scan the page quickly to find the content they want. As a designer you’re meant to make things easy to use, not just throw everything up on the screen.
Whitespace & The Grid
The grid has been written about by minds greater than mine, such as Mark Boulton and Khoi Vinh (both personal sites are great examples of grid-based design). Mark put it best in his fabulous book (which everyone should buy):
The grid is a regulatory system that pre—empts the basic formal decisions in the design process. Its preconditions help in the structuring, division and ordering of content. I’m not saying a well—designed grid will solve all of your compositional problems, far from it, but it goes some way to creating a coherent structure in design that in turn creates the aesthetic values all of us are seeking in our designs.
It’s just another tool in the designers armoury to help the user be guided around your website. There is a reason newspapers are divided into columns, separated by plenty of white space: it makes them easier to read and navigate. Websites are no different, if anything it’s harder to read on a screen than from paper so these divisions are even more important.
So many sites are designed with so little care for the user. Imagine how much more usable the Singapore government websites would be if there was an underlying cross-departmental grid in place. That way whatever site you were looking at you’d have some consistency about where the navigation was, where the content should be and even where to find search or contact information. They don’t have to look the same, but the underlying spatial relationships could help convey structure across multiple sites.
As for whitespace it’s simply a matter of not crowding content upon content with little regard for the importance of the space between. The space is important, it helps break up the sections of your website into scannable chunks, if the user is having to peer close to the screen, or use their finger to hold their place, you’re doing something wrong. Mark Boulton’s article, Whitespace at A List Apart is a fantastic primer.
I think I may start to call Boulton, the Godfather of web layout.
Line Length & Leading
One thing I didn’t mention in my talk that is tangentially related to this topic is line-length. The ideal number of letters for a column of text for readability is 50-80 characters. The combination of tiny fonts and a lack of layout structure leads to a lot of sites where the line length is much more than this. It makes it harder to read which slightly defeats the point of making the information accessible in the first place.
There is also a tendency to have little or no leading, simply the amount of whitespace around a line of text. Smashing a line into the previous one seems to be common practise amongst the ‘tiny font’ brigade.
Examples
I’m assuming a lot of the flaws are related to a fear of user scrolling, but it turns out that users don’t mind. So design for readability, not to squeeze information into visual oblivion.
I’ve uploaded a selection of the images that caught my eye, all tagged tinyfont on QuickSnapper. The bulk of these feature all the problems from this article, not just the prospect of acres of Arial.