When building Zapps, Designers should always strive for a user-centered design approach. Always look for ways to create a better experience than the source application by creating clearer interfaces and more simplified flow. Freeing users from the pain points of their source application is just as valuable as making the process mobile. Here are some basic mobile interface design best practices to help guide you in the right direction.
1. Keep it Simple
Simplicity is the quality of being natural, plain, and easy to understand. It is not surprising then that simplicity is a core principle of user interface design. Most people naturally dislike complexity in devices and software. As such, the best Zapps are those that are simple, adhering to Capriza’s mantra of the one-minute workflow. Keep to the KISS Method (Keep It Simple, Stupid) by:
- Meeting expectations – Don’t surprise your users with unfamiliar information, actions, or language. Use familiar terminology and interface elements. People already have mental models about how mobile applications work, based on their past experiences visiting other applications and websites. When you use labels and layouts that they've encountered on other apps, you reduce the amount of learning they need to do on your site.
More information about Mental Models: https://www.nngroup.com/articles/mental-models/
- Not overwhelming the user – Presenting information in bite-sized chunks a few things at a time is best. Just like computers, human brains have limited amounts of processing power. When the amount of information coming in exceeds our ability to process it, performance suffers. It may take longer to comprehend the information, miss critical details, make mistakes, or abandon the Zapp entirely. User attention is a precious resource! Empathize with your users and don’t overwhelm.
More information about Reducing Cognitive Load: https://www.nngroup.com/articles/minimize-cognitive-load/
- Accounting for context – Where in the world will your users be when they use your Zapp? Since Zapps are mobile, they could be anywhere, or at any time. In this mobile context, assume the user is in an unfamiliar setting. Easily distracted by her environment, she pulls out her smartphone and launches your Zapp from WorkSimple. How can you build your Zapp to allow her to easily complete her transaction? Be sure to account for the specific needs of your user based on their unique context.
More information about Designing with Context: http://www.cennydd.com/writing/designing-with-context
CAUTION: Always avoid Featuritis or Feature Creep!
“Feature creep, creeping featurism or featuritis is the ongoing expansion or addition of new features in a product, such as in computer software. Extra features go beyond the basic function of the product and so can result in software bloat and over-complication rather than simple design.”
To fight feature addiction, resist the temptation to throw your whole source application into a Zapp. Keep to the one-minute workflow and only offer relevant information to complete the task. Focus on doing less and doing it exceptionally well. Strategies that will help you include:
- Remove – Offer only the essentials!
- Organize – Group similar features and information with tabs or section headers.
- Hide – Move secondary features and information to another tab, inside a collapsible group, in a bubble, or a drill page (if in a table).
- Displace – Move tangential flows out into a new Zapp!
2. UI Design Tips and Tricks
In the Style Mode of the Capriza Designer, you can customize your controls and text to create a simpler and visually-appealing user interface. Using color, typography, and spacing, you can improve the usability of your Zapp.
Here are some quick tips for delivering engaging experiences in your Zapps:
- Text – Text should be at least 16 points so it's legible at a typical viewing distance without zooming. In general, use a single font throughout your Zapp. Mixing several different fonts can make your app seem fragmented and sloppy. Instead, use one font and just a few styles and sizes.
- Contrast – Make sure there is ample contrast between the font color and the background so text is legible.
- Color – Avoid using the same color in both interactive and noninteractive elements in your Zapp. Color is one of the ways that a UI element indicates its interactivity. If interactive and noninteractive elements have the same color, it’s harder for users to know where to tap.
- Negative Space – Negative Space, or white space, adds symmetry to your Zapp layout and makes it look clean and natural for visitors. Use white space throughout your Zapp to provide visual "breathing room" for text, buttons, and other elements. The right amount of negative space cushions text to make it readable. The right balance of space and elements is what really brings a complete design together and makes it beautiful.
- Alignment – Align text, images, and buttons to show users how information is related.
When in doubt, use the squint test when reviewing your design. According to Usabilia, "the Squint Test is quite literal – display your design on screen, take a step back and squint your eyes (close them partially to distort your vision). The design should become blurry and only the largest, most basic shapes of the interface should be able to be perceived. The purpose of this is to get a high-level view of the visual hierarchy of your work. What elements stand out? Can you tell where the primary focus should be? Are too many elements on the page confusing the eye?" This can be used to assess where users should be focusing their attention. If every button looks the same or the screen looks cluttered, it's a problem.
Tabs for Mobile UX Design
When building a Zapp, you can use tabs to segregate data which are in some way related. You have the ability to either use tabs to represent portions of content on a single source application page (page-split tabs) or separate pages entirely.
Done right, tabs are a great mobile design convention and can:
- Make Navigation Self-Evident. Tabs as interface control is a very intuitive and easy to use. Well-designed tabs clearly indicate current user’s location using visual appearance that set it apart from other tabs.
- Improve Content Organization. Tabs divide content into meaningful sections which occupies less screen space. In many cases, tabs visually connect with the content of a view. This reinforces the idea of a connection between the space and the active tab, and users can easily access the content that they are interested in.
- Add Visual Consistency. An excellent UI design is one that makes it easy for users to access the most important content quickly and with ease. To do so, it is important that your user interface design prioritizes the content that you would like to show your users in a particular manner.
Tab Usability Guidelines
- Place Tabs on Top – The row of tabs should be on top of the view — not on the sides or the bottom. Natural hierarchy of things go from top to bottom and users scan a new screen from top to bottom.
- Keep the number of tabs to four maximum – Mobile screen real estate is precious, and with increasing tabs comes decreased legibility. To keep organization simple, 2-4 tabs are best.
- Highlight Active Tab – Indicate the current location to orient the user by applying unique styling to the active tab. “Where am I?” is one of the fundamental questions users need to answer to successfully navigate.
- Arrange Tabs in Order – Arrange tab labels in an order that makes sense for your users. Remember, it is your user’s logic that should prevail rather than yours.
- Use Meaningful Text Labels – Tabs should be easy to scan and users should be able to understand what exactly happens when they tap on an element.
- Be Careful with Icons – Tab labels may be either all icons, all text, or an icon with a label on each tab. There should not be variation in format among tabs. Strive for consistency!
- Don’t Use Multiple Rows or Nested Tabs – There’s should be only one row of tabs.
- Make Tabs Big Enough – Make targets big enough to be easily tapped.
One-minute workflows are full of transactions. In order to capture these transactions, a plethora of action buttons can be used. These can include actions such as “Approve”, “Submit”, “OK”, “Mark as Complete”, and so on. When incorporating these buttons, sometimes the default language in your source application can be improved upon. Label, placement, and color need careful attention in order to effectively guide your users to their ultimate goal.
Here are some best practices to consider when styling action buttons in your Zapp:
- Use Action-Packed Text. Call to action buttons should feature striking, action-oriented text. Keep labels short and to the point.
- Put affirmative actions on the right (like “OK” and “Approve”) and dismissive actions to the left (such as “Cancel” or “Reject”). Both Apple iOS and Google Android Design Guidelines say that “the dismissive action is always on the left. Dismissive actions return to the user to the previous state. The affirmative actions are on the right. Affirmative actions continue progress toward the user goal that triggered the dialog.”
- Add visual weight to the affirmative action for added emphasis. This creates a clear distinction between the two options and allows the button with the stronger visual weight get more attention. Vary the visual prominence with contrasting fill colors to minimize the risk of error.
Within the Capriza Designer, you may add icons to buttons, headers, tabs, and similar controls within your Zapp. While icons create a more visually pleasing UI and enable easier navigation, it is important to ensure icons are meaningful and recognizable by:
- Recognizing that universal icons are rare – While icons are widely used in mobile and web design, few carry the same universal meaning. For example, stars are used on many websites and applications to indicate a user rating while others use them as a way to mark something as "favorite" or save it for later. When designing your Zapp, consider whether the icons you are choosing will have the same meaning to all user groups.
- Considering existing assets – Examine the iconography of your source application and other internal corporate resources. Are there icons users are already accustomed to that you may wish to repurpose?
- Including text labels – Because their are no universal icon standards, including a text label is sometimes necessary to ensure your users understand its meaning, especially on an action button. The Capriza Designer provides the option to include both an icon and text label on each applicable control, making implementation easy.
- Using the Five-Second Rule – If it takes longer than five seconds to think of an icon to represent the control's action or purpose, it is unlikely your users will recognize it.
- Testingicons for recognizability – When testing your Zapps with a pilot group prior to full launch, make sure to elicit feedback on icons. Are they easy to understand? Do they make navigation through the Zapp easier?
The Capriza Designer includes over 600 icons, providing you with plenty of choice. A search box is included in the icon selector, and recently used icons and icons included in the Zapp are displayed first for easy recall.