web design and evaluation lynne hall. world wide web zdiverse medium of communication zinteractive,...

Web Design and Evaluation Lynne Hall

World Wide Web zdiverse medium of communication zinteractive, unregulated, anarchic? zPublic access system? zavailable to everyone who has access to a computer and a phone line zfreedom of publication abilities zmany and diverse uses zof considerable importance as an application platform

Background & Terminology zWorld Wide Web ycreated at CERN (Tim Berners-Lee, 1989) yfirst graphic browser MOSAIC (Andreeson, 1992) zHTML: HyperText Mark-up Language ythe code used to create documents for the web zWebpage yunit by which information is provided to a reader. Created using HTML zWebsite ya set of webpages which logically belong together.

Web Development LifeCycle InitiationCreationPlanningAnalysis Implementation & Testing Production Maintenance Retirement

If a website is not usable, then however useful it is it will not be used If a website is not useful, then however usable it is it will not be used The Duality of Evaluation: Usability and Utility

User involvement throughout design zIdentify target users in the initiation stage zTest with users throughout the development process zIterative design zTest with real users zEnsure users find the site useful as well as usable

Low Fidelity Prototyping zAll useful for web development yScenarios yStoryboards yPaper Prototyping yScreenshots

Page Planning zIdentify purpose of page zContent ytext ylinks ygraphics / images yphotos ymultimedia zDoes the page meet the purpose for which it was developed?

WebSite Design zRemember the target audience, aims and objectives for site. Base design on these needs, values and tastes zMake the website design consistent, so that visitors have the sense they are in one place zThe site design should be consistent with your branding, look and feel in other media zNavigation is critical, visitors need to know where they are on your Web site and how to get around. zKeep the time it takes visitors to download your pages to an absolute minimum, using only graphics and mutlimedia necessary to achieving your results

WebPage Design zKISS: Keep It Short and Simple zMinimize file size per page to maximize download speed zPage Width yAvoid pages and graphics more than 500 pixels wide yAvoid graphics that go off edge of the page

WebPage Design zPage Height yDepends on the content...... xHome Pages - aim for no scrolling xProducts - aim for pages less than two screens high xDocuments - can be useful to have many pages all at once

Text zDivide text up so that pages don't look dense zMake paragraphs short zIntersperse graphics and text zAvoid italic (hard to read and fades) zUse bold sparingly, or it loses its impact zAvoid preformatted format zBe consistent with heading styles and only use them for headings

Links zWrite as if there were NO links in the text zOnly use linksthat enhance the page zChoose meaningful words / phrases. zTry to choose link text that has a conceptual similarity to the title and headers of the destination document. zUse both textual and graphical links zMake sure that a graphical link looks clickable (3D effects / button style)

Graphics zCan add a lot of interest to a page BUT zLarge graphics are slow to download zWarn user if pages are over 50k zRemember that some users switch graphics off

Types of Graphics zBackgrounds zIcons zBanners (passive and active) zBullets zSeparator bars zPhotographs zImages zIllustrations zAnimated illustrations / video

Graphical Suitability zGraphical size and appearance zAre the graphics understandable yCard sorting yCard Distribution yIcon Intuitiveness zIs something gained by adding graphics?

Including Graphics zBackgrounds yMake sure text so that text is legible yAvoid backgrounds that are bright or busy or detract from content zIcons yUse appropriate designs yMake icons small, visible and clickable zBanners yGive positional / locational information yCan include image maps zBullets / Seperator Bars yshould be effective but small in k

Using Graphics Photographs / Images / Illustrations

Graphic Resources zLots of FREE graphics available yBackgrounds xhttp://the-tech.mit.edu/KPT/bgs.html yIcons / Buttons / Graphics in General xhttp://www.cli.di.unipi.it/iconbrowser/ xhttp://www.yahoo.com/Computers_and_Inte rnet/Internet/World_Wide_Web/Programming /Icons/ yAnimated Graphics xhttp://members.aol.com/royalef/gifanim.htm

High Fidelity Prototyping zPossible to test entire pages and sites prior to publishing zPossible to mock up complicated applications prior to developing the underlying software zPermits evaluation of features requiring applets and scripting languages

Navigation Testing zVital to ensure users yknow where they want to go yknow where they are ycan find the information they are looking for zDiverse patterns can be seen ydoes the user know what they want and cant find it ydoes the user not even know what they are trying to find?

Web editors zMany editors yComposer, Hot Metal, Front Page Express ycreation/editing without using raw HTML zMS Office97 applications will create simple Web pages zOffice 2000 will be fully web-integrated

Conclusions zLifecycle has a number of stages which enable the production of sites / pages that are yUseful and appropriate for the intended users yEasy to maintain and of high quality yAttractive, innovative, interesting yUsable, enjoyable, satisfying, etc. yAttract more and repeat visitors zEssential to ensure usability - there is virtually no help available from webpages