Best Practices for Mobile Application Design
Best Practices for Mobile Application Design Jason Withrow Internet Professional Program Washtenaw Commu...
Best Practices for Mobile Application Design Jason Withrow Internet Professional Program Washtenaw Community College
Jason Withrow :: World Usability Day 2010
Best Practices for Mobile Application Design
Overview • • • •
Understanding the Mobile Space Mobile Design Constraints Best Practices for Lower-End Devices Best Practices for Higher-End Devices
Jason Withrow :: World Usability Day 2010
Best Practices for Mobile Application Design
Understanding the Mobile Space
Limited Capabilities
Small Display Area
Larger Display Area
Web-enabled Cell Phone
Older PDA (Personal Digital Assistant)
Smartphone Greater Capabilities
Tablet Device Newer PDA
Jason Withrow :: World Usability Day 2010
Best Practices for Mobile Application Design
Design Constraints: Screen Size • Mobile phone widths: 100px to 320px – May not allow horizontal scrolling
• PDA widths range from 320px to 640px • iPhone width is 480px (height is 320px) – For zooming interfaces navigating the zoomedin page is equivalent to a visually handicapped user with a screen magnifier (easy to get “lost”) Jason Withrow :: World Usability Day 2010
Best Practices for Mobile Application Design
Design Constraints: Software • Not all desktop technologies supported – Some devices lack JavaScript support – Plugins are likely not permitted
• Limited local storage – File uploads may also not be allowed
• Significant variety in microbrowsers – Opera Mini, Opera Mobile, Mobile Safari – Over 40 microbrowsers exist Jason Withrow :: World Usability Day 2010
Best Practices for Mobile Application Design
Design Constraints: Input • Typing can be difficult for some users – Keys often too close together – On-screen keyboards can be difficult to use; task performance slows down considerably
• Touch interfaces • No mouse – When porting from desktop to mobile device the interaction design often needs to change Jason Withrow :: World Usability Day 2010
Best Practices for Mobile Application Design
Design Constraints: Bandwidth • Slower and more costly connections – Newer devices use Wi-Fi – 3G support is fairly common – Providers may charge by the amount of data transferred, which can be costly – There may also be usage caps
Jason Withrow :: World Usability Day 2010
Best Practices for Mobile Application Design
Lower-End Devices
Limited Capabilities
Small Display Area
Larger Display Area
Web-enabled Cell Phone
Older PDA (Personal Digital Assistant)
Smartphone Greater Capabilities
Tablet Device Newer PDA
Jason Withrow :: World Usability Day 2010
Best Practices for Mobile Application Design
Lower-End Devices • Implementation: – (X)HTML + CSS – Usage of „handheld‟ stylesheet or have a .mobi address or m.yourdomain.com address
• Focus on the task: – Limit the functionality to specific tasks; only supporting a few tasks is much better than trying to do everything Jason Withrow :: World Usability Day 2010
Best Practices for Mobile Application Design
Handheld Stylesheet in Opera
Jason Withrow :: World Usability Day 2010
Best Practices for Mobile Application Design
Lower-End Devices • Reduce visual clutter: – Reduce the amount of text; large blocks increase scrolling and are hard to visually scan – Left-align content for better readability – Eliminate space between paragraphs for the smallest displays; an empty line may suggest that content has ended
Jason Withrow :: World Usability Day 2010
Best Practices for Mobile Application Design
Lower-End Devices • Place identifiers at top of page: – Otherwise the top of the page looks the same, so users do not know a new page has loaded
• Use graphics sparingly: – Send only the graphics that are essential – Size them for the device; not all devices support scaling and the text inside scaled images often becomes distorted Jason Withrow :: World Usability Day 2010
Best Practices for Mobile Application Design
Older PDAs • The screen size is larger, but many of the design recommendations remain the same because display capabilities are still limited • Text display becomes less restricted, so white space can again be used between paragraphs and text sizing may also be somewhat larger
Jason Withrow :: World Usability Day 2010
Best Practices for Mobile Application Design
Higher-End Devices
Limited Capabilities
Small Display Area
Larger Display Area
Web-enabled Cell Phone
Older PDA (Personal Digital Assistant)
Smartphone Greater Capabilities
Tablet Device Newer PDA
Jason Withrow :: World Usability Day 2010
Best Practices for Mobile Application Design
Higher-End Devices • Implementation Option 1: – (X)HTML + CSS – JavaScript – CSS Media Query to style based on device characteristics
• Implementation Option 2: – Application written for the device in a supported programming language Jason Withrow :: World Usability Day 2010
Best Practices for Mobile Application Design
Higher-End Devices • Streamline task completion: – A consistent theme in mobile design – For smartphones, PDAs, and tablets the issue is not so much screen space but rather other applications demanding attention – The key is to allow users to quickly accomplish the desired action, so limit feature creep (focus on the application doing 1-2 things) – Task analysis and GOMS analysis can be helpful in this process Jason Withrow :: World Usability Day 2010
Best Practices for Mobile Application Design
Higher-End Devices • Design for user preferences and patterns: – Often users will use a mobile application for the same information lookups repeatedly (e.g., sports scores, stock prices) – Have the application remember the most frequent selections and the most recent actions – Auto-loading those is another option, especially if the alternative is a generic welcome screen
Jason Withrow :: World Usability Day 2010
Best Practices for Mobile Application Design
Higher-End Devices • Design for single-hand usage: – Often users will have their other hand occupied (perhaps they are holding something) so design interactions that just need a single finger available to select among options – Limit the need to use the keyboard by providing easily accessed buttons with common options
Jason Withrow :: World Usability Day 2010
Best Practices for Mobile Application Design
Higher-End Devices • Keep Fitts‟ Law in mind: – The time it takes to acquire a target (e.g., a button) is a function of the distance to, and size of, that target – In this case the size of the target is critical; it needs to be big enough to acquire easily – This also means clearing away clutter; if there is are other buttons close by the user will need to slow down further to avoid clicking the wrong one Jason Withrow :: World Usability Day 2010
Best Practices for Mobile Application Design
Higher-End Devices • Use mobility to your advantage: – Incorporate the user‟s geographic location into your application (if it adds value); that makes it a more valuable tool – Adjust the visual display of the information based on device position
Jason Withrow :: World Usability Day 2010
Best Practices for Mobile Application Design
Working with Tablets • Tablets expand the screen size to the point where they are getting closer to netbooks / small laptops, so they alter the interface design process – With smartphones and PDAs the transition between layout and portrait views is mostly about rearranging columns or adjusting widths / heights; this is a bigger adjustment
• Drag-and-drop is also now a possibility Jason Withrow :: World Usability Day 2010
Best Practices for Mobile Application Design
Working with Tablets in Landscape • Landscape orientation allows enough room for controls to appear in panels – Some or all of the panels could flip over, greatly increasing the number of options – Expanding / collapsing panels are possible, but the target needs to be large enough and its area clear of other touch controls – Experiment with panel placement above or to the side of the main content area – Also carefully consider cross-panel interaction and when multiple panels need to update Jason Withrow :: World Usability Day 2010
Best Practices for Mobile Application Design
Working with Tablets in Portrait • Portrait orientation typically complicates the use of multiple panels • With portrait there is a greater likelihood of having pop-up menus, which can reduce task performance because selections now involve at least two touches / clicks
