1 / 29

L20-1

L20-1. Human Computer Interaction. 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?

chaeli
Download Presentation

L20-1

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. L20-1 Human Computer Interaction http://www.interaction-design.org/encyclopedia/human_computer_interaction_hci.html

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

  3. 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." http://web.cs.toronto.edu/research/groups/hci.htm

  4. L20-1: Communication Basics Language (words) ParaverbalsCadence, tempo, tone of voice, grunts, ums, ers, even silence Non-verbals (body language) Encoding Decoding Closing a feedback loop Person A has an idea

  5. L20-1: Design Basics Language (words) Visual rhetoric of the interface Encoding Decoding Closing a feedback loop Designer/editor has an idea

  6. 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." http://www.northlight-images.co.uk/content_images_2/colour_management/usability.jpg

  7. L20-1: Usability Testing Jakob 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) http://www.boagworld.com/blogImages/user_testing-20100604-121059.jpg

  8. L20-1: Usability Testing Knowledge 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. http://0.tqn.com/d/painting/1/0/3/M/abstract-karenvath1c.jpg

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

  10. L20-1: Heuristics Site 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. http://api.ning.com/files/0oI-WPO6XGzekwwr2lV6hF8pI0YNyzvlJMRZA7Hse7ULao*ZZEZU1TMCYSZf-uin1vzm2-c7hcsTcwbRhlP-xJG35ClowVYG/metaphor1.jpg

  11. L20-1: Heuristics Affordance 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. http://images.wisegeek.com/hand-cursor-clicking-a-link.jpg

  12. L20-1: Heuristics 2-Click Rule No 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: http://newspaper.li/static/f0579cee62dd61626012972f03614b8c.jpg

  13. L20-1: Heuristics The Rule of 6 Anything 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/. Use Gestalt to overcome information overload http://www.fastacservice.com/Portals/171146/images/number-6-md.png

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

  15. L20-1: Gestalt Heuristics icdnuoltblveieetaht I cluodaulacltyuesdnatnrdwaht I was rdanieg. The phaonmnealpweor of the hmuanmnid, aoccdrnig to a rscheearch at CmabrigdeUinervtisy, it dseno'tmtaetr in wahtoerdr the Itteres in a wrod are, the olnyiproamtnttihng is taht the frsit and IsatItteer be in the rghitpclae. The rset can be a taotlmses and you can sit II raed it whotuit a pboerlm. Tins is bcuseae the huamnmniddeos not raederveyIteter by istlef, but the wrod as a wlohe. Azanmig huh? yaeh and I awlyastghuhotslpeling was ipmorantt! if you can raedtihsfworrad it. http://upload.wikimedia.org/wikipedia/commons/a/a7/Siamese_Cat_Cross-Eyed.jpg

  16. L20-1: Gestalt Heuristics • a) Proximity • b) Similarity of shape or colour • c) Closure of missing parts • d) Continuity • e) Symmetry From Human Computer Interaction: Jenny Preece, Tom Carey, Yvonne Rogers, Simon Holland, Helen Sharp, David Benyon. Addison-Wesley Publishing Company, 1994. ISBN: 0201627698, 9780201627695 http://www.visualphotos.com/photo/1x7582390/max_wertheimer_H4230325.jpg

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

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

  19. L20-1: Heuristics JakobNielsen'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.

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

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

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

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

  24. 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/

  25. L20-1: Validation One very good accessibility tool is WAVE http://wave.webaim.org/ Some HTML 5 validators to try http://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.

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

  27. L20-1: Prototyping A 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 http://www.lipsum.com/ http://generator.lorem-ipsum.info/ If you are missing content at the moment, you can use the words loremipsum 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 LoremIpsum: Generate LoremIpsum text: Or this great little generator: http://html-ipsum.com/

  29. 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/

More Related