Scanability: Difference between revisions

From LitWiki
 
(8 intermediate revisions by 2 users not shown)
Line 1: Line 1:
[[Web_Based_Digital_Media_for_College_Writing_Students|Home Page]]
Having a good layout and [[Design|design]] when writing online is as important as the writing. Scanability is one of the key tools to online layout. Readers will often look quickly over a page to decide if what they are looking for will be found. Headlines, subheads, and links are all ways to achieve a more scannable page. Making small changes like variation in font size, and color or adding an image/graphic can also help content be more scannable.
Having a good layout and [[Design|design]] when writing online is as important as the writing. Scanability is one of the key tools to online layout. Readers will often look quickly over a page to decide if what they are looking for will be found. Headlines, subheads, and links are all ways to achieve a more scannable page. Making small changes like variation in font size, and color or adding an image/graphic can also help content be more scannable.


Line 4: Line 6:
[[File:Scannability.jpg|400px|thumb|right|This image shows how breaking up large amounts to text using headlines, subheads, and even a graphic can make writing more scannable.<ref>Butler </ref>]]
[[File:Scannability.jpg|400px|thumb|right|This image shows how breaking up large amounts to text using headlines, subheads, and even a graphic can make writing more scannable.<ref>Butler </ref>]]


When writing an online it is a good idea to present the most important information first. When reading an outline vs. a full text article, the readability is better in an outline. The outline is easy to read and conveys all of the information the full text does except in a bulleted form. Readers can easily locate what they are looking for in an outline and when they find it, they can go to the full text for the details. Practice writing in headlines and subheads to make finding information easy, and link to other good sources to give what has been written more detail. [[Photos|Graphics]] can also be used for headlines if there is applicable text in the graphic.
"Students often judge sites on how they look. But they usually prefer sites that look clean and simple rather than flashy and busy." <ref> Nielsen </ref> When writing an online it is a good idea to present the most important information first. When reading an outline vs. a full text article, the readability is better in an outline. The outline is easy to read and conveys all of the information the full text does except in a bulleted form. Readers can easily locate what they are looking for in an outline and when they find it, they can go to the full text for the details. Practice writing in headlines and subheads to make finding information easy, and link to other good sources to give what has been written more detail. [[Photos|Graphics]] can also be used for headlines if there is applicable text in the graphic.


Headlines <ref>Carroll,34 </ref> and subheads are a great way to:  
Headlines <ref>Carroll,34 </ref> and subheads are a great way to:  
Line 16: Line 18:
== Links ==
== Links ==


Adding links to online writing makes the work non-linear. If the writing is more like an outline than adding links can add more details without adding visual weight to what has been said. Links should not interrupt the text; they should go with the flow of the writing and unlike headlines should not break up what is being said. The links used on a page should only create [[Relevance and Support|relevant support]] not extra reading for the user to navigate through.
Adding links to online writing makes the work non-linear. If the writing is more like an outline than adding links can add more details without adding visual weight to what has been said."Students were frustrated by sites that provided shallow information. College students demand more evidence than teenagers do." <ref> Nielsen </ref> Links should not interrupt the text; they should go with the flow of the writing and unlike headlines should not break up what is being said. The links used on a page should only create [[Relevance and Support|relevant support]] not extra reading for the user to navigate through.


When Linking <ref> Carroll,47 </ref>
When Linking <ref> Carroll,47 </ref>
Line 26: Line 28:
#*Each site may have a different way to format a link, make sure and know how to make links correctly for each site used.
#*Each site may have a different way to format a link, make sure and know how to make links correctly for each site used.


Keep all links up to date and working all the time. Broken links make sites non-crediable and add unnecessary weight to the text.  All links should have a purpose, and the site linked to should also follow the other rules of good online writing. [[Usability|Navigating]] to a new page should not distract the reader or cause confusion.
Keep all links up to date and working all the time. Broken links make sites non-crediable and add unnecessary weight to the text.  All links should have a purpose, and the site linked to should also follow the other rules of good online writing. [[Usability|Navigating]] to a new page should not distract the reader from what has all ready been written or cause confusion.


== Fonts and Graphics ==
== Fonts and Graphics ==
Line 35: Line 37:
*Fonts and colors should blend well together and should be consistent through out the writing.  
*Fonts and colors should blend well together and should be consistent through out the writing.  
*Do not use to many colors and make sure the colors you choose go with the theme of the writing.  
*Do not use to many colors and make sure the colors you choose go with the theme of the writing.  
:"There’s a distinction between typefaces that are expressive and stylish versus those that are useful and appropriate to many situations, and our job is to try to find the right balance for the occasion" <ref>Mayer </ref>


The same applies with [[Photos|images]], make sure the images are of a similar quality and size. Make sure all of them are applicable to the writing and only add visual interest, not distract from the writing.
The same applies with [[Photos|images]], make sure the images are of a similar quality and size. Make sure all of them are applicable to the writing and only add visual interest, not distract from the writing.


:"Notice the ways that the selection and placement of text and images, the typography and text size, the use of color, and other design elements help to set a mood and establish a rhythm for the magazine that affects how you react to and move through the content." <ref> Carroll</ref>
:"Notice the ways that the selection and placement of text and images, the typography and text size, the use of color, and other design elements help to set a mood and establish a rhythm for the magazine that affects how you react to and move through the content." <ref> Carroll, 62 </ref>
 


