Follow

Working with Universal Micro Apps for a Better User Experience

Universal Micro Apps (also known as templates) are powerful tools to transform a source application from a desktop experience heavy with many functions to a mobile experience optimized for a specific, targeted workflow. They are designed with use case and content in mind first, then the source application second. This ensures intuitive flows, focused content appropriate for mobile, and best UX practices for successful users.

 

Approaching Universal Micro Apps

 

It’s hard to know where to start when a micro app looks nothing like the source application, so here are some tips to keep in mind:  

  

  1. Match user and business needs with micro app content, then adapt as needed.  Consider what functions are critical to completing the main tasks of the Zapp and what information is most important to the user when making decisions. Start with less and remember that real estate is precious on mobile devices.

  2. Prioritize micro app flows and design patterns, then work back to the source application. Micro apps are designed to maximize usability and user experience for the use case. Maintaining the navigation, layout, organization, and flows of the micro app as closely as possible will help users successfully use the zapp.

  3. Think flexibly! Micro apps are a starting point and should not be taken literally; content can be removed and added. Web and mobile pages do not have to have a 1:1 ratio; multiple mobile pages can map back to the same web page. Contexts, flows and controls can be kept virtual if needed. Texts and labels can be static or dynamic. We’ll discuss how to gain from these layers in depth below.

 

A flexible approach allows you to take advantage of many micro app features that enhance the user experience: 

  • Provide content hierarchy and organization to help users locate important information more quickly.

  • Provide clear calls to action on the page for primary tasks.

  • Provide feedback when tasks are completed.

  • Warn the user before taking critical actions.

  • Provide clear labels in user-friendly language.

 

Adapting Universal Micro Apps to Fit Your Source Application

 

Taking advantage of these UX goodies requires thinking flexibly about how to make a source application fit. Just because a flow or context doesn’t exist in the source application doesn’t mean they should be deleted right away. Simplification is great when it comes to less content, but not when it sacrifices critical feedback to the user. Using a combination of virtual pages and controls should allow you to take advantage of the UX flows built into micro apps, no matter what form your source application takes.

 

A single web context can be split across multiple mobile pages

 

multistep_flow.png

 

There does not always have to be one mobile page per web page. Source application pages often contain more information than can fit comfortably on a mobile screen, so splitting a single web context into multiple mobile pages can help users digest information more easily and focus their attention on one item at a time. When using universal micro apps, resist the urge to consolidate controls on a single mobile page even if additional relevant controls are present on the web page.

 

For example, the micro app for Submit a Multi-Step Request breaks a long form into multiple mobile chunks so that the user can gauge progress. The micro app can fit both a source application that has steps on separate contexts, and a source application that has a single long page with all fields. For the latter scenario, you can keep the rest of the step pages virtual. Dynamic web controls on each mobile page will map back to a single web page.

 

reject_example.png

 

The Reject flow found in all the approvals micro apps also intends to split a single web page (the approval detail page) into two mobile pages. Although the Reject button and the Comments field are usually available on the same web page as the rest of the detail content, moving them to a separate mobile page creates a more focused flow. By creating a reject step that prompts the user to add comments, users can more easily understand how to use the comments field, and error is minimized.

 

 

Virtual Pages, Connections, and Controls

 

Mobile pages can also exist without web pages. If a micro app page such as a confirmation or warning does not exist on the source application, they can be left virtual. Configure connections to and from the page as usual, and then designate all controls on the page virtual by clicking the check instead of attaching them to the web. This fully virtual flow is worth keeping around to provide the user with feedback following core actions.

 

 keep_virtual_check.png

 

Click the check to mark a control as virtual. This option is available for buttons in the attachment panel above the mobile preview in Simplify.

 

A virtual button with a virtual connection is required to configure the Reject flow described above. On the Details page, keep the Reject button virtual (don’t attach and click the check, shown in the above image). Then create a connection from the virtual Reject button to the Reject page in the micro app. Finally, attach the Comments field and Reject button to the web.

 

 

Dynamic vs Static Texts

 

Universal micro apps make some assumptions about which texts should be dynamic or static. Depending on your source application, you may want to tweak the behavior to provide better direction and clarity to the user. Always substitute user-friendly language for technical source app jargon where possible.

 

