Designing a graphical user interface

Designing a GUI

• Most GUIs have a familiar mixture of windows, dialog boxes, tabs to help structure the interaction

• Menus, tool bars, command buttons, enable user to control interaction

• Option buttons, check boxes, list boxes, enable user to enter info

• All these are referred to as widgets

Designing a GUI

• How do you choose the correct widget?• How do you use the widget effectively?• How do you combine widgets?

Style guides for GUIs

• http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnwue/html/welcome.asp

• http://developer.gnome.org/projects/gup/hig/1.0• http://developer.apple.com/documentation/UserE

xperience/Conceptual/OSXHIGuidelines/index.html

Three steps

• Choose widgets to structure the interaction

• Choose widgets to control the interaction• Choose widgets to enter information

Choosing widgets to structure the interaction

Using primary windows

• Primary windows often correspond to the main task objects in the conceptual design

• In an office style app, we may have one primary window for the word processor and another for the spreadsheet program. Main task objects are– Document being written– Spreadsheet being created

• Only a small number of primary windows in a UI– Act like bases for users to keep returning to– Sometimes used as a launch pad (allows you to jump into

other primary windows)

Using secondary windows

• Typically complement primary windows, providing additional functionality and support for the user

• Message boxes– Pass messages to the user– These messages often relate to problems that

have arisen or situations that the user needs to deal with urgently

More on message boxes

• Often modal (must click on them if you want to continue), modeless do not impose this– Used to alert user to immediate attention, and not

to enter any more data– Must contain a good diagnosis– Can be irritating because you do not invoke, the

system does, but you have to respond to them!– Could confuse novices– Modal vs modeless depends on needs of users

and task

Dialog boxes

• Invoked by the user• Used where additional information is needed to

carry out a task• Can be complex screen entities, containing text

fields, command buttons, and so on• Mostly modeless (can swap to other windows)• User may need to work through a sequence of

dialog boxes in a strict sequence to complete a task (in this case modal dialog boxes make sense) – this is also called a wizard

Using tabs

• Tabs are used for classifying the properties of a task object represented by a window

• Index card metaphor• Issues when using tabs

– Is the information on the different tabs independent?– How many tabs do you need?– Do the tabs need to be completed in a specific order?

Choosing widgets to control the interaction

Using menus

• Drop down menus– Most common form

• Cascading menus– User must have good mouse control

• Roll-up menus– Used to save screen space

• Pop up menus– Most common tasks for current position

Issues with using menus

• How do you name menu items?– If you do not understand the purpose of a menu item, you

do not know when to use it• Do the menus allow the user to do what they want

to do and no more?– Must reflect what the user wants to do and not just access

to functions in the program• How do you order the menu bar an menu items?

– Use card sort technique

Using toolbars

• Toolbars complement the menu hierarchy• Range of frequently used commands• Enable the experienced user to operate the SW

quickly• Different toolbars specializing in a different area

of the program’s functionality• Appear below the menu bar in primary windows• Can also appear in secondary windows (palette

windows)• Be careful choosing the icons!

Using command buttons

• Typically these are used for controlling the operation of dialog boxes

• Like toolbars, always visible• Issues to consider;

– How will you label them?– How will you position them on the screen?

• Typically at the bottom of dialog boxes• In our culture, most important on the left end of horizontal

lines of buttons and at the top of vertical columns of buttons

– What size should the buttons be?• Different lengths are ok if they are in a row

Choosing widgets to enter information

Option buttons and check boxes

• These are a quick and accurate way of entering information into the computer system.

• Option buttons (radio buttons) are used when the user needs to choose one option out of a selection

• Check boxes are used when the user needs to choose more than one option out of a selection

Figure 6.12 A checkbox from MS Outlook from Windows XP.

Questions when using check boxes

• How many options can you reasonably represent in this way?– 1 out of 3? 1 out of 30?

• How should the options be grouped and laid out on the screen?– Vertical listing reduces ambiguity but takes more screen

space• How should they be ordered on the screen?

– Alphabetic, in order of most likely answer, other predictable way

• How should the options be labeled?– Something the user will understand!

Using list boxes

• If you want to allow the user to choose from a large number of options, then list boxes can be the answer

• Some list boxes restrict the user to selecting one option, multiple-selection list boxes allow more than one option

• Some drop down, others are permanently displayed

Figure 6.15 A typical Windows XP list box.

Questions when using list boxes

• How many options should be displayed?– Guideline is 3 to 8

