[User experience app] UI polish

katrin-freihofner commented 3 years ago

This initially came up in our design audit: https://github.com/elastic/observability-design/issues/14

Empty State / First time user experience (FTUX)

[ ] On a fresh install, there is no data to display and no instruction on how to setup the User Experience app. The empty paneled layout with UI controls suggests that the app is setup and ready to use. I'd suggest showing a simpler page with a single empty prompt that includes instructions or a link to documentation to guide the user on how to setup the app.

View screens

![image](https://user-images.githubusercontent.com/847805/101827420-4fcef700-3afe-11eb-8e8b-63b8bb9f7ae3.png)

Core web vitals breakdown formatting issue

[ ] Remove space between number and %

View screens

Icon tooltips are not properly aligned

[ ] Use <EuiFlexGroup alignItems="center" gutterSize="xs" responsive={false}> to fix text + icon alignment issues.

View screens

![image](https://user-images.githubusercontent.com/847805/101827172-f5ce3180-3afd-11eb-8624-cf01a38d4550.png) ![image](https://user-images.githubusercontent.com/847805/101827209-fff03000-3afd-11eb-8304-3f7f459cc2ca.png) ![image](https://user-images.githubusercontent.com/847805/101827261-126a6980-3afe-11eb-9127-559f18cc13f3.png)

The default "5 rows per page" is not a selectable option.

[ ] Change default to 10 rows per item or make 5 rows an available option.

View screens

![Kapture 2021-04-13 at 09 30 39](https://user-images.githubusercontent.com/20965076/114514284-65cefe80-9c3b-11eb-99ca-580a46592c61.gif)

URL popover

[ ] The URL popover needs some (paddingSize="s") additional padding. This might be related to the Amsterdam theme switch.

View screens

elasticmachine commented 3 years ago

Pinging @elastic/uptime (Team:uptime)

andrewvc commented 3 years ago

@drewpost @liciavale @katrin-freihofner the first bullet re: the empty state is a bit unclear. Are you thinking we'd use the same empty state component we use in Uptime?

andrewvc commented 3 years ago

Additionally, we have two empty data states:

No data in the selected time range
No data ever

I think we should only have this activate in the "No data ever" case, and maybe think about a different solution for the "No data in the selected time range" case (maybe just a toast or similar somewhere?)

For no data ever we could use the copy:

"It looks like you don't have any User Experience data! View the RUM documentation for more information"

paulb-elastic commented 2 years ago

Ping @hbharding

elastic / kibana