Web Design and Evaluation Lynne Hall. World Wide Web zdiverse medium of communication zinteractive,...
Preview:
Citation preview
- Slide 1
- Web Design and Evaluation Lynne Hall
- Slide 2
- 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
- Slide 3
- 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.
- Slide 4
- Web Development LifeCycle InitiationCreationPlanningAnalysis
Implementation & Testing Production Maintenance Retirement
- Slide 5
- 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
- Slide 6
- 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
- Slide 7
- Low Fidelity Prototyping zAll useful for web development
yScenarios yStoryboards yPaper Prototyping yScreenshots
- Slide 8
- Page Planning zIdentify purpose of page zContent ytext ylinks
ygraphics / images yphotos ymultimedia zDoes the page meet the
purpose for which it was developed?
- Slide 9
- 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
- Slide 10
- 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
- Slide 11
- 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
- Slide 12
- 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
- Slide 13
- 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)
- Slide 14
- 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
- Slide 15
- Types of Graphics zBackgrounds zIcons zBanners (passive and
active) zBullets zSeparator bars zPhotographs zImages
zIllustrations zAnimated illustrations / video
- Slide 16
- Graphical Suitability zGraphical size and appearance zAre the
graphics understandable yCard sorting yCard Distribution yIcon
Intuitiveness zIs something gained by adding graphics?
- Slide 17
- 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
- Slide 18
- Using Graphics Photographs / Images / Illustrations
- Slide 19
- 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
- Slide 20
- 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
- Slide 21
- 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?
- Slide 22
- 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
- Slide 23
- 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