1. 1

2. 2 CSC111H User Interface Design - some guidelines Dennis Burford dburford@cs.uct.ac.za

3. 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. 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. 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 1 st –Meaningful captions: one line, 1-3 words only, Title Capitalisation.

6. 6 How can the layout of this interface be improved?

7. 7 … and this one?

8. 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. 9 Example How can this layout be made neater?

10. 10 … and this one?

11. 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. 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. 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. 14 Colours Do colours serve a purpose in the GUI? What colours should you use in your GUI? What about consistency and simplicity?

15. 15 Do you think these colours enhance or hinder this interface?

16. 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. 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. 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. 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. 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!