In my recent travels to Southeast Asia this summer, I realized, while walking through the Suvarnabhumi Airport (Bangkok), that the airport is a great example of the user experience.  Our experiences when traveling (i.e. rushing around in unfamiliar surroundings) offer great similes of the experiences we find when surfing the web, frantically looking for info or diving into a new software application for the first time.  For the non-designers out there, this might give you a little insight into how we user experience designers process and think. For the designers, maybe this will come in handy the next time you need to explain the idea of UX design to a new customer!

USER NEEDS

The first thing we have to remember is that successful designs put the user’s needs first.  Here we consider the WHAT. Below are a few needs our users might encounter:

This is also what we can call “Task Analysis” – or understanding at the highest level, “What does the user/visitor need to do when they are here?” Designers keep these needs close to their hearts so that whatever they build or create addresses them. When users are successful and pleased with how they can do what they came to do, that is a positive user experience.

INTERACTION DESIGN

The next layer we’d consider is the HOW. How will our users get these tasks done? And if they make a mistake, will they be able to correct themselves, adjust, and find the right path. One way to help surface the possible decisions a user might make, or the order that user might make them in, is to create some scenarios. The scenarios can be based on statistics or common behavior patterns. Or they can be best guesses just to elicit ideas for further testing.

Establishing some “use-case scenarios” like the examples above are stories that can help flush out certain details of a user experience such as potential decision points, error recovery points, and user-specific tasks. These stories bring the problem to life. They can be elaborate or simple depending on the type of website or application, but should be as closely based on user behavior or research as possible. Additionally, these scenarios will vary between distinct user groups or types, which in turn helps uncover a majority of the critical interaction issues that can be experienced.

INFORMATION ARCHITECTURE

Once we know what our users need to be able to accomplish – what, how, why, and in what order – we can begin organizing how information will be presented to them. This is how we first begin developing the information architecture, the framework and order that establishes what should be given prominence or de-emphasis as well as when and where.

NAVIGATION DESIGN

From these examples, we are able to uncover some items that can become key pieces of the wayfinding system, or the navigation. In the airport, these would be the signs hanging above your head as you walk around or on the wall or even on the ground. On a website, these would be the main tabs at the top of the page, the primary navigation, secondary navigation, and utility or global navigation. Back to Bangkok, one neat feature I noticed on the signs after I arrived at the airport was that it left a great “scent” trail for visitors. Scent? Yes, that’s right.  In the UX world, scent refers to cues that help lead you to the thing you’re looking for – like a bloodhound on a trail. The signs leading down the corridor to my transfer area had an extra detail below the word; it read 350 meters…then 250 meters…and so on. I thought that was a nice touch because, though the walk was long, I knew I was walking TOWARD my goal, rather than away from it and I had an incentive to keep going.

INFORMATION DESIGN

With the architecture of the site or space planned out and organized into a structure or hierarchy, we can begin to design for understanding, which is the Information Design.  As a traveler, you must become accustomed to new places, cultures, and languages. With that, an important consideration in information design for airports is to communicate clearly and effectively to all who enter, despite the language they speak. This is where iconography can be exceptionally helpful, because as the saying goes, “a picture says a thousand words”, or in this case, says it without words.  Icons are used to direct us to the men’s or women’s restroom, taxis, baggage, emergency exits and more. Another example of information design can be found on the departures and arrivals boards. There can be a dense amount of information that can be overwhelming and hard to decipher as you’re running by it. A way to resolve this is to establish a system for how the information is layed out on the screen, and a grid to align text and numbers so that they are easy to digest and scan. Similar information, like gate numbers, can have the same visual treatment and column position so that a user can quickly learn how to read the board. The same principles apply to the web. Knowing what users are trying to accomplish, we can break down large amounts of info into smaller chunks that are easier to understand, group them into sections, and clarify with support images or icons. A grid structure can also improve understanding. For example, we can allocate certain areas of a page for a sidebar navigation menu, or a bottom area for a special footer, or even a column on the right for certain panels. By setting up these “zones”, the user can begin to learn a pattern of how to find things faster, improving their user experience.

Next time: VISUAL DESIGN – the face of the user experience and my specialty. The top and most apparent layer of the user experience is the visual design. What we’ve learned in this series is that design starts deep in the roots of user needs and the most successful designs are built with this ground up approach. The visual design layer brings it all together by enhancing and reinforcing the interaction, information architecture, navigation, and information design. Introducing the elements of art: line, shape, form, space, texture, value and color; and the principles of design – balance, proportion, rhythm, emphasis and unity in combination with effective use of typography can dramatically turn a user’s experience from one of contentment to sheer delight.

