Jason Withrow :: World Usability Day 2010
Best Practices for Mobile Application Design
Best Practices for Mobile
Application Design
Jason WithrowInternet 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
Small Display Area Larger Display Area
Limited Capabilities
Greater Capabilities
Web-enabled Cell Phone
Smartphone
Newer PDA
Tablet Device
Older PDA(Personal Digital Assistant)
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 zoomed-in 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
Small Display Area Larger Display Area
Limited Capabilities
Greater Capabilities
Web-enabled Cell Phone
Smartphone
Newer PDA
Tablet Device
Older PDA(Personal Digital Assistant)
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 .mobiaddress 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
Small Display Area Larger Display Area
Limited Capabilities
Greater Capabilities
Web-enabled Cell Phone
Smartphone
Newer PDA
Tablet Device
Older PDA(Personal Digital Assistant)
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
Top Related