Скачать презентацию UI Design Human Centered Design USP Version Скачать презентацию UI Design Human Centered Design USP Version

5de39f50b3c7e1c982726d273e3e6cdd.ppt

  • Количество слайдов: 160

UI Design & Human Centered Design USP Version 1. 0 May. 2011 1 UI Design & Human Centered Design USP Version 1. 0 May. 2011 1

U Summary This training course and text book include basic knowledge and skill for U Summary This training course and text book include basic knowledge and skill for UI (User Interface), UX (User e. Xperience) and UCD ( User Centered Development). UX and USD are relatively new and useful concept and method for software development and aren’t familiar to IT engineers now. But many organizations and manufactures are providing development methods and software such as prototyping tools and RIA (Rich Internet application) development environment. This training is appropriate for all IT engineers such as Web developer and designer, game developer, APP developer, project manager, manger of QA and others. Acknowledgments Content of this training and text book is copyrighted to JICA (Japan International Cooperation Agency) , The University of the South Pacific (USP) and developed by Go Ota ([email protected] jp), PADECO Co. , Ltd. 2

Contents Session 1 • Outline of UI &UCD and Heuristic Evaluation and Human Factor Contents Session 1 • Outline of UI &UCD and Heuristic Evaluation and Human Factor for UI • Activity: Color design Session 2 • UI patterns and Tips & How to make prototyping • Activity: Paper prototyping Session 3 • Method for Analysis, Test and evaluation of UI • Activity: Usability testing by using paper prototype (& Heuristic Evaluation ) Session 4 • Process of UI & Human Centered Design • Activity: Card Sorting Session 5 • CAUSE Tools • Activity: Prototyping in MS Sketch. Flow 3

U Session 1 Outline of UI &UCD Heuristic Evaluation and Human Factor for UI U Session 1 Outline of UI &UCD Heuristic Evaluation and Human Factor for UI 4

U Introduction to UI Design & Human Centered Design 5 U Introduction to UI Design & Human Centered Design 5

1. 0 Types of Usability Problems • Product doesn’t match job or task • 1. 0 Types of Usability Problems • Product doesn’t match job or task • Poor organization/layout • Unexpected occurrence of events • Product not self-evident • Requires recall rather than recognition • Inconsistent screens, messages, terminology • Design is inefficient • Cluttered or unattractive design • No feedback or poor feedback about status or errors • No exit or undo • Help or documentation is not helpful 6

1. 1 Background and Term No. 1 (RIA) A Rich Internet Application (RIA): is 1. 1 Background and Term No. 1 (RIA) A Rich Internet Application (RIA): is a web application that has many of the characteristics of desktop applications, typically delivered either by way of a site-specific browser, via a browser plug-in, independent sandboxes, or virtual machines. and Microsoft Silverlight, WPF, Adobe Flash, FLEX and AIR are currently the most common platforms. http: //www. silverlight. net/showcase/ http: //www. primetable. com/Application/Default. aspx? demo 7

History of UI Generation H/W Terminal UI User -1955 Pioneer Huge Machine Tape and History of UI Generation H/W Terminal UI User -1955 Pioneer Huge Machine Tape and Printer Direct Programming, Batch Experts and Pioneers - 1965 Historical Batch Machine Card and Printer Batch Computer professional -1980 Traditional Time sharing Character Command line, full Terminal screen menu -1995 Modern PC Graphic Terminal - 2010 Current PC, PDA and mobile Multimedi WIMP + Multimedia a output Terminal 2010 – Future Cloud and Multi Ubiquitous modal Device Scientific experts and Computer operators WIMP (Windows, Businessman and Icons and a pointing hobbyists devices) Everybody who has minimum IT literacy Multi modal such as Everybody touch panel, motion recognition, voice technology 8

1. 1 Background and Term No. 2 ( User experience) User e. Xperience (UX): 1. 1 Background and Term No. 2 ( User experience) User e. Xperience (UX): is about how a person feels about using a system. User experience highlights the experiential, affective, meaningful and valuable aspects of human-computer interaction and product ownership, but it also includes a person’s perceptions of the practical aspects such as utility, ease of use and efficiency of the system. User experience is subjective in nature, because it is about an individual’s feelings and thoughts about the system. User experience is dynamic, because it changes over time as the circumstances change. 9

1. 1 Background and Term No. 3 (Usability) ISO defines Usability as 1. 1 Background and Term No. 3 (Usability) ISO defines Usability as "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. " • 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 re establish proficiency? • Errors: How many errors do users make, how severe are these errors, and how easily can they recover from the errors? • Satisfaction/ Emotion: How pleasant is it to use the design? 10

1. 1 Background and Term No. 4 (Accessibility & Universal Design) • Accessibility is 1. 1 Background and Term No. 4 (Accessibility & Universal Design) • Accessibility is a general term used to describe the degree to which a product, device, service, or environment is available to as many people as possible (Accessibility is not to be confused with usability). • Accessibility is strongly related to universal design when the approach involves "direct access". This is about making things accessible to all people (whether they have a disability or not). An alternative is to provide "indirect access" by having the entity support the use of a person's assistive technology to achieve access (e. g. , screen readers). • Another dimension of accessibility is the ability to access information and services by minimizing the barriers of distance and cost as well as the usability of the interface. In many countries this has led to initiatives, laws and regulations that aim toward providing universal access to the internet and to phone systems at reasonable cost to citizens. 11

1. 2 Relations of concept of HCD No. 1 Technology Batch CUI Multi modal 1. 2 Relations of concept of HCD No. 1 Technology Batch CUI Multi modal GUI Ubiquitous RIA Design Method Traditional Design (Function Oriented) User experience Function Factor of IT system HCD: Human Centered Design UCD: User Centered Design User experience Design Usability Emotion Non - Function Accessibility 12

1. 2 Relations of concept of HCD No. 2 A model of the attributes 1. 2 Relations of concept of HCD No. 2 A model of the attributes of system acceptability Social acceptability Practical acceptability Usefulness Cost Compatibility Reliability Utility : function Usability Easy to learn Efficient to use Easy to remember Acceptability: Whether system is good enough to satisfy all the needs and requirements of users and stakeholders Few errors Subjectively pleasing 13

U 1. 3 Advantage of HCD No. 1 (V & V) Verification is test U 1. 3 Advantage of HCD No. 1 (V & V) Verification is test whether system and/or software meets the expressed requirements such as specifications. Validation is test whether system and/or software meets true user’s needs and requirements. Costumer’s satisfaction evaluated by developer Costumer’s satisfaction evaluated by customer 14

U V-Model and Human Centered Design Project Phase (Time) Acceptance Test User Requirements System U V-Model and Human Centered Design Project Phase (Time) Acceptance Test User Requirements System Test System Requirements Global (Basic) Design Integration Test Detail Design Component Test Programming Human Centered Design 15

U 1. 3 Advantage of HCD No. 2 (ROI: Return Of Investment) Total Cost U 1. 3 Advantage of HCD No. 2 (ROI: Return Of Investment) Total Cost Operation Development Traditional System with Good UI Cost Saving ・An Australian insurance company had annual savings of Aus$536, 023 from redesigning its application forms to make customer errors less likely. ・A major computer company save $41, 700 the first day the system was in use by making sing-on attempts faster for a security application. 16

U 1. 5 New Development Process and Method (Example) User Requirements Require ment Paper U 1. 5 New Development Process and Method (Example) User Requirements Require ment Paper Prototyping Require ment Sketchflow (Low-fi) Detail Design Global (Basic) Design Progra mming MS Visual Studio Screen MS Visual Studio Sketchflow (Hi-fi) MS Visual Studio Screen 17

1. 6 Traditional software development vs. human-centered development Traditional software development human-centered development Technology/ 1. 6 Traditional software development vs. human-centered development Traditional software development human-centered development Technology/ developer-driven User-driven Component focus Solution focus Focus on internal architecture Focus on external attributes (look and feel, interaction) Quality measured by product defects and performance (system quality) Quality defined by user satisfaction and performance (quality in use) Implementation prior to human validation Implementation of user-validated solution only Solutions are directed by functional requirements Understanding the context of use ( user, task, work environment) Nielsen, Jakob; Usability Engineering; San Francisco: Morgan Kaufmann Publishers, Inc. , 1993 18

Word 2003 vs. Word 2007 19 Word 2003 vs. Word 2007 19

1. 6 Traditional software development vs. human-centered development (Process ) Traditional HCD Survey of 1. 6 Traditional software development vs. human-centered development (Process ) Traditional HCD Survey of users’ opinion Survey of users’ behavior Definition of Functions Definition of Scenario and Task Feasibility of Technology Interface design based on functions and feasibility of technology Interface design based on Scenario and Task Implementation based on Interface Prototyping Iterative Design 20

U Heuristic Evaluation and Human Factor for UI 21 U Heuristic Evaluation and Human Factor for UI 21

Human-centered development (Process ) HCD Survey of users’ behavior Definition of Scenario and Task Human-centered development (Process ) HCD Survey of users’ behavior Definition of Scenario and Task Interface design based on Scenario and Task Implementation based on Interface Prototyping Iterative Design Heuristic Evaluation and Human Factor for UI as Theoretical and Technical knowledge and skill 22

