Page design and layout for improved usabilityThe importance of page designSlide 3Eye flowNatural eye flowIssues with reading onlineHow to reduce eye movementSlide 8Slide 9Reducing eye movementSlide 11Slide 12Slide 13Slide 14Visual hierarchiesEstablishing a visual hierachyShow importance or prioritySlide 18Show importanceShow relationships between elementsShow relationshipsSlide 22Aid scanning and comprehensionAid scanningSlide 25Slide 26Slide 27Slide 28Use of screen real estateDevote screen real estate to contentSlide 31Slide 32Slide 33Slide 34Slide 35Slide 36Slide 37Scrolling behaviourThe fold moves“Above the fold”Page length and scrollingHorizontal scrollingSlide 43Common location of page elementsUser expectations studySlide 46ExampleSlide 48Slide 49Slide 50Slide 51Slide 52Slide 53Slide 54Slide 55Download timesFactors affecting download timesSlide 58Guidelines for page sizesPage weight a coincidence?Human reaction to response timesPage weight examplesPage weight examples - G8SummaryResources and toolsPage design and layoutfor improved usabilityCSCI 4800/6800Spring 2005The importance of page design“Page design is the most immediately visible part of web design.”Jakob Nielsen, Designing Web Usability–Has an effect on how people will judge your site–Crucial to enhancing usabilityPage layout and designEye flow and information processingEstablishing a visual hierarchyUse of screen real estateDevote most space to contentDesign “above the fold”Common location of page elementsDownload (response times)Eye flow“Good design is based on eye flow. The more eye movement required within a visual field, the less information can be received and processed.”Duff & Mohler, 1996–Relationship between•Eye flow•Information processingNatural eye flowMovement is from the Primary Optical Area to the Terminal Anchor• Wavy lines indicate movement that the eye naturally resists• Crosses are fallow areas on the page/screenColin Wheildon, Type and LayoutIssues with reading online•Minimizing eye movement in web page design is even more important than in print•It is harder to read online•Around 80% of users scan pages•Users attention span is short•Paradox of the active userHow to reduce eye movement•Don’t put important, distracting or eye catching objects in the areas of the screen that causes movement the eye resists–Top right–Bottom left•Important items might be missed•Eye catching items might cause users to miss important contentHow to reduce eye movement•Recognise that elements on pages create shapes–Text blocks–Headings–Images•Use the squint test tocheck your page layoutHow to reduce eye movement•Draw imaginary gridsReducing eye movementMaking all the images a uniform size would improve the layout of this pageReducing eye movement•Use left alignment for text and headings–It is no accident that this is the most used alignment–Not only reduces eye movement•Also places a fixed point on the page from where all headings and text can be scannedReducing eye movementReducing eye movementPage layout and designEye flow and information processingEstablishing a visual hierarchyUse of screen real estateDevote most space to contentDesign “above the fold”Common location of page elementsDownload (response times)Visual hierarchies“One of the best ways to make a page easy to grasp in a hurry is to make sure that the appearance of things on the page… clearly and accurately portrays… which things are related and which things are part of other things…”Steve Krug, Don’t Make Me Think–Relationship between•Placement of objects on a page•Information processingEstablishing a visual hierachy•Design and layout of information to –Show importance or priority–Show relationships between elements–Aid scanning and comprehensionShow importance or priority•Make important elements bigger, bolder•Position important elements nearer to the top of the page•Use a stronger colour for important elements•Use whitespace around elements to make them stand outShow importance or priorityNewspapers do this wellHeadline story, then secondary stories…Show importanceGovernment entry point – all departments shown on equal footingSome priority content is highlightedShow relationships between elements•Use positioning–Grouping shows family relationship–Nesting shows child relationship–Proximity shows similarity•Use presentation styles–Size, colour, font style, orientationShow relationshipsFamily relationshipChild relationshipShow relationshipsAid scanning and comprehension•Provide visual relief from dense chunks of text–Use meaningful headings and sub-headings–Turn lists and series into bullet points–Emphasize key words or phrases within paragraphs•Create contrasts between page elements•Present appropriate content as tables, graphs, charts, imagesAid scanningHeadings and sub-headingsBulleted listsAid scanningToo much dense textHyperlink colour doesn’t stand out enoughAid scanningToo much dense textHyperlink colour doesn’t stand out enoughAid scanningStill too hard to scan links to main contentPage layout and designEye flow and information processingEstablishing a visual hierarchyUse of screen real estateDevote most space to contentDesign “above the fold”Common location of page elementsDownload (response times)Use of screen real estate•Most users visit sites for their content•So, the first rule concerning the use of screen real estate is:–Devote most of the screen real estate to contentDevote screen real estate to contentDevote screen real estate to contentDevote screen real estate to contentDevote screen real estate to contentContent is displayed inside a small frame.No scrolling would be required if the frame was removedDevote screen real estate to contentContent is displayed inside a small frame, requiring more scrolling than would otherwise be necessaryDevote screen real estate to contentPage layout and designEye flow and information processingEstablishing a visual hierarchyUse of screen real estateDevote most space to contentDesign “above the fold”Common location of page elementsDownload (response times)Use of screen real estate•Users are in a hurry–Not sure if this page is the right page•So, the second rule concerning the use of screen real estate is:–Design ‘above the fold’Scrolling behaviour•Early studies (1994/5) showed that users were reluctant to scroll•Not true any more,