Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

When I was learning about web design, and I remember similar things from art classes, people said that the eye sees things the most on an object which are in a line from the top-left to bottom-right corners.

Is there a word or phrase for that line? I've heard "order of the occident" to refer to the order western text is written, but that's not really the same thing. Thanks to the thread on english.stackexchange, I now also know about a boustrophedon, which is is a line back-and-forth down the item in question.

It seems like there should be a term for this particular diagonal, but I can't find one.

share|improve this question
add comment

3 Answers

up vote 3 down vote accepted

There are a number of terms and models (only slightly different) that describe this. Personally I think you're better off simply referring to it as the natural reading order. The "shape" isn't really it's own thing, it's just a result of most Western languages reading right to left, top to bottom. We've applied this to the digital realm. In no small part thanks to Western influence in the creation of the early Web and computer technology in general, this reading order has become common even in Left to Right language websites or bilingual websites as a kind of default for layout of elements.

Vanseo Design's 3 Design Layouts offers three related terms to define this: The Gutenberg Diagram, Z-Pattern Layout and F-Pattern Layout. If you'll look, you'll realize they're really the same thing, visualized in superficially different ways. For what it's worth, more web design people will likely recognize F Pattern or F Shape but you'll get more design geek cred by calling it The Gutenberg Diagram. Again, if you're using plain English or conversing with users not designers, I'd strongly suggest referring to it as (natural) reading order.

No, reading isn't "natural" depending on your definition, but that doesn't really matter

share|improve this answer
    
The link to Vanseo Design explains what I wanted to know. Thank you for the reference, and summary. –  Hydrangea Sep 14 '12 at 22:06
add comment

As Matt Obee says, the Gutenberg Diagram is a great visualization of web users' habits, as is Jakob Nielsen's "F-pattern"

Gutenberg Diagram:

enter image description here

Jakob Nielsen's F-pattern heatmaps:

f-pattern

share|improve this answer
    
Thanks for the illustrations. –  Hydrangea Sep 14 '12 at 22:04
add comment

Might you be thinking of the Gutenberg diagram?

share|improve this answer
1  
Please don't just link to somewhere else without actually answering the question. At the minimum you should summarise the link and then provide a link as the citation, not just the link on it's own. –  JonW Sep 14 '12 at 20:46
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.