AI-powered recommendations for user testing and UI design

We continue our series on using AI-powered recommendations in the back office. When we built Algolia Recommend, we initially targeted product recommendations for ecommerce customers. But our Recommend API covers many other use cases. This article is about how to improve the design of your online and back-office forms, as seen on a typical website or Salesforce UI.

Filling out painstakingly complicated online forms

For customers and employees, filling out electronic forms requires patience and attentiveness. In the worst of cases, it also requires large amounts of clicks and screen changes and a leap of imagination to find the appropriate action to take.

Employees are the principal victims of convoluted electronic forms. They interact with forms every day, with many different user interfaces (UI) that change from company to company, system to system, profession to profession, and task to task. If employees are lucky, they have developers and designers to create the UI, but numerous requirements and system constraints hinder good design. Often to the rescue is user testing – but this is costly and takes time, and user actions are not always easy to interpret.

How AI-driven recommendations can improve electronic form UI design

In this article, we imagine Algolia Recommend as automating the user testing and UI design process. It can capture combinations of actions and build models around those combinations. These models, when fed regularly with employee typing and button clicks (captured as analytics data), can very quickly generate such recommendations as:

• What fields to place on the same screen
• Which fields should be adjacent
• How many questions to ask on a single screen
• How to reduce the number of screens and actions for a given task
• Whether to use guided navigation (wizards) or allow free entry 

Two API calls

In a previous article in this series, we discussed how Recommend relies on two APIs:

1. Our Insights API sends events and captures user activity and analytics, such as clicks and conversions. When enough events are sent, Algolia Recommend can build models that feed the second step.
2. Our Recommend API learns about the most frequent combinations. Recommend can help you discover the combinations of actions a user takes while using any user interface, especially a form. 

Note that Recommendations can find more than frequent combinations. Equally powerful is the notion of related entry fields. Combining related fields opens up new possibilities of user design that we don’t discuss in this article. 

Rearrange and reduce the number of fields using recommendations

The general idea

First, you need to capture the fields users tend to modify together. Then, Algolia models that data. The models allow the Recommend engine to compile a complete list of frequently used fields together. With that report, your designers can start to rearrange or remove fields on a single screen or rethink how the fields are distributed across workflows and systems.  

For example, airlines already know how to ask only three questions to start a reservation process: airports, dates, and the number of passengers. Unfortunately, most companies don’t know which three questions to ask, so they splatter 10s of questions on the screen, hoping users will figure out for themselves the appropriate fields. Intranet applications with only 10 fields are a rarity – it’s more like 15 to 30. 

Let’s see how Recommend can simplify form interactivity.

The code to send user activity and system events

Send an insights event that tells the Recommend engine that text fields 1, 3, and 8 were modified together:

convertedObjectIDs(
  'on_save_form',
  'ui_forms_index',
  ["field1_id", "field3_id", "field8_id"]
);

Getting the recommendations

Return fields associated with Field 1 on Screen 1:

$recommendations = $recommendClient->getFrequentlyBoughtTogether([
  [
    'indexName' => 'ui_forms_index',
    'objectID' => 'field1_id',
  ],
]);

Two things to note here:

1. While the name of the API method is frequently bought together, the word “bought” can be thought of as any action that captures two or more objectIDs during any given event. The event we defined here is the “on_save_form”. However, as seen below, we could have used “during the user session”. 
2. This particular code is about tracking only one screen. We’ll extend that to multiple screens next.

What you can learn from these recommendations

Here’s a report that you can generate from this use case:

Target Field	Frequently Edited Together
Field 1	Fields 3, 8, 11
Field 2	Fields 3, 9, 20
Field X	Fields a,b,c, ..

With a little pivoting and cross-referencing, you can discover patterns that suggest different placement of the fields. Maybe you’ll put the frequent field pairings adjacent to each other.

Improve the distribution of fields over multiple screens using recommendations

Continuing with the previous example, let’s add several screens. You’ll need to change the data to reflect the larger context of more than one screen. To do this, you’ll need to make only one change:

• Add the field’s screen information

The code to send user activity and system events 

convertedObjectIDs(
  'on_save_form',
  'ui_forms_index',
  ["screen1.field1_id", "screen2.field1_id", "screen2.field2_id"]
);

Getting the recommendations

Return fields associated with Field 1 on Screen 1:

$recommendations = $recommendClient->getFrequentlyBoughtTogether([
  [
    'indexName' => 'ui_forms_index',
    'objectID' => 'screen1.field1_id',
  ],
]);

What you can learn from these recommendations

As you can see, now we know that field 1 on screen 1 is often combined with modifications on fields 1 and 2 on screen 2. You’ll need to perform that extra parsing to distribute the correct screen classification.

Going further: what’s to stop us from capturing patterns across multiple systems? You’ll just need to specify the “system” in which the field exists. However, the real trick is the event: the “on save” event typically doesn’t work across multiple systems. We could use a known endpoint in a system workflow, but we’ll use time instead.

Streamlining the workflow and efficiency of filling out forms across multiple systems

The solution proposed here is to use a session timeout. 

The code to send user activity and system events

convertedObjectIDs(
  'session_time_out',
  'ui_forms_index',
  ["system1.screen1.field1_id", "system2.screen1.field1_id", "system2.screen2.field2_id"]
);

Getting the recommendations

Return fields associated with Field 1 on Screen 1 of System 1:

$recommendations = $recommendClient->getFrequentlyBoughtTogether([
  [
    'indexName' => 'ui_forms_index',
    'objectID' => 'system1.screen1.field1_id',
  ],
]);

Conclusion

This is only the beginning of how you can use AI-driven recommendations to analyze user activity. I am sure you can think of more. This is the beauty of it all: recommendations are a generic tool that can be adapted easily with imagination and some thoughtfulness.