#1 Open hotel room door.
#28 Makeshift Ice scraper for the rental car on a frosty morning, since they forgot to put a real one in the trunk-grrr.
#43 Smooth a bead of caulk around the bathtub after you re-grouted the tile.
#87 Use as a template to sketch out a wireframe design for a mobile device.
Yup good old #87. The humble plastic room key is a rough approximation of a 4" screen on a mobile device and makes a handy tool to get that "back of the cocktail napkin" prototype of your app out of your head and into a medium that is shareable with colleagues and clients.
Sketching is a wonderful way of communicating your vision, and it has several advantages. Anyone can sketch (yes even you!), it's almost free, and it is quicker and easier to sketch then prototyping in code. Drawing is the easiest way to produce that wireframe, but as easy as it is to use the room key card (Actually any plastic card will do.), if you're going to take your prototype to the next stage, getting it into a digital format is preferable. Many tools exist for prototyping on computers such Visio, several Adobe products, as well as my favorite freeware tool inkscape. The advantages of digital prototyping is clear, but it can't beat the flexibility and immediacy of being able to get that idea right out of your head and onto paper.
So let's play – pull out a plastic card from your wallet and let's design something together, how about we design an app to transfer money from one bank account to another. Now I have been using and designing apps for mobile OS's that have true pre-emptive multi-tasking, so I tend to design app suites – by this I mean that the "Check my balance", "Transfer money", "Pay a bill", "Find a branch" functions are all separate apps and launcher icons. So just focus on the UI for the Money Transfer App, don't worry about the log-in screen.
The Screen, draw the basic screen, add your status bar and tool bar (feel free to use the UX Guide for your OS of choice- my target is Meego and the swipe UX), that's a good start.
I like adding my controls next, as well as any branding, so put your bank logo upper left and a salutation in the upper right. The salutation identifies a successful login and who the user is logged in as, you could add a "not EJ" link here if you wanted. At the bottom I will add a place to enter the transfer amount and a button to execute the transaction.
Set up the two lists that are going to hold the bank account information. The top list will be the "transfer from" list and the bottom list will be the "transfer to" list.
Fill in your lists with mock data, both lists should be the same since we are transferring between a set of accounts that belong to the logged in user. You can add labels like "From" and "To" to help the user understand the app.
Step 5: Ta-da all done! Now we have to add some words to the picture to help communicate the vision – think of it as a mini use case. So for my prototype I would write some numbered bullet points to describe the user interaction.
- User can scroll through "from" list to see all eligible accounts.
- User can tap to select an account in "from" list, list item turns red.
- User can scroll through "to" list to see all eligible accounts.
- User can tap to select an account in "to" list, list item turns green.
- User can tap on "Enter Amount" box, a 70% opaque digit pad pops up where user can enter amount to transfer, clear numbers as needed, and tap "OK" to confirm amount.
- User taps "Go" to execute transfer.
- Once posted new balances are displayed in "from" and "to" list.
A nice easy tap friendly app described in a way lay people can understand, but I also want to add some detail for those coding the app, such as
i. In User step 5 on "OK" tap verify that amount entered in digit pad not greater than currently selected "from" account balance. So on digit pad "OK" tap if amount entered greater than "from" account balance, display message "From account has insufficient funds…".
I can also give relevant target OS instructions. In my case my target OS is fully multitasking so if I swipe the app off the screen it keeps running in the background, so my instructions would include
ii. On back arrow tap, return to login screen.
iii. On swipe initiate 90 second countdown timer and at zero (0) seconds close app and return to login screen. You'll notice I'm not closing the app and leaving "nothing" behind since the user expects to see the app in the "running apps" screen.
Now it's your turn! Send me your "Hotel key card" mock up for the perfect "Balance Transfer" app and our esteemed panel of judges (my Great Dane and I) will pick the 3 coolest and I will send you some CapTech Swag!