Presentation is loading. Please wait.

Presentation is loading. Please wait.

User Interface Design 2 Constructing an Interface for an ATM.

Similar presentations


Presentation on theme: "User Interface Design 2 Constructing an Interface for an ATM."— Presentation transcript:

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.?

11

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


Download ppt "User Interface Design 2 Constructing an Interface for an ATM."

Similar presentations


Ads by Google