As a user experience designer I always like to do new-fangled things and go to novel places to keep my experiences fresh, which translates to more creative and innovative designs in my work. I was one of the lucky ten to win a ticket to Mindshare LA at Club 740 in Los Angeles. Naturally I whole heartedly accepted the freebie win. I’m glad I made the dreaded drive to LA, which coincidentally took place the same night as the NBA finals at the Staple Center. I had a really good time and the entire hour or so was comical, witty, and fascinating to say the least. Here is the low down on the event that night.

Bhagwan Chowdhry, along with many professors and entrepreneurs around the world, found the FAB Campaign, which stands for Financial Access at Birth. Bhagwan was the representative for the FAB Campaign that night as he talked about how it worked. With just $100 deposited into a bank account at birth for each child born, these babies are given financial access and can become self sufficient in the later years. It is estimated that 134 million children are born each year around the world and 25% of them will not have financial access if we do not help. Therefore, we would need $10 billion per year to fund this program, which means each country will need to contribute one-fiftieth of one percent of their GDP into the FAB program. In order to succeed, the entire world needs to get involved which starts with you and me, and banks, technology companies, healthcare organizations, etc… Show your support for this initiative by signing the FAB Campaign.

Brian Selzer, founder of Ogmento, an augment reality company, gave a presentation on the world of augmented reality, which the Wikipedia defines as a “live direct or indirect view of a physical real-world environment whose elements are augmented by virtual computer-generated imagery.” It was interesting to me to learn that augmented reality can encourage people to do good, such as recycle or exercise by incorporating augmented reality elements to make the experience fun. For example, an augmented basketball hoop was put up to challenge passersby to make the hoop into the recycling bins. Another example was the opportunity to construct a race using augmented reality whereby you can compete against your friends who aren’t even physically there. I never realized how powerful the tool can be. For the user interface designer, augmented reality has provided not only a desired need for these talents but also another avenue for them to play in.

Stuart Gibbs, author of the book Belly Up, gave a presentation about “Hippo Dung Showering.” Stuart shared a hilarious story about the life of hippos. Here are some interesting facts about hippos that I learned.

• They’re aggressive and not the cute, awkward, and insecure type that we’re use to from children’s books.
• They run at speeds from 18 to 30 mph.
• They use their poop as a form of artillery when combating other hippos for dominance. If you’d like a visual, you can find plenty on Youtube.

Chef Spencer Walker, blogger and author of the book Cook to Bang, gave the guys in the audience tips on how to woo the girls. Chef Spencer has made a name for himself in the culinary circuit with a clever niche. He transforms dishes into sexually positioned imagery and gives them banging names, no pun intended. A free bite size appetizer followed his entertaining presentation. I have no idea what the appetizer was called but it contained a water cracker, some type of cheese spread, smoked salmon, and avocado. It was quite tasty.

Other great acts that night included the cool Bob Reynolds and his jazz band, a viewing of the individual works from the talents on Sketchtheatre.com, and the one and only MegaRan, the original nerdcore rapper.

If you are familiar with my blog, then you should know that I’m an avid WordPress user. Naturally, I decided my latest blog entry will be about one of the fun parts of blogging – the plugins (drool). Below is a list of my favorite WordPress plugins that I use on a daily basis.

All in One SEO Pack is a very simple tool to optimize your blog posts and pages. This is a great tool to improve your rankings in search engines like Google, Yahoo, and Bing. Your title tag, meta tags, and meta descriptions are covered with this tool and you can automate these tags or manually add them in yourself.

SEO Slugs is another tool for optimizing your website. Use this tool to get rid of the excess words like is, are, an, the, etc…that means nothing in terms of keyword optimization. This WordPress plug-in allows for your permalink to be shortened for only the important keywords that will show on your web address.

WP Super Cache allows your WordPress site to load faster making the user experience a much more pleasant one. They don’t call it super for nothing. Remember that your website’s load time now affects how you rank in the search engines so this is a great tool to have for better SEO ranking.

Google XML Sitemap allows all the pages on your site to be indexed on the search engines that include Google, Yahoo, and Bing without you having to do much. All you need to do is download and install the plugin and the magic happens. The WordPress plugin automatically submits the sitemap to the search engines. This will help improve your rankings in the search engines and thus is another great SEO tool.

