Lecture 7 - Overview

1
Lecture 7 - Overview

• Housekeeping
• Exercise 1
• Web Design ? Design for Scanning
• Basics
• Visual Hierarchy
• Web Design Basic Principles
• Brief History of Graphic Design Education
• Swiss Design School ? Grid System
• Color Magazine
• Steve Krugs Principles
• Typography
• Web Navigation
• User Behavior ? Design Implications ? Design
  Specifics

2
Web User Behavior (cont.)
3
Web User Behavior (cont.)
4
Web User Behavior (cont.)
5
Web User Behavior (cont.)
6
Web User Behavior (cont.)
7
Web User Behavior (cont.)
Scan pages - don't read them
Look for anything Search Interest Decide
quickly Choose first reasonable item ? We
satisfice
Muddle through Don't figure out how things work
Resist forming models
Stick to what works
8
Web Design - Basics
? Stay above the fold
9
Web Design Basics (cont.)
10
Web Design Basics (cont.)
11
Web Design Basics (cont.)
12
Web Design Basics (cont.)
13
Web Design Basics (cont.)
14
Web Design Basics (cont.)
15
Web Design Basics (cont.)
16
Web Design Visual Hierarchy
Important Visually Prominent
17
Web Design Visual Hierarchy (cont.)
Logically Related Visually Related
Part of Visually Nested
18
Web Design Visual Hierarchy (cont.)
Why flawed?
Headline needs to Visually Span only related
items
19
Web Design Basic Principles

• Alignment
• Don't Mix Alignment Styles - Simplicity
• Create Sufficient Left Margin
• Constrain Total Width of Page
• Proximity
• Related Things Close Together
• Spatial Separation Conceptual Separation
• Repetition Consistency
• Grid Layout, Navigation, Graphics Color Coding,
  Typeface
• Creates Ease of Use
• Contrast
• Bigger, Bolder, Color, Spatial Distance
• Guide the Eye and Create Visual Hierarchy

20
Swiss Design School

• Based on Bauhaus
• Form follows Function
• Minimalism, Universality, Rationality,
  Abstraction and Structure
• Focus on Formal Purity rather than Content
• Grid System
• Divide 2-D plane or 3-D space into Smaller Fields
• Intermediate Space so that Captions and Pictures
  Dont Touch

21
Grid System Create Visual Hierarchy
22
Grid System 8 Fields Example
Swiss Design School
The great Swiss innovators of the 1950s and 1960s
can be seen as representing the classic phase of
modernism, the heirs to Bauhaus graphic design
and other early modern European graphic
designers. These Swiss innovators applied the
Bauhaus functionalist ethic to a systematic
graphic method that shared the Bauhaus values of
minimalism, universality, rationality,
abstraction and structural expressionism. This
fresh and highly professional graphic design was
first transmitted beyond Switzerland to the rest
of Europe and the U.S. through Swiss design
magazines and a few books, notably Graphis and
the "Swiss" bibles by Muller-Brockmann, Gertsner,
Hoffmann and Ruder. Then, in the late 1960s,
several professional offices began to practice
these ideas to solve the needs of large corporate
clients in Holland, Great Britain, Canada and the
U.S.
Caption Text
The method, symbolized by the typeface Helvetica,
was enthusiastically adopted by several corporate
and institutional design groups, including
Container Corporation, Ciba-Geigy, Herman Miller,
IBM and Massachusetts Institute of Technology.
Montreal's Expo '67 was a feast of Helvetica and
systematic environmental signage, as well as
advanced architecture. Eventually, American
corporate culture embraced "Swiss" school graphic
design as the ideal corporate style. Although
"Swiss" graphic design was first adopted in U.S.
by professionals in their design practices, soon
several leading U.S. graphic design schools
followed suit, going directly to the source.
23
8 Fields Grid - Image Size Options
24
8 Fields Grid - Image Size Options
25
Grid System - Motivation

• Solve Visual Problems with Greater Speed
  Confidence
• Maintain Consistency
• Title Location
• Annotations Location
• Image Rhythm
• Create Visual Hierarchy Rhythm
• Invisible Guiding Hand
• Information Presented Clearly Logically
• Read More Quickly
• Understood Better
• Better Recall

26
Color Magazine
27
Colors Magazine
28
Colors Magazine
29
Colors Magazine
30
Colors Magazine
31
Colors Magazine
32
Krugs Principles

