Page design and layout for improved usability l.jpg
This presentation is the property of its rightful owner.
Sponsored Links
1 / 65

Page design and layout for improved usability PowerPoint PPT Presentation


  • 144 Views
  • Updated On :
  • Presentation posted in: General

Page design and layout for improved usability. CSCI 4800/6800 Spring 2005. The importance of page design. “Page design is the most immediately visible part of web design.” Jakob Nielsen, Designing Web Usability Has an effect on how people will judge your site Crucial to enhancing usability.

Related searches for Page design and layout for improved usability

Download Presentation

Page design and layout for improved usability

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Page design and layout for improved usability l.jpg

Page design and layoutfor improved usability

CSCI 4800/6800

Spring 2005


The importance of page design l.jpg

The importance of page design

“Page design is the most immediately visible part of web design.”

Jakob Nielsen, Designing Web Usability

  • Has an effect on how people will judge your site

  • Crucial to enhancing usability


Slide3 l.jpg

Page layout and design

Eye flow and information processing

Establishing a visual hierarchy

Use of screen real estate

Devote most space to content

Design “above the fold”

Common location of page elements

Download (response times)


Eye flow l.jpg

Eye flow

“Good design is based on eye flow. The more eye movement required within a visual field, the less information can be received and processed.”

Duff & Mohler, 1996

  • Relationship between

    • Eye flow

    • Information processing


Natural eye flow l.jpg

Natural eye flow

  • Movement is from the Primary Optical Area to the Terminal Anchor

  • Wavy lines indicate movement that the eye naturally resists

  • Crosses are fallow areas on the page/screen

  • Colin Wheildon, Type and Layout


Issues with reading online l.jpg

Issues with reading online

  • Minimizing eye movement in web page design is even more important than in print

  • It is harder to read online

  • Around 80% of users scan pages

  • Users attention span is short

  • Paradox of the active user


How to reduce eye movement l.jpg

How to reduce eye movement

  • Don’t put important, distracting or eye catching objects in the areas of the screen that causes movement the eye resists

    • Top right

    • Bottom left

  • Important items might be missed

  • Eye catching items might cause users to miss important content


How to reduce eye movement8 l.jpg

How to reduce eye movement

  • Recognise that elements on pages create shapes

    • Text blocks

    • Headings

    • Images

  • Use the squint test tocheck your page layout


How to reduce eye movement9 l.jpg

How to reduce eye movement

  • Draw imaginary grids


Reducing eye movement l.jpg

Reducing eye movement

Making all the images a uniform size would improve the layout of this page


Reducing eye movement11 l.jpg

Reducing eye movement

  • Use left alignment for text and headings

    • It is no accident that this is the most used alignment

    • Not only reduces eye movement

      • Also places a fixed point on the page from where all headings and text can be scanned


Reducing eye movement12 l.jpg

Reducing eye movement


Reducing eye movement13 l.jpg

Reducing eye movement


Slide14 l.jpg

Page layout and design

Eye flow and information processing

Establishing a visual hierarchy

Use of screen real estate

Devote most space to content

Design “above the fold”

Common location of page elements

Download (response times)


Visual hierarchies l.jpg

Visual hierarchies

“One of the best ways to make a page easy to grasp in a hurry is to make sure that the appearance of things on the page… clearly and accurately portrays… which things are related and which things are part of other things…”

Steve Krug, Don’t Make Me Think

  • Relationship between

    • Placement of objects on a page

    • Information processing


Establishing a visual hierachy l.jpg

Establishing a visual hierachy

  • Design and layout of information to

    • Show importance or priority

    • Show relationships between elements

    • Aid scanning and comprehension


Show importance or priority l.jpg

Show importance or priority

  • Make important elements bigger, bolder

  • Position important elements nearer to the top of the page

  • Use a stronger colour for important elements

  • Use whitespace around elements to make them stand out


Show importance or priority18 l.jpg

Show importance or priority

Newspapers do this well

Headline story, then secondary stories…


Show importance l.jpg

