Explore Profiles is a native Grafana application designed to integrate seamlessly with Pyroscope, the open-source continuous profiling platform, providing a smooth, query-less experience for browsing and analyzing profiling data.
GNU Affero General Public License v3.0
18
stars
1
forks
source link
[all services → profile types view] These 2 views are too similar and create confusion #239
When navigating between "All Services" and "Profile Types," users often experience confusion due to the similar layout of both views. Specifically, users may not notice that the "Profile Type" dropdown has been replaced by a "Service" dropdown, leading to misunderstandings about the current page context.
Proposed Solution by @Rperry2174
Enhance visual differentiation between the two views with the following changes:
Add Contextual Titles and Headings
Display a clear title at the top of the grid (e.g., "You're viewing the CPU profile of 1721 services") to provide immediate context to the user.
Use Color to Signify Different Profile Types
Implement a consistent color scheme for each profile type to reinforce the page’s purpose visually (colors below are just fore example):
CPU Profile: Green
Memory Profile: Blue
Other Profiles: Yellow
This approach not only organizes content visually but helps users immediately recognize which profile type they’re viewing. On the Profile Types page, each profile type could have its own section with a distinct color block header for added clarity.
Alternative Approaches
Adjust Spacing and Page Layout to Indicate Page Context
Modify page spacing and layout to make it more apparent that the Profile Types view belongs to a selected service. When a user selects a service, the header could emphasize the active profile type with adjustments in spacing and placement that intuitively separate this view from "All Services."
Consolidate Data Source Display
Since many users typically have only one data source, consider reusing that space to simplify the header. This could open up space to make the page context more prominent, especially for users viewing Profile Types.
Additional Context
This update aims to reduce user confusion by making navigational differences visually apparent, thus improving usability and reducing the likelihood of errors during navigation.
grafakus
commented
3 days ago
Feature Description
Problem Statement
When navigating between "All Services" and "Profile Types," users often experience confusion due to the similar layout of both views. Specifically, users may not notice that the "Profile Type" dropdown has been replaced by a "Service" dropdown, leading to misunderstandings about the current page context.
Proposed Solution by @Rperry2174
Enhance visual differentiation between the two views with the following changes:
Add Contextual Titles and Headings
Display a clear title at the top of the grid (e.g., "You're viewing the CPU profile of 1721 services") to provide immediate context to the user.
Use Color to Signify Different Profile Types
Implement a consistent color scheme for each profile type to reinforce the page’s purpose visually (colors below are just fore example):
This approach not only organizes content visually but helps users immediately recognize which profile type they’re viewing. On the Profile Types page, each profile type could have its own section with a distinct color block header for added clarity.
Alternative Approaches
Adjust Spacing and Page Layout to Indicate Page Context
Modify page spacing and layout to make it more apparent that the Profile Types view belongs to a selected service. When a user selects a service, the header could emphasize the active profile type with adjustments in spacing and placement that intuitively separate this view from "All Services."
Consolidate Data Source Display
Since many users typically have only one data source, consider reusing that space to simplify the header. This could open up space to make the page context more prominent, especially for users viewing Profile Types.
Additional Context
This update aims to reduce user confusion by making navigational differences visually apparent, thus improving usability and reducing the likelihood of errors during navigation.