User Interfaces Norman Badler CIS
Outline Credentials Introduction Devices Design principles Applying the principles 12/9/2009 2
Outline Credentials Introduction Devices Design principles Applying the principles 12/9/2009 3
Background Computer Graphics, Animation and Simulation User Interfaces in 2 D and 3 D Commercial software product: Jack human modeling system developed here at Penn (now owned, extended and marketed by Siemens): http: //www. plm. automation. siemens. com/en_us/products/tecnomatix/assembly_planning/jack/index. shtml 12/9/2009 4
Outline Credentials Introduction Devices Design principles Applying the principles 12/9/2009 5
User Interface Design? It’s important to our well being… 12/9/2009 Dilbert strip: http: //www. exceptontuesdays. com/? p=8 6
The Problem is that Humans are Half of the User Interface 12/9/2009 http: //www. nevtron. si/borderline/archive 2/intuiti. gif 7
As Even if Intuitive and Clear, User Interface Might not be so Good… 12/9/2009 http: //www. nevtron. si/borderline/delete. gif 8
And it’s not just about our Workstation Interfaces… http: //www. uselog. com/2008/11/users-fix-parking-ticket-machine-ui. html 12/9/2009 9
Poor Design can Cost! Toyota will recall about 3. 8 million cars and trucks to reshape and/or replace the accelerator pedals. The design of the accelerator pedal in combination with loose floormats may result in the accelerator pedal getting stuck. 12/9/2009 Photo and source: autoblog, via Bright 10
Who’s to Blame for Usability Failures? Most Returned Products Work Fine, Study Says Only 5 percent of returned products are genuinely defective: Yardena Arar, PC World, June 2, 2008 4: 00 pm Only 5 percent of consumer electronics products returned to retailers are malfunctioning --yet many people who return working products think they are broken, a new study indicates. The report by technology consulting and outsourcing firm Accenture pegs the costs of consumer electronics returns in 2007 at $13. 8 billion in the United States alone, with return rates ranging from 11 percent to 20 percent, depending on the type of product. http: //www. pcworld. com/article/146576/most_returned_products_work_fine_study_says. html 12/9/2009 11
It could be the User Interface Designers– Or their Managers It took 43 people to come up with the 15 different ways of shutting down Windows Vista According to a former worker at Microsoft, 43 persons where involved in designing and implementing the new shut down feature in Windows Vista. Their work was exceptionally fruitful. On a laptop you get Off, Lock, Switch User, Log Off, Restart, Sleep, Hibernate, and Shut Down. Combined with all the keyboard shortcuts for the various options, plus pressing the power button and closing the lid, this gives us 15 different ways of shutting down a laptop. In defense of Microsoft, it should noted that you will only see the Off and Lock options, unless you choose the advanced menu. http: //www. guardian. co. uk/technology/2006/nov/30/guardianweeklytechnologysection 12/9/2009 12
There Oughtta be a Law… According to Jef Raskin in his book The Humane Interface, there are two laws of user interface design, based on the fictional laws of robotics created by Isaac Asimov: First Law: A computer shall not harm your work or, through inactivity, allow your work to come to harm. Second Law: A computer shall not waste your time or require you to do more work than is strictly necessary. Physical or Mental? ? 12/9/2009 http: //en. wikipedia. org/wiki/Principles_of_User_Interface_Design 13
Outline Credentials Introduction Devices Design principles Applying the principles 12/9/2009 14
Displays and Wearable Devices Familiar 2 D video and computer screens Mobile phones Cameras (still and video) Unobtrusive wearable displays Motion capture suits (and less obtrusive methods) The Nintendo Wii Body state sensing devices and feedback 12/9/2009 15
Mobile “Smartphones” Not just a phone, music player, and camera, But a computing and interaction platform. Touch screen, voice, video, inertial (accelerometer) orientation sensor, GPS. New applications. 12/9/2009 16
Wearable “Smart” Cameras Microsoft Cambridge Sense. Cam. Takes low-res wide angle photo every 30 sec. or when triggered by various on-board sensors (sound, temperature, motion). Visual record of experience. http: //research. microsoft. com/en-us/um/cambridge/projects/sensecam/images/cambridge. Vid-63 x 63. jpg 12/9/2009 17
Wearable Displays “Sliver” display screen Wearable computer driver 12/9/2009 18
Motion Capture Active Suit, e. g. , Xsens Movens (accelerometers and magnetometers) Passive, e. g. Vicon (Cameras and LED markers) Video only, e. g. Organic. Motion 12/9/2009 http: //www. youtube. com/watch? v=DVQ 9 MPjk 5 d. I&feature=related 19
Motion Capture Uses Enables data-driven animations (games) 3 D motion data is re-usable, modifiable, and adaptable to other characters. User inputs for interactivity and virtual worlds. 12/9/2009 20
Nintendo Wii Accelerometer and optical motion sensing 12/9/2009 21
Computer-Controlled Psychophysical Experiences Non-immersive or desk-top “VR”: The 2 D computer screen; recent 3 D display monitors. Immersive: “Through the window” display (airplane cockpit). Immersive: Head-mounted displays (HMD) (helmets, goggles, glasses). Whole body immersive: CAVE® or other multiprojection rooms with imagery on walls, ceiling, floor. Augmented (Mixed) Reality: See the virtual superimposed on and registered with the real world. 12/9/2009 22
Virtual Reality (VR) Displays VR goggles or helmets Limited field of view Cybersickness issues Cautious navigation User interfaces generally use hand motions 12/9/2009 23
Virtual Reality (VR) Displays (Multiple Screens) One or more people can see and experience 12/9/2009 “CAVE” 24
Augmented Reality (AR) Displays AR with video cameras AR with optical merging 12/9/2009 25
Augmented Reality Wearable Display Video version Scene limited to video resolution (not so good). Primary issue is real/virtual image registration. 12/9/2009 26
Augmented Reality with Portable Devices (Smartphone) Use the embedded camera and overlap synthesized images and animation. Need real-time feature tracking for registration. “Invisible Train”: Schmalstieg and Reitmayr, 2004 Overlaid directions 12/9/2009 http: //www. youtube. com/watch? v=z. OS 5 Mbk_Iuc 27
Multi-Modal Interfaces Various challenges to do this effectively (cost, latency, technology, encumbrances, . . . ) Sound input “easiest”, though speech recognition is still far from perfect. Eye gaze interfaces -- tricky to control; useful in assistive technology: 12/9/2009 http: //www. eyegaze. com/ 28
Electroencephalography (EEG) “Thinking” about something to control it. http: //www. gizmag. com/honda-asimo-brain-machine-interface-mind-control/11379/picture/73792/ 12/9/2009 29
EEG for Home Use is Coming… “Emotiv” mind controller: http: //www. pcauthority. com. au/News/161891, future-tech-interview-with-emotiv-co-founder-nam-do-and-the-science-behind-mind-control. aspx 12/9/2009 30
Tactors and Haptics Deliver end effector forces and torques: Deliver skin vibration We are a long way from the Star Trek Holodeck in terms of the physicality of an interactive experience. Though visually, we’re doing great… 12/9/2009 31
Outline Credentials Introduction Devices Design principles Applying the principles 12/9/2009 32
User Interface Design: Who do you Turn To? Academic and industry leaders. People with insight and experience whom one can learn from: Gurus! Best known: Donald Norman, through his several books, including The Design of Everyday Things. Others mentioned here include UI practitioners and even IBM. 12/9/2009 33
Donald Norman: UI Guru Referring to Norman’s book: Design of Everyday Things Visibility –visible functions aid user awareness; invisible functions are more difficult to find and know how to use. Feedback – return information about what action has been done and what has been accomplished. Constraints –restricting the kind of user interaction that can take place at a given moment. Mapping –the (functional, geometric, appearance) relationship between controls and their effects in the world. Consistency – use similar operations and use similar elements for achieving similar tasks. Affordance –an attribute of an object that allows people to know how to use it. 12/9/2009 http: //twobenches. wordpress. com/2008/06/05/don-normans-design-principles/ 34
Jakob Nielsen: UI Heuristics (1) Visibility of system status The system should always keep users informed about what is going on, through appropriate feedback within reasonable time. 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 realworld conventions, making information appear in a natural and logical order. User control and freedom Users often choose system functions by mistake and will need a clearly marked "emergency exit" to leave the unwanted state easily. Support undo and redo. Consistency and standards Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions. 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. 12/9/2009 35 http: //www. useit. com/papers/heuristic_list. html
Jakob Nielsen: UI Heuristics (2) 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. Flexibility and efficiency of use Accelerators -- unseen by the novice user -- may often speed up the interaction for the expert user. Allow users to tailor frequent actions. 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. 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. Help and documentation Best if the system can be used without documentation, but it may be necessary to provide it. 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. 12/9/2009 http: //www. useit. com/papers/heuristic_list. html 36
Constantine and Lockwood The structure principle. Your design should organize the user interface purposefully, in meaningful and useful ways based on clear, consistent models that are apparent and recognizable to users, putting related things together and separating unrelated things, differentiating dissimilar things and making similar things resemble one another. The structure principle is concerned with your overall user interface architecture. The simplicity principle. Your design should make simple, common tasks simple to do, communicating clearly and simply in the user’s own language, and providing good shortcuts that are meaningfully related to longer procedures. The visibility principle. Your design should keep all needed options and materials for a given task visible without distracting the user with extraneous or redundant information. Good designs don’t overwhelm users with too many alternatives or confuse them with unneeded information. The feedback principle. Your design should keep users informed of actions or interpretations, changes of state or condition, and errors or exceptions that are relevant and of interest to the user through clear, concise, and unambiguous language familiar to users. The tolerance principle. Your design should be flexible and tolerant, reducing the cost of mistakes and misuse by allowing undoing and redoing, while also preventing errors wherever possible by tolerating varied inputs and sequences and by interpreting all reasonable actions reasonable. The reuse principle. Your design should reuse internal and external components and behaviors, maintaining consistency with purpose rather than merely arbitrary consistency, thus reducing the need for users to rethink and remember. 12/9/2009 http: //www. ambysoft. com/essays/user. Interface. Design. html 37
Schneiderman: 8 Golden Rules 1. Strive for consistency. Consistent sequences of actions should be required in similar situations; identical terminology should be used in prompts, menus, and help screens; and consistent commands should be employed throughout. 2. Enable frequent users to use shortcuts. As the frequency of use increases, so do the user's desires to reduce the number of interactions and to increase the pace of interaction. Abbreviations, function keys, hidden commands, and macro facilities are very helpful to an expert user. 3. Offer informative feedback. For every operator action, there should be some system feedback. For frequent and minor actions, the response can be modest, while for infrequent and major actions, the response should be more substantial. 4. Design dialog to yield closure. Sequences of actions should be organized into groups with a beginning, middle, and end. The informative feedback at the completion of a group of actions gives the operators the satisfaction of accomplishment, a sense of relief, the signal to drop contingency plans and options from their minds, and an indication that the way is clear to prepare for the next group of actions. 12/9/2009 http: //www. cc. gatech. edu/classes/cs 6751_97_winter/Topics/design-princ/ 38
Schneiderman: (2) 5. Offer simple error handling. As much as possible, design the system so the user cannot make a serious error. If an error is made, the system should be able to detect the error and offer simple, comprehensible mechanisms for handling the error. 6. Permit easy reversal of actions. This feature relieves anxiety, since the user knows that errors can be undone; it thus encourages exploration of unfamiliar options. The units of reversibility may be a single action, a data entry, or a complete group of actions. 7. Support internal locus of control. Experienced operators strongly desire the sense that they are in charge of the system and that the system responds to their actions. Design the system to make users the initiators of actions rather than the responders. 8. Reduce short-term memory load. The limitation of human information processing in short-term memory requires that displays be kept simple, multiple page displays be consolidated, window-motion frequency be reduced, and sufficient training time be allotted for codes, mnemonics, and sequences of actions. 12/9/2009 http: //www. cc. gatech. edu/classes/cs 6751_97_winter/Topics/design-princ/ 39
Mayhew’s “General Principles” (1) 1. User compatibility. The most fundamental principle is to know the user. 2. Product compatibility. Across-product compatibility allows the user to adapt to a new system quickly. 3. Task compatibility. The structure and flow should match and support the task. 4. Work flow compatibility. A system should be organized to facilitate transitions between tasks. 5. Consistency. Similarities within a product allow reasoning by analogy and predict how to do things they have never done before. 6. Familiarity. Concepts, terminology, and spatial arrangements should be familiar. 7. Simplicity. Make the interface relatively simple. 8. Direct manipulation. 12/9/2009 Directly http: //www. cc. gatech. edu/classes/cs 6751_97_winter/Topics/design-princ/ perform actions on visible objects. 40
Mayhew’s “General Principles” (2) 9. Control. User prefer to feel a sense of mastery and control over any tool at their disposal, thus present a tool-like interface. 10. WYSIWYG. What you see is what you get (across other media, too) 11. Flexibility. Accommodate variations in user skill and preferences. 12. Responsiveness. Give users feedback as soon as possible and let users be aware of the progress. 13. Invisible technology. Only present the functionality that users need to know. 14. Robustness. A system should tolerate common and unavoidable human error. 15. Protection. "Undo" or other recovery measures should be provided. 16. Ease of learning and ease of use. It should be easy to learn for the novice and efficient and easy to use for the expert. 12/9/2009 http: //www. cc. gatech. edu/classes/cs 6751_97_winter/Topics/design-princ/ 41
IBM's "Design Principles for Tomorrow” Simplicity: Don't compromise usability for function Support: User is in control with proactive assistance Familiarity: Build on users' prior knowledge Obviousness: Make objects and their controls visible and intuitive 5. Encouragement: Make actions predictable and reversible 6. Satisfaction: Create a feeling of progress and achievement 7. Accessibility: Make all objects accessible at all times 8. Safety: Keep the user out of trouble 9. Versatility: Support alternate interaction techniques 10. Personalization: Allow users to customize 11. Affinity: Bring objects to life through good visual design 1. 2. 3. 4. 12/9/2009 http: //www. cc. gatech. edu/classes/cs 6751_97_winter/Topics/design-princ/ 42
Outline Credentials Introduction Devices Design principles Applying the principles 12/9/2009 43
What Can We Do With Principles? Principles are generally: Descriptive, comparative and analytical (i. e. , how alternatives compare; test and refine paradigm) Not constructive (i. e. , do not define process of developing user interface design) No automated (good) interface design tools exist (e. g. , that could have predicted the i. Pod user interface design) 12/9/2009 44
Principles Must Be Considered in the Context of User Population Principles define an optimization problem where the (target) user population is not uniform in skill, cognitive ability, needs, experience, learning style, or motivation. 12/9/2009 45
Task-Centered Design Identify users Analysis Choose tasks Note ESSENTIAL iterative loops! Look at other systems Turn tasks into scenarios Design Turn scenarios into storyboards Evaluate Make sure testers are REAL users from REPRESENTATIVE user populations, not just SELF! Build the design Evaluate Implementation http: //www. comp. rgu. ac. uk/staff/sw/materials/cm 2006/Interface%20 design. L 4. ppt
User Analysis If you don’t understand what the users want to do with a system, you have no realistic prospect of designing an effective interface. User analyses have to be described in terms that users and other designers can understand. Scenarios where you describe typical episodes of use, are one way of describing these analyses. 12/9/2009 Ian Sommerville: Software Engineering, 7 th Ed. , 2004 47
Analysis Techniques Task analysis Models the steps involved in completing a task. Interviewing and questionnaires Asks the users about the work they do. Ethnography Observes the user at work. 12/9/2009 Ian Sommerville: Software Engineering, 7 th Ed. , 2004 48
Task Analysis Need to determine what tasks must be accomplished. Understand user’s intentions: What user wants (or needs) to do, not necessarily how to do it. Task analysis breaks problem into individual task components. Top-down task analysis. Tasks still need to be wrapped in a UI. 12/9/2009 49
Example Task Analysis: Using Power. Point 0 Prepare a slide using Power. Point 1 Start Power. Point 3 Draw diagrams 2 Enter text Plan 2: According to requirements 1 Enter text using keyboard 2 Copy text from a slide Plan 2. 2: 1 -2 -3 -4 1 Select text block Plan 0: 1 -2 -3 -4 2 Choose copy command 4 Save slide Further redescribed 3 Add text to existing slide Further redescribed 3 Choose insert position 4 Choose paste command Further redescribed 12/9/2009 http: //www. comp. rgu. ac. uk/staff/sw/materials/cm 2006/Interface%20 design. L 4. ppt 50
Interviewing Design semi-structured interviews based on openended questions. Users can then provide information that they think is essential; not just information that you have thought of collecting. Group interviews or focus groups allow users to discuss with each other what they do. 12/9/2009 Ian Sommerville: Software Engineering, 7 th Ed. , 2004 51
Ethnography Involves an external observer watching users at work and questioning them in an unscripted way about their work. Valuable because many user tasks are intuitive and users find these very difficult to describe and explain. Also helps understand the role of social and organizational influences on work. 12/9/2009 Ian Sommerville: Software Engineering, 7 th Ed. , 2004 52
Ethnographic Records Air traffic control involves a number of control ‘suites’ where the suites controlling adjacent sectors of airspace are physically located next to each other. Flights in a sector are represented by paper strips that are fitted into wooden racks in an order that reflects their position in the sector. If there are not enough slots in the rack (i. e. when the airspace is very busy), controllers spread the strips out on the desk in front of the rack. When we were observing controllers, we noticed that controllers regularly glanced at the strip racks in the adjacent sector. We pointed this out to them and asked them why they did this. They replied that, if the adjacent controller has strips on their desk, then this meant that they would have a lot of flights entering their sector. They therefore tried to increase the speed of aircraft in the sector to ‘clear space’ for the incoming aircraft. 12/9/2009 Ian Sommerville: Software Engineering, 7 th Ed. , 2004 53
Insights from Ethnography Controllers had to see all flights in a sector. Therefore, scrolling displays where flights disappeared off the top or bottom of the display should be avoided. The interface had to have some way of telling controllers how many flights were in adjacent sectors so that they could plan their workload. 12/9/2009 Ian Sommerville: Software Engineering, 7 th Ed. , 2004 54
So Where Does UI Design Begin? How should information from the user be provided to the computer system? How should information from the computer system be presented to the user? User interaction and information presentation may be integrated through a coherent framework such as a user interface metaphor or stylistic pattern. 12/9/2009 Ian Sommerville: Software Engineering, 7 th Ed. , 2004 55
Interaction Styles Direct manipulation Menu selection Form fill-in Command language Natural language 12/9/2009 Ian Sommerville: Software Engineering, 7 th Ed. , 2004 56
Interaction Styles Style Main Advantages Main Disadvantages Applications Direct manipulation Fast and intuitive interaction; easy to learn Only suitable where there is a visual metaphor for tasks and objects Video games; CAD systems Menu selection Avoids user error; little typing required Slow for experienced user; can become complex if many menu options Most general purpose systems Form fill-in Simple data entry; easy to learn; checkable Takes up much screen space; causes problems where user options do not match the form fields Ordering Command language Powerful and flexible Hard to learn; poor error management Operating systems, command control systems Natural language Accessible to casual user; easily extended Requires typing; NL understanding systems may be unreliable Information retrieval and Q/A systems Ian Sommerville: Software Engineering, 7 th Ed. , 2004 57 12/9/2009
User Interface Prototyping The aim of prototyping is to allow users to gain direct experience with the interface. Without such direct experience, it is impossible to judge the usability of an interface. Prototyping may be a two-stage process: Early in the process, paper prototypes may be used; The design is then refined and increasingly sophisticated automated prototypes are then developed. 12/9/2009 Ian Sommerville: Software Engineering, 7 th Ed. , 2004 58
Paper Prototyping Work through scenarios using sketches of the interface. Use a storyboard to present a series of interactions with the system. Paper prototyping is an effective way of getting user reactions to a design proposal. 12/9/2009 Ian Sommerville: Software Engineering, 7 th Ed. , 2004 59
Prototyping Techniques Script-driven prototyping Develop a set of scripts and screens using a tool such as Macromedia Director. When the user interacts with these, the screen changes to the next display. Use Power. Point as a substitute for an editable script. Visual programming Use a language designed for rapid development such as Visual Basic. Internet-based prototyping Use a web browser and associated scripts. 12/9/2009 Ian Sommerville: Software Engineering, 7 th Ed. , 2004 60
User Interface Evaluation Some evaluation of a user interface design should be carried out to assess its suitability. Full scale evaluation is very expensive and impractical for most systems. Ideally, an interface should be evaluated against a usability specification. However, it is rare for such specifications to be produced. 12/9/2009 Ian Sommerville: Software Engineering, 7 th Ed. , 2004 61
Sample Usability Attributes Attribute Description Learnability How long does it take a new user to become productive with the system? Speed of Operation (use) How well does the system response match the user’s work practice and task requirements? Robustness How tolerant is the system of user error? Recoverability How good is the system at recovering from user errors? Adaptability How closely is the system tied to a single model of work? 12/9/2009 Ian Sommerville: Software Engineering, 7 th Ed. , 2004 62
Simple Evaluation Techniques Questionnaires for user feedback. Video recording of system use and subsequent video analysis and evaluation. Instrumentation of code to collect information about facility use, timings and user errors. The provision of code in the software to collect online user feedback. 12/9/2009 Ian Sommerville: Software Engineering, 7 th Ed. , 2004 63
Analytical Tools Eye Tracks (Scan paths, time on target) Similar with mouse tracks 12/9/2009 http: //www. smashingmagazine. com/2008/01/31/10 -principles-of-effective-web-design/ 64
Analytical Tools Biosensing devices: galvanic skin response heart rate repetitive motion Estimate subject state: Excitement, frustration, etc. 12/9/2009 http: //www. techeblog. com/index. php/tech-gadget/robometer-system-promises-to-keep-you-happy-video- 65
The Next Disruptive Technology for User Interfaces? Flexible displays Organic Light Emitting Diodes (OLED) Sony 0. 3 mm thick 24 bit color 120× 160 pixels Samsung: 0. 05 mm thick 480× 272 pixels full video color gamut 12/9/2009 66
User Interfaces in the Future? Trend toward more body sensing to determine user emotional, intentional and cognitive states. Video observation coming? But will this make anticipatory interfaces that are helpful or just more annoying? Invasiveness: Should you turn your phone off or should it know you are in class and route the call to voicemail? Would you give up your automobile’s user interfaces (for driving) to computer control? Sometimes? When you fall asleep? Very blurred connection between the user interface and the thing itself (Cooper): the User Interface is the artifact. 12/9/2009 67
Thank you! 12/9/2009 68
Скачать презентацию User Interfaces Norman Badler CIS Outline Credentials
f8d1d0da333a6bfb42dc5bc9595f7113.ppt