Page Layout Page Layout Design for Screens for Information Divide vertically into zones with different functions Each vertical zone should provide suitable information Page Header Headers gives site visual identity “Signature” allows user to grasp purpose of page and where it fits within site Important since page might be jumped into from other site Page Header Guidelines Should always be near top Graphical or Text Not too large Related series of documents might have subtitles or section titles Should be standardized across site Page Footer Provide navigation links back to top of page Similar location information as header Important because top of page might not be visible Page Footer Guidelines Contain basic data: Origin Age Copyright Set of links to related pages Text Layout Original HTML: single column of text Hard to read Need to use technique developed by print documents Text Layout Line length determined by page width When resize text reflows to fill space Hinders readability Hinders usability Text Layout Line Length: Reading becomes uncomfortable when there are more that 12 words per line Margins: Define reading are by separating main text from non text Text Layout Columns: Allows for variations in page layout Reduces line length Gutters Space between columns Text Layout with Tables Most complex text layout can be done with tables Why? Least common denominator Examples Tables Handles text layout with images: Tables Use to make composite images: Navigation Getting lost is a bad thing Greatly hinders usability Key aspect of site’s usability Navigation Product of two factors: Content Organization Visual Organization Navigation Navigation Navigation interfaces need to answer three questions: Where am I? Where have I been? Where can I go? Most important is “Where am I?” Where am I? User’s location needs to be shown: Relative to site’s structure Relative to web as a whole Where have I been? Harder to support without special techniques Browser Back Button Browser History List Link colors Where can I go? Handled by visible navigation links Three types of links: Embedded links in body text Structural Links: points to other parts of site Associative links: points to pages related to page currently on User Controls Navigation In traditional interface design, designer control where user can go Web users control where they can go Web sites need to support user controlled navigation Design to support this freedom of movement Navigation Types Browser Embedded Supplemental Browser Navigation Go to URL Back/Forward button History List Visited linked different color Bookmarks Browser Navigation Do not override: Color of visited/unvisited links Kill back button Disable bookmark feature Embedded Navigation Three types of embedded navigation systems: Global Local Contextual Each system solves a particular problem Navigation Types Global Navigation Site-wide Indented to be present on every page Often implemented as global navigation bars Navigation Bars Effective implementing both global and local navigation Collection of links grouped together on page Most provide link to home page Subtle differences per sub-site Navigation Bars Local Navigation Complements global navigation Allows navigation of immediate area Can be combined with global navigation Can be so different and unique they become sub-sites Contextual Navigation Navigation link specific to page or items For items which do not fit into local or global navigation “See Also” links Can support associative learning Contextual Navigation Two Types: Inline - true hypertext Links within page text External - placed on page “Related products” links Navigation Implementation Navigation systems are closely links to organizational structures Three types: Hierarchical Ad-Hoc Database driven Hierarchical Provides top down view of site Most sites support this view In pure form, does not facilitate easy traversal Additional links added to increase ease of traversal Navigation Hierarchy Ad-Hoc and Database Ad-Hoc: additional links to make connections based on relationships Used for embedded navigation Database: not used to global or local navigation, but used as supplemental navigation, search engines Site Navigation Supplemental External to basic navigation structure Can be critical for ensuring usability Sitemaps Breadcrumbs Indexes Guides Sub Navigation Site Map A table of contents for a site Typically presents top few levels of information Most used for web sites which are hierarchical based Breadcrumbs Display a record of links user traveled to get to page Record user’s trail through site Based on: Just wait, Gretel, until the moon rises, and then we shall see the crumbs of bread which I have strewn about; they will show us our way home again - Hansel and Gretel Guided Tour Take several forms: Guided tours Tutorials Micro-portals Used for training or introduction of site to new users Search Central part of supplemental navigation Search by passes all other navigation Should provide reasonable results Do allow for search for phrases Do not provided search of web Advanced Personalized and customized navigation Play important or limited roles Require solid foundation of structure and organization Difficult to do well Icons Text is usually better than icons Icons harder to change Often ambiguous Icons Menus Pack a large amount of navigational elements in a small space Requires users to understand how to use them No all items visible User must act to see menu elements Frames Used in early days of web Take valuable real-estate Bookmaking becomes a problem Printing becomes a problem Typically not used anymore Navigation Stress Test Ignore the home page and jump directly to middle of site For each random page, can you figure out where you are within the site? Can you tell where the page will lead you next? Color and Usability Integral part of web page Properly used makes page attractive and usable Provides contrast for page Can show button’s state or function Human Vision Cones on retina responsible for detecting color Three different types of cones Each responds to different wavelengths Basis for tristimulus theory of color mixing Vision Physics of Color Visible light small part of electromagnetic spectrum Different wavelengths correspond to different colors Light which contains all visible wavelengths is perceived as white Black is absence of light Visible Spectrum Color Systems Model which quantifies the description of color Two types of color mixing: Additive Subtractive Additive Color Schemes Model based on light Add colors added together = white Most common one: RGB A few variations on color model Additive Color Hue Saturation Brightness (HSB) Hue Value Saturation Subtractive Color Additional of colors = black Since most objects reflect light subtractive is very common Colors primaries subtract color from reflected light Most common model: CMYK Subtractive Color CMYK Color Gamut Refers to range of color for a particular device Can greatly alter the color of material when printed or displayed Different devices show colors differently Color Harmony Scheme Depend on references to a color wheel Mixing equal amounts of primaries results in a secondary color Mixing two secondary colors results in a tertiary color Color Wheel Primary & Secondary Colors Monochromatic Monochromatic Complementary Complementary Analogous Analogous Triadic Triadic Color Harmonies Color Harmonies Color and Browsers Not all colors can be displayed on all devices Color of text can affect readability Web-Safe pallet Monitor Type: CRT vs LCD