Summary of Heuristic Evaluation 1) Simple and natural dialogs 2) Speak the user’s language Summary of Heuristic Evaluation 1) Simple and natural dialogs 2) Speak the user’s language 3) Minimize the user’s memory load 4) Consistency 5) Feedback 6) Clearly marked exits 7) Shortcuts: Accelerators 8) Good error messages 9) Prevent errors 10) Help and Documentation Evaluation Design Basic Principle of Design 23

2. 1 Simple and natural dialogs User interface should be simple User interface be 2. 1 Simple and natural dialogs User interface should be simple User interface be natural for users Factors Usage of color Layout and graphics Appropriate functions (less is better) Appropriate and enough information Understandable by users • Don’t over-use color • Make sure that the interface can be used without color • Try to use color only categorize, differentiate and highlight, not given information. • Grouping • Users can see the information at place where it is needed. • Customizing layout by users • Better design is a single screen with important information and less information to auxiliary screen • According operation and instruction, less is better • Extraneous information not only risks confusing the novice user, but also slows down the expert user. 24

MS-IE vs. Google-Chrome 25 MS-IE vs. Google-Chrome 25

2. 2. Minimize the user’s memory and cognitive load (No. 1) A good design 2. 2. Minimize the user’s memory and cognitive load (No. 1) A good design for users is that you can understand notice meaning of user interfaces naturally. Mapping and Metaphors Good user-oriented dialogue is to aim at good mappings between the computer display of information and user’s conceptual model of the information. Metaphors such as icons are a possible to map between the computer system and some reference system known to the users in the real world. (sometime unfortunately, metaphors may mislead users, or users’ understanding of the computer. ) • Ordered recall (users are allowed to freely associate an mention as many concepts as they can think of, with concepts that are mentioned close together assumed to be associated in the user’s mind) • Card sorting (each concepts is written on a card, and the user sort the cards into piles) <= Activity 26

Affordance Professor Don Norman: The Design of Everyday Things http: //www. youtube. com/watch? v=l Affordance Professor Don Norman: The Design of Everyday Things http: //www. youtube. com/watch? v=l 9 qrlan 611 I&feature=related Don Norman: The three ways that good design makes you happy http: //www. youtube. com/watch? v=Rl. QEo. Ja. LQRA&feature=related 27

Affordance Psychologist James J. Gibson originally defined affordances as all Affordance Psychologist James J. Gibson originally defined affordances as all "action possibilities" latent in the environment, objectively measurable and independent of the individual's ability to recognize them, but always in relation to the actor and therefore dependent on their capabilities. Norman's adaptation of the concept has seen a further shift of meaning, in which the term affordance is used as an uncountable noun, referring to the property of an object or system's action possibilities being easily discoverable, as in "this web page has good affordance, " or "this button needs more affordance. " Norman: Design of Everyday Things : Affordances • Perceived and actual properties of a thing, primarily those fundamental properties that determine just how the thing could possibly be used • Affordances provide strong clues to the operation of a thing - Knobs are for turning - Slots are for inserting things into • Provide a good conceptual model and make things visible 28

Design of Everyday Things Function Usage The User’s conceptual model The designer's conceptual model Design of Everyday Things Function Usage The User’s conceptual model The designer's conceptual model User Interface Visible part of a device/system (including the physical structure, the documentation, instructions, etc) http: //www. baddesigns. com/ If the system image doesn't make the design model clear, then the user will create a different model through their interaction. 29

2. 3. Minimize the user’s memory and cognitive load (No. 2) Clue for operation 2. 3. Minimize the user’s memory and cognitive load (No. 2) Clue for operation and default information Input date ( dd/mm/yyyy) e. g. 25/05/2011 Input date ( dd/mm/yyyy) 22 / 2 / 2010 2011 2012 2013 2014 30

Chunk and Magical number ± 7 The Magical Number Seven, Plus or Minus Two: Chunk and Magical number ± 7 The Magical Number Seven, Plus or Minus Two: Some Limits on Our Capacity for Processing Information" by the cognitive psychologist George A. Miller. It argues that the number of objects an average human can hold in working memory is 7 ± 2. Not only short time memory, but also other human information process have a similar limitation. Grid Print Save Insert Edit Past Display Zoom Help Load Window Font Tool Property 31

Chunk (or chunking) is grouping method to enlarge limitation of cognitive process. Menu File Chunk (or chunking) is grouping method to enlarge limitation of cognitive process. Menu File Edit Display Save Past Zoom Load Insert Grid Print Delete Property Help Font Chunk 32

Chunk of Screen Design Check chunking on real web site http: //edition. cnn. com/ Chunk of Screen Design Check chunking on real web site http: //edition. cnn. com/ 33