• Steve Krug
• Usability Expert who performs expert usability
  reviews
• Observes others use a site by doing usability
  testing
• Creates short usability report
• Book Dont Make Me Think

33
Web Design Krugs Suggestions

• Diversity of Users Rapid Change
• Diverse users, diverse computers, diverse skills,
  diverse
• Rapid evolution of technology and expectations
• Short attention span
• Common Sense
• No right way to design
• Make it short
• More likely to be used and remembered
• Don't make me think
• Get rid of question marks - each item has clear
  purpose
• Make it work at a glance
• People have little time
• Support intented task - manage expectations

34
Web Design Krugs Suggestions

• Design for Scanning, not reading
• Visual Hierarchy
• Visual contrast - size, bold, color
• Important things Visually prominent
• Break pages up into clearly defined areas
• Related things Spatially close, Nested
• Avoid visual noise"
• Leverage Conventions
• Clear what's clickable
• Use underline and/or color coding
• Make each click a mindless choice
• Cut ½ of words, then cut ½.

35
Cut Unnecessary Words
36
Cut Unnecessary Words
37
Cut Unnecessary Words
Cut Happy Talk
Reduce Instructions
38
Typography

• Good Typography depends on Visual Contrast
• between one font and another
• between text blocks and the surrounding empty
  space.

? Read by recognizing overall shape of words
Avoid all-uppercase headlines ? monotonous
rectangles ? few distinctive shapes to catch
reader's eye
? Legibility depends on the tops of words
Choice of uppercase or lowercase letters can have
dramatic effect on legibility.
Use Downstyle (capitalize only the first letter,
and any proper nouns) for your headlines and
subheads
39
Typography (cont.)

• Readability - how easy it is to read a lot of
  text
• Serif Typeface Better if a Lot of Text
• Type Size 10 14pt
• Line Length
• Leading or Space between Lines
• Legibility - how easy it is to recognize short
  bursts of text
• Sans Serif Typeface is Easier to Read on Screen
• 7 - 10 Words Per Line
• Overlong or Overshort Lines Tire
• Column Width Proportional to Type Size
• Bold and italic used for small blocks of text
• If you make everything bold, then nothing stands
  out
• If you cram every page with dense text, users see
  a wall of gray
• Enough Contrast between Type and Background

40
Writing for the Web

• Concise, SCANABLE and Objective
• By Jacob Nielsen
• People scan page
• Study 79 always scanned only 16 read
  word-by-word.
• Make pages scanable
• Start with conclusion
• One idea per paragraph
• Half the word count (or less) than conventional
  writing
• Highlighted keywords
• Meaningful sub-headings (not "clever" ones)
• Bulleted lists
• Credibility important and increased by
• High-quality graphics
• Good writing
• Use of outbound hyperlinks

41
Lightness of Browsing

• No Sense of Scale
• 50 pages? 5000 pages?
• No Sense of Direction
• Up more general
• Down more specific
• No Sense of Location
• How to develop sense of site
• How to take shortcuts ? Bookmarks

42
Web Navigation Purpose

• Something to Hold On
• You are here
• You can go there
• Navigation Reveals Content
• Tells Us Whats Here
• Tells Us How to Use Site
• Implicit instructions

43
Web Navigation Conventions
44
Web Navigation Goal

• "Back" clicked 30-40
• Easy to figure out
• You are here
• Things at current level
• Return to higher-levels and home page
• Easy search and indexes

• Persistent Navigation Comfort
• Home and forms pages can be exemption

45
Web Navigation - Options

• Top-level Navigation
• Top Row or Left Column
• Icons, image-maps, textual, pull-down
• Highlight or color currently selected
• Second-level Navigation
• Below Top Line or Left Column
• Nested Hierarchies
• Breadcrumbs
• SCILS gt Information Library Studies gt Courses gt
  Graduate
• Novel Navigation Metaphors
• TheBrain
• Star Tree for FlashKit by Inxight Software

46
Design Implications
Scan pages - don't read them

• Design for Scanning Make text short - cut
  words
• Make page work at a glance Sufficient left
  margin, 640x480 main message
• Create Visual Hierarchy

Look for anything Search Interest Decide
quickly Choose first reasonable item

• Make obvious what you can do on a page
• Make obvious what is clickable

Muddle through Don't figure out how things work
Resist forming models

• Don't make users think Get rid of question
  marks Each item clear purpose

• Stick to what works

• Repetition Consistency Grid Layout, Easy
  Navigation, Graphics,
