ACS 367 Interface Design

1
ACS 367 Interface Design
2
Graphical User Interface

• User interface
• collection of techniques mechanisms to interact
  with something

3
GUI

• Use pointing device
• primary interaction mechanism
• equivalent to human hand
• Interact with objects
• visible to user
• used to perform tasks
• Perform operations/actions on objects
• access modify

4
Direct Manipulation

• System portrayed as extension of real world
• (real-time)
• Continuous visibility of objects and actions
  WYSIWYG
• Actions
• rapid incremental
• visible display of results
• easily reversible

5
Indirect Manipulation

• Used when direct manipulation not feasible
• operation difficult to conceptualize/depict
  graphically
• graphics capability limited
• limited space or screen real estate
• operation and action learning overload
• Substitutes words text
• pull-down or pop-up menus for symbols
• typing for pointing

6
GUI Advantages

• Symbols recognized faster than text
• Faster learning
• Faster use and problem solving
• Easier remembering
• More natural
• Exploits visual/spatial cues
• Fosters more concrete thinking

7
GUI Advantages (2)

• Provides context
• Fewer errors
• Increased feeling of control
• Immediate feedback
• Predictable system responses
• Easily reversible action
• Less anxiety concerning use

8
GUI Advantages (3)

• More attractive
• May consume less space
• Replaces national languages
• Easily augmented with text displays
• Low typing requirements
• Smooth transition form command language system

9
GUI Disadvantages

• Greater design complexity
• Learning still necessary
• Lack of experimentally derived design guidelines
• Inconsistencies in technique and terminology
• May consume more screen space
• Hardware limitations

10
GUI Disadvantages (2)

• Ease of use
• best determined by design not interaction style
• Consider user preference for interaction style
• Content of graphical screen critical for
  usefulness more confusion not less if
• wrong presentation
• cluttered presentation

11
GUI Success Dependent

• On skills of designer
• On application of established principles of
  usability

12

• Hall of Fame
• Examples of good interfaces wont see many!
• Hall of Shame
• Examples of poor interfaces
• www.webpagesthatsuck.com

13
Bad Design

• How do you cancel?

14
UI Development Process

• Design cycle
• User-centered design
• Task analysis
• Rapid prototyping
• Evaluation
• Programming
• Iteration

15
Design Goals

• Aesthetically pleasing
• Clarity
• Compatibility
• Comprehensibility
• Consistency
• Control

16
Design Goals (2)

• Directness
• Efficiency
• Familiarity
• Flexibility
• Forgiveness
• Predictability
• Recovery

17
Design Goals (3)

• Responsiveness
• Simplicity
• Transparency
• Trade-Offs

18
Design Process Problemsby Gould

• Nobody gets it right the first time
• Development full of surprises
• Good design requires living in sea of changes
• Making contracts to ignore change will never
  eliminate the need for change

19
Design Process Problems (cont.)by Gould

• People will still make mistakes using best
  designed system
• Designers need good tools
• Must have behavioral design goals like
  performance design goals

20
Five Commandments in Designing for People

• 1. Gain complete understanding of users their
  tasks
• 2. Solicit early ongoing user involvement
• 3. Perform rapid prototyping and testing
• 4. Modify and iterate the design as much as
  necessary
• 5. Integrate the design of all the system
  components

21
Design Team

• Balanced design team with expertise in
• development
• human factors
• visual design
• usability assessment
• documentation
• training

22
Design Team

• Select team who can effectively
• work together
• communicate with each other
• Keep team together
• locate in close proximity

23
Usability

• Little to do with icons or flashy graphics
• Starting goal
• let users get work done without spending a lot of
  time dealing with working the computer
• Additional goal
• help users work better and faster with
  application than without it.

24
Development of Guidelines

• Designers of Lisa Macintosh
• importance of good user interface design
• publish ideas to others
• development of set of human interface guidelines

25
Development of Guidelines

• Most important guidelines were the design
  principles -- universal
• Design principles not tied to platform
• based on human abilities and psychology
• not dependent on conventions of a particular
  platform

26
10 Basic Principles (drove design of Macintosh)

• Consistency
• allows users to learn something once and then
  apply it again again
• Aesthetic integrity
• good design is understated
• user can concentrate on information/content

27
10 Basic Principles (drove design of Macintosh)

• Perceived stability
• let user control changes
• for any change user should know about and okay
• See-and-point, Not Remember-and-type
• Direct manipulation
• lets user feel as if they directly control the
  world inside the computer

28
10 Basic Principles (drove design of Macintosh)

• Metaphors from the real world
• way to make an interface understandable to new
  users
• WYSIWYG -- What You See Is What You Get
• not something like bThis is a bold phraseb
• but like this -- This is a bold phrase

29
10 Basic Principles (drove design of Macintosh)

• Feedback and dialog
• never keep the user guessing
• study showed when no visible response to button
  click user assumed machine was hung and
  restarted it in 8.5 seconds
• Forgiveness
• humans make mistakes
• computer should allow for human mistakes
• User control

30
Additions to the Basics

• Constraints
• Intelligence
• Elegance
• Transparency
• Attention to detail

31
Additions to the Basics Constraints

• Reduce complexity
• Example of Japanese vending machine
• lead customer through the process
• general to specifics
• notify when new mail arrives?
• If yes, then -- beep, put up a notifier window,
  or both

32
Additions to the Basics Intelligence

• Augment constraints with intelligence so computer
  helps user to make proper choice
• Minor tasks taken care of
• formatting phone numbers
• option of automatically aligning objects
• Know when to stop
• let users override or turn off features

33
Additions to the Basics Elegance

• Elegant products
• dont do everything
• what they do, they do extremely well
• and they make it look easy
• Meet users requirements/needs in most simple and
  straightforward way
• Just say No -- to feature creep
• 80/20 solution

34
Additions to the Basics Transparency

• Interface transparent when user doesnt really
  notice or think about it not because user cant
  see it
• Hide features in plain sight -- no need to search
  for a particular feature
• Avoid technical jargon (computerese)
• SysErr Code -34 or The disk is full

35
Additions to the Basics Transparency

• Keep status messages simple
• general statement about whats happening
• concise statements
• Dont interrupt (or if you must do it quietly)
• problem when background process (like printer out
  of paper) interrupts a foreground task (writing
  paper/developing slide)
• results in increase in stress level for user
  performing foreground task

36
Additions to the Basics Attention to Detail

• Sentence in text
• We worry about all this because your users
  notice it to.
• What is the authors credibility? The texts?

37
Additions to the Basics Attention to Detail

• Details can destroy users faith/confidence in an
  application
• Development problems dont concern the user --
• The user wants a program that looks and works
  exactly the way it should

38
(No Transcript)