Hci 201
1 / 54

HCI 201 - PowerPoint PPT Presentation

  • Uploaded on

HCI 201. Multimedia and The World Wide Web. Page Design and Layout. Conventions. We can rely on user’s expectations Gutenberg Bible 1456 First Modern Book

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about 'HCI 201' - fruma

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
Hci 201

HCI 201

Multimedia and The World Wide Web


  • We can rely on user’s 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

Freestanding documents
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

Who what when where
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.

Who what when where1
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

Who what when where2
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.

Who what when where3
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.

Page design
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

Visual logic
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

Visual hierarchy
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


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


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


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

Page length
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

Page length1
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

Design grids
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.

The fold
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

Design for screens
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.

Rule of thirds
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.

Gestalt theory
Gestalt Theory

  • All things are considered within context

  • Elements together are different than the sum of their parts.

  • Utilizes humans perceptual tendencies

  • We don’t see things in isolation, but as parts of some larger whole

Gestalt theory1
Gestalt Theory

  • Proximity

  • Similarity

  • Symmetry

  • Continuity

  • Closure


  • Describes the process of using distance or location to create groups

  • Things which are closer together will be seen as belonging together

  • EXAMPLE: text


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


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


  • Predicts the preference for continuous figures

  • Groupings are created by the flow of lines or by alignment


  • The process by which we perceive shapes that, in a certain sense, aren’t 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.

What does this say
What does this say?

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

Gestalt principles
Gestalt Principles

  • Use Them!

    • Design

    • Organization

    • Navigation


  • Top buttons – Different sizes


  • Much Better!


  • Tie it all together


  • Which Gestalt principles are used in each example?


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

Page design guidelines
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.