The MOBILE Way: Best Practices for Building in the UX for Mobile Devices

To achieve the ultimate Connected Planning experience, Anaplan users can use the mobile app to stay on top of their data from anywhere. With Anaplan at your fingertips, creating pages with mobile in mind has never been more important.

To design and build pages that look and work great on mobile, use the MOBILE method to ensure that your users can work with Anaplan at any time, no matter where they are:

Make it once

Open with the essentials

Break it down

Inform at the right level

Look at it on different devices

Encourage feedback

Make It Once

When you publish a page in the UX, it is immediately available via the Anaplan mobile app. There's no need to build and maintain multiple pages; if you consider mobile from the start, you can direct your users to a single page for a task regardless of which device they're using.

It's helpful to understand how a page on the web will translate onto a mobile or tablet screen. Mobile cards on a board are 'stacked' on top of one another. This means that when cards are side by side on a desktop screen, the left-hand card will be above the right-hand card on mobile.

Screenshot 2020-12-01 at 14.53.47.png Image from iOS (75).png

Top tip: If you need to group related cards, ensure that they're on the same row in the web experience. This means they'll be one after another on mobile, and any sections or groupings you have will make more sense.

Open With the Essentials

Because of the stacked cards in mobile, cards at the top left on the web are the first cards a mobile user sees. If you're using cards across the top to create headers, add logos, or provide instructions, consider which order makes most sense when they're on top of one another so mobile users can see the information in an order that makes sense.

Screenshot 2020-12-01 at 14.45.47.png  Image from iOS (68).png

Top tip: People read content on a screen in the same way they read a book—from left to right. Consider the hierarchy of your page and try placing content in a sequence of need: for example, a company logo, then a page title followed by any instructions. This helps people absorb content more easily no matter what device they're using, and on mobile means, readers have meaningful context as they scroll down a board.

Break It Down

There's no limit to how many cards you can have on a board. To make it easier for all your users, it's good to keep boards to one task or objective and link to other pages with more detailed information. Not only does this mean that all users know exactly where to find what they need for a given scenario, but also your boards will be more easily navigable on smaller screens.

Image from iOS (76).png

Image from iOS (78).png

Top tip: This is good practice for all screen sizes. Using links in card titles means users can easily find more detail about the card they're currently viewing without needing to search.

Inform at the Right Level

For some users it's all about the detail—for others, a highlight reel is enough! This means it's important to consider who is going to be using your pages. If she's an executive with little time on her hands, the KPIs on a page might well be enough. For the budget owner who needs to delve into the detail, grids can help convey data. Consider providing them each a separate page, and give the page titles based on the level of detail. That way they still only need one page whichever device they're using, but they can choose based on what level of detail they need.

Top tip: Share your 'Executive Overview' page to help teams track their KPIs at a glance, and know exactly what the C-suite is seeing.

Look at It on Different Devices

When you're building for different devices, it's handy to check out what your pages look like as you build them. You can use preview mode in the UX to check what it will look like on the web, and pages are available immediately through the app when they're published.

Top tip: This is good practice for all pages, even those you expect will be used mainly on desktops. Monitors come in lots of shapes and sizes, so checking on a few different screens can help make sure that cards are arranged in a way that makes sense for everyone.

Encourage Feedback

Don't be afraid to ask your colleagues for their feedback! As they use the pages, it can be helpful to understand what's working for them: what do they like? Equally, if not, more importantly, is what could be improved? This is especially valuable for mobile and tablet, devices which users are often using away from the traditional office set-up and where they may be using Anaplan at the same time as performing other tasks. A page that works well at the office might need to change slightly in a different context. For example:

Does it need a field card in place of a grid to help them enter data more easily while walking to a meeting?

How about a chart that can be rotated to landscape, to see greater detail on an iPad whilst on a train?

The mobile team continues to make improvements to the app as the UX grows. What changes would you like to see? What would help you build even more valuable experiences with the UX? Let us know in the comments!

The content in this article has not been evaluated for all Anaplan implementations and may not be recommended for your specific situation.
Please consult your internal administrators prior to applying any of the ideas or steps in this article.
Comments

@EmilyJ @annejulie 

Great article! I really appreciate having the opportunity to read these. Some ideas:

  • One noticeable challenge with porting to mobile is time it takes to test. There are simply too many devices. Just wondering if there are any plans to make the pages more responsive, or at the very least, a way to test the experience from a desktop. 
  • Is it possible to use the new ASAP program to share step by step instructions? One on testing would be great.

Thanks so much for your comment, @JaredDolich

 

With regards to testing, the mobile app is native for both iOS and Android, so there should be no discrepancy between the two, or even amongst varying different iOS/Android devices in terms of layout and functionality across both mobile and tablet devices.

 

We are exploring ways we can help the page builder understand what the stacked layout will look like in the app when designing and building pages, though this is likely something for a future roadmap. If you have any further queries or suggestions please do feel free to message me.

 

Thanks again! Emily

I found that the conditional formatting does not render elegantly in mobile. No matter what type of format type you choose, morse, border , it shows the same in mobile. I will probably avoid conditional formatting.

Hi @edgargomez you're right, we're not currently supporting multiple types of conditional formatting in the app. Thank you for the feedback - if it's something which would enhance your mobile experience I will keep it in mind for a future roadmap!

 

Thanks, Emily

About the Author
Contributors
Labels (3)