MSSE 5115 Design Process

1
MSSE 5115Design Process Principles

• John Kruse
• University of Minnesota

2
Lecture map

• Design process in the abstract
• GUI Design
• Overview
• Building Blocks
• Rules for selecting widgets
• Selecting paradigms

3
Visual Design
Interaction Design
Information Architecture
4
Function vs. Form

• Appearance of the system is important
• Visual elements (perceptual elements)
• Attributes like size, color
• Relationships like positioning
• Good communication by visual design
• Aesthetics also plays major role
• Emotions affect our thought process
• Functional aesthetics interact
• This course Aesthetics is secondary

5
Solutions vs needs

• Solutions are
• Fun
• Deliverable
• What comes naturally to engineers
• Needs
• Seem pretty obvious
• Can be pretty subtly different
• Often gotten wrong
• Better understood after designing

6
After users tasks...

• Design matching users needs with solutions
• You can begin design before
• Completely finishing task analysis
• Completely finishing requirements
• Iterate back to users

?
7
User Interaction Design

• A plan for behavior and appearance as experienced
  by the user
• Can be called functional requirements
• UI designs are requirements for software
  developers
• Who in turn design the software
• Not design of software architecture code
• Not client-server, object-oriented, event-driven

8
The Design Process 1

• Nonhierarchical
• Cant do entirely top-down
• Radically transformational
• Partial and interim solutions that may play no
  role in the final design
• Nonlinear -- May require a creative leap
• Often initiated by dissatisfaction with current
  situation
• Uncomfortable

9
The Design Process 2

• A conversation with materials
• Discovery of new goals
• Design is negotiation
• There are lots of competing priorities
  constraints
• Feelings of personal ownership are common
• Nobody owns ideas, doer owns project
• Good designers arent jealous of ideas
• They have lots of good ideas
• Designers have strengths weaknesses

10
Act like a designer

• Explore
• Generate envision possibilities
• Tension between needs solutions
• Know your materials tools
• Describe
• Critique
• This is taught in design programs
• Negotiate
• Check you ego at the door

11
Think like psychologists

• Perception
• Modes memory
• The Action Cycle (Normans model)
• Know your materials tools
• Attitude Serve the user

12
Application structure flow

• Hub
• Example Main window dialogs
• Multiple focal windows specific action-oriented
  sub-windows
• Interview

The Designer's Guide to Web Applications, Part
I Structure and Flows, By Hagan Rivers
13
This course your prototypes

• You work with the screens, and the usability
• Birds eye maps or plans
• Good in general
• Acceptable in this course
• Focus on the user experience
• Goals, users, tasks
• Not abstract, not high-level

14
Lecture map

• Design process in the abstract
• GUI Building Blocks
• Overview
• Rules for selecting widgets
• Selecting a paradigm
• Fonts icons

15
Tasks --gt UI organization

• Now that weve mentioned
• Process the creative aspect of design
• Clear communication (e.g., Tufte)
• The Building Blocks for a GUI
• Your toolset
• Basic UI Paradigms
• UI Design Patterns

16
Interaction approaches

• Natural language
• Command language
• Menus
• Object-action
• Direct Manipulation
• Anti-Mac
• Form fill-in spreadsheet

• Wizard
• Property pages
• Browse
• Search

17
Natural Language

• The Friendly Command Language?
• No (Not quite yet)
• For 20 years, its been almost ready
• Human conversation requires a lot of the listener
• intelligence
• repairs
• People cant say something the same way twice
• We wont cover it now

18
Lecture map GUI Building Blocks

• Menus
• Object-Action paradigm
• GUI / Direct Manipulation
• Modes memory
• Command Languages
• Form Fill-in
• Sequencing wizards

19
Menu Definition

• A set of options presented so user can recognize,
  rather than recall
• Graphically arrayed to be visible in parallel, or
• If audio, sequentially presented
• Does it scale? If the set of options is too big,
  then some menus are hidden
• Organization is fundamental
• Hierarchy
• Sequential or logical order
• Alphabetical

20
Menu selection paradigm

• Less learning required
• Users can recognize react
• Can prevent many errors
• Typically, the user selects one at a time
• Even if composing a set of attributes
• Clear structure to decision making
• Menus show structure, relationship, etc
• If structured correctly
• Presentation sequence matters

21
What goes in menus?

