Visual cue for Type ahead input text fields?

1 Apr 2009 - 2:11pm
5 years ago
12 replies
1539 reads
smkarmarkar
2009

I'm working on a web app which recently got type ahead functionality
added for the input text fields. There would be still some pages
where the type ahead functionality either won't be implemented or
would be turned off.

Here's what I'm trying to understand:

1) Is there any visual cue that can be added to input text fields
which has type ahead functionality implemented? If yes
what it could be?

2) Would it be confusing for the user to have 2 types of input text
boxes without any visual cue when only one of them showing type ahead
suggestions?

3) Would there be any possible implications from the accessibility
point of view?

Thanks in advance,
Sandeep Karmarkar

Comments

2 Apr 2009 - 2:21am
Yohan Creemers
2008

Hi Sandeep,

In many cases the suggestions only appear after the user types 2 or 3
characters. In those cases a visual cue seems very useful. In a recent
project, I added a visual cue to the textboxes with type ahead (or auto
complete) functionality.

The visual cue I added is not intuitive, but I expect that people will make
sense of it after a short period. It has not been tested yet.

For sketches see:
http://www.ylab.nl/portfolio/kiesbeter

In answer to your other question:
2. I don't think it's confusing to have two type of text boxes. In some
cases auto complete functionality makes sense (eg: search field), in other
cases it doesn't (eg: password phrase, birthday). But, i.m.o., it would be
confusing if there were similar fields (eg: two search boxes) without any
visual cue when only one of them offers type ahead suggestions.

3. In many cases the list of suggestions is retrieved from a server using
Ajax. Thus content is added, after the page has finished loading. As far as
I know, screen readers and similar devices can't handle this dynamic
content. People relying on these devices don't benefit from the type ahead
functionality, but they can still use the text box in the non-enhanced way.

Best regards,
Yohan.

2 Apr 2009 - 2:12am
Shankar, Ravi
2004

-----Original Message-----
From: discuss-bounces at lists.interactiondesigners.com [mailto:discuss-bounces at lists.interactiondesigners.com] On Behalf Of Sandeep Karmarkar
Sent: Wednesday, April 01, 2009 5:42 PM
To: discuss at ixda.org
Subject: [IxDA Discuss] Visual cue for Type ahead input text fields?

I'm working on a web app which recently got type ahead functionality
added for the input text fields. There would be still some pages
where the type ahead functionality either won't be implemented or
would be turned off.

Here's what I'm trying to understand:

1) Is there any visual cue that can be added to input text fields
which has type ahead functionality implemented? If yes
what it could be?
------------
You can use tool tip method to give Visual Cue
------------

2) Would it be confusing for the user to have 2 types of input text
boxes without any visual cue when only one of them showing type ahead
suggestions?
------------
Yes! It will confuse the user if you have visual cue for input text and not having for another. Please follow consistency and also will avoid accessibility issues.
------------
3) Would there be any possible implications from the accessibility
point of view?

Thanks in advance,
Sandeep Karmarkar

________________________________________________________________
Welcome to the Interaction Design Association (IxDA)!
To post to this list ....... discuss at ixda.org
Unsubscribe ................ http://www.ixda.org/unsubscribe
List Guidelines ............ http://www.ixda.org/guidelines
List Help .................. http://www.ixda.org/help

2 Apr 2009 - 4:33am
smkarmarkar
2009

Hi Yohan,

Thanks for your response!

In my case, we might have situation where only 1 of the two search boxes
might have the type ahead implemented. Knowing AJAX the server trip would
take 2-3 sec, we are exploring to have some visual cue for the user so that
he knows what to expect.

I looked at your implementation and it looks interesting. Any thoughts on
how you are planning to implement this?

Sandeep Karmarkar
Visit my Portfolio @ http://www.sandykarmarkar.com
Visit my sketches and landscapes @
http://www.sandykarmarkar.com/portfolio/other6.htm

On Thu, Apr 2, 2009 at 12:51 PM, Yohan Creemers | Ylab <yohan at ylab.nl>wrote:

