Page Layout and Organisation Content Management Support Team Page - - PowerPoint PPT Presentation

page layout and organisation
SMART_READER_LITE
LIVE PREVIEW

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


slide-1
SLIDE 1

Page Layout and Organisation

Content Management Support Team

slide-2
SLIDE 2

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
slide-3
SLIDE 3

A Word about Web Design

Artistic Design

  • Graphic Design
  • Visual Design
  • Applied arts
  • User Interface Design
  • Content Design
  • User Experience Design
  • Interaction design
  • Information architecture

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

slide-4
SLIDE 4

Page layout - Content First

slide-5
SLIDE 5

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
slide-6
SLIDE 6

Don’t be Afraid of White Space

School of UX

slide-7
SLIDE 7

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)
  • 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

Purpose of page

slide-8
SLIDE 8

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%

  • Keep page short – less than 500 words
  • Rewrite the page with half the words (and again)
  • Merge sentences
  • Remove needless words and vague phrases
  • Get help from an experienced editor
  • If has to be a long page use anchors
slide-9
SLIDE 9

Headings to create Visual Hierarchy

Continuous Narrative

Section

Heading Sub heading

Section Section

Sub heading

Section

Sub heading

slide-10
SLIDE 10

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

slide-11
SLIDE 11

Chunking and hierarchy in practice (before)

Paragraphs

  • 70 words or fewer
  • Convert to a single sentence if

possible Sub headings:

  • Every two or three

paragraphs Use Lists Sentences

  • 20 words or fewer
  • Convert sentences to list items

Chunk:

  • Break content down into

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

  • ther crane species, including Red-crowned, Hooded,

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.

slide-12
SLIDE 12

Chunking and hierarchy in practice (after)

Paragraphs

  • 70 words or fewer
  • Convert to a single sentence if

possible Sub headings:

  • Every two or three

paragraphs Use Lists Sentences

  • 20 words or fewer
  • Convert sentences to list items

Chunk:

  • Break content down into

manageable bits

White-naped Cranes - Gr Grus vip ipio io

Breeding area

  • Northwestern Mongolia
  • Northeastern China
  • Adjacent areas of southeastern Russia.

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,

  • ther wetlands and agricultural fields.

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

  • days. The male takes the primary role in defending

the nest against possible danger. Chicks fledge (first flight) at 70-75 days.

slide-13
SLIDE 13

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:

  • Users won't read your text thoroughly in

a word-by-word manner. Exhaustive reading is rare

  • 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. They'll read the third word on a line much less

  • ften than the first two words.

Paragraph 1 Paragraph 2 Paragraph 3 Paragraph 4

slide-14
SLIDE 14

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

slide-15
SLIDE 15

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
slide-16
SLIDE 16

Inverted Pyramid

1. Start by telling the reader what they need to know

  • 2. Succinct introduction
  • 3. Most important parts
  • f the page at the top
  • f the page
  • 4. Follow by the most

important supporting information

  • 5. End by giving the

background / detail

Need to know Nice to know

slide-17
SLIDE 17

Our Standard Content Template

Page Heading

Summary (up to 20 words) Main point / purpose of page

  • Anchor link
  • Anchor link
  • Anchor link

Sub heading

Sentence

  • List
  • List
  • List

Internal link

Background information

  • External site
  • Download

Section 1: The bait

  • Page heading <h1>
  • Page summary
  • Main point
  • Anchor links to paragraphs in section

2 Section 2: The message

  • The essential information that meet

most users needs

  • Subheadings <h2>, sentences, lists

and links to further information in section 3 Section 3: The minor detail

  • Background information for those

few people who want more detail

  • Links to external sites
  • Downloads
slide-18
SLIDE 18

Link Placement

Good placement

  • Helps SEO
  • Reduces cognitive load
  • Highlights important links
  • 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

Bad placement:

slide-19
SLIDE 19

Link Placement

1. Links on the side bars are less effective than those in the body of the page

slide-20
SLIDE 20

Link Placement

  • 2. Inline links disrupt cognitive flow and slow or stop the user reading

But

slide-21
SLIDE 21

Link Placement

  • 3. Unorganised and too many choices:
  • 4. Unorganised and choices are confusing because they appear the same: 
  • 5. Duplicate links: Extra links waste users’ time
slide-22
SLIDE 22

Link Placement

slide-23
SLIDE 23

Navigation and links

  • Be obvious: what is a link? What is a call to action
  • Don’t overdo it: where are you sending your audience to?

Navigation - Diverging and Converging Links

slide-24
SLIDE 24

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”,
slide-25
SLIDE 25

Further Reading (Web Articles)

Castle, Scott “Word to the Webwise” https://awordtothewebwise.wordpress.com/

  • Chapter 6: Layout
  • Chapter 8: Navigation

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