Gestalt laws of grouping: Chunking of Screen (1) The Principles of grouping (or Gestalt Gestalt laws of grouping: Chunking of Screen (1) The Principles of grouping (or Gestalt laws of grouping) are a set of principles in psychology, first proposed by Gestalt psychologists to account for the observation that humans naturally perceive objects as organized patterns and objects. (1) Law of Closure — The mind may experience elements it does not perceive through sensation, in order to complete a regular figure (2) Law of Similarity — The mind groups similar elements into collective entities or totalities. This similarity might depend on relationships of form, color, size, or brightness. (3) Law of Proximity — Spatial or temporal proximity of elements may induce the mind to perceive a collective or totality. 34

Gestalt laws of grouping: Method of Chunking of Screen (1) (4) Law of Symmetry Gestalt laws of grouping: Method of Chunking of Screen (1) (4) Law of Symmetry (Figure ground relationships)— Symmetrical images are perceived collectively, even in spite of distance. (5) Law of Continuity — The mind continues visual, auditory, and kinetic patterns. (6) Law of Common Fate — Elements with the same moving direction are perceived as a collective or unit 35

2. 4. Speak the user’s language • The terminology in user interfaces should be 2. 4. Speak the user’s language • The terminology in user interfaces should be based on the user’s language and not on system oriented terms. • User interfaces should used commonly used word, but the user group has its own specialized terminology, the user interfaces can use those specialized terms. • The user’s language also involves viewing interactions form the users’ perspective. • Good method to define the terms is to ask users what words and concepts the would like to use and see in the interface. Showing list and selecting by users is better method. 36

Category of Users and Indivisible User Difference Knowledge of Domain x Knowledgeable z Expertise Category of Users and Indivisible User Difference Knowledge of Domain x Knowledgeable z Expertise of the target system Expert Minimal Extensive Novice Ignorant y Computer Experience A Novice wants easy to learn, an expert wants efficiency of operation => Usually a system has short cut. User who has much computer experience can use command interface User who has enough knowledge of job domain doesn’t need detail explanation for task on a screen. Result of the usability evaluation is affected by individual taste 37

2. 5. Consistency is one of the most basic usability principles. If use know 2. 5. Consistency is one of the most basic usability principles. If use know that the same command or the same action will always have the same effect, they will fell more confident in using the system, and they will be encouraged to try out exploratory learning strategies because they will already have part of the knowledge needed to operate new part of the system. Consistency Operation ( Command & Menu) Layout & Format Message & Contents Faction & Action Past or related system 38

2. 6. Shortcuts: Accelerators Even thought it should be possible to operate a user 2. 6. Shortcuts: Accelerators Even thought it should be possible to operate a user interface with the knowledge of just a few general rules, it should also be possible for the experienced user to perform frequently used operations especially fast, using dialogue shortcuts. • Shortcuts • Function keys • Type-ahead, click-ahead • Macro • Command history • Expected operation by history • Default data setting based on history ( expected data list) • Customizing operation and shortcuts 39

Two operation modes for novices and experts All functions and operation Shortcut and command Two operation modes for novices and experts All functions and operation Shortcut and command for experts Functions for novice Additional instruction for novice 40

Trade-off between User and System focusing on expert user Usage Proficiency and Efficiency System Trade-off between User and System focusing on expert user Usage Proficiency and Efficiency System focusing on novice user Time Some user interfaces are only intended to be used by novice, in that user use only once or a few times. Ex. Reservation system of a ticket and register system for joining community or walk-up-use system like a guidance system in a museum. 41

2. 7. Feedback The system should continuously inform the user about what it is 2. 7. Feedback The system should continuously inform the user about what it is doing and how it is interpreting the user’s input. Feedback Normal Quick response: result of operation 0. 1 – 1 sec 0. 1 sec is desirable response time, only show the result of operation. Limit is 1 sec, but sometimes user lose the feeling of operating directly. Showing progress: auxiliary information 1 – 10 sec more than 10 sec Showing progress should be needed. Especially , long response time more then 10 sec should need feedback indicating when the computer to be done. Trouble Warning and minor error Fatal error (system failer) 42

2. 9. Good error messages Error messages should: • be phrased in clear language 2. 9. Good error messages Error messages should: • be phrased in clear language and avoid obscure statement. It should be possible for the user to understand the error message by itself without manuals. Don’t use technical terms or codes only programmers can understand Trap system error messages and change into appropriate messages for users; • be precise and concrete rather the vague or general. Ex “cannot open the test. exe, not found” is better than “cannot open the file”; • be constrictively help the user solve the problem. Idea of good message is to show users accomplish their tasks; • be polite and not intimidate user or put the blame explicitly user (users feel bad enough as it is when the make errors. ) 43

2. 10. Prevent Errors ( Human errors) Avoiding errors is better than good error 2. 10. Prevent Errors ( Human errors) Avoiding errors is better than good error messages Survey or expectation of errors • Experiences of previous or related system • Survey of user test and observation of users • Analysis of system error log Evaluation of errors • Impact (severity) and frequency (possibility) Preventing errors Simple and clear operation Single mode / Showing current mode Restriction of operation and inputting data Margins of operation and inputting data Showing expected result Confirmation of operation / double check Keeping motivation and caution Error recovery • Undo or cancel • Escape or exit 44

How to measure: Few and Noncatastrophic Errors • An error is defined as any How to measure: Few and Noncatastrophic Errors • An error is defined as any action that does not accomplish the desired goal, and the system error rate is measured by counting the number of such actions made by users while performing some specific task. Noncatastrophic Errors: Errors are corrected immediately and have no effect than to slow down the user’s operation Catastrophic Errors: Errors are not discovered nor resolved by users, that destroy user’s work. Usability Quality of System 45

2. 11. Clearly marked exits User do not like to feel trapped by the 2. 11. Clearly marked exits User do not like to feel trapped by the computer. In order to increase the user’s feeling of being in control of the dialogue, the system should offer the user an easy way out of as many situations as possible • Cancel button • Undo • Good navigation (back, Top) • Cancel during computer doing • Background process 46

3. 12. Help and Documentation Even thought it is preferable if a system is 3. 12. Help and Documentation Even thought it is preferable if a system is so easy to use that no further help or documentation is needed to supplement the user interface itself , but this goal cannot always be met. And existence of help and documentation does not reduce the usability requirements for the interface itself. • The fundamental truth about documentation is that most user simply do not read manuals. If user want to read the manual, then they are probably in some kind of panic and will need immediate help. Type Short reference cards and/or job aids. Tutorial and/or introductory manuals for learners. Traditional reference manuals for experts users. Media/Method Online help and manual Printed manual Hyperlink or auxiliary dialog Balloon Expected list Contents Process oriented Operation and/or command oriented Explanation of operation and/or command 47

Color At the perceptual (visual) level colors may be characterized in terms of hue, Color At the perceptual (visual) level colors may be characterized in terms of hue, value (lightness) and chrome (saturation) http: //www. create. uwe. ac. uk/hungary/hirschler 1. pdf 48

Color wheel/ Hue circle 1 4 3 2 1. Analogous color schemes are often Color wheel/ Hue circle 1 4 3 2 1. Analogous color schemes are often found in nature and are harmonious and pleasing to the eye. Choose one color to dominate, a second to support. The third color is used (along with black, white or gray) as an accent. 2. Complementary The high contrast of complementary colors creates a vibrant look especially when used at full saturation. This color scheme must be managed well so it is not jarring. Complementary colors are tricky to use in large doses, but work well when you want something to stand out. Complementary colors are really bad for text. 3. Split-Complementary This color scheme has the same strong visual contrast as the complementary color scheme, but has less tension. The split-complimentary color scheme is often a good choice for beginners, because it is difficult to mess up 4. Triadic color harmonies tend to be quite vibrant, even if you use pale or unsaturated versions of your hues. To use a triadic harmony successfully, the colors should be carefully balanced - let one color dominate and use the two others for accent. 49

Hue, Value (lightness) and Chrome (saturation) Title xxx xxx Same hue (210 blue), different Hue, Value (lightness) and Chrome (saturation) Title xxx xxx Same hue (210 blue), different value (lightness) and same chrome V: 20%, 85%, 95% Same hue (210 blue), deferent value (lightness) and different chrome V: 20%, V 85%C 50%, 95%C 50% Title xxx Different hue , same value 65% (lightness) and same chrome (50%) H: 195, 180, 210: Analogous 50

Color: Bender’s Recommendation 51 Color: Bender’s Recommendation 51

Tools for color design Color. Selector http: //www. fujitsu. com/global/accessibility/assistance/cs/ Color. Selector is a Tools for color design Color. Selector http: //www. fujitsu. com/global/accessibility/assistance/cs/ Color. Selector is a software for judging the legibility of background and text colors. Color. Doctor http: //www. fujitsu. com/global/accessibility/assistance/cd/ Color. Doctor is software that simulates the display content according to grayscale and color characteristics. Adobe Kuler http: //kuler. adobe. com/ 52

Activity Color design 53 Activity Color design 53

U Session 2 UI patterns and Tips How to make prototyping 54 U Session 2 UI patterns and Tips How to make prototyping 54

3. 1 Usability Slogans No. 1 (by Jakob Nielsen) 1) Your Best Guess Is 3. 1 Usability Slogans No. 1 (by Jakob Nielsen) 1) Your Best Guess Is Not Good Enough A basic reason for the existence of usability engineering is that it is not impossible to design an optimal user interface just by it your best try. Your design will be better if you work on the basis of an understanding of users and their tasks. 2) The User is Always Right The user interface developer needs to acquire a certain design to humility and acknowledge the need to modify the original design. 3) The User is Not Always Right Users often do not know what is good for them. Furthermore, users will often have divergent opinions when asked about details of user interface design. 4) User Are Not Designers The ideal solution to the usability question might be leave the design of the interface up to the individual users. Just provide sufficient customization flexibility, and all user can have exactly the interface the like. But studies have shown that users do net customize. 55

3. 1 Usability Slogans No. 2 (by Jakob Nielsen) 5) 6) 7) 8) Designers 3. 1 Usability Slogans No. 2 (by Jakob Nielsen) 5) 6) 7) 8) Designers Are Not Users Unfortunately system designers are different from users in several aspects including their general computer experience and their conceptual foundation of the design of the system. Vice Presidents Are Not User Vice president and other executives should realize that they are no more repetitive of the end users than the developer are. They are very different form the average users and their intuitions about what would make a great design may not accurate. Less is More One tempting solution to the user interface design problem might be to throw in any imaginable option or feature. Is it right? Wrong. Having fewer options will often mean better usability because the users can then concentrate on understanding those fewer options. Help Doesn’t Sometimes, online help and documentation doesn’t really help the users. A user-hostile interface does not get user-friendly even by the addition of a brilliant help system. 56

3. 1 Usability Slogans No. 3 (by Jakob Nielsen) 9) Detail Matter Unfortunately, usability 3. 1 Usability Slogans No. 3 (by Jakob Nielsen) 9) Detail Matter Unfortunately, usability often depend on minor interface details, which is why systematic usability engineering work is necessary to ferret out those details. 10)Usability Engineering IS Process Usability engineering is advice for activities to perform a part of the system development process, not direct result of design patterns. Note: This training lecture also explain the Process of Usability Engineering, not detail/concrete sample user interface. Bust session 2 gives some recourses of detail sample user interface. • Heuristic Evaluation = Basic Principle of Design • Guideline & Tips = Detail sample of Design 57

U Guideline and Standard of UI 58 U Guideline and Standard of UI 58

Human-centered development (Process ) HCD Survey of users’ behavior Definition of Scenario and Task Human-centered development (Process ) HCD Survey of users’ behavior Definition of Scenario and Task Interface design based on Scenario and Task Implementation based on Interface Prototyping Iterative Design Guideline and Standard of UI 59

Standard of UI National and International Standards ISO 13407: Human-centred design processes for interactive Standard of UI National and International Standards ISO 13407: Human-centred design processes for interactive systems ISO 16071: Guidance on accessibility for human-computer interfacesuman - centred design processes for interactive systems Usability. gov (US) ISO 9241: Ergonomics of human-system interaction Web Content Accessibility Guidelines (W 3 C) Industry / Vender standards Windows User Experience Interaction Guidelines (Microsoft) Oracle Browser Look and Feel (BLAF) Guidelines (Oracle) Introduction to Apple Human Interface Guidelines (Apple) Sun Web Application Guidelines (Sun) 60

Approaches to achieving usability in international standards Quality Assurance Product Quality Process quality organizational Approaches to achieving usability in international standards Quality Assurance Product Quality Process quality organizational capability effect of the product Product Development process Life cycle process ISO 9126 ISO 9241 -11 ISO 9126 ISO 9241 parts 10, 12 -17 ISO 16071 ISO 13407 INUSE UMM: Usability Mature Model 61

