Graph UX
This page gives some guidance on recommended changes to improve the user experience (UX) for the flexgraph in oVirt UI.
Related - see Summary_UX for related changes to the Summary page
[edit]
Overall layout
- Move selectors that change what you are viewing to top left
- Move Date range control to top right
- Add label for expanded area when it is visible
- By default the graph should show CPU, Average - unless there is a specific reason we are using Memory, Peak today.
- We may need to increase the overall height to accommodate these changes
- These suggestions are intended to work in conjunction with other layout enhancements that will optimize the space used on the screen
[edit]
Graph display and interaction enhancements
- Remove existing background color and add horizontal gridlines
- Y-Axis: Show more stops, especially in the larger graph where there is more room for finer detail. Is there any way to improve the meaning of the y axis labels? If possible, align the stop labels on middle with the stops.
- X-axis: Normalize the stops to "even" times like every 2 hours, etc. Instead of random times like 16:32
- Date Range selector - simplify the labels and shorten the input fields for time. If possible, default the range hours to more even times like whole hours.
Interaction notes
- It is hard to tell in some cases which column you are viewing detail about, so the recommendation is to change the color of a column when you are hovering on it.
- Likewise, when you expand the graph to drill down on a give column, there is no indication of which column you are showing details for. The recommendation is to use a unique color for the selected column in the graph above, and use that some color for the detail graph columns.
- Users should be able to use the top graph to navigate from one host summary column to the next, without closing the host summary. To achieve this we need to do two things. First is to make a more explicit button to close the details, shown in the mockup. Second, we may need to adjust the placement of the detail hover so that it does not interfere with the ability to select summary columns to navigate. We could maintain the ability to click anywhere in the lower graph to close that graph, but I would at least recommend a cursor change to the pointer hand anytime there is a click action available.
Default view notes
Details view notes
[edit]
Color, Text changes, etc
Colors
- Blue bar : #2875c1
- Blue bar hover: #369aff
- Green bar: #9fd100
- Green bar hover:#c4ff00
- Text: black
- Graph label text: #666666
- Graph axis and stops: #bbccdd
- Graph grid: #eeeeee
View Selection order
- CPU
- Disk
- Load
- Memory
- Net In
- Net Out
Type Selection order
- Average
- Minimum
- Peak
- Rolling Average
- Rolling Minimum
- Rolling Peak
Grammatical changes
- Use sentence style captialization for text
- Use headline captialization on dropdown menus and buttons




