Visible Narratives: Understanding Visual Organization


	Visible Narratives: Understanding Visual Organization

Djiezes

2-3-2008 7:43 AM

371 views

tags:

visualization, information, design, communication, organization, hierarchy

Djiezes says:

Generally, the hierarchy of a web page is based on distinctions between the content, navigation, and supporting information on a page. Within each of these sections further distinctions can also be made. A general web page hierarchy (from highest to lowest importance) may look like the following:

Content

* Page title
* Subsection title
* Embedded links
* Supplementary information (captions, etc.)

Navigation

* Location indicator
* Top-level navigation options
* Sub-navigation options
* Trace route (breadcrumbs)

Supporting elements

* Site identifier
* Site-wide utilities (shopping cart, site map, etc.)
* Footer information (privacy policy, contact info, etc.)

Add a Comment

Login to Comment. Not a member yet? Sign up

Relativity visualized

NASA's Climate TimeMachine

Follow the Money: The New Global Wealth Ma...

World Wide Telescope

Tantric Sex For Beginners: The YabYum Posi...

More clips from Djiezes

Scientology recruiting via facebook?

How Computers boot up

Biocultural Evolution in the 21st Century:...

Today's Top Clips

visit the Top Clips page

View the Top Clips from February 3, 2008

Embed This Clip In Your Site...

<div style="margin: 12px 0px; font-family: arial; color: #333333; background: #ffffff; border: solid 4px #e5e5e5; width: 100%; clear: left;"><div class="CM_CTB_Content_Wrap" style="margin: 0px; padding: 0px;background-color: #ffffff;"><div style="border-bottom: solid 1px #dcdcdc; white-space: nowrap; margin-bottom: 8px; background-color: #eeeeee ;background-image: url(http://clipmarks.com/images/source-bg.gif); background-repeat: repeat-x; height: 24px; line-height: 24px; vertical-align: middle; padding-bottom: 4px; color: #666666; font-size: 10px;" ><a href="http://clipmarks.com/clip-to-blog/" title="see clips that are hot right now"><img src="http://content.clipmarks.com/blog_embed/290f1493-5934-40a3-abd5-8028f32f22c7/6D5D11ED-1EBF-4560-9A8E-DF73E33FB3F2/" alt="" width="19" height="19" border="0" style="vertical-align: middle; margin: 0px 4px; display: inline; border: none; float:none;" /></a>clipped from <a title="http://www.lukew.com/resources/articles/visible_narratives.html" href="http://www.lukew.com/resources/articles/visible_narratives.html" style="font-size: 11px;">www.lukew.com</a></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.lukew.com/resources/articles/visible_narratives.html"><P><SPAN class="title">Visible Narratives: 
          Understanding Visual Organization</SPAN>
by <A href="http://www.lukew.com/resources/articles/../../about/leadership.html">Luke Wroblewski</A></P></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.lukew.com/resources/articles/visible_narratives.html"><B>How we see: visual relationships</B></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.lukew.com/resources/articles/visible_narratives.html">
          Whenever we attempt to make sense of information visually, we first 
          observe similarities and differences in what we are seeing. These relationships 
          allow us to not only distinguish objects but to give them meaning.</blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.lukew.com/resources/articles/visible_narratives.html">The <B>principles of perception</B> give us valuable insight into how we visually group information.</blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.lukew.com/resources/articles/visible_narratives.html"><SPAN class="footer">Fig 1: Principles of perception: proximity, similarity, 
        continuance, and closure.</SPAN></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.lukew.com/resources/articles/visible_narratives.html"><table background="undefined" bgcolor=""><tr><TD bgcolor="#ffffff"><IMG width="450" height="120" border="0" src="http://www.lukew.com/resources/articles/img/vn_perception.gif" />
</TD></tr></table></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.lukew.com/resources/articles/visible_narratives.html">Introducing variations in one or all of these categories creates <B>visual contrast</B>. The more contrast between two objects, the more likely they will be perceived as distinct and unrelated.</blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.lukew.com/resources/articles/visible_narratives.html"><SPAN class="footer">Fig 2: Visual differences between objects.</SPAN></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.lukew.com/resources/articles/visible_narratives.html"><table background="undefined" bgcolor=""><tr><TD bgcolor="#bdc994"><TABLE width="100%" cellspacing="0" cellpadding="8" border="0"><TBODY><TR><TD bgcolor="#ffffff"><IMG width="450" height="142" border="0" src="http://www.lukew.com/resources/articles/img/vn_relationships.gif" />
</TD></TR></TBODY></TABLE></TD></tr></table></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.lukew.com/resources/articles/visible_narratives.html"><B>Telling a story: visual hierarchy</B></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.lukew.com/resources/articles/visible_narratives.html">Fig 5</blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.lukew.com/resources/articles/visible_narratives.html"><table background="undefined" bgcolor=""><tr><TD bgcolor="#ffffff"><IMG width="300" height="177" border="0" src="http://www.lukew.com/resources/articles/img/vn_hierarchy1.gif" />
</TD></tr></table></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.lukew.com/resources/articles/visible_narratives.html"><SPAN class="footer">Fig 6: If all the elements in a page layout are given 
        equal visual weight, making sense of the page is difficult. Meaning is 
        created through the differences and similarities among elements and their 
        place in the page's visual hierarchy.</SPAN></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.lukew.com/resources/articles/visible_narratives.html"><table background="undefined" bgcolor=""><tr><TD bgcolor="#bdc994"><TABLE width="100%" cellspacing="0" cellpadding="8" border="0"><TBODY><TR><TD bgcolor="#ffffff"> <IMG width="506" height="139" border="0" src="http://www.lukew.com/resources/articles/img/vn_hierarchy_changes.gif" /> 
                  </TD></TR></TBODY></TABLE></TD></tr></table></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.lukew.com/resources/articles/visible_narratives.html">Fig 7</blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.lukew.com/resources/articles/visible_narratives.html"><table background="undefined" bgcolor=""><tr><TD bgcolor="#ffffff"><IMG width="350" height="198" boder="0" src="http://www.lukew.com/resources/articles/img/vn_generic_page.gif" />
</TD></tr></table></blockquote></div><div style="margin: 0px 6px 6px 4px;"><table style="font-size: 11px;border-spacing: 0px;padding: 0px;" cellpadding="0" cellspacing="0" width="100%"><tr><td style="background:transparent;border-width:0px;padding:0px;">&nbsp;</td><td align="right" style="background:transparent;border-width:0px;padding:0px;width:107px" width="107"><a href="http://clipmarks.com/share/6D5D11ED-1EBF-4560-9A8E-DF73E33FB3F2/blog/" title="blog or email this clip"><img src="http://content9.clipmarks.com/images/c2b-foot.png" border="0" alt="blog it" width="107" height="17" style="border-width:0px;padding:0px;margin:0px;" /></a></td></tr></table></div></div>