• Content, or navigation to content
• Many web sites are menu systems
• Objects
• Attributes of objects
• Actions, to apply to content
• Cue for action (p 210 in UIDE)
• Users can sweep the menus in the menubar

22
Menu principles 1

• Task-related organization
• Create groups of logically similar items
• Design, Prototype, Test
• Use card-sorting for initial discovery
• Form groups that cover all possibilities

View to get MS Word markup
View layers in Visio, HF in MS sw
23
Menu principles 2

• Use familiar terminology
• Easy to learn, easy to remember
• Non-ambiguous (e.g., View Properties)
• Make sure items are distinct dont overlap
• ? Problems with computer?
• Either hardware or memory

24
Task-related?
25
Naming finding things

• Naming things is not easy
• Dont have
• a Harvest button in health care
• A Cancel button in scheduling
• People call the same thing by different names
• 100 people generate 30 names for one thing
• The most popular will be suggested by 1/3 of them
• For a menu system, you have to pick one
• But test your ideas for menu item names

26
Menus ubiquitous

• Attribute on/off
• Option Buttons, check boxes
• Mnemonic letters
• Multiple-item Menus
• Multiple-selection menus or check boxes
• Pull-down or pop-up menus
• Scrolling and two-dimensional menus
• Embedded links
• Iconic Menus, toolbars, or palettes

27
Multiple menus, nested

• Tree-structured Menus
• E.g. familiar examples
• Animal, vegetable, mineral
• Fonts, size, style, spacing
• Prefer breadth to depth
• Depth limit 3
• MS PowerPoint uses 2 max
• Limits to breadth
• Only a screen-width for menu bar

28
Breadth vs. Depth on the Web

• 512 items from Encarta encyclopedia in these
  structures
• 8x8x8, 16x32, 32x16
• no download delays
• Results
• 16 x 32 - best performance
• 8 x 8 x 8 - worst performance
• 32 x 16 - slight user preference
• Discussion / Implications
• Short term memory is only one factor
• Limiting depth is more important than increasing
  breadth
• Chunking is a likely important factor

Web Page Design Implications of Memory,
Structure and Scent For Information Retrieval.
Larson and Czerwinski, CHI 98
29
Hypertext shape performance
http//psychology.wichita.edu/surl/usabilitynews/4
2/hypertext.htm
30
Long menus can be usable
31
Tabbed dialogs

• Tabs for navigation only
• Not for setting attributes
• Only a few tabs allowed
• This limits the expansion of the application/site
• Subsets of properties for 1 object or members of
  a family of objects
• How may rows of tabs? One, one, or one

32
Tabs with menus

• A tab menu should still work as a tab. If the
  user clicks on Genres, he should go to the Genres
  screen.
• If the tab menu still works as a tab, the user
  may have two places to click
• the label to activate the tab or
• the menu control to open the menu
• Be sure your menu cues work and users understand
  to click on them.

33
Toolbars are a menu

• Toolbars functions should be a subset of menus
• Accessibility
• Learning curve for beginners
• Toolbars are quick way to get to functionality of
  menu item
• Icons can be quickly recognized and used
• After learning curve

34
Menus toolbars

• Be sure tooltips relate to menus wording

Because without a little help, icons can be a
challenge
35
Should menu items disappear?

• Windows dynamic menus
• Standard guideline is to disable, not hide
• Is recency of use a good enough heuristic?
• Its a Windows setting
• How many users can find that?

36
Should menus disappear?

• Present vs Analyze
• Search menu only visible in Present

37
Menus Findability

• Most are right where you can see them
• Sort of
• Right-button menus require learning

38
Menus Fast key access

• Use guideline keyboard shortcuts
• WindowsTM mandates a few
• Show keyboard shortcuts
• How does WindowsTM do this?
• Sometimes keyboard shortcuts are not faster
• (an old argument from Tognazzini)
• Except when one hand selects with mouse, and the
  key shortcuts dont require two hands

39
Keyboard shortcuts

• The best of recognition and command language?
• Menus with type-ahead
• Important when
• Menus are familiar
• Response time/display rates are slow
• Single-letter menus with type-ahead
• Allows concatenation of menu selections into
  mnemonics
• Mnemonics can be arbitrary
• Supports a command-language for expert users

40
Guidelines Dropdown menu