Resources for Standard of UI • Usability. gov (US) http: //www. usability. gov/ • Resources for Standard of UI • Usability. gov (US) http: //www. usability. gov/ • Windows User Experience Interaction Guidelines (Microsoft) http: //msdn. microsoft. com/en-us/library/aa 511258. aspx • Oracle Browser Look and Feel (BLAF) Guidelines (Oracle) http: //download. oracle. com/tech/blaf/index. html • Introduction to Apple Human Interface Guidelines (Apple) http: //developer. apple. com/library/mac/#documentation/User. Experience/Conc eptual/Apple. HIGuidelines/XHIGIntro. html • Sun Web Application Guidelines (Sun) http: //developers. sun. com/docs/web-app-guidelines/uispec 4_0/ • Web Content Accessibility Guidelines (W 3 C) http: //www. w 3. org/TR/WAI-WEBCONTENT/ • i. Phones Human Interface Guidelines http: //www. docstoc. com/docs/418559/i. Phones-Human-Interface-Guidelines • GNOME Human Interface Guidelines http: //library. gnome. org/devel/hig-book/stable/index. html. en 62

In-House Standard National and International Standards Industry / Vender standards Vender Guideline Vender API/ In-House Standard National and International Standards Industry / Vender standards Vender Guideline Vender API/ Library, Development Tool In-House Standard In-House Guideline Project/ Product Standard Project/ Product Guideline UI pattern UI Component Disadvantage: Defining In-house standard needs initial cost. The standards reduce flexibility in design. The standards should follow new technology. 63

ISO 13407: Human centred design process for interactive systems 1. Plan the human centered ISO 13407: Human centred design process for interactive systems 1. Plan the human centered process Meets requirements 2. Specify the context of use 5. Evaluate designs against user requirement 3. Specify user and organizational requirements 4. Produce design solutions 64

U V-Model and HCD Cycle Survey Evaluate User Requirements Design Make Survey Evaluate System U V-Model and HCD Cycle Survey Evaluate User Requirements Design Make Survey Evaluate System Requirements Design Make Survey Evaluate Global (Basic) Design Make Survey Evaluate Detail Design Make Programming 65

U UI patterns and Tips 66 U UI patterns and Tips 66

Human-centered development (Process ) HCD Survey of users’ behavior Definition of Scenario and Task Human-centered development (Process ) HCD Survey of users’ behavior Definition of Scenario and Task Interface design based on Scenario and Task Implementation based on Interface Guideline and Standard of UI Prototyping Iterative Design UI patterns and Tips 67

The Main Interaction Styles Interaction Style Characteristics Batch Does not require user intervention. Batch The Main Interaction Styles Interaction Style Characteristics Batch Does not require user intervention. Batch processing and e-mail server. Command line The user types in commands for the program, usually one at a time. The program executes the commands and returns feedback. Question and answer The application asks questions and when the user provide by answers all necessary data, the application gives the results. Menus Possible user actions are listed on the screen and the user can select one of them. Form filing. The user type the data in specific fields, similar to the fields on a paper fill-in form. Many office and database applications use this style. Function keys and short-cut The interaction is done by a set of special keys or key combinations for different operations. Graphical direct manipulation. The objects used in application are graphically represented on the screen and the user can manipulate them directly by pointing, clicking, dragging, typing, etc. Most windowing systems, or GUI's (Graphical User Interface) are based on graphical direct manipulation. Non-command The user can concentrate on the domain and need not control computers. Computers monitor and interpret user’ action. Virtual Reality Natural Language Ideally, allows unconstrained input to handle frequently changing problems. 68

U Patterns: relatively new approach In essence, patterns are structural and behavioral features that U Patterns: relatively new approach In essence, patterns are structural and behavioral features that improve the "habitability" of something -- a user interface, a Web site, an object-oriented program, or even a building. They make things more usable, easier to understand, or more beautiful; they make tools more ready-to-hand. As such, patterns can be a description of best practices within a given design domain. They capture common solutions to design tensions (usually called "forces" in pattern literature) and thus, by definition, are not novel. They aren't off-the-shelf components; each implementation of a pattern is a little different from every other. They aren't simple rules or heuristics either. And they won't walk you through an entire set of design decisions -- if you're looking for a complete step-by-step description of how to design a UI, this isn't the place! By Jenifer Tidwell UI Patterns and Techniques http: //time-tripper. com/uipatterns/ Designing Intefaces http: //designinginterfaces. com/ Following patterns also come form these websites 69

1) Basic pattern: Clear Entry Points • What: Present only a few entry points 1) Basic pattern: Clear Entry Points • What: Present only a few entry points into the interfaces; make them taskoriented and descriptive. • Use when: You're designing a task-based application, or any other application used largely by first-time or infrequent users. It's also helpful for some web sites. But if the application's purpose is clear to basically everyone who starts it, and if most users might be irritated by one more navigation step than is necessary (like applications designed for intermediate-to-expert users), then don't use it. 70

2) Basic pattern: Global Navigation • What: Using a small section of every page, 2) Basic pattern: Global Navigation • What: Using a small section of every page, show a consistent set of links or buttons that take the user to key sections of the site or application. • Use when: You build a large web site, or an application with several separate sections or tools. In either case, users are likely to want to move directly from one section to another. You have plenty of space to work with, and you don't mind having extra elements on each page. 71

3) Basic pattern: Visual Framework • What: Design each page to use the same 3) Basic pattern: Visual Framework • What: Design each page to use the same basic layout, colors, and stylistic elements, but give the design enough flexibility to handle varying page content. • Use when: You're building a Web site with several pages, or a UI with multiple windows -- in other words, almost any complex software. You want it to "hang together" and look like one thing, deliberately designed; it should be easy to use and navigate. 72

4) Basic pattern: Center Stage • What: Put the most important part of the 4) Basic pattern: Center Stage • What: Put the most important part of the UI into the largest subsection of the page or window; cluster secondary tools and content around it in smaller panels. • Use when: The page's primary job is to show coherent information to the user, let him edit a document, or enable him to perform a certain task. Most applications can use Center Stage -- tables and spreadsheets, forms, web pages, and graphical editors all qualify. 73

5) Basic pattern: Closable Panels • What: Put sections of content onto separate panels, 5) Basic pattern: Closable Panels • What: Put sections of content onto separate panels, and let the user open and close each of them separately from the others. • Use when: There's too much stuff to present on the page, but you want it all only one click away. The content is divisible into clearly-named sections, as with Titled Sections and Card Stack. Specifically, this is a useful concrete implementation of Extras On Demand. If you've organized your content this way, you may want to use some form of Closable Panel to hold those extras. 74

6) Basic pattern: Card Stack • What: Put sections of content onto separate panels 6) Basic pattern: Card Stack • What: Put sections of content onto separate panels or "cards, " and stack them up so only one is visible at a time; use tabs or other devices to give users access to them. • Use when: There's too much material on the page. A lot of controls or texts are spread across the UI, without benefit of a very rigid structure (like a Property Sheet); the user's attention becomes distracted. You can group the content into Titled Sections, but they would be too big to fit on the page all at once. Finally -- and this is important -- users don't need to see more than one section at a time. 75

7) Basic pattern: Cascading Lists What: Express a hierarchy by showing selectable lists of 7) Basic pattern: Cascading Lists What: Express a hierarchy by showing selectable lists of the items in each hierarchy level. Selection of any item shows that item's children in the next list. Use when: Your data is tree-shaped. The hierarchy might be deep, and it might have many items on each level. A tree view (outline) would work, but the user would scroll up and down a lot to see all the items, and he wouldn't get a good overview of the items at higher levels in the hierarchy. 76

RIA UI 1. Real world and visual information http: //www. m-system. co. jp/mstoday/plan/interview/2006/11/index. html RIA UI 1. Real world and visual information http: //www. m-system. co. jp/mstoday/plan/interview/2006/11/index. html 2. A few screen transition 77

Other Sample of UI patterns • UI-Patterns. com http: //ui-patterns. com/ • Yahoo! Design Other Sample of UI patterns • UI-Patterns. com http: //ui-patterns. com/ • Yahoo! Design Pattern Library http: //developer. yahoo. com/ypatterns/ • Interaction Design Pattern Library http: //www. welie. com/patterns/ 78

U How to make a prototype (No. 1) 79 U How to make a prototype (No. 1) 79

Human-centered development (Process ) HCD Survey of users’ behavior Definition of Scenario and Task Human-centered development (Process ) HCD Survey of users’ behavior Definition of Scenario and Task Interface design based on Scenario and Task Implementation based on Interface Prototyping Iterative Design How to make a prototype (No. 1) As Overview and paper prototype 80

Prototyping The entire idea behind prototyping is to save on the time and cost Prototyping The entire idea behind prototyping is to save on the time and cost to develop something that can be tested with real users. Early usability evaluation can be based on prototypes of the final systems. Deferent functions or features Top or Start Horizontal prototype Vertical prototype Scenario Model Full System Level or sequence of each function Bottom or end Two dimensions of prototyping 81

U Why Do We Prototype? • Get feedback on our design faster and save U Why Do We Prototype? • Get feedback on our design faster and save money • Experiment with alternative designs • Fix problems before code is written • Keep the design centered on the customer 82

Type of Prototype Type of prototype Function Appearance Usability Cost Simple sketch or Story Type of Prototype Type of prototype Function Appearance Usability Cost Simple sketch or Story board Low None Low Paper Prototype Low. Medium Low – Midium Low Prototype by Office Tools (PPT, HTML) Low. Medium Low - High Low Medium Prototype by design Tools (Illustrator) Low Medium – High Low CAUSE Tool (Prototyping Tool) Low- High Low – High Low - High Low Medium Production prototype (Program) High CAUSE : Computer-Aided Usability Engineering High-fidelity: prototypes look like the final product Low-fidelity: Medium High 83

