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




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.




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.




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.




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:




When to Use It

Micro Apps Pattern is Found in

Detail page: Tabs


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

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



Detail page: Collapsible Groups


Many pairs or similar controls to organize

Corporate Directory, My Profile, Customer Search



Forms: Collapsible Groups


Forms with non-sequential field entry

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



Lookup Page


All lookup fields

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



Success Confirmation


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



Success Confirmation with primary and secondary calls to action


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

Update a Field Report



Error Message


Source application encounters error after action




Delete Warning


Before executing a critical action with consequences

Manage Time Off



Start Over Warning


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



Cancel Changes Warning


When editing a form with existing values

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



Advanced Search


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

Corporate Directory, Product Search, Customer Search, Basic Search



Progress Bars


Multi-step forms

Submit a Multi-Step Request



Action Bars


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



Form: Address


Form with address fields

Create an Account, Create a Contact, My Profile




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


Please sign in to leave a comment.