Get it for $20 on the O’Reilly site, format ePub, mobi or PDF. Please rate it and leave a review, I appreciate all feedback.
The print book should be available next week. I’ll be signing copies at SXSW @ 1:30pm March 13, at the Expo Hall.
Archives For design patterns
Here are some excellent resources if you are designing an Android smartphone application for Gingerbread or Ice Cream Sandwich.
Galleries
- My Mobile Design Pattern Gallery has hundreds of screnshots from iOs, Android and other OSs. I also posted a presentation of The Best Android Apps
- After spending months compiling screenshots for the book, I just found this rockin’ Tumblr site with hundreds of screenshots specific to Android, Android Niceties
- 150 Top Andorid Apps, Editor’s Pick. Note, not all of these have a great UI, but it is definitely worth browsing
- As stated, AndroidPttrns is a shameless copy of pttrns.com, the site that catalogs iOS screenshots. Android Pttrns don’t have a lot of material yet, but I’m sure it will grow over time.
Pattern Libraries
Stencils/Templates
User Interface Design Guidelines
Blogs/ Articles
Books
- Mobile Design Pattern Gallery: UI Patterns for Mobile Applications
- Best Android Apps. Keep in mind, best refers to functionality, not best UI design. I pulled the best UI examples from here into my gallery.
- Mobile Design & Development by Brian Fling, free book. This has a really good chapter on Mobile IA.
- Mobile First by Luke W. This is more focused on mobile web, but should be read by all designers tackling mobile design challenges.
Presentations & Videos
- Must Watch, Android 4.0 Design Tips
Android 4.0 UI Design TipsView more presentations from Justin Lee
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 Applications
on 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.
After our book release in January 2009, we posted an article on 12 Standard Screen Patterns. It went viral with hundreds of thousands of readers. Two years later, it still gets 1,000+ readers each week.
In 2010 we updated the screen patterns, including a few more and all new examples: RIA Screen Layouts. With more than 40k views on Slideshare, it seems to be pretty popular
And now they are in print too! Three books this year included our screen patterns as the way to solve common UI problems:
- Designing Interfaces: Patterns for Effective Interaction Design- Second Edition by Jenifer Tidwell, O’Reilly Media 2011
- Smashing Book #2, Smashing Media GmbH 2011
- Professional Web Design: The Best of Smashing Magazine, Smashing Media GmbH 2011
Check out this excellent article by Janko: Ultimate guide to table UI patterns. It is full of great examples and suggestions.
After reading it, I just had to add three more scenarios:
1. Inline Editing
Quicken Online allows simple editing with a pull down for more advanced editing.
Mint.com does the same.
The Ajax framework Ext JS and Ext for GWT offers a pre-built Grid row editor component. Try out the demo. This would work well for tables that are primarily read-only but might need to be edited. This design is not for heavy data entry.
For heavy data entry, use a design like Harvest. They offer a simple grid layout that keeps a live total and provides a Save button for saving all the entries once the person is done (it also auto saves periodically).
Google Docs is an online spreadsheet application with inline editing. It also has a Save button for the whole spreadsheet, as opposed to per row updates.
Inline Editing Best Practices
- Implement tab navigation when you create a table with inline editing.
- Consider how to handle errors, such as highlighting rows or cells with errors in a way that is easy for a person to correct the issues. Don’t break the person’s data entry flow by locking them in a cell with an error, simply highlight the cell with the problem and provide a way for them to return to it later to fix it.
- Offer undo and redo functionality.
Swivel is an app that acts a lot like Excel and provides cell specific error messages.
2. Super Wide Tables
I received an email last week asking me about super wide tables. The email said “I’ve come to the conclusion that breaking them up into smaller chunks is maybe the best way to go, rather than going with a horizontal scroll-bar that goes on for days.”
Based on a lot of design work Bill Scott and I did for the airline industry, I would instead propose instead applying these principles:
- Organize the most important columns to the left.
- Experiment with frozen/fixed columns, so if the person does need to horizontally scroll, they can keep context.
- Only show a set number of columns in the default view (so there is no horizontal scrolling in the default view) and offer a Customize option so the person can choose to hide or show more columns. ExtJs has this built into the column dropdown; I usually add a customize button to the table toolbar with Hide/Show column functionality.
- Offer resizing of columns.
- Offer rearranging of columns.
- If you have a table with some columns editable and other read-only, group editable with editable, read-only with read only.
- Don’t abbreviate column titles, reduce spacing or padding, or drop to a smaller font to fit your table on the screen. That won’t help anyone use your app.
- Try out fat rows like this example from Survs. Instead of having a column for title, created by, created on, last updated on, all of that information is in the second column. Good visual design can help organize the information in a more meaningful way which makes your data easier to scan.
- Use a summary row to chunk the data if appropriate. I know this won’t make your table any narrower, but it might make it more readable.
- Consider putting a visual summary, or roll-up, above the table so the person can make sense of the data visually before diving into a huge table of numbers.
Discover Spend Analyzer offer a dual purpose summary and filter above the rows of transaions. Play with the demo to try it out.
Swivel example
3. In-column Filtering
The example included in Janko’s article has dynamic filters above the table (dynamic meaning, when you make a selection, it dynamically updates the table content- without an extra submit action).
In some web applications, like heavy productivity applications or enterprise apps, in-column filtering is a powerful option to offer. It is pretty easy to implement with Flex or Ajax. Just validate the need for this type of functionality with your customers; it could be overkill for people who just need simple filtering.
Example from Zenoss Open Source Server and Network Monitoring
Try this at Telerik RadControls. This example requires a click on the filter button in the column, and has the option for selecting a specific way to apply the filter.
Play with SmartClientRIA, where the implementation ( they blank out the whole content area while filtering) makes it seem slow.
And a Flex example, where clicking on the filter icon lets you search in that specific column, and then you can further refine by filtering other columns.
Make sure you take a look at Janko’s original article: Ultimate guide to table UI patterns, and another informative post 15 Tips for Designing Terrific Tables.
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:
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.
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
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.
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.
Fluency and Rosenfeld Media sponsored the first DelveUI, A 2 Day Masterclass on Designing User (Web) Interfaces last week at the NYU Poly Campus in Brooklyn.
I had an opportunity to speak about my favorite topic: design patterns and principles for rich applications. The talk is titled Designing Rich Applications- and illustrates the need for richness at four levels:
- application structure
- screen layout
- selecting rich UI controls
- interactions
Designing Rich Applications
View more documents from Theresa Neil.
I’m working on a nifty little flip book that has all of the application patterns, screen patterns, rich UI controls and interaction patterns. All the patterns are on index cards and you can carry it into design sessions- and flip through it for inspiration- or to find a certain pattern. 
Let me know if you think this would be useful.
