10/7/10
1
Mandy Zhang New York Institute of Technology
Know Your Audience
Hypertext:
Definition: “A linked document in electronic format (i.e., files on a hard drive, a CD, or a DVD containing text, graphics, audio, video, or some combinations of these elements). The link enables readers to jump between documents” (Kilian, 2009).
Elements: text, pictures, graphics, audio, video, links, interactive features, social media elements or a combination of these elements
Example: Columbia Missourian’s “3-‐2-‐2-‐1-‐1” format
Figure out why you’re creating this site? What do you want to convey?
Think about your audience. How can you tailor your content to appeal to this audience? For example, should you add lots of graphics or is it more important that your page download quickly?
How many pages will you need? What sort of structure would you like it to have? Do you want visitors to go through your site in a particular direction, or do you want to make it easy for them to explore in any direction?
Sketch out your storyboard on paper.
Devise a simple, consistent naming system for your pages, images, and other external files
Source: HTML, XHTML, & CSS (2009), p. 44
10/7/10
2
Feature Story Webpage
Feature proposal: What is your
story idea? Why is important
or/and interesting What elements
do you plan to collect?
Website Layout Draw the layout for the feature story page on paper
Incorporate rich media elements (e.g., photo , graphics, video, etc.) in the “.content” area
Element 1: Text
Two types of information retrieval via the Web Chunking: hit and run information retrieval
What is a chunk? Whatever information you can fit on a single screen.
When chunking, you break your material up into segments of no more than 100 words (often much less), so that every word within a chunk is visible on a monitor screen.
Two or more chunks, when linked electronically, form a stack.
Scrolling: information retrieval by downloading Provide internal links
Eye Track Studies
Poynter Eye track Study 2007 (videos)
Jacob Nielsen’s F-‐Pattern
Source: Nielsen, J. (2006), F-‐Shaped Pattern for Reading Web Content.
10/7/10
3
Implication of the F-‐Pattern
Users scan the text.
The first two paragraphs must state the most important information.
Start subheads, paragraphs, and bullet points with information-‐carrying words that users will notice when scanning down the left side of your content in the final stem of their F-‐behavior.
Scannable Text
Highlighted keywords (hypertext links, font variation and color change)
Meaningful sub-‐headings
Bulleted lists One idea per paragraph
The inverted pyramid style, starting with the conclusion
Half the word count (or less) than conventional writing
How Users Read on the Web
Version Guidelines Followed usability improvement
No. 1 promo)onal wri)ng 0%
No. 2 concise text 58%
No. 3 scannable layout 47%
No. 4 objec)ve language 27%
No. 5 combined version 124%
Source: Nielsen, J. (1997). How Users Read on the Web.