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

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 SIDESERVER 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 often share 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 PurposeFunctionsStructureNavigation

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 set of 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 Action Application Reaction 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: ACCESSIBILITY COLOUR