I have been browsing through my text for the course I am doing as part of a Certificate in Web Design from the Open Polytechnic. The course is called Writing for the Web, and the text is Write Me A Web Page, Elise by Rachel MacAlpine.
One of the parts of the course, and the book is editing you page to maximise readability. It seems they don’t like justification, which I do, so I might have to get over that. A really interesting bit is the concept of f-shape in documents. Apparently eyetracking visualizations show that users often read Web pages in an F-shaped pattern: two horizontal stripes followed by a vertical stripe. I have seen this briefly before, but never had an opportunity to really explore it.
- Users first read in a horizontal movement, usually across the upper part of the content area. This initial element forms the F’s top bar.
- Next, users move down the page a bit and then read across in a second horizontal movement that typically covers a shorter area than the previous movement. This additional element forms the F’s lower bar.
- Finally, users scan the content’s left side in a vertical movement. Sometimes this is a fairly slow and systematic scan that appears as a solid stripe on an eyetracking heatmap. Other times users move faster, creating a spottier heatmap. This last element forms the F’s stem.
I am not convinced, as to whether this is true, mainly because I don’t read like that, yet it seems an intuitive way to read. I had a vague chicken/egg question to it, since a lot of pages have often been formatted like that, do we read like that naturally, or do we read like that because that’s the most common formatting structure?. 🙂
As a result I was looking at our OPAC, and I looked at other OPAC’s as well, keeping the F-shape in mind. I don’t know how many of the graphic designers had that as a brief, but a lot of OPACs are formatted to maximise the f-shape. This blog doesn’t, as the side bar hangs along the right of the screen, not the left, which makes me wonder if I need to find a theme that puts it on the other side. 🙂