Download
1 / 54
540 likes | 682 Views
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
E N D
HCI 201 Multimedia and The World Wide Web
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 • 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 is speaking? • Whether the page originates from an individual author or an institution, always tell the reader who created it.
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, 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, 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 • 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 • 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 • 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
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.
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.
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 • 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 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 • 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 • 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 • 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 • 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 • 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 Theory • Proximity • Similarity • Symmetry • Continuity • Closure
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
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.
Symmetry • The whole of a figure is perceived rather than the parts that make it up.
Continuity • Predicts the preference for continuous figures • Groupings are created by the flow of lines or by alignment
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.
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 • Use Them! • Design • Organization • Navigation
Similarity • Top buttons – Different sizes
Similarity • Much Better!
Similarity • Tie it all together
Examples • Which Gestalt principles are used in each example?
