How eye tracking developed our new forms

With a huge update for Jadu Continuum XFP well underway, our partner agency Spacecraft Digital held a day of user testing on our latest Form Builder prototype using a Tobii eye tracker. Who better to put your work to the test than your own colleagues?

Why did we do this?

The main reason we carried out this eye tracking session was to address any issues early on, and to make any tweaks we felt necessary to improve the user experience before an initial version is released to our customers. Each participant was asked to complete up to three user journeys through the site with a number of different form requirements. Ultimately our goal was to gain insight into how easy these tasks were to complete and if the design supported the user journey, or if improvements needed to be made.

The scenarios presented to the participants were as follows:

  • Task 1 - Create a new form and show the instructions page by adding text
  • Task 2 - Create a Page Template and add it as a page to the form
  • Task 3 - Create another Page Template and add it as a branched page to the page added previously

What did we find?

Task 1 - Create a new form and show the instructions page by adding text

This was chosen as the first task because it was deemed the simplest to complete and would ease participants into the subsequent tasks. All participants created a new form with ease. For the second part of this task, 4 out of 5 users did not notice the ‘Show Instructions Page’ (1) switch as their gaze was focused more towards the ‘Actions’ and ‘Add Page Template’ (4) buttons located on the top left and right hand side. Recordings of the sessions show that these participants passively looked at the ‘Show Instructions Page’ (1) text but did not take it into consideration of being a call-to-action or relevant to the task at hand. The participants who had previous experience with using XFP selected the ‘Add Page Template’ (4) to add an instructions page as it seemed like the logical user journey, containing the same keywords ‘add’ and ‘page’.

Spacecraft’s recommendation:

We would suggest for the ‘Show Instructions Page’ element to be placed within the ‘Actions’ drop down menu, as it might be a more suitable location for users to find it. Alternatively, make the ‘Show Instructions Page’ (1) area more prominent by sharing a similar appearance to other call-to-actions throughout the site.

XFP image 1

Task 2: Create a Page Template and add it as a page to the form

This task proved to be the most difficult for every participant, and would not have been completed without a few hints along the way. Although they had chosen the correct button – ‘Add Page Template’, (4) users were left confused as they were first prompted to choose an ‘Existing Page Template’. When selecting the drop down action, users expected to see a list of existing templates and were not initially aware that it functioned as a dynamic search bar.

Users spent a lot of time on the ‘Add Page Template’ (4) window as they were trying to figure out how to ‘Create A New Template’ from this option. The text ‘Alternatively, leave empty to...’ had not been noticed as users scanned the window looking for more prominent call-to-actions. The ‘Add Page Template’ (4) button served a double function; it could be used to create a new template or add the existing template selected which is why it had not been initially selected. At this point, participants had to be given hints and guided towards simply selecting the ‘Add Page Template’ button.

Spacecraft’s recommendation:

For this issue in particular, it would be advisable to separate the two Page Template actions “Create” and “Add” by providing their own call-to-actions. It should also be visually separated in the window so that users are aware of the separation right away. Another method could be to separate the ‘Add Page Template’ button on the ‘Pages’ page into ‘Create Template’ and ‘Add Template’ buttons where details of each template can be added such as the ‘Page Template Title’ (6).

XFP Blog 2

Task 3: Create another Page Template and add it as a branched page to the page added previously

Due to the participants’ experience with the previous task, the user journeys had shown a decrease in the occurrence of issues as it involved a very similar user journey found in task 2.

The only issue which had occurred in this task was with regards to branching the template, as the dragging function was not very smooth and proved to be difficult to manoeuvre (3). Users hovered the new template over the template they wanted to branch from, when actually they had to place it in the small gap underneath the desired template, which was not clear.

In our next blog, our XFP team will be sharing the changes they made based on the eye tracking as we continue to develop and perfect the new Jadu XFP form builder.

Share this post


The official Jadu Blog (a peek inside). The musings and magic of the Jadu team and log of new web apps, customer super hero stories and mobile web marvels.

Recent posts