> Hi Sandeep,
>
> In many cases the suggestions only appear after the user types 2 or 3
> characters. In those cases a visual cue seems very useful. In a recent
> project, I added a visual cue to the textboxes with type ahead (or auto
> complete) functionality.
>
> The visual cue I added is not intuitive, but I expect that people will make
> sense of it after a short period. It has not been tested yet.
>
> For sketches see:
> http://www.ylab.nl/portfolio/kiesbeter
>
>
> In answer to your other question:
> 2. I don't think it's confusing to have two type of text boxes. In some
> cases auto complete functionality makes sense (eg: search field), in other
> cases it doesn't (eg: password phrase, birthday). But, i.m.o., it would be
> confusing if there were similar fields (eg: two search boxes) without any
> visual cue when only one of them offers type ahead suggestions.
>
> 3. In many cases the list of suggestions is retrieved from a server using
> Ajax. Thus content is added, after the page has finished loading. As far as
> I know, screen readers and similar devices can't handle this dynamic
> content. People relying on these devices don't benefit from the type ahead
> functionality, but they can still use the text box in the non-enhanced way.
>
> Best regards,
> Yohan.
>
>
>

2 Apr 2009 - 8:18am
DampeS8N
2008

It isn't that the screen reader won't be able to see the newly added
content. It is that the screen reader will be busy helping the user
know what they are typing in the text box, not going out and reading
the new stuff that popped in under the box.

Imagine how confusing it would be if your reader just kept reading
the page when you asked to type into a box?

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=40937

2 Apr 2009 - 8:53am
Yohan Creemers
2008

Sandeep Karmarkar wrote:
Any thoughts on [...] the technical HTML + CSS implementation as I
have never seen an image sort of object aligned this way for an input text
field.

The first solution that comes to my mind is wrapping the textbox in a span
element and adding a background image to that element.

For a code sketch see:
www.ylab.nl/lab/autocomplete-cue.html

- Yohan.

2 Apr 2009 - 9:52am
Fredrik Matheson
2005

Adding a visual cue is a good idea here.
1. Style the type-ahead text box differently (larger, border, background
etc) so the users don't confuse the interactive one with the regular one
2. Show the user that something is happening while they type, e.g. a
rotating loading/activity icon that demonstrates that the system is working
in parallel with your text entry.

2 Apr 2009 - 10:47am
Anonymous

I'm reminded of the built-in typeahead mechanism in Drupal - by
default, it has a greyed-out spinner, which then turns blue and
starts spinning while it's getting suggestions for the typeahead. I
think that works really well both to show that it's a typeahead
before the user starts typing, and that it's actually working. I
believe it's implemented with a background-image in CSS, although
I'd have to check up on that.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=40937

2 Apr 2009 - 11:06am
Fredrik Matheson
2005

That sounds like a great cue. Could you share a link to a screenshot?

2 Apr 2009 - 11:19am
Anonymous

Drupal has a live version on http://api.drupal.org/, on the left side.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=40937

2 Apr 2009 - 12:16pm
Jim Harrison
2009

Hi Sandeep,

The first thing that comes to mind is to create a class or div for
the unique text box(s) and then style a border with a different
color.
The user Ids the text box as unique based upon the bright color; I
imagine gold. (Keep in mind color blindness issues)
If you want to get fancy use a mouseover to increase the border
width.
Its a simple gesture that will become accepted over use(time).

Good luck,
Jim

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=40937

3 Apr 2009 - 4:11am
Adrian Simmons
2009

I'd listen to Mark, what drupal uses is usually referred to as a
throbber, specifically an 'ajax throbber' and if you google that
you'll find plenty of info.

You really need to do two things for these text fields, firstly let
the user know they're different and secondly let them know something
is happening when type-ahead starts working. The latter is where an
animated gif can help.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=40937

6 Apr 2009 - 6:33am
smkarmarkar
2009

Thank you everyone!

Ajax throbber sounds like a good idea. I have already figured out the
animated GIF that we want to use so adding the code shouldn't be an
issue(thanks to google).

Again thank you for your comments. Appreciate it!

- Sandeep

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=40937

Syndicate content Get the feed