search

cloud-gov / cg-design

This repo contains all the historical and current design and user research artifacts for cloud.gov
Other
1 stars 1 forks source link

Design application settings/pattern (Scale) #5

Closed vz3 closed 8 years ago

vz3 commented 8 years ago

Everything is mocked up at 6 col width. Will get Sketch up too. Sketch file (Sorry for the zip, GitHub doesn't support Sketch)

Patterns

app settings

Normal (Default) state

app settings normal state

vz3 commented 8 years ago

@jeremiak

vz3 commented 8 years ago

@thisisdano @juliaelman @msecret for visibility

juliaelman commented 8 years ago

@vz3 nice work!

Once the design is 👍 it would be great to talk about how we implement the code base not only into cg-style but the pattern library itself. //cc @msecret

thisisdano commented 8 years ago

I've got plenty of ideas on how to work on this, which I'll work on today and post soon — but I gotta say, I wish we hadn't gotten (somewhat inadvertently) hardened into this new refactor style. We're gonna do all this work; build a whole pattern library based on it. It bums me out.

msecret commented 8 years ago

@thisisdano I'm a little unclear what you mean, do you mean the visual style changing or how cg-style's styleguide is changing to using Fractal?

thisisdano commented 8 years ago

Here are some initial thoughts on the some of the app settings sections. It mostly follows the same patterns as above with a bit more distinguishing color.

Dropdown from each item's edit button could include delete.

Items expand to accommodate edit options when editable.

Routes attempt a one-line route constructor. I also added a place to preview the constructed route for clarity. I also added route limit usage to the header of the routes section. The carat at the end of a route would be a link to the live URL.

In Limits and Quotas, I tried to rough out how a slider might work for Application Limits, editable once edit is selected. The slider would have limits set at the current usage and the available limit in the space or org, wherever it is set — I think it MUST be set in one of those places? Are there limitless orgs?? User could also set the value manually in the input box at the bottom of the expanded item. I wrote out the available space in a separate line rather than crowd the graph with further text.

When the graph "expands" for editing, I have the app usage and space/org usage bars widening, but not the available bar, forming a kind of "rail" that the slider could slide on.

I also threw in a usage sparkline for fun.

app-settings

thisisdano commented 8 years ago

A question about Limits and Quotas, though — does a limit or a quota "reserve" the space within the larger hierarchy? Or can limits and quotas "overlap"? For example:

A space has a quota of 1GB. It has five apps within it. Can each app have a limit of 1GB (overlapping), or must all the application limits in total stay within the 1GB quota, like 5 limits of 200 MB each (reserved)? I can see how overlapping limits could be confusing for users — if they set a limit that allowed continuous deployment, but another app "encroached" and pushed the first app's usage over 50%.

This has big effects on how we display availability. I suspect that the system uses overlapping limits rather than reserved limits (and remaining availability would be calculated based on actual other app's usages rather than their limits/reservations), but perhaps there's an argument for moving toward reservations for planning and stability.

vz3 commented 8 years ago

@thisisdano Can you share your sketch file for this

thisisdano commented 8 years ago

uswds-cg-fork-dow.zip

thisisdano commented 8 years ago

Here are a few more application settings sketches based on feedback from @vz3

Also playing around with the activity log, and with collecting all settings in a bordered "card", rather than a single setting per card (see the activity graphic for an example of this).

Application settings @ 7c width app-settings-v2-7c

Application settings @ 6c width app-settings-v-6c

Activity and settings together activity-log-insitu

Sketch file

jeremiak commented 8 years ago

These look really cool, and I think the route editing interface is pretty cool!

Is it right to assume that the slider for Disk limits and the "Application limit" text field are supposed to represent the same value? If so, that's cool and something that matches up with the capabilities of the platform (relevant docs).

thisisdano commented 8 years ago

@jeremiak that's correct, about the text field and slider representing the same values

thisisdano commented 8 years ago

We were looking at these a bit in my crit group, and there was definitely some confusion about the distinction between a limit (Application limit) and a quota (Space quota). Beyond the idea that there should be a consistent way of describing the boundary around a specific kind of usage, they also thought that 'quota' didn't imply a boundary, rather it implied a goal (as in "meeting a sales quota").

I'd never thought of the word quota like that, but I should have. And the more I think about it, it seems like a real flaw in the Cloud Foundry taxonomy — one that we might want to work to address, whether in our own implementation, or all the way at the CF source.

I wonder if anyone has any insight into the quota/limit question — why this exists in an otherwise pretty clear, elegant, and rational framework....

vz3 commented 8 years ago

@thisisdano useful feedback! i'd like to do a microcopy review with @brittag, perhaps this coming sprint or maybe next

thisisdano commented 8 years ago

Here's a new iteration on the settings/usage panel:

app-settings-v3-6c

Download Sketch file

mogul commented 8 years ago

@thisisdano:

A question about Limits and Quotas, though — does a limit or a quota "reserve" the space within the larger hierarchy? Or can limits and quotas "overlap"?

It's definitely a reservation.

thisisdano commented 8 years ago

@mogul phew. very good. i'd imagined some real complications otherwise.

suprenant commented 8 years ago

Contingent upon some minor design tweaks, @vz3 accepts this. @msecret can you please validate that this matches requirements?

vz3 commented 8 years ago

@thisisdano I'm going to request a small tweak here because I still think the slider bar still gets lost within its bounds. Can you pull out the blue and green to the side of the handles?

suprenant commented 8 years ago

Moving this back to the backlog as we discussed holding on scale for this sprint

@vz3 @thisisdano