Designing a Card Swipe Machine Paul Ritchey Tanaya Nalavade

Background Why the card swipe machine? Frequently used Current designs have room for improvement

Understanding the User Administered online questionnaire n = 47 Often use card swipe machine Often or Always use debit/credit cards Card preferred over cash English generally first language Around 50% have corrected vision No one was color blind Always 10, often 27 use card swipe machines to complete transactions, 37 always or often use card swipe machines 19 always, 19 often use cards , 38 often or always use their card to complete a transaction Preferred over cash, 10 always 27 often, 37 always or often prefer paying with a card instead of cash 20 reported that english was not their first language, but that they functional understanding of written english No one reported being color blind, ½ said they had corrected vision

Task Analysis / Contextual Observations Collected user comments on existing machines Issues Possible Solution Mixed user input method Only use one method for input Card swipe diagrams unclear Create a clear diagram Unlabeled / Unclear function of buttons Label buttons Button Mapping with displayed options Buttons are encircled with the option on the display When to use which button Use color and illuminate buttons that can be used. Don’t know which button to press

Help us build our own prototype and understand the current system

Usability Goals & Requirements Ease of Use No more than 1 error per task for a novice user Task times less than 30 seconds All buttons shall be physical Design shall utilize color Enter = Green Cancel = Red Clear = Yellow Buttons shall illuminate when usable Screen displayed options shall be graphically connected to their corresponding physical buttons Buttons should be labeled Self Explanatory Design : Able to be used quickly and without much error measured by observing errors, 1 one fewer errors for novice users, task total time 30 seconds or better

[DIAGRAM ABOUT SWIPING THE CARD] Prototype Version 1 SWIPE CARD TO START [DIAGRAM ABOUT SWIPING THE CARD] 1 2 3 ENTER 4 5 6 CLEAR 7 8 9 CANCEL

CHOOSE PAYMENT TYPE Debit Credit 1 2 3 ENTER 4 5 6 CLEAR 7 8 9 CANCEL

ENTER PIN ** 1 2 3 ENTER 4 5 6 CLEAR 7 8 9 CANCEL

Testing the Design Users told to complete a debit transaction use the prototype Record task time Errors And any comments 19 users tested

Results Debit Transaction User Comments Avg Time: 24.7 seconds Only Pin Errors User Comments “no zero key” Easy to use Over all well accepted Not all the buttons lit up

Revisiting the Design Creation of prototype Version 2 Added swipe example diagram Button illumination extended to Enter, Cancel, and Clear Added a zero key Fixed task order problem Prototype Version 2 Show the prototype v2 here.

V2 User Testing Results User testing protocol changes Asked to perform both tasks Exploring the prototype Semi-Structured interview Small sample size (n = 5) Over all positive response No card swipe errors Task Times (avg) Debit = 15 Credit = 12.6

V2 User Testing Results Validation of design changes Progress bar Illumination of buttons User Comments and Issues Zero did not illuminate “Shouldn’t use ‘!’” “Swipe diagram is good” Should standardize text “Card Diagram might be too unrealistic”

Prototype V3 Language support Card Diagram Font standardization Use real image Font standardization Zero illuminates Show V3

SWIPE CARD TO START en Español 1 2 3 ENTER 4 5 6 CLEAR 7 8 9 CANCEL

CHOOSE PAYMENT TYPE Debit Credit 1 2 3 ENTER 4 5 6 CLEAR 7 8 9 CANCEL

ENTER YOUR PIN 1 2 3 ENTER 4 5 6 CLEAR 7 8 9 CANCEL

Summary of Project User Profile Task Analysis Usability Requirements Create First Prototype User Testing Create Second Prototype Create Third Prototype

Questions?!

SWIPE CARD TO START 1 2 3 4 5 6 7 8 9 ENTER CLEAR CANCEL 1654 6874 9687 9846 JOHN JACOB DOE 06/13 1 2 3 ENTER 4 5 6 CLEAR We need to decide on how participants will “Swipe” their card. Probably will just have to ignore it and not worry about it. None of the buttons do anything on this page 7 8 9 CANCEL

