D ASAR PERANCANGAN INTERAKSI Interaksi Manusia dan Komputer Computer Science UGM

M ATERI A FTER MID  Dasar Perancangan Interaksi  Tipe-tipe Interaksi  Menu, Form Fillin dan Kotak Dialog  Command Language Interface  Direct Manipulation  Perancangan Pesan Sistem, Tampilan Layar dan Warna  Evaluasi Desain Antarmuka  Antarmuka Masa Lalu dan Masa Depan

B IG IDEA  User modeling  KLM (Keystroke Level Model)  GOMS Model (Goals Operators Methods Selection)  Action Analysis  3 Golden Rules untuk desain antar muka (Theo Mandel, Ph.D)  Places Users in Control  Reduces user’s memory load  Make the User interface consistent describes the process of building up and modifying a user model The main goal of user modeling is customization and adaptation of systemsadaptation of systems to the user's specific needs The system needs to "say the 'right' thing at the 'right' time in the 'right' way"

U SER MODELING Dasar Perancangan Interaksi -IMK

H UMAN COMPUTER INTERACTION – USER MODELING HCI Not just human factor No strong agreement Not just computer factor Main emphasis : USER INTERFACE DESIGN HARDWARE BEHAVIOR OF SOFTWARE SUPPORTING DOCUMENT INVOLVES Time to learn Speed of performance User error rates Retention over time Subjective satisfaction Designed by programmers Functionality dominates software design and marketing Designer intuition is often used rather than user modeling ( not good) Typical Human Factors Measures UI come from ?

HCI G OALS FOR D ESIGNERS  Improve user's quality of life by building quality (not flashy) interactive systems  Promote attention to user interface issues which should be considered by managers  Become successful designers of systems that go beyond intuitive concepts like "user friendliness" and focus on supporting the user's real task goals

Context of TCUID - Task Centered User Interface Design 7

M OTIVATION FOR I NCLUDING H UMAN F ACTORS IN U SER I NTERFACE D ESIGN  Life critical systems  Industrial and commercial uses  Personal applications  Exploratory, creative, and cooperative systems

A CCOMMODATING H UMAN D IVERSITY IN D ESIGN  Physical workspaces  Cognitive and perceptual ability differences  Personality differences  Cultural and international diversity  User disabilities  Elderly users

US M ILITARY S TANDARDS FOR H UMAN E NGINEERING AND D ESIGN  Achieve required performance  Minimize personnel training requirements  Achieve required reliability  Foster design standardization

H OW IS THIS DONE ?  Ensure functionality by basing design on user task analysis  System reliability requires designer attention to details like privacy, security, and data integrity  Standardization requires attention to issues like system integration, consistency, and portability  Schedule and budget must allow for human factors work like user analysis and testing

TASK PERFORMANCE T ASK PERFORMANCE IS CRITICAL IN  airline and automobile displays  emergency management systems  process control systems  customer service systems and more S HOULD MEASURE TASK P ERFORMANCE EARLY TO  minimize task performance on high-frequency tasks  select among alternative designs  ensure that critical performance goals will be satisfied  cost justify replacement of an existing system

A PPROACHES TO U SER I NTERFACE D ESIGN  Human Factors: prototype and test  Cognitive theory: production system  Engineering models:  KLM (keystroke level model)  GOMS Models (goals, operators, methods, selection rules)

REAL-WORLD EXAMPLE For every second saved in operator support, a company could save 3 million dollars per year – NYNEX estimate for its operator support, [Gray et al., GOMS Meets the Phone Company, Interact, 1990] Replace old workstations with new workstations – promised to reduce operator support time by 2.5s – weigh against investment of the new systems (about 1000 workstations at $10,000 each) Conduct empirical study to compare operator performance on old and new systems Perform GOMS analysis to help explain results 14

F INDINGS Operators slower on new workstations – would have cost another $3 million per year GOMS analysis showed that an operator had to perform more operations along the critical path for the new systems – GOMS is a predictive and explanatory model 15

K LM (K EYSTROKE LEVEL MODEL ) User Modeling

K EYSTROKE L EVEL M ODEL (KLM)  Choose representative user task scenarios  Specify design to point that keystrokes defining actions can be listed  List keystrokes (operators) required to perform task  Insert mental operators at points user needs to stop and think  Look up standard execution time for each operator  Add up the execution times for the operators  Total is estimated time to complete task

