Diseño de Interacción Centrado en el Usuario

Transcription

1 Prof. Dra. Prof. Dr. Alfredo Teyseyre ISISTAN (CONICET - UNCPBA)

2 Contents Interaction design Concept of HCI Components of HCI The human The computer The interaction Interaction paradigms Usability

3 Why Study Paradigms Concerns how can an interactive system be developed to ensure its usability? how can the usability of an interactive system be demonstrated or measured? History of interactive system design provides paradigms for usable designs. Design principles.

4 What are Paradigms? Predominant theoretical frameworks or scientific world views e.g., Aristotelian, Newtonian, Einsteinian (relativistic) paradigms in physics Understanding HCI history is largely about understanding a series of paradigm shifts Not all listed here are necessarily paradigm shifts, but are at least candidates History will judge which are true shifts

5 Paradigms of Interaction New computing technologies arrive, creating a new perception of the human-computer relationship. We can trace some of these shifts in the history of interactive technologies.

6 The Initial Paradigm ( 40 50) Batch processing Impersonal computing

7 Example Paradigm Shifts Batch processing Time-sharing ( 60s) - Interactive computing - VDU (visual display unit)

8 Example Paradigm Shifts Batch processing Timesharing Community computing

9 Example Paradigm Shifts Batch processing Timesharing Networking Microprocessor ( 70s Alan Kay) Personal computing

10 Personal Computing 1970s Papert's LOGO language for simple graphics programming by children A system is more powerful as it becomes easier to use Future of computing in small, powerful machines dedicated to the individual Kay at Xerox PARC the Dynabook as the ultimate personal computer

11 Example Paradigm Shifts Batch processing Timesharing Networking Microprocessor Graphical displays C P filename dot star or was it R M? % foo.bar ABORT dumby!!! Move this file here, and copy this to there. Direct manipulation

12 Window Systems and the WIMP Interface humans can pursue more than one task at a time windows used for dialogue partitioning, to change the topic 1981 Xerox Star first commercial windowing system windows, icons, menus and pointers now familiar interaction mechanisms

13 Metaphor relating computing to other real-world activity is effective teaching technique LOGO's turtle dragging its tail file management on an office desktop word processing as typing financial analysis on spreadsheets virtual reality user inside the metaphor Problems some tasks do not fit into a given metaphor cultural bias

14 Direct Manipulation 1982 Shneiderman describes appeal of graphically-based interaction visibility of objects incremental action and rapid feedback reversibility encourages exploration syntactic correctness of all actions replace language with action 1984 Apple Macintosh The model-world metaphor What You See Is What You Get (WYSIWYG)

15 Example Paradigm Shifts Batch processing Timesharing Networking Graphical display Microprocessor WWW Global information

16 Hypertext 1945 Vannevar Bush and the Memex key to success in managing explosion of information mid 1960s Nelson describes hypertext as non-linear browsing structure hypermedia and multimedia

17 The World Wide Web Hypertext, as originally realized, was a closed system Simple, universal protocols (e.g. HTTP) and mark-up languages (e.g. HTML) made publishing and accessing easy (1989) Critical mass of users lead to a complete transformation of our information economy

18 Agent-based Interfaces Original interfaces Commands given to computer Language-based Direct Manipulation/WIMP Commands performed on world representation Action based Agents - return to language by instilling proactivity and intelligence in command processor Avatars, natural language processing Human-computer etiquette

19 Interface agents User Profile Assists / Collaborates User Agent Observes and imitates Interacts with Interacts with

20 Applications using interface agents Information overload management and repetitive tasks Information filtering Information searching and information retrieval handling Meeting scheduling E-commerce Recommender agents

21 Example Paradigm Shifts Batch processing Timesharing Networking Graphical display Microprocessor WWW Ubiquitous Computing A symbiosis of physical and electronic worlds in service of everyday activities.

22 Ubiquitous Computing The most profound technologies are those that disappear Mark Weiser, 1991 Late 1980 s: computer was very apparent How to make it disappear Shrink and embed/distribute it in the physical world Design interactions that don t demand our intention

