Chapter 23: GUI Design

Spreadsheet-Based Decision Support Systems

Prof. Name name@email.comPosition (123) 456-7890University Name

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

Users, Tasks, and Goals

Clarity

Consistency

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

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

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.

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

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

Consistency Examples

Navigational buttons should be together and consistent.

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

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’d)

Tab Strips and Multi Pages– Minimize the number of tabs

– Avoid hiding some tabs

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

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

Effective and Ineffective GUI Designs (cont’d)

Dynamic Controls– Make inactive controls grayed and locked– Change their tab order

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

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

Additional Links

(place links here)