Download presentation
Presentation is loading. Please wait.
1
User Interface Design 2 Constructing an Interface for an ATM
2
User interface metaphors dialogue metaphor direct manipulation (event-driven, GUI) metaphor What dialogue does a user have with an ATM machine?
3
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.
4
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.
5
– Determine task characteristics – How complex is the task? – Break down into component parts – Identify the goal, context, task environment
6
Example Authorised card Enter card Check if authorised Withdraw Show balance O O Select transaction * Logout Lodge O O ATM Error message Check pin O Valid pin O O Error message OO *
7
Example Request amount Enter amount Lodge User Confirm User Cancel O O Disable buttons Process transaction Enable buttons
8
2. Interface design allocate elements of task to user/system determine communication requirements, design interface elements to support communication.
9
UML activity diagram - allocating tasks to system and user Source: IBM Rational http://www.ibm.com/dev eloperworks/rational/libr ary/769.html http://www.ibm.com/dev eloperworks/rational/libr ary/769.html
10
determine communication requirements- how do user and system collaborate to do the tasks.?
12
design interface elements to support communication. In a GUI: Buttons, listboxes, labels, message boxes etc.
13
Example UI class diagram Atm_UI Lodge:button Withdraw:button Cancel:button Logout:button Confirm:button DataEntry:textbox Messages:label Lodge_click() Withdraw_Click() Cancel_Click() Confirm_click() Logout_Click() Disable() Enable() Identify interface elements
14
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
15
Event action tables can be used to specify how interface elements can react to events in different states- example StateEventActionNext State 0Disable buttons except confirm Clear textbox Display welcome message and request acno 1 1Confirm clickFind account1 1Account foundEnable buttons2
16
3. Interface evaluation – develop prototypes and test on users. Usability criteria: Learnability, Throughput, Flexibility, Attitude Scheiderman’s golden rules Disability standards
17
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
18
What would this involve for an ATM?
19
Scenario-based Approaches Step-by step descriptions of user actions showing how users can achieve a goal Can use textual narrative or storyboards.
20
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?
21
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
Similar presentations
© 2025 SlidePlayer.com. Inc.
All rights reserved.