Spectrum is now read-only. Learn more about the decision in our official announcement.


A network of designers and developers making the best podcasts, blogs, and resources for designers and developers.


Settings Modal

June 20, 2017 at 10:51pm (Edited 5 years ago)
I've been slowly adding more advanced functionality to this settings modal and its starting to get a bit harder to parse. When I first started the project there was just one action - setting the question type: Image As users started asking for more functionality we started to bury more options in it: Image I could ship this and I'm sure many of our users would be fine with it but I'm not happy that there isn't a clear sense of what to do on the page so I made a few small changes to improve it. Image
  • I added an extra section called "Extra Actions" to help provide a but more visual structure to the trailing actions. Even though the section title isn't that helpful, I think it helps group the content a bit better.
  • I darkened the title text and lightened the paragraph text. Having everything be high contrast made it a bit harder to scan the page. (Btw, this technique hasn't really sunk in with me until I watched Dann Petty's review of the iMac pro site the other day - link)
  • I put the Edit mark regions to next to the question preview which is a bit more logical as to how you know whether or not you need to edit the mark regions.
Even with these few improvements I still feel like the main action, setting the question type, get a bit lost with the extra actions. Do any of you have suggestions for how I might improve the design of this?

June 21, 2017 at 3:24pm
I guess some questions I'd ask: - do all of these things have to be on one modal? - has the modal outgrown its effectiveness and you need a different solution for this part of the product?
Definitely agree it's getting complex - when that happens I try to ask myself if it's time to rethink the modal (modals are really great for small, single-function events imo)
not sure what the exact flow is, but is this something you could break into steps within the modal? Or maybe the initial action is saving the question type, then you get a confirmation that it was saved and are presented with the other actions (edit mark regions, reset, skip).
Again, I dont have all of the context you do as the designer, but I'm wondering if maybe you could put the reset and skip actions on the same screen that you are actually doing the grouping.
Thanks for the questions and suggestions! I'll definitely take them into consideration. To give a little more context to this modal here's how the user interacts with it. When they click into a question they are asked to choose the question type:
(trying to upload gif here but failing)