Top 5 Design Best Practices for UX—Desktop and Mobile

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

Desktop Best Practices

Our Top 5:

  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 BoardExecutive 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 BoardSummary 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 GroupingSmart 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 TooltipsBoard 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'tsDo'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 MobileDesktop Board Page to Mobile
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

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.

@annejulie 

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

Latest Articles
2 weeks ago
User Provisioning
Best Practices
3 weeks ago
by Misbah
Transactional API Tutor
Best Practices
3 weeks ago
Labels (2)