1. Chapter 23: GUI Design Spreadsheet-Based Decision Support Systems Prof. Name name@email.com Position (123) 456-7890 University Name

2. 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. 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. 4 The Theory Behind Effective GUI Design  Users, Tasks, and Goals  Clarity  Consistency

5. 5 Users, Tasks, and Goals  What is the user’s knowledge of the problem and technical understanding of the model calculations?  What terminology is the user familiar with?  Define the user’s task domain to determine the application flow.

6. 6 Clarity  Give clear instructions at the top of each spreadsheet and each form.  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.  Make formatting issues clear.  Clear GUI design can help the user avoid making errors.  If user errors are made, give clear error messages to redirect the user to correct their error.

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

8. 8 Clarity Examples (cont’d)  Buttons are clearly separated into navigation and calculation groups.  Labels clearly designate control functionality.

9. 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. 10 Consistency  Consistency is important in helping the user move quickly through the user interface.  Keep sheet titles and instructions in the same location. Keep navigational buttons, especially the “End” button, in the same location per sheet.  Keep input cells and 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.  Set tab order to take user from top of form to “OK” and “Cancel” buttons.

11. 11 Consistency Examples  Navigational buttons should be together and consistent.

12. 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. 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. 14 Effective and Ineffective GUI Designs  Buttons –Same size and shape –Same color  Text Boxes versus List Boxes and Combo Boxes –Reduce memorization requirements of the user –Reduce possibility of errors

15. 15 Effective and Ineffective GUI Designs (cont’d)  Tab Strips and Multi Pages –Minimize the number of tabs –Avoid hiding some tabs

16. 16 Effective and Ineffective GUI Designs (cont’d)  Check Boxes versus Option Buttons –Option buttons should be used for mutually exclusive options –Use check boxes otherwise –Use check boxes for “on/off” options or create an opposite option to use option buttons

17. 17 Effective and Ineffective GUI Designs (cont’d)  Frames –Try to have more than one control per frame and more than one frame per form  Labels versus Text Boxes –Labels should be used for read-only information

18. 18 Effective and Ineffective GUI Designs (cont’d)  Dynamic Controls –Make inactive controls grayed and locked –Change their tab order

19. 19 Effective and Ineffective GUI Designs (cont’d)  Multiple Forms –Make sure to close sequential forms –Avoid layering if possible  Event Procedures –Command buttons: Click better than MouseDown –Text boxes: AfterUpdate better than Change –Check boxes: Change better than Click –Option buttons: Click better than Change

20. 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.

21. 21 Additional Links  (place links here)