Human Factors and User Interface Design Overview Rob Oshana.

Human Factors and User Interface Design Overview

Rob Oshana

Agenda

• Golden Rules• Design Models• Cognitive friction and the Iceberg Secret• Computers versus Humans • Know your user• Low fidelity prototyping• User interaction design

Some notable user interfaces

Interface Design

Easy to use?Easy to use?

Easy to understand?Easy to understand?

Easy to learn?Easy to learn?

Pressman, Software Engineering, version 6

Interface Design

lack of consistencylack of consistencytoo much memorizationtoo much memorizationno guidance / helpno guidance / helpno context sensitivityno context sensitivitypoor responsepoor responseArcane/unfriendlyArcane/unfriendly

Typical Design ErrorsTypical Design Errors


Golden Rules

• Place the user in control• Reduce the user’s memory load• Make the interface consistent


Place the User in Control

Define interaction modes in a way that does not force a user into unnecessary or undesired actions.

Provide for flexible interaction.

Allow user interaction to be interruptible and undoable.

Streamline interaction as skill levels advance and allow the interaction to be customized.

Hide technical internals from the casual user.

Design for direct interaction with objects that appear on the screen.

Reduce the User’s Memory Load

Reduce demand on short-term memory.

Establish meaningful defaults.

Define shortcuts that are intuitive.

The visual layout of the interface should be based on a real world metaphor.

Disclose information in a progressive fashion.

Make the Interface Consistent

Allow the user to put the current task into a meaningful context.

Maintain consistency across a family of applications.

If past interactive models have created user expectations, do not make changes unless there is a compelling reason to do so.

User Interface Design Models

• User model — a profile of all end users of the system

• Design model — a design realization of the user model

• Mental model (system perception) — the user’s mental image of what the interface is

• Implementation model — the interface “look and feel” coupled with supporting information that describe interface syntax and semantics

Mental models

• Knowledge is often described as a mental model– How to use the system (what to do next)– What to do with unfamiliar systems or unexpected situations

(how the system works)

• People make inferences using mental models of how to carry out tasks

• We sometimes get these wrong– Heating up a room

The Iceberg Secret

• An iceberg is 90% underwater• Software is the same way• Corollary 1; If you show a non-

programmmer a screen that is 90% worse, they will think the program is 90% worse

• Corollary 2; If you show a non-programmmer a screen that is 100% beautiful, they will think the program is almost done

Cognitive friction

• The relative difficulty of a task and the mental effort required to complete it

• Tasks that present choices and actions in a way the human brain will expect are measured as having a low level of friction

• Those that require thought, translation and calculation are said to be high in cognitive friction.

• SW is high in cognitive friction

High cognitive friction

Low cognitive friction

Computers versus Humans (cooper)

Computers Humans

Incredibly fast Incredibly slow

Error free Error prone

Deterministic Irrational

Apathetic Emotional

Literal Inferential

Sequential Random

Predictable Unpredictable

Amoral Ethical

Stupid Intelligent

Computers mustunderstand humancapabilities andlimitations to know;

•when to lead•when to follow•when to support

Significant change must be significantly better

A Program’s Self-presentation

• Posture– Sovereign (user’s and screen’s primary interest)– Transient (single function application)– Daemonic (invisible to users)

• Orchestration and flow– Follow mental models– Finesse (less is more)– Invisibility (even less)– Possibility vs probability

• Eliminate Excise– Don’t weld on training wheels!

An example of UI noise

Know your user

We design for the wrong people

Cooper “The Inmates are Running the Asylum”

Perpetual intermediates

Nobody wants to remain a beginner – optimize for the intermediate !!


Let’s solve the right problem


Imagine users as very intelligent but very busy!

Design for the probable case, provide for the possible case

Low fidelity prototyping – keep it simple

Tools of the trade !!

Snyder “Paper Prototyping”

Low Fidelity Prototyping


A low fidelity prototype

Be the computer !


It’s easy to get yourself out of trouble with a paper prototype!


You Don’t need too many evaluators


User interaction design

Think irrationally


Storyboards have been proven useful


A simple interaction design model

Evaluate

(Re)Design

Identify needs/ establish

requirements

Build an interactive version

Final productExemplifies a user-centered design approach

