OEG Best Practice: 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.
 |
_94889.png?medium?v=v2&px=400 "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.
 |
_94889.png?medium?v=v2&px=400 "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.
_94889.png?medium?v=v2&px=400 "Image from iOS (76).png") |
|
_94889.png?medium?v=v2&px=400 "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!
Author Emily Jackson.
Contributing author Anne-Julie Balsamo.
Comments
-
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.
2 -
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
2 -
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.
2 -
Late to the party here, but does anyone have any insights on how to remove context selectors from every single KPI card on a page in the mobile app? It seems like they show up no matter what combination of settings I change in the editor.
0