• How much space is available?– For permanent of should a drop-down be used?

• Are the options likely to change?– If so, list boxes are more flexible than option buttons or

check boxes• Are multiple selections needed?

– If so, list box should allow for this• What default values should be used?

– This can speed up the use of the program

Text boxes

• Most flexible widget for entering information– Not possible to anticipate input– Do not want to constrain the choice

• Can be a disadvantage as well– GUI front end to a DB (Male, male, M)

• Used in conjunction with list boxes• Result is a combo box

– Matches characters being entered into the textbox against the list

Figure 6.18 A typical form fill user interface.Source: http://bookshop.blackwell.co.uk.

Questions when using text boxes

• What size and shape should the text box be?– Should indicate how much information is required (# lines

and line length)• Do you know how much information the user

wants to enter?– If not, then the text box should be scrollable

• Will you want to gray out the text box?– May want to show that the text box cannot be changed

Combining GUI widgets

Combining widgets

• UI is more than an isolated selection of widgets

• How do you put together a sequence of screens to complete a task for the user?

• How do you extend you design to incorporate new features?

Color

• Color vision• Designing with color• Color conventions

Figure 5.31 Microsoft default colours.

Table 5.1 Some Western colour conventions. Source: after Marcus, A. (1992) Graphic Design for Electronic Documents and User Interfaces, p. 84. © 1992 ACM, Inc. Reprinted by permission.

Color and usability

9/24/97 41

Color and Usability

• From small electronic objects to large airports, color plays a powerful role in helping you use the device or navigate the space

• Unfortunately, color is only beginning to gain recognition as a critical component in "usability."

9/24/97 42

Color and Usability

• Think about the last time you were in a train station or airport– How easy was it to use it? – How easy was it to find your way? – If you didn't speak English (or the native language), were there

recognizable symbols to guide you?

• Travelers need to get to some place -- to a gate, to a baggage claim area, to a taxi, to food and other necessities

9/24/97 43

Color and Usability

• The directional signs in most airport fail miserably, especially those in the USA

• By contrast, Shiphol Airport in Amsterdam is extremely successful. – Bright yellow signs capture the attention of even the most

weary traveler– Icons communicate where languages fail

9/24/97 44

Color and Usability

• The image on the next page demonstrates how highly visible the yellow sign is

• Notice that it has to compete with wide expanses of window and the strong natural light surrounding it.

9/24/97 45

Schiphol Airport

9/24/97 46

Schiphol Airport

9/24/97 47

Color is critical

• Color is the critical factor in the success of the visibility and readability of these signs

• The smaller the object, the more difficult it is to find the right way to use the device

9/24/97 48

Buttons, buttons everywhere. Which one for what?

9/24/97 49

Buttons

• A TV remote control, a radio, a car alarm and a food blender (minus the top)

• Each of these objects relies on a wide variety of button controls

• Each device has a control panel• The issue is human interface design

9/24/97 50

The Food Blender

• ( If you're not familiar with it, a blender is a machine which can chop onions, whip cream, grind bread into bread crumbs, make milkshakes and margaritas, and crush ice

• At the base of the container are sharp blades which rotate at extremely fast speeds

• Controlling the speed controls the consistency of the finished product.)

9/24/97 51

Food blender "control panel"

9/24/97 52

The Food Blender

• There are three red buttons and seven white buttons– Why are there three red buttons? – Are there three critical functions?

• The three red buttons definitely stand out from the rest– This certainly indicates that there's something more

important for these three buttons than the other buttons.

9/24/97 53

The Food Blender

• Before we take an even closer look, pause for a moment and ask what's the most important thing that you need to control in this appliance– Imagine that you've filled the blender with peanuts– You want to chop them into small pieces for cookies– You don't want them to turn to powder and you don't want

peanut butter

9/24/97 54

The Food Blender

• Also, consider the fact that a hand can fit inside the container

• Frequently you remove the lid and add things to the mixture as the blades are rotating

• Think about it.

9/24/97 55

OFF

• You have to be able to turn the machine off for safety first of all and secondly for the function

• You need to stop the machine when the appropriate amount of chopping,whipping or mixing has been achieved

• Does this mean that this blender has three off buttons?

9/24/97 56

OFF

Apparently the red is used for three of the slower speeds and the off button

Confusing? How would you redesign this?

9/24/97 57

Bad money machines

• Another "usability" example is the automatic credit card device used in many stores in the USA

• Background– When you're at a cash register, typically you give your cash