U What is paper prototyping? stream. cc. gt. atl. ga. us/Power. Points/Landay/Berkeley/low-fidelity. ppt 84 U What is paper prototyping? stream. cc. gt. atl. ga. us/Power. Points/Landay/Berkeley/low-fidelity. ppt 84

What is paper prototyping ( How to conduct testing) “The Wizard of OZ” the What is paper prototyping ( How to conduct testing) “The Wizard of OZ” the man behind the curtain http: //www. youtube. com/watch? v=Gr. V 2 SZu. RPv 0 http: //www. youtube. com/watch? v=Atf. WM 2 j. RS 2 w http: //www. youtube. com/watch? v=6 Tby. Xq 3 XHSc 85

U Advantage of paper prototyping • User can concentrate on function, not detail design U Advantage of paper prototyping • User can concentrate on function, not detail design such as position of object and color. • low cost and tasking not long time. • Paper prototyping doesn’t need special design ability such as programmer and graphic designer, needs kindergarten implementation skills. • Paper prototyping support flexible interaction. • Paper prototyping can simulate real program. 86

U The Basic Materials for paper prototyping Minimum • Paper • Tape, Glue Stick, U The Basic Materials for paper prototyping Minimum • Paper • Tape, Glue Stick, correction tape • Pens & markers • Scissors, X-acto knives • White out Desirable • Paper 30 cm x 40 cm • Restickable (Glue and peel ) Glue Stick • Post it, Index card (5 x 8 in) • invisible and writable tape • White out tape • Overhead transparencies 87

Process of paper prototyping (example) Kickoff meeting Discuss goals, risks, and concerns. Agree on Process of paper prototyping (example) Kickoff meeting Discuss goals, risks, and concerns. Agree on user profile Determine “core team”. Set schedule 3 hours User recruitment Find people who match the user profile and schedule them 2 - to 3 -week before Task design Create the tasks to be used in usability testing 3 -5 hours Prototype creation and walkthroughs List interface elements that are needed to _ to 5 days total support the tasks Split up the work Hold periodic walkthroughs Formal run-through without real users prior to usability testing Usability testing and iterative refinement Perform usability tests (most last 1 -2 hours) List issues after each test Revise the prototype before the next test 2 days total Prioritizing issues and action plan Prioritize unresolved issues Discuss top issues and possible solutions Create action plan to address issues Track issues 3 hours Communication of results 1 -2 team members (often, but not necessarily, the usability specialists) 1 hour to several days depending on the activities 88

Activity Paper prototyping 89 Activity Paper prototyping 89

U Session 3 Usability test plan and how to conduct 90 U Session 3 Usability test plan and how to conduct 90

U Method for Analysis, Test and evaluation of UI 91 U Method for Analysis, Test and evaluation of UI 91

Human-centered development (Process ) HCD Survey of users’ behavior Definition of Scenario and Task Human-centered development (Process ) HCD Survey of users’ behavior Definition of Scenario and Task Interface design based on Scenario and Task Implementation based on Interface Method for Analysis, Test and evaluation of UI Prototyping Iterative Design 92

Overview of Testing and evaluation method Category User-based (Observation in real work environment) Advantage Overview of Testing and evaluation method Category User-based (Observation in real work environment) Advantage Most realistic estimate of usability Can give clear record of important problems Disadvantage Time consuming Costly for large sample of users Requires prototype to occur Expert-based Cheap (Review and Heuristic Fast evaluation) Expert-variability unduly affects outcome May overestimate true number of problems Model-based ( Usability test in a Lab) Measures only one component of usability Limited task applicability Provides rigorous estimate of usability criterion Can be performed on interface specification 93

Survey and Analysis Methods for Usability Design (1) Method Name Users needed Main Advantage Survey and Analysis Methods for Usability Design (1) Method Name Users needed Main Advantage Main Disadvantage Heuristic evaluation None Find individual usability problem Doesn’t involve real users. No finding from the viewpoint of users. Usability Testing 3 -10 Designed test for evaluation with real users Need cost and time. Performance measure Al least 10 Results easy to compare. Objective data. Doesn’t fine individual usability problem. Thinking aloud 3 -5 Pinpoints user misconception. Cheap test Unnatural for users. Observation 3 or more Shows real user’s work. Suggest functions and features. Appointments hard to setup. No experimenter control Questionnair es At least 30 Finds subjective user performance. Pilot work needed Interviews 5 Flexible, find details Time consuming. Hard to analyze. Focus groups 6 -9 per group Spontaneous reactions and group dynamics. Hoard to analyze. Logging actual use At least 20 Find highly used and errors. continuously Analysis program needed. User feedback Over 100 Tracks changed in user requirement and views Special organization needed. 94

Survey and Analysis Methods for Usability Design (2) Method Name Lifecycle stage Analysis Design Survey and Analysis Methods for Usability Design (2) Method Name Lifecycle stage Analysis Design Heuristic evaluation Proto, Iterative Followup Performance measure Competi tive Thinking aloud X Task Logging actual use User feedback Detail X X X Task Focus groups Overall X Task Interviews Summat ive X Task Questionnair es Formati ve X X Proto Iterative Observation Target X Proto, Iterative Usability Testing Final Test Type X X X Proto X X X X 95

Determining the Number of Evaluators by Jakob Nielsen http: //www. useit. com/papers/heuristic_evaluation. html 96 Determining the Number of Evaluators by Jakob Nielsen http: //www. useit. com/papers/heuristic_evaluation. html 96

How to measure: Easy to learn & Easy to remember • Learnability is the How to measure: Easy to learn & Easy to remember • Learnability is the most fundamental usability attribute. Initial case of learning I probably the easiest of the usability attribute to measure. The most common way to express the specified level of proficiency is simply to state that the users have to be able complete a certain task successfully. • Casual users are third major category of users besides novices and experts users. Casual use is typically seen for utility program that are only used under exceptional circumstances, for supplementary programs and for programs used at long intervals, such as a program for making a quarterly report. Usage Proficiency and Efficiency System focusing on expert user How long System focusing on novice user How complete 97 Time

How to measure: Efficiency • A typical way to measure efficiency of use is How to measure: Efficiency • A typical way to measure efficiency of use is thus to decide on some definitions of expertise, to get a representative sample of users with that expertise, and to measure the time it takes these users to perform some typical test tasks. definitions of expertise System focusing on expert user Usage Proficiency and Efficiency System focusing on novice user Time 98

Heuristic Evaluation 1) Simple and natural dialogs 2) Speak the user’s language 3) Minimize Heuristic Evaluation 1) Simple and natural dialogs 2) Speak the user’s language 3) Minimize the user’s memory load 4) Consistency 5) Feedback 6) Clearly marked exits 7) Shortcuts: Accelerators 8) Good error messages 9) Prevent errors 10) Help and Documentation 99

(2) Process of Heuristic Evaluation Getting Ready (Project Lead) Evaluating the system (each Evaluator) (2) Process of Heuristic Evaluation Getting Ready (Project Lead) Evaluating the system (each Evaluator) Analyzing the results (group activity) Reporting the results (Team Leader) Debriefing (Team Leader) • Identify and define the usability principles (heuristics) • Select your evaluation team. • Schedule locations, days, and times • Prepare or compile materials • Review the materials with the system design. Perform the user actions that you feel would be taken to perform the user tasks. • Identify and list any areas of the system that you feel are counter to the heuristics. • Review each of the concerns noted by each of the evaluators. • Assign an severity level for each grouped concern based on the impact to the end user • Determine recommendations to fix the problem. Make sure each recommendation links the heuristic and a design principle. • Compile the results of the group meeting of the evaluators. • Report all sources, purposes, techniques, procedures, and findings in a format that is easy to read and understand. . • Have your report reviewed by another team member, and approved by team coach. • Focus on the major usability concerns and possible solutions. • Highlight the positive attributes concerning the design. • Follow up with the Project Team Lead as necessary 100

(3) Define Usability Principle (Heuristics) • Ten Usability Heuristics by Jakob Nielsen http: //www. (3) Define Usability Principle (Heuristics) • Ten Usability Heuristics by Jakob Nielsen http: //www. useit. com/papers/heuristic/ Learn More at the websites • Bruce "Tog" Tognazzini's list of basic principles for interface design. http: //www. asktog. com/basics/first. Principles. html • Examples of the 10 heuristics in Web applications. http: //designingwebinterfaces. com/6 -tips-for-a-great-flex-ux-part-5 • Full set of 2, 397 usability guidelines (across multiple reports) http: //www. nngroup. com/reports/ 101

(4) Some Ideas for Heuristic Evaluation • Typically, a heuristic evaluation session for an (4) Some Ideas for Heuristic Evaluation • Typically, a heuristic evaluation session for an individual evaluator takes one or two hours, longer sessions might be completed with a substantial number of dialogue elements. • Heuristic evaluation is performed by having each individual evaluator inspect the interface alone in order to ensure independent and unbiased evaluation. • Evaluator can provided hints on using and improving the interface. • Formation of evaluation team Experts both domain and usability > experts of domain >> novice 102

