N SPRO Mobility Consultant

An Elite Team. Optimal Solutions.

OPINION PAPER

November 2012

User Interface Design for Mobile

by Minoo Erfani Joorabchi, /N SPRO Mobility Consultant

INTRODUCTION

Designing for mobile applications is very different from designing for desktop applications. In the mobile world, it is all about creating an effective user experience; therefore the product design is an essential part of the project. This article is an overview of what should be considered while designing the user interface and user experience of mobile applications and is an introduction to the user- centered design methodology and interaction design principles.

/N SPRO Opinion Paper: User Interface Design for Mobile MOBILE IS DIFFERENT The differences in mobility are very diverse: small screen vs. big screen, intermittent vs. reliable connectivity, low vs. high bandwidth, battery powered vs. plugged in, and so on. These differences actually make mobiles and smartphones more powerful than desktops in multiple ways. Mobiles are highly personal; they are always turned on, always with you, usually connected and directly accessible. They have powerful sensors to detect location, movement, acceleration, orientation, proximity, environmental conditions and more. Mobile users have time constraints and often in the middle of doing something else.

When designing for a multiscreen application, having a consistent experience where the experience is similar across all screens is essential (See Figure 1).

Figure 1 Different screen sizes

iPad » »

Having the same experience across a multiscreen application is important.

Mobile interactions are very present in users’ everyday lives. In order to design a successful mobile interactions, understanding the overlapping spheres of context in which they take place is a must. Figure 2 is a context model for mobile interaction design1.

According to Figure 2, consider the user’s culture (e.g. religion, etiquette, economics, social structures, etc.), user’s environment (e.g. sound, light, privacy, etc.) and the activity that the user is doing while using the application (e.g. walking, driving, sitting, etc.). Keep in mind other contexts including the device (e.g. hardware, O/S, battery level, software, etc.), connection (e.g. speed, reliability, set up, etc.), carrier (e.g. services, pricing model, etc.), user’s goals (e.g. communication, social interaction, entertainment, information, etc.), user’s attention (e.g. continuous full, continuous partial, intermittent full, intermittent partial) and tasks (e.g. make a call, compose a message, meet customers, send photo, view video, etc.)1.

1 http://www.giantant.com/publications/mobile_context_model.pdf

/ 2 /N SPRO Opinion Paper: User Interface Design for Mobile Figure 2 Context of Mobile Interaction1

eligion, etiquette, law, s ics, r ocial nom struc eco ture s.. R E . U t, space, privacy, distra LT , ligh ction U und s, o C so th er p N T eo E iving, eating, jugg ple M g, dr ling .. N alkin groc . O w erie I R T Y s, V I wa I V iti N T ng E C f A o r t he b u s , in l in e . g o a l s .. • identity • status • logistics i n t e r f a c e • communication • information • entertainment • social interaction d e v i c e • hardware a t t e n t i o n • OS • continuous / full • condition • continuous / partial • familiarity • intermittent / full • battery level • intermittent / partial • software

• capabilities t a s k s • make call c o n n e c t i o n • speed • compose message • reliability • meet friends • set up • announce location • send photo • view video c a r r i e r • ﬁnd local information • practices • etc... • services • pricing model

To design successful mobile interactions, understanding the overlapping spheres of context in which they take place is a must.

1 Figure designed by: Nadav Savio | Giant Ant Design | www.giantant.com http://www.giantant.com/publications/mobile_context_model.pdf

/ 3 /N SPRO Opinion Paper: User Interface Design for Mobile EXAMPLES Let’s take a look at a few UI design samples for different users and screen size.

The screen on the left represents a UI for data capture by inspectors, blue collars and different field workers. Therefore it contains big buttons and few fields with drop down list to minimize the typing and speed up the process of data gathering.

The screen on the right represents a UI for data presentation to managers and white collar workers. Therefore it contains detailed information and more precise functions.

Figure 3 Comparison of UI designs according to type of user

iPad UI design for quick data capture by inspectors iPad UI design for an executive analytical with big buttons and drop down lists to minimize application with more choices, precise functions typing. and detailed information.

/ 4 /N SPRO Opinion Paper: User Interface Design for Mobile Figure 4 represents an application in two different screen sizes; iPad and iPhone. To display the same information, you can see that the iPad screen is divided into three screens on iPhone due to it’s smaller size.

Figure 4 Comparison of UI designs according to screen size

iPad

iPhone » »

/ 5 /N SPRO Opinion Paper: User Interface Design for Mobile USER-CENTERED DESIGN A user-centered design methodology (considering interaction design best practices and principles for mobile user interface design) begins with specifying the audience, platform and device. Short descriptions of its steps2 are listed below (See Figure 5):

STAGE 1 » Decide on the product goals based on the user needs User Requirements » Who are you designing for? Analysis What do you want them to do?

» Iteratively sketch the product design STAGE 2 » Create mockups of the product (by considering the interaction design principles and getting inspired by Design, Prototype mobile UI patterns) and Evaluation » Evaluate its usability through the focus group or customers

STAGE 3 » Create the user interface Design and » Apply the style, look and feel Implementation

