Graphical User Interfaces - PowerPoint PPT Presentation

About This Presentation
Title:

Graphical User Interfaces

Description:

Quotations from Page 10/11, Page 22 Figure 2-5, and Appendix B. Mullet, K. & Sano, D. Designing Visual Interfaces Communication Oriented Techniques. ... – PowerPoint PPT presentation

Number of Views:155
Avg rating:3.0/5.0
Slides: 40
Provided by: andrew852
Category:

less

Transcript and Presenter's Notes

Title: Graphical User Interfaces


1
Graphical User Interfaces
  • Andy Mayer

2
References
  • Ritter, D.J. LabVIEW GUI Essential Techniques.
    McGraw Hill, 2002.
  • - Quotations from Page 10/11, Page 22 Figure 2-5,
    and Appendix B
  • Mullet, K. Sano, D. Designing Visual Interfaces
    Communication Oriented Techniques. Prentice
    Hall, 1995.
  • LabVIEW Style Guide http//www.ni.com/pdf/manuals/
    321393d.pdflabview_style_guide

3
What goes into a GUI 1
  • The look (10)
  • Aesthetic quality of organization and layout
  • Color choices
  • Font choices
  • Graphic elements
  • Overall visual impression
  • Consistency

4
What goes into a GUI 1
  • The feel (30)
  • GUI object choices Does behavior match
    functionality
  • GUI object location, proximity Affect on task
    flow
  • Access to critical and frequently used items
  • Navigation and freedom of movement
  • Appropriate feedback for each user action
  • Interface text button, menu, and dialog labels
    and messages

5
What goes into a GUI 1
  • Conceptual elements (60)
  • System metaphors
  • Ease of use
  • The power of each GUI action
  • Depth of GUI
  • Flexibility and capacity for growth and change

6
The Software Development Process
  • Process experts
  • Users
  • Programmers

7
Successful Software Avoiding Unpleasantly
Surprised Users
  • Early GUI
  • Prototypes
  • User interaction
  • Watch users interacting with the program
  • Good understanding of the usage model
  • User buy-in

8
Evolving User Understanding
1
9
How Users Navigate
  • Exploration and unveiling process
  • Expected functionality
  • Analogies to the real world
  • Forgiveness
  • clicks to perform an action

10
Efficient Interfaces
  • Streamlined design
  • Simplification
  • Leverage
  • Reduction

11
The Final Product
  • The programmer mostly looks at the code
  • The user only looks at the GUI
  • Programmers often put relatively little effort
    into what the customer is actually evaluating

12
Helping the User
  • Short term memory
  • Consistency
  • Users will attempt to add meaning to elements
    whether or not the programmer intended it

13
Visual Techniques Use of Color
  • Use of color
  • 3-5 colors
  • Incremental impact of each additional color
  • Dont do this
  • Dont do this
  • Dont do this

14
Visual Techniques - Layout
  • Ratios
  • Grids
  • Templates
  • To frame or not to frame

15
Alignment
  • Visual weight

16
An Example before Part 2
17
GUI Design Checklist 1
  • The GUI reflects the users mental model rather
    than the implementation model
  • Program features and functions support only
    required user goals.
  • No superfluous features have been added simply
    because they are easy to implement or as a result
    of the personal biases of the programmers

18
GUI Design Checklist 1
  • The GUI design reflects the expected
    characteristics and abilities of the user
    population
  • Visual, physical, and cognitive abilities
  • Cultural and technical background
  • Domain experience
  • Education level
  • Etc..

19
GUI Design Checklist 1
  • The GUI design reflects any unusual
    characteristics of the users environment
  • Dangerous or hazardous work areas
  • Excessive noise
  • Bright or dim lighting
  • Etc..

20
GUI Design Checklist 1
  • The design is optimized for human perception and
    information processing abilities
  • Short term memory considerations
  • Recognition over recall

21
GUI Design Checklist 1
  • All user classes are adequately represented and
    the potentially diverse needs of user classes are
    balanced appropriately
  • All GUI items are prioritized. Critical and
    frequently accessed items are prominent and more
    easily accessed than less important items