• Color Coding, Typography

47
User Behavior ? Design Implications ? Design
Specifics

• 1 Use Grid System
• Maintain ConsistencyHelps you decide location
  of primary secondary navigation location and
  sizes of images location of headlines, main
  text, annotations etc.
• Create Visual Hierarchy Rhythm
• Present Information Clearly LogicallyUsers can
  read info more quickly.Facilitates understanding
  and recall.
• Invisible Hand guiding users and creating sense
  of place

48
User Behavior ? Design Implications ? Design
Specifics

• 2 Create Visual Hierarchy Guide Eye
• Important Things Visually Prominent(More
  Important Larger / Sharp Contrast)Use
  headlines to guide the eye
• Visual ContrastUse sharp changes in size
  (headline), light intensity (bold), color,
  texture, motion to create contrast.
• Proximity related things spatially closeSpatial
  separation conceptual separation.Don't mix
  alignment styles.
• Use Grouping Nesting to Increase Information
  Density (Short-term Memory 3-7)Use bounding
  shapes.

49
User Behavior ? Design Implications ? Design
Specifics

• 3 Typography Heuristics
• Sans Serif type is easier to read on screen
• Type size 10 -14 points
• 7 - 10 words per line
• Column width proportional to type size
• Bold and italic for small blocks of text
• Enough contrast between type background

50
User Behavior ? Design Implications ? Design
Specifics

• 1 Use Grid System
• Maintain ConsistencyHelps you decide location
  of primary secondary navigation location and
  sizes of images location of headlines, main
  text, annotations etc.
• Create Visual Hierarchy Rhythm
• Present Information Clearly LogicallyUsers can
  read info more quickly.Facilitates understanding
  and recall.
• Invisible Hand guiding users and creating sense
  of place

• 2 Create Visual Hierarchy Guide Eye
• Important Things Visually Prominent(More
  Important Larger / Sharp Contrast)Use
  headlines to guide the eye
• Visual ContrastUse sharp changes in size
  (headline), light intensity (bold), color,
  texture, motion to create contrast.
• Proximity related things spatially
  close.Spatial separation conceptual
  separation.Don't mix alignment styles.
• Use Grouping Nesting to Increase Information
  Density (Short-term Memory 3-7)Use bounding
  shapes.

• 3 Typography Heuristics
• Sans Serif type is easier to read on screen
• Type size 10 -14 points
• 7 - 10 words per line
• Column width proportional to type size
• Bold and italic used for small blocks of text
• Enough contrast between type and background

51
Requirements for Web Pages
? Layout Presents Info Clearly
LogicallyFacilitates Understanding Recall

• What can I do here?

? Visual Hierarchy Guides Eye to Important Things

• Where do I start?

• What site is this?

? Site ID logo, image, text

• What page am I on?

? Page name

• Major sections of site?

? Primary Navigation Top Row or Left Column
Simple text hyperlinks, icons, rollovers,
image-maps, pull-downs

• Options at this level?

? Secondary Navigation Below Top Line or Left
Column
? Expanding / Nesting Hierarchies Static or
Dynamic Outlines

• Where I am? Go higher or home?

? Color Coding, BreadcrumbsPrimary / Secondary
Navigation
52
Layout ? Visual Hierarchy Navigation
Page Name
Intro Text aaaaaaaaaaa bbbbbbbbbbb
Intro Text aaaaaaaaaaa bbbbbbbbbbb
Text or Thumbnails
53
Layout ? Visual Hierarchy Navigation
Page Name
Intro Text
Text or Thumbnails
54
Web Site - Planning

• Define Web Audience
• Who is your target audience?
• What do you want the site to accomplish?
• Break Site into Categories
• Create Outline - Goal, Organization
• Mindmaps

• Create Simple Web Site Plan
• Hierarchy hyperlinks
• Use sticky notes or Flowchart

55
Home Page Design

• Home Page
• Identity Mission, Hierarchy, Search, Timely
  Content, Short-cuts, Registration.
• Everybody wants a piece
• Answers Easily
• What can I do here?
• Why should be here?
• Where do I start?
• Tagline is Important
• Clear, informative, concise
• Differentiated, clear benefits
• Personable, lively, sometimes clever

56
Web Design Problems Testing

• Typical Problems
• Users are unclear on the concept of site
• Words users are looking for aren't there
• There is too much going on
• ? Great Site Requires Testing