2

We are experimenting with using a natural language form for user input.

This is the information we are collecting from the user:

  1. color (x2)
  2. font size
  3. font weight
  4. accessibility level

Normally, you would use a text field for 1, a number input for 2 and some form of toggle for 3 and 4.

We are trying to fit these into natural sentence form.

You can see the example here: http://accessible-colors.com/ Note: it's a work in progress

It works well, and it tested well with users. However, I can't shake off this feeling that it is wrong to be presenting toggles and text fields using the same visuals, and having them behave differently.

Is this just innately a bad thing to do, even though the behaviour is fairly learnable?

Improve this question
7
  • Several of the answers assume that users know whether they need AA or AAA compliance, and it is treated as a given on the work-in-progress site which you link to. Do they know about this? If not, it could be confusing.
    – David
    Sep 8 '15 at 23:23
  • @David I think if you are someone who is considering color contrast as part of your design, the chances are that you know what AA and AAA compliance mean. However, we are considering an 'about' section on the site where we would explain the meaning and also link to some resources such as WCAG
    – vedran
    Sep 9 '15 at 0:29
  • 1
    I know what AA vs AAA means since I've worked on accessibility projects and have used WebAIM's color contrast checker hundreds of times. About or another page would be one way to explain to users what the terms mean. But providing that help more contextually would be more helpful and wouldn't make users look for another page (when looking for another page to learn something doesn't directly support the goal that they are on your site to accomplish). One way to do this would be via an information popup that users who are less familiar with AA(A) could access through an icon.
    – David
    Sep 10 '15 at 2:35
  • Another consideration for learnability: did you test whether the labels should be "AA"/"AAA" or "WCAG AA" / "WCAG AAA"? The latter option would be easier to search for since "AAA" can mean a lot of different things, but "WCAG AAA" has far fewer (believable) possible meanings.
    – David
    Sep 10 '15 at 2:39
  • 1
    Here is one implementation I've been playing with. It's a framer.js prototype and you can interact with the 'regular/bold' toggle button only on this page
    – vedran
    Sep 17 '15 at 13:34
6

Here is my visual solution, don't hide options from users when you only have two to switch between...

Also user should know what they are entering or setting so they should be able to see their color values at the spot....

enter image description here

Also try to show the result closer to this form, reduce the top header area size of your page so the main functionality is highlighted and inside viewers view area. Right now, your results are below the fold and i had to scroll down to see them

Improve this answer
3
  • 1
    I would disagree with using the "show all the options user can select" style. As this is a natural language statement, it should read as it would be spoken -- I wouldn't say "... and my Design needs to be AA, AAA, complaint. A drop down is a better choice in my opinion, even when only two options are available, so that the string reads correctly. The colored dot in the top of color-entry field is a cool touch! +1
    – Nicholas Pappas
    Sep 8 '15 at 15:11
  • Thanks @ahsan-idrisi. My latest designs do show the results closer to the form - I will share once we publish the latest version
    – vedran
    Sep 9 '15 at 0:10
  • @EvilClosetMonkey, i know its a natural language form but why we need to increase the cognitive load of the user when he can see both the options he can select. Drop-down makes no sense to select between two options...You are asking for making a Radio button turned into a Dropdown....In case of dropdown, your selected values are 2 clicks away and in case of a switch, they are just 1 click away... See few of the Luke's videos on form design topics
    – Ahsan Idrisi
    Sep 9 '15 at 8:31
1

Speak with your target audience and ask them to verbalize the information you are presenting. This will help in finding the most appropriate natural language string that is clear to the largest user segment.

You may find that the string turns out to be something very different:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

(I'm just winging it above... again, talk to your user base)

In the natural language string, be sure that you are using appropriate control metaphors. Do not style different controls (e.g., text input or toggles) in the same way, forcing the user to figure it what's going to happen when the click a dotted underline isn't the most friendly approach.

Improve this answer
1
  • Thanks @evil-closet-monkey. We have been talking to our audience, and the order of inputs and the structure of the sentences works fine. It's more the execution of the different input controls that I'm questioning. I like the drop-down idea - I initially had that in the design, but was trying to achieve a more of a natural sentence flow without the visual distraction of drop-downs
    – vedran
    Sep 9 '15 at 0:02
0

Suggestion:

When entering the Hex Value, if you could manually change the Highlight/Text Color of the TextBox's entered text, it could make sense as to what color the user has entered without the need of scrolling down.

Secondly, the Green and Red colors below are a little confusing, until I scrolled down to know it was suggesting if the Foreground/Background combination is correct.

Coming to your question, a Toggle is appropriate for Bold/Regular Font Weight. Since there are only two options and it's difficult to know in the Sentence form whether it's just Bold and Regular or are there more options like Italic in there.

My viewpoint: It's better to have one sentence to get the Foreground and Background colors and have the other two inputs as Toggles, with an explanation if necessary for your user-base.

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.