There are two scenarios to look out for:

  

  1. Replace an attachable text to a virtual text.

    1. When to do this: If that text doesn’t exist on the web and it is a stable scenario.

    2. Example: Confirmation/warning text.

    3. How: Insert a new virtual text with the desired message. Apply the style of the old control to the new control using the brush tool in style, then delete the original control.

 

  1. Change a dynamic text to a static text.

    1. When to do this: When an attached control has inherited text from the source application that can be simplified.

    2. Example: The button text on the source application says “execute action”, and you can use less technical language like “submit.”

    3. How: Override the button or label text content in the In Line Editor (ILE). The placeholder text will show the dynamic values from the web. You can insert your own text in the input. This can be reversed by deleting the text you added.

override_dynamic_text_with_static_text.png

 

 

Leveraging Design Patterns in Universal Micro Apps

 

Don’t see a micro app for your use case? Micro apps may still be able to help you get started and save you time. Pages and components in micro apps are designed with best UX practices in mind, so common design patterns may also apply to your use case. Here’s an article about how to leverage micro apps content by exporting reusable components from a universal micro app and importing it into your zapp. As for what design patterns you have to work with, here’s a list of common pages and components that can be repurposed:

 

Item

Type

When to Use It

Micro Apps Pattern is Found in

Detail page: Tabs

Page

Many kinds of data, including table(s), to organize

Approvals, Product Search, Basic Search, My Contacts, My Accounts, My Opportunities

 

01_Detail_Page_-_Tabs.png

Detail page: Collapsible Groups

Page

Many pairs or similar controls to organize

Corporate Directory, My Profile, Customer Search

 

02_Detail_Page_-_Collapsible_Groups_.png

Forms: Collapsible Groups

Page

Forms with non-sequential field entry

Submit a Field Report, Update a Field Report, Create a Contact, Create an Account, My Contacts, My Accounts

 

03_Forms-_Collapsible_Groups.png

Lookup Page

Page

All lookup fields

My Profile, Log an Activity, Create a Contact, Create an Account, Create an Opportunity, My Contacts, My Accounts, My Opportunities

 

04_Lookup_Page.png

Success Confirmation

Page

After a main action or task is completed

Approvals, Manage Time Off, Request Time Off, My Profile, Submit a Field Report, Update a Field Report, Submit a Request, Submit a Multi-Step Request, Log an Activity, Create a Contact, My Contacts, Create an Opportunity, My Opportunities, Create an Account, My Accounts

 

06_Success_Confirmation_with_Secondary_CTA.png

Success Confirmation with primary and secondary calls to action

Page

After a main action or task is completed, and two flows are relevant

Update a Field Report

 

05_Success_Confirmation.png

Error Message

Page

Source application encounters error after action

Approvals

 

07_Error_Message.png

Delete Warning

Page

Before executing a critical action with consequences

Manage Time Off

 

08_Delete_Warning.png

Start Over Warning

Page

When creating a new form

Submit a Request, Submit a Multi-Step Request, Submit a Field Report, Log an Activity, Create a Contact, Create an Account, Create an Opportunity

 

09_Start_Over.png

Cancel Changes Warning

Page

When editing a form with existing values

Update a Field Report, My Contacts, My Accounts, My Opportunities, My Profile

 

10_Cancel_Changes.png

Advanced Search

Control

When there is a primary search field but others are also relevant

Corporate Directory, Product Search, Customer Search, Basic Search

 

11_Advanced_Search.png

Progress Bars

Control

Multi-step forms

Submit a Multi-Step Request

 

12_Progress_Bars.png

Action Bars

Control

Main call(s) to action

Approvals, Manage Time Off, My Profile, Submit a Field Report, Update a Field Report, Submit a Request, Log an Activity, Create a Contact, My Contacts, Create an Account, My Accounts, Create an Opportunity, My Opportunities

 

13_Action_Bars.png

Form: Address

Control

Form with address fields

Create an Account, Create a Contact, My Profile

 

14_Address_.png

 

Was this article helpful?
2 out of 2 found this helpful
Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.