Best Practices for Mobile Application Design · Best Practices for Mobile Application Design...

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



Overview

• Understanding the Mobile Space

• Mobile Design Constraints

• Best Practices for Lower-End Devices

• Best Practices for Higher-End Devices



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)



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”)



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



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



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



Lower-End Devices





Smartphone

Newer PDA

Tablet Device




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



Handheld Stylesheet in Opera



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



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



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



Higher-End Devices





Smartphone

Newer PDA

Tablet Device




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



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



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



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



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



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



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



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



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

Best Practices for Mobile Application Design · Best Practices for Mobile Application Design...

Documents

Transcript of Best Practices for Mobile Application Design · Best Practices for Mobile Application Design...