FD Feedburner is used to direct all RSS feeds to Google’s feedburner without you having to change any code. Just download the plugin and all RSS feeds are recorded in Google’s Feedburner, which provides analytics such as the number of subscribers, reach, and clicks. It gives you an understanding of which blog post is most popular in order for you to better focus your blog topics.

SI CAPTCHA Anti-Spam protects your computer from those pesky bots from leaving their droppings, aka spam on your WordPress site, so to speak. Any user who wants to leave a comment on your blog post will have to fill in a specific CAPTCHA code or a code with letters and/or numbers.

Akismet is another great spam fighter for comments and trackbacks. It also provides analytics of your spam and ham (the legit comments). You will need to obtain an API key at WordPress.com to get Akismet running.

WP Google Analytics allows you to monitor your traffic using Google Analytics. This plugin integrates with Google Analytics so long as you have a Google Analytics account, which is free to obtain. Rather than adding the analytics code to the backend of your website, you can just install this plugin onto your site, paste your code that you are given when you sign up for Google Analytics, and voila you’re ready to go. You can track every page on your site through Google Analytics.

WPtouch iPhone Theme makes your WordPress site look aesthetically pleasing on the iPhone, Android, and any other touch based smartphone. The WordPress plugin converts your website user interface to a mobile user interface that is simple and easy to view. The Pro version is coming out soon, but the regular version is free.

WordPress Related Posts displays your related WordPress blogs based on your tags. This is a great way to get your readers to stick around your site for a little longer to read other blog posts that they may be interested in.

Thank Me Later sends those who generously comment on your blog a thank you email. Here is your opportunity to show your readers how much you appreciate them. Also, you can reach out to them and inform them of other ways to engage with you on WordPress or in the social networks even.

Digg this Button, TweetMeme Retweet Button, WP Google-buzz, Like are all WordPress plugins that are great for keeping up with your social media activity. The creators make it is way convenient for your readers to tout your blog posts. I know there are plugins that have the all-in-one social media buttons, but I like using the singular buttons more because the buttons appear less cluttered.

Post Ideas+, although conceptually a really simple WordPress plugin, is in fact really useful and necessary. Here you can list out all your blog ideas and add tags, links, and priority to it. The list shows up on your dashboard so you always know what’s in the horizon. This is a great organization tool.

When it comes to mobile phones, we no longer care for their fundamental use (make/answer phone calls), but we purchase them for the status quo that they carry, the beautiful user interfaces as well as the ever evolving user experience, and of course the addicting apps that they house. Lately, the omnipotent iPhone has had to share the spotlight with Android. Android is blowing up and with HTC’s Evo 4G, the only one of its kind now out on the market, it will only get bigger. So lets set aside the iPhone craze and now turn our attention to Android, more specifically the Android apps. Below is a list of my top Android apps for small businesses.

Expensify is a great Android app for storing as well as capturing your business expenses. You can keep a record of your expenses and take photos of your receipts. You can create an expense report and attach receipts to each entry. Another great feature is adding credit cards to the app in order to import your expenses directly into Expensify, which updates daily. This takes the pressure off of having to remember to record all your expenses. You can export to Quickbooks or Freshbooks, and it even has time and mileage tracking capabilities. The user interface is clean and simple with only 3 buttons you have to manage: expenses plus photo of receipt, photo of receipt only, or sign off. The interface is straight forward and with very few fields to fill in, the task of having to update your expenses becomes less tedious and annoying. Lastly, customer service is exceptional. The Expensify folks are prompt and very eager to get your opinion on the app. This tool is great for tax season making write-offs a piece of cake.
Note: You will need to set up an Expensify account. This app is also available on the iPhone and Blackberry.
Price: Free!

Google Maps works great on Android. Shocker! Aside from the features that you’re use to on the web, the navigate feature is its best selling point in my book. Yay! No more TomToms or Magellans and bad UX with hooking those GPS navigation systems to the windshields. With this Android app, you can set your mobile phone down and allow Google Maps to verbally direct you to your destination with its turn by turn navigation. Other features included in this app that are worth noting are options like layers and labs. Layers gives you practically all the features available on the web and Labs is another option that is offered where additional add-ons or plugins are being experimented with by Google to make the mobile app more effective. As a small business owner, you’re always going to find yourself going to new and unfamiliar places to meet colleagues, suppliers, and clients, thus make sure you have this mobile app with you during your many driving adventures into the unknown.
Price: Free!

