1 / 54

HCI 201

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

fruma
Télécharger la présentation

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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HCI 201 Multimedia and The World Wide Web

  2. Page Design and Layout

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

  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 don’t 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, 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.

  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. Gestalt Principles • Use Them! • Design • Organization • Navigation

  40. Similarity • Top buttons – Different sizes

  41. Similarity • Much Better!

  42. Similarity • Tie it all together

  43. Continuity

  44. Continuity

  45. Examples • Which Gestalt principles are used in each example?

  46. Which Gestalt Principle is Used?

More Related