Published on

Published in: Technology, Education
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide


  1. 1. Graphical User Interfaces How not to design them.
  2. 2. What is a Graphical User Interface? <ul><li>A Graphical User Interface or GUI for short is a type of interface that allows the operator (ex. Computer User) to interact with a computer through graphical or visual elements such as Windows, Icons, Pictures. More commonly known on the User Interface as Widgets. </li></ul>
  3. 6. History of the GUI <ul><li>Researcher at Xerox designed the first application with a GUI – the Xerox Star in 1977. </li></ul><ul><li>Steve Jobs first released the “Apple Lisa”, which was unsuccessful until Steve Jobs joined the Macintosh project to launch the “Macintosh” computer, which first become successful in 1984. </li></ul>
  4. 7. Xerox Star
  5. 8. Apple Lisa Retail Value: $9,995 US ($20,893 in 2007 dollars)
  6. 9. GUI Bloopers <ul><li>GUI-Component Bloopers </li></ul><ul><li>Layout and Appearance Bloopers </li></ul><ul><li>Textual Bloopers </li></ul><ul><li>Interaction Bloopers </li></ul><ul><li>Web Bloopers </li></ul><ul><li>Responsiveness Bloopers </li></ul>
  7. 10. GUI-Component Bloopers <ul><li>Decisions about how to use on-screen controls. One very common GUI-component blooper is confusing checkboxes with radio buttons. </li></ul><ul><li>Checkboxes are for independent on/off settings, while radio buttons are for choosing one value from several possible values. </li></ul>
  8. 11. Layout Appearance Blooper <ul><li>Errors in arranging and presenting information and controls. One such blooper is displaying windows in odd areas of the computer screen. </li></ul><ul><li>For example, one company had a software product that sometimes displayed new windows off screen, where users could not see them. </li></ul>
  9. 12. Textual Bloopers <ul><li>Poorly written text in software. The most common textual blooper is describing errors in terms only programmers understand. </li></ul><ul><li>For example, one web-based scheduling application displays the following message if you try to schedule two events for the same time: &quot;Error-00001: unique constraint (PA_REPORT_HEADERS_U1) violated.&quot; Instead, it would be better worded: &quot;You can’t schedule two events for the same time.&quot; </li></ul>
  10. 13. Interaction Bloopers <ul><li>Violations of high-level design principles that make life difficult for software users. </li></ul><ul><li>Common Interaction blooper is: &quot;Cancel button doesn’t cancel.&quot; </li></ul>
  11. 14. Web Bloopers <ul><li>Problems that are specific to web sites and web-based applications. </li></ul><ul><li>One common blooper that has often been see is a web site internal 404s. </li></ul>
  12. 15. Responsiveness Bloopers <ul><li>Aspects of a product or service’s design that interfere with users’ work-pace. Most software doesn’t provide sufficient feedback about what it is doing. </li></ul><ul><li>Ex. Buttons that don’t respond to clicks in the required 0.1 second (so we click them again), scrollbars that can’t keep up with the mouse, and lengthy operations that don’t indicate progress or that can’t be stopped before completion. </li></ul>
  13. 16. Unintuitive Course of Action
  14. 17. Oversimplification
  15. 18. Poor Grouping Layout
  16. 19. Reducing Human Error
  17. 20. Random Layout
  18. 21. Solution
  19. 22. User Friendly Message
  20. 23. Am I really cancelling?
  21. 24. References <ul><li>The presentation here has been based of Jeff Johnson’s book on GUI Bloopers Do’s and Don’ts. </li></ul><ul><li> </li></ul>
  22. 25. Acknowledgements <ul><li>David Wishart </li></ul><ul><li>The IT Team </li></ul><ul><li>Members of the lab </li></ul>