Show importance

Government entry point – all departments shown on equal footing

Some priority content is highlighted


Show relationships between elements l.jpg

Show relationships between elements

  • Use positioning

    • Grouping shows family relationship

    • Nesting shows child relationship

    • Proximity shows similarity

  • Use presentation styles

    • Size, colour, font style, orientation


Show relationships l.jpg

Show relationships

Family relationship

Child relationship


Show relationships22 l.jpg

Show relationships


Aid scanning and comprehension l.jpg

Aid scanning and comprehension

  • Provide visual relief from dense chunks of text

    • Use meaningful headings and sub-headings

    • Turn lists and series into bullet points

    • Emphasize key words or phrases within paragraphs

  • Create contrasts between page elements

  • Present appropriate content as tables, graphs, charts, images


Aid scanning l.jpg

Aid scanning

Headings and sub-headings

Bulleted lists


Aid scanning25 l.jpg

Aid scanning

Too much dense text

Hyperlink colour doesn’t stand out enough


Aid scanning26 l.jpg

Aid scanning

Too much dense text

Hyperlink colour doesn’t stand out enough


Aid scanning27 l.jpg

Aid scanning

Still too hard to scan links to main content


Slide28 l.jpg

Page layout and design

Eye flow and information processing

Establishing a visual hierarchy

Use of screen real estate

Devote most space to content

Design “above the fold”

Common location of page elements

Download (response times)


Use of screen real estate l.jpg

Use of screen real estate

  • Most users visit sites for their content

  • So, the first rule concerning the use of screen real estate is:

    • Devote most of the screen real estate to content


Devote screen real estate to content l.jpg

Devote screen real estate to content


Devote screen real estate to content31 l.jpg

Devote screen real estate to content


Devote screen real estate to content32 l.jpg

Devote screen real estate to content


Devote screen real estate to content33 l.jpg

Devote screen real estate to content

Content is displayed inside a small frame.

No scrolling would be required if the frame was removed


Devote screen real estate to content34 l.jpg

Devote screen real estate to content

Content is displayed inside a small frame, requiring more scrolling than would otherwise be necessary


Devote screen real estate to content35 l.jpg

Devote screen real estate to content


Slide36 l.jpg

Page layout and design

Eye flow and information processing

Establishing a visual hierarchy

Use of screen real estate

Devote most space to content

Design “above the fold”

Common location of page elements

Download (response times)


Use of screen real estate37 l.jpg

Use of screen real estate

  • Users are in a hurry

    • Not sure if this page is the right page

  • So, the second rule concerning the use of screen real estate is:

    • Design ‘above the fold’


Scrolling behaviour l.jpg

Scrolling behaviour

  • Early studies (1994/5) showed that users were reluctant to scroll

  • Not true any more, but

  • Users will not scroll unless they think the content they’re looking for is on that page

  • So, give good clues above the fold about what’s below the fold


The fold moves l.jpg

The fold moves

  • Variations in screen displays means that the page fold is not static

    • Different display resolutions (640x480, 800x600, 1024x768, etc.)

  • Browser toolbars also take up space

  • Safe space is around 300 pixels


Above the fold l.jpg

“Above the fold”

Real content is hidden below the fold


Page length and scrolling l.jpg

Page length and scrolling

  • As a rule of thumb

    • Home page: 1 screen

    • Level 2 page: 2 screens

    • Level 3 page: 3 screens

  • Caution: pages can be accessed directly


Horizontal scrolling l.jpg

Horizontal scrolling

Users don’t expect horizontal scrolling


Slide43 l.jpg

Page layout and design

Eye flow and information processing

Establishing a visual hierarchy

Use of screen real estate

Devote most space to content

Design “above the fold”

Common location of page elements

Download (response times)


Common location of page elements l.jpg

Common location of page elements

  • Some design conventions exist

    • Logo at top left or centre

    • Logo increasingly functions as a link to home page

    • Navigation at top and/or left

      • Right side navigation increasing

      • Practise of repeating links in text at bottom of the page is decreasing


