How To Design A Tablet App

How to Design for Tablet Interfaces

This set of user interface guidelines is a tool to help designers understand how to design the best visual and user experience for tablets specifically for the employee use case. This document talks about the principles of tablet design and the best recommendation for interface elements that fit the device based on previous usability testing and academic research.

Also check out my article about Designing for Employee Tablet Use Cases

Make it Visible

Use colors with high contrast against background colors

We found that 40% blac k is very difficult to see in bright environments during the day time, and users were unable to see any buttons or text at that transparency level. Try using at least 50% black against light color backgrounds for readability.

Don't use flat buttons as call-to-actions

Users view flat buttons as readable text because they are scanning for button shape objects to take action. Don't use hyperlinks as buttons unless it's a secondary or tertiary action and it uses a verb as a label.

Keep text hierarchy at its minimal

Employees are task-focused , so they will miss level three typography. Avoid using level three text for important actions that get a user from point A to point B.

Active elements need prominence

Ideally, an interface will only have a single task but designers may need to include additional features in an interface to meet business requirements. When designing an active state, make sure there is enough white space, color contrast, non-competing elements, and visual feedback to communicate to the user what they have selected.

Selectable items need clear button treatments

Make sure tappable objects on a screen receive a conventional button treatment. It should have an icon, or an icon paired with a label, or have a continuous connected border. Without these visual indicators they can look like lists or labels.

Optimize for Touch

Make targets visually easy to tap

Although the recommended button size is 44px by width and height for touch, tablet users hold their devices at further arms length than the phone. In order to increase efficiency the larger the button and text is, the easier and quicker it is to target them (Fitz Law).

Make touch target sizes larger than the button size

If buttons can't exceed the minimum size requirement, the touch target size should be adjusted in development.

Make large interface elements

If possible, use as large interface elements as possible without sacrificing scrolling. Users favored the ease of use with larger elements.

Don't embed buttons within tappable areas

Flat buttons used to open popovers for more information tested poorly because the user attempted to press on a tappable target but inadvertently touched another target.

Avoid scrolling

Users who scrolled to view more content lowered their speed in performing a task. In addition, their ability to recall information was more difficult. For employees, this is especially important when having to multi-task and/or serve customers.

Make Content Accessible

Important content should never be hidden

Employees have a variety of experience levels and content needs to be accessible through the first attempt or else it will frustrate the user.

Making Data Input Manageable

Perfecting pickers for tablet

Defying the native iOS picker for touch: we learned that a carousel list of numbers was slower to target a number as oppose to using steppers — especially when you were manipulating numbers less than 6 on tablet. If possible, display each number as a button for quick selection.

Being task focused

Creating forms require a lot of input from a user, so making the user feel like the task at hand is the first and foremost immediate task simply with a slight opacity background is helpful. This prevents confusion from any repetitive tasks.

The Form Factor Should Dictate the Architecture

Landscape vs portrait

If the user interaction is spending the majority time scrolling to consume content, portrait mode is easier because the scrolling gesture target area is large. However, for task-based activities, landscape designs enable both hands to cover more reachable surface area.

Make elements reachable

Placement of buttons should take into account that most users are right handed. And people will use their least dominant hand (left) to hold the tablet. Edges and corners of the screen are huge target areas so placing menus there would create efficiency if they are frequently interaction with the menu. Be wary of accidental taps along the edge of the screen.

Offer Users Visual Feedback

Use of animations

Try to attract the user eye with small animated movements so they can see the visual confirmation of their actions. Otherwise, users won't necessarily notice they have tapped anything.

Spatial transitions

Use transitions when the user is navigating from one page to another. It's a good way to anchor users to the next task. However, keep it minimal because dramatic transitions can take a long time to load and overwhelm the user.