search

newrelic / nr1-groundskeeper

NR1 Groundkeeper allows you to generate a live view of all the APM agents across your Services.
https://discuss.newrelic.com/t/groundskeeper-nerdpack/84168
Apache License 2.0
7 stars 20 forks source link

Redesign groundkeeper UI #3

Closed danielgolden closed 4 years ago

danielgolden commented 4 years ago

Summary

It doesn't look like this nerdpack, as useful as it is, has had much design attention up to this point. A thoughtful redesign would improve the user experience by quite it a bit, so I'm going to take some time to work on a redesign that I can recommend in a PR.

Desired Behaviour

Exactly the behavior that it already has, but with the application of ui design best practices and a visual style that aligns matches that of NR1.

Possible Solution

A redesign! Wireframe and mockups to come in the comments...

Additional context

This matters to me because I think it's important that the open source applications that we release as an org meet our standard of design and UX. Most/if not all of the folks building these apps aren't designers. This happens to be my specialty, so here we go!

danielgolden commented 4 years ago

Wireframe v1

Here's what I'm thinking right now. I'd bet that a lot about this plan is going to change, but if I have to put this on pause I want to know where I left off.

V1

Feedback welcome! Next up, I'm going to be working on high-fidelity mockups.

fightingmonk commented 4 years ago

Thanks for digging into this @danielgolden . Really appreciate your interest in cleaning up the layout and visual style. Your proposed layout is more vertically compact, which I like a lot.

One factor I want to pay attention to on this is staying true to the controls available in the NR1 SDK / UI Toolkit. Couple of questions for discussion:

  1. Does shrinking the horizontal size of the table to add the version sidebar impact usability?
  2. I haven't seen pill-style selectors in NR1. What about the normal tab style is bugging you? Would another Select dropdown in the header be better since this is effectively a filter similar to SLO and tag?
  3. React Table supports search and pagination. What about the reactstrap table is better?
danielgolden commented 4 years ago

No problem, @fightingmonk :). This is really helpful and great feedback. I'm going to include my responses below:

  1. Shrinking horizontal size impact usability?: I think this will have a positive impact on usability by separating the version list from the rest of the content is reduces confusion around the list being a part of the interactable UI (which, if I'm understanding it correctly, is not interactable. Just a list of versions). It also could include a toggle button so that users can collapse the sidebar if they want/need more space.
  2. Why not normal tab styles?: Though it is pill shaped in the wireframe above I don't intent for it to actually look that way. The wireframe above is just meant to be like chicken stratch on a napkin. Really low fidelity to just get the idea of the layout down. Still I'm glad you pointed this out because that does represent a change of the UI element. Though rather than a pill styled selectors, I'm thinking a segmented control which is used in NR1. My issues with the default NR1 3rd party tab controls are:
    • In this context they're hard to spot (even as I go and look for the tabs it takes me a bit to find them between the header and table). They blend in too well.
    • It doesn't offer many affordances to suggest that it's a tabs control. In other words, because it's just text with a line under it (both greyscale), it is not immediately distinguishable from our default input styes (also just text with a line under it) or a header with a line under it.
    • In contrast, a segmented control will include our primary button color and be a button shaped rectangle with slightly rounded corners). It matches a pattern of segmented controls that users are used to across the web, mobile, and NR1.
  3. Why not React Table?: Oh, cool! I don't know why I was thinking it didn't support pagination or search. That's great, and should save some time. Thanks for bringing this up.

I'm working on this between other projects so I haven't been able to spend as much time on it as I wanted to the last few weeks, but hopefully I should be able to get out a high-fidelity mockup soon and post it here so we can iterate on that. Thanks again for your feedback @fightingmonk!

danielgolden commented 4 years ago

@fightingmonk I think the changes you've made have worked out great. I've been meaning to create a more high-fidelity mockup that's based on the wireframe from above for a while and was finally able to create it today. I'd love your thoughts on what I'm proposing in this mockup:

Groundskeeper Redesing - draft 1

Significant updates:

Edit: Just for clarity, I'm 100% willing to submit a PR for the design changes we settle on, whenever we get to that step. Just wanted to clarify that in case I hadn't mentioned it before.

p.s. It was great to meet you in person a few weeks ago!

tangollama commented 4 years ago

Per @danielgolden 2.5 weeks of duration in and around other tasks. Awaiting feedback from @fightingmonk

fightingmonk commented 4 years ago

@danielgolden :100: on all the table changes you're suggesting! IMO you're describing exactly how it should work.

I'm not sold on the options bar proposal, partly because it's not a pattern I've seen used in the NR product UIs and putting them off to the right detaches them from the IA flow of the page. Would it be more consistent to use another Select element for them immediately to the right of the Filter picker?

i.e. the options bar would be [SLO picker] [Tag picker] [Value picker 1] [State picker 2] and then the loaded N applications could be right-justified as it's just informational.

  1. Value picker is only visible when Tag picker has a name selected
  2. State picker has options Out of date, Multiple versions, and Up to date
danielgolden commented 4 years ago

Good feedback on all points. Thanks, @fightingmonk.

The options bar is mostly a design pattern found in 3rd party nerdpacks because we do not have access to the global header where some of the items found in the options bar could live.

I have plans to work on this update which I'll submit in a PR next week (project load permitting). As Joel mentioned I think it will take about 2.5 weeks to go from start to completely finished (pr feedback changes and all).

devfreddy commented 4 years ago

:tada: This issue has been resolved in version 0.4.0 :tada:

The release is available on GitHub release

Your semantic-release bot :package::rocket: