L20-1Human Computer Interaction

1

http://www.interaction-design.org/encyclopedia/human_computer_interaction_hci.html

L20-1: Interface as Communication

So what is an interface, book, screen or other?

It is a medium of communication and it follows all the rule and behaviours of any human communication.

2

L20-1: Human Computer Interaction

Wikipedia defines HCI as one that "involves the study, planning, and design of the interaction between people (users) and computers. It is often regarded as the intersection of computer science, behavioral sciences, design and several other fields of study."

U of T grad. program explains it as "… ubiquitous and pervasive computing, knowledge media design, novel interaction techniques … information visualization, and empirical evaluation of user interfaces including associated metrics and predictive models of human performance."

3

http://web.cs.toronto.edu/research/groups/hci.htm

L20-1: Communication Basics

4

Language (words)

Paraverbals Cadence, tempo, tone of voice, grunts, ums, ers, even silence Non-verbals (body

language)

Person A has an idea

Encoding Decoding

Closing a feedback loop

L20-1: Design Basics

5

Language (words)

Designer/editor has an idea

Encoding Decoding

Closing a feedback loop

Visual rhetoric of the interface

L20-1: HCI

Human Computer Interaction

Includes the visualization of data and the construction of metaphors (visual rhetoric) in the design of computer interfaces.

Also important: the definition and dissemination of "best practices" in the design of computer interface. Aka "heuristics."

6

http://www.northlight-images.co.uk/content_images_2/colour_management/usability.jpg

L20-1: Usability TestingJakob Nielsen says you don’t need mass numbers of participants: 5 will do (but a very special 5). 1-2 "experts" along with 1-2 hostile users and at least 1 naïve user (neophyte).

There are many ways to do usability testing but you should include both qualitative and quantitative methods.

Expert testers will describe what is going on inside their head when they view the interface and while they are interacting with it. Knowledge of "rule of 6" and "2-click" rule, as well as other heuristics will help serve as a vocabulary for describing what the interface is doing. (http://painting.about.com/od/paintingtipscomposition/a/10TipsCompositn.htm)

7http://www.boagworld.com/blogImages/user_testing-20100604-121059.jpg

L20-1: Usability TestingKnowledge of how to read a work of art will be helpful here too—concepts such as framing, focal point, composition and layout of elements, etc. (http://painting.about.com/od/paintingtipscomposition/a/10TipsCompositn.htm)

Qualification alerts you to what the interface feels like (an esoteric, or inside-out perspective) and quantification allows you to measure exactly how much more effective any changes you make are going to be for this interface.

8http://0.tqn.com/d/painting/1/0/3/M/abstract-karenvath1c.jpg

L20-1: Usability Testing

User testers could, for example, be set out to accomplish certain tasks and the timed (quantified data). You can ask testers to find certain pieces of information and then time them.

You can also record mouse movements and key strokes on a computer and then ask your users to find something. The resultant recording will not only tell you how long it took to find or do something, but will also show you errors and any back-tracking.

Finally, some labs use biofeedback during user testing sessions, recording bio-data such as heart and respiration rates and eye movement and synchronizing those reactions with what is happening on the screen as the user interacts. Such testing of course is well beyond the scope of this course … I'm just sayin' …

See http://hcibib.org/tcuid/chap-4.html

9

L20-1: HeuristicsSite Metaphor

A site metaphor is an intentionally encoded message embodied in in visualized symbols. Some examples:

Microsoft revolutionized computers in the early 1990s when the re-named the screen a desktop and put a waste basket on the "desk" and changed the term "directory" to "folder."

See CNN for it's site metaphor.

10

http://api.ning.com/files/0oI-WPO6XGzekwwr2lV6hF8pI0YNyzvlJMRZA7Hse7ULao*ZZEZU1TMCYSZf-uin1vzm2-c7hcsTcwbRhlP-xJG35ClowVYG/metaphor1.jpg

L20-1: HeuristicsAffordance

Describes the relationship between what clicking on a hyperlink actually does, and what the user's expectation of the outcome is.

Strive for good affordance; avoid bad affordance.

Don't assume your hyperlinks are logical. You need user testing to ensure the affordance is good.

11http://images.wisegeek.com/hand-cursor-clicking-a-link.jpg

L20-1: Heuristics2-Click RuleNo matter where the user is in your website, it should only take them 2 clicks to reach whatever they want. Organize your information in an appropriate hierarchy ("information architecture"): primary or top level, secondary, tertiary, etc..

Meet the 2-click-rule heuristics with either an effective navigation menu or with something called a sitemap. There are many ways to do this, but here's one:

12

http://newspaper.li/static/f0579cee62dd61626012972f03614b8c.jpg

L20-1: HeuristicsThe Rule of 6Anything more that 6 choices on any given interface creates information overload and can overwhelm the reader.

Decide which information is most important (primary) and put that on the main screen. Everything else has to be hidden in a menu or a sitemap (more in a minute).

In cases where the context demands more than 6 items at the top level, use the principals of Gestalt to cluster your navigation items.

See http://www.cnn.com for how they have worked in Gestalt. See also Yahooligans at http://kids.yahoo.com/.

13http://www.fastacservice.com/Portals/171146/images/number-6-md.png

Use Gestalt to overcome information overload

L20-1: Gestalt Heuristics

14

From Human Computer Interaction: Jenny Preece, Tom Carey, Yvonne Rogers, Simon Holland, Helen Sharp, David Benyon. Addison-Wesley Publishing Company, 1994. ISBN: 0201627698, 9780201627695

L20-1: Gestalt Heuristics

i cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg. The phaonmneal pweor of the hmuan mnid, aoccdrnig to a rscheearch at Cmabrigde Uinervtisy, it dseno't mtaetr in waht oerdr the Itteres in a wrod are, the olny iproamtnt tihng is taht the frsit and Isat Itteer be in the rghit pclae. The rset can be a taotl mses and you can sit II raed it whotuit a pboerlm. Tins is bcuseae the huamn mnid deos not raed ervey Iteter by istlef, but the wrod as a wlohe. Azanmig huh? yaeh and I awlyas tghuhot slpeling was ipmorantt! if you can raed tihs fworrad it.

15http://upload.wikimedia.org/wikipedia/commons/a/a7/Siamese_Cat_Cross-Eyed.jpg

16

a) Proximity

b) Similarity of shape or colour

c) Closure of missing parts d) Continuity

e) Symmetry

L20-1: Gestalt Heuristics

http://www.visualphotos.com/photo/1x7582390/max_wertheimer_H4230325.jpg

From Human Computer Interaction: Jenny Preece, Tom Carey, Yvonne Rogers, Simon Holland, Helen Sharp, David Benyon. Addison-Wesley Publishing Company, 1994. ISBN: 0201627698, 9780201627695

L20-1: Gestalt Heuristics

17From Human Computer Interaction: Jenny Preece, Tom Carey, Yvonne Rogers, Simon Holland, Helen Sharp, David Benyon. Addison-Wesley Publishing Company, 1994. ISBN: 0201627698, 9780201627695

L20-1: Heuristics

Jakob Nielsen's 10 Usability Heuristics

1. Visibility of system status The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.

2. Match between system and the real world The system should speak the users' language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.

18

L20-1: Heuristics

Jakob Nielsen's 10 Usability Heuristics

3. User control and freedom Users often choose system functions by mistake and will need a clearly marked "emergency exit" to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.

4. Consistency and standards Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.

19

L20-1: Heuristics

Jakob Nielsen's 10 Usability Heuristics

5. Error prevention Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.

6. Recognition rather than recall Minimize the user's memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.

20

L20-1: Heuristics

Jakob Nielsen's 10 Usability Heuristics

