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
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.
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.
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.
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.
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.