user interface design 2 constructing an interface for an atm

User Interface Design 2

Constructing an Interface for an ATM

User interface metaphors

• dialogue metaphor• direct manipulation (event-driven, GUI)

metaphor

• What dialogue does a user have with an ATM machine?

How do we incorporate User Interface Design Guidelines in the dialogue?

• Consistency – always do things in the way that people expect and follow the same pattern

e.g. Lodge and Withdraw money• Appropriate User Support- help people if you think

they’ll need it – what does appropriate mean here?• Adequate Feedback- let them know when they’ve

done something, when the machine is doing something.

• Minimal User Input: ATM where you type in the amount vs ATM with fixed amounts to be selected.

1. Structured UI Design: Stages

1. Requirements gathering 1) determine the types of user, frequency of use,

task experience level, computing skills etc.

The user of the ATM will be a reasonably frequent user who does not necessarily have computing skills.

– Determine task characteristics – How complex is the task?– Break down into component parts– Identify the goal, context, task

environment

Example

Authorised card

Enter card Check if authorised

Withdraw Show balance

O

O

Select transaction

*

LogoutLodge O O

ATM

Error message

Check pin

O

Valid pin

O O

Error message

OO

*

Example

Request amount

Enter amount

Lodge

User Confirm User CancelO

O

Disable buttons

Process transaction

Enable buttons

2. Interface design • allocate elements of task to user/system• determine communication requirements,• design interface elements to support

communication.

UML activity diagram -allocating tasks to system and user

Source: IBM Rational http://www.ibm.com/developerworks/rational/library/769.html

• determine communication requirements- how do user and system collaborate to do the tasks.?

• design interface elements to support communication.

In a GUI:• Buttons, listboxes, labels, message boxes etc.

Example UI class diagramAtm_UI

Lodge:buttonWithdraw:buttonCancel:buttonLogout:buttonConfirm:buttonDataEntry:textboxMessages:label

Lodge_click()Withdraw_Click()Cancel_Click()Confirm_click()Logout_Click()Disable()Enable()

Identify interface elements

State Machine diagram for the User Interface- States can correspond to Screens.

No card-Request

Finding ac

Valid AC

Invalid AC

Amount request

Transaction Confirmed/

Cancel clicked()Cleartxt and enable

Confirm clicked()

[account found]enable

[lodge /withdraw clicked]disable

Logout_clicked()

enable

• Event action tables can be used to specify how interface elements can react to events in different states- exampleState Event Action Next State

0 Disable buttons except confirmClear textboxDisplay welcome message and request acno

1

1 Confirm click Find account 1

1 Account found Enable buttons 2

3. Interface evaluation – develop prototypes and test on users.

• Usability criteria: Learnability, Throughput, Flexibility, Attitude

• Scheiderman’s golden rules• Disability standards

Ethnographic Approaches

• Qualitative assessment of task situation where the designer works very closely with the user in their work context.

• Observing• Listening• Asking questions• Interviews E.g. Participative design

• What would this involve for an ATM?

Scenario-based Approaches

• Step-by step descriptions of user actions showing how users can achieve a goal

• Can use textual narrative or storyboards.

• Draw a storyboard for a visit to an ATM- including screen designs.

• Write a set of scenarios.

• Check that you’ve taken the principles of UI design into account: consistency, feedback, closure, error-handling, easy reversal of actions, let user control, easy to use – minimise memorisation

• Could you use this to build a prototype?

Usability Criteria• Learnability - time and effort needed • Throughput of the expert user• Flexibility – ability to handle changes to tasks and the

environment in which they operate.• Attitude – how positive does the user feel as a result of

his/her experience with the package? • ISO definition of Usability : degree to which users can

achieve specific goals in a particular environment ; effectively, efficiently, comfortably and in an acceptable manner