web design and usability. web design has become increasingly complex first generation sites are...

Web Design and Usability

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

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

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 ?

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

TECHNOLGY

When considering principles of design for the WWW, we find that

technology and design oftenshare a co-dependent relationship

design

Design Vs Technology?

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

Considerations in web design

Project Management

Design

Technology

Task tracking and team management

Budget & schedule

Client interface

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

Site structure and navigation

Purpose Functions Structure Navigation

Site Structure and navigation

Varieties of site structure

Linear Hierarchical Mixed Mesh/Web

Site Structure and navigation

Linear

Site Structure and navigation

Hierarchical (strict)

Site Structure and navigation

Mixed

Site Structure and navigation

Mesh

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

Hosting

Find the right hosting solution for the client’s needs: guaranteed bandwidth guaranteed response time security scalability traffic tracking

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

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

Usability

User ActionApplicationReaction

Feedback on action

Interface

Usability Heuristics (measures)

Navigation Help instructions and support Support in carrying out actions Error handling Consistency Functionality

Usability Considerations (web)

Response times Content presentation Link colours Navigation Large amounts of text Scannability Scrolling Searching

Nielsen

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

User Centred Design (UCD)

Three processes:

Consultative Representative Consensus

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)

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

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.

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