23 Scales of devices Weiser proposed Inch Foot Yard Implications for device size as well as relationship to people

24 Sensor-based and Context-aware Interaction Humans are good at recognizing the context of a situation and reacting appropriately Automatically sensing physical phenomena (e.g., light, temp, location, identity) becoming easier How can we go from sensed physical measures to interactions that behave as if made aware of the surroundings?

25 According to Microsoft, four computing eras

26 Four computing eras

27 Contents Interaction design Concept of HCI Components of HCI The human The computer The interaction Interaction paradigms Usability

28 Usability Usability is the degree to which something - software, hardware or anything else - is easy to use and a good fit for the people who use it. It is a quality or characteristic of a product. It is whether a product is efficient, effective and satisfying for those who use it. It is the name for a group of techniques developed by usability professionals to help create usable products. And, it is a shorthand term for a process or approach to creating those products, also called user-centered design.

29 Definition of Usability Two international standards define usability and human-centered (or user-centered) design: "[Usability refers to] the extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of use." - ISO

30 Concept of Usability "Human-centered design is characterized by: the active involvement of users and a clear understanding of user and task requirements; an appropriate allocation of function between users and technology; the iteration of design solutions; multi-disciplinary design." - ISO 13407

31 Concept of Usability Usability is a quality attribute that assesses how easy a given system is to use. The word "usability" also refers to methods for improving ease-of-use during the design process.

32 Why Is Usability Important? On the Web, usability is a necessary condition for survival For intranets, usability is a matter of employee productivity For internal design projects, think of doubling usability as cutting training budgets in half and doubling the number of transactions employees perform per hour For external designs, think of doubling sales, doubling the number of registered users or customer leads, or doubling whatever other desired goal motivated your design project

33 In summary... The business benefits of adding usability to a product development process include: Increased productivity Increased sales and revenues Decreased training and support costs Reduced development time and costs Reduced maintenance costs Increased customer satisfaction

34 Usability Goals Effective to use Efficient to use Safe to use Have good utility Easy to learn Easy to remember how to use

35 User experience goals Satisfying - Rewarding Fun - Support creativity Enjoyable - Emotionally fulfilling Entertaining and more Helpful Motivating Aesthetically pleasing

36 When to work on Usability Usability plays a role in each stage of the design process Test the old design Test your competitor s design Field study Paper prototypes Multiple iterations Established usability guidelines Final design

37 Usability Components Usability is defined by five quality components: Learnability: How easy is it for users to accomplish basic tasks the first time they encounter the design? Efficiency: Once users have learned the design, how quickly can they perform tasks? Memorability: When users return to the design after a period of not using it, how easily can they reestablish proficiency? Errors: How many errors do users make, how severe are these errors, and how easily can they recover from the errors? Satisfaction: How pleasant is it to use the design?

38 Design principles Generalizable abstractions for thinking about different aspects of design The do s and don ts of interaction design What to provide and what not to provide at the interface Derived from a mix of theory-based knowledge, experience and common-sense

39 Principles to Support Usability Learnability The ease with which new users can begin effective interaction and achieve maximal performance Flexibility The multiplicity of ways the user and system exchange information Robustness The level of support provided to the user in determining successful achievement and assessment of goals

40 Learnability Predictability (Operation visibility) - support for the user to determine the effect of future action based on past interaction history; recognition over recall Synthesizability (Immediate/eventual honesty) support for the user to assess the effect of past operations on the current state Familiarity (Guessability, Affordance) - the extent to which the user s knowledge and experience in other real-world o computer-based domains can be applied when interacting with a new system

41 Predictability - Visibility This is a control panel for an elevator. How does it work? Push a button for the floor you want? Nothing happens. Push any other button? Still nothing. What do you need to do? It is not visible as to what to do!

