OEG Best Practice: Top five design best practices for UX: Desktop and mobile

AnaplanOEG

Follow our UX team's recommendations and guidelines to leverage the UX to its fullest potential.

Desktop best practices

Our top five:

1. Minimize time to decision
2. Progressive disclosure
3. Smart grouping
4. Help and guide
5. Consistency

Minimize time-to-decision Focus on the outcome your users are attempting to arrive at and optimize for it. Prioritize key KPIs at the top of pages, or on landing pages Provide easy access to key reports and analysis tools Don’t overwhelm What decision are they trying to make? What will they do with that decision? How does this inform the pages and features needed?	Executive Summary Board
Progressive disclosure Presenting data incrementally avoids overwhelming users by keeping it simple upfront. Present data in simple, digestible chunks Allow users to drill into more detail by linking summary data in cards to detail data in worksheets Place useful items in “Additional Insights” Data-dense and busy pages can overwhelm non-experts; keep it simple by eliminating what’s not needed This is especially important on mobile as there’s even less real estate	Summary on a Board
Smart grouping Grouping helps the user to make sense of what they’re seeing. Group related data together in containers Use easy to understand categories Use text cards to provide headings if necessary Use smart grouping to improve the mobile experience	Smart Grouping
Help and guide Provide hints to guide users on what to do next. Use text and instructions where needed  Use text cards for pages intended for less frequent users Use tooltips for frequent users Provide custom tooltips to help describe visualizations Don’t overwhelm with verbose language	Board With Tooltips
Consistency Consistent design e.g. terms, colors, and layout makes the experience more predictable. Keep links and target page names consistent to avoid confusion Follow consistent naming conventions Use consistent colors and order for metrics	Do's & Don'ts

Mobile best practices

If your users are likely to be using your app regularly on mobile, think about the mobile experience first. Link cards to more detailed data to avoid overwhelming users Avoid displaying huge grids on boards On board pages, place text card headings across the entire page Use one page for web and mobile, to reduce duplication and maintenance

Desktop Board Page to Mobile

Author AJ Balsamo.
Contributing author Monica Girel.

egomez66

This is really good contents. Another thing I would advise is on mobile is to avoid images. As they take up so much space and no matter how small you make the image in the designer, it gets expanded in the mobile.

JaredDolich

@annejulie 

Great article! will there be a part II on mobile design? Seems like there's so much involved with mobile UX.

annejulie

Hi @JaredDolich,

We recently published this great methodology for M.O.B.I.L.E with best practices and recommendations.

Let us know your thoughts!

bhill5

Creating UX themes or being able to set default colors would help with #5

RobertGriffin

Excellent recommendations. Especially often in my practice I use advice on minimizing decision time. I have a good source of vector templates for my design projects https://us.v-cdn.net/6037036/img// and I've trained myself not to think twice before choosing, although I admit that this is not just because the choice of beautiful images is really large.