M23CDE Usability Thinking about people Peter Every office AS223 email peter.every@coventry.ac.uk

1. M23CDE UsabilityThinking about peoplePeter Everyoffice AS223email peter.every@coventry.ac.uk

3. Users … Such a useless word. Its so negative: Drugs users? Emotional con-artists? The word “USERS” defines people only in their relation to systems and applications…. It forgets that people are: diverse, screwy, forgetful, not bothered about computers, in a bad mood, desperate for sex, grouchy, silly, have a hangover, in a rush, sleepy, want some fun, need a bath, took an axe to their last mobile phone, hard of hearing, talk to each other, hate their boss, want to give it all up and live on a desert island, suffer from astigmatism, must have the latest Dido CD, have an itchy foot … Oh, sorry you want me to give a damn about your e-commerce site?

5. What is it we need to know about people to design properly for them? • How they get information from the world – the senses • How many senses are there • How their bodies work in the environment – physiology • How they learn, solve problems and remember - psychology

6. Vision Thanks encarta…

7. Vision: The issues • Think about how issues related to visual perception (the eve) and visual processing (the brain) might be exploited in the design of screen interfaces • Depth perception and stereoscopy: how to represent one item in front of another on a 2D screen. • The circle of focus and focus “fall-off”: what happens at the edge of the screen? • Peripheral vision and movement: How can you grab someone’s attention? • Ability to perceive contrast and brightness: What are the right colour choices for interfaces? • Colour blindness: what happens if you only convey information through colour? • Detail and “visual acuity”: how big do you have to make an icon before it is noticed?

8. Vision – colour contrast / Upper & Lowercase readability CAN YOU READ THIS? CAN YOU READ THIS? Can you read this?

9. Vision – Peripheral vision

10. Slide intentionally left blank

11. Hearing: • Enormous potential for conveying information (identify a sound, identify its direction, estimate its distance). • We react faster to sounds than to visual stimuli • Primacy and masking – we can switch our attention between sounds without having to look away from a screen. • Underused in interface design • Applications: • Alerts: Sound alerts are picked up quicker than “flashing lights” – Cockpit warning systems use sound e.g. “pull up – pull up!” • Status information: conveys a system state without the need for visual attention – pulse/heart monitors in operating theatres. • Confirmation: using a sound to notify a competed action – “have a nice day” • Navigation: could we use sound to navigate around a system?

12. Touch: Least developed of the “interface” senses, but can be trained From vibrating phones to reading Braille Watch this video Student projects: Develop a mouse for web navigation that heats up or turns cold dependent on your distance from important information.

13. Physiology and ergonomics: • Ergonomics is the study of the human body, human posture and the arrangement of objects for ease of use. • Critical that workers who do repetitive work do not have to move uncomfortably to reach for items (saves time and money too!). • Critical that pilots will not accidentally hit the eject button when reaching for the air conditioning switch • Ergonomic studies were the first to show that women are not simply “small men” when it comes to car design. • Most often, ergonomics in computing is about the design of hardware (keyboards, mice, chairs) that is comfortable to use, however… • Ergonomics can be employed in interface design – where icons/buttons that are used regularly should be grouped efficiently. This leads us on to…..

14. Fitt’s Law Movement time = a + b log2 (distance/size +1) Where a and b are empirically derived constants

15. Learning, reasoning and memory • To make really effective interfaces we need a knowledge of: • How people learn: • can you drive a car just by reading a book about it? • How people “work things out” – Deductive, inductive and abductive reasoning. • How people remember things • Remember your first kiss. Now remember the third slide in this lecture

16. The Structure of Human Memory • Short-Term Memory (STM) • Short-term memory is the memory of the present, used as working or temporary memory. Information is retained in STM automatically and is retrieved without effort. • However, the amount of information in STM is severely limited: 7 +/- 2 items [Miller, 1956] • STM is extremely fragile – the slightest distraction and its contents are gone. • For example, STM can hold a seven digit phone number from the time you look it up until the time you use it, as long as no distractions occur.

