Mobile Application Design Eiyana Favers Jessamyn McBrian Esther Sheppard IDIA 612 June 21, 2011
Platform Differences Mobile vs. Desktop Some of the limitations of mobile devices will change as technology gradually improves. But devices will always have strengths and weaknesses. Sometimes it makes sense to displace some parts of a task, like entering data, onto a different platform. MobileDesktop/Laptop Photograph AnythingPhotograph the user (via webcam) Input small amounts of textInput large amounts of text Slow to moderate data speedsModerate to fast data speeds Display small amounts of informationDisplay large amounts of information Store moderate amounts of dataStore very large amounts of data Used anywhereUsed when seated Aware of precise location and orientation Some awareness of location Connected to other devices via wireless networks Connected directly to other devices via cables and wireless networks Colborne, Giles (2010). Simple and Usable Web, Mobile, and Interaction Design, ePub (Kindle Locations ). New Riders Press. Kindle Edition.
Aim for Simplicity Extreme Usability When you look at stories of simple experiences, it’s clear what sets simple experiences apart: they work under extreme conditions. To be simple, you have to aim for something tougher than the regular goals for usability. Usability aims for …Simplicity aims for … A specific group of people can use itAnyone can use it Easy to useEffortless to use Responds quicklyResponds instantly Understood quicklyUnderstood at a glance Works reliablyWorks always Straightforward error messagesError-free Complete informationJust enough information Works in a user testWorks in a chaotic environment Colborne, Giles (2010). Simple and Usable Web, Mobile, and Interaction Design, ePub (Kindle Locations ). New Riders Press. Kindle Edition.
Mobile Application DesignHeuristics Principles PrincipleDefinition Aesthetic Integrity …not a measure of how beautiful an application is. It’s a measure of how well the appearance of the app integrates with its function. Consistency Can people predict what will happen when they perform the same action in different places? Do custom UI elements look and behave the same throughout the app? Be consistent but not at the expense of usability. Use UI elements consistently. Direct Manipulation When people directly manipulate onscreen objects instead of using separate controls to manipulate them, they’re more engaged with the task and they more readily understand the results of their actions. Make targets fingertip-size. Feedback Feedback acknowledges people’s actions and assures them that processing is occurring. People expect immediate feedback when they operate a control, and they appreciate status updates during lengthy operations. The user interface must keep users informed of actions or interpretations, changes of state or condition using clear, concise, and unambiguous language familiar to users. Give useful, informative feedback. Metaphors In general, metaphors work best when they’re not stretched too far. For example, the usability of software folders would decrease if they had to be organized into a virtual filing cabinet. The user must be able to construct the proper model of the system. The system must display the correct clues to construct a proper model. User Control Users feel more in control of an app when behaviors and controls are familiar and predictable. And, when actions are simple and straightforward, users can easily understand and remember them.
Principles PrincipleDefinition Learnability/Memorab ility Speak the user’s language; use user-centric terminology. Design for user’s skills, capabilities and knowledge. Reduce cognitive load by providing for recognition not recall. Structure Principle The user interface must be organized purposefully, in meaningful and useful ways that put related things together and separate unrelated things based on clear, consistent models that are apparent and recognizable to others. Familiarity/Recognitio n System design needs to match user’s conceptual model. Make usage easy and obvious. Brand appropriately. Visibility The user interface should always keep users informed about what is going on, through appropriate feedback within reasonable time. Simplicity Make simple, common tasks simple to do, communicate simply in the user’s own language and provide good shortcuts that are meaningfully related to longer procedures. Design for simplicity. Focus on primary task. Give users a logical path to follow. Reduce options and preferences. Error Indication and Recovery The representation of errors must be clear to users. Help users recognize, diagnose, and recover from errors. Provide an easy escape route and return to same place. Design for system recovery. Remove sources of errors. Responsiveness The system must respond in an appropriate time. Start instantly. Always be prepared to stop. Mobile Application DesignHeuristics
Principles PrincipleDefinition Recoverability If the user makes a mistake or the application fails, the user must be able to recover the work. User Control The users must be able to control the system by their own decisions. Customizability The user must be able to modify the interface in order to improve efficiency. The customizing features must be easily accessible. Effectiveness Provide flexibility. Keep design minimalist. Design for breadth not depth. Streamline features. Efficiency The system should be efficient to use so that once the user has learned the system, a high level of productivity is possible. Design for real time interaction. Effort/Ease of Use The user interface should be designed to minimize the user’s effort for using the system. Minimize the effort required for user input. Downplay file handling operations; ask users to save only when necessary. De-emphasize settings. Make modal tasks occasional and simple. Satisfaction The interface should leave the user satisfied with the experience Interactivity Enable collaboration and connectedness. Consider adding physicality and realism. Support gestures appropriately. Mobile Application DesignHeuristics
Principles PrincipleDefinition Predictability The user interface must produce results that are in accord with previous commands and states. Design Aesthetics Delight people with stunning graphics. Simplify layout. Use subtle animation to communicate. Handle orientation changes. Navigation Eliminate duplicate links. Limit the number of styles used for buttons and links. Distractions/Hiding Reduce the number of promotional slots. Reduce visual clutter. Limit choices. Use smart defaults. Hide one-time settings and options and precision controls, but let expert users choose to keep them revealed. Don’t force customization, offer the option. Hide elegantly; that is, hide completely and reveal just in time. Copy/Text Eliminate unnecessary text. Be succinct. Entice and inform with well-written descriptions. Elevate content people care about. Search Make search quick and rewarding. This collection is a compilation of Apple’s IOS 2011 Human Interface Principles and Human User Experience; Gu et al’s “A Usability Checklist for the Usability Evaluation of Mobile Phone user Interface,” 2006; Mobile Interactive Design Heuristics, Allen Smith at mojofat.com; Philip Kortum; Colborne, Giles (2010). Simple and Usable Web, Mobile, and Interaction Design, ePub (Kindle Locations ). New Riders Press. Kindle Edition; Nadav Savio and Jared Braiterman, PhD. Mobile Application DesignHeuristics
HC4Me Application Concepts Proposed Applications: HC4Me Travel App for people with a coaching plan Medicine App for Medicine Coaching Plan Real time health and weight management tracker Stress Management App for people with a coaching plan Travel App for people with a coaching plan Medicine App for Medicine Coaching Plan Real time health and weight management tracker Stress Management App for people with a coaching plan