or credit card to the clerk for processing– Nowadays, if you want to pay by credit card, YOU have to

enter it in a small machine at the cash register area

9/24/97 58

Bad money machines

• Unfortunately, there are many different machines in use and each one has different buttons and colors

• Since there is no "standard" the customer has to adapt to different machines in different stores.

9/24/97 59

Bad money machines

9/24/97 60

Bad money machines

• In this example, first you must slide your car through the narrow opening at the far right, making sure the magnetic stripe is facing the right side

• If you succeeded in sliding it the right way, the screen indicates the amount of purchase

• If it's the correct amount, you must press the "YES" button

9/24/97 61

Bad money machines

• If there's an error (which doesn't happen very often) you press the "NO" button

• In the illustration below, the "NO" button is the red button on the far right

• The "YES" button is the very dark blue button directly underneath it.

Bad money machines

• Time and time again, customers fail to find the "YES" button– the red button catches the eye and on reflex, they

press "NO."

9/24/97 63

Bad money machines

• A closer look at these colors– You can argue a case for using red for NO– Red is an excellent color for emergencies and it definitely

symbolizes "stop." – But in 99% of all transactions, a customer will want to indicate

"YES." – Dark muted colors don't grab your attention– There is usually quite a delay before this button is found and

pressed

9/24/97 64

Bad money machines

• The entire "interface" of this machine needs improved color communication.

• Varying the size and placement of the most important buttons would help a person use any version of these machines successfully

9/24/97 65

What about a medium size ordinary object with no buttons to press?

9/24/97 66

The Trash Receptacle

• Consider the importance of a trash receptacle– In some situations it should be highly visible to prevent littering– In other situations, such as a garden park, it shouldn't interfere with the

natural landscape

• The same considerations for usability apply• This example is from Amsterdam, The Netherlands.

9/24/97 67

The Trash Receptacle

9/24/97 68

The Trash Receptacle

• Notice the well designed symbols which successfully communicate the intended usage

• Not all trash cans are this sensitive to international communication

• A case in point is the icon used for a trash can on computers

• Metal trash cans with a lid are not used in every country in the world.

9/24/97 69

Color and usability

• Another usability issue• In the world of computers, it's known as user-

interface design• From the visual interface of the operating system to

the software components and peripherals, colors and symbols help you find your way and get the job done

9/24/97 70

The Trash Receptacle

• In the same way that color works in an international airport, color combined with shapes and symbols will mean the difference between successful computer-human interaction or confusion

• Marketing psychologists state that a lasting impression is made within ninety seconds and that color accounts for 60% of the acceptance or rejection of an object, person, place, or circumstance

9/24/97 71

The Trash Receptacle

• Because color impressions are both quick and long lasting, decisions about color are a critical factors in success of any visual experience

9/24/97 72

Color can sway thinking, change actions, and cause reactions

• Red means "stop" and green means "go." Traffic lights send this universal message

• Likewise, the colors used for a product, Web Site, business card, or logo cause powerful reactions

• Color sends a subliminal message, one which plays a critical role in success or failure

9/24/97 73

Color combinations can attract or distract

• The human brain requires a sense of order or it will reject whatever it sees

• If too many colors are used, the viewer will become visually confused and will reject the image

• If not enough color is used, boredom results

• The right color combinations can be as important as the individual colors

9/24/97 74

Global color communications

• Black is not the color of mourning in all cultures– In many Asian countries it is white

• Consequently, white would be an inappropriate color for a wedding gown in some countries

• On the other hand, color can and does communicate universal symbolism

9/24/97 75

Global color communications

• In all cultures, red has the fastest and most powerful effect on human emotions.

• Appropriate color use can aid user memory and facilitate the formation of effective mental models

• Ineffective use of color can degrade an application's performance and lessen user satisfaction

Cultural color associationsCountry Red Yellow Green Blue White

China Happiness Birth

Wealth

Power

Ming dynasty

Heavens

Clouds

Heavens

Clouds

Death

Purity

Egypt Death Happiness

Prosperity

Fertility

Strength

Virtue

Faith

Truth

Joy

France Aristocracy Temporary Criminality Freedom

Peace

Neutrality

India Life

Creativity

Success Prosperity

Fertility

Death

Purity

Japan Anger

Danger

Grace

Nobility

Future

Youth

Energy

Villainy Death

United States Danger

Stop

Cowardice

Caution

Safety

Go

Masculinity Purity

Galitz, Table 10.2