GQAdonis

I found the following interesting articles this morning with pointers to sample code for Android UI:

• Pinned Header List View–This is interesting list view code appearing in the Devoxx 2010 sample application, which is a good example of Android UI Patterns use.
• ViewPager meets Swipey Tabs–This is interesting UI navigation code appearing in the Android Playground sample code, which is another good example of advanced Android UI patterns.

This morning, I happened across some great UI Design blogs specific to Windows Phone development. Jeff Wilcox, the creator of the award winning 4th and Mayor Windows Phone application has a great blog entry covering Metro Design. While I don’t do a lot of Windows Phone development, it is one of the platforms we support at CloudMetal Software.

This blog entry talks a lot about Metro Design, and this one has some more technical examples.

In doing a quick search on new Android user interface patterns, I was pleasant surprised with a plethora of resources. First, anyone wanting to keep up to date with what is happening on the Android platform should check the Android UI Patterns Blog. From there you will get a pointer to the following code projects and resources:

• android-ui-patterns code project–This code sample resource is mentioned in an article about implementing the Dashboard and Action Bar patterns.
• Dashboard Pattern Source–This is a part of source code for IoSched written by Roman Nurik.
• IoSched–IoSched is a source code project that is updated every year for the Google I/O Conference for managing access to classes at the conference. Quite cool.
• Styling Android–This is a great blog that covers topics related to styling Android user interfaces, including the discussion of using graphical elements vs. layout techniques.
• Dynamic List Implementation–This is an implementation of an “endless list adapter,” allowing for an ever-expanding list that can be refreshed using the android-pulltorefresh project by Johan Nilsson.
• Android View Flow–This is a great source of sample code for scrolling through paged views. The new Android Market and Google+ apps use this.

These are just a few of the resources found, and links on these pages provide a pathway to many more.

This is a quick post to point to a cool Android UI Widget that can be found here. It provide a pager view similar to a built-in iOS control.

Another great control I found is here. This control provides support for long, long lists in Android applications similar to the pull-down list work in Three20.

Finally, this Android Patterns site provides a good view of how to build great Android applications.

Overview

Finding good resources for mobile user interface design patterns is difficult, and I have found a couple that serve as great starting points for designing spectacular, unique, but easy to use mobile application user interfaces on iPhone.

Mobile-Patterns.com

This site was apparently started by the lead designer at Foursquare, Mari Sheibley. Foursquare has provided innovative design examples in the development of their iPhone and Android applications.

Pttrns.com

This site provides an extensive list of 289 patterns categorized by type. This collection is extremely useful and provides up-to-date examples.

Balance

The thing that I appreciate most about the examples provided by these sites is the balance in the use of creativity. It is easy for UI designers to get carried away with looking “different” to the point that the interface dynamics are no longer easily recognizable to the user. While users can be visually stimulated by “difference”, this only lasts a short time–until the first time the user does not immediately know how an interface works or what to do next. Mobile applications must be visually stunning but also follow established patterns in the way they are constructed, so the user feels a sense of familiarity. If this rule is broken, the world is left with an application that initially might be downloaded a thousand times but only used by each user a few times before users get frustrated and download an application that is less stunning but lets them get the job done faster.

These great blog posts provide good information on methods of implementing cool user interfaces that allow for fluid data entry on either UIView or UITableView based forms with an action button:

• Adding Action Button–This method utilizes a UITableView footer to insert a button that can be used to take action on the data entry form.
• Implementing a Form Inside a UITableView–This uses a method for ensuring that data can be edited, but I am not so fond of the method that prevents the reuse of cells in this implementation. As alternatives, the Apple TaggedLocations Sample provides some good clues. Also, this post, from Twitterific’s creators has some excellent guidance on this as well. Finally, IBAForms is an open source project that abstracts the entire process in a nice way that includes full source code.
• UIScrollView-based Data Entry–This method uses a simple UIScrollView with UITextField items and keyboard size detection and adjustment to allow data entry. This is to be used for very simple forms where a table method does not fit (like where data entry needs more real estate on the screen).

On the iPhone, these seem to be the best methods for this, as there are not very many examples out there…