User expectations study l.jpg

User expectations study

  • Conducted at Wichita State University Usability Research Lab (SURL) 2000

  • 304 participants (128 male, 183 female)

  • Age range 18-63 (average 20)

  • Internet experience > 1yr (mean 3 yrs)

  • Primary surfing goal - education


User expectations study46 l.jpg

User expectations study


Example l.jpg

Example

Logo placement

Navigation placement

Search placement


Example48 l.jpg

Example

Logo placement

Navigation placement

Search placement


Example49 l.jpg

Example

Logo placement

Navigation placement

Search placement


Example50 l.jpg

Example

Logo placement

Navigation placement

Search placement


Example51 l.jpg

Example

Logo placement

Navigation placement

Search placement


Example52 l.jpg

Example

Logo placement

Navigation placement

Search placement


Example53 l.jpg

Example

Logo placement

Navigation placement

Search placement


Example54 l.jpg

Example

Logo placement

Navigation placement

Search placement


Slide55 l.jpg

Page layout and design

Eye flow and information processing

Establishing a visual hierarchy

Use of screen real estate

Devote most space to content

Design “above the fold”

Common location of page elements

Download (response times)


Download times l.jpg

Download times

“Every usability study I have conducted since 1994 has shown the same thing: users beg us to speed up download times”.

Jakob Nielsen, Designing Web Usability


Factors affecting download times l.jpg

Factors affecting download times

  • Many factors are outside the control of the web designer

    • Server’s connection to the Internet

    • Throughput of the server

    • Bottlenecks on the Internet

    • User’s connection to the Internet


Factors affecting download times58 l.jpg

Factors affecting download times

  • Many factors are within our control

    • Weight of page components

      • Use graphics and multimedia judiciously

      • Optimise graphics and multimedia

      • Reuse images and other page components

    • Browser rendering speeds

      • Reduce nesting in complex tables


Guidelines for page sizes l.jpg

Guidelines for page sizes

  • Survey of top 50 sites in 1999 by Vincent Flanders

    • Top ten average size - 34.4Kb

    • Bottom ten average size - 61.3Kb

    • Average size - 47.8Kb


Page weight a coincidence l.jpg

Page weight a coincidence?

1 second 10 seconds

modem 2Kb 34Kb

ISDN 8Kb 150Kb

T1100Kb 2Mb

Jakob Nielsen, Designing Web Usability


Human reaction to response times l.jpg

Human reaction to response times

  • Miller (1968), but still considered valid

    • 0.1 second limit for system to appear to react instantaneously

    • 1 second before user’s flow of thought is interrupted

    • 10 second limit for keeping a user’s attention focused

  • Voila! 34Kb


Page weight examples l.jpg

Page weight examples

  • Google – 12Kb

  • Yahoo – 46Kb (usually around 29Kb)

  • Hotmail – 17Kb

  • Amazon – 142Kb (usually around half this)

  • AltaVista – 15Kb

  • Ninemsn – 80Kb


Page weight examples g8 l.jpg

Page weight examples - G8

  • University of Melbourne – 109Kb

  • University of Queensland – 61Kb

  • University of WA – 75Kb

  • University of NSW – 75Kb

  • University of Adelaide – 63Kb

  • University of Sydney – 73Kb

  • ANU – 63Kb

  • Monash University – 38Kb


Summary l.jpg

Summary

  • Minimize eye movement across the page

  • Create a visual hierarchy

  • Devote most space to content

  • Design “above the fold”

  • Put things where users expect them

  • Keep (navigational) pages lean (around 34Kb)


Resources and tools l.jpg

Resources and tools

  • Jakob NielsenDesigning Web Usability, 2000

  • Steve KrugDon’t Make Me Think, 2001

  • Patrick J Lynch and Sarah HortonWeb Style Guide, 1999http://info.med.yale.edu/caim/manual

  • ZDNet Mechanic Site Tune Uphttp://www.netmechanic.com/cobrands/zd_dev/


  • Login