0

I've got a web app that uses canvas drawings. I'm now adding a feature that lets users choose their preferences for the drawings' style. This necessitates a separate UI.

At this point, I've got to the stage that I know:

  • I want it to be a separate UI (i.e. dialog)
  • It needs to set multiple settings from the same UI.

All I've got for the moment is this:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Seems a bit clunky to me. Are there any better ways of doing it? I have jQuery UI so the dialog itself isn't a problem, it's the options within it.

Each different field in the mockup represents a different option: the user can set several cosmetic options like color, size, width, style, etc.

Improve this question
3
  • Hi, you're right it does seem a little disjointed. it'd be much easier to offer suggestions if there was a bit more context. Knowing what's being "set" and why is important in deciding how is should be set. Can you describe what you were trying to achieve with each of the elements in your wireframe?
    – dennislees
    Oct 10 '14 at 16:57
  • Each field represents a different option for the design of the drawings such as width (i.e. the number picker), color, style, etc.
    – ArtOfCode
    Oct 10 '14 at 17:22
  • Yup, you've communicated that in your question, but it's still tricky to get a sense of what's going on. You're referring to 'setting options' but much of the UI is taken up by three text fields. How do you intend these to be used and for what? There so much missing from your wireframe in its current state that it makes it difficult to advise - it'd be really helpful if you could you tweak it to include some realistic labels and values.
    – dennislees
    Oct 10 '14 at 19:06
1

It's much easier for the user to understand what each option do by showing them the difference as oppose to trying to describe it with text.

Here's an example from WooThemes' theme demo

enter image description here

If this is too much to do technically, you can get away with a preview image. Example from Hootsuite. This approach can be be done in a modal depending on the how large the preview needs to be and the number of options you want to show. If this becomes too large. It's okay to have the UI customization on a separate page.

enter image description here

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.