MOBILE DESIGN BEST PRACTICES

Transcription

1 MOBILE DESIGN BEST PRACTICES

2 It s easy to assume that making mobile apps is as easy as making desktop apps or websites, but the context of where people use their apps changes everything. People using their mobile device as they wait in a line for a coffee only have moments to take action before they need to interact with humans again. With those precious moments, the design of mobile apps must put a greater focus on brevity and getting data in front of the user in a more efficient fashion compared to their software forbearers. The creative team at L4 Mobile as seen the mobile field evolve significantly over the years. Below are some principles, tips, and guidelines to make sure that your product is designed to meet the needs of the mobile user: Utilize familiar OS native traditions. For example, on an ios list view if something can be deleted, users have come to expect that it should be possible to delete items by swiping the table item. Think of your touch targets in relation to how they translate to their physical form. For a usable experience, a minimum of 9mm is needed for most finger sizes. See our table for how 9mm translates to pixel dimensions. Avoid coachmarks as much as possible. Coachmarks provide a quick tutorial to the user on how to use a new control or application on the device. The best experience is often one that is easy enough not to be explained. Only use coachmarks when all other means of simplifying your application or subtle indications (such as UI animations) fail. Be ruthless about what features your customers need. With focus and brevity as the lifeblood of a mobile application, your users don t need to know the weather when using your grocery store app. If a table view line item in ios can be deleted, present a Delete button to the user if they swipe across the line item. This approach takes advantage of standard ios traditions. Every intended action should deliver some feedback to the user. For example, dragging past the edge of an app s boundries shouldn t feel like hitting a brick wall it should tug beyond the edge and bounce back (this is known as rubberbanding ). Tapping an actionable item should have a pressed state or hightlight. Present a quick notification that an action has been recorded by the server (i.e. Saved to Favorites ). Show progress status for long operations. Use sound and animation to convey feedback. Use progressive disclosure in the design of your app to help with the percived speed of the app, and to reduce confusion and the cognitive workload of digesting what s in your app. For example, Apple s App Store Featured screen displays feeds for banners, New and Noteworthy section, What s Hot section, etc. While the content is loading, they progressively disclose each section, displaying the frame of the icon with the name, and then pulling the images for the icon. For apps with lots of content, the hierarchy of the app will use the top level for ways to browse the content and subsequent levels for details of that content. Coachmarks can be very helpful, but try to identify why you re using them. If it s because your interface is too complex, can you simplify it? Only use coachmarks as a last resort. Between phones and tablets, consider how best to use the space and don t just scale up from the phone to the tablet. When doing so, make sure that both apps still use the same visual language. For apps that are built with the expectation of regular use, gestures are a great way to allow faster access to common features. Make sure that your gestures are discoverable. 2

3 Differences from the web to consider: The concept of hovering doesn t exist for mobile. There is no persistent mouse-point to use for a hover state. On tablets, modal overlays that appear by tapping an object are the closest example The concept of above the fold doesn t have the same level of relevance. Scrolling is an effortless and expected action on mobile devices. With limited screen real-estate, it s important to put an emphasis on a legible and well designed experience rather than trying to force too much on the initial view. Mobile devices have access to more information than browsers traditionally do (i.e. contacts, calendar events, location). Try thinking about the potential benefits of this information Websites often use the homepage concept to greet visitors with a large number of tasks and options from which they can choose, but this type of experience does not translate well to mobile. An app s primary view should be focused on a specific task, rather than presenting a springboard of options, in an effort to concentrate on brevity and due to a lack of screen realestate. Apps made by Apple, Google or Microsoft for their respective platforms don t use the concept of the homepage concept. They instead rely on focused and clear options that express exactly what will be presented on the screen. It s hard to know what I will get when I click on a tab labeled home. Also, each of these devices has a hardware home button, so it s best to avoid conflating terms. ios Visual Style The difference in visual style between ios 7 and the previous releases of ios is stark. ios 6 apps are often tactile, with bevels, textures, and subtle lighting effects. ios 7 has wipped all that away and replaced it with heavy doses depth, animation, and negative space. An ios 7 interface is encouraged to not compete for attention with it s content. Apps that don t adhere to the new visual style will quickly feel out-of-place in the new ios ecosystem. Unlike Android and Windows Phone 8, text links in ios are different from their web counterparts. Turn your text links into clickable objects when you can, unless you re less invested in the user visiting the destination (i.e. Terms & Conditions, EULA, etc.). In a role reversal, Apple is using bare text links in ios 7. Do your best to be clear with your colors by only using a specific tint color to indicate interactivity. Also, while text can aliviate ambiguity when replacing certain icons, there are times in which color and shape is more efficient in helping us identify purpose. We can decipher the intent of a red octagon faster than we can read the word STOP. Be thoughtful when using text links in ios 7. Being able to maintain a low cognative load is given more attention in ios 7 by helping the user keep a sense of place in the user interface. With overlaying elements, use translucency to help users retain spacial context. Animations play a heavy part in ios 7, and are mostly designed around creating a sense of depth and spacial context. ios Standard Element Status Bar for ios 7 ios Standard Element Title Bar for ios 7 ios Standard Element ios 7 Older ios tab bar and toolbar icons solid silhouettes while ios7 icons use a hairline outline of the shape. Drop-down menus aren t native to the device. Apple recommends using a list view selection on a subsequent screen is used for this. Drop-down menus are used exclusively for web views. ios Standard Element Tab Bar for ios 7 If you re designing for the iphone 5, be conscious of the 176 extra pixels that are lost on older iphones. Rather than resizing controls, just space them out. The difference between iphone 5 and older iphones designs should always be about presenting more content, rather than new controls to the content. Apple advocates that apps should avoid designs that give people awareness of files. All sense of a file system should be obfuscated from the user. Files should be auto-saved in an effort to remove the thought of saving out files. Hairline icons and 1px dividers help define ios7 simple visual aestetic 3

