New O’Reilly Book: Mobile Design Pattern Gallery

We recently had a new mobile project starting and all of our experienced mobile designers were booked. This gave me less than a week to ramp up a new designer. So I made a quick tutorial with lots and lots of screenshots, illustrating good design and not so good design. Gradually a set of patterns for mobile application design emerged.

Even as I was cataloging these patterns, I knew that the real value wasn’t only the pattern identification, but in the hundreds of examples I’d captured. So instead of a tome of abstract patterns only an author can love, this book is a showcase, or gallery, of mobile application design. This book includes 400+ current screenshots from iOS, Android, BlackBerry, WebOS, Symbian and Windows mobile applications, organized by pattern type.

Check out the:

• New website www.mobiledesignpatterngallery.com and sign up for a free copy of the book when it is released
• Preorder Mobile Design Pattern Gallery: UI Patterns for Mobile Applicationson Amazon
• New blog, and subscribe, I’ve got lots of good articles in the hopper
• Flickr photostream with over 600 screenshots organized by pattern type
• Sample Chapter UX Booth

And follow me on Twitter, @mobilepatterns, for expert mobile design tips.

Examples for Functionality, Gamification, and Feedback Loops

I noticed an article on bokardo, Joshua Porter’s blog, about Functionality, Gamification, and Feedback Loops. He has some insightful comments on the Wired magazine article Harnessing the Power of Feedback Loops.

I saw a great example of gamification and feedback loops in the iPad app Kobo. Kobo is an alternative to iBook. Unlike iBook, Kobo has integrated a concept called “Reading Life” that offers awards, statistics, and images to share in my social networks

Kobo tablet screenshots- from OhGizmo

I immediately called my friend and asked her to get Kobo on her iPad so we could both use it and see who reads the fastest (a little competitive spirit going on). Then I sent a link to another friend- encouraging her to use it too. Then I bought some books and will shortly post my Bookcover on Facebook.

Compare this to Audible’s Stats (timer, achievement awards and badges), which leave me feeling undermotivated. I mean, I’ll use the app and all, but I’ll never intentionally open the Stats screens again.

Kobo and Audible are both using gamification techniques to encourage specific behaviors (buy more books). So why is Kobo getting me to change my behavior and Audible isn’t?

1. Audible has a bug and isn’t pulling in any of my hundred of stories I’ve bought over the past few years. So the feedback loop that might encourage me to “level up” isn’t working because the data is bad (I’m not an AppNewbie).
2. Kobo started me off with some badges already earned (good for me!), Audible has me at 0 out of 15 (lame-o).



3. The stats in both apps stay up to date to reflect my reading/listening patterns. Audbile only has one stat, listening time, whereas Kobo offers lots of interesting information.



4. Most importantly: Kobo tapped into not only how I read (pages per hour), but how reading is a part of my life. I’m in a book club, I share my favorite titles and authors with friends, I read out loud to my kids, my mom and I bond over books. With Kobo’s “Reading Life” I can now easily share what I’m reading with my circle of friends and family.

Please share other example of apps using gamification and feedback loops effectively, or examples of ones that failed.

Flex 4.5 for Apple iOS, Google Android, and Blackberry

We’ve been working with Adobe since last year to design and develop a showcase of reference applications for Flex 4.5 and Flash Builder 4.5. This has been an amazing project from a design and development perspective, designing for multiple form factors, and coding with the new SDK.

Read more here:

Just a year after Flash Builder 4 and Flex 4 SDK were released, new versions are available with Flash Builder 4.5 and Flex 4.5 SDK! The main focus for Flex 4.5 SDK and Flash Builder 4.5 is the ability to build mobile applications that target the Google Android, Blackberry Tablet OS, and Apple iOS operating systems. Additionally, Flex 4.5 SDK introduces new Spark components and improvements for large application development while Flash Builder 4.5 introduces dozens of new coding productivity features for faster ActionScript and MXML development.

Shopping Cart

---

Expense Tracker

---

Sales Dashboard

Top Ajax Technologies and RIA Frameworks

New article on InsideRIA today:
Top Ajax Technologies and RIA Frameworks
I posted a fairly comprehensive list of RIA frameworks and Ajax technologies rated on:

• Completeness of their UI control set, based on the list of essential controls
• Usability of the controls
• Aesthetics, based on the default visual design

I also included some examples of applications built with the top frameworks and technologies:

Zenoss built with Ext JS/Sencha

Digital Tutors built with Adobe Flex

Netflix built with jQuery

Pandora built with Open Laszlo

OtherInbox built with Sproutcore

Vimeo built with MooTools

Wavemaker built with Dojo

RIA Screen Layouts

Last year I posted an article on 12 Standard Screen Patterns. It has been incredibly popular so I updated it for 2010. The full article is at UX Magazine. Check out the article and take a look at the 15 standard layouts and examples from more than 80 current RIAs:

Great Experiences with Flex

Here’s my talk from Dec 11 at the Adobe Austin Users Group. This is a beginners introduction to designing for Flex, although there are some goodies for experienced designers too.

