Search Auto-Complete Targets not working on iPhone

[neoinsight]

@rubinahaddad @pjackson28 Multiple issues below for iPhone Users and Search in Usability Sessions

1. In usability tests with iPhone users, people were not able to use the auto-complete suggestions for search. When they tried to touch them, the menu disappeared.

See video clip for how it works, or try it yourself on an iPhone. Touch an autocomplete, menu will close.

http://www.screencast.com/t/jFSj3YcXnt5M

1. Auto-complete targets are too small to touch.

1. Autocomplete targets appear under the keyboard, over the keyboard and sometimes, as in the screenshot below, OVER the field where she is typing. Said the participant, "This is so frustrating!"

Suggestions UNDER the keyboard

Suggestions OVER the field

[pjackson28]

@neoinsight What iOS version? I just tried on an iOS7 device and the auto-complete doesn't show up.

[neoinsight]

@pjackson28 Sorry, we didn't ask participants what version they are using. Every participant on an iPhone so far has gotten the autocomplete suggestions. I get them on mine too - latest iOS - vs 7.1.1.

[neoinsight]

If it's important, I can email them and tell them where to find the version number and let us know.

[pjackson28]

I can't get the search auto complete to display on any of the iOS devices I tried. Were you testing on the main page of Canada.ca? What browser were you using for testing (I was using iOS Safari).

[neoinsight]

Ok, that's really strange. Yes, people started from canada.ca home page, all used native safari. We're talking about the mobile version only, on iPhones, and the search field that is displayed above the menu after clicking the menu icon. Well, I guess that's clear from the photos above. I'll find some more screen shots to add.

[pjackson28]

I've finally been able to reproduce the issue. It looks like it isn't an issue with WET's auto-complete, as it doesn't seem to be used in this case. It looks like Google's search autocomplete is being used in this case based upon the following JS I found in the page (also because the autocomplete in this case looks different in every browser in comparison to WET's autocomplete):

<script type="text/javascript"> 
var autoCompletionOptions = { 'validLanguages' : 'en' };
google.load( 'search', '1');
google.setOnLoadCallback( function() {google.search.CustomSearchControl.attachAutoCompletionWithOptions( '008724028898028201144:knjjdikrhq0', document.getElementById( 'wb-srch-q' ), 'cse-search-box', autoCompletionOptions );});
google.setOnLoadCallback( function() {
    setTimeout( function(){
        google.search.CustomSearchControl.attachAutoCompletionWithOptions( '008724028898028201144:knjjdikrhq0', document.getElementById( 'wb-srch-q-imprt' ), 'cse-search-box', autoCompletionOptions );
    }, 2000);
});
</script>

This issue should be filed in wet-boew/GCWeb as it is an issue specific to Canada.ca.

@masterbee fyi

[neoinsight]

Terrific - thanks. That might explain why some of the suggestions were so bizarre! Someone typed in 'Ju' and 'Justin Bourque' and 'Just for Laughs' came up as suggestions - sure had me wondering...

In terms of filing it somewhere, am hoping I can leave that to you guys. The best I can do is file usability testing issues here and let you guys handle where and how they should be addressed.

There will be a break of a few weeks before the next set of mobile tests, so hopefully we can test the fixed version then.

[rubinahaddad]

Thanks @neoinsight @pjackson28 ! I logged the same issue in the GCWeb repo, so I'll close this one. https://github.com/wet-boew/GCWeb/issues/718