N SPRO Mobility Consultant
Total Page:16
File Type:pdf, Size:1020Kb
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 • find 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.