Page Layout and Organisation Content Management Support Team
Page Layout and Organisation Todays session: 1. First a word about “design” 2. “Content First” 3. Page types 4. Screen resolution 5. Page length 6. Headings and visual hierarchy 7. Walls of text and chunking 8. Chunking and heading hierarchy in practice (before and after) 9. Inverted pyramid 10. Pattern 1: F shape 11. Pattern 2: Layered cake pattern 12. Even a bullet point pattern 13. Layered content 14. Link placement 15. Navigation: diverging and converging links
A Word about Web Design When we are talking about web design our focus is more on the evidence led engineering design rather than the subjective artistic design Artistic Design Graphic Design • • Visual Design • Applied arts Engineering design • User Interface Design Content Design • • User Experience Design • Interaction design • Information architecture
Page layout - Content First
Screen Resolution Designing for mobile cannot be an after thought anymore Think cross device • • Think mobile first • Think context of use • Think touch • Test for different devices
Don’t be Afraid of White Space School of UX
Page types Three most common type • Landing page (sometimes called home page) • Navigation page (sometimes called the pathway page) • Destination page (sometimes called the information page) Purpose of page • Landing – establish credibility and share most popular links / categories • Navigation – get the user where they need to go as quickly as possible • Destination – focus on helping the user complete their task
Page Length Before After Words 1842 495 Desktop screens 5 1.2 Sentences 364 16 Minutes to read 9 2 % of page read 9.29% 50% Time on page 2’ 44” 59” Complex words 19% 17% Before Readability 47.8 59% • Keep page short – less than 500 words • Rewrite the page with half the words (and again) • Merge sentences • Remove needless words and vague phrases After • Get help from an experienced editor • If has to be a long page use anchors
Headings to create Visual Hierarchy Heading Section Sub heading Section Continuous Sub heading Narrative Section Sub heading Section
Walls of Text and Chunking Chunking refers to the strategy of breaking down information into bite size pieces so the brain can more easily digest information. The brain needs this assistance because working memory will ignore access information Content After Chunking
Chunking and hierarchy in practice (before) White-naped Cranes Grus vipio Chunk: White-naped Cranes breed in northwestern Mongolia, northeastern China, and adjacent areas of Break content down into • southeastern Russia. manageable bits Breeding habitat includes shallow wetlands and wet meadows in broad valleys, along lake edges, and in Sub headings: lowland steppes or mixed forest-steppe areas. White- • Every two or three naped Cranes nest, roost, and feed in shallow wetlands and along wetland edges, foraging in paragraphs adjacent grasslands or farmlands. During migration and on the wintering grounds, they use rice paddies, Paragraphs mudflats, other wetlands and agricultural fields. White-naped Cranes are excellent diggers. The • 70 words or fewer White-naped Crane is often found in the company of • Convert to a single sentence if other crane species, including Red-crowned, Hooded, Demoiselle, and Eurasian Cranes. possible Mated pairs of cranes, including White-naped Cranes, Sentences engage in unison calling which is a complex and extended series of coordinated calls. The birds stand • 20 words or fewer in a specific posture, usually with their heads thrown • Convert sentences to list items back and beaks skyward during the display. In White- naped Cranes, the female initiates the display and utters two calls for each male call. The male always lifts up his wings over his back during the unison call Use Lists while the female keeps her wings folded at her sides.
Chunking and hierarchy in practice (after) White-naped Cranes - Gr Grus vip ipio io Chunk: Breeding area Break content down into • • Northwestern Mongolia manageable bits • Northeastern China • Adjacent areas of southeastern Russia. Sub headings: Habitat Shallow wetlands and along wetland edges, foraging • Every two or three in adjacent grasslands or farmlands. paragraphs During migration and on the wintering grounds, white napped cranes use rice paddies, mudflats, Paragraphs other wetlands and agricultural fields. • 70 words or fewer Nests • Convert to a single sentence if Mounds of dried sedges and grasses in open wetlands possible Eggs Sentences usually two • 20 words or fewer Nesting behaviour Both sexes incubate the eggs which hatch in 28-32 • Convert sentences to list items days. The male takes the primary role in defending the nest against possible danger. Chicks fledge (first flight) at 70-75 days. Use Lists
Pattern: F Shape The F pattern's implications for Web design Paragraph 1 are clear and show the importance of following the guidelines for writing for the Web instead of repurposing print content: • Users won't read your text thoroughly in Paragraph 2 a word-by-word manner. Exhaustive reading is rare • The first two paragraphs must state the Paragraph 3 most important information. • Start subheads, paragraphs, and bullet points with information-carrying words that users will notice when scanning Paragraph 4 down the left side of your content in the final stem of their F-behavior. They'll read the third word on a line much less often than the first two words.
Pattern: Layer Cake Pattern Heading 1 Layer-cake pattern occurs Paragraph 1 when the eyes scan headings and subheadings and skip the normal text below. Heading 2 A gaze plot or heat map of this Paragraph 2 behaviour will show horizontal lines, reminiscent of a cake with alternating layers of cake Heading 3 and frosting. Paragraph 3 Heading 4 Paragraph 3
Even a bullet list pattern • Use bullets to list items of equal importance or are not sequential • Break up larger blocks of text using bullets • Start each item with a different word • If you have a long list convert it into several groups • Write list items concisely • Only between five and ten in each list • Consider using bold face to highlight keywords • Put longest item in list at end so it does not distract from user reading other items • Write list items concisely • Start each item with a different word • Only between five and ten in each list • Break up larger blocks of text using bullets • Consider using bold face to highlight keywords • If you have a long list convert it into several groups • Use bullets to list items of equal importance or are not sequential • Put longest item in list at end so it does not distract from user reading other items
Inverted Pyramid 1. Start by telling the reader what they Need to know need to know 2. Succinct introduction 3. Most important parts of the page at the top of the page Nice to 4. Follow by the most important supporting know information 5. End by giving the background / detail
Our Standard Content Template Page Heading Section 1: The bait Summary (up to 20 words) • Page heading <h1> Main point / purpose of page • Page summary Main point • • Anchor link • Anchor link • Anchor links to paragraphs in section Anchor link • 2 Section 2: The message Sub heading Sentence The essential information that meet • • List most users needs • List • Subheadings <h2>, sentences, lists • List Internal link and links to further information in section 3 Background information Section 3 : The minor detail • Background information for those few people who want more detail • External site • Links to external sites Downloads • • Download
Link Placement Good placement • Helps SEO • Reduces cognitive load • Highlights important links Bad placement: • Disrupts reading • Adds to cognitive load Loss of credibility in your site • • Links can get lost in paragraphs full of other links • User can miss important links you want them to follow
Link Placement 1. Links on the side bars are less effective than those in the body of the page
Link Placement 2. Inline links disrupt cognitive flow and slow or stop the user reading But
Link Placement 4. Unorganised and choices are confusing because they appear the same: 3. Unorganised and too many choices: 5. Duplicate links: Extra links waste users’ time
Link Placement
Navigation and links Navigation - Diverging and Converging Links • Be obvious: what is a link? What is a call to action • Don’t overdo it: where are you sending your audience to?
Further Reading (Books) Krug, Steve (2004) “Don’t Make Me Think!”, 2nd edition, New Riders • Chapter 3: Billboard Design 101 • McGovern, Gerry (2006) “Killer Web Content“, A & C Black Publishers • Chapter 2: Why Less is More Nielsen, Jakob (2000) “Designing Web Usability” New Riders • Chapter 2: Page Design Redish, Ginny (2012) “Letting Go of the Words” 2 Edition, Morgan Kaufmann • Chapter 6: “ Breaking up and Organising Content”,
Recommend
More recommend
