1
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!
Top Related