Debit CHOOSE PAYMENT TYPE Credit 1 2 3 4 5 6 7 8 9 ENTER CLEAR CANCEL JOHN JACOB DOE 06/13 1654 6874 9687 9846 CHOOSE PAYMENT TYPE Debit Credit 1 2 3 ENTER 4 5 6 CLEAR Debit button goes to slide 3 Credit will go to slide 9 Cancel button goes to slide 1 7 8 9 CANCEL

ENTER PIN 1 2 3 4 5 6 7 8 9 ENTER CLEAR CANCEL JOHN JACOB DOE 06/13 1654 6874 9687 9846 ENTER PIN 1 2 3 ENTER 4 5 6 CLEAR This is the enter pin slide for after the Debit option is selected. The pin for this is 5426 This is the first slide where the number 5 should be entered. Clear should redirect to this slide. And cancel should redirect to the first slide. 5 links to slide 4 7 8 9 CANCEL

ENTER PIN * 1 2 3 4 5 6 7 8 9 ENTER CLEAR CANCEL Pin = 5426 JOHN JACOB DOE 06/13 1654 6874 9687 9846 ENTER PIN * 1 2 3 ENTER 4 5 6 CLEAR Pin = 5426 This number should be 4 7 8 9 CANCEL

ENTER PIN ** 1 2 3 4 5 6 7 8 9 ENTER CLEAR CANCEL Pin = 5426 JOHN JACOB DOE 06/13 1654 6874 9687 9846 ENTER PIN ** 1 2 3 ENTER 4 5 6 CLEAR Pin = 5426 This number should be 2 7 8 9 CANCEL

ENTER PIN *** 1 2 3 4 5 6 7 8 9 ENTER CLEAR CANCEL Pin = 5426 JOHN JACOB DOE 06/13 1654 6874 9687 9846 ENTER PIN *** 1 2 3 ENTER 4 5 6 CLEAR Pin = 5426 This number should be 6 7 8 9 CANCEL

PRESS ENTER TO PROCEED **** 1 2 3 4 5 6 7 8 9 ENTER CLEAR CANCEL JOHN JACOB DOE 06/13 1654 6874 9687 9846 PRESS ENTER TO PROCEED **** 1 2 3 ENTER 4 5 6 CLEAR Now they need to hit Enter, This is the only slide that moves on to Accepted. 7 8 9 CANCEL

Yes IS THIS AMOUNT CORRECT ? $15.46 No 3 6 9 2 8 7 5 4 1 ENTER CLEAR JOHN JACOB DOE 06/13 1654 6874 9687 9846 Yes IS THIS AMOUNT CORRECT ? $15.46 No 3 6 9 2 8 7 5 4 1 ENTER CLEAR Lets add an amount here. 15.46 This is the correct amount. Yes –> finish the transaction No -> is the same as cancel CANCEL

PROCESSING 3 6 9 2 8 7 5 4 1 ENTER CLEAR CANCEL 1654 6874 9687 9846 JOHN JACOB DOE 06/13 1654 6874 9687 9846 PROCESSING 3 6 9 2 8 7 5 4 1 ENTER CLEAR CANCEL

PROCESSING 3 6 9 2 8 7 5 4 1 ENTER CLEAR CANCEL 1654 6874 9687 9846 JOHN JACOB DOE 06/13 1654 6874 9687 9846 PROCESSING 3 6 9 2 8 7 5 4 1 ENTER CLEAR CANCEL

PROCESSING 3 6 9 2 8 7 5 4 1 ENTER CLEAR CANCEL 1654 6874 9687 9846 JOHN JACOB DOE 06/13 1654 6874 9687 9846 PROCESSING 3 6 9 2 8 7 5 4 1 ENTER CLEAR CANCEL