7. Flexibility and efficiency of use Accelerators -- unseen by the novice user -- may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.

8. Aesthetic and minimalist design Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.

21

L20-1: Heuristics Jakob Nielsen's 10 Usability Heuristics

9. Help users recognize, diagnose, and recover from errors Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.

10. Help and documentation Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user's task, list concrete steps to be carried out, and not be too large.

22

L20-1: Validation Validation is a way of ensuring that your code meets W3 standards and that it works well (ie consistently) on all platforms (desktops like Windows, Mac and Unix; tablets, iPhones, iMacs, Blackberry and other PDAs, etc.) as well as on all mobile apps and browsers (Firefox, Safarai, Opera, Chrome, MSIE).

In so doing, you will also go a long way toward accommodating a variety of cognitive and physical disabilities.

The W3C or World Wide Web Consortium http://www.w3.org/ is an international collaborative effort to ensure (among other things) that all browsers and devices interpret the same code the same way every time, regardless of context.

23

L20-1: Validation - Accessibility

It would be a grave mistake to assume that making sites/interfaces friendly for everyone is just a matter of accommodating a disability (colour blindness, visual impairment or blindness, ADD, dyslexia, etc.); in fact, by designing with these disabilities in mind the site/interface becomes easier for everyone to use.

The WAI (Web Accessibility Initiative) is located at http://www.w3.org/WAI/

Instructions on how to meet these standards are at http://www.w3.org/WAI/WCAG20/quickref/

24

L20-1: Validation One very good accessibility tool is WAVE

http://wave.webaim.org/

Some HTML 5 validators to tryhttp://html5.validator.nu/

https://addons.mozilla.org/en-us/firefox/addon/html-5-validator/

http://validator.whatwg.org/

Even if you cannot meet all of the demands, it's well worth trying to do what you can.

25

L20-1: Colour Blindness

Start here: http://www.stcsig.org/usability/topics/colorblind.html

Colour blindness affects more men than women and it is significantly widespread enough that you must account for it in your design.

Principles include certain forbidden combinations (ex: red on green or vice versa) and the presence of high contrast foregrounds (texts) and backgrounds.

One supplemental point on heuristics: if I see your background before I se your text/foreground, you do *not* have a background.

See http://www.etre.com/tools/colourblindsimulator/ and http://www.accesskeys.org/tools/color-contrast.html

26

Miscellaneous

4 kinds of disabilityhttp://www.w3.org/TR/UNDERSTANDING-WCAG20/intro.html#introduction-fourprincs-head

Test Your Colours Onlinehttp://www.accesskeys.org/tools/color-contrast.html

Check my Colours http://www.checkmycolours.com/

Web Accessibilty Checker http://achecker.ca/checker/index.php

27

L20-1: PrototypingA prototype is a partially functioning version of your website (or any interface).

Don’t try to build the whole thing at once. For example, if you are going to gloss difficult vocabulary, build 3 or 4 hyperlinks and stop there. You can add more later. It's the *functionality* that you want to demonstrate.

Shallow prototypes have no functionality: just layout.

Vertical prototypes have one set of links working.Walkthrough prototypes have a false appearance of functionality that has been achieved in some way other than what should have been coded (ie simulating a database function with plain HTML markup).

28

L20-1: Prototyping

If you are missing content at the moment, you can use the words lorem ipsum over and over as filler. If you have an image to add to your interface and cannot get it yet, or unsure, use a placeholder image—that is to say any other image in its place.

About Lorem Ipsum:

Generate Lorem Ipsum text:

Or this great little generator: http://html-ipsum.com/

29

http://www.lipsum.com/

http://generator.lorem-ipsum.info/

L20-1: Prototyping

For image placeholders you can use anything you want. The only caveat is that it should clearly have nothing to do with content to make it clear to your reader that this is obviously a placeholder.

For example, try http://placekitten.com/ or http://placedog.com/

30