Love the playful interaction designed in this simple score keeping app. Looking forward to just using this!
Note to self: It’s not just about the solving a problem, but how you solve the problem.
Posts Tagged ‘interaction design’
Scorekeeper: Things that make people happy!
Prototyping iPhone apps with Keynote & Kodak Picture kiosks
Last week I hosted the “UX Panel” at Echelon 2011 and after the event quite a few people asked me about my workflow for wire-framing and prototyping. I’ve been meaning to talk about my this at the next IXD Session meetup, so I thought I’ll write some about it here as well.
Below is a summary of my pre-production design methodology specifically for iPhone apps. It’s relatively cheap, allows for quick iterations and has been working well for me so far.
1. Sketching (pencil/paper or whiteboard)
Lately I’ve become very obsessed about sketching every Idea we discuss in the stage where we are brainstorming to define the product. This always makes me convey my thoughts better and helps me remember more.
2. Wireframing using Keynote
I know a lot of people who swear by Omnigraffle. Especially folks who’ve been wireframing since early OSX days, for instance my good friend Wolf. I’ve personally never been able to warm up to it. Instead I’ve been using Keynote & Mockapp. I start with a base template (outline of the iPhone) which you can download from the link below:
I’ve found keynote simple enough and quite versatile to do quick wireframing. With Mockapp it’s just a matter of dragging and dropping the iPhone controls (and they are made as shapes so you can edit them within keynote all you want).
3. Prototyping & User testing
My keynote wireframes turn into my paper-prototypes. I export the wireframes as images, put them on a USB stick and print at the nearest Kodak Picture kiosk I can find. It’s cheap and I can iterate very quickly as well. I use these for testing – which ofcourse, is the most important part of the entire design process.
4. Final wireframes and design comps
After the testing I aim to have exhaustive wireframes with as many screens as possible – including error scenarios and detailed settings. From here, the mockups are designed in Photoshop/Illustrator.
This is a rough workflow and ofcourse gets tweaked depending on the project. Hope this can be of help to someone!
PS – I was totally excited and extremely nervous about moderating the panel at Echelon 2011, but a big thanks to my panelists who absolutely rocked! – Richard White, Ian McFarland and Dustin Curtis.
Skuemorphic design
skeuomorph: A design feature copied from a similar artifact in another material, even when not functionally necessary. For example, the click sound of a shutter in an analog camera that is now reproduced in a digital camera by playing a sound clip.
Read some very interesting articles on skeuomorphic UI design patterns that we see so much these days in all iOS devices:
- http://aaronweyenberg.com/699/is-realistic-ui-design-realistic
- http://speedbird.wordpress.com/2010/06/25/what-apple-needs-to-do-now/
Apple demonstrated some really nice ways of using this while designing apps and inspired an entire generation of apps. Skuemorphs are good to ease the learning curve for your apps—but as mentioned in the articles they can act quite contrary when overdone or used without caution. Aaron Weyenberg sums it up quite well:
Skeuomorphic and realistic UI components are susceptible to the following hazards:
• Changing the original component’s behavior to fit a new function or feature
• Straining or breaking established UI standards
• Incorrectly assuming the user is familiar with the original component
• An appetite for screen space
In my experience, when skuemorphs are used purely for decorative purpose, things are bound to go wrong. I’m very interested in discovering app design based not on traditional interfaces but experimenting with new graphic design directions. Calvetica is a neat example.
IDEO redesigns the ATM machine
The result of a 2 year long project by IDEO is the new and quite fantastic Automatic Teller Machine Self Service Bank for client BBVA (Spanish Bank). IDEO has tried to retouch every aspect of the experience and done really well. Do check out the product video at http://futureselfservicebanking.com
The most impressive part to me is the way they rotated the machine 90º to enhance privacy:
Keeping the line of waiting people in the corner of your eye, instead of behind your back, let’s people feel safe on a rational and subconscious level.
Takes me back to a quote I once read somewhere:
Creativity is the defeat of habit by originality
- Arthur Koestler
Navjot Pawera (aka Nav)
UX, UI, Product design guy. These days, I'm working on creating new stuff at Bubble Motion. I am a silent partner at ExtraThought - a user experience design consultancy. I also curate the IXD Sessions in Singapore.