Web Programming– UFCFB3-30-1 Lecture 3 Instructor : Mazhar H Malik Email : mazhar@gcet.edu.om Global College of Engineering and Technology

HCI Human-Computer Interaction LO 5 11/21/2018 lecture 3

In this lecture… Define HCI in the Web context, and discuss reasons for its importance Discuss how people interact with a web page, including cultural difference Discuss usefulness, usability and accessibility (including usability testing) Overview of W3C and W3C accessibility guidelines overview 11/21/2018 lecture 3

What is HCI? The design and implementation of computer systems that people interact with. It includes desktop systems as well as embedded systems in all kinds of devices. Four important ideas: People Computing systems Interaction Usability 11/21/2018 lecture 3

Interface Where one system meets and interacts with another is an interface Humans interact with computer systems at the user interface Most common is a graphical user interface - GUI. Examples are the Windows, Linux and Mac environment 11/21/2018 lecture 3

Design for HCI is important Why design something that is hard to use? Good HCI design = the first step to success Bad HCI design = failure; people can’t or won’t even start In this lecture, we look at HCI in the Web context; we are the Web designers 11/21/2018 lecture 3

Some things we can control… Title URL Tab name How the scroll bars behave Everything in the page body 11/21/2018 lecture 3

Some things we can’t control… The browser used (and its version) How big they have the browser window The capability of their browser and any plug-ins installed (e.g. can they play Flash?) The size of their screen The type of their screen (e.g. LCD) The system software on their computer and how it displays colour The type and speed of their internet connection 11/21/2018 lecture 3

Decisions for discussion Should we design for everyone…even the very few without colour screens? Should we design for a target audience? e.g. If we are selling high-tech sound cards, should we assume the user has a high-tech computer and the latest browser with all the plug-ins? There is no right or wrong Most designers aim for the the “average user” - whatever that is! 11/21/2018 lecture 3

Designing for good HCI Our aim as web designers: To attract people to our site To make it easy for them to find what they want, so that they… Buy or sign-up or read our information And that they come back next time… HCI design is vital in achieving this 11/21/2018 lecture 3

How people use web pages Users don’t read pages, they scan them Users don’t make carefully considered decisions - they take the first reasonable option they see 11/21/2018 lecture 3

Cultural Difference It’s the WORLD WIDE Web People of many cultures will see the site Ethnicity Language Custom What is appropriate In the next slide, discuss how the same page is designed for different cultures 11/21/2018 lecture 3

11/21/2018 lecture 3

Site Usefulness A successful site must be useful to the target audience If one news site is not useful to me, I will go to another and (most likely) never come back As site designers we should aim to satisfy our audience 11/21/2018 lecture 3

Usability A site should be easy to use Navigation should be eas “Your goal should be for each page to be self evident, so that just by looking at it the average user will know what it is and how to use it” Steve Krug, Don’t Make Me Think! A Common Sense Approach to Web Usability, 2000, New Riders Publishing 11/21/2018 lecture 3

Web Site Accessibility Designing web pages that are accessible to all, including those with disabilities Hearing Sight Cognitive Motor skill impairment W3C developed the Web Accessibility Initiative (WAI) 11/21/2018 lecture 3

Web Accessibility Initiative (WAI) Aim is to ensure that technologies (e.g. HTML, CSS) support accessibility W3C have developed many guidelines… Most relevant to this paper are the Web Content Accessibility Guidelines Also come with a practical guide, Techniques for Web Content Accessibility Guidelines 11/21/2018 lecture 3

Web Content Accessibility Guidelines - examples (1) Images & animations Use the alt attribute to describe the function of each visual. Multimedia Provide captioning and transcripts of audio, and descriptions of video. Hypertext links Use text that makes sense when read out of context. For example, avoid "click here." Page organization Use headings, lists, and consistent structure. Use CSS for layout and style where possible. 11/21/2018 lecture 3

Examples (2) Scripts, applets, & plug-ins Check your work. Validate Provide alternative content in case active features are inaccessible or unsupported. Check your work. Validate Use tools, checklist, and guidelines at http://www.w3.org/TR/WCAG There are many more guidelines - see them at www.w3c.org/TR/WCAG10/ and summarised in the handout. Handout in Lectures Folder - “WCAG Handout.doc” 11/21/2018 lecture 3

What is the W3C? The World Wide Web Consortium (W3C) is an international consortium where Member organizations, a full-time staff, and the public work together to develop Web standards W3C's mission is: To lead the World Wide Web to its full potential by developing protocols and guidelines that ensure long-term growth for the Web www.w3c.org Strongly suggest you print the pamphlet W3C At-a-Glance.pdf (in the Lectures folder) and give out to students, and visit the web site in the lecture to give students an overview of the W3C. 11/21/2018 lecture 3

Testing Always test your website before publishing Test using real people You become too used to the site A “fresh pair of eyes” Try to find non-computer people; ordinary users Test using validators Scans pages and identifies possible issues http://www.cast.org/bobby/ 11/21/2018 lecture 3

Testing with people Sit beside them; watch their eyes, how they use the mouse, what they click on Ask them, “Why did you do that?” (but don’t make them feel foolish) Ask them to say aloud whatever is in their mind as they use the site: “…nice colours, like that picture, what’s that for?, now, how do I find xyz, I’m lost, where’s the home page..” Go to a web page and demonstrate the talking aloud as you use a page 11/21/2018 lecture 3

Lecture Summary Good HCI design is critical for a successful site Different people interact with web pages in different ways (especially cultural difference) “Don’t make me think!” Sites need to be useful, usable, and accessible W3C guidelines should be followed Test - and test again 11/21/2018 lecture 3

Questions? 11/21/2018 lecture 3