Chrome Auto Fill

#1

I am mocking up a checkout flow (for the Daily UI Challenge: Daily UI Design Challenge )

Mobile Checkout Prototype

I noticed something odd though when testing this in google chrome. The chrome auto fill option pops up for some of the fields, but they use the wrong fields and not all of the fields and drop downs.

Pro: Looks like I could test prototypes with the autofill capability
Con: I can’t get the right fields to use the right autofill

Has anyone else successfully setup their prototype with text fields that behave as they should with the chrome auto fill capability?

#2

Huh- interesting topic and use case! Google Chrome’s autofill has definitely played a pivotal role in my day-to-day online shopping, but I haven’t really seen any mention of coopting that in an Axure prototype. Overall, the functionality of autofill detection is unique to each individual browser. From my web search, it looks like Google Chrome looks for a range of components parts including the specific name IDs for widgets and the total number of successive input fields. Here are a couple relevant articles:

https://cloudfour.com/thinks/autofill-what-web-devs-should-know-but-dont/

After testing this more in your file, it’s also looking like the z-index of each named label and corresponding input field would also matter. So, organizing them more linearly in the Widget Manager Pane (of RP 7) can help–here’s a screenshot:

Here’s an edited version of your v7 file as well (which seems to work so long as there’s data saved in Chrome Autofill to begin with):

Check Out Form_Edit.rp (177 KB)

Does that file and setup work on your end? It does appear possible to tweak the project setup and get Chrome to detect the fields of an Axure prototype. To get this done more precisely, however, may require more programmatic intervention outside of the native setup of an Axure RP project. I hope this is helpful, though!
ChromeAutofillSample.rp (50.3 KB)

#3

Hi there,
I am prototyping an autocomplete for a checkout form.
In my prototype I want to show a list of items when the user starts typing. The google chrome autocomplete gets in the way and hover my list when it’s triggered by the user typing.
The first image shows what it should happen. The second one, shows what actually happens the second time you interact with the input field.
Is there anyway to block chrome autocomplete?
Thanks!

How it should be

How it should be.png1138×522 70.9 KB

How it is

your address 3.png712×650 27.3 KB

#4

Hi Saratraverz!

This is actually a setting on the mobile device itself, rather than an Axure-level setting. The text field widget turns into a real HTML form element in the browser, so if you’re using a Text Field widget, for example, the device recognizes it as an element that takes text input.

For iOS, you can turn off predictive text by navigating to “Settings > General > Keyboards”. For Android, it seems like there are a few different ways to turn off predictive text, depending on the Android device you are using:

Disturbing browser elements when using a text field in my drop down list design
#5

Did you ever find a solution for this? Opening the prototype in an Incognito window helps but when I user test I don’t want the user’s browser making my Axure search component confusing by also autofilling from their browser. I see a proposed solution for mobile below but nothing for desktop.