• List/dropdown for
• many choices
• keyboard-intensive users
• computed lists
• Advantages
• Work for well-understood, well-ordered lists
• Minimize screen real estate
• Can provide quick keyboard access

41
Dropdown menus disadvantages

• No recognition until option is visible
• Can be tedious especially with nested menus
• Cascading secondary menus often too difficult
• They close too soon
• Users dont see their option, and move on
• Limit depth, prefer breadth
• Invisibility hinders recognition

42
Menus for experts

• Dropdown
• Deeply-nested
• Incremental matching command language

43
Menus for attributes
44
Menu controls for attributes

• Checkbox
• For a setting with a clear alternative
• Option buttons
• to make users aware of alternatives
• for small of choices
• Dropdown/combo
• To conserve screen real estate
• Long is bad
• Without clear organizing principle

45
Guidelines Option vs Checkbox

• Option button when you need to name both states
• Checkboxes
• None, one, or many
• Option buttons
• One and only one
• What are the rules for each?

46
Menu controls for attributes

• How about a command to switch the attribute or
  state, rather than a checkbox?

Turn Off
Off
Off
On
On
47
Questions

• For menu items which are sometimes applicable,
  other times not - What are rules?
• Remove restore or enable disable?
• Same item, different places/names
• Is this OK?

48
Menu or data visualization?

• MS Treeview (Windows Explorer)
• A common data structure
• Selection, nesting of levels
• Mac/Lotus Notes UIs with collapsing/ expanding
  lists
• Combine levels of visibility
• Drawbacks
• Complex rules for use
• Can drill into an empty container

49
Menus Efficiency of use

• Menu titles are more informative with numbers
• Animals (72)
• Vegetables (21)
• Apples (15)
• Carrots (6)

50
Graphical menus

• Visualization
• Good mapping
• Different flavors of treeviews

51
Lecture map GUI Building Blocks

• Menus
• Object-Action paradigm
• Modes memory
• GUI / Direct Manipulation
• Command Languages
• Form Fill-in
• Sequencing wizards

52
Principle Minimize memory attention load

• Mode When an action has different effects,
  depending upon system state
• and that system state is not in the users
  attention
• Modes can be very bad
• System state not necessarily visible
• or not in users attention
• Wristwatches button functions
• Toggles, checkboxes, can be bad
• Radio/option buttons are better

Unlock
Locked
Unlocked
53
Modes

• Modes in our radios more functionality, lowered
  usability
• Bands (FM1, FM2, AM) which change actions of
  selector buttons
• Better to have a lot of buttons in grouped layout
• mODES can be a pain!
• They can cause lost work
• Powerpoint focus on Outline, select all, delete.

54
Example Passwords a la mode

• Login can be quick, easy, heads-down
• ltusernamegt, lttabgt, ltpasswordgt
• Except when 2 login sites are
• Similar in many respects
• But different in where focus starts
• Then, my password is part of MSN search
• Do they display searches on the wall like at
  Google?

55
Cell Phone Examples

• Setting Speed Dial different between 2 Verizon
  phones
• LG Mode
• Main menu gt Contacts gt Speed Dial
• Find a Speed Dial number, then find Contact to
  associate with it
• Motorola with Video Object/Action
• Contact gt Edit
• Speed Dial is an attribute

56
More Modes

• Normans stopwatch examples
• Fun with projectors at a meeting
• Had just plugged in the ethernet cable
• Projector not plugged in
• Presenter looking at his own screen
• Moved mouse, got no corresponding cursor movement
• Surprised by lack of feedback

57
Thinkpad numeric keypad

• To enable or disable the numeric keypad, press
  and hold Shift and then press NumLk (ScrLk).
• If the numeric keypad is enabled, press and hold
  Shift to use the cursor- and screen-control keys
  temporarily.
•   Note The functions of the cursor- and
  screen-control keys are not printed on the keys

58
Lotus Notes Email

• When does right button menu provide access to the
  persons phone number?
• Only sometimes

59
Object-Action Interface paradigm

• Task
• Objects
• Actions
• The level-zero, starting-point design
• Put objects on UI
• Menus, Images
• Put actions in menus

• Interface
• Objects
• Actions

ObjectAction should help with the modes problem
60
Noun first or verb first?

• We talk
• Subject, then Verb, then Object Noun
• Sally threw the ball
• For CHI
• Object, then Verb is better Users attention is
  on content
