1. Web Programming– UFCFB3-30-1 Lecture 3
Instructor : Mazhar H Malik
Global College of Engineering and Technology

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

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

4. 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

5. 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

6. 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

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

8. 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

9. 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

10. 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

11. 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

12. 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

13. 11/21/2018
lecture 3

14. 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

15. 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

16. 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

17. 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

18. 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

19. 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
There are many more guidelines - see them at and summarised in the handout.
Handout in Lectures Folder - “WCAG Handout.doc”
11/21/2018
lecture 3

20. 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
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

21. 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
11/21/2018
lecture 3

22. 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

23. 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

24. Questions?
11/21/2018
lecture 3