16

Is there a good graphical sign which tells the user that a particular field on the page is autocomplete enabled?

For instance, the field name says "Document author". When you start typing in that box, an ajax post-back is executed and a list of persons with similar names is provided. However, when the user enters that field , there is no sign that the box is somewhat special (even more - that he/she will not be able to enter a random name, but will have to pick from the list.)

So, I'm looking for a graphical icon that I could put in the background of the input box. I thought of a hellipsis (looks strange), downward arrow (confusing, makes user think it is a drop-down box), checkmark (makes no sense).

Improve this question
0

4 Answers 4

Reset to default
6

Show a downward arrow in the box that implies it's a drop-down. Then, perhaps, supplement it with some small help text. That's how Atlassian JIRA solves the problem and it works quite well:

enter image description here

Improve this answer
4
  • What happens if the user clicks on the arrow?
    – Jordão
    Feb 5, 2013 at 11:51
  • pressing down arrow will show list of suggested inputs (based on previous usage)
    – Aditya
    Aug 5, 2013 at 3:04
  • Depending on your platform, there may already be a convention for this. E.g. on many platforms you would use a combo box for this. I don't think you need to worry too much about the user name being non-random. Usually, just from context, it will be clear that the user has to exist, so you would just let the user type what they want, and if it is wrong, show an error message when the page is saved/submitted.
    – uliwitness
    Apr 3, 2017 at 13:29
  • @Jordão If there are finite choices for the drop-down input, you can show the full list when the arrow is clicked.
    – Evan
    Nov 9, 2018 at 19:26
5

It's best if the autocompletion alternatives shows up very quickly, then you don't need an icon. The user will not recongnise the icon for autocompletion anyway.

If there is no matches you could change the text to red color and maybe show a message at the side (or on the drop down list, where the alternatives should be shown). When the user deletes a character you have to re-validate this again and maybe remove the message.

Improve this answer
5

I would just use a spinning circle gif that appears when executing the postback. It doesn't necessarily indicate "autocomplete loading" but it is used often enough for background communications that the user will expect something to appear as a result of their input.

Improve this answer
1
  • I like your answer because it's the missing piece from Jonas's answer - if you have an instant on-screen reaction, you don't necessarily need to wait for the autocomplete results to start loading. Not everybody will have an infrastructure like Google's from day 1.
    – Jonathan
    Sep 30, 2011 at 23:09
2

It might also be useful to use placeholder text (HTML5) or an input value that mentions something about the auto-completion (placeholder text is light gray and italic and doesn't disappear until the user starts typing, whereas when you set a value, in my experience it will either hide immediately when the text cursor is in box or in older or sometimes mobile browsers, it may force a user to delete that text before filling it in - so use with caution).

That said, browsers and search engines have been doing this for years without needing to nudge users, so as long as the interaction happens quickly, you should be in the clear!

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.