Usability Testing What is Usability Testing? • A way to evaluate the interface with Usability Testing What is Usability Testing? • A way to evaluate the interface with real users. • Can be done in a lab or in their environment. • Can be performed on paper prototypes as well as implemented systems. How? • Give users representative tasks to complete. • Watch for where the interface does not support their task completion. • Identify changes to be made to the interface to support the user. 103

(1) Usability Lab. http: //www. hq. nasa. gov/pao/p ortal/usability/overview/overvie w_where. htm Record of Usability (1) Usability Lab. http: //www. hq. nasa. gov/pao/p ortal/usability/overview/overvie w_where. htm Record of Usability Testing http: //www. youtube. com/watch? v=SFw. U_rv. MBa. E 104

(2) Usability Test Plan • The goal of the test: What do you want (2) Usability Test Plan • The goal of the test: What do you want to achieve? • Where and when will the test take place? • Test budget • What kind of prototype and/or program will be needed for the test? • Who will become the experimenters for the test? • Who are test users and how do you get them? • What test tasks will the users be asked to perform? • What data is going to be collected, and how will it be analyzed? 105

(3) Test Tasks • The basic rule for test tasks is that they should (3) Test Tasks • The basic rule for test tasks is that they should be chosen to be as representative as possible of the uses to which the system will eventually be put in the field. • The tasks need to be small enough to be completed within the time limits of the user test. • Test tasks should normally be given to the users in writing ( usually one page) • The test tasks can be used to increase the user’s confidence. The very first test task should be simple in order to guarantee the user an early success experiment. 106

(4) Stage of Usability Testing on the Test day Preparation Introduction Running the Test (4) Stage of Usability Testing on the Test day Preparation Introduction Running the Test Debriefing • Make sure that the test room is ready for experiment and that computer and software or another prototyping materials are ready. Experimenter should explain: • Purpose of the test. • Experiment doesn’t evaluate users. • Video an audio recording would be used only for analysis of the interface. • User may stop at any time. • The experimenter should normally refrain form interacting with the user. • The main exception from the rule that users should not be helped is when user is clearly stuck and is getting unhappy with the situation. • User is asked to fill in any subjective satisfaction questionnaires. • The experimenter can also use the debriefing to ask users for further comments about events during the test that were hard for the experimenter to understand. 107

Performance measure (1) • Performance measure is to assess whether usability goals have been Performance measure (1) • Performance measure is to assess whether usability goals have been achieved and is almost always measured by having group of test users perform a predefined set of test tasks while collecting time and error data. • Some present examples are to have experimenter measure it by stopwatch, to have user report the time themselves in a diary and to record user operations. Goal: Usability Comportment: Learnability Comportment: Efficiency of use Quantification: Average time needed to perform the five specific tasks. Measurement Method: User brought to lab, given list of the tasks, and performs them without help. Data collection technique: Stopwatch: (With rules for when to start and stop the watch) Example of Performance measure 108

Performance measure (2) Typical quantifiable usability measurements • The time users take to complete Performance measure (2) Typical quantifiable usability measurements • The time users take to complete specific tasks. • The number of tasks within a give time limit. • The number of user errors. • The time spent recovering from errors. • The number of commands or other features that were utilizing by the users. • The number of commands or other features that were never used by the users. • The frequency of use of manuals and/or the help system. • How frequently the manuals and/or help system solved the user’s problem. • The number of times the user express clear frustration ( or clear joy) • The number of times the user had to work around an unsolvable problem. • The amount of “dead” time when the user is not interacting with the system. 109

Thinking aloud may be the single most valuable usability engineering method. Basically, a thinking-aloud Thinking aloud may be the single most valuable usability engineering method. Basically, a thinking-aloud test involves having test subject use the system while continuously thinking out loud. By verbalizing their thoughts, the test users enable developers/designers to understand how they view the computer system and their misconceptions. Note: • Thinking aloud may also give a false impression of the cause of usability problems if too much weight is given to the users’ won “theories” of what caused trouble and what would help. • Thinking aloud seems very unnatural to most people, and some test users have great difficulties in keeping up both operation and speaking. 110

Observation • Visiting the users to observe them work is and extremely important usability Observation • Visiting the users to observe them work is and extremely important usability method both for the task analysis and for true filed usability. • One advantage of observing users doing their won tasks is that one often find they use software in unexpected way that one would not have sought to test in a planed laboratory experiments. • When conducting an observation, the observer should stay quiet most time. The goal is to become virtually invisible to the users so that they will perform work normally. 111

Questionnaires and interview • Questionnaire and interviews are useful methods for studding how users Questionnaires and interview • Questionnaire and interviews are useful methods for studding how users use system and what features they particularly like or dislike. They do not study the user interface itself but users’ opinions about the user interface [ Method of the questionnaire No. 1 A Likert scale] is a psychometric scale that specifies level of agreement to a statement. Example: Please indicate the degree to which you agree or disagree with the following statements about the system (on 1 -5 scale for each statement) 1. It was very easy to learn how to use this system. 2. Using this system was a very frustrating experience. 3. I feel that this system allows me to achieve very high productivity. …. . 112

How to measure: Subjective Satisfaction (No. 2) [ Method of the questionnaire No. 2 How to measure: Subjective Satisfaction (No. 2) [ Method of the questionnaire No. 2 SD (Semantic differential) Method] is a type of a rating scale designed to measure the connotative meaning of objects, events, and concepts. The connotations are used to derive the attitude towards the given object, event or concept. . Example: Please mark the position that best reflect your impression of this system Pleasing 5 4 3 2 1 Irritating Complete 5 4 3 2 1 Incomplete Cooperative 5 4 3 2 1 Uncooperative Simple 5 4 3 2 1 Complicated Fast to use 5 4 3 2 1 Slow to use Safe 5 4 3 2 1 Unsafe 113

Satisfaction questionnaires Overall satisfaction: SUS http: //www. usabilitynet. org//trump/documents/Suschapt. doc SUS (System Usability Scale) Satisfaction questionnaires Overall satisfaction: SUS http: //www. usabilitynet. org//trump/documents/Suschapt. doc SUS (System Usability Scale) is a 10 -item questionnaire that gives an overview of satisfaction with software. It was developed by John Brooke, and is freely available for use providing acknowledgement is made of the source. Nigel Bevan is collecting data for norms for SUS. Satisfaction profile: SUMI http: //www. ucc. ie/hfrg/questionnaires/sumi/ SUMI (Software Usability Measurement Inventory) is a 50 item questionnaire that measures five aspects of user satisfaction (Likability, Efficiency, Helpfulness, Control and Learnability), and scores them against expected industry norms. It can be purchased from HFRG. The INUSE Handbook explains how to use SUMI. User interface satisfaction: QUIS http: //www. lap. umd. edu/QUIS/index. html/ QUIS (Questionnaire for User Interaction Satisfaction) is similar to SUMI, but measures attitude towards eleven interface factors (screen factors, terminology and system feedback, learning factors, system capabilities, technical manuals, on-line tutorials, multimedia, voice recognition, virtual environments, internet access, and software installation). It does not have industry norms. QUIS can be purchased from the University of Maryland. 114

Questions of SUS 1. I think that I would like to use this system Questions of SUS 1. I think that I would like to use this system frequently 2. I found the system unnecessarily complex 3. I thought the system was easy to use 4. I think that I would need the support of a technical person to be able to use this system 5. I found the various functions in this system were well integrated 6. I thought there was too much inconsistency in this system 7. I would imagine that most people would learn to use this system very quickly 8. I found the system very cumbersome to use 9. I felt very confident using the system 10. I needed to learn a lot of things before I could get going with this system 115

Logging actual use Logging the users’ actual use of the system is particularly useful Logging actual use Logging the users’ actual use of the system is particularly useful because it shows how user perform their actual work and because it is easy to automatically collect data from a large number of users. Typical logging data: • Frequency of use of command other system feature. • Time users use specific command other system feature. • Type and Frequency of errors • Frequency of use online help • Complete user operation and/or transcripts • Transition of menu and/or screen 116

User feedback Advantages: • It is initialed by the users, so it shows their User feedback Advantages: • It is initialed by the users, so it shows their immediate and pressing concerns. • It is ongoing process without special efforts to collect it. • It will quickly show any changes in user’s needs, circumstances, or opinions. Measures to collect feedback • Records of helpdesk and service desk • Contact functions of the system • Specific mail address • Discussion forum 117

Activity Usability testing by using paper prototype 118 Activity Usability testing by using paper prototype 118

Activity ( Heuristic Evaluation ) 119 Activity ( Heuristic Evaluation ) 119

U Session 4 Process and Method of UCD, Methods for Human Centered Design 120 U Session 4 Process and Method of UCD, Methods for Human Centered Design 120

U Outline of UI Design & Human Centered Design 121 U Outline of UI Design & Human Centered Design 121

Easy, but Powerful methods for Usability Engineering 1) User and Task Observation The first Easy, but Powerful methods for Usability Engineering 1) User and Task Observation The first step in the usability process is to study intended users and their tasks. 2) Scenarios (Simple prototyping) Scenarios are an especially cheap kind of prototype. Scenarios can be implemented as paper mock-ups. 3) Simplified thinking aloud While Test users use the system for a given set of tasks, they are asked to “think out loud”. Designers can observe not just what users are doing, but also why they are using. 4) Heuristic evaluation Current collection of usability guidelines have on the order of a thousand rules to follow and are seen as intimating by developers. The heuristic evaluation designed by Jakob Nielsen is a small set of broader heuristic such as the basic usability principles ( see next slid). 122

