Prototyping predictive search with Justinmind in just 4 simple steps
The first thing you’ll need to do is download Justinmind (our free 30-day trial comes pre-packed with all our PRO features). Once you’re all set up with Justinmind open, follow the steps below.
Prototyping predictive search: creating a Data Master
In a new web prototype, create a Data Master. A Data Master is a set of data records that allows you to build data directly into your prototypes. We’ll create one so that we can populate the predictive search fields.
To create a Data Master, go to the Data Masters tab (on the right of the canvas) and click the ‘+’ icon. In the dialog that appears, give your Data Master a name and create three Data Master Fields: First name, Last name and Sort Name.
Note that you can customize your Data Master’s fields. For instance, use a Text field type to display a text string (single or multi-line), password, number, email or URL, or a Category field type to display a value from a range of predefined values.
Back on the canvas, double click on your Data Master. Go to the “View and edit records” tab and populate the fields with some sample first, last and sort names. These will be your Data Master Records. You can also use pre-existing data and import it into your Data Master to save you time — learn more here.
And voilà! You’ve created a Data Master, and completed the first step of this tutorial.
Prototyping predictive search: adding a Data List
The next step in the prototyping process is to create a Data List. A Data List displays Data Master Records in the form of a list.
To create one for your predictive search prototype, go to the Widget Library palette (on the left of the canvas). Navigate to the Dynamic content section and click the Data List widget.
In the dialog that appears, give your Data List a name. Then, select your Data Master and just the Sort Name Field below and shift them to the window on the right.
Then, simply place the Data List on the canvas. As you can see from the image above, the Data List will be made up of just three rows (header, sample and additional) while on the canvas, regardless of how many Data Master Records you have created. This is normal. Your actual data won’t be displayed in the canvas, but it you can see it if you click the “Simulate” button in the top right-hand corner of the Justinmind editor.
Prototyping predictive search: creating your search bar
Next, go back to the Widget Library palette and drag an Input Text Field (from the Basic section) to the canvas. Place it above the Data List. This will be the search bar where the user can search for terms.
Customize your search bar as preferred. Make sure you take a look at all of the options in our Properties palette, to change styles such as color, contrast and transparency, fonts, borders and shadows.
You can also add a placeholder to your Input Text Field to give users a visual cue about what to search for. And if you need some inspiration, check out our tips on prototyping search bars and boxes here.
Prototyping predictive search: making your prototype interactive
Now comes the fun part: making your predictive search come alive!
If you’re new to Justinmind, welcome to the wonderful world of interactive prototyping. Our Events system is one of a kind, allowing you to create fully-functional screens and connect them together as with a real-life website or mobile app.
With your Input Text Field selected, head to the Events palette (below the canvas). In the dialog that appears, select “On Keyboard (On Key Up)” from the first drop down. This is your event trigger.
From the second dropdown (ignore the input field in between the two dropdowns), select “Set Value”. In the canvas below, select the Data List as the element that will display the value.
Below this, select “Calculate” and then click the “Add Expression” link. The Expression builder will then appear. Drag the “Filter” function to the term in the conditional expression, followed by the Data Master. Hint: you’ll find the Data Master in the Data Masters tab.
Drag the “Sort Name” Field from the Data Master to the next term. Next, drag the “Has” function and finally, the Input Text Field to the last term. Click “OK”.
And that’s it! See how simple that was? To take a look at what you’ve made, click “Simulate”. Start typing a name in the search bar (one that appears in your Data Master!). Notice how the search filters down the list so that only the names that contain those characters remain visible.
How to design an awesome predictive search — the takeaway
Good search helps produce great user experiences. Predictive search has become a standard in web design, saving users’ time and avoiding repeated searches.
With Justinmind, designing predictive search couldn’t be easier. In just four simple steps, you can create a fully-functional predict search feature for your web prototypes. So if you haven’t already, download Justinmind now and follow our steps towards improving the design and performance of your predictive search.