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.

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.

share|improve this question
1  
What are the usecases? How, when and why does your users interact with these tags? –  katDNA Dec 7 '11 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 '11 at 13:06
    
another screenshot: i.imgur.com/mX9Ey.png –  Chobeat Dec 7 '11 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

share|improve this answer
    
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 '11 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 '11 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.

share|improve this answer
    
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 '11 at 13:57

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.