ACCEPTED 3 6 9 2 8 7 5 4 1 ENTER CLEAR CANCEL JOHN JACOB DOE 06/13 1654 6874 9687 9846 ACCEPTED 3 6 9 2 8 7 5 4 1 ENTER CLEAR Now it will auto-progress CANCEL

TRANSACTION COMPLETED JOHN JACOB DOE 06/13 1654 6874 9687 9846 TRANSACTION COMPLETED THANK YOU ! 3 6 9 2 8 7 5 4 1 ENTER CLEAR CANCEL

SWIPE CARD TO START 1 2 3 4 5 6 7 8 9 ENTER CLEAR CANCEL JOHN JACOB DOE 06/13 1654 6874 9687 9846 SWIPE CARD TO START 1 2 3 ENTER 4 5 6 CLEAR We need to decide on how participants will “Swipe” their card. Probably will just have to ignore it and not worry about it. None of the buttons do anything on this page 7 8 9 CANCEL

Debit CHOOSE PAYMENT TYPE Credit 1 2 3 4 5 6 7 8 9 ENTER CLEAR CANCEL JOHN JACOB DOE 06/13 1654 6874 9687 9846 CHOOSE PAYMENT TYPE Debit Credit 1 2 3 ENTER 4 5 6 CLEAR Debit button goes to slide 3 Credit will go to slide 9 Cancel button goes to slide 1 7 8 9 CANCEL

ENTER PIN * 1 2 3 4 5 6 7 8 9 ENTER CLEAR CANCEL JOHN JACOB DOE 06/13 1654 6874 9687 9846 ENTER PIN * 1 2 3 ENTER 4 5 6 CLEAR These slides are for incorrect pin entries 7 8 9 CANCEL

ENTER PIN ** 1 2 3 4 5 6 7 8 9 ENTER CLEAR CANCEL JOHN JACOB DOE 06/13 1654 6874 9687 9846 ENTER PIN ** 1 2 3 ENTER 4 5 6 CLEAR These slides are for incorrect pin entries 7 8 9 CANCEL

ENTER PIN *** 1 2 3 4 5 6 7 8 9 ENTER CLEAR CANCEL JOHN JACOB DOE 06/13 1654 6874 9687 9846 ENTER PIN *** 1 2 3 ENTER 4 5 6 CLEAR These slides are for incorrect pin entries 7 8 9 CANCEL

PRESS ENTER TO PROCEED **** 1 2 3 4 5 6 7 8 9 ENTER CLEAR CANCEL JOHN JACOB DOE 06/13 1654 6874 9687 9846 PRESS ENTER TO PROCEED **** 1 2 3 ENTER 4 5 6 CLEAR These slides are for incorrect pin entries Enter here leads to “Wrong Pin” 7 8 9 CANCEL

Yes IS THIS AMOUNT CORRECT ? $15.46 No 3 6 9 2 8 7 5 4 1 ENTER CLEAR JOHN JACOB DOE 06/13 1654 6874 9687 9846 Yes IS THIS AMOUNT CORRECT ? $15.46 No 3 6 9 2 8 7 5 4 1 ENTER CLEAR Lets add an amount here. 15.46 This is the correct amount. Yes –> finish the transaction No -> is the same as cancel CANCEL

PROCESSING 3 6 9 2 8 7 5 4 1 ENTER CLEAR CANCEL 1654 6874 9687 9846 JOHN JACOB DOE 06/13 1654 6874 9687 9846 PROCESSING 3 6 9 2 8 7 5 4 1 ENTER CLEAR CANCEL

PROCESSING 3 6 9 2 8 7 5 4 1 ENTER CLEAR CANCEL 1654 6874 9687 9846 JOHN JACOB DOE 06/13 1654 6874 9687 9846 PROCESSING 3 6 9 2 8 7 5 4 1 ENTER CLEAR CANCEL