4 Screen orientation is primarily in portrait layout on phones (with an exception for games), but ipads must support both portrait and landscape orientations. ipad title bars often have more physical space than their iphone counterparts. When using action-bar items, use that available space at the top to allow room for more content. Always display the status bar in your app, except for scenarios that display full screen content (i.e. photos or games). Tab bar items take you to new views, but do not perform functions. That is reserved for a toolbar. Never disable a tab bar item. For example, if you intended to disable a tab bar item labeled Videos because the user doesn t have any videos available, allow them to tap on Videos instead and display a message explaining that there is no content. For list views with labels, make sure to right-align the labels and left-align the values. Apple recommends this, but Apple doesn t recommend splash screens. Instead, they recommend displaying a launch image that closely resembles the first screen of the app to decreases the perceived launch time of your app. Industry practice tends to ignore this in order to display branding. Apple recommends that app settings reside inside the Settings app to de-emphasize settings and simplify the experience. Industry practice is mixed on this. Even Apple has strayed from their recommendation with their own apps, such as the Apple Store app. Apple recommends links in ios 7 be treated as borderless buttons using key color text. Without having additional visual cues, buttons and calls to action might be over looked by the user. Retaining some additional visual design can clarifiy to the user what is a tappable link and what is not. Android Visual Style The Android OS s visual design has evolved the most out of the major OS platforms. When released in 2008, it shared many similarities with ios (gradients, bevels, shadows, etc.). Beginning with the Honeycomb release in 2011 and being fully realized with the Ice Cream Sandwich release, Android has taken a new flatter approach that has lead it to the development of the Holo theme, which rid itself of all the ornaments that compaired it to its ios counterpart for a very flat look. The Android unit of screen measurement is in density-independent pixels (dp). 1dp is equal to one pixel on a 160 dots-per inch device. When laying out your app, it s best to arrange it in a 48dp grid target for buttons and rows, with 8dp gaps. 48dp roughly translates to a physical size of 9mm. Typography on Android apps uses 4 standard sizes: 12dp, 14dp, 18dp, 22dp The action bar is placed on the top of the app, compared to its ios s tab bar counterpart. Action bars are recommended for all screens. When the user is at the top level of the app s hierarchy, show the app s icon or title. If the top level uses different views to display content, use the view control to toggle between them. Android Standard Element Status Bar with Notification Icons Android Standard Element Action Bar with an Up button, view control, action button, and an overflow menu There is a difference in how Android looks at the up button, which is a left facing caret at the top left of an action bar, and the back button, which is physical device button below the screen. The up button takes you to the previous level of the app s hierarchy, where the back button takes you to the previously viewed screen. 4

