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.

We developed an invitation widget that autocompletes names based on who the user follows on Twitter. It is also possible to invite anybody, but I feel like this design makes it look like you 'must' choose one of the autocomplete suggestions. How would I elegantly make it obvious that suggestions aren't mandatory?

zero step first step second step DM

share|improve this question
3  
I'd want to test this, I would assume users are fairly familiar with autocomplete controls, they're becoming quite common now that Google uses them. Simple guiding copy like "(you don't have to use our suggestions)" or "You can add anyone" could help though. –  Ben Brocka Feb 4 '12 at 23:47
2  
Is it on purpose that your system suggests "Jason Putorti" before "Jonathan Wegener"? The latter seems more logical to put first. –  houbysoft Feb 5 '12 at 3:55
    
@houbysoft no, it's something we are fixing. (for those who are interested, look up levenshtein distance ) –  cemregr Feb 5 '12 at 5:03
add comment

7 Answers

up vote 18 down vote accepted

Firstly, don't auto-highlight the first option like shown in the screen cap. Then dim down the auto-suggest area when the user is just typing. If they hit the down arrow or hover over the auto-correct area, it will brighten back up to its current state. Some text could be added to give the users some instructions, but I don't think they'd be needed.

share|improve this answer
1  
Not highlighting the first option sounds like the most elegant option here. –  cemregr Feb 5 '12 at 0:03
    
It still won't explain how to deal with autocomplete. When anyone sees suggestions, they immediately assume those are the only allowed options. –  dnbrv Feb 5 '12 at 0:11
9  
I was once faced with a similar issue of how to handle "write-in" responses. We solved it by putting the user entered text as the first "suggestion". We put the user text into quotes to communicate the literalness, and in your scenario we would use a different class of icon in front. You can safely go back to highlighting the first "suggestion" too (since it will be the literal data entry, a safe default if they don't choose one of the other suggestion). –  Erics Feb 5 '12 at 0:22
    
@dnbrv I'm a bit torn on the whole thing after reading Ben's comment above concerning Google. Would be really helpful to test. –  cemregr Feb 5 '12 at 0:24
1  
@Erics that sounds like a good and safe solution, although not the most elegant. I think I will implement that. –  cemregr Feb 5 '12 at 0:25
show 2 more comments

The problem isn't with your autocomplete control, it's with your form.

Check out how Trello does this.

1. Before you begin, the input field explains what you can enter

Note that the form is titled "Add Members" and allows you to input multiple email addresses and select multiple people in the list.

enter image description here

2. When you begin typing, "searching..." appears to indicate that the system is looking for something

The "invite" button is dimmed because there's no successful match.

Trello invite step 2

3. When the system matches results with your current input, it displays them in a list

Because you're still typing and haven't either selected someone by clicking on them or typed out their name in full, the "invite" button is still disabled.

Trello invite step 3

4. Once you do select someone, the input field is disabled and the invite button is brightly lit.

Note that the input field doesn't update based on your selection.

Trello invite step 4

5. Typing an email address in the field works too.

If the system notices you entered a valid email address, it'll let you click the "invite" button too.

Trello invite step 5


In other words:

  • Combine your two input fields
  • Use copy to explain what input is accepted
  • Update the user while they type to show them what's going on
  • Use clear disabled/enabled styles for your buttons to indicate when the state changes
  • Allow both email and username to be entered into the same form
share|improve this answer
    
Thanks for a comprehensive answer! I can't combine the two fields, since I need both the name and the email of the person. We also don't need a wait indicator since all this data is already available when the page loads. I'll think about a clearer 'valid' state for the fields. –  cemregr Feb 5 '12 at 0:05
    
You could always ask for the name in a step after clicking the invite button if you entered an email address. –  Rahul Feb 5 '12 at 0:31
    
Interesting idea. Don't you think it feels a bit backwards to provide an email first, then the name? –  cemregr Feb 5 '12 at 0:37
1  
Trello's form is adaptive to how the user prefers to input the data. So it may be backwards, but supporting whatever they fill in with the correct followup rather than telling them that it's invalid and they must conform to your design is a more human UI. It's also a lot harder to implement :-) –  Rahul Feb 5 '12 at 0:39
    
It's not hard to implement accepting emails in that field, however I'm not convinced that providing a list of emails first, clicking OK, then facing another set of inputs to write names for these emails is an optimal experience. Isn't [name+email] * 5 a more natural flow than [email * 5] then [name * 5] ? –  cemregr Feb 5 '12 at 1:24
show 1 more comment

Because you have a bunch of fields in rows, each doing the same thing (from what I can see from your screen grabs), you will want to handle this with an introductory message. Something along the lines of:

All fields below are optional. You may skip this step by taking the [add your action here]

Another takeaway for you, it wouldn’t be clear to me that the second text field in each row is for email addresses, and the first for searching a name/Twitter ID. I think you will likely need some labeling to make this crystal.

Don’t forget to test with some users once you have made your additions. Very important.

share|improve this answer
1  
Furthermore, if there is no limit to the amount of Twitter IDs you want to search on and add, you could add a button that allows the user to add additional batches of 5? Once button is activated, further 5 fields are added to the bottom. –  DigiKev Feb 4 '12 at 22:35
    
The placeholders were for some reason missing from the screenshot, I updated them. –  cemregr Feb 5 '12 at 0:12
add comment

You've got a few issues with microcopy here. First of all, as Kevin has mentioned, the text-entry fields aren't labeled. Secondly, it's unclear whether all 5 names must be filled in order to proceed (though it could be in the part of the screen you didn't share). Thirdly, your actual question can be solved with a line similar to "Choose a Twitter contact or enter a name and email for anyone else" placed next "Who will join you?".

