Improving User Experience, One Field at a Time – Again

Most of the systems we develop here are CURTIS Digital now have a input pattern around Twitter handle inputs, e.g., @quotientaustin or @social_quotient . This is commonly found in a user profile management screen, a content management system CMS form, or integrated systems where several Twitter handles are parsed for data to present in another context. There are several common ways to approach this request to the user.

1. 1. Text input box with each handle separated by a comma
   2. Text area with each item on a new row
   3. A repeating text input – so users can keep adding another
   4. Tag input

We find that users often have issues with these input criteria – similar to the input of http:// found in our previous post , users are unsure if they need to enter the @ sign or just the name as they copy from other sources. It becomes a bit of a hassle to have them correct themselves while trying to get this simple task completed. Each of the above input patterns has its own set of issues.

1.Visual cues that imply separation between values are not clear (example).

2.This takes up a lot of space and is not well targeted for “a few”

3.Repeating input patterns are so… Web 2.0

4.People can feel weird about hitting [enter] on the Internet; also, readability issues for long lists”] on the internet. Also noteworthy – with a lot of values it can be difficult/impossible to read

We like the tag input pattern, as seen in a lot of social media sites and systems. It offers clear delineation between values, takes up very little space, and unlike many other patterns it offers a one-click method for removing something from the list.

So, to help users, we moved forward with tag inputs as the pattern but then found that people sometimes entered @ and sometimes did not. To resolve this problem, we had a couple options: take it server side and just clean up the mess or find a way to do it client-side so users could be a part of the decisions we were making with their inputs. Since we feel that users need to be part of the data process and see what transformations we are making, we created a small script to run against the inputs, looking for the @ sign (or rather a missing @ sign) on the handle, and then add it to the input. We have found that this helps keep users fingers on the keyboard, leading to fewer re-entries and fewer failed form submissions.

As with most user experience UX recommendations, it is important to make sure that the implementation reduces end-user friction and gets them closer to the goals you have for them.

Check the demo and code- Enjoy!