17. STM exercise In groups of three 1 says: “My life would be complete if I had a Porsche …” 2 says: “My life would be complete if I had a Porsche and an I-pod…” And so on… How many did you manage before someone forgot?

18. STM exercise 4 9 7 3 5 2 8

19. Slide intentionally left blank

20. Long Term Memory (LTM) • Long-term memory is the memory of the past. • It takes time to put stuff into LTM and time and effort to get stuff out. • Putting information into long term memory is affected by: • The emotional importance of the information • Rehearsal and re-use • Capacity is estimated at about 100 million items. • WHO COUNTED!!!

21. The design of everyday things • Donald Norman; The Design of Everyday Things; Doubleday, New York, 1990. • How can we use knowledge of human psychology and physiology to help us design better interfaces? • Affordances • Mappings • Constraints • Conventions

22. Knowledge in the Head and in the World • Not all of the knowledge required for accurate behaviour has to be in the head. It can be distributed: • partly in the head • partly in the world • Placing Knowledge in the World • Having knowledge in the world reduces the load on human memory: • An example of the input format can be provided in the interface: • Please enter the date (yyyy/mm/dd): • Previously entered values can be used as defaults, so users do not have to remember items between screens. • In fact: Never ask a user to remember anything between screens – They won’t!

23. Perceived Affordance • The perceived properties of the object that suggest how one could use it • When simple things need pictures, labels, or instructions, the design has failed! chairs are for sitting table for placing things on knobs are for turning computer for… switch for toggling slots are for inserting handles are for turning buttons are for pressing

24. Ambiguous door designs. A knob affords turning, but do you push or pull? A horizontal bar affords pushing, but which side do you push on? Good use of affordances in door designs. A flat panel affords pushing and the broadness indicates which side to push. A vertical handle affords grasping and pulling.

25. GUI Affordances • For screen-based interfaces, the computer hardware already has built-in physical affordances: • -Screen affords touching. • -Mouse affords pointing. • -Mouse buttons afford clicking. • -Keyboard affords typing. • Computer software / web pages can suggest on screen affordances by using raised buttons, Icons in the shape of sliders or knobs.

26. GUI Affordances • Palette controls and active objects Only controls that can operate on a picture are fully visible Others are grayed out Selected picture

27. Mappings Mappings are the relationships between controls and their effects on a system. Natural mappings take advantage of physical analogies and cultural standards. Examples: Turn steering wheel clockwise to turn a car right. Move a control up to move an object up. Use a louder sound to mean a greater amount.

28. Mapping of Cooker Controls How should one arrange the hot plate controls on a cooker? Arbitrary mapping of controls to hot plates. There are 24 possible arrangements, requiring the use of labels and memory. Paired cooker controls. Now there are only four possible arrangements, two on each side, but confusion can still occur.

29. Mapping of Cooker Controls A full, natural mapping of cooker controls. There is no ambiguity, no need for learning or remembering, and no need for labels.

30. Interface mappings

31. Mapping Cursor re-enforces selection of current item • Action feedback Depressed button indicates current mapped item Microsoft Paint

32. Constraints • Constraints are physical, cultural or logical limits on the number of possibilities for an object’s use • Physical constraints such as pegs and holes limit possible operations. • Cultural constraints rely upon accepted cultural conventions. • Where affordances suggest the range of possibilities, constraints limit the number of alternatives.

33. Physical constraints Why can’t I plug it in upside down?

34. Visible constraints: Entering a Date • The more constraints, the less opportunity for error • particularly important for managing user input Controls constructed in Visual Basic

35. Conventions • Conventions are cultural constraints. They are initially arbitrary, but evolve and become accepted over time. They can however still vary enormously across different cultures, for example: • Light switches: • America down is off • Britain down is on • Water taps: • America anti-clockwise is on • Britain anti-clockwise is off • The colour red: • UK = danger, hot • India = married women,wealth, beauty • China = fire, the south, happiness