•User analysis•Task analysis•Workflow analysis•Function partitioning

User Interface Evaluation

The computer does the work, the user does the thinking

Questions ?

HumanComputer

Interaction and User Interface

Design

Southern Methodist University

Rob Oshana

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/UserExperience/Conceptual/OSXHIGuidelines/index.html

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.gnome.org/projects/gup/hig/1.0

http://developer.apple.com/documentation/UserExperience/Conceptual/OSXHIGuidelines/index.html



Exercise – 10 minutes

• See the dialog boxes on the next two pages. Consider the differences between the command buttons in the two figures with respect to the following;– Affordance of the buttons– Use of color– Shape of the buttons– Positioning of the buttons– Wording of the text inside the buttons

Typical dialog box in Windows XP

A Mac OS dialog box

Energetic Sports Center

• Domain; the wider domain is sport, and the particular application domain is the activities available at Energetic and how the sports center handles these. The center offers these activities; toddlers gym (for very young children accompanied by a parent or caregiver), football, a fitness room, women’s aerobics, and squash. It has these facilities; the main hall, fitness room, playing field, two squash courts, a bar, and social area

Layout of Energetic Sports

Energetic Sports Center

• When adults use the facility, they pay the appropriate charge for the facility plus a day membership fee. Alternatively, they can become a member of the center. It is usually worth becoming a member if you use the sports center more than once each week. The center currently has around 500 members.

• The center would like a computer system to record membership details and to book squash matches. If it is successful, the center plans to use it for other bookings in the future such as matches and events in the main hall or social area, but these are excluded at the moment

Users

• In the new system, administrative members of staff will record membership details. Most staff members work part time and rarely stay for more than a few months. There are five part-time staff members and a full-time manager

• The administrative members of staff are mainly mature and have limited knowledge and experience of computing systems. Half a day’s training will be available to each one when the computer system is installed. Energetic requires them to speak English fluently. One member of the staff is a wheelchair user and another has arthritis in her hands, which restricts her speed of typing and rules out use of a mouse

• Squash players vary in age from 18 to 70. The level of computer literacy among players varies greatly. At the moment the center does not have any wheelchair users as squash-playing members, but Energetic hopes to encourage the wheel-chair basketball players to try the game. Some of the older players are losing some hearing, and many of them have some vision problems such as wearing glasses for reading.

Main tasks

• Task 1; Adding and modifying Membership details– Energetic is a popular sports center, so staff members

add or modify membership details at least once a day; it is thus a familiar task. It usually takes about five minutes. Telephone calls often interrupt them. Membership details are currently recorded using paper forms such as the one on the next page. These are stored in a filing cabinet in the office behind the reception desk. Members pay a yearly subscription. This is due on the anniversary of first joining. There are different rates for adults (age 18 and above) and seniors (over 60). Separate arrangements are made for those under 18, depending on the activity.

Recording details at Energetic

Main tasks

• Task 2; Booking squash matches– Squash matches are recorded in a diary (previous page, part

b). This is stored at the reception desk. Bookings are often made over the telephone or after a match has just been played. There are 20 booking slots each day (two courts, each with 10 slots). Members are entitled to book the squash courts seven days ahead. Nonmembers can only book them five days ahead.

– In the new system, members can book in person or telephone the center. Players are often in a hurry, as they tend to book their next match on their way out after playing a match. They are well motivated, because if they do not book a court, then the courts may all be fully booked when they want to play their match. In this example, we are not considering how the other activities are booked

Environment

• The environment is busy and noisy. The bookings diary is kept on a notice board in the reception. The lighting is good. The environment is quite dusty and dirty due to the constant traffic of people through the foyer. There is sufficient room in the social areas for a computer to enable players to book their own squash matches.

Technology

• The center has already made the following decisions about the technology;– There will be a small network of computers. This will enable the

data to be shared– Initially there will be two computers. One computer will be at the

reception desk. This will be used for both membership details and for booking squash matches. The other will be in the social area and will be only used for booking squash matches

– The computer at the reception desk will use a conventional screen, mouse, and keyboard. There are well suited to the task. Also, they are cheap and the staff members are likely to be familiar with them.

