1 / 24

Web Programming – UFCFB3-30-1 Lecture 3

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. In this lecture…. Define HCI in the Web context, and discuss reasons for its importance

mdempsey
Download Presentation

Web Programming – UFCFB3-30-1 Lecture 3

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. HCI Human-Computer Interaction LO 5 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 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 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 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 lecture 3

  7. Some things we can control… Title URL Tab name How the scroll bars behave Everything in the page body 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 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! 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 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 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 lecture 3

  13. 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 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 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) 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 forWeb Content Accessibility Guidelines 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. lecture 3

  19. Examples (2) • Scripts, applets, & plug-ins • 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. 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 • www.w3c.org 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 • http://www.cast.org/bobby/ 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..” 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 lecture 3

  24. Questions? lecture 3

More Related