"Compact" Applications view

[joepavitt]

With many applications, instances and devices, the vertical space taken up in the applications view is considerable, and makes it very difficult to quickly scan and navigate to the relevant resources.

We should look at compressing the vertical spacing used up by several elements, and consider using a grid-3 column approach for the instances/devices lists where possible.

[joepavitt]

Iteration sent by the client

[joepavitt]

Note the client example doesn't include a "Dashboard" link as available for any Dashboard 2.0 instances, and the "Actions" shortcut to restart instances, etc.

[joepavitt]

In a "worst case" from a spacing perspective, we need all three options, we could look at a design like:

Compact 1

Change the actions button to a kebab menu for better space utilisation, then reduce the "Open" buttons to icon-only, with each button having a unique icon.

Compact 2

Or, remove the "Instance" icon entirely for each entry, and use that space for a compact "Status" icon instead?

[Steve-Mcl]

I prefer the symmetry of version 2 but the lack of icons makes it harder to distinguish devices from instances due to the barely visible group text.

[Steve-Mcl]

If we make the text element of buttons responsive we could have the best of both worlds.

[cstns]

I prefer the symmetry of version 2 but the lack of icons makes it harder to distinguish devices from instances due to the barely visible group text.

I agree with @Steve-Mcl on the symmetry and lack of icons. One thing to note is that if we're going for more of a compact look, we don't really need the full status pill. At a first glance using the color code of the status pill as an element of the instance tile (background, side border or bottom border) would be suggestive enough.

We should look at compressing the vertical spacing used up by several elements, and consider using a grid-3 column approach for the instances/devices lists where possible.

In my opinion, we should not set a fix grid but more of a fluid/responsive layout. Tiles should have a max and min width (that would fit max 3/4 tiles on a row depending on viewport width) and wrap when needed

A lot of problems will be solved by adding the search option when dealing with a lot of instances and applications. The search function should dynamically filter out applications alongside instances when using it.

[joepavitt]

If we make the text element of buttons responsive we could have the best of both worlds.

Not sure I follow what you mean here @Steve-Mcl?

[joepavitt]

In my opinion, we should not set a fix grid but more of a fluid/responsive layout. Tiles should have a max and min width (that would fit max 3/4 tiles on a row depending on viewport width) and wrap when needed

Very much agree, just using three here as an example, this would fit as appropriate, single column for smaller screen widths, etc.

[joepavitt]

@Steve-Mcl thoughts on adding the icon to the group header, and making the text line a little more prominant?

[Steve-Mcl]

If we make the text element of buttons responsive we could have the best of both worlds.

Not sure I follow what you mean here @Steve-Mcl?

I mean put visibility breakpoints on the text portion so that larger views see icon and text, smaller views see icon only. Just weary of the huge amounts of whitespace we have in our tables and views currently.

[joepavitt]

Another variant, avoid the "3 more instances, etc" not under each row, and instead add an extra button far-right to go tot he full instances/devices list

[cstns]

It definitely tidies up the place! Would clicking the more tile extend the section and show all tiles or a redirect to a new page?

[joepavitt]

Would clicking the more tile extend the section and show all tiles or a redirect to a new page?

I'd vote it goes to the "Instances"/"Devices" tab for that application

[cstns]

What I think gets lost is the bird's eye view of that page, which I find myself to use more than the instances or devices page just because of that.

[joepavitt]

What I think gets lost is the bird's eye view of that page, which I find myself to use more than the instances or devices page just because of that.

We have all of the same information as previous? Even now, we only list a max of 3 instances/devices per application...

[cstns]

Did not notice that!

[joepavitt]

Just to demo what it could look like on more compressed screens: