Redesign InspectorFloret record list

[Shukuyen]

I think the record list in the InspectorFloret could be improved a little in regards to structure and legibility. This could be done by grouping elements in a different way (status code and request method should go together imho) and balancing the weight of the elements by more accentuated colors and font sizes.

Please have a look at this prototype:

What is proposed here:

• Group status code, request method and datetime but make them a little smaller
• Not only use color in the status code border but use the background color to make it more apparent and extensive
• Remove tag style from request method as it's now grouped with the tag style status code. This unclutters the view a bit
• Make the time include seconds, which can be helpful for finding the exact request you are looking for
• Enable the content type to have line breaks to better display error messages
• Adjusted the status code colors a bit to be more harmonic (in my eyes)

I would also have liked to put the content type between request method and date time, but there wasn't enough room, so I had to put it in a third row (which I am not that happy about).

What do you think, is this an improvement? Any feedback on how to make it better?

Screenshot of the current design for comparison:

[brototyp]

Hey @Shukuyen,

thanks for your proposal. First let me maybe explain the thought that went into the current layout a little. All left aligned elements are regarding the request and all right aligned elements are giving you information about the response. This is one distinction that we would lose with your proposal.

Group status code, request method and datetime but make them a little smaller

I like that you grouped the smallest elements in one line. What do you think about changing the order? Method, Time, Status-Code?

Not only use color in the status code border but use the background color to make it more apparent and extensive

I like that, though I like the old colors better. Did you change them on purpose? Also: The status code tag now feels a little too tight. Maybe increase the height there?

Remove tag style from request method as it's now grouped with the tag style status code. This unclutters the view a bit

Yes, I like this as well.

Make the time include seconds, which can be helpful for finding the exact request you are looking for

Absolutely! Good idea. Maybe there is even more possibility to improve there. Table-section containing the hour and the minute and only the seconds in the cell? Just a first idea.

Enable the content type to have line breaks to better display error messages

I am not super sure about this one. Is it really necessary to have all this information on that page here? I mean, all the details are just one tap away there.

Adjusted the status code colors a bit to be more harmonic (in my eyes)

Oh, that answers my question from above ;) Maybe we can find a middle ground there.

[Shukuyen]

thanks for your proposal. First let me maybe explain the thought that went into the current layout a little. All left aligned elements are regarding the request and all right aligned elements are giving you information about the response. This is one distinction that we would lose with your proposal.

Understood. I based the redesign loosely on the network part of the Firefox web inspector, because I really like the information density and grouping there. Imho it is not really necessary to keep request and response separated, at least for me it doesn't help answer the questions "What request is this and how did it go". Is this different for you?

I like that you grouped the smallest elements in one line. What do you think about changing the order? Method, Time, Status-Code?

Tried it but I don't like it. Moving the splash of color from the status code to the right leads to a lot of text clumped together on the left side, which makes it hard to quickly grasp the necessary information.

Here is a screenshot of the change

The status code tag now feels a little too tight. Maybe increase the height there?

I think it looks less clunky this way. It doesn't need to be really big due to the background color and that's how I saw and liked this tag style in other products. But we can of course try to adjust it.

Absolutely! Good idea. Maybe there is even more possibility to improve there. Table-section containing the hour and the minute and only the seconds in the cell? Just a first idea.

This could work. I would like to do it in step two, because I am not sure it makes it more clear when we pull information out of the cell and you then have to search it in different places.

I am not super sure about this one. Is it really necessary to have all this information on that page here? I mean, all the details are just one tap away there.

Yes, not really happy about this myself ... Should it even be on the first page then? I introduced the line breaks because the content type is combined with the error message. The error message looks like it is only useful when displayed in full. Not sure about this.

Adjusted the status code colors a bit to be more harmonic (in my eyes)

Oh, that answers my question from above ;) Maybe we can find a middle ground there.

Sure :D The original color were too blunt for me and I always liked the Bootstrap colors (which are the ones I am using here). Feel free to propose a palette, as something like colors is really subjective. I myself like matte colors more (like they are used for example in Material Design).

[brototyp]

Hey @Shukuyen, I just wanted to sum up our last discussion about this topic.

I based the redesign loosely on the network part of the Firefox web inspector, because I really like the information density and grouping there. Imho it is not really necessary to keep request and response separated, at least for me it doesn't help answer the questions "What request is this and how did it go". Is this different for you?

After getting used to your new proposal it became more and more clear, that my initial intentions there didn't have a huge effect. I am super fine with keeping it as is.

Moving the splash of color from the status code to the right leads to a lot of text clumped together on the left side, which makes it hard to quickly grasp the necessary information.

You are right there. Let's keep it as you proposed.

The status code tag now feels a little too tight. Maybe increase the height there?

I think it looks less clunky this way. It doesn't need to be really big due to the background color and that's how I saw and liked this tag style in other products. But we can of course try to adjust it.

I tweaked it a tiny bit. See my counter-proposal below.

This could work. I would like to do it in step two, because I am not sure it makes it more clear when we pull information out of the cell and you then have to search it in different places.

Absolutely.

Yes, not really happy about this myself ... Should it even be on the first page then? I introduced the line breaks because the content type is combined with the error message. The error message looks like it is only useful when displayed in full. Not sure about this.

We discussed this together and figured that even the content type isn't really necessary to show on the first level. See my counter-proposal below.

Sure :D The original color were too blunt for me and I always liked the Bootstrap colors (which are the ones I am using here). Feel free to propose a palette, as something like colors is really subjective. I myself like matte colors more (like they are used for example in Material Design).

Here is my counter proposal, based on yours and tweaking just a few things.

• Tweaked the colors a little
• In creased the height of the tags a little (please ignore the fact that the labels within the tag need to move a pixel or two up)
• Removed the Error / Content Type label and increased the url label to two lines.
• Emphasized the path of the url and made it easier to distinguish the different parts of the url

I am curious to hear your thoughts.

[Shukuyen]

• Tweaked the colors a little

I like green, blue and gray. My red appealed more to me, but I can live with yours. Can you please give me the color codes?

• In creased the height of the tags a little (please ignore the fact that the labels within the tag need to move a pixel or two up)

I don't really notice the change, so it's good :-) By how much did you increase the height?

• Emphasized the path of the url and made it easier to distinguish the different parts of the url

I am not really sure about the attributed URL yet. I will try it out with my font and font sizes and also have one alternative I want to try. Do you like it better than the version before?

[Shukuyen]

and also have one alternative I want to try

Tried it and it doesn't look good. Looking forward to test yours.

[brototyp]

I like green, blue and gray. My red appealed more to me, but I can live with yours. Can you please give me the color codes?

Absolutely:

red: #D22E0E (slightly tweaked)
green: #0BB03D
blue: #4A90E2
grey: #9B9B9B

I don't really notice the change, so it's good :-) By how much did you increase the height?

tag height: 20pts
font sizes: 14pt (all fonts)

[Shukuyen]

What do you think? I didn't change the top line font size back to 14 (it's 12 at the moment) because I like the priorization the different sizes give the data. The increased tag height doesn't look good imho, unnerves me more than in your screen :-D