Essential Books for User Interface Designers

If you are looking to stock your library, you can’t go wrong with this list of books. These are the books that are literally on my desk, listed in order from top of the stack to the bottom.

The Visual Miscellaneum: A Colorful Guide to the World’s Most Consequential Trivia

By David Mccandless

If you are a fan of Edward Tufte, you need this book. If you don’t know who Tufte is, you need this book, and all of Tufte’s books. It is chock full of ideas for visualizing data in more meaningful ways. This is on the top of the stack because I just got it- it is quite lovely.

Prototyping: A Practitioner’s Guide

By Todd Warfel. Rosenfeld Media, November 2009.

These concepts completely changed the way we do business. Full of real examples of how to use different popular tools for prototyping. this is # 2 in my stack because I had to look up some information about prototyping with Fireworks this morning.

Smashing Book

The book is available exclusively from Smashing Magazine. This book looks at Web design rules of thumb, color theory, usability guidelines, user interface design, best coding and optimization practices, as well as typography, marketing, branding and exclusive insights from top designers across the globe. Oh, and one of my applications, OtherInbox, is in the first chapter!

Designing Web Interfaces: Principles and Patterns for Rich Interactions

By Bill Scott and Theresa Neil. O’Reilly Media, January 2009.

Yeah, I know this is our book, but it really is on my desk. I use it for reference at least once a week. I had to look up ZUIs, zoomable user interfaces, earlier this week for a project.

Designing for the Social Web

By Joshua Porter. New Riders 2008.

Great, great read. Worth every penny because it is full of practical advice. Make sure you also look at Joshua’s talk on SlideShare: Designing for Social Interaction. I don’t necessarily refer to this book every day, but I recommend it to at least five start-ups a week.

Designing Social Interfaces: Principles, Patterns, and Practices for Improving the User Experience

By Christian Crumlish, Erin Malone. O’Reilly Media, September 2009.

“This book is a fairly exhaustive catalog of most UI patterns in place today with sites that integrate social networking. There are some very interesting discussions about each pattern, when to use it and who uses it. ” from an Amazon review. I need to pull this book out of the stack and take it with me on the plane next week.

Web Form Design: Filling in the Blanks

By Luke Wroblewski. Rosenfeld Media, May 2008.

Anyone who designs anything for the web needs a copy of this. It makes it so nice to not have to think about designing forms. I can spend my time on more interesting design challenges. This book doesn’t leave my desk.

Defensive Design for the Web: How to improve error messages, help, forms, and other crisis points

by Matthew Linderman and Jason Fried

Let the 37signals team show you the best way to prevent your customers from making mistakes, and help them recover for errors if a mistake does occur. This book doesn’t leave my desk either.

About Face 3: The Essentials of Interaction Design

By Alan Cooper. Wiley 2007.

Learn the rules before you break them. Please. Pretty please with a cherry on top? Get this book and read it if you are responsible for designing anything more than a simple web site. Good for Flex developers and Ajax developers as well. Lots of patterns that can be extrapolated for Rich Internet Applications.

Designers vs Developers: Coming together to build the best RIAs

Presented on Nov 3, 2009 at Øredev in Malmo, Sweden.

What is the fastest way to get from a product idea to a rich internet application? By breaking down the communication barriers between designers and developers.

This talk takes a quick look at how to build a shared vocabulary and use prototyping to bypass extensive wireframes and development specs.

Take a look at 5 simple and effective prototyping tools:

• Balsamiq Mock-ups + Nakpee
• Any wireframes + Protoscript
• Prototcasting (using click-throughs and screencasts to convey requirements)
• Atlas and other development environments + visual layout editors

.

RIA Showcase and Gallery

Inspired by TapFancy- a showcase for the very best in iPhone and iPod Touch application design, we started a tumblelog to showcase the best Rich Internet Applications.

The initial content is from our InsideRIA article highlighting the 50 Most Usable RIAs, but we’ll add more weekly. If you know of an app that deserves recognition, please let us know.

Designing for Interesting Moments

My co-author Bill Scott is sharing his newly rewritten talk on Designing for Interesting Moments. Given at Microsoft in Redmond, Ruby Meetup Group at CMU/Moffett Field & The Ajax Experience 2009.

Overview: Did you know that there are at least 16 different moments of interaction during drag and drop? And that there are at least a half-dozen elements on the page that conspire with these points in time to form a drag and drop interaction? With almost all user interactions there are lots of interesting moments that you can use to enhance the user experience — or worse to create confusion in the user’s mind.

In this talk, Bill slows down time and puts dozens of interactions under the microscope to study what works and what doesn’t work when creating interactive applications. Nuances from 80+ examples illustrate both what should be emulated (design patterns and best practice tips) as well as what should be avoided (design anti-patterns).

These are conveniently summarized in six over-arching design principles.

* Input where you output.
* Require a light footprint.
* Maintain flow.
* Invite interaction.
* Show transitions
* Be reactive.

This talk goes hand-in-hand with our book, Designing Web Interfaces and will provide you with dozens of clear take-aways for designing rich interactions on the web.