Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

Just for a project I am making a note taking web app. I thought it would be a nice idea to let users add a colour to the note to 'categorise' it. The most logical space to put it would be in the input form but I can't think of a clean way to tell users that they can change the colour.

You can see an example of this here where the notes have different colours on the sides of them.

Currently the input form looks like this: input box

(N.B. You hit enter to submit the note, am thinking of changing this to add a button to submit, to make this clearer - I might ask another question on best practises for this)

share|improve this question
    
There is a color input element (<input type="color" />). –  cimmanon Feb 15 at 21:21
1  
@cimmanon Which doesn't work in IE 11, and will only be introduced in FF in the next release. Also, at least on Windows, both the FF and Chrome pickers reuse the standard Windows colour picker component... which is pretty bad for web use, from the lack of hex code input if nothing else (makes it hard to copy colours). For now, JS libraries for colour pickers still seem to be the better choice. –  Bob Feb 16 at 3:13
add comment

5 Answers 5

up vote 23 down vote accepted

Keep the color option at the end of the input form ( I would recommend using a default color for the note with a dropdown available which informs users that there are more options available as shown below).

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Another option is to do it like Google Keep does it where it shows a palette icon and on hovering over it users can select multiple color options

enter image description here

That said, with regards to whether you should provide a button for your box bar or not, I would recommend going for it since it provides a larger hit area for users and there is also a good possibility users might not know that you can hit enter to "Add a note". In addition, on mobile devices, it's easier for users to just click on the search button rather than having to hunt for the Enter option on their keypads.

Also the presence of a button is a visual clue about the next step in the process.

I recommend looking at this question for more inputs on whether a submit button is needed.

share|improve this answer
    
Thanks for all the advice! –  user43091 Feb 15 at 19:39
add comment

To answer your question about change colour:

I did a simple "change color icon" search on Google and found a lot of good ideas:

enter image description here enter image description here enter image description here

Google has something like this:

enter image description here

share|improve this answer
5  
This doesn't really say how the user would know they can change color though, it's just some example icons. Where would they be used? How would the user know that they can even change color anyway? –  JonW Feb 15 at 19:21
add comment

Personally, I prefer to have a limited number of carefully selected colors which will look good in most of the situations (or match some standard sets). I also suggest to show them near the note input box so user can see all of the variants and choose one more quickly:

enter image description here

share|improve this answer
    
I was thinking exactly this - If you have a hexadecimal colour picker, then either the user has to remember the exact hue they used on a previous note or there has to be a clunky mechanisms which remembers them. –  user43091 Feb 15 at 19:45
add comment

I think the suggestions from Mervin Johnsingh and alexeypegov would work.

But keep in mind that some users may not be able to differentiate the colors. So maybe you could couple the color up to categories?

So users could define their categories and (optionally) associate a color with a category. If a note is categorized, it automatically gets the corresponding color.

So instead of (just an example!)

Select color: [colored blue], [colored red], [colored green]

you could have

Select category: Work [colored blue], To-Do [colored red], Quotes [colored green]

share|improve this answer
add comment

I think @alexeypegov solution is the best if you have a limited choice of colors (Which I would also suggest)

Although the google option is nice, it requires you to click an icon to expose the color options and then select the option.

Although @alexeypegov solution 'might' seem more cluttered it's the most efficient!

I was thinking also on something like this (you could change the position of the colors) but it is not as self explained as @alexepegov, just fancier

enter image description here

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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