CIS 375 SOFTWARE ENGINEERING

University Of Michigan-Dearborn

Dr. Bruce Maxim, Instructor

Approaches To User Interface Design:
    1. Human Factors (prototype & test).
    2. Cognitive theory (user interaction modeled as a production system).
    3. Engineering Models:

(Often a "simulation of processes")
    1. Keystroke – level model (KLM).
    2. Goms model.

KLM
    1. Choose one or more representative task scenarios.
    2. Have the design specified to the point that keystroke level action can be listed.
    3. List the operations.
    4. Insert mental operations (where the user stops to think).
    5. Look up the standard execution times for the operations (including metals)
    6. Calculate the sum of all of the execution times.
    7. The total is the estimated time for all the tasks (the sum).

Standard Execution Times:

K – Keystroke :

Worst = 1.2 sec.

Average skilled typist = .20 - .28 sec.

P – point with mouse:

.8 to 1.5 sec. (avg. = 1.1 sec.)

B – mouse button press

.1 sec.

BB – double click:

.2 sec.

H – home hand to mouse or keyboard

.4 sec.

M – mental act of thinking

.6 to 1.35 sec.

(use 1.2 sec.)

Example: Adding A Delete Command To The Mac Finder

(Current: delete file by dragging it to the trash icon)

Procedure: (using current configuration)
    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.
    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 delete command (P)
    6. Release mouse button (B)

4P + 4B = 4.8 sec.

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 current procedure is slowed down quite a bit.

Inserting Mental Operations:

Where does user stop & think?

{It is more important that you get the number of mentals right and their placement correct than the exact time taken}

Common Placement Of "Mentals"
    1. Initiating a process.
    2. Making strategic decisions.
    3. Retrieving a chunk of memory (the user’s)
    4. Finding something on the screen.
    5. Verifying intended action is complete.

Once Again Current:
    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. (M)
    8. Verify trash reverse video. (M)
    9. Release button. (B)
    10. Verify bulging trash icon. (M)
    11. Find original window. (P)

3P + 2B + 7M = 12.6 sec.

GOMS Model:

{Goals Operators Methods Selection rules}

Benefits Of GOMS Model:
    1. Shows what the user must learn.
    2. Shows what the user must do.

Can Compare Systems Based On:
    1. The number of methods required to handle task goals.
    2. The length of methods.
    3. The types of operations.

User Goals:

For Each System Figure Out:

Mac:

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.

Generalized Methods:

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.

Sub Method:

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.

Eight Golden Rules Of Dialog Design:

  1. Strive for consistency.
  2. Shortcuts for frequent users.
  3. Design dialogs to yield closure.
  4. Offer informative feedback.
  5. Offer simple error handling.
  6. Permit easy reversal of actions.
  7. Support internal focus of control.
  8. Reduce the short term memory load. (7 ± 2)

Data Display Guidelines:

  1. Consistency of display
  2. Efficient assimilation of information by user.
  3. Minimize the user’s memory load.
  4. Compatibility between data entry and display screens.
  5. Flexibility of user control.

Operator Attention:
    1. Intensity (2 levels only).
    2. Marking.
    3. Fonts (3 or less).
    4. Inverse video.
    5. Blinking 2 to 4 Hz range.
    6. Color - up to 4.
    7. Color blinking.
    8. Audio.

User Interface Styles:
    1. Menus.
    2. Forms.
    3. Command language.
    4. Direct manipulation.

Menus:
    1. Single menu.
    2. Linear sequences.
    3. Tree structured.
    4. Acyclic networks.
    5. Cyclic network

Displays:
    1. Text (single key).
    2. Text (pointing device).
    3. Icon (pointing device).
    4. Radio buttons.
    5. Check boxes.
    6. Pull down / pop up menus.
    7. Permanent (command bars).

Step1: search screen for word/icon matching part of task description.

Step2: decide

if match then

choose menu item

else

go to appropriate space in menu structure

Step3: if all tasks accomplished then

return with goal accomplished

Step4: Go to Step1

General Guides:
    1. Shallow - wide menus preferred (over tall deep ones).
    2. User should have asses to all relevant items without referencing a manual.
    3. Logical item presentation sequences - alphabetic, numeric, etc.
    4. Icons are harder to recognize than words during visual search.
    5. Avoid screen clutter.
    6. Don’t assume user will notice queues like color or borders.

Easy Selection:
    1. Key presses for frequent users.
    2. Ensure consistent navigation and selection.
    3. Watch for Fitt’s law considerations.

Form Fill-In:

Step1: search screen for next field to fill in.

Step2: move cursor to next field.

Step3: figure out what to type and type it in.

Step4: decide:

if all fields are correct then

indicate finished

return with goal accomplished

else

move cursor to incorrect field & change field

Step5: go back to Step1.

General Advice:
    1. Copy an existing paper form,
    2. Don’t force entry order.
    3. Provide on screen navigation instructions.
    4. Good graphic layout.
    5. Describe special entry formats.
    6. Apply validity checks with feedback.

Human Factors In User Interface Design:
    1. Pointing devices.
    2. Touch devices.
    3. Audio recognition output.
    4. Scanners / digitizers.
    5. Keyboards.
    6. Screens (touch also).

User Interface; Software Level:

Because managers are rewarded for:

{Usability is not here}