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

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?

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

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

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