Astrid is a simple to-do list Android app. The mobile app offers reminders, checklists, sorting and filters, tagging, synchronization to Remember the Milk (another free to-do list app), and you can backup your tasks to your SD card as well. With a gazillion things to do as a small business owner, it’s important to get organized and this app will help you complete your tasks so long as you remember to record them all.
Price: Free!

Google Voice is a voicemail service that allows you to keep your existing mobile number and have missed calls forwarded to your Google Voice number. You can also have your Google Voice forward calls to your existing mobile number if you don’t want to give out your personal number. Domestic calling and texting can be done through Google Voice as well. This Android app allows for missed calls to be viewed via your mobile phone, internet, or email. Another neat feature is that all voicemails are transcribed so you have a record of all your communication. This will really help with avoid communication issues of he said, she said, who said what. Also, this app will save you on those precious mobile minutes. The latest feature offered in the mobile app is the Inbox synchronization thus all incoming calls are in real time now.
Note: You will need to sign up for a Google Voice invite and then once an invitation is sent to you, you can set up an account. It is also available on the iPhone and Blackberry.
Price: Free! however to make international calls this will cost you a bit.

Qik on the 3G network allows you to stream live video straight to the internet. This is a great and easy way to set up video for your audience to view. You can also record a video and send it to your colleagues, associates, and clients. This Android app integrates with your Facebook, Twitter, and Youtube accounts as well. New upgrades are out for the 4G HTC Evo with video chatting.
Note: You will need to set up a Qik account.
Price: Free!

Mighty Meeting is a powerpoint presentation management tool for the Android platform. This mobile app syncs with your Facebook, Twitter, and Youtube accounts to make sharing nice and simple. You can tag your powerpoint presentations to make retrieval of the one that you’re searching for a snap. You can also deliver your presentation via your phone with no problems.
Note: You will need to sign up for an account. It is also available on the iPhone.
Price: Free!

Advanced Task Killer is a very useful and easy app killer on Android. Naturally the more apps you have on your mobile phone the slower your device will run so don’t be like me initially and download every darn app out there, especially the free ones. However with that said, even with a handful of apps on your mobile phone it’s still hard to keep track of what has been open thus this is why the Advanced Task Killer is a life saver. Not only does it show you what apps are running, but with the tap of a button you can easily end all apps. It also allows you to create an ignore list of apps that you want to always run such as your Astrid app for instance.
Price: Free!

Opera Mini, touted to offer the fastest search speed, is an Android app mobile browser. I’d have to say it is faster in rendering web content than using the web browser that comes with the mobile phone. Some features offered include bookmarking, saving pages, and a neat search button. Having your own business spares you very little idle time, therefore Opera Mini can grant you more time to get things done.
Price: Free!

Locale makes your phone truly a “smart phone” that can think for itself by relying on GPS, Wifi, and cellular signals. You can set up situation notices such as when you’re in a meeting and it’ll know to switch your setting to vibrate. This will save you from any embarrassment in the board room. Also, it’s smart enough to turn off the power draining applications on your mobile phone when it detects that your phone is running out of batteries. This Android app also comes with plug-ins made available by third party developers.
Price: $10.99, plug-ins are an additional $1.99 each

Twidroid is a twitter client for Android. It has a clean user interface, customizable options in the settings menu, and many options to choose from to make tweeting on your mobile phone as easy as doing it on your desktop or laptop. Other cool features included in this Android app are trends, search tool, edit your profile, manage your lists, url shorteners, and photo uploads.
Price: Free!

Personalize your small business. Here is a place where an audience is at your disposal. You can tell them about yourself, your business, your next move to take over the world (any Pinky and the Brain fans out there?). You can also educate your audience to better understand your specialty or industry. Here is your chance to allow current customers and prospects to get to know you and your business, so don’t forget to bring that personality out in your rhetoric.

Search Engine Optimization or SEO is great for blogging. Do search queries in the search engines to research keyword phrases that are widely used and most relevant to your small business. Choose a few keyword phrases that are most relevant and sprinkle them onto your blog content. This will give your website a boost in rankings on the search engines. Remember that nothing happens overnight, thus keep blogging and continue to “sprinkle” for better results.

Build relationships. Want to know what your customers are thinking? Well, blogging gives you that opportunity to reach out to your audience and find out what they care about. You can help them answer questions or concerns about issues relevant to your expertise or small business. If you can show that you genuinely care about your customers, then a long standing relationship has been formed.

Share and collaborate with others. These are opportunities that come with blogging. Here the great bloggers can find you, and vice versa, resulting in some collaborating magic. Blogging is a great way to share your ideas, showcase your talents, and tout your masterpiece with other talented individuals or companies. The antidote to some incurable disease is within our grasp and just might begin with a blog.

Build a following. Having a blog gives you the opportunity to build brand recognition. It allows you the exposure you need to create a following. You can create an RSS feed to allow your followers to be up to date on your most recent blog entry, and spread the word about your latest post on the social networks to draw a crowd. Your audience will become your followers as you work to develop brand loyalty.

Become an opinion leader in your industry. This you must earn and one way of earning it is by blogging about your specialty or business. It is up to the audience to determine your reputation so ensure that your blogs are authentic and honest like you and your business are, and that they contribute to the industry.

Blogging is cheap! There’s no need to run out and spend tons of money on marketing. You can have a blog up in less than an hour at a very low cost or even free at websites such as WordPress, Joomla, and Drupal, all content management systems. A blog provides an extremely inexpensive avenue for you to market your small business or specialty.

It’s fun to give and receive. You give your industry knowledge and in return you receive (in the web realm) retweets, shout outs in the social networks, comments on your blog entries, and inbound links. It’s really nice and encouraging to know that people care to read your material as much as you enjoy writing about it.

Great addition to your overall marketing strategy. If you have a business, small, large, extra large, no matter the size, you must have a marketing strategy and you, 9 times out of 10, should be blogging about your business. Blogging is an essential marketing tactic to your overall marketing strategy. Make sure these plans are put in place and execute!

Grow your small business by generating leads. I have not forgotten the whole point of blogging. Yes, it’s to bring in more customers! Yes, it’s to increase sales! Yes, it’s to make more money. So…what are you waiting for?

Take a sneak peek at the new home of Nickel & Dime Bookkeeping! In a matter of just under 2 weeks, we were able to create a fresher, more modern site for owner and bookkeeper, Jennifer Vicinsky.

Jennifer’s approach to bookkeeping services is highly professional, yet friendly in a way that really helps take the fear out of working with numbers. Therefore it was very important to reflect her style in the visual website design as well as in the tone of the copy. Additionally, she is planning to leverage more social media marketing and multimedia for training down the road, so it was critical to provide her with an easy way to write new articles, post videos, and connect with all her fans and customers through Twitter (@theSilverPiggy) and via Facebook.
Thanks again and congratulations on your new site, Jennifer!
Want to know more about how we did it? Email me at karen@nomadchique.com

Here’s a short video on how to install a new theme on WordPress.

If you’d like to learn how to do anything else on WordPress, then please leave a comment and I’ll create a WordPress tutorial video just for that.

Last Saturday, I participated at another excellent iPhone/iPad huddle, the Hello Universe Seminar, hosted at CoWorking Fullerton by organizers Linus Lee and Rutger Hensel. It was a 1-day meetup to learn, share and connect – specifically, it was geared toward developers, product & graphic designers, UI designers, UX designers, business strategists, legal counsel, and current & future iPhone/iPad entrepreneurs.

The whirlwind day consisted of multiple tracks of 90-minute sessions to choose from including UX and Design, Coding, and Business Insights, filling the morning. Then, in the afternoon, we had a special panel of speakers share apps, code knowledge, legal advice, and additional practical business advice from successful “i-preneurs.”

Blazing Down the UX Tracks

The first session I sat in on was with product & graphic designers Craig and Greg. They shared their perspectives on good web design sensibility from the artistic and creative side, as well as emphasis on human-centered or user-centered design. Together the tag team presenters touched on a range of info on everything from the key elements of art theory, color, balance and the Golden Mean, to ergonomics and physical form attributes to consider with these new mobile devices. For example, did you know that humans have evolved to where our index fingers are no longer our dominant fingers? It’s the thumbs. Makes you wonder why, doesn’t it!?

