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:

(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)

@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.
–
BobFeb 16 '14 at 3:13

5 Answers
5

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

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

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.

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 '14 at 19:21

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:

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.
–
user43091Feb 15 '14 at 19:45