U 4. Process of UI & Human Centered Design 123 U 4. Process of UI & Human Centered Design 123

Human-centered development (Process ) HCD Survey of users’ behavior Definition of Scenario and Task Human-centered development (Process ) HCD Survey of users’ behavior Definition of Scenario and Task Interface design based on Scenario and Task Implementation based on Interface Process of UI & Human Centered Design Prototyping Iterative Design 124

Stage of the Usability engineering lifecycle model. User Analysis (Know the User) Individual User Stage of the Usability engineering lifecycle model. User Analysis (Know the User) Individual User Characteristics User’s current and desired tasks Functional analysis Evaluation for users and tasks Competitive analysis Setting usability goals Coordinating the total interface Parallel design Participatory design Apply guideline and heuristic analysis Prototyping Empirical testing / Interface evaluation Iterative Design General development and testing Follow-up Studies of Installed System 125

1) User Analysis (Know the User) (No. 1) “Know the User” I the most 1) User Analysis (Know the User) (No. 1) “Know the User” I the most basic of usability guideline and individual user characteristics and variability in tasks are the two factors with largest impact on usability, so they need to be studied carefully. User is not only operators, but also system management engineers and user whose works is affected by output in some way. Individual User Characteristics At first, It is necessary to know the class of people who will be using the system. By knowing the users’ work experience, educational level, age, previous computer experience, and so on, it is possible to anticipate their learning difficulty and better set for the complexity of the user interface. A great deal of the information needed characterize indivisual users may come from market analysis or from the observational studies on the task analysis. 126

1) User Analysis (Know the User) (No. 2) Task analysis A task analysis is 1) User Analysis (Know the User) (No. 2) Task analysis A task analysis is essential as early input t system design. The users’ overall goals should be studied as well as how they currently approach the task, their information needs, and how they deal with exceptional circumstances or emergencies. The users’ model of the task should be identified, since it can be used as a source for metaphors for user interface. A typical outcome of a task analysis is list of all things; • Users want to accomplish with the system( the goals) • All the information they will need to achieve theirs goals • The steps that need to be performed and interdependencies between these steps. • All the various outcomes and report • The criteria used to determine the quality and acceptability of these results • The communication needs of the users as they exchange information with others while performing that task or preparing to do so. 127

1) User Analysis (Know the User) (No. 3) Functions = Tasks = Tools/ method 1) User Analysis (Know the User) (No. 3) Functions = Tasks = Tools/ method Procedure Functions analysis Current Tasks Goals Desirable Tasks New (Future) Tasks users are thinking are sometimes not appropriate to realize goals Current Functions User New (Future) Functions There is a limit to implement functions by current technology Current and/or old functions are not appropriate from the view point of new technology. 128

2) Competitive analysis A prototyping is an important part of the usability process, and 2) Competitive analysis A prototyping is an important part of the usability process, and existing (competing) products are often best products we can get of our products. If several competing products are available for analysis, one can furthermore perform a comparative analysis of their differing approaches to the various interface design issues for the kind of product being studied. Designers analysis the competitive products Designers observe how user operate and evaluate the competitive products 129

3) Setting usability goals Usability I not a one-dimensional attribute of a system. Usability 3) Setting usability goals Usability I not a one-dimensional attribute of a system. Usability compromise several component , such as easy to learn, a few error, efficiency …, that can sometimes conflict. The different usability parameters can be operationalized and expressed in measurable ways. Before starting the design of the UI, it is important to discuss the usability metrics of interest to the project and to specify the goals of the user interface in terms of measured usability. Financial Impact Analysis At about the same time as usability goals are specified, it is a good idea to make an analysis of the financial impact of the usability of the system. The analysis involves: • Estimation of number of users; • Their loaded salaries or other costs; • Approximate time they will be using the system. Example: number of errors per one hour using by users Good Exceeds 0 / Hour Optimal Target Unacceptable Minimum 2 / Hour 1 / Hour Planned 3 / Hour current 130

4) Parallel design Original Product Concept Parallel Design versions Diversified Parallel Design For experts 4) Parallel design Original Product Concept Parallel Design versions Diversified Parallel Design For experts For novice Iterative design versions Released version For efficiency Iterative design versions Released version 131

5) Participatory design User Analysis Task Analysis Function Analysis Developer cannot know the users 5) Participatory design User Analysis Task Analysis Function Analysis Developer cannot know the users sufficiency well to answer all issues that come up in doing design Users often don’t what they want or what they need Design and Prototyping Users should be involved in the design process through regular meeting between designers and users. User is not designer. They are very food at reacting to concrete designs they do not like or that will not work in practice. Designer should show a prototyping to users 132

6) Coordinating the total interface Consistency Coordination Some centralized authority to coordinate the various 6) Coordinating the total interface Consistency Coordination Some centralized authority to coordinate the various aspects of interface ( small project = person, big project = committee) Interface standards / common understanding of what user interface should be like Prototyping developed by following the interface standards Code sharing and library of interface Standard Guideline by IT manufactures and associations • General guideline • Category guideline • Product-specific guideline 133

7) Prototyping The entire idea behind prototyping is to save on the time and 7) Prototyping The entire idea behind prototyping is to save on the time and cost to develop something that can be tested with real users. Early usability evaluation can be based on prototypes of the final systems. Deferent functions or features Top or Start Horizontal prototype Vertical prototype Scenario Model Full System Level or sequence of each function Bottom or end Two dimensions of prototyping 134

8) Empirical testing / Interface evaluation Real system of Interface Yes Real users involved 8) Empirical testing / Interface evaluation Real system of Interface Yes Real users involved Yes No Best Observation Heuristic Evaluation Figure a. Classification of evaluation method No Reviewing a specifications documents Prototyping Proportion of users experiencing the problem ( Possibility) Few Impact of the problem Many Small Low severity Medium severity Large Medium severity High severity Figure b. Estimation of severity of usability problems : Severity rating (Risk management of usability problems) 135

9) Iterative Design Improvement Current Version Next version New Version Problem of usability <= 9) Iterative Design Improvement Current Version Next version New Version Problem of usability <= result of observation of user’s operation an system logs Result of Empirical testing / Interface evaluation Some of changes made to solve certain usability problems may fail and a revised design may even make new usability problems. Capture the Design Rationale The rationale for the various user interface design decisions can be made explicit and recorded for later reference. 136

10) Follow-up Studies of Installed System Purpose: The main objective of usability work after 10) Follow-up Studies of Installed System Purpose: The main objective of usability work after release of a product is to gather usability data for the next version and for new, future product Methods: • Survey of Customer Satisfaction • Interview, questionnaire and observation same as user analysis • The steps that need to be performed and interdependencies between these steps. • Analysis of users’ complains, modification requests and calls to help desk. • Collecting an analyzing economic data on impact of the system on the quality and cost of the user work. 137

Management of Usability Activity Prioritizing usability activity: Important activities to improve usability: • Visiting Management of Usability Activity Prioritizing usability activity: Important activities to improve usability: • Visiting users and task analysis • Prototyping with scenario • Empirical testing / Interface evaluation with observation of users’ operation and Heuristic Evaluation • Iterative design • Participatory design Be prepared • To acquire how to make and use prototyping including usage of tools. • To acquire methods of usability survey and heuristic evaluation. • To formulate to recruit test users easily. • To train usability experts/champions. • To understand usability guideline and make own standard. • To acquire knowledge and skill of usability and user interface 138

How to reduce time and cost of development of prototyping • Scenario Model • How to reduce time and cost of development of prototyping • Scenario Model • Paper mock-up instead of running computer system. • Using Low-fidelity media • Using other media such as video and Power point instead of computer system. • Using prototyping tools • Simulated by human instead of computer. • Using simple algorism, logic and fixed data. 139

U Methods for Human Centered Design 140 U Methods for Human Centered Design 140

Human-centered development (Process ) HCD Process of UI & Human Centered Design Survey of Human-centered development (Process ) HCD Process of UI & Human Centered Design Survey of users’ behavior Method for Analysis, Test and evaluation of UI Definition of Scenario and Task Interface design based on Scenario and Task Implementation based on Interface Prototyping Iterative Design Methods for Human Centered Design As detail/useful methods • Interview • Master/apprentice model • Scenario/ Persona • Use Case • Card sorting • Test Task 141

Interview Points of interview • Usually result of interview would be users’ opinion, interview Interview Points of interview • Usually result of interview would be users’ opinion, interview should focus on users’ behavior. • Users sometimes think errors of system come from users ability, not system itself. • Users’ opinions are sometimes only guess. • Users’ opinions are always only summary , not detail. When user mentions detail. Only a few users mention same thing. 142