42 Predictability - Visibility you need to insert your room card in the slot by the buttons to get the elevator to work! How would you make this action more visible? make the card reader more obvious provide an auditory message, that says what to do (which language?) provide a big label next to the card reader that flashes when someone enters make relevant parts visible make what has to be done obvious

43 Affordances Refers to an attribute of an object that allows people to know how to use it (Gibson) e.g. a mouse button invites pushing, a door handle affords pulling Norman (1988) used the term to discuss the design of everyday objects Since then it has been much popularised in interaction design to discuss how to design interface objects e.g. scrollbars to afford moving up and down, icons to afford clicking on

44 Affordances The term affordance refers to the relationship between a physical object and a person (or for that matter, any interacting agent, whether animal or human, or even machines and robots). An affordance is a relationship between the properties of an object and the capabilities of the agent that determine just how the object could possibly be used.

45 Examples Physical affordances: How do the following physical objects afford? Are they obvious?

46 Ambiguous door designs

47 Good door designs

48 Affordances Interfaces are virtual and do not have affordances like physical objects Norman argues it does not make sense to talk about interfaces in terms of real affordances Instead interfaces are better conceptualised as perceived affordances Learned conventions of arbitrary mappings between action and effect at the interface Some mappings are better than others

49 Examples Virtual affordances How do the following screen objects afford? What if you were a novice user? Would you know what to do with them?

50 Signifiers Affordances determine what actions are possible. Signifiers communicate where the action should take place. Good design requires, among other things, good communication of the purpose, structure, and operation of the device to the people who use it. The term signifier refers to any mark or sound, any perceivable indicator that communicates appropriate behavior to a person

51 Signifiers When external signifiers signs have to be added to something as simple as a door, it indicates bad design.

52 Signifiers

53 Summary Affordances are the possible interactions between people and the environment. Some affordances are perceivable, others are not. Perceived affordances often act as signifiers, but they can be ambiguous. Signifiers signal things, in particular what actions are possible and how they should be done. Signifiers must be perceivable, else they fail to function.

54 Mappings Relationship between controls and their movements and the results in the world Natural mappings take advantage of physical analogies and cultural standards Why is this a poor mapping of control buttons?

55 Mappings Why is this a better mapping? The control buttons are mapped better onto the sequence of actions of fast rewind, rewind, play and fast forward

56 Good mappings

57 Feedback Feedback: communicating the results of an action Feedback must be immediate: even a delay of a tenth of a second can be disconcerting. Poor feedback can be worse than no feedback at all Too much feedback can be even more annoying than too little

58 Feedback Feedback has to be planned. All actions need to be confirmed, but in a manner that is unobtrusive. Feedback must also be prioritized, so that unimportant information is presented in an unobtrusive fashion, but important signals are presented in a way that does capture attention

59 Constraints Restricting the possible actions that can be performed Helps prevent user from selecting incorrect options Three main types (Norman, 1999) physical cultural logical

60 Physical constraints

61 Physical constraints Refer to the way physical objects restrict the movement of things E.g. only one way you can insert a key into a lock How many ways can you insert a CD or DVD disk into a computer? How physically constraining is this action? How does it differ from the insertion of a floppy disk into a computer?

62 Logical constraints Exploits people s everyday common sense reasoning about the way the world works An example is the logical relationship between physical layout of a device and the way it works

63 Logical or ambiguous design? Where do you plug the mouse? Where do you plug the keyboard? top or bottom connector? Do the color coded icons help?

64 How to design them More logically (i) A provides direct adjacent mapping between icon and connector (ii) B provides colour coding to associate the connectors with the labels

65 Cultural constraints Learned arbitrary conventions like red triangles for warning Can be universal or culturally specific

66 Cultural constraints The color red: America danger Egypt death India life China happiness

67 Conceptual Models A conceptual model is an explanation, usually highly simplified, of how something works. The design projects all the information needed to create a good conceptual model of the system, leading to understanding and a feeling of control. The conceptual model enhances both discoverability and evaluation of results.