22
GUI Design Checklist 1
  • All unnecessary GUI controls and indicators have
    been eliminated
  • The GUI heirarchy geometry is optimized to reduce
    panel clutter and to minimize the total number of
    clicks required to access each function

23
GUI Design Checklist 1
  • Panel layouts and GUI object placement logically
    reflect user tasks sequences
  • The user is never required to jump between panels
    or applications to complete a single task
  • Where possible, all necessary controls for each
    task are accessible from a single panel

24
GUI Design Checklist 1
  • The user is not required to manually copy
    information displayed on one panel into a control
    on another panel.
  • The program automatically transfers shared
    information between panels and eliminates
    unnecessary busywork for users

25
GUI Design Checklist 1
  • Tedious, mundane, and predictable tasks are
    automated to improve user efficiency, but not at
    the expense of adequate user control
  • Qualified users are permitted to modify or bypass
    automation as necessary

26
GUI Design Checklist 1
  • Tool tips, control descriptions, and keyboard
    shortcuts have been included for power users
  • User actions and task sequences lead naturally
    from one to the next

27
GUI Design Checklist 1
  • The function of all GUI items is visually
    apparent and all objects including custom
    controls behave as expected.
  • GUI buttons look and respond like real buttons
    from the physical world and dont produce
    unexpected outcomes

28
GUI Design Checklist 1
  • GUI metaphors, visual or otherwise, are natural
    and consistent with their real-world counterparts
  • The GUI adheres as necessary to applicable
    standards documents and company wide style guides.

29
GUI Design Checklist 1
  • Direct user feedback has been collected and all
    design shortcomings have been (or will be)
    addressed in subsequent iterative cycles.
  • Documentation and help files have been created
    with the same level of enthusiasm and attention
    to detail as the software.

30
GUI Design Checklist 1
  • Panels appear immediately uncluttered and
    organized.
  • The style and mood of the GUI design are
    appropriate for the application and its expected
    users
  • The design style is consistent from one panel to
    the next, and all panel look as though they
    belong to the same application.

31
GUI Design Checklist 1
  • A limited number of unique design elements
    control and indicator types, colors, fonts,
    proportions, and so forth are used consistently
    and thematically thereby creating a sense of
    application-wide unity
  • Limited color palettes have been selected and
    applied consistently to enhance both aesthetics
    and mental model development.
  • Bright colors are used sparingly to attract the
    users attention.

32
GUI Design Checklist 1
  • The layout of each panel creates a visual
    hierarchy, drawing the users eyes to the most
    important items first.
  • GUI items are arranged and ordered to reflect
    natural visual scanning patterns (left to right,
    top to bottom in Western cultures). Task
    sequences are mapped directly to the natural
    scanning patterns to improve user productivity.

33
GUI Design Checklist 1
  • Positive and negative space have been used
    effectively to make panel design appear balanced
    and uncluttered.
  • GUI text, control labels, and menu text is clear,
    descriptive and concise.
  • Controls have been grouped to permit the
    elimination of redundant label text.
  • Error messages are brief, informative, and
    designed to help users locate and overcome
    difficulties.
  • Unnecessary technical jargon has been eliminated
    from panels and dialog boxes.

34
GUI Design Checklist 1
  • The selected font style, size, and color
    combinations provide adequate readability for
    users with common visual deficiencies.
  • Where panel resizing is permitted, panels have
    been designed to resize gracefully.
  • Bitmapped graphics have been avoided on resizing
    panels and the number of decoration elements have
    been kept to a minimum.

35
GUI Design Checklist 1
  • GUI panels targeted for cross-platform deployment
    have been verified visually on all target
    platforms.
  • Panels have been designed to provide a pleasing
    visual presentation, but form always follows
    function.

36
Example - old
37
Example - new
38
(No Transcript)
39
References
  • Ritter, D.J. LabVIEW GUI Essential Techniques.
    McGraw Hill, 2002.
  • - Quotations from Page 10/11, Page 22 Figure 2-5,
    and Appendix B
  • Mullet, K. Sano, D. Designing Visual Interfaces
    Communication Oriented Techniques. Prentice
    Hall, 1995.
  • LabVIEW Style Guide http//www.ni.com/pdf/manuals/
    321393d.pdflabview_style_guide
Write a Comment
User Comments (0)
About PowerShow.com