Web Design Patterns for Mobile Devices JORGE RIBEIRO, Faculdade de Engenharia, Universidade do Porto MIGUEL CARVALHAIS, ID+ / Faculdade de Belas Artes, Universidade do Porto Mobile devices have brought new constraints and possibilities to the field of web design. You can no longer design a website without thinking how it will work on a mobile device: the whole mobile experience needs to be designed from the beginning. Because designing for these devices is considerably different from designing for wider screens, you cannot only rely on your old techniques: you will need new ones. In this paper we propose a set of twenty-one patterns for designing web interfaces on mobile devices. 1. INTRODUCTION The patterns proposed on this paper began from the interest to further explore the design of interfaces, particularly web interfaces, on mobile devices. We currently have at our disposal a new, universe of portable devices that follow us wherever we go, are always on, and have continuous and easy access to the web. We also have gestural interfaces that provide for more natural and appealing interactions. Because these devices are relatively new, there are not strong standards or guidelines to help us to design for them. Moreover, because of their novelty, users do not have so rigid expectations of how an interface should be, as they may have for desktop environments. We think that this places us in a favorable position to explore new types of interactions, and to reinforce the importance and need to research new ways to improve the design of dedicated interfaces for mobile devices. While in this work we talk about designing for mobile in general, we decided that it would be more worthwhile to focus our efforts on the design of interfaces for higher-end devices with touch interfaces, i.e., devices that are colloquially named as smartphones. Nonetheless, part of the results of this work can still be useful for the design of website for less capable devices, such as features phones. With this in mind we decided to approach this problem through a pattern based methodology. The patterns described in this work aspire to help us to design better and more satisfying experiences on the mobile web. 2. DESIGNING FOR MOBILE DEVICES In the last few years, the growth of mobile devices with more capable browsers, and permanent access to the web reinforced the need to design websites optimized for that class of devices, but like any new medium they impose new constraints and capabilities that should be considered. A noticeable difference between desktop and mobile environments, and probably the most significant constraint that one faces when designing or adapting a website for a mobile view, is the screen size: mobile devices are considerably smaller than their desktop counterparts. On the desktop, 98%⁠1 of users browse the web on displays with resolutions higher than 1024x768 pixels, while on mobile, screen resolutions are much lower. According to StatCounter, on the first trimester of 2012 the most common screen resolution on mobile devices was 320x480 pixels with 20,62%⁠,2 but these values vary significantly with the type of device. If we take as reference the 1024x768 pixel resolution and compare it to the most common resolution of mobile devices, we lose around 80% of the screen real estate. Therefore, with less available space, websites need to be rethought to address the space limitations. A related problem is the variability in screen size, resolutions and proportions that are available in the current mobile device landscape. The 320x480 pixels resolution is still the most common but we are faced with a myriad of devices with a diverse range of screen sizes and resolutions that support the need to design interfaces that require designing interfaces with unbound dimensions. We cannot foresee which devices will access our websites, so a design strategy base on a responsive design, in which we design a fluid layout that 1 Based on the data collected from W3schools (http://w3schools.com) from January 2012. It only reports to accesses to their website, so it might not be representative of other websites. 2 According to the data from StatCounter (http://gs.statcounter.com/#mobile_resolution-ww-monthly-201201-201204-bar), accessed on 1 June 2012 adapts gracefully to whatever screen size, is a better approach than design for each individual resolution with fixed widths. Another significant difference between desktop and mobile interfaces is the way in which we interact with them. Traditional desktop environments rely primarily on mouse-driven interactions, in which an artificial pointing device acts as an intermediary between our movements and what happens on screen, whilst smartphones have touch interfaces, in which there is a more direct manipulation of the elements on the screen. There are also human constraints that drive the design of mobile interfaces. The human finger is a much more imprecise pointer than a mouse, so it is not possible to accurately hit targets much smaller than the size of the fingertip. This is even more problematic for people with less dexterity, particularly older people, and for the "rushed and distracted user" (Clark 2010, 13). Therefore, targets on touch interfaces need to be properly sized and positioned (Wroblewski 2011, 67). Moreover, the lack of haptic feedback on current touch screens does not help with this problem. Touch interfaces also have their advantages, besides the more natural and pleasing interactions, it is possible to explore the use gestures, — e.g., the pinch to zoom —, as a way to improve the user experience. The mouse-over technique is a common pattern on the web that is used for revealing additional information, e.g., tooltips, but it does not work on touch devices because there is no cursor to hover on page elements. Therefore, interactions that rely merely on mouse-over need to be rethought (Wroblewski 2011, 78), so no critical information is left behind hover-based interactions. Since we are talking about designing for the web, an important factor is the browser itself. It is necessary to understand which browsers are available, what are their capabilities, and how they compare to desktop browsers. On mobile, more than 70%3⁠ of current mobile traffic comes from Webkit browsers (essentially Safari Mobile and the Android browser), and because Webkit represents a larger percentage of mobile browsers we can expect similar web rendering on simple pages (Firtman 2010, 44), which is good in terms of web development; however, there are differences between Webkit implementations, so testing only on one device and browser does not guarantee that a page works perfectly on every Webkit instance. Mobile browsers are in general more limited in terms of their features than their desktop counterparts, but more advance than older desktop browsers4. Furthermore, mobile devices are also more limited in terms of performance, which is easier to note with complex animations on slower devices. Likewise, the network performance should not be disregarded. Mobile devices can be used in outdoor environments, where the only Internet access available is through mobile networks that are slower, and generally have expensive data plans. That is reflected on the need to reduce and optimize the assets that are served to mobile devices. The aforementioned topics may impose considerable limitations on the design of websites for the mobile landscape, but are those limitations that make the mobile web a much more changeling and interesting subject within the field of web design. There is a more open and receptive space to novelty interfaces, which leads us to the opportunity to find and propose new patterns. 3. PATTERN MODEL To help us finding a template for the patterns in this work, and to better understand the writing of patterns, we started our work by developing a comparative analysis among sixteen libraries5. This previous work allowed us to better justify the template that is proposed for the organization of the patterns in this work. We end up with a format that resembles the one used in Alexander’s patterns (1977), with a few differences. In short, each 3 According to the data from StatCounter from the first trimester of 2012, when we take as reference Europe or the USA and combine the results from the major Webkit browsers. 4 We are referring to browsers that were released years ago but are sill used today, e.g. Internet Explorer 6. 5 A Pattern Language (Alexander, Ishikawa and Silverstein 1977), Design Patterns: Elements of Reusable Object-Oriented Software (Gamma et al. 1995), Common Ground (Tidwell 1999), A Pattern Approach to Interaction Design (Borchers 2001), The Design of Sites: Patterns for Creating Winning Websites (van Duyne, Landay and Hong 2006), Designing Interfaces (Tidwell 2011), Yahoo! Design Pattern Library (Yahoo! 2006), Patterns for Computer-Mediated Interaction, Info Design Patterns (Schümmer and Lukosch 2007), Patternry (Factory 2009), Designing Web Interfaces (Scott and Neil 2009), Designing Social Interfaces (Crumlish and Malone 2009), UI Patterns (Toxboe), Banco de Padrões de Design (IST 2010), Designing Mobile Interfaces (Hoober and Berkman 2011), Mobile Design Pattern Gallery (Neil 2012) Web Design Patterns for Mobile Devices: Page - 2 pattern includes in the following order: name, illustration, problem, solution, rationale, examples, related patterns (complementary patterns in this library and similar pattern in other libraries). Patterns are organized with an implicit hierarchy that can be inferred by the order in which they appear on this paper. They are sorted in terms of scale, from the ones that address the macro structure of a design, to ones related to interaction details. We formatted patterns with a highlighted block, composed by the name, problem, solution and illustration that work as a summary of the pattern. We devise the pattern model in a way that the reading of this first block should provide an overview of the pattern.