Corporate design guidelines aim at ensuring a coherent and consistent corporate identity. User interface guidelines (or UI guidelines) work in a similar fashion. They provide a set of rules for designing a software’s user interface. This applies to visual design as well as to interaction design. Ideally, adhering to these rules guarantees a basic quality of applications that run on the same operating system and avoids an “application zoo”-scenario.
Looking at different platforms for mobile devices (e.g. iOS for iPhone and iPad, Android or Windows Phone 7) with regard to their different input options, it soon becomes clear that certain overarching conditions for visual- and interaction design have to be met in order to assure intuitive usage for a platform. Applications that are installed on the respective device can make use of numerous sensors and other hardware capabilities (e.g. GPS, accelerometers or wireless connections) and this way offer users an almost unlimited variety of functions and interaction possibilities. Therefore, fundamental user interface guidelines need to be established to keep the platform’s interaction and visual philosophy from being diluted.
For the user, the choice of a platform is also related to lifestyle aspects, which should not be underestimated. The major part responsible for the lifestyle aspect is not the hardware itself, but the user interface (UI) providing access to the hardware’s possibilities. Visual and interactional style can be a decisive factor for the success of an entire platform, since they lead to increased “Joy-of-Use” – or don’t. If a variety of applications from different vendors are running on the same operating system, a coherent style can only be guaranteed if all parties concerned are adhering to certain UI guidelines.
On the Desktop, UI guidelines are a pretty mature and well-accepted tool. But are they a blessing or a curse in the mobile context and what are the main characteristics of mobile UI guidelines? What special aspects need to be considered?
Examples of user interface guidelines in the mobile context
Examples for UI guidelines in the mobile context can be found here:
- iPhone: http://developer.apple.com/…
- Android: http://developer.android.com/…
- Blackberry: https://msdn.microsoft.com/
- Symbian: http://developer.symbian.org/…
- Windows Phone 7: https://msdn.microsoft.com/
Content and depth of these UI guidelines vary widely: while Android keeps them short and technical, for Microsoft, transporting the philosophy of the product is of major importance. The guidelines are very explicit in this respect, up to the jargon recommended for status- or error messages: the Windows Phone 7 is “friendly, lighthearted, and empathic”. Apple also places great value on making designers and developers understand the overall concept of iOS, before letting them start creating applications.
The different UI guidelines partly address different target groups: while Android obviously is targeted at application developers in language and content, Apple and Microsoft preferably speak to interaction- or user experience designers.
Benefits of user interface guidelines
In principle, the goal of UI guidelines is a good one: through a consistent Look & Feel users are able to learn from their experience with the device and transfer interaction principles to other applications (e.g. learned touch gestures can be used in different apps leading to similar results). The unification of animations (i.e. motion design) is of particular importance, too. Animations – on the small display of a mobile phone – are not only a “lifestyle element”, but also provide very concrete benefits: among other things, they support users’ orientation in hierarchical menus (for further information see also our blog article “Animations in User Interface Design: Essential Nutrient Instead of Eye Candy”). Finally, a product’s perceived value increases if it offers a uniform and conclusive overall concept and if everything follows a common theme.
Contrary to the idea of UI guidelines is a software vendor’s desire for uniqueness. Companies oftentimes do not want a look that is uniform with the competition, but instead want to create unique products that stand out in the market.
User interface guidelines and creativity – a contradiction?
Of course, it can be nice and exciting for a user to explore an application that has been designed with strong creative momentum. Nevertheless, one should be careful when introducing new elements or ways of interaction. Consider gestures, for example. Users are going to be frustrated very quickly, if their (implicitly) learned finger movements suddenly don’t work the way they used to or produce unexpected results (regarding implicit learning see also „Muscle Memory“). For instance, it would be confusing for the user, if the pinch gesture were not attached to the action of zooming anymore (see also our blog article „The Comeback of the Pie Menu“).
So, how can one setup UI guidelines without limiting creative freedom?
It is important to always offer users familiar elements (“landmarks”), so that they can navigate in a new environment while the chance of ambiguous interpretation is minimized. Microsoft emphasizes the understandability of UI elements and concepts across different cultures and languages with the Windows Phone 7: with its UI design concept, called “Metro”, simple-shaped and pictographic elements are preferred. This idea is inspired by the pictographic signs that can be found in metropolitan areas, informing people around the world how they can make their way through the “unknown” (e.g. at airports, train stations or public buildings). Wrapping this idea into a design concept, defines a principal direction for UI designers without constraining them too much.
|Dieses Werk bzw. Inhalt ist lizensiert unter der Creative Commons Namensnennung-Weitergabe unter gleichen Bedingungen 2.0 US-amerikanisch (nicht portiert) License.|
So, UI guidelines – if established properly – come with certain constraints and restrictions, but do not prevent creativity in general. They rather describe the frame, in which creativity can and should unfold.
As a side note, it may be worth mentioning that on Windows Phone 7 the games section is explicitly excluded from “any” restrictions and is seen as an independent section, in which experimental ways of interaction are not only allowed, but even welcome.
Following user interface guidelines
UI guidelines have to be read, understood and implemented. Naturally, a concise and illustrative document is more likely followed than a confusing and poorly formatted collection of rules and laws. But whether or not UI guidelines are accepted also depends on whether the software project is a “one-man-show” or if responsibility is distributed over a larger team, so that everybody is able to focus on a single subject. In the latter case, the collaboration of interaction designers and application developers has proven successful, since the interaction designer is especially sensitive to this topic. However, also product management and quality assurance should be familiar with fundamental UI guidelines to be able to soundly specify and evaluate a product.
Alternative ways to ensure a consistent style
A beneficial basis for a quick and, to a certain degree, “automatic” acceptance of fundamental interaction concepts can be provided through a Software Development Kit (SDK) for UI development: since the developer needs to use it anyway in order to code for the respective platform, it can be helpful to integrate basic rules into this software library. By doing so, conformity with certain central rules can be guaranteed, even when developers lack detailed knowledge of UI principles. The development team will think twice before putting lots of effort into a new idea simply to be creative if it has the option to efficiently make use of existing tools. For instance, ready-made animations or UI element styles that are compliant with the UI guidelines at hand can be made available as reusable software artifacts, which motivates developers to use them.
Expression Blend 4 for Windows Phone, as a more concrete example, offers two UI controls, called “Panorama” and “Pivot”. For page-oriented applications, they form the basis for navigation through complex lists. Their detailed interaction behavior and animated transitions are already integrated according to the Microsoft UI guidelines and can be used right away. The components are not visually closed, but offer space for visual adjustments and modifications to a certain extent.
If developers or user experience designers have – for a special use case – a certain visualization in mind, they have to be able to put it into practice to ensure that extraordinary interaction concepts can be implemented, e.g. in games. Every deviation from the rules should be validated through independent usability testing, though. Otherwise it cannot be assessed, if users will understand and accept it.
The integration of rules and standards into an SDK cannot completely replace UI guidelines, but it is a helpful supplement on the way to a consistent app. Most often, the communication of guidelines is easier and more pleasant through “living” examples rather than in the form of a “dead” document.
UI guidelines are a solid basis for the development of mobile applications with a consistent Look & Feel, e.g., by providing user experience designers with an orientation for their conceptual and visual work.
The same could be said for desktop applications, but in the case of mobile devices, UI guidelines are even more important due to the fact that these devices usually offer more interaction possibilities such as touch navigation. Also, contrast ratios require special attention in order to ensure readability of a user interface even under poor lighting conditions.
The implementation of consistent user interface concepts is made even easier by making certain rules available in the form of ready-made UI controls and templates. Those can be used productively right away by development teams. By combining both, documented UI guidelines and ready-made software components, the UI guidelines documents can be kept simple and concise.
Regardless of how rules are applied, it is always important to question whether they make sense in the particular case at hand or if an individual solution is preferable. If “creative freedom” is exploited, it is of particular importance to evaluate resulting user interfaces with users in order to ensure comprehensibility..
Finally, reading, understanding, and implementing UI guidelines do not only concern developers and interaction designers, but also product management and quality assurance. Obviously, as many people with different perspectives are involved and required, the enterprise-wide introduction of user interface guidelines can be difficult, but is a challenge worth taking.