5 There are thousands of different Android devices with different screen sizes and densities, so it s best to think of Android app layouts like a liquidlayout website in how a browser window can stretch and the content will accommodate. Think about how you might be able to take advantage of Lights-Out mode, in which the navigation is removed if there is no interaction after a short period of time. Android Standard Element Navigation Bar: These options are present on any Android 4.0 device that doesn t have hardware button equivalents. Hardware buttons have been depreciated for Android devices. Don t use right-pointing carets on line items to stay consistent with the native OS traditions. For selecting multiple objects, use a long press. This should reveal a contextual action bar that replaces the standard action bar. Use contextual action bars to allow users to control groups of data or selected text. Action bar icons adhere to the following: XHDPI: 64px with 10px padding HDPI: 48px with 6px padding MDPI: 32px with 4px padding. Icons should use the hex-color #333 at 60 percent opacity when using the Holo Light theme, and a hex-color of #fff at 80 percent opacity when using the Holo Dark theme. Action bar items can t use more than 50 percent of the bar s width. Split action bars at the bottom of the app can use the entire width. Windows Phone 8 Visual Style The Windows Phone 8 (WP8) design is one of the most radical products to come out of Redmond. WP8 eschews iconography for typography and glyphs. To balance out the lack of visual ornament, there is a heavy emphasis on animation throughout the OS. In style, it shares more in common with the Holo theme of the Android OS than with ios. It is thoroughly infographical, and decidedly non-iconographical in that its iconography exclusively uses onecolor glyphs. The initial view in a WP8 app is a Panorama view, which is a group of full screen panels that are placed side by side and are accessed by swiping left and right (Panorama does not support landscape view). First panel in the Panorama view is usually reserved for primary navigation if the app is deep enough to warrant it. Subsequent panels are for priority information. The initial view does not have to start on the first panel if the content of a subsequent panel is important enough to the user. The Pivot control is WP8 s method for displaying tabbed content. The different views are in panels that are placed side by side to each other and can be accessed by tapping on the text navigation, or swiping the screen to the right or left. WP8 Standard Element Status Bar WP8 Standard Element Application Bar: For common actions and other menus Your app s layout should adhere to a grid 9px boxes with 5px gutters. Use Segoe as your typeface unless the apps identity depends on not using it. Remove as much chrome as possible and focus exclusively on the content. Embrace negative space to allow focus on the most important features of the app. Avoid skewmorphism, unless it is a limited use utility app (i.e. a stopwatch app) Avoid creating text input heavy landscape experiences Apps cannot specify only left or only right actions in the app bar in landscape views if they support orientation changes. WP8 Standard Element Panorama control: Use this to slide left and right into different views. 5

6 Microsoft doesn t recommend the use of a Home button. Use the hardware back button and avoid software back and close buttons to reinforce this action. Excluding glyphs, on-screen objects are very rectangular. Avoid using rounded corners for on-screen objects. When animating transitions, avoid the use of textures, lighting, or extrusions. Animations are rendered in 2.5 dimensions instead of full 3D. WP8 Standard Element Pivot control: For tabbed content or alternate views into data. App Icons A great app icon can play a huge part in the success of your app. It is often the users first impression of your app. Here s what you should think about to distill the essence of your app into a single icon: What is your app s simplest message to convey? Choose a unique shape that translates well to small sizes. Don t overdo it with colors. There is a limited amount of space for an icon, so 2-3 dominant colors are best. Anything more than that turns into a jumble in small sizes. Avoid using photos. They don t translate well to various sizes. If you can take the idea that is conveyed in a photo and simplify it into a glyph or a graphic, you ll be in a much better position. Try to convey a single idea. Be careful with text as it is often tough to read in small sizes and doesn t lend itself well to countries outside of it s native language. If it s a logotype, try getting it down to a lettermark. Don t just shrink down your largest icon into smaller sizes. Make sure to pay attention to the details and re-render details to look the best in the various icon sizes. ios App Icons ios Version App Store Retina App Store iphone Retina App Icon ipad Retina App Icon ipad App Icon Spotlight Retina* Spotlight* Settings Retina Settings ios x x x x x x x x 29 ios x x x x x 100 x ** 50 x x x 29 * Note that the final visual size of a Spotlight search results icon on ipad is 48 x 48 pixels (96 x 96 pixels in high resolution). ios trims 1 pixel (or 2 pixels, for high resolution) from each side of your artwork and adds a drop shadow. Be sure to take this into account as you design your icon for Spotlight search results. ** Note that ios 6 Spotlight retina iphone is 58 x 58 while retina ipad is 100 x 100 ios 7 app icons are all about subtlety. In keeping with the flat aesthetic of ios 7, app icons now feature simple flat graphics. Colors have also been simplified to either a single solid color or a simple gradient. If there is a drop shadow or bevel, it s subtle. If there is a gradient, it is low-contrast. Visual effects should be used sparingly. ios 7 Style App Icon ios 6 Style App Icon Even though icons in ios use rounded corners, your icon should render to the edges of the square as a way to guarantee against poor cropping. There are slight differences in the rounded corners displayed in the App Store and the way your app will display on device, so rendering beyond the rounded corners is the safest way to avoid black pixels in the corners of your icon. Apple doesn t allow anything that appears to represent Apple hardware or ios interface elements. Make sure that your icon bleeds to the edge. If your icon background has a sense of dimension, your highlights and shadows should extend past the mask that ios applies. ios6 compared to ios7 has much more visual fidelity and sense of depth. Gradients, textures and drop shadows are used in an abundance. By default, ios 6 and lower will apply a sheen to the icons. This is optional and can be turned off in Xcode. 6

