Taking the time to carefully design your apps, worksheets, and boards will make the development of your apps fast and adoption of them easy. It seems like an overhead, but discussing their requirements with your users will give you interesting insights. Those insights can be reflected in the user experience. Checking back with them during development will ensure that anything that was overlooked or misunderstood can be remedied quickly.
We talk a lot about user experience, or UX, but when we say that, what do we really mean? Well, we’re talking about how easy and pleasing it is for your users to use your pages. We also focus on processes and ensure that pages are designed to help the users through processes, not hinder them.
The user experience begins with a thorough understanding of your users’ needs — talking with them, discussing solutions — and building apps, worksheets, and boards that meet those needs. Keep in mind that different audiences have different requirements and you’ll never be able to build one solution for all users.
So how do you decide how to structure the solution? The best way is to begin by drawing it out and asking the users if it’s what they had in mind. Once you have that, you can begin thinking about apps and pages and what elements you will add to them.
Don’t forget to revisit those users and check that they think you’re on the right track. It’s much easier to make small changes often. Getting to the end of the process and finding that the UI isn't quite right could be very frustrating.
There are a few basics to remember.
- An app is a collection of pages that contain either worksheets or boards.
- Boards usually contain visualizations and are where you track the key metrics for an organization, department, or business process.
- Worksheets are based around a main grid where analysts can engage in detailed analysis and scenario testing.
Here are some basic principles that will take you a long way down the journey of designing a truly successful user experience.
Prioritize by importance
When you’re discussing user requirements, ensure you know what information is most important to those users and make it the most prominent feature of the page. Don’t make your users hunt for vital information.
Design your boards and worksheets to display progressively more detailed data. Begin with a summary overview and then create further pages to show more granular levels of detail.
Don’t overload a page; present your data in digestible chunks.
Link summary data in cards to detailed data in worksheets — one click and an analyst has all the detail they need.
You can create quick links in the Insights panel on worksheets to provide access to data without cluttering the page. Similarly, items in the Additional insights panel can guide users to related data that isn’t necessarily reflected in the main grid.
Grouping similar items always makes them easier to understand. You can group related pages into categories to ensure users can see the extent of the pages in the app.
Add lots of headings to enable users to scan the content quickly. When grouping similar items, add text cards to explain the relationship between them.
Predictability. That’s what users like. They like to see the same thing in the same place. The same name for the same thing. The same color representing the same concept. This makes it much faster to access what they need.
Always use the same word to describe something — don’t call a widget a widget in some circumstances and an item in others. If you use the heading Sales, always use Sales.
Use the same color for an item consistently across pages. If sales are blue on one page, ensure sales are blue on all pages. It’s easier for the user and it’s easier for you. That goes for visualizations too — if you use green to represent Marketing, always use green for Marketing across all pages.
Guide your users
Text boxes are so useful for helping your users to understand a page. You can explain how the elements on a page connect to each other and show users what the steps are in a process. Keep your text minimal though — too many words are difficult to scan and clutter your page.
You can also use tooltips to provide information that only displays when the user hovers their mouse pointer over an element. That’s a really effective way of providing information without overwhelming the page.
Ensure you use the right visualization for the right data. For example, grids are really good for displaying large sets of data, but they’re less effective for displaying high-level trends or comparisons between sets of data.
KPI cards are great for showing a single value: a sales target, a marketing program release date. But those figures would be lost on a grid or in a visualization.
Use the right chart for the purpose. Column charts are great for comparing values across line items. Those values aren’t so easily read on a line chart. But line charts are great for showing trends over time. We have so much information in Anapedia about visualizations.
Mobile first is the name we give the design principle for displaying your app on mobile devices. You really need to think about this in your design process. Make sure you use one app for both web and mobile so you don’t have to duplicate elements and can maintain it easily.
Ensure you make use of navigation to avoid loading pages with too much content. Place text headings across containers so they display well on mobile.
Don’t display large grids on a board — they’re really not easy to see on a mobile screen.
But that's not all. Have a look at our other design documents: