7

I'm working on a webapp that lets designers generate CSS through an intuitive interface. Right now I'm working on the Shadows panel and I can't decided which option has the most versatile usability. By "versatile" I mean the option that is easiest to learn as a beginner and quickest to use as a pro. It would be interesting to know in general if there are any studies on this kind of interaction (creating something new in a design tool) since it is hard to find any resources on the topic.

Option 1: The user is given several visual presets to create a shadow. After selecting one a dialog box with settings will appear. Each option will create a shadow with specific settings that the user can tweak. This option seems quicker because it takes one click to get closer to the type of shadow you want. This is Adobe's approach, but they use text instead of a preview image.

Option 2: The user is given two actions - add a shadow and add a preset. Clicking the + will create a basic shadow. This option seems more straightforward and simple, but also needs more clicks to get to the desired shadow.

Preview:

two different approaches for adding a shadow

What seems most versatile?

|improve this question
  • 1
    If you haven't done so already, you'll probably want to look at css3generator.com. They have a useful interface to create CSS. – Graham Herrli Jan 4 '13 at 22:28
  • 1
    Thanks @3nafish, I have found this and many css3 generators. But few of them give you a photoshop-like interface to edit css styles. That's what we are trying to do. :) – Sergie Magdalin Jan 4 '13 at 23:54
4

By "versatile" I mean the option that is easiest to learn as a beginner and quickest to use as a pro.

The first option is easiest to learn and quickest to use. Assuming that a pro would only ever need to choose between the three styles in the first option, the solution is easy.

If a pro would likely need more options (and you want to offer these), then you are going to have to choose a tradeoff between usability and functionality.

|improve this answer
  • 1
    And first option has a nice preview! – alexeypegov Jan 5 '13 at 9:50
  • I agree. I'll have to think about the tradeoffs once there are more options, but to my knowledge there are only 3 main options for shadows. Thanks! – Sergie Magdalin Jan 5 '13 at 18:35
1

I find the first much more obvious and intuitive to understand. I had no idea what the '+' button in the second would do without reading through the text. Such obviousness will often help the pro in speed as much as it will the beginner user - the good old 'Don't make me think concept'.

|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.