68 Learnability Generalizability support for the user to extend knowledge of specific interaction within and across applications to other similar situations Cut/Paste/Copy operations Consistency - likeness in input-output behavior arising from similar situations or similar task objectives - E.g. Consistency in command naming, consistency in command/argument invocation

69 Consistency Design interfaces to have similar operations and use similar elements for similar tasks For example: always use ctrl key plus first initial of the command for an operation ctrl+c, ctrl+s, ctrl+o Main benefit is consistent interfaces are easier to learn and use

70 When consistency breaks down What happens if there is more than one command starting with the same letter? e.g. save, spelling, select, style Have to find other initials or combinations of keys, thereby breaking the consistency rule E.g. ctrl+s, ctrl+sp, ctrl+shift+l Increases learning burden on user, making them more prone to errors

71 Consistency Effects The same commands and actions should have the same effects in similar situations Language and graphics The same information and controls in the same position The same visual appearance in different parts of the system (look and feel)

72 Internal and External Consistency Internal consistency refers to designing operations to behave the same within an application Difficult to achieve with complex interfaces External consistency refers to designing operations, interfaces, etc., to be the same across applications and devices Very rarely the case, based on different designer s preference

73 Example of External Inconsistency (a) phones, remote controls (b) calculators, computer keypads

74 Flexibility Dialog initiative (System/User pre-emptiveness) allowing the user freedom from artificial constraints on the input dialog imposed by the system Multi-threading (Concurrent/Interleaved) ability of the system to support user interaction pertaining to more than one task at a time Task migratability - the ability to pass control for the execution of a given task so that it becomes either internalized by the user or system or shared between them - E.g. spellchecking

75 Flexibility Substituitivity (Equal Opportunity, Representation multiplicity) Allowing equivalent values of input and output to be arbitrarily substituted for each other E.g. Margins in centimeters or inches Equal opportunity: no difference between I/O Customizability - Modifiability of the user interface by the user or the system (adaptability, adaptivity)

76 Robustness Observability ability of the user to evaluate the internal state of the system from its perceivable representation Related principles: Browsability, static/dynamic defaults, reachability, persistence (new mail with icon, not sound), operation visibility Recoverability - ability of the user to take corrective action once an error has been recognized - Forward error recovery - Bakcward error recovery (Undo) - Related principles: Reachability, forward/backward recovery, commensurate effort

77 Robustness Responsiveness (Stability) - how the user perceives the rate of communication with the system - Response time: similar for similar tasks Task conformance - the degree to which the system services support all of the tasks the user wishes to perform and in the way that the user understands them - Task completeness, task adequacy

78 Usability Principles (Nielsen) Visibility of system status Match between system and the real world User control and freedom Consistency and standards Help users recognize, diagnose and recover from errors Error prevention Recognition rather than recall Flexibility and efficiency of use Aesthetic and minimalist design Help and documentation

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

80 Feedback Sending information back to the user about what has been done Includes sound, highlighting, animation and combinations of these e.g. when screen button clicked on provides sound or red highlight feedback:

81 Informative feedback

82 Visibility of system status

83 Informative Feedback

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

85 Speak the user s language

86 Funny message

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

88 Exits Cancel Undo Quit Interrupt long operations Default values

89 Errors Every user makes mistakes Errors affect productivity It is convenient to prevent errors Fill form fields via a menu and not via a text box Errors should be detected as soon as possible Offer instructions to repair the error Erroneous actions should not change the system state, or the system should provide instructions to repair the state

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

91 Types of Errors Slips The user executes the most common action instead of the desired one Mistakes Semantic errors: correct execution of actions but in a wrong way

92 Preventing Slips General rules Prevent slips from occurring Detect and correct slips when they occur Enable correction via feedback and undo Reversible actions No similar icons

93 Preventing and correcting mistakes Correction done by the system Spellchecker Negotiation Dialog with the user to find a solution to the problem (compilers) Demonstration Ask the user which is the action he wants to execute Checks The system checks the validity of some parameters Input of valid data

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

95 Error messages: Positive, Constructive

