Improve UX between maps/thread panel area & details panel area

[zoepage]

At the SF All Hands, we talked about the information architecture of perf-html. One of the points that stood out was, users do not see the connection between the two areas (thread area =1 / details area =2) directly.

It would be great to get some UX input on this @bwinton @violasong ?

[violasong]

Hi Ola! Happy to help :D

Sounds like the light blue highlight for selected thread is too subtle. We could change the part with the thread title e.g. "Content(1 of 2)" to white text with Blue-60 background, and keep the light blue for the graph background. (This is actually pretty similar to how Apple's Instruments does it.)

Is the selected row color in the detail section going to be that green color instead of the previous blue?

[julienw]

@violasong The "green" background is the system's Highlight value (we use it in the calltree so that the application feels more like a native application). For example on my system (default Linux Gnome) this is blue :) I don't know how it is on other systems. @zoepage what's your system ?

One of the points that stood out was, users do not see the connection between the two areas.

Where did we get this from, again ? Was it a feeling we had, or does it come from real feedbacks ?

@violasong Another thing we could consider is how we style or position the title right above the call tree. (and look at what we do in other panels too).

[violasong]

Ah I see - MacOS has a custom highlight value used for text highlights, but it's not used for selected rows, and the rest of DevTools only uses Blue60 for selected rows, so I was surprised to see that.

@violasong Another thing we could consider is how we style or position the title right above the call tree. (and look at what we do in other panels too).

That title row seems a bit redundant - I think if we add the bolder selected thread styling, it won't be necessary to emphasize the title further. I would be tempted to get rid of that whole row and move the title into the row with the filters.

One other styling thought - I find the thread view confusing because the blue graph of a thread is so visually connected to the red/black graph of the next thread down. Would it make sense to position each thread's red/black/tan graphs underneath their blue graph(s) so that each thread is more unified-looking? Or is it actually helpful to have that white space between them?

[julienw]

That title row seems a bit redundant - I think if we add the bolder selected thread styling, it won't be necessary to emphasize the title further. I would be tempted to get rid of that whole row and move the title into the row with the filters.

Actually this row is also used to display the active transforms. But when there's no filter only the title is displayed. See:

One other styling thought - I find the thread view confusing because the blue graph of a thread is so visually connected to the red/black graph of the next thread down. Would it make sense to position each thread's red/black/tan graphs underneath their blue graph(s) so that each thread is more unified-looking? Or is it actually helpful to have that white space between them?

Interesting, I never thought of this that way, but this is quite true. Now that we're in a process of changing the timeline to display categories, this may be a good time to think about this. @mstange @gregtatum you're more involved in this so what do you think ?

[zoepage]

@violasong

Is the selected row color in the detail section going to be that green color instead of the previous blue?

Green is my system default I've set. Usually it is blue.

Would it make sense to position each thread's red/black/tan graphs underneath their blue graph(s) so that each thread is more unified-looking? Or is it actually helpful to have that white space between them?

I like that idea of adding a bit of white space here.

@julienw

Where did we get this from, again ? Was it a feeling we had, or does it come from real feedbacks ?

See the notes about the UI workshop at all hands.

[julienw]

See the notes about the UI workshop at all hands.

Sure, but it would be useful to have it here rather than in a lost google doc that's not open to the public audience.

What I mean is that the UI workshop is something we did as our team, we didn't do any user testing. So when we say users do not see the connection between the two areas, this is more an hypothesis we have, a "feeling" we have that we need to assess. It doesn't mean it's wrong, but we need to test this hypothesis with our real users.

[gregtatum]

One of the points that stood out was, users do not see the connection between the two areas. Where did we get this from, again ? Was it a feeling we had, or does it come from real feedbacks ?

I have received this feedback when doing 1:1 profiling sessions with people.

That title row seems a bit redundant - I think if we add the bolder selected thread styling, it won't be necessary to emphasize the title further. I would be tempted to get rid of that whole row and move the title into the row with the filters.

I feel like I added the name of the thread there to try and make it more clear what was going on. It's where the transforms get collected now. I know we have designs for collecting the transforms somewhere else.

One other styling thought - I find the thread view confusing because the blue graph of a thread is so visually connected to the red/black graph of the next thread down. Would it make sense to position each thread's red/black/tan graphs underneath their blue graph(s) so that each thread is more unified-looking? Or is it actually helpful to have that white space between them?

I don't think having whitespace is a requirement. This area is going to be changing dramatically coming up here pretty soon with the categories view being added, and probably on by default. I think having it below would read better as it is now, but would risk having confusion from out existing users if we switched it.

[violasong]

Sounds good to keep the title/transforms row where it is now, and to see how the thread view ends up looking with the major new changes before making any further adjustments.

On Mon, Jul 2, 2018 at 12:57 PM Greg Tatum notifications@github.com wrote:

One of the points that stood out was, users do not see the connection between the two areas.

Where did we get this from, again ? Was it a feeling we had, or does it come from real feedbacks ?

I have received this feedback when doing 1:1 profiling sessions with people.

That title row seems a bit redundant - I think if we add the bolder selected thread styling, it won't be necessary to emphasize the title further. I would be tempted to get rid of that whole row and move the title into the row with the filters.

I feel like I added the name of the thread there to try and make it more clear what was going on. It's where the transforms get collected now. I know we have designs for collecting the transforms somewhere else.

One other styling thought - I find the thread view confusing because the blue graph of a thread is so visually connected to the red/black graph of the next thread down. Would it make sense to position each thread's red/black/tan graphs underneath their blue graph(s) so that each thread is more unified-looking? Or is it actually helpful to have that white space between them?

I don't think having whitespace is a requirement. This area is going to be changing dramatically coming up here pretty soon with the categories view being added, and probably on by default. I think having it below would read better as it is now, but would risk having confusion from out existing users if we switched it.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/devtools-html/perf.html/issues/1098#issuecomment-401916053, or mute the thread https://github.com/notifications/unsubscribe-auth/AADaugraK_01HRI-QVdHkd3UatKptgErks5uCns3gaJpZM4U7Kyw .

[gregtatum]

I feel that this issue is resolved now with lots of the changes that happened with the timeline changes of 2018.