• Noun-verb attention sequence
• content, command
• Verb-noun attention sequence
• content, command, content
• Its a mode one more switch of attention
• Less easy to back out

61
Noun-verb example

• Application to requisition products
• Before redesign
• 1. Choose dept, 2. Choose item, 3. Confirm
  (Cancel)
• There was a default department
• Users failed to select the correct when at a
  different-than-usual computer
• After
• 1. Choose item
• 2. To which dept to deliver

62
Lecture map GUI Building Blocks

• Menus
• Object-Action paradigm
• Modes memory
• GUI / Direct Manipulation
• Command Languages
• Form Fill-in
• Sequencing wizards

63
Direct Manipulation paradigm

• Object-Action paradigm
• Visual representations of domain objects
• and object attributes (location, shapes, etc.)
• Control locus of attention action intuitively
• Control cursor motion through physically obvious
  and intuitively natural means
• Provide rapid response and display
• Display results of an action immediately

64
Direct Manipulation Attributes

• Visual, labeled icons/cursors for actions
• Rapid, incremental changes
• Easily reversible actions
• User does not need to remember syntax
• Order of actions not strictly enforced
• Or not necessary to remember
• One row per object, with attributes
• Incorrect syntax is impossible

65
Direct Manipulation Benefits

• Novices learn quickly
• Intermittent users can retain concepts
• Experts work rapidly
• Error messages are rarely needed
• Users see if their actions are furthering their
  goals
• Users experience less anxiety
• Users gain confidence and mastery

66
Direct-Manipulation Example 1

• Drag Drop
• Windows Mac desktop displays
• Windows Explorer
• Moving text / contents in MS Word, Excel, etc.
• Problems with modes
• Graphical editing tools

http//www.cs.umd.edu/hcil/spotfire/
67
WIMP GUIs

• Window
• Icon
• Menu
• Pointer
• Implicitly, weve been talking about this

68
Fitts Law GUIs

• Fitts Law Quicker hit higher accuracy with
  pointing device for targets that are
• Larger
• Closer
• This explains why Mac menubar is better
• Its a mile high
• Because mouse stops at top of screen
• Even if users gesture doesnt

69
Fitts Law examples

• Why is Windows Taskbar at the bottom of the
  screen?
• Why might user-sized windows be better than
  maximized ones?
• Bruce Tognazzini, www.asktog.com
• A redesign example in home health care
• Compare the next two screens

70
Fitts Law Comparison

• Option A Main-Header-Detail.
• Small click targets
• Farther mouse travel
• Option B redesign has
• Larger click targets (entire text)
• Shorter mouse excursions
• Inferred (programmatic) click for Q when A
  clicked
• Designs also differ in layout of information.

71
Problems with Direct Manipulation 1

• Can only work with visible objects
• Spatial or visual representations can be too
  spread out
• Designs may force valuable information off of the
  screen
• Must select each object by hand
• Sometimes easier to do by description
• Sometimes more accurate to specify in text

72
Problems with DM - 2

• Precision is limited to motor control input
  device
• Typing commands with keyboard may be faster
• Too much mousing can hurt (Carpal Tunnel)
• Keyboard equivalents are much appreciated
• There may be no good place to put a mouse

73
Problems with DM - 3

• Users must learn the graphical representations
• The graphical representation may be misleading
• High-level flowcharts and database-schema can
  become confusing
• Need proper perceptual-motor tuning
• Try scrolling accurately in Excel
• Or in the standard Mac text editor

74
A Mac Principle Use familiar metaphors

• Can be limiting, e.g. Trash multiple devices
• Phelps tractor had inappropriate metaphor
• Features may not map (Typewriter)
• Folders infinitely nested is not real-world

75
The Anti-Mac Interface

• The basic principles of the Anti-Mac interface
  are
• The central role of language
• A richer internal representation of objects
• A more expressive interface
• Expert users
• Shared control

76
Lecture map GUI Building Blocks

• Menus
• Object-Action paradigm
• Modes memory
• GUI / Direct Manipulation
• Command Languages
• Form Fill-in
• Sequencing wizards

77
Command language paradigm

• In the beginning, there was command language
• Kind of like, how we talk
• Print that File
• Is this just old stuff?
• No
• Cell phone voice commands
• Programming

78
Command Languages Good

• Does not require lots of real estate
• Visual UIs require lots of real estate
• Its hard to fit new stuff on a GUI
• Does not even require a visual UI
• Telephone key/voice UIs
• Hands-free (voice) control

