Tagged with Ideate, interaction design, ipad, ipad camp, ipad dev camp la, iphone, ipod, ui design, User Experience, user experience design, user interface design, ux design, UX designers, UX developers, UX professionals, visual design, web developers
When you put a bunch of really talented strangers into a space for 2 days, you can come out with some pretty amazing things. Last weekend, I went to the first annual iPad Dev Camp LA here in the So-Cal area, stemmed from the mothership camp in the Bay Area. The camp was a way for web developers, UX professionals including UX designers to get together and share and explore the new realm of the iPad.
Campers were able to break off into groups to work on an iPad app or project. At the end of the weekend, each team presented their creation. I joined forces with Spencer Holman of The Fatherhood Academy, who was looking for help on a legacy book as well as an interactive storybook for fathers. I’ve long been interested in the concept of digital memories so it was a natural fit.
My teammates came from all areas: iPhone development, UX design and interaction design, product and business strategy. We huddled into our war room and started diving right in. What never ceases to amaze me is that regardless of the problem, PROCESS is key to success. Though we only had 2 days to work, we were able to go through most of the IDEATE process.
I – Identify the problem.
Based on the initial focus from Spencer and with the expert facilitation of Peter, we decided that there is an unmet need for fathers to be more involved in the rearing of their children. Our goals would be to encourage proactive involvement, change perceptions, and bring joy back to fatherhood experiences.
D – Develop a design brief.
We decided to create a rich media childrens’ book alternative to traditional storybooks, to deliver a bonding experience for fathers. For the weekend, we chose to focus on 4-5 key screens of the My Father’s Time story to demonstrate the concept.
E – Explore possible alternatives.
UX professionals, Christian and Saurabh, developed the IA and screenflows as well as wireframe options. Meanwhile, I explored the graphic assets we had available, and fortunately we had wonderful watercolor paintings created by Spencer. With no scanner or camera and just my iPhone handy, I took photos of the paintings and edited them to use in the book.
A – Accumulate and assess the alternatives.
We reviewed and discussed the ideas with the team, asking for feedback and also technical constraints from our code guru, Josh.
T – Try out the solution. OR – Test the alternatives.
We didn’t really have the opportunity to test initial basic screen designs with any users as would have been ideal, so we put together what we had to test out the flow in simple, but functional prototype.
E – Evaluate the results.
We presented the initial, functional storybook app and are now planning next steps.
Our team of dreamers grew and shrank as campers flowed in and out of the war room at different stages of the process, yet we still managed to choose a direction with concise goals, sketch out the information architecture and wireframes, bring in visual designs to test out the user experience, and in the end, make a working prototype, running on the iPad by Sunday evening! How cool is that?
As we sketched and threw in (or threw out ideas) and scratched our heads with this new little device, I noted a few observations from the UX design side of things.
- This Way Up…or is it? – Without the keyboard giving you a real grounding element when you dive into using an application or in our case, an e-book, it opens up the possibility of elements coming in from any side, or even all sides, because you can potentially be using it while its laying flat on a table or the floor and you’re looking down on it. It poses a lot of fun exploration, but also makes orientation design cues even more critical.
- Buttoned or not? – We struggled over the idea of whether buttons were needed and where, and then also with the idea of whether our buttons – or any of the user interface controls – needed to look like standard buttons or controls. Part of the fun of using really visually engaging apps seems to be the fact that we as users must discover what’s clickable or an interactive element. Also, buttons, hot spots and interactive design features should be larger because, like the iPhone, you must use your finger to navigate rather than a mouse. But unlike the iPhone, your hit area is not as restricted to such a tiny space, which makes a great case for creating more applications for CHILDREN whose motor skills are less refined and more inclined to errors.
- Why…er,…frame – Wireframing still holds to be very crucial when designing for the iPad because you need to carefully consider how the layout and interactions may change if orientation changes, or if the orientation will constantly be changing. In our case, we made a choice of one fixed orientation – landscape – because more than likely we would be working with wide design illustrations and artwork, read from one’s lap. But other apps could work well laid down on a table or the floor and seen from above. How many ways can something like that be viewed? How do you plan for that in the user interface design and user experience?
- User Case Scenarios Are Endless – Like the iPhone, it seems that the iPad will be (and has already become) almost like an extra but critical appendage, that if we left home without it, it would be like leaving your arm behind. So where will our users actually use this device and our apps? It can go where no laptop normally would.
- iPod + iPhone Touch + iPhone + iPad + ? – Imagine if you can make these devices work together, leveraging their strongest assets for simple functionality. One team of campers, Team Cat Arcade HD, created a very innovative app for cats and was able to turn the iPhone into a remote control WITH the iPad as a game. Again, how cool is that?
- Cool Rules. No matter how useful or efficient your application is, if it’s not fun to use or able to truly delight, it can lose. Remember that we’re not bound by all the traditional rules of UX design and UX development, and that the iPad is the perfect playground.
Tools You Can Use
On Day 2, we watched a presentation by Avesta Rasouli, Founder of The Coloft and AppShows.com, on some cool tools for creating demos of your apps, because ….well, that’s what helps them sell. According to Avesta, people may not have the time to download the trial or free version of your app, or maybe the screenshots just aren’t enough. A simple demo can do the trick. Here’s just a few tools and companies he shared that can help you capture the user experience in a nutshell:
- ScreenFlick – If you’re savvy enough, you can even edit you screencast in Final Cut Pro.
- DemoGod allows you to control your screen demo (desktop) with your iPhone.
- OmniDazzle allows you to change your mouse icon from the mouse to a variety of shapes or effects because, after all, there’s no mouse icon when you use an iPhone or iPad.
- AudioJungle.net is a great place to purchase music or tracks to bring that extra oomph to your demo.
- Blip.TV is an affordable place to host, share, and track your videos.
The iPad Dev Camp team also shared this document – the iPad Human Interface Guidelines before we arrived – it’s hefty but definitely chock full of great insights. Available as PDF too.
Spencer also shared this handy file of iPad GUI Elements in Photoshop (PSD) which you can download here on Teehan + Lax’s blog. This definitely helped expedite some of our design exploration process. They have one for the iPhone too.
Overall, I learned a lot, met some brilliant folks, and left wanting to learn more. I hear there will be another camp sometime over the summer, can’t wait. Perhaps I’ll see you there?
You can see more photos here on Nomadchique’s Flickr set.