S TANDARD E XECUTION T IMES  K - key press (0.2 sec = 55 wpm)  P - point with mouse (1.1 sec)  B - mouse button press (0.1 sec)  BB - press and release button (0.2 sec)  H - home hands to keyboard or mouse (0.4 sec)  M - mental act of thinking (1.2 sec)

C URRENT D ESIGN : D ELETE A FILE BY DRAGGING IT TO THE TRASH ICON 1. Point to file icon (P) 2. Press & hold mouse button (B) 3. Drag file to trash icon (P) 4. Release mouse button (B) 5. Point to original window (P) 3P + 2B = 3.5 sec. K - key press (0.2 sec = 55 wpm) P - point with mouse (1.1 sec) B - mouse button press (0.1 sec) BB - press and release button (0.2 sec) H - home hands to keyboard or mouse (0.4 sec) M - mental act of thinking (1.2 sec) REMEMBER …

N EW D ESIGN : A DDING A COMMAND TO MENU 1. Point to file icon (P) 2. Click button (BB) 3. Point to file menu (P) 4. Press and hold button (B) 5. Point to add command (P) 6. Release mouse button (B) 7. Point to original window (P) 4P + 4B = 4.8 sec. K - key press (0.2 sec = 55 wpm) P - point with mouse (1.1 sec) B - mouse button press (0.1 sec) BB - press and release button (0.2 sec) H - home hands to keyboard or mouse (0.4 sec) M - mental act of thinking (1.2 sec)

A SSUMPTIONS  These previous scenarios work only work if the user is currently able to view all the needed windows and icons.  If the trash icon for example is buried under other windows the first procedure is slowed down quite a bit.

I NSERTING M ENTAL O PERATORS : W HERE DOES THE USER STOP AND THINK ? 1. Initiating a process. 2. Making strategic decisions. 3. Retrieving a chunk from user’s short term memory 4. Finding something on the screen. 5. Verifying intended action is complete.

M ENTAL O PERATORS N EW VS E XPERIENCED U SERS  New users stop and check feedback after every step  New users have small chunks  Experienced users have elaborate chunks  Experienced users may overlap mental operators with physical operators

D ELETE A FILE BY DRAGGING ICON TO TRASH 1. Initiate delete. (M) 2. Find file icon. (M) 3. Point to file icon. (P) 4. Press & hold button. (B) 5. Verify icon reverse video. (M) 6. Find trash icon. (M) 7. Drag file to trash icon. (P) 8. Verify trash reverse video. (M) 9. Release button. (B) 10. Verify bulging trash icon. (M) 11. Find original window. (M) 12. Point to window. (P) 3P + 2B + 7M = 12.6 sec. K - key press (0.2 sec = 55 wpm) P - point with mouse (1.1 sec) B - mouse button press (0.1 sec) BB - press and release button (0.2 sec) H - home hands to keyboard or mouse (0.4 sec) M - mental act of thinking (1.2 sec)

P LACEMENT OF M ENTAL O PERATORS  Hard to do - requires good intuition from designer  Consistency in the number of Mental's assigned is more important than exact positioning

G OMS MODEL User Modeling

GOMS Goals: what a user wants to accomplish Operators: mental or physical actions that change the state of the user or system Methods: groups of goals and operators Selection rules: determine which method to apply, if more than one available

GOMS A method to describe tasks and how a user performs those tasks with a specific design – bridges task analysis with a specific interface design – error-free, goal-directed, and rational behavior Views humans as information processors – small number of cognitive, perceptual, and motor operators characterize user behavior To apply GOMS: – analyze task to identify user goals (hierarchical) – identify operators to achieve goals – sum operator times to predict performance

GOMS CAN BE USED TO Develop task-centered documentation Predict time to learn how to perform tasks Predict likelihood of errors Predict time to perform tasks – predictions tied to specific interface designs

A PPLY GOMS WHEN 30 Want a formal method of writing tasks – enables you to identify intersections across tasks, but requires a consistent vocabulary – generates discussion (concrete representation) – matches tasks to specific interface design Want to make tasks more efficient – or just the repetitive parts of larger tasks – even creative tasks have repetitive parts

John, B.E

W HO CAN USE GOMS 32 Just about everyone – formal training not required; experience helps Have multiple people perform analysis and compare results – results are often surprisingly consistent

H OW TO USE GOMS 33 Analyze hierarchical structure of a task – coarse analysis focuses more on the cognitive structure of a task – fine analysis focuses more on the structure imposed by the specific interface design Analyze alternative methods Assign operators to base level goals Assign times to operators Sum the operator times

