1

2

CSC111HUser Interface Design

- some guidelines

Dennis Burford

dburford@cs.uct.ac.za

3

Discussion

• What makes a “good” user interface?

• Is the layout of controls important?

• Are colors important?

• How do we put the design principles into practise?

4

Layout of GUI

• Information should flow vertically or horizontally.

• Locate the most important information in the upper-left corner.

• Group related controls together using open space or a border (NB: labeled borders in Java)

5

Layout of GUI

• Buttons– Center buttons at bottom, or stack upper-right or lower-

right

– No more than 6 on a screen

– Most commonly used button 1st

– Meaningful captions: one line, 1-3 words only, Title Capitalisation.

6

How can the layout of this interface be improved?

7

… and this one?

8

Layout continued

• Labels:– Label each control: one line, 1-3 words.

– Align on left

– All above or to the left of component

– Follow with colon (:)

– Sentence Capitalisation.

• Minimize the number of different “margins”

9

Example

How can this layout be made neater?

10

… and this one?

11

Multiple Windows

• Only add an extra window to the program if it has a specific purpose which can’t be served by an existing window

12

Multiple Windows

• How many windows do you really need in your project?

• As a general guideline:– A program shouldn’t have more than 2 or 3 goals,

which means it shouldn’t have more than two or 3 windows.

13

Dialogs

• Don’t use dialogs unless really necessary– dialog boxes suspend the normal course of event, so only

use when really needed.

• Give modeless feedback, not modal– don’t stop the normal flow of system activities and

interaction (Message boxes are modal, because you have to click OK or Cancel to continue).

– don’t interrupt user with problems that are not serious (e.g. “Duplicates removed!” …. does the user really care?)

14

Colours

• Do colours serve a purpose in the GUI?

• What colours should you use in your GUI?

• What about consistency and simplicity?

15

Do you think these colours enhance or hinder this interface?

16

The Meaning of Colours

• Strong psychological impact• Meanings:

– Red: Hot, Alarm, Danger, Stop

– Yellow: Warning, Attention

– Green: Ok, Go, Normal

– Blue: Cool, Unemphasized

– White: Base Colour

– Black: Base Colour

• Cultural differences (Red in China=happiness)

17

Where can Colours be useful?

• Drawing attention

• Indicating status

• Conveying complex information

• NB: Use sparingly, or you will not only lose the effect, you will confuse the user (maybe even make them feel ill!)

18

Helping the user to be productive - Some Guidelines

• Less is More...– Reduce number of elements in interface without

reducing power of program: do more with less

– good user interfaces are invisible

– KISS

19

Some Guidelines

• Reflect the status of the program– Is program busy or waiting for input from user?

– Are we connected or not?

• When you need information from the user:– provide defaults, which have a good chance of being

correct, rather than providing a blank dialog.

– save previous user settings

20

Some Guidelines

• Direct, don’t discuss or demand– Don’t give useless information

– Interface should guide user, not force them

• Software is often rude and obscure– General Rule: Don’t make the user feel stupid!