Hci 201
This presentation is the property of its rightful owner.
Sponsored Links
1 / 54

HCI 201 PowerPoint PPT Presentation


  • 79 Views
  • Uploaded on
  • Presentation posted in: General

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

Download Presentation

HCI 201

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


Page design and layout

Page Design and Layout


Conventions

Conventions

  • 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


Visual hierarchy1

Visual Hierarchy


Contrast

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.


Contrast1

Contrast


Consistency

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.


Consistency1

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.


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.


Design grids1

Design Grids


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.


Design for screens1

Design for Screens


Visual communication

Visual Communication


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


Proximity

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


Proximity1

Proximity


Similarity

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.


Similarity1

Similarity


Symmetry

Symmetry

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


Symmetry1

Symmetry


Continuity

Continuity

  • Predicts the preference for continuous figures

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


Continuity1

Continuity


Closure

Closure

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


Closure1

Closure


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


Similarity2

Similarity

  • Top buttons – Different sizes


Similarity3

Similarity

  • Much Better!


Similarity4

Similarity

  • Tie it all together


Continuity2

Continuity


Continuity3

Continuity


Examples

Examples

  • Which Gestalt principles are used in each example?


Which gestalt principle is used

Which Gestalt Principle is Used?


Which gestalt principle is used1

Which Gestalt Principle is Used?


Which gestalt principle is used2

Which Gestalt Principle is Used?


Remember

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.


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.


  • Login