Page Layout and Organisation
Content Management Support Team
Page Layout and Organisation Content Management Support Team Page - - PowerPoint PPT Presentation
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
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
A Word about Web Design
Artistic Design
Engineering design
When we are talking about web design our focus is more on the evidence led engineering design rather than the subjective artistic design
Page layout - Content First
Screen Resolution
Designing for mobile cannot be an after thought anymore
Don’t be Afraid of White Space
School of UX
Page types
Three most common type
Purpose of page
Page Length
Before After
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% Readability 47.8 59%
Headings to create Visual Hierarchy
Continuous Narrative
Section
Heading Sub heading
Section Section
Sub heading
Section
Sub heading
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)
Paragraphs
possible Sub headings:
paragraphs Use Lists Sentences
Chunk:
manageable bits
White-naped Cranes Grus vipio White-naped Cranes breed in northwestern Mongolia, northeastern China, and adjacent areas of southeastern Russia. Breeding habitat includes shallow wetlands and wet meadows in broad valleys, along lake edges, and in lowland steppes or mixed forest-steppe areas. White- naped Cranes nest, roost, and feed in shallow wetlands and along wetland edges, foraging in adjacent grasslands or farmlands. During migration and on the wintering grounds, they use rice paddies, mudflats, other wetlands and agricultural fields. White-naped Cranes are excellent diggers. The White-naped Crane is often found in the company of
Demoiselle, and Eurasian Cranes. Mated pairs of cranes, including White-naped Cranes, engage in unison calling which is a complex and extended series of coordinated calls. The birds stand in a specific posture, usually with their heads thrown 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 while the female keeps her wings folded at her sides.
Chunking and hierarchy in practice (after)
Paragraphs
possible Sub headings:
paragraphs Use Lists Sentences
Chunk:
manageable bits
White-naped Cranes - Gr Grus vip ipio io
Breeding area
Habitat Shallow wetlands and along wetland edges, foraging in adjacent grasslands or farmlands. During migration and on the wintering grounds, white napped cranes use rice paddies, mudflats,
Nests Mounds of dried sedges and grasses in open wetlands Eggs usually two Nesting behaviour Both sexes incubate the eggs which hatch in 28-32
the nest against possible danger. Chicks fledge (first flight) at 70-75 days.
Pattern: F Shape
The F pattern's implications for Web design are clear and show the importance of following the guidelines for writing for the Web instead of repurposing print content:
a word-by-word manner. Exhaustive reading is rare
most important information.
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. They'll read the third word on a line much less
Paragraph 1 Paragraph 2 Paragraph 3 Paragraph 4
Pattern: Layer Cake Pattern
Layer-cake pattern occurs when the eyes scan headings and subheadings and skip the normal text below. A gaze plot or heat map of this behaviour will show horizontal lines, reminiscent of a cake with alternating layers of cake and frosting. Paragraph 1 Heading 1 Paragraph 2 Heading 2 Paragraph 3 Heading 3 Paragraph 3 Heading 4
Even a bullet list pattern
Inverted Pyramid
1. Start by telling the reader what they need to know
important supporting information
background / detail
Need to know Nice to know
Our Standard Content Template
Page Heading
Summary (up to 20 words) Main point / purpose of page
Sub heading
Sentence
Internal link
Background information
Section 1: The bait
2 Section 2: The message
most users needs
and links to further information in section 3 Section 3: The minor detail
few people who want more detail
Link Placement
Good placement
Bad placement:
Link Placement
1. Links on the side bars are less effective than those in the body of the page
Link Placement
But
Link Placement
Link Placement
Navigation and links
Navigation - Diverging and Converging Links
Further Reading (Books)
Krug, Steve (2004) “Don’t Make Me Think!”, 2nd edition, New Riders
Nielsen, Jakob (2000) “Designing Web Usability” New Riders
Redish, Ginny (2012) “Letting Go of the Words” 2 Edition, Morgan Kaufmann
Further Reading (Web Articles)
Castle, Scott “Word to the Webwise” https://awordtothewebwise.wordpress.com/
Jones, Brandon “Understanding Visual Hierarchy in Web Design” https://webdesign.tutsplus.com/articles/understanding-visual-hierarchy-in-web-design--webdesign-84 McGovern, Gerry “Block reading: how we read on the Web” http://gerrymcgovern.com/block-reading-how-we-read-on-the-web/ Pernice, Kara “F-Shaped Pattern of Reading on the Web” https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/ Stribley, Mary “20 design rules you should never break“ https://www.canva.com/learn/design-rules/ Wrobleski, Luke “Visible Narratives: Understanding Visual Organization” https://www.lukew.com/ff/entry.asp?981