79
Command Language Good

• Fast user input, once learned
• Can yield fast responses
• Extensible
• Freedom from real estate makes it extensible
• User-defined command strings sets can be named,
  stored, invoked
• Can apply a command to a set of objects
• Easier to program, since syntax gets checked
  after the user has guessed

80
Command Language Bad

• Depends on recall, not recognition
• Recall cmds, and correct syntax
• Steep learning curve
• Commands may seem arbitrary to users
• dir, cat
• More commands ( options) --gt more training
  errors
• Verb-noun, unless theres a selection mechanism

81
Command language principles

• Consistent Argument Ordering helps
• SEARCH message id, file no
• TRIM message id, segment size
• Inconsistent order of arguments hinders
• SEARCH message id, file no
• TRIM segment size, message id
• Do optional arguments go last?
• That can disrupt the intuitive order of args

82
Visual Studio

• A pretty good blend of command language menu
• Menu-based or command language

83
Lecture map GUI Building Blocks

• Menus
• Object-Action paradigm
• Modes memory
• GUI / Direct Manipulation
• Command Languages
• Form Fill-in
• Sequencing wizards

84
Form Fill-in

• Appropriate when
• Content is user-generated
• Many fields of data must be entered
• Supports particular kinds of content
• Categorized
• Open-ended
• Most information can be visible
• Few instructions are required for many types of
  entries

85
Form Fill-in

• Users must be familiar with
• Field-label meanings
• Keyboards
• Use of TAB key or mouse to move the cursor
• Use of the ENTER and/or RETURN key.
• Permissible field contents
• Error correction methods

86
Form Fill-in Guidelines 1

• Meaningful title
• Familiar field labels
• Consistent terminology and abbreviations
• Comprehensible instructions
• Visually appealing layout of the form
• Optional / Required fields clearly marked
• Visible space and boundaries for data-entry
  fields

87
Form-Fill-in Guidelines 2

• Logical grouping and sequencing of fields
• Convenient cursor movement
• Data is accepted retained when the control
  loses focus
• No matter how that happens
• Efficiency
• Sensible defaults (e.g. Quantity 1, not 0)
• Start form with focus in the appropriate field

88
Form-Fillin Guidelines 3

• Business Rules must be made clear
• Error handling
• Error prevention
• Correction for individual characters and entire
  fields
• Error messages for unacceptable values
• Explanatory messages for fields
• Completion signal

89
Input fields Editable?
Microsoft Windows user interface guidelines
Then
Microsoft Windows user interface guidelines
Vista
90
Input fields Editable?
Apple Macintosh user interface guidelines
91
Form-Fillin Components

• Specialized controls prevent datatype errors
• Text fields
• Regular
• Coded Fields (Masked Edit)
• Telephone numbers, Social-security numbers, Money
• Special Data
• Times, Dates
• List and combo boxes
• Combo vs dropdown

92
Tables grids

• Two-dimensional organization
• Display (output) or input interface
• Can be used for List of items with attributes
• Possibly a form fill-in paradigm
• In-cell editing can be difficult
• Focus is tricky
• Keystroke/navigation behavior can differ from
  users expectations
• Example is MS DataGridView

93
Grouping functions

• Tabs
• Dialogs
• Wizard
• Open property sheets
• Graphical representations
• User interface design patterns

94
Application structure flow

• Hub
• Example Main window dialogs
• Multiple focal windows specific action-oriented
  sub-windows
• Interview

The Designer's Guide to Web Applications, Part
I Structure and Flows, By Hagan Rivers
95
Dialog Boxes

• Combination of menu and form-fillin techniques.
• Related to a specific task.
• Display near the appropriate related info
• External Relationship
• Smooth appearance and disappearance
• Distinguishable but small boundary
• Size small enough to reduce overlap problems
• Clear how to complete/cancel
• Standard buttons (OK, Cancel)

96
Parameters for dialog boxes

• Modal or nonmodal
• Application modal or system modal
• Time-out or persistent
• Always-on-top or not

97
Dialog persistence Guideline Do what makes sense

• Who requested it
• User (directly) or System
• Should user complete the dialog task first
• Does it set modes

98
Information visualization

• Perceptual tasks
• Timelines, calendars
• Treemaps, marketmaps
• treecones
• Fisheye views