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

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

Author AJ Balsamo.
Contributing author Monica Girel.

Comments

  • JaredDolich
    edited December 2022

    @annejulie 

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

  • annejulie
    edited December 2022

    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
    edited December 2022

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

  • RobertGriffin
    edited December 2022

    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.