More available in TCUID chapter 4 OPERATOR TIME Press key on keyboard 280 ms Use mouse to point to object on screen 1500 ms Move hand to pointing device 300 ms Move eyes to location on screen 230 ms Retrieve item from memory 1200 ms Learn a single step in a procedure 25 seconds Select among methods 1200 ms

This example is extracted from: David Kieras, A Guide to GOMS Task Analysis, University of Michigan Technical Report, Spring, 1994.

U SER G OALS  Delete a file.  Move a file.  Delete a directory.  Move a directory.

To accomplish goal of deleting a file: 1. Accomplish goal of dragging file to trash. 2. Return with goal completed. To accomplish goal of moving a file: 1. Accomplish goal of dragging file to destination. 2. Return with goal completed.

To accomplish goal of deleting a directory: 1. Accomplish goal of dragging directory to trash. 2. Return with goal completed. To accomplish goal of moving a directory: 1. Accomplish goal of dragging directory to trash. 2. Return with goal completed.

G ENERALIZED M ETHODS Method for accomplishing goal of deleting an object: 1. Accomplish goal of dragging object to trash. 2. Return with goal completed. Method for accomplishing goal of moving an object: 1. Accomplish goal of dragging object to destination. 2. Return with goal completed.

S UB M ETHOD Accomplish goal of dragging item to destination: 1. Locate icon on screen. 2. Move cursor to item icon location. 3. Hold mouse button. 4. Locate destination icon. 5. Move cursor to destination icon. 6. Verify destination icon reverse video. 7. Release mouse button. 8. Return with goal accomplished.

GOMS EXAMPLE Retrieve the article entitled “Why Goms?” – written by Bonnie John, 1995, in ACM DL

GOAL STRUCTURE Goal: Retrieve article from ACM DL – Goal: Go to ACM Goal: Enter ACM URL Goal: Submit URL – Goal: Go to DL Goal: Locate DL link Goal: Select the link – Goal: Select method [Method: Search method Goal: Search for article – Goal: Enter search parameters – Goal: Submit search – Goal: Identify article from results Goal: Select the article] [Method: Browse method - ] – Goal: Save article to disk Goal: Initiate save action Goal: Select location Goal: save article to that location

A NOTHER EXAMPLE GOMS  Source : The Psychology of Human-Computer Interaction By Stuart Card, Tom Moran and Allen Newell, Lawrence Erlbaum, 1983

GOAL: Text Correcting OPERATOR: Get next task METHOD: Use line feed METHOD: Use search and replace SELECTION: select method METHOD: count lines and move n-lines Ran tests and Subjects to assess preferences and times Methods depend on context: # of lines down, distinctness of string, nearby breaks People have preferred methods

GOAL: edit manuscript GOAL: edit unit – task repeat GOAL: acquire unit – task if not remembered GET next page if at end of page GET next task GOAL: execute unit task if edit task found GOAL: locate line if task not on current line VERIFY location GOAL: modify text SELECT GOAL use QS method SPECIFY command SPECIFY argument GOAL: use LF method SPECIFY command repeat until at line ARGUMENT LEVEL GOMS MODEL

Fitting Model to Data/Calibrating the Model Protocol studies using video Analyze video To determine method Calculate time for each GOM action Get next page 2.14 sec. Get next task 1.92 sec. Locate line 3.98 sec. Modify text 3.85 sec. Specify command 1.47 sec. Specify argument 1.46 sec. Look at.31 sec. Move hand.19 sec. Search for.72 sec.

CAN GOMS BE TRUSTED? 47 Predictions made by GOMS models validated in many research studies – assumes that you have a valid model! Build initial model based your own understanding of a task’s execution – record other users performing the task – compare predicted versus actual sequence – refine and iterate

GOMS WORTH THE EFFORT WHEN 48 Want quantitative estimates of human performance without having to – build a working system – train people to use the system to measure performance – measure performance for many users

GOMS : PROS AND CONS 49 Pros – predict human performance before committing to a specific design in code or running empirical studies – no special skills required – many studies have validated the model (it works) Cons – assumes error-free, skilled behavior – no formal recipe for how to perform decomposition – may require significant time investment