96 Error messages: Not ambiguous

97 Error messages

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

99 Recognition rather than recall

100 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 satisfy both inexperienced and experienced users. Allow users to tailor frequent actions.

101 Accelerators

102 Consistency and standards

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

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

105 Help and documentation Tutorials Getting started Tours - Demos

106 Help and documentation Reference manuals

107 Help and documentation Context-sensitive help

108 Help and documentation Reminders Embedded videos

109 Contents Concept of HCI Components of HCI The human The computer The interaction Interaction paradigms Usability Web Usability

110 Web Usability Web usability measures the quality of a user's experience when interacting with a Web site. How do I make a successful Web site?

111 Web Usability Basics in Web design text they can read content that answers users questions navigation and search that help them find what they want short and simple forms (streamlined registration, checkout, and other workflow); and no bugs, typos, or corrupted data; no outdated content

112 Common Mistakes in Web design Bad search Search should be a box Query reformulation: not Advanced search: not Scoped search: maybe First results page is golden

113 Common Mistakes in Web design PDF files for online reading PDF is great for printing and for distributing manuals and other big documents that need to be printed Reserve it for this purpose and convert any information that needs to be browsed or read on the screen into real web pages

114 Common Mistakes in Web design Not changing the colors of visited links

115 Mistakes in Web design Make obvious what's clickable: for text links, use colored, underlined text (and don't underline non-link text) Explain what users will find at the other end of the link. Key information-carrying terms in the anchor text. NO "click here Avoid JavaScript or other fancy techniques that break standard interaction techniques for dealing with links In particular, don't open pages in new windows

116 Mistakes in Web design Non-Scannable Text To draw users into the text and support scannability, use well-documented tricks: subheads bulleted lists highlighted keywords short paragraphs a simple writing style

117 Mistakes in Web design Fixed-font size CSS style sheets unfortunately give websites the power to disable a Web browser's "change font size" button and specify a fixed font size Respect the user's preferences and let them resize text as needed Make your default font size reasonably big Low contrast between text and background

118 Mistakes in Web design Page Titles With Low Search Engine Visibility The page title is your main tool to attract new visitors from search listings and to help your existing users to locate the specific pages that they need

119 Mistakes in Web design Anything that looks like an advertisement banner blindness animation avoidance pop-up purges

120 Mistakes in Web design Violating design conventions Consistency is one of the most powerful usability principles: when things always behave the same, users don't have to worry about what will happen

121 Mistakes in Web design Opening new browser windows It disables the Back button which is the normal way users return to previous sites A link should be a simple hypertext reference that replaces the current page with new content

122 Mistakes in Web design Not answering a user s questions The ultimate failure of a website is to fail to provide the information users are looking for: e.g. avoid listing the price of products and services

123 Mistakes in Web design Using frames Splitting a page into frames is very confusing for users since frames break the fundamental user model of the web page

124 Mistakes in Web design Browser incompatibility don't turn away customers just because they prefer a different platform (e.g. Firefox, Opera, Safari)

125 Mistakes in Web design Cumbersome forms Cut any questions that are not needed Don't make fields mandatory unless they truly are Support autofill to the max by avoiding unusual field labels Set the keyboard focus to the first field when the form is displayed Allow flexible input of phone numbers, credit card numbers, and the like Internationalization

126 Mistakes in Web design No Contact Information or Other Company Info About us information Trust and credibility Unclear statement of purpose Emphasize what your site offers that is of value to users and how your services differ from those of key competitors

127 Mistakes in Web design Screen resolution and page layout Optimize for 1024x768 Do not design solely for a specific monitor size Use a liquid layout that stretches to the current user's window size

128 Mistakes in Web design Use graphics to show real content, not just to decorate your homepage use photos of people who have an obvious connection to the content as opposed to using models or generic stock photos

129 Mistakes in Web design Don't include an active link to the homepage on the homepage never have a link that points to the current page

130 More about (Web) Usability Jakob Nielsen list.html