PROCESSING 3 6 9 2 8 7 5 4 1 ENTER CLEAR CANCEL 1654 6874 9687 9846 JOHN JACOB DOE 06/13 1654 6874 9687 9846 PROCESSING 3 6 9 2 8 7 5 4 1 ENTER CLEAR CANCEL

INCORRECT PIN NUMBER 3 6 9 2 8 7 5 4 1 ENTER CLEAR CANCEL Wrong Pin JOHN JACOB DOE 06/13 1654 6874 9687 9846 INCORRECT PIN NUMBER 3 6 9 2 8 7 5 4 1 ENTER CLEAR CANCEL Wrong Pin

SWIPE CARD TO START 1 2 3 4 5 6 7 8 9 ENTER CLEAR CANCEL JOHN JACOB DOE 06/13 1654 6874 9687 9846 SWIPE CARD TO START 1 2 3 ENTER 4 5 6 CLEAR We need to decide on how participants will “Swipe” their card. Probably will just have to ignore it and not worry about it. None of the buttons do anything on this page 7 8 9 CANCEL

Debit CHOOSE PAYMENT TYPE Credit 1 2 3 4 5 6 7 8 9 ENTER CLEAR CANCEL JOHN JACOB DOE 06/13 1654 6874 9687 9846 CHOOSE PAYMENT TYPE Debit Credit 1 2 3 ENTER 4 5 6 CLEAR Debit button goes to slide 3 Credit will go to slide 9 Cancel button goes to slide 1 7 8 9 CANCEL

TRANSACTION CANCELED! 3 6 9 2 8 7 5 4 1 ENTER CLEAR CANCEL JOHN JACOB DOE 06/13 1654 6874 9687 9846 TRANSACTION CANCELED! 3 6 9 2 8 7 5 4 1 ENTER CLEAR CANCEL This is the Transaction Canceled Screen. Which will be shown when ever the transaction is cancel. Before this is shown an error will be shown to describe if the transaction was canceled due to some error (i.e. Pin Error) This slide needs to be first in the slideshow, but the prototype should be started on slide 2.

SWIPE CARD TO START 1 2 3 4 5 6 7 8 9 ENTER CLEAR CANCEL JOHN JACOB DOE 06/13 1654 6874 9687 9846 SWIPE CARD TO START 1 2 3 ENTER 4 5 6 CLEAR We need to decide on how participants will “Swipe” their card. Probably will just have to ignore it and not worry about it. None of the buttons do anything on this page 7 8 9 CANCEL

Debit CHOOSE PAYMENT TYPE Credit 1 2 3 4 5 6 7 8 9 ENTER CLEAR CANCEL JOHN JACOB DOE 06/13 1654 6874 9687 9846 CHOOSE PAYMENT TYPE Debit Credit 1 2 3 ENTER 4 5 6 CLEAR Debit button goes to slide 3 Credit will go to slide 9 Cancel button goes to slide 1 7 8 9 CANCEL

TRANSACTION COMPLETED JOHN JACOB DOE 06/13 1654 6874 9687 9846 TRANSACTION COMPLETED THANK YOU ! 3 6 9 2 8 7 5 4 1 ENTER CLEAR CANCEL

SWIPE CARD TO START 1 2 3 4 5 6 7 8 9 ENTER CLEAR CANCEL JOHN JACOB DOE 06/13 1654 6874 9687 9846 SWIPE CARD TO START 1 2 3 ENTER 4 5 6 CLEAR We need to decide on how participants will “Swipe” their card. Probably will just have to ignore it and not worry about it. None of the buttons do anything on this page 7 8 9 CANCEL

Debit CHOOSE PAYMENT TYPE Credit 1 2 3 4 5 6 7 8 9 ENTER CLEAR CANCEL JOHN JACOB DOE 06/13 1654 6874 9687 9846 CHOOSE PAYMENT TYPE Debit Credit 1 2 3 ENTER 4 5 6 CLEAR Debit button goes to slide 3 Credit will go to slide 9 Cancel button goes to slide 1 7 8 9 CANCEL