36. Putting it all together: Conceptual Models • People form “mental models” of how things work, so-called conceptual models. Conceptual models are formed from: • affordances • mapping • constraints • familiarity with similar devices (transfer of previous experience) • instructions • Interactions (trial and error) • Conceptual models may be wrong, particularly if the above factors are misleading.

37. A Pair of Scissors Projects a Good Conceptual Model Affordances: holes for putting fingers in. Constraints: small hole for thumb, big hole for several fingers. Mapping: between holes and fingers suggested and constrained by appearance. Conceptual Model: operating parts are visible and their implications are clear.

38. Bad example: Digital watch • affordances: • four push buttons to push, but not clear what they will do • constraints and mapping unknown • no visible relation between buttons, possible actions and end result • transfer of training • little relation to analog watches • cultural idiom • somewhat standardized core controls and functions • but still highly variable • conceptual model: • must be learnt

39. ACCESSIBILITY

40. AccessibilityA measure of how ‘available’ a resource (building, website, tv channel) is to the whole population regardless of disability.Accessible softwareenables people to receive, use, and manipulate data and operate any controls included, regardless of disability.

41. The Essence of the Internet "The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect." Tim Berners-Lee, W3C Director and Inventor of the World Wide Web

42. Accessibility • Access to physical spaces for people with disabilities has long been an important legal and ethical requirement • now becoming increasingly so for information spaces. • Legislation requires software to be accessible. • UK’s Disability Discrimination Act • Section 508 in the US • UN and W3C have declarations and guidelines on ensuring that everyone can get access to information that is delivered through software technologies.

43. Extra-ordinary users • With an increasingly wide range of computer users and technologies designers need to focus on the demands their designs make on people’s abilities. • The sort of issues that face an ordinary user in an extraordinary environment (such as under stress, time pressures, etc.) • are often similar to the issues that face an extraordinary user (e.g. a user with disabilities) in an ordinary environment.

44. Exclusions • Physically • Inappropriate siting of equipment • through input and output devices making excessive demands on their abilities. • Conceptually • people may be excluded because they cannot understand complicated instructions or obscure commands • they cannot form a clear mental model of the system. • Economically • people are excluded if they cannot afford some essential technology.

45. How are Computers Made Accessible? • Hardware or operating systems (Windows features) • Features in software • Assistive technology • Specialised software

46. Assistive Technology • Screen readers: software programmes that read text on the screen using speech synthesizer. • Voice input is increasingly available - not just for text entry - also as substitute for mouse/keyboard control • Screen magnifiers • On screen keyboards, keyboard only (mouseless) control, adapted keyboards, pressure pads. Keyboard filters can compensate for tremor, erratic motion, slow response time. • Refreshable Braille display • Eye tracking systems Braille display

47. How Browsers Work • Pages written in Hypertext Markup Language (HTML) • Markup = instructions for print/display • Tags are standard HTML markup messages • The browser (IE/Firefox/Opera) interprets HTML • HTML is a linear scripting language…..

48. How Screen readers Work • The Screen reader finds the text content within HTML tags • Ignores HTML tags that describe page appearance • Reads the content • Reads HTML tag messages (alt tags) • Can’t read pictures • Operate in a linear fashion – can’t scan for important headings/links and present them first. • Page has to be designed to ‘skip to’ important content by including a table of contents / links.

49. Essential requirements A text equivalent for every graphic Equivalent alternatives for any multimedia presentation information conveyed with colour is also available without colour Documents should be organized so they are readable without requiring an associated style sheet. How To Make An Accessible Webpage

50. Alt Tags • Most authoring tools provide a space for you to enter this information • Or insert the Alt tag with a text editor • <img border="0" src="main.jpg" alt=“the university logo” width="650" height="65">