HCI 201

1
HCI 201

• Multimedia and The World Wide Web

2
Page Design and Layout
3
Conventions

• We can rely on users expectations
• Gutenberg Bible
• 1456
• First Modern Book
• Yet more than a century passed before page
  numbering, indexes, tables of contents, and even
  title pages became expected features of books

4
Freestanding Documents

• Hypertext links allow users to access a single
  web page with no preamble
• For this reason Web pages need to be more
  independent than pages in a book.
• Headers and footers
• Not unique to web pages - Journals, Magazines,
  Newspapers

5
Who, What, When, Where

• Who is speaking?
• Whether the page originates from an individual
  author or an institution, always tell the reader
  who created it.

6
Who, What, When, Where

• What
• Title is crucial
• The document title is often the first thing users
  see
• In addition, the page title will become the text
  of a browser "bookmark" if the user chooses to
  add your page to his or her list of URLs

7
Who, What, When, Where

• When
• Timeliness is an important element in evaluating
  the worth of a document.
• You may want to date every Web page, and change
  the date whenever the document is updated.
• Corporate information, personnel manuals, product
  information, and other technical documents
  delivered as Web pages should always carry
  version numbers or revision dates.

8
Who, What, When, Where

• Where
• On the World Wide Web, the question of where a
  document comes from is sometimes inseparable from
  whom the document comes from.

9
Page Design

• Navigation
• Studies have shown that users prefer menus that
  present
• at least five to seven links
• a few very dense screens of choices to many
  layers of simplified menus

10
Visual Logic

• Balance between visual sensation and graphic
  information
• Without the visual impact of shape, color, and
  contrast, pages are graphically uninteresting and
  will not motivate the viewer
• Dense text documents without contrast and visual
  relief are also harder to read
• Without the depth and complexity of text, highly
  graphical pages risk disappointing the user

11
Visual Hierarchy

• Masses of shape and color, with foreground
  elements contrasting against the background field
• Pick out specific information, first from
  graphics
• Parsing the harder medium of text and begin to
  read individual words and phrases

12
Visual Hierarchy
13
Contrast

• The overall graphic balance and organization of
  the page is crucial to drawing the reader into
  your content.
• A dull page of solid text will repel the eye,
  without obvious cues to the structure of your
  information.

14
Contrast
15
Consistency

• Establish a layout grid and a style for handling
  your text and graphics
• Apply it consistently to build rhythm and unity
  across the pages of your site.

16
Consistency

• Repetition is not boring it gives your site a
  consistent graphic identity that creates and then
  reinforces a distinct sense of "place" and makes
  your site memorable.
• A consistent approach to layout and navigation
  allows readers to adapt quickly to your design
  and to confidently predict the location of
  information and navigation controls across the
  pages of your site.

17
Page Length

• In general, you should favor shorter Web pages
  for
• Home pages and menu or navigation pages elsewhere
  in your site
• Documents to be browsed and read online
• Pages with very large graphics

18
Page Length

• In general, longer documents are
• Easier to maintain (content is in one piece, not
  in linked chunks)
• More like the structure of their paper
  counterparts (not chopped up)
• Easier for users to download and print

19
Design Grids

• Your first step is to establish a basic layout
  grid.
• With this graphic "backbone" you can determine
  how the major blocks of type and illustrations
  will regularly occur in your pages.
• Your goal is to establish a consistent, logical
  screen layout, one that allows you to "plug in"
  text and graphics without having to stop and
  rethink your basic design approach on each new
  page.

20
Design Grids
21
The Fold

• A Web page can be almost any length.
• However, there is limited space "above the fold"
  at the top of your page to capture the
  average reader

22
Design for Screens

• Most Web page designs can be divided vertically
  into zones with different functions
• As vertical scrolling progressively reveals the
  page, new content appears and the upper content
  disappears
• A new graphic context is established each time
  the reader scrolls down the page
• Web page layouts should thus be judged not by
  viewing the whole page as a unit but by dividing
  the page into visual and functional zones and
  judging the suitability of each screen of
  information.

23
Design for Screens
24
Visual Communication
25
Rule of Thirds

• The total image area is divided vertically and
  horizontally into three equal sections.

• Although it is often best to place the center of
  interest somewhere along the two horizontal and
  two vertical lines, generally the composition is
  even stronger if the center of interest falls
  near one of the four cross-points.

26
Gestalt Theory

• All things are considered within context
• Elements together are different than the sum of
  their parts.
• Utilizes humans perceptual tendencies
• We dont see things in isolation, but as parts of
  some larger whole

27
Gestalt Theory

• Proximity
• Similarity
• Symmetry
• Continuity
• Closure

28
Proximity

• Describes the process of using distance or
  location to create groups
• Things which are closer together will be seen as
  belonging together
• EXAMPLE text

29
Proximity
30
Similarity

• Grouping by like kind or like type
• Things which share visual characteristics such as
  shape, size, color, texture, value or orientation
  will be seen as belonging together.
• Repetition of forms in a visual composition is
  pleasing in much the same way rhythm is pleasing
  in music.

31
Similarity
32
Symmetry

• The whole of a figure is perceived rather than
  the parts that make it up.

33
Symmetry
34
Continuity

• Predicts the preference for continuous figures
• Groupings are created by the flow of lines or by
  alignment

35
Continuity
36
Closure

• The process by which we perceive shapes that, in
  a certain sense, arent really there.
• We mentally complete the shape in our heads.
• It is a way that our minds impose order and
  meaning on an incomplete set of data.

37
Closure
38
What does this say?

• I cxn rxplxce xvexy txirx lextex of x sextexce
  xitx an x, anx yox stxll xan xanxge xo rxad xt.

39
(No Transcript)
40
(No Transcript)
41
Gestalt Principles

• Use Them!
• Design
• Organization
• Navigation

42
(No Transcript)
43
(No Transcript)
44
Similarity

• Top buttons Different sizes

45
Similarity

• Much Better!

46
Similarity

• Tie it all together

47
Continuity
48
Continuity
49
Examples

• Which Gestalt principles are used in each example?

50
Which Gestalt Principle is Used?
51
Which Gestalt Principle is Used?
52
Which Gestalt Principle is Used?
53
Remember

• As designers, be conscious of these principles
  and use them to your advantage.
• It is not enough to say that a design is good.
  Know why it is good.

54
Page Design Guidelines

• The name of the site or sponsor name/logo should
  appear on every page.
• Avoid busy or distracting backgrounds.
• Prioritize your content. Call attention to your
  most exciting content with size, color, and/or
  screen position. Minimize less important content.