GOMS M ODEL G OALS O PERATORS M ETHODS S ELECTION R ULES Advantages  GOMS models are executable  GOMS models allow simulated execution of user task  Provide a rigorous description of what user must learn  Provide estimate of size or complexity of interface (number of distinct methods and their length)  Can estimate both learning time (about 30 sec per step and execution time (total of KLM operators)  Allow designer to evaluate the effect of reusing or sharing methods among several tasks

M ETHOD FOR GOMS M ODEL C ONSTRUCTION  Make a list of top-level user goals  Write a step-by-step method for accomplishing each goal on list  Continue refining each step that is not a keystroke level operator by defining it as a subgoal and add it to the list of user goals  Continue processing user goals until list is empty (meaning that all user goals are defined in terms of keystrokes)  If there are multiple methods to accomplish a goal supply decision rules to choose which method to invoke

ACTION ANALYSIS User Modeling -IMK

ACTION ANALYSIS 53 Write down each step that a user must perform in your interface to achieve a task Multiple number of steps by [2, 3] secs – provides range of [best, worst] performance

ACTION ANALYSIS EXAMPLE 54 – Enter URL String – Press “Enter” key – Find “digital library link” – Select the link – [assume search method] – Enter title of article into search field – Select “Search” – Find “Why GOMS” link – Select the link – Select “Save” button – Select folder location – Select “Save” button on dialog

12 Steps = [24, 36] seconds My actual time = 28 seconds ACTION ANALYSIS EXAMPLE 55 – Enter URL String – Press “Enter” key – Find “digital library link” – Select the link – [assume search method] – Enter title of article into search field – Select “Search” – Find “Why GOMS” link – Select the link – Select “Save” button – Select folder location – Select “Save” button on dialog

P ROS AND CONS 56 Pros – faster to perform – easier for a beginner – good for less performance critical apps Cons – less accurate (higher variance) – more difficult to compare alternative designs that are close in predicted performance

QUIZ TIME Ekstensi file Use KLM, GOMS and Action Analysis to analys activity : Hidden Extension file! Next Chapter

T HE GOLDEN RULES OF USER INTERFACE DESIGN Dasar Perancangan Interaksi-IMK

U SER INTERFACE DESIGN PRINCIPLES  “The golden rule of design: Don’t do to others what others have done to you. Remember the things you don’t like in software interfaces you use. Then make sure you don’t do the same things to users of interfaces you design and develop.” Tracy Leonard (1996)  Why should you need to follow user interface principles?  In the past, computer software was designed with little regard for the user, so the user had to somehow adapt to the system.  This approach to system design is not at all appropriate today—the system must adapt to the user. This is why design principles are so important

GOLDEN RULES OF USER INTERFACE DESIGN 1.Place users in control of the interface 2.Reduce users’ memory load 3.Make the user interface consistent. 1.Know the user 2.Minimize memorization 3.Optimize operations 4.Engineer for errors. 3 Golden Rules By Mandel Hansen’s Interface Design Principle (1971) Update

G OLDEN R ULE #1 : P LACE USERS IN CONTROL OF THE INTERFACE  Use modes judiciously (modeless)  Allow users to use either the keyboard or mouse (flexible)  Allow users to change focus (interruptible)  Display descriptive messages and text(Helpful)  Provide immediate and reversible actions, and feedback (forgiving)  Provide meaningful paths and exits (navigable)  Accommodate users with different skill levels (accessible)  Make the user interface transparent (facilitative)  Allow users to customize the interface (preferences)  Allow users to directly manipulate interface objects (interactive). Analogi

G OLDEN R ULE #2: R EDUCE U SERS ’ M EMORY L OAD  Relieve short-term memory (remember)  Rely on recognition, not recall (recognition)  Provide visual cues (inform)  Provide defaults, undo, and redo (forgiving)  Provide interface shortcuts (frequency)  Promote an object-action syntax (intuitive)  Use real-world metaphors (transfer)  User progressive disclosure (context)- show them what they need, when they need it, and where they want it  Promote visual clarity (organize)

G OLDEN R ULE #3: M AKE THE I NTERFACE C ONSISTENT  Sustain the context of users’ tasks (continuity)  Maintain consistency within and across products (experience)  Keep interaction results the same (expectations)  Provide aesthetic appeal and integrity (attitude)  Encourage exploration (predictable)

SOURCE  Slide “User Modeling” By Bruce R. Maxim, UM-Dearborn  Slide “GOMS-action”  Slide Design of Design Environment, Georgia Institute of Technology  Tutorial The Golden Rules of User Interface Design, Theo Mandel