MobileDesign:About
From MobileDesign
Little Springs Design, a mobile user experience consultancy, provides this mobile UI pattern library for community use and updating.
[edit] About UI Design Patterns
A design pattern documents known good solutions to frequently occurring design problems. In some cases, the solutions themselves become encoded as user expectations: an application that violates the common design could jar user expectations.
User interface design patterns are generally identified and articulated by design experts. They can then be used by less experienced designers or by designers wishing to create a consistency in user experience.
If writing about "usability patterns" is included, there are three types of UI design patterns: patterns of practice, user interface design structures, and corporate patterns. Patterns of practice are closer to best practices in development, such as process for targeting multiple markets, and are not reflected in this site.
User interface design patterns, or "universal patterns", are solutions that likely work across a wide range of applications and on different platforms, although some patterns are platform-specific. In addition, organizations with a complex set of offerings may also create a set of highly specific, fully stylized, "corporate patterns" in a pattern library frequently with code associated with the pattern.
[edit] Universal Patterns
Universal UI design patterns can perhaps be called simple "best practices". They are the pure version of user interface design patterns, and apply to a wide variety of applications and across platforms. The examples in this chapter are universal mobile UI design patterns.
Most of the mobile UI design patterns found on the Internet are universal patterns. As of 2006, none of the large corporations who published their desktop UI patterns had published any mobile patterns.
Excellent sources of UI design patterns include - www.welie.com, which includes desktop web, software, and mobile patterns. The mobile patterns are fairly dated. - Designing Interfaces: Patterns for Effective Interaction Design, for desktop web design. - User Interface Design Patterns, which are basically a set of course notes. - Ubicomp Design Patterns, a set of design patterns for "ubiquitous computing", which ranges from physical devices and spaces to usually mobile software.
[edit] Corporate Patterns
Many organizations standardize their design process using not just style guides, but a pattern library. Each pattern contains all the same information as general patterns, with the addition of specific style requirements, a concrete visual design, and frequently application code snippets. The Yahoo! User Interface Library is a publicly accessible corporate pattern library.
UI pattern libraries serve the same need as icon libraries, but apply to more than just icons. They also suffer many of the same challenges. Having a list of patterns or icons is insufficient: the library must be navigable with search, tags, and cross links. Keeping the information up to date requires effort: adding and editing information must be easy and incorporated into the job description.
Despite the challenges, pattern libraries have several key benefits. Consistency of user experience eases learning, as users do not have to learn a new practice. The design pattern can be well-tested in user testing, with minor updates over time optimizing the design. The patterns help the user interface become part of the brand along with the visual design.
Developers can assign templates, sample code, or even actual code to each pattern. A notification system can alert them when a pattern with code in use has been updated, so they can in turn update the live application.
Even if developers do not code the pattern as an object for reference, they will become quite expert at implementing a pattern simply due to repeated use. Either way, development time will be accelerated, and there will be fewer bugs in the code. This will reduce testing time.
UI pattern libraries may be even more important for mobile applications than for desktop applications. Beyond the advantages offered by desktop patterns, hierarchy-dependent mobile patterns also offer: - Insulation from rapidly increasing set of target devices. - Significant reduction in number of design decisions for a given application. Where desktop design is only one or two designs for a given situation, mobile design can contain many more due to number of target devices. - Higher compliance with device user interface paradigms, across applications. - Accelerated creation of support scripts and web information. - Reduced testing with regards to devices. An application built with patterns that were well-tested on devices is extremely likely to work on those same devices without failure or trouble.
Jared Spool's The Elements of a Design Pattern provides a good overview of components of a corporate design pattern.