7 Android App Icons XXHDPI (480 dpi) XHDPI (320 dpi) HDPI (240 dpi) MDPI (160 dpi) LDPI (120 dpi) 144 x 144 pixels 96 x 96 pixels 72 x 72 pixels 48 x 48 pixels 36 x 36 pixels Icons should be three-dimensional and viewed from the front with a slight perspective as if viewed from above so that users perceive some depth. Transparent edges should be applied to the icon Transparent edges should be applied to the icon. Android icons are front facing, with just a slight tilt that gives a sense of depth to otherwise flat objects. WP8 App Tiles Wide Layout Medium Layout Small Layout 691 x 336 pixels 336 x 336 pixels 159 x 159 pixels *These dimensions are for the WXGA resolution. The OS scales down to other screen resolutions based on the WXGA resources. Avoid 3D typography; icons or backgrounds with gradients, bevels, or casting shadows, rounded corners; black or white color backgrounds (the tile s background will disappear on a Windows Phone device s dark or light theme); using non-descriptive, ambiguous glyphs; transparent backgrounds with colorful images. If you use a transparent backdrop to adhere to the device s themed colors, make your foreground glyph white. Live tiles are not intended for urgent situations (i.e. a phone call). Notifications will be used in that scenario. WP8 tiles are flat, 2-color, and skews towards metaphorical rather than literal. Don t display relative time stamps, as they aren t regularly updated. Use absolute times to avoid becoming out of date. Device Aspect Ratios iphone 3GS iphone 4 & 4S iphone 5 ipad 1,2, & mini ipad 3 & 4 Kindle Fire Kindle Fire HD 8.9 Kindle Fire HD 7 Android Phones Android Tablets WP8 WVGA Devices WP8 WXGA Devices WP8 720p Devices 480 x x x x x x 800 NA* NA* 480 x x x 1280 *Android has no standard aspect ratios and new devices create unique aspect ratios with regularity. Fluid layouts are needed to accomodate for various resolutions and should be thought of as similar to web layouts. Fonts ios 6.0 Fonts Helvetica PRIMARY Academy Engraved LET American Typewriter Apple Color Emoji Apple SD Gothic Neo AppleGothic Regular Arial Arial Rounded MT Bold Avenir Avenir Next Avenir Avenir Bangla Sangam MN Baskerville Bodoni 72 Bodoni Ornaments Bradley Hand Chalkboard SE Chalkduster Cochin Copperplate Courier Devanagari Sangam MN Didot Euphemia UCAS Futura Geeza Pro Georgia Gill Sans Gujarati Sangam MN Gurmukhi MN Heiti SC Heiti TC Helvetica Neue Hiragino Kaku Gothic ProN Hiragino Mincho ProN Hoefler Text Kailasa Kannada Sangam MN Malayalam Sangam MN Marion Marker Felt Noteworthy Optima Oriya Sangam MN Palatino Papyrus Party LET Plain Sinhala Sangam MN Snell Roundhand Symbol Tamil Sangam MN Telugu Sangam MN Thonburi Times New Roman Trebuchet MS Verdana Zapf Dingbats Zapfino Android 4.0 Fonts Roboto PRIMARY Droid Serif Droid Sans Windows 8 Fonts Segoe WP PRIMARY Arial Calibri Comic Sans MS Courier New Georgia Lucida Sans Unicode Tahoma Times New Roman Trebuchet MS Verdana 7