The next session I joined was “UX Rocks”, presented by Amy Li of Meidesign. After that session, I have to say that Amy rocks and she did a stellar job of showing the full spectrum of the user experience design process and explaining her UX design philosophy. Amy designed the widely popular iPhone app – Have2P – which sends giggles across the room everytime it’s mentioned. The app was featured in the New York Times and Gizmodo. As you can guess by it’s clever name, you use the app to tell you where the closest potty is when you … have to pee! Amy described UX professionals as “misfits” – which I totally love because I think that’s very true, we have multiple interests and don’t just fit into one hole. We user experience folks love getting into not only the graphics design and visual design, but also people’s behavior, and the business side of things.

By demonstrating how the concept evolved from initial ideas to wireframes to visually treated screens, Amy helped clarify the thought process and iterative process that you should expect (and demand) when you work with an experienced UX designer or UI designer. She explained how her design philosophy of empathy design, keeping it simple, and surpise and delight applied directly to Have2P. She even shared strategic tips on cross promotion for other spin-off products and graphics used in marketing and co-branding programs. The presentation ended with a look at upcoming trends in mobile experiences such as augmented reality, biosensors, and combining speech with gesture – so those killer displays you’ve seen in movies like the Minority Report and Iron Man are just around the corner. Also, all you women out there, apparently we’re an untapped market as only 20% of the current apps are geared towards us. There’s lots of potential for growth here so let’s get cracking!

Lunch and Launch

Lunch consisted of homemade healthy food courtesy of Linus’s wife and a fun fast-pitch session for prizes. I love prizes (and feedback about ideas) so I jumped into pitching my idea. Eleven of us had the chance to pitch an idea or an actual working concept for a new app in a 60-second “mini-mercial”. The rest of the seminar-goers voted by an applause-o-meter that measured actual decibel levels.

Afternoon Insights from the Field

Afternoon treats included guest speakers, John Safyurtlu of General Counsel, Alex Miyamura of Simpaddico and Burstly, Steve Rassmussen of eCasa, Inc., and Martin Perez of JPL.

John helped us navigate the waters of business entity selection and recommended contracts that developers and designers should have in place when getting into the app biz.

Alex shared his first-hand insights on how to monetize an app, explaining that an IS is a business and that we should focus on the revenue sources that really matter and that we can control. He presented 3 models of direct revenue including paid, ad supported, and Lite+Full/Freemium.

Steve covered the in’s and out’s of how to turn your website or web application into an iPhone-friendly format using the things we web developers are already familiar with: HTML, CSS and Javascript. He recommended PhoneGap as an open-source platform for developing designs for multiple devices that render through the on-board web browser. So it works on Android and the iPhone/iPad, and also Windows and Blackberry with a little extra work. According to Steve, PhoneGap is still compliant with the guidelines of the App Store as it still works within Objective C and Xcode natively, a strong concern for developers with the recent changes to the App Store guidelines.

Martin shared his work on the Space Images iPhone app for JPL, the Jet Propulsion Laboratory of NASA. It’s pretty cool and if you have kids, super educational. Definitely check it out. Also, if you’re looking for something educational and fun to do with the family next weekend, think about going to the one-time-per-year JPL Open House Sunday, May 15-16, 9am-5pm.

The day ended with prizes! Alina of the LiFE Russian LiFE Russian iPhone app helped Linus present the goodies for presenters and the fast-pitch contest. And guess what?! I took third-place, winning an iPhone Sketchbook. If you know me, you know how much I love sketchbooks. Overall, it was a great day. Looking forward to seeing everyone again at the next event!

If you’d like to network with other smart folks in this space and you’re in the OC area, try joining this meetup for other mobile design and development adventures. To see more photos of the event, go to NomadChique’s Flickr or Tumblr.

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.

iPad –DEATE

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.

ipaddevcampla ideation

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:

AppShows.com – Answer the question: What does your app do? Check out its PresenterPro.com demo.

Screencast Applications

• Screenflow
• 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.
• Snapflow
• 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.

Some of my clients have been asking questions about how to do certain things in WordPress so I figured this would be a good opportunity to start creating some simple 2 minute WordPress how-to videos or WordPress tutorial videos. Below is a video on how to insert and resize a Youtube video into a WordPress blog entry. This video is a simple tip, however if you have any other inquiries about how to do anything in WordPress or a certain Adobe tool like Photoshop, Illustrator or Flash, then please leave me a comment and I’ll put out more how-to video tutorials. I used a super-simple-to-use cloud app called Jing by the way to create this video.

To see a larger view, click on the small icon in the bottom left corner of the video.