1 / 20

CSC111H User Interface Design - some guidelines

CSC111H User Interface Design - some guidelines. Dennis Burford dburford@cs.uct.ac.za. 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?. Layout of GUI.

zorana
Download Presentation

CSC111H User Interface Design - some guidelines

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CSC111HUser Interface Design - some guidelines Dennis Burford dburford@cs.uct.ac.za

  2. 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?

  3. 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)

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

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

  6. … and this one?

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

  8. Example How can this layout be made neater?

  9. … and this one?

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

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

  12. 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?)

  13. Colours • Do colours serve a purpose in the GUI? • What colours should you use in your GUI? • What about consistency and simplicity?

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

  15. 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)

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

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

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

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

More Related