GUI Design

1. Spreadsheet-Based Decision Support Systems Chapter 23: GUI Design Aslı Sencer MIS 463

2. Overview • 23.1 GUI Design • 23.2 The Theory Behind Effective GUI Design • 23.3 Effective and Ineffective GUI Designs • 23.4 Summary

3. GUI Design • A graphical user interface (GUI) presents a visual display of information and objects that can present visual feedback to users. • Part of the definition of a DSS is that it is designed to be easy to use; user friendliness, graphical capabilities, and an interactive human-machine interface greatly increase the effectiveness of a DSS. • Therefore it is very important to design a user interface such that the users find it straightforward to understand and use. If the user interface is not well designed, then the application’s functionality may be diminished.

4. The Theory Behind Effective GUI Design A GUI is a communication between the users and the application. Important theoretical points when working with spreadsheet based DSS’s • Know users, tasks, and goals • Maintain clarity • Stay consistent

5. Theory Behind Effective GUI Design (cont) • Know Users, Tasks, and Goals • Who are the users? Managers? • What is the user’s knowledge of the problem? • What is their technical understanding of the model calculations? If not good, then avoid overwhelming him with the details; • hide the calculation sheet. • insert explanatory labels, total cost, annual demand, etc. • explain calculation and assumptions clearly in his own terminology. • What terminology is the user familiar with? • Define the user’s task domain (manner to manipulate data) to determine the application flow. The user is using DSS to complete a task and achieve a goal. Make him “feel” that he is supported in that. • Organize tasks with the priority and hierarchy in which it needs to be completed Ex: Obtain historical data, compute mean and st.dev., enter these into the forecast model, determine forecast, decide on order quantity from the supplier

6. Theory Behind Effective GUI Design (cont) • Clarity • Give clear instructions at the top of each spreadsheet and each form. • Buttons are clearly separated into navigation and calculation groups. • Label controls clearly so that their functionality is understood. • Control tips can be used to add detail to functionality descriptions without cluttering the form. • Give default values to clarify how data should be input. • Clear GUI design and formatting can help the user avoid making errors.If user errors are made, give clear error messages to redirect the user to correct these errors.

7. Clarity Examples • Giving clear instructions and descriptions on each sheet and form.

8. Clarity Examples (cont’d) • Buttons are clearly separated into navigation and calculation groups. • Labels clearly designate control functionality. Buttons are mixed, functionality unclear Buttons are clearly seperated

9. Clarity Examples (cont’d) • Control tips and default values are also useful for clarifying control functionality and formatting guidelines. • Clear formatting with default values can prevent input errors.

10. Theory Behind Effective GUI Design (cont) • Consistency Users are inclined to interact with an interface according to their expectations in input prompts, button locations, viewable options based on their familiarity with working with problem or with other interfaces. Consistency is important in helping the user move quickly through the user interface. Thus the user thinks that it is an easy-to-use interface. • Keep sheet titles and instructions in the same location (usually top left). • Keep navigational buttons (Back, next, Ok, cancel, exit), especially the “End” button, in the same location per sheet. • Keep input cells and output charts in the same locations for similar sheets. • Keep form instructions and command buttons in the same location for each form. • Make controls consistent by using align and same size features. • Be consistent with punctuation • Set tab order to take user from top of form to “OK” and “Cancel” buttons.

11. Consistency Examples • Navigational buttons should be together and consistent in shape, color.

12. Consistency Examples (cont’d) • Grouped textboxes should be of the same size. Numbers and other input descriptions should be consistent. Instructions should be clear.

13. Effective and Ineffective GUI Designs • Buttons • Text Boxes versus List Boxes and Combo Boxes • Tab Strips and Multi Pages • Check Boxes versus Option Buttons • Frames • Labels versus Text Boxes • Dynamic Controls • Multiple Forms • Event Procedures

14. Effective and Ineffective GUI Designs • Buttons • same size and shape • same color (unless higlighting a certain button intentionally) • Text Boxes versus List Boxes and Combo Boxes • Reduce memorization requirements of the user • Reduce possibility of errors

15. Effective and Ineffective GUI Designs (cont) • Tab Strips and Multi Pages • Minimize the number of tabs • Avoid hiding some tabs Combine tab strip and multi page into one form with several textboxes Too many tabs

16. Effective and Ineffective GUI Designs (cont) • Check Boxes versus Option Button • Option buttons should be used for mutually exclusive options • Use check boxes if multiple checks are possible • Use check boxes for “on/off” options or create an opposite option to use option buttons Option buttons for mutually exclusive options, Check boxes for the other options Option buttons used inconsistently

17. Effective and Ineffective GUI Designs (cont) • Frames • Try to have more than one frame per form • Try to have more than one control per frame. If there is only one option, like on/off, then may use an option box. • To apply frames with controls on spreadsheet, use shape boxes • Labels versus Text Boxes • Labels should be used for read-only information No need to change machine # and system, use labels instead

18. Effective and Ineffective GUI Designs (cont) • Dynamic Controls By dynamic controls, a control can be visible or invisible; or visible but inactive. • Make inactive controls grayed and locked (rather than completely making them invisible) • Lock inactive controls, so they can not be modified • Change the tab order of inactive controls; set tab stop property to false

19. Effective and Ineffective GUI Designs (cont) • Multiple Forms • Make sure to close sequential forms to avoid layering • Use layering if there is a subform to be completed before a main form can be be completed. • Event Procedures Associating actions with event procedures can be confusing to users • Command buttons: Click better than MouseDown • Text boxes: AfterUpdate better than Change (ex: error checking in a text box) • Check boxes: Change better than Click • Option buttons: Click better than Change

20. Summary • Designing an effective GUI involves the following theoretical points: knowing the users and their tasks and goals, being clear, and being consistent. • There are many effective and ineffective GUI designs for each control type. • Make dynamic controls inactive rather than hiding them, so that the users are always aware of all options. • Be aware of GUI design considerations when using multiple forms and event procedures.