graphical user interfaces l.
Skip this Video
Loading SlideShow in 5 Seconds..
Graphical User Interfaces PowerPoint Presentation
Download Presentation
Graphical User Interfaces

Loading in 2 Seconds...

play fullscreen
1 / 39

Graphical User Interfaces - PowerPoint PPT Presentation

  • Uploaded on

Graphical User Interfaces. Andy Mayer. 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.

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

Graphical User Interfaces

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
  • 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
what goes into a gui 1
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
what goes into a gui 14
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
what goes into a gui 15
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
the software development process
The Software Development Process
  • Process experts
  • Users
  • Programmers
successful software avoiding unpleasantly surprised users
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
how users navigate
How Users Navigate
  • Exploration and unveiling process
  • Expected functionality
  • Analogies to the real world
  • Forgiveness
  • # clicks to perform an action
efficient interfaces
Efficient Interfaces
  • Streamlined design
  • Simplification
  • Leverage
  • Reduction
the final product
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
helping the user
Helping the User
  • Short term memory
  • Consistency
    • Users will attempt to add meaning to elements whether or not the programmer intended it
visual techniques use of color
Visual Techniques – Use of Color
  • Use of color
    • 3-5 colors
    • Incremental impact of each additional color
  • Don’t do this
  • Don’t do this
  • Don’t do this
visual techniques layout
Visual Techniques - Layout
  • Ratios
  • Grids
  • Templates
  • To frame or not to frame
  • Visual weight
gui design checklist 1
GUI Design Checklist [1]
  • The GUI reflects the user’s 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
gui design checklist 118
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..
gui design checklist 119
GUI Design Checklist [1]
  • The GUI design reflects any unusual characteristics of the user’s environment
    • Dangerous or hazardous work areas
    • Excessive noise
    • Bright or dim lighting
    • Etc..
gui design checklist 120
GUI Design Checklist [1]
  • The design is optimized for human perception and information processing abilities
    • Short term memory considerations
    • Recognition over recall
gui design checklist 121
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
gui design checklist 122
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
gui design checklist 123
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
gui design checklist 124
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
gui design checklist 125
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
gui design checklist 126
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
gui design checklist 127
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 don’t produce unexpected outcomes
gui design checklist 128
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.
gui design checklist 129
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.
gui design checklist 130
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.
gui design checklist 131
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 user’s attention.
gui design checklist 132
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.
gui design checklist 133
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.
gui design checklist 134
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.
gui design checklist 135
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.
  • 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