This is my form:

tag form

I need some help because i have no experience with web interfaces. I would like it to be estethically pleasant without taking too much space (it's rendered several times for every page). I need to keep these colors and the internal html structure. I would like to receive general advices on how to turn it more pleasant and usable for the user.

After that, I have no clue about where to put the confirm/error/loading image. For now it's on the right but it can be anywhere.

Consider that soon I will implement the visualization of an error string that will show up under the form. Advices are appreciated for that too.

  • 1
    What are the usecases? How, when and why does your users interact with these tags?
    – katDNA
    Dec 7, 2011 at 12:53
  • This form is modular and is attached to several kind of objects: discussions, static contents, a brainstorming tool, a Q&A tool, calendar events and so on. You can create a tag, add it to the object or remove a tag. There is a permissions system behind that manage what you can or can't do. If you violate a permission or submit an invalid tag, the tag become red and will be ignored server-side. It's all synced in ajax. That green check is showed when everything is fine, but if there's one or more invalid tag, it will be a red cross. Tags can be clicked to search for tagged elements.
    – Chobeat
    Dec 7, 2011 at 13:06
  • another screenshot: i.imgur.com/mX9Ey.png
    – Chobeat
    Dec 7, 2011 at 14:38

2 Answers 2


OK, first off: If you know what permissions the user has, simply prevent them from violating the permissions. Diable or remove buttons/menus that the user is not allowed to use.

Invalid tags: same-same :) I think the most common solution for the is a kind of autocompletion/suggestion dropdown. This allows you to limit the user to selecting only valid input.

Confirmation should consist of an animation where the valid tag is transformed from a pure text rendering to the tag-look with frames.

By the way - most tagging systems I've encountered has small x-symbols at the end to allow the user to remove them

  • The first point is already ok, as you can see there is no "X" in the screenshot because in this case the user has no remove permission. The second point: this can't be done for a long list of modularity needs and other stuff. That's why i went for the red tags. the third point: that's what happens, like in the tag form we use on this site. fourth point: as i said, it doesn't show up because the user has no permissions in this case.
    – Chobeat
    Dec 7, 2011 at 13:54
  • How intensively does the user work with this interface? Could you validate one tag at a time? So that entering the tag, you submit and cannot do any more until the current tag has been validated? It gives you a delay, but depending on the usecases this can be preferable to having to go back and edit/remove something invalid
    – katDNA
    Dec 7, 2011 at 20:02

Some good points by katDNA:

Why are you allowing users to break the permissions in the first place. Only present them with options they can actually complete.

What causes an invalid tag? (is it related to permissions, whether the user can create a new tag?) why display it if it's invalid?

Would an example like the on stackexchange be a good starting point?

enter image description here

If the user can only assign existing tags then display these existing tags (if there aren't too many). Or use the autocomplete if there are a large number?

I think you are on the right track the situation just needs more definition: consider types of users and the functionality available to them. Only provide the users with the required options.

  • as i said in the other answer, i have the autocomplete but i cannot limit it to the valid entries for a long series of reasons.
    – Chobeat
    Dec 7, 2011 at 13:57

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.