STAGE 4 » Repeatedly run usability evaluation to improve the product until the business goals are met Usability Evaluation

STAGE 5 » Document the application Launch and » Collect feedback through the focus group/customer Maintenance for the future releases

Figure 5 User Centered Design2

1 User

Requirements » Analysis »

Design, 5 Launch and 2 Prototype and

Maintenance

Evaluation » »

4 Usability 3 Design and Evaluation » Implementation

2 http://www.slideshare.net/OpenRoad/mobile-ui-design-user-centered-design-and-ui-best-practices

/ 6 /N SPRO Opinion Paper: User Interface Design for Mobile INTERACTION DESIGN PRINCIPLES Ten interaction design principles to keep in mind are2:

Interface should be easy to use (from the first time) Learnability and the number of functionalities should be limited to exactly what the user needs to get to his/her goal.

Number of steps it takes for a user to complete a task Efficiency should be as efficient as possible. Minimize the user input.

Interface should be easier to use each time the user Memorability interacts with it.

Users should not be able to make mistakes. Error Recovery Provide useful error messages

Usual tasks should be easy and less common tasks should Simplicity be possible. Keep graphics simple, and use them only when they enhance usability.

What the user expects to happen is exactly what Mapping should happen.

Important information should be the most visible Visibility and less important information should be less visible.

Feedback User should be in control of the interface.

Like-items should be displayed and act the same way in Consistency the entire application (and even between applications).

Satisfaction If user enjoys or dislikes using the application.

UI DESIGN FOR iOS: FUNDAMENTAL PRINCIPLES Icon design, text style and UI element guidelines are important when designing for iOS. We apply the corporation color scheme and style guide to all the icons, images and UI elements. To get the best result you can benefit from a professional graphic designer to help you design an overall visual style for each icon or image. In designing the icons, try to use universal imagery that users will easily recognize, keep the icons simple, and avoid using similar iOS icons.

Here are some UI design principles for iOS applications3, the rest (which are not mentioned here) are mainly covered by the 10 interaction design principles:

» Metaphors: You can take advantage of people’s knowledge of the world by using metaphors to convey concepts and features of an app. Use metaphors that represent concrete, familiar ideas, and make the metaphors obvious, so that users can apply a set of expectations to the computer environment.

2 http://www.slideshare.net/OpenRoad/mobile-ui-design-user-centered-design-and-ui-best-practices 3 http://developer.apple.com/library/mac/#documentation/UserExperience/Conceptual/ AppleHIGuidelines/Intro/Intro.html

/ 7 /N SPRO Opinion Paper: User Interface Design for Mobile » Mental model: The user already has a mental model that describes the task an application is enabling. This model arises from a combination of real-world experiences and experience with other applications. Before designing an app’s user interface, try to discover the users’ mental model of the task the app helps them perform and be aware of the model’s inherent metaphors, which represent conceptual components of the task.

» Explicit and Implied Actions: There are two types of actions when designing for the user interface. Explicit actions that clearly display the result of manipulating an object and don’t need to be memorized by the users. For example, the menu commands listed can be performed on the currently selected object. Implied actions convey the result of an action through visual cues or context. For implied actions to be apparent, the user must be able to recognize the objects involved, the manipulation to be performed, and the consequences of the action. A drag- and-drop operation is a common example of an implied action.

» Direct manipulation: Direct manipulation allows users to feel that they are controlling the objects represented by the computer (e.g. a drag-and-drop operation). According to this principle, an onscreen object should remain visible while a user performs an action on it, and the impact of the action should be immediately visible. It supports the user’s mental model of the task and is much more natural.

» What You See Is What You Get: When the user makes changes to a document, the results are immediately displayed. The user shouldn’t have to wait for the final output or make mental calculations about how the document will look later. The preview function can be used if needed. Users should be able to find all the available features in the app. Don’t hide features.

Figure 6 Example of icons using metaphors to convey concepts and the users’ mental model of the task This icon represents a dashboard and is used to see the charts and diagrams.

This icon represents the settings and is used to change the settings of the application.

This icon represents the sites and is used to see the list of sites and their details.

This icon represents the materials and is used to see the list of materials and their details.

This icon represents creating an incident report. The plus sign represents the creation and the stop hand represents the incident.

/ 8 /N SPRO Opinion Paper: User Interface Design for Mobile CONCLUSION In this article, the design guidelines for mobile applications, the user-centered design methodology and interaction design principles were introduced as a basic knowledge of mobile design. The user-centered design is an iterative process of user requirements analysis, design prototype and evaluation, design and implementation, usability evaluation and launch and maintenance.

While designing you must consider the following: learnability, memorability, simplicity, efficiency, consistency, screen size, shallow and narrow navigation, useful feedback and error messages, minimizing user input and scrolling, prioritizing information and functionalities.

Icon design, text style and UI element guidelines are important to consider while designing. In designing the icons, use universal imagery, existing standards and keep the icons simple. Use metaphors to convey concepts and discover the users’ mental model of the task.

/ 9 /N SPRO Opinion Paper: User Interface Design for Mobile [email protected] MONTREAL SEDALIA / ATLANTA / / HALIFAX MINNEAPOLIS