Graphical User Graphical User InterfacesInterfaces

How not to design them.How not to design them.

What is a Graphical User What is a Graphical User Interface?Interface?

A Graphical User Interface or GUI A Graphical User Interface or GUI for short is a type of interface that for short is a type of interface that allows the operator (ex. Computer allows the operator (ex. Computer User) to interact with a computer User) to interact with a computer through graphical or visual elements through graphical or visual elements such as Windows, Icons, Pictures. such as Windows, Icons, Pictures. More commonly known on the User More commonly known on the User Interface as Widgets.Interface as Widgets.

History of the GUIHistory of the GUI

Researcher at Xerox designed the first Researcher at Xerox designed the first application with a GUI – the Xerox Star application with a GUI – the Xerox Star in 1977.in 1977.

Steve Jobs first released the “Apple Steve Jobs first released the “Apple Lisa”, which was unsuccessful until Lisa”, which was unsuccessful until Steve Jobs joined the Macintosh project Steve Jobs joined the Macintosh project to launch the “Macintosh” computer, to launch the “Macintosh” computer, which first become successful in 1984.which first become successful in 1984.

Xerox StarXerox Star

Apple LisaApple Lisa

Retail Value: $9,995 US ($20,893 in 2007 dollars)

GUI BloopersGUI Bloopers

GUI-Component BloopersGUI-Component Bloopers Layout and Appearance BloopersLayout and Appearance Bloopers Textual BloopersTextual Bloopers Interaction BloopersInteraction Bloopers Web BloopersWeb Bloopers Responsiveness BloopersResponsiveness Bloopers

GUI-Component BloopersGUI-Component Bloopers

Decisions about how to use on-Decisions about how to use on-screen controls. One very common screen controls. One very common GUI-component blooper is confusing GUI-component blooper is confusing checkboxes with radio buttons. checkboxes with radio buttons.

Checkboxes are for independent Checkboxes are for independent on/off settings, while radio buttons on/off settings, while radio buttons are for choosing one value from are for choosing one value from several possible values. several possible values.

Layout Appearance Layout Appearance BlooperBlooper

Errors in arranging and presenting Errors in arranging and presenting information and controls. One such information and controls. One such blooper is displaying windows in odd blooper is displaying windows in odd areas of the computer screen. areas of the computer screen.

For example, one company had a For example, one company had a software product that sometimes software product that sometimes displayed new windows off screen, displayed new windows off screen, where users could not see them. where users could not see them.

Textual BloopersTextual Bloopers

Poorly written text in software. The most Poorly written text in software. The most common textual blooper is describing errors common textual blooper is describing errors in terms only programmers understand. in terms only programmers understand.

For example, one web-based scheduling For example, one web-based scheduling application displays the following message application displays the following message if you try to schedule two events for the if you try to schedule two events for the same time: "Error-00001: unique constraint same time: "Error-00001: unique constraint (PA_REPORT_HEADERS_U1) violated." (PA_REPORT_HEADERS_U1) violated." Instead, it would be better worded: "You Instead, it would be better worded: "You can’t schedule two events for the same can’t schedule two events for the same time." time."

Interaction BloopersInteraction Bloopers

Violations of high-level design Violations of high-level design principles that make life difficult for principles that make life difficult for software users. software users.

Common Interaction blooper is: Common Interaction blooper is: "Cancel button doesn’t cancel." "Cancel button doesn’t cancel."

Web BloopersWeb Bloopers

Problems that are specific to web Problems that are specific to web sites and web-based applications. sites and web-based applications.

One common blooper that has often One common blooper that has often been see is a web site internal 404s. been see is a web site internal 404s.

Responsiveness BloopersResponsiveness Bloopers

Aspects of a product or service’s design that Aspects of a product or service’s design that interfere with users’ work-pace. Most interfere with users’ work-pace. Most software doesn’t provide sufficient feedback software doesn’t provide sufficient feedback about what it is doing. about what it is doing.

Ex. Buttons that don’t respond to clicks in the Ex. Buttons that don’t respond to clicks in the required 0.1 second (so we click them again), required 0.1 second (so we click them again), scrollbars that can’t keep up with the mouse, scrollbars that can’t keep up with the mouse, and lengthy operations that don’t indicate and lengthy operations that don’t indicate progress or that can’t be stopped before progress or that can’t be stopped before completion. completion.

Unintuitive Course of Unintuitive Course of ActionAction

OversimplificationOversimplification

Poor Grouping LayoutPoor Grouping Layout

Reducing Human ErrorReducing Human Error

Random LayoutRandom Layout

SolutionSolution

User Friendly MessageUser Friendly Message

Am I really cancelling?Am I really cancelling?

ReferencesReferences

The presentation here has been The presentation here has been based of Jeff Johnson’s book on GUI based of Jeff Johnson’s book on GUI Bloopers Do’s and Don’ts.Bloopers Do’s and Don’ts.

http://books.elsevier.com/http://books.elsevier.com/companions/9781558605824/companions/9781558605824/

AcknowledgementsAcknowledgements

David WishartDavid Wishart

The IT TeamThe IT Team

Members of the lab Members of the lab