– The computer in the social area will use a touch screen mounted in the wall. This was chosen because it is robust and easy to use. There are some practical considerations, such as keeping it clean. The receptionist will be responsible for cleaning it twice each day. Sound output will not be used, as the environment is too noisy

– The center wants to screens to look like the forms that the office staff are used to completing

Conceptual design

• Primary task objects; member, booking• Attributes

– Member; name, address, other contact details, date of first registration, length of membership, age, sex, medical condition, drug allergies, activities interested in

– Booking; date, court #, name and membership # of person making the booking

• Actions– Members; adding and removing members, changing the

details of a member, checking a member’s record, creating a master list of all the current members, searching through forms to find a particular member, inserting the form into the correct place, giving a member a copy of his or her record, membership renewal

– Booking; adding a new booking, canceling a booking

Metaphors

• A form on the screen will represent the membership form, and the bookings diary will be represented by a diary metaphor

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)


• List the two primary windows needed for the Energetic Sports Center. Sketch an additional launch pad window to choose between these

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

Some unhelpfulerrormessages

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

Example dialog box

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?

Unwise use of tabs

Row different lengthsTabs organization confusing(modem 1, modem2 placement)


• In the Energetic Sports Center, the membership primary window will display the details of one center member. How could this information be divided into more than one tab? You should consider the original membership form when you make this decision.

• Also, the managers have decided to ask each member which activities particularly interest them. This is mainly for statistical and planning purposes, but also so that members can be advised to be cautious is they are considering a very active sport when they are unwell. Think about how you would represent the information on the form. For example, will you use only text boxes, or a mixture of text boxes and other widgets? This is significant because a block of option buttons takes up more space than a single text box

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


• Draw a menu bar and associated drop-down menus for the membership window of the ESC. They should allow the user to perform the following tasks;– Search for a particular member– Print the details of the displayed member– Add a new member– Sort the members into a particular order– List, in tabular form, the members in a secondary

window– Delete an existing member from the membership list

• Justify your decisions

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!


• Draw a tool bar for the previous menu hierarchy, choosing two of the menu items to be represented in the toolbar. How did you choose the items to go on the toolbar? How did you design 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

Poor use of command buttons

Not clear what will happen when buttons selectedWhen undo is selected, is user resubscribed to the mailing list?It may mean that the confirmation message will not be sentIt might cause the dialog box to disappear


• The membership window of ESC needs to invoke a “search for member” dialog box from the relevant menu and tool bar

• We need three command buttons, which should perform the following operations;– Carry out the search– Cancel the search and clear the dialog box from the

screen– Provide help

• Draw the section of the dialog box that contains the buttons that carry out these operations. Draw the buttons positioned horizontally. Repeat the task, drawing an alternative dialog box with the buttons positioned vertically.

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

Inappropriate use of check boxes

Should be an option button!

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!


• We now move on to the detailed design of the membership window for ESC. We now know that the representation is a form and the tabs contain general details, membership details, medical conditions, and activities. If we look at the list of attributes, this will include age, sex, and the activities that interest the user. Draw the relevant parts of the general details and activities tabs, showing how options boxes and check boxes can be used to enter this information

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

Types of list boxes

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


• The bookings primary window for the ESC will appear on both the PC in reception and the touch screen in the social area. This will take the form of a diary metaphor.

• In this exercise we concentrate on the touch screen in the social area

• Illustrate how the bookings window may look. The should be able to make their booking by entering their membership number using a drop down list box

• Include buttons to allow the users to turn the pages in the booking diary.

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

Where a text box is needed

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


• Returning to the membership window for the ESC, which of the following will require a text box and why? If a text box is not appropriate, which widget would be? If a text box is needed, should it be scrollable?– Street in the member’s address– Whether or not the member want to go on the

mailing list– Additional information about the member’s

medical history

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?


• See the two different design for a tab box on the next page. Design a) uses a sequence of traffic lights in the bottom right corner of the dialog box. They are numbered from one to six, each corresponding to one of the tabs. According to the UI user guide, yellow means some of the information has been entered on the tab, red means that not all the information has been entered, and green indicates that all the information has been entered. Design b) has an indicator attached to each tab. This indicator can be “on” or “off”.

Exercise

Human Factors and User Interface Design Overview Rob Oshana.

Documents

Transcript of Human Factors and User Interface Design Overview Rob Oshana.