Do not overwhelm users - guide them
We are handling a tremendous amount of data on a daily basis and try to visualize it understandable and consumable for our users. Showing all the data we can show doesn't help our users at all. One of our mantras is to guide a user through the data flow.
But how? By providing the data that is needed at the time it is needed. Don't just show everything - start out with giving the user an high level overview and bubble down information to get more and more detailed. Always keep the use case(s) in mind and test if it is as easy as possible to fulfill it. Create a golden path for the most used use case.
Only one primary button per view
One aspect of guiding the user is showing which option or next step is the recommended one. Sometimes there are several paths the user can follow from a certain view. At Dynatrace we want to work use case oriented - that means, we are aware of the goal, our user has to achieve and therefore are able to guide him or her. There should always be a prefered, recommended path we can highlight for our users. Keep in mind: one primary button per view helps users to decide the most common next step. Every other action and option can be provided as a secondary button.
Structuring content
Every view should follow a semantically correct html structure. Not only in code, but also visually. Why, you ask?
Because the human attention is only capable of retaining around 5 items in our short-term memory at the same time. Therefore a good structured hierarchy helps users to perceive the purpose of a view. Users always first skip h1 headlines and then move on to the next hierarchy level, When moving to the next level, they don't necessarily remember all the h1 items. So this is why your view should be structured well and follow a strict hierarchy. Also remember to structure your view from the most important information on top to least important information on the bottom of a view. This helps users to group information and content and they won't get lost as easily. Read about how our navgiation is supporting this UX best practice.
Use spacing to structure your content. Especially on views with more content it's crucial to divide the content into sections. Elements which belong together should be grouped together. Use cards to group all content for one topic together.
Strive for consistency
Consitency does not only mean using the same components for the same use cases. When we talk about consistency we're talking about using known icons for a purpose, striving for patterns our users are already familiar with (because of other product parts, industry standards,...) and above all creating sequences of actions our users can learn once and rely on.
Standardizing actionable patterns assures that users already know what's coming next and what to expect. This benefits in faster interactions, but above all it results in trust in our platform.
When to use icons, and when not
Iconography can be a great method to emphasise actions as well as content and besides that icon are a huge design element. But be careful as icons don't enhance usability.
- Too many icons are hard to memorize. Don't make the user think about what our icons mean.
- A user’s understanding of iconography is based on previous experience. **Use icons only if they are self-explanatory. ** That doesn't mean you can't use icons in your view, but make sure they have labels next to them. An example: use a magnifier icon for search, because this is well know in our industry, but an analyze icon can never stand alone, without a label. The label can be place next to the icon or if the icon is used in a table - choose a significant and meaningful table header for the column.
- Never tell an important action with an icon only. In the battle of clarity between icons and text, text always wins.
But when should you use icons then? Icons can actually be a great source to visually draw focus and to structure a view. They are great to show top findings, for example in our info group component.
Increase readability
Most users skim through text only, so a rule of thumb is to keep descriptions as short as possible. Give users the possibility for help whenever necessary and if possible inline, right where the help is needed.
Always give feedback
Any action a user is performing asks for feedback to be confirmed. This starts with a perceivable subtle change in the styling when a button is clicked to an actual feedback message when e.g. a form is sent. Feedback is necessary in order to not let a user guess if his/her action was carried out successfully or not. Feedback messages should follow the rule of being modest and short for frequent and minor issues and being more detailled and explicit for major and less frequent occurring actions.
Giving usable feedback also means thinking about error messages. They need to be human-readable (avoid unnecessary technical jargon), specific and clear and should always contain a suggestion of what the user should do next. One aspect to remember for error message is never to blame the user!
Action vs. navigation
Rule of thumb: if the breadcrumb changes (drilling down, switching to a different view), it's a navigation. If the same view changes (adding filters, expanding table rows, etc.) it's an action.
Color usage
Use colors for your advanatage. Don't just color things, so that the view looks nice, but rather use colors to emphasize significant parts of the view you're working on.
When to use infographics
Infographics are a very individual part of entity screens in Dynatrace. They summarize the health of an entity. Infographics shouldn't be overwhelming, and should never show too many metrics. Their main purpose is to provide an overview and to immediately recognize an entity. Every infographic should be individual. Read more about infographics and their purpose in the navigation pattern.
