![Page 1: Web Design and Usability. Web design has become increasingly complex First generation sites are simply default backgrounds with "wall to wall" text,horizontal](https://reader036.vdocuments.us/reader036/viewer/2022070410/56649ea45503460f94ba9013/html5/thumbnails/1.jpg)
Web Design and Usability
![Page 2: Web Design and Usability. Web design has become increasingly complex First generation sites are simply default backgrounds with "wall to wall" text,horizontal](https://reader036.vdocuments.us/reader036/viewer/2022070410/56649ea45503460f94ba9013/html5/thumbnails/2.jpg)
Web design has become increasingly complex
First generation sites are simply default backgrounds with "wall to wall" text,horizontal rules and links. Mainly designed by technologists
Second generation sites include visual treatments such as
web maps and an opening page with menu options.
Web Design and Usability
1
2
![Page 3: Web Design and Usability. Web design has become increasingly complex First generation sites are simply default backgrounds with "wall to wall" text,horizontal](https://reader036.vdocuments.us/reader036/viewer/2022070410/56649ea45503460f94ba9013/html5/thumbnails/3.jpg)
Web Design and Usability
•A third generation site had an entry that entices the user to pursue paths that are designed for their own needs and interests.
•The "core" page entices visitors to explore the rest of the site, with an exit with rewards for completing the entire site.A site may have multiple core pages for different visitors or entry points.
• Third generation sites often employ metaphor and visual theme entice and guide, creating a whole experience for visitors from entry to exit
3
![Page 4: Web Design and Usability. Web design has become increasingly complex First generation sites are simply default backgrounds with "wall to wall" text,horizontal](https://reader036.vdocuments.us/reader036/viewer/2022070410/56649ea45503460f94ba9013/html5/thumbnails/4.jpg)
Web Design and Usability
•Fourth Generation sites and beyond…
Include scalable sites, high quality graphics,browser and plug-in detection, streaming audio-visual content, increased functionality, data tracking, e-commerce sites
4 ?
![Page 5: Web Design and Usability. Web design has become increasingly complex First generation sites are simply default backgrounds with "wall to wall" text,horizontal](https://reader036.vdocuments.us/reader036/viewer/2022070410/56649ea45503460f94ba9013/html5/thumbnails/5.jpg)
CLIENT SIDE SERVER SIDE
• HTML
• Client-side
scripting
(JavaScript,
plug-ins)
• Multimedia
• Browsers
network
• Web server
• CGI scripting
• Databases
• Advanced
programming
(PERL, C++)
TCP/IP
![Page 6: Web Design and Usability. Web design has become increasingly complex First generation sites are simply default backgrounds with "wall to wall" text,horizontal](https://reader036.vdocuments.us/reader036/viewer/2022070410/56649ea45503460f94ba9013/html5/thumbnails/6.jpg)
TECHNOLGY
When considering principles of design for the WWW, we find that
technology and design oftenshare a co-dependent relationship
design
Design Vs Technology?
![Page 7: Web Design and Usability. Web design has become increasingly complex First generation sites are simply default backgrounds with "wall to wall" text,horizontal](https://reader036.vdocuments.us/reader036/viewer/2022070410/56649ea45503460f94ba9013/html5/thumbnails/7.jpg)
Some design issues to consider
Concept (use of analogy or metaphor) Structure Functionality Navigation Page layout Colour schemes Interactivity User Feedback Use of media Quality Vs. Download time
![Page 8: Web Design and Usability. Web design has become increasingly complex First generation sites are simply default backgrounds with "wall to wall" text,horizontal](https://reader036.vdocuments.us/reader036/viewer/2022070410/56649ea45503460f94ba9013/html5/thumbnails/8.jpg)
Considerations in web design
Project Management
Design
Technology
Task tracking and team management
Budget & schedule
Client interface
![Page 9: Web Design and Usability. Web design has become increasingly complex First generation sites are simply default backgrounds with "wall to wall" text,horizontal](https://reader036.vdocuments.us/reader036/viewer/2022070410/56649ea45503460f94ba9013/html5/thumbnails/9.jpg)
4 values of Web Design
Design Value--integration of text, graphics and interface for unity of experience
Content Value--rich, up-to-date, quality information Production Value--quality control of technology for
excellence/speed in digitized format Utility Value--interactivity through the site (what can you
do, get or accomplish at the site) Siegel, David
![Page 10: Web Design and Usability. Web design has become increasingly complex First generation sites are simply default backgrounds with "wall to wall" text,horizontal](https://reader036.vdocuments.us/reader036/viewer/2022070410/56649ea45503460f94ba9013/html5/thumbnails/10.jpg)
Site structure and navigation
Purpose Functions Structure Navigation
![Page 11: Web Design and Usability. Web design has become increasingly complex First generation sites are simply default backgrounds with "wall to wall" text,horizontal](https://reader036.vdocuments.us/reader036/viewer/2022070410/56649ea45503460f94ba9013/html5/thumbnails/11.jpg)
Site Structure and navigation
Varieties of site structure
Linear Hierarchical Mixed Mesh/Web
![Page 12: Web Design and Usability. Web design has become increasingly complex First generation sites are simply default backgrounds with "wall to wall" text,horizontal](https://reader036.vdocuments.us/reader036/viewer/2022070410/56649ea45503460f94ba9013/html5/thumbnails/12.jpg)
Site Structure and navigation
Linear
![Page 13: Web Design and Usability. Web design has become increasingly complex First generation sites are simply default backgrounds with "wall to wall" text,horizontal](https://reader036.vdocuments.us/reader036/viewer/2022070410/56649ea45503460f94ba9013/html5/thumbnails/13.jpg)
Site Structure and navigation
Hierarchical (strict)
![Page 14: Web Design and Usability. Web design has become increasingly complex First generation sites are simply default backgrounds with "wall to wall" text,horizontal](https://reader036.vdocuments.us/reader036/viewer/2022070410/56649ea45503460f94ba9013/html5/thumbnails/14.jpg)
Site Structure and navigation
Mixed
![Page 15: Web Design and Usability. Web design has become increasingly complex First generation sites are simply default backgrounds with "wall to wall" text,horizontal](https://reader036.vdocuments.us/reader036/viewer/2022070410/56649ea45503460f94ba9013/html5/thumbnails/15.jpg)
Site Structure and navigation
Mesh
![Page 16: Web Design and Usability. Web design has become increasingly complex First generation sites are simply default backgrounds with "wall to wall" text,horizontal](https://reader036.vdocuments.us/reader036/viewer/2022070410/56649ea45503460f94ba9013/html5/thumbnails/16.jpg)
Hosting
Domain name registration Hosting
can be in-house and outsourced According to Forrester Research 66% of Fortune 1000
companies outsource their web sites to professional hosting services
the cost of hosting the site will depend on how much disk space is required and how much traffic the site gets
![Page 17: Web Design and Usability. Web design has become increasingly complex First generation sites are simply default backgrounds with "wall to wall" text,horizontal](https://reader036.vdocuments.us/reader036/viewer/2022070410/56649ea45503460f94ba9013/html5/thumbnails/17.jpg)
Hosting
Find the right hosting solution for the client’s needs: guaranteed bandwidth guaranteed response time security scalability traffic tracking
![Page 18: Web Design and Usability. Web design has become increasingly complex First generation sites are simply default backgrounds with "wall to wall" text,horizontal](https://reader036.vdocuments.us/reader036/viewer/2022070410/56649ea45503460f94ba9013/html5/thumbnails/18.jpg)
Usability
Usability is …ISO Definition:…the effectiveness, efficiency and satisfaction with which a specified setof users can achieve specified goals in particular environments…
concerned with how easy an interface is to understand and use
concerned with being able to map user intentions to system actions in order to achieve some goal
feedback on the action is crucial
![Page 19: Web Design and Usability. Web design has become increasingly complex First generation sites are simply default backgrounds with "wall to wall" text,horizontal](https://reader036.vdocuments.us/reader036/viewer/2022070410/56649ea45503460f94ba9013/html5/thumbnails/19.jpg)
Usability
Effectiveness: user is able to carry out actions and achieve intended goal
Efficiency: goal is achieved within some specified time frame
Satisfaction: how acceptable the system is to the user
![Page 20: Web Design and Usability. Web design has become increasingly complex First generation sites are simply default backgrounds with "wall to wall" text,horizontal](https://reader036.vdocuments.us/reader036/viewer/2022070410/56649ea45503460f94ba9013/html5/thumbnails/20.jpg)
Usability
User ActionApplicationReaction
Feedback on action
Interface
![Page 21: Web Design and Usability. Web design has become increasingly complex First generation sites are simply default backgrounds with "wall to wall" text,horizontal](https://reader036.vdocuments.us/reader036/viewer/2022070410/56649ea45503460f94ba9013/html5/thumbnails/21.jpg)
Usability Heuristics (measures)
Navigation Help instructions and support Support in carrying out actions Error handling Consistency Functionality
![Page 22: Web Design and Usability. Web design has become increasingly complex First generation sites are simply default backgrounds with "wall to wall" text,horizontal](https://reader036.vdocuments.us/reader036/viewer/2022070410/56649ea45503460f94ba9013/html5/thumbnails/22.jpg)
Usability Considerations (web)
Response times Content presentation Link colours Navigation Large amounts of text Scannability Scrolling Searching
Nielsen
![Page 23: Web Design and Usability. Web design has become increasingly complex First generation sites are simply default backgrounds with "wall to wall" text,horizontal](https://reader036.vdocuments.us/reader036/viewer/2022070410/56649ea45503460f94ba9013/html5/thumbnails/23.jpg)
User Centred Design (UCD)
Involvement of users throughout the design process
Users are central to the design process Easier to understand software Improves user satisfaction Improves productivity
![Page 24: Web Design and Usability. Web design has become increasingly complex First generation sites are simply default backgrounds with "wall to wall" text,horizontal](https://reader036.vdocuments.us/reader036/viewer/2022070410/56649ea45503460f94ba9013/html5/thumbnails/24.jpg)
User Centred Design (UCD)
Three processes:
Consultative Representative Consensus
![Page 25: Web Design and Usability. Web design has become increasingly complex First generation sites are simply default backgrounds with "wall to wall" text,horizontal](https://reader036.vdocuments.us/reader036/viewer/2022070410/56649ea45503460f94ba9013/html5/thumbnails/25.jpg)
User Centred Design (UCD)
Consultative design design team makes decisions users - source of information
Representative design user representatives involved in decision making e.g. Joint Application Development (JAD)
![Page 26: Web Design and Usability. Web design has become increasingly complex First generation sites are simply default backgrounds with "wall to wall" text,horizontal](https://reader036.vdocuments.us/reader036/viewer/2022070410/56649ea45503460f94ba9013/html5/thumbnails/26.jpg)
User Centred Design (UCD)
Consensus design:
Users are continually involved throughout the design process
Can speed up decisions if user has appropriate authority
E.g. Participative design
![Page 27: Web Design and Usability. Web design has become increasingly complex First generation sites are simply default backgrounds with "wall to wall" text,horizontal](https://reader036.vdocuments.us/reader036/viewer/2022070410/56649ea45503460f94ba9013/html5/thumbnails/27.jpg)
References
Norman, D., (1988) The Psychology of Everyday Things, Basic Books
Faulkner, X., (2000) Usability Engineering, Macmillan
Elsom-Cook, M., (2001) Principles of Interactive Multimedia, McGraw Hill
Nielsen, J., (2000) Designing Web Usability, New Riders
Powell, A. (1998). Web Site Engineering. Prentice Hall.
Siegel, D. (1997). Secrets of Successful Web Sites. Indianapolis: Hayden Books.
![Page 28: Web Design and Usability. Web design has become increasingly complex First generation sites are simply default backgrounds with "wall to wall" text,horizontal](https://reader036.vdocuments.us/reader036/viewer/2022070410/56649ea45503460f94ba9013/html5/thumbnails/28.jpg)
For further information…
HCI and INTERFACE DESIGN• Mullet and Sano (1995) Designing Visual Interfaces. Prentice Hall PTR. ISBN: 0133033899 • http://www.ergogero.com/
ACCESSIBILITY• http://www.usabilityfirst.com • http://www.rit.edu/~easi • http://www.rnib.org • http://www.w3.org/WAI/References/QuickTips • http://www.dyslexia.com/qaweb.htm COLOUR• http://www.umist.ac.uk/UMIST_OVS/UES/COLOUR0.HTM • http://tsi.enst.fr/~brettel/colourblindness.html