Contextual Inquiry Master/apprentice model It is important to tell the users that we want Contextual Inquiry Master/apprentice model It is important to tell the users that we want to learn from them by watching and occasionally interrupting. Make sure that you have agreed with them when you can interrupt. It is important to be able to ask users about things happening, but at the same time not disturbing their work, for example during interaction with customers. The users are the master and they 'run the show'. The interviewer (apprentice) should only be there watching and occasionally interrupt (when feasible) to ask questions about things that occurred. Do not hesitate to ask any questions that may or may not be of relevance. When at the interview it is impossible to know what is relevant or not relevant, so note down as much as possible. When observing the users, remember your focus and probe them depending on the focus. Usability Body of Knowledge: Contextual Inquiry http: //www. usabilitybok. org/methods/contextual-inquiry? section=how-to 143

Scenario Purpose: To provide examples of usage as an input to design, and to Scenario Purpose: To provide examples of usage as an input to design, and to provide a basis for subsequent usability testing. Scenarios specify how users carry out their tasks in a specified context. To maintain design flexibility, they should not specify what product features are used. Benefits: • It encourages designers to consider the characteristics of the intended users, their tasks and their environment. • Usability issues can be explored at a very early stage in the design process (before a commitment to code has been made). • Scenarios can help identify usability targets and likely task completion times. • The method promotes developer buy-in and encourages a user-centred design approach. • Scenarios can also be used to generate contexts for evaluation studies. • Only minimal resources are required to generate scenarios. • The technique can be used by developers with little or no human factors expertise. Cost effective User Centred Design http: //www. usabilitynet. org/trump/methods/recommended/scenarios. htm 144

Persona • a description of a specific person who is a target user of Persona • a description of a specific person who is a target user of a system being designed, providing demographic information, needs, preferences, biographical information, and a photo or illustration. Typically, multiple personas are developed in the early stages of design that represent the spectrum of the target audience. Personas are one piece of a “scenario”, the other piece being a description of how this person would typically interact with the system being designed. • The point of developing personas is to avoid the trap of designing for the “average” user that doesn’t actually exist, and instead to make sure that the system will work for somebody specific rather than no one in particular. Example of Persona ( and Scenario) http: //www. user. com/persona-example. htm http: //wiki. fluidproject. org/display/fluid/Ashley+Myles+%28 Undergraduat e+Student+-+Archeology% 145

Use Case A use case in software engineering is a description of a system’s Use Case A use case in software engineering is a description of a system’s behavior as it responds to a request that comes from outside the system. Use cases describe the system from a user’s point of view. Use cases describe the interaction between a primary actor (the initiator of the action) and the system itself. It is represented as a sequence of simple steps. Each use case focuses on describing how to achieve a goal or task. A use case should: • Describe what the system shall do to assist the actor in achieving a goal • Does not include any implementation-specific language • Not include any details about the user interfaces or screens. Usability. gov: Use Case http: //www. usability. gov/methods/design_site/usecasesresource. html 146

Test Task Bad examples of test task • Please use this system freely. Test Test Task Bad examples of test task • Please use this system freely. Test must use a task with start and goal. • Please sent e-mail by using this system. Task should have context for user to use the system. • At first input text , then input address…. Task should not be a instruction nor operation. • If you would like to buy something, please order by this system. Task should not include emotional situation. • Please buy a house by using this system. Task should be appropriate to users. • Please use converter function of the mobile phone. Task should be a major/main task. 147

Card sorting The card sorting method is used to generate information about the associations Card sorting The card sorting method is used to generate information about the associations and grouping of specific data items. Participants in a card sort are asked to organize individual, unsorted items into groups and may, depending on the technique, also provide labels for these groups. In a user-centered design process, it is commonly used when developing a site architecture but has also been applied to developing workflows, menus, toolbars, and other elements of system design Open Card Sort. The purpose of this card sort is to explore organizational models for new information or information which is difficult to classify. Closed Card Sort. The purpose of this card sort is to explore how new content may fit into an existing structure, or how new content relates to existing content. Usability Body of Knowledge: Card sorting http: //www. usabilitybok. org/methods/card-sorting 148

Card sorting http: //nbprototyping. com/sort_example_1. htm 149 Card sorting http: //nbprototyping. com/sort_example_1. htm 149

Activity Card Sorting 150 Activity Card Sorting 150

U Session 5 CAUSE Tools 151 U Session 5 CAUSE Tools 151

U Development prototyping in MS Expression Blend 4 + Sketchflow 152 U Development prototyping in MS Expression Blend 4 + Sketchflow 152

Human-centered development (Process ) HCD Survey of users’ behavior Definition of Scenario and Task Human-centered development (Process ) HCD Survey of users’ behavior Definition of Scenario and Task Interface design based on Scenario and Task Implementation based on Interface 6. How to make a prototype (No. 1) Prototyping Iterative Design + How to make a prototype (No. 2) With CAUSE Tools 153

RIA Technology RIA Target Development Language Vender Adobe Air Win, Mac, Linux AIR-RT Flash RIA Technology RIA Target Development Language Vender Adobe Air Win, Mac, Linux AIR-RT Flash Builder Dreamweaver Flash catalyst Action script, Adobe Ajax, Javascript Flash Win, Mac, Linux Flash player Flash Action Script Adobe Flex Win, Mac, Linux Flash player AIR-RT Flash Builder Flash catalyst Action Script, MXML Adobe WPF Win. NET FW Visual studio Expression Blend VB, C#, XAML Microsoft Silverlight Win, Mac, Linux Silverlight-RT Visual studio Expression Blend VB, C#, XAML, Javascript, VB, Python Microsoft Ajax Win, Mac, Linux js (HTML Editor) Javascript, XML - Java. FX Win, Mac, Linux Java. FX-RT Net. Beans Java. FX script Oracle 154

CAUSE Tools Expression Blend 4 + Sketchflow (http: //www. microsoft. com/expression/products/Sketchflow_Overview. aspx) Lots of CAUSE Tools Expression Blend 4 + Sketchflow (http: //www. microsoft. com/expression/products/Sketchflow_Overview. aspx) Lots of Windows shops speak highly of the new tools coming out for WPF and Silverlight, and Expression Blend + Sketch. Flow gets high marks for being able to allow you to seamlessly transition from the prototyping stage to the actual implementation. Flash catalyst (http: //www. adobe. com/products/flashcatalyst/) With Flash Catalyst, user interface architects can create the user interface for Adobe Flex applications using Adobe graphic software. Then developers can use the result to build the rest of the application in Flex. Denim (free; http: //dub. washington. edu: 2007/denim/) Denim is an early-stage tool for rough design mockups. It’s gotten a fair amount of buzz in online forums. I’ve read that it works really well with a tablet or pen-based input device. Balsamiq Mockups (http: //www. balsamiq. com/products/mockups) Balsamiq has garnered a lot of buzz and attention for their Adobe AIR app. It comes available as a downloadable deskop app or as a plugin for common wiki and bug-tracking tools, and will be available soon as a web-hosted tool. There are dozens of in-depth blog reviews of this product, available for you to review via a simple Google Search. Axure RP Pro (http: //www. axure. com/) Based on the reviews I’ve seen, Axure can lay claim to the “best GUI prototyping tool” crown, but it is fairly expensive. There are discounts for bulk license purchases and there is a free 30 -day trial available. Pencil (free; http: //www. evolus. vn/Pencil/) A free, open-source Firefox add-on for diagrams and GUI prototyping from within your FF browser. 155

U New Development Process and Method (Example) User Requirements Require ment Detail Design Global U New Development Process and Method (Example) User Requirements Require ment Detail Design Global (Basic) Design MS Visual Studio Screen Require ment Paper Prototyping Require ment Sketchflow (Low-fi) Screen Progra mming Screen MS Visual Studio Sketchflow (Hi-fi) MS Visual Studio Screen 156

Screen of Expression Blend 4 + Sketchflow 157 Screen of Expression Blend 4 + Sketchflow 157

How to Make Prototype in Expression Blend Skech. Flow Prototype look like paper prototyping How to Make Prototype in Expression Blend Skech. Flow Prototype look like paper prototyping Simple sample flow of making Creating a project Making sitemap Designing screens Running prototype • Creating screens • Categorizing screens • Designing common parts • Adding navigation Generating documents Sketch. Flow Tutorial http: //www. silverlightshow. net/items/Sketchflow-from-a-developer-point-of-view-part-I-Basics. aspx Sketch. Fow turorial in Japanese http: //www. microsoft. com/japan/products/expression/video/blend 3_sketchflow. aspx 158

Activity Prototyping in MS Sketch. Flow 159 Activity Prototyping in MS Sketch. Flow 159

U Thanks for you joining the lecture! Contact: Go Ota e-mail gohome@v 006. vaio. U Thanks for you joining the lecture! Contact: Go Ota e-mail [email protected] 006. vaio. ne. jp Web www. beyondbb. jp (Japanese) 160