== Notes ==
== Notes ==
Line 55: Line 58:
#Carroll, Brian. ''[http://www.scribd.com/doc/64429015/Writing-for-Digital-Media Writing for Digital Media]''. Routledge; New York, 2010. Retrieved 2 Nov. 2012.
#Carroll, Brian. ''[http://www.scribd.com/doc/64429015/Writing-for-Digital-Media Writing for Digital Media]''. Routledge; New York, 2010. Retrieved 2 Nov. 2012.
#Friedman, Vitaly . "[http://www.smashingmagazine.com/2007/11/08/40-excellent-freefonts-for-professional-design/ 40+ Excellent Freefonts For Professional Design]". (2007).  Retrieved 26 Nov 2012.
#Friedman, Vitaly . "[http://www.smashingmagazine.com/2007/11/08/40-excellent-freefonts-for-professional-design/ 40+ Excellent Freefonts For Professional Design]". (2007).  Retrieved 26 Nov 2012.
#Mayer, Dan. "[http://www.smashingmagazine.com/2010/12/14/what-font-should-i-use-five-principles-for-choosing-and-using-typefaces/ What Font Should I Use?: Five Principles for Choosing and Using Typefaces]". (2010). Retrieved 3 Dec. 2012.
#Neilsen, Jakob. "[http://www.nngroup.com/articles/college-students-on-the-web College Students on the Web]". Retrieved 3 Dec. 2012.

Latest revision as of 11:43, 3 December 2012

Home Page

Having a good layout and design when writing online is as important as the writing. Scanability is one of the key tools to online layout. Readers will often look quickly over a page to decide if what they are looking for will be found. Headlines, subheads, and links are all ways to achieve a more scannable page. Making small changes like variation in font size, and color or adding an image/graphic can also help content be more scannable.

Headlines / Subheads

Error creating thumbnail: File missing
This image shows how breaking up large amounts to text using headlines, subheads, and even a graphic can make writing more scannable.[1]

"Students often judge sites on how they look. But they usually prefer sites that look clean and simple rather than flashy and busy." [2] When writing an online it is a good idea to present the most important information first. When reading an outline vs. a full text article, the readability is better in an outline. The outline is easy to read and conveys all of the information the full text does except in a bulleted form. Readers can easily locate what they are looking for in an outline and when they find it, they can go to the full text for the details. Practice writing in headlines and subheads to make finding information easy, and link to other good sources to give what has been written more detail. Graphics can also be used for headlines if there is applicable text in the graphic.

Headlines [3] and subheads are a great way to:

  1. Break up text
    • Reading a long paragraph will likely be off putting to an online reader. When visually breaking up text using headlines and even subheads, the reader is more likely to read the information.
  2. Draw attention
    • Headlines can be presented in different fonts, sizes, or colors to catch the attention of the reader.
  3. Summarize
    • Often, the information presented can be summarized in a few words; this is helpful so the reader can find exactly what they are looking for.

Links

Adding links to online writing makes the work non-linear. If the writing is more like an outline than adding links can add more details without adding visual weight to what has been said."Students were frustrated by sites that provided shallow information. College students demand more evidence than teenagers do." [4] Links should not interrupt the text; they should go with the flow of the writing and unlike headlines should not break up what is being said. The links used on a page should only create relevant support not extra reading for the user to navigate through.

When Linking [5]

  1. Do not link the words click here
    • Doing this is redundant, if adding a link the words that are connected to the link.
  2. Do no use the entire URL
    • URLs can be very lengthy and confusing, this adds unnecessary weight to text and can confuse the reader
  3. Know the sites linking policy
    • Each site may have a different way to format a link, make sure and know how to make links correctly for each site used.

Keep all links up to date and working all the time. Broken links make sites non-crediable and add unnecessary weight to the text. All links should have a purpose, and the site linked to should also follow the other rules of good online writing. Navigating to a new page should not distract the reader from what has all ready been written or cause confusion.

Fonts and Graphics

Error creating thumbnail: File missing
This image shows how to use images to break up your text. [6]

Variations in font, size, and color can break up text just as much as headlines and subheads. "Besides, elegant fonts can help to convey the message in a more convenient way."[7]

  • Fonts and colors should blend well together and should be consistent through out the writing.
  • Do not use to many colors and make sure the colors you choose go with the theme of the writing.
"There’s a distinction between typefaces that are expressive and stylish versus those that are useful and appropriate to many situations, and our job is to try to find the right balance for the occasion" [8]

The same applies with images, make sure the images are of a similar quality and size. Make sure all of them are applicable to the writing and only add visual interest, not distract from the writing.

"Notice the ways that the selection and placement of text and images, the typography and text size, the use of color, and other design elements help to set a mood and establish a rhythm for the magazine that affects how you react to and move through the content." [9]

Notes

  1. Butler
  2. Nielsen
  3. Carroll,34
  4. Nielsen
  5. Carroll,47
  6. Butler
  7. Friedman
  8. Mayer
  9. Carroll, 62

Also See

Reference

  1. Butler, Christopher. "Formatting Your Blog Posts". (2010). Retrieved 26 Nov. 2012
  2. Carroll, Brian. Writing for Digital Media. Routledge; New York, 2010. Retrieved 2 Nov. 2012.
  3. Friedman, Vitaly . "40+ Excellent Freefonts For Professional Design". (2007). Retrieved 26 Nov 2012.
  4. Mayer, Dan. "What Font Should I Use?: Five Principles for Choosing and Using Typefaces". (2010). Retrieved 3 Dec. 2012.
  5. Neilsen, Jakob. "College Students on the Web". Retrieved 3 Dec. 2012.