However, I don't understand how autocomplete adds value to your users in this interaction. I suppose you intend to send invites as direct messages on Twitter but that requires the other person to follow your user and to check their DMs (usage habits here are different from email). Even if you still require an email address to be entered when inviting a Twitter contact, autocomplete neither saves time nor helps validate user-entered data because your user and the invitee may use names that are different than they are on Twitter (e.g "James Patrick Gibson" may be known as "JP Gibson" or "Jim Gibson"). Moreover, the suggestions are unhelpful because the system splits the query into separate characters & sorts the results by alphabet not by relevancy (putting "Jason" as the first result on the query "Jon" is unacceptable).

share|improve this answer
    
You are right, for some reason the screenshots don't have placeholders. The first one has ("Name or Twitter handle") and the second one has ("Email") as placeholders. You're right, we intend to DM if it's available. I don't think people using different names is a realistic concern, but you are right that our sorting is off. –  cemregr Feb 5 '12 at 0:07
    
You're forcing users into your conventions (names only as they appear on Twitter), which isn't good UX. –  dnbrv Feb 5 '12 at 0:14
    
I updated the question with how the DM/email interaction works, if that clarifies. Any suggestions for the 'alternative name' problem? (Considering we'd very much like to know the twitter handle of the person.) –  cemregr Feb 5 '12 at 0:29
add comment

You could add the exact contents (in quotes) of the field as another line below the autocomplete options. Add a scrollbar if necessary, but the bottom (exact contents of the field) should always be shown. This gives an affordance that a custom entry is allowable.

See the Gmail "label as" autocomplete as an example.

enter image description here

share|improve this answer
    
I'd do exactly this, but I think it'd be more clear if the option was the first and looked different (as if it was in a different category of suggestions). –  mbillard Feb 29 '12 at 22:02
add comment

Similar to Mike Eng's answer, but I would put the (create new) at the top.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

This is completely unambiguous.

share|improve this answer
add comment

Great suggestions so far but personally I would recommend disabling the first highlighted field (as stated before) and also cutting off the autocomplete. So like say they type 3 letters, present them a certain amount of choices up to a certain point or length and then cut off the autocomplete.

share|improve this answer
    
What do you mean by cutting off the autocomplete? –  Rahul Feb 6 '12 at 1:47
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.