Designing A Perfect Responsive Configurator
By Smashing Magazine
Introduction
As the presence of configurators is growing, so are theories of designing them. I found a comprehensive article online how to design a responsive configurator, which I used to develop my requirement list. This literature study will elaborate the most important parts of the article.
The configure journey
"As designers, we might try to make our configurators advanced and sophisticated, but too often we overwhelm customers with too many non-trivial options.", Smashing Magazine begins. The magazine often writes about digital innovation and this time dedicated an article to configurators. According to Smashing magazine, configurators exists for two reasons: To inspire customers to explore a product, or to help configure an existing to match their needs. When the first scenario is in play, Smashing Magazine says that customers, at first hand, might not be interested, but be inspired by all the possibilities to personalise the product. Customers are amazed of which products can be personalised these days. From salads to muzzles, everything can be representation of yourself.
Purpose
In order to convince customers, Smashing Magazine tells to strong highlight certain product features. As an example they mention the configurator of Harley Davidson, which displays a drawn motor frame, but highlight the possible wheels to create emphasis. Another option to motivate customers is to use presets. Presets help customers to identify the possibilities beforehand. In the end, it takes a lot effort within a complex system to configure the best outcome.
The configurator's purpose is to inspire, his job is to guide customers to make the final step: making a purchase. Because of this, Smashing Magazine stated a couple characteristics every configurator should meet. Smashing, among other things, calls for quickly responding to users choices, guidance by design and commitment to make sales.
Design for mobile first
Everybody has his own behaviour on- and offline. When it comes to configurators, we as users, like to explore a configurable product. We tend to do this in multiple sessions. The purchase of car is a very expensive and serious task with consequences. Smashing states that users are likely to come back for weeks, not months. They want to discover a product by watching videos, looking at photos and reading reviews. They simply need time.
While customers inform themselves about their product, they have fun at the same time. Coming back and trying different features might question their earlier choices, but in the ends, convinces them to take action. All the moments users return to the website reconfigure or add new features, are most likely to be done during 'in betweens'. In betweens, according to Smashing Magazine, happen during commutes. Whenever users are present at a boring meeting, have to wait in queue or before heading to bed, they are likely to reach out to the configurator.
Why Smashing emphasise this term is because they want to determine that users do use their smartphone to interact with a configurator. Users won't get their laptops out when waiting in queue, but smartphone appear at every possible moment. This is ideal moment to play around with the first steps of the configurator. Surely, users won't purchase expensive products on a mobile device, but coming back to see all the possibilities is a very important part of the process.
Approach
As I said, configuring a product is a serious task which cost a lot cognitive load. Therefore, the design of configurator takes time and effort. As Smashing showed some different configurators, there were clearly a lot of similarities. A natural configurator is quite tall and wide, which means it is best to take the whole canvas. Due to many different components, a configurator usually lives on a stand alone page.
At first thoughts, all the components would contribute to higher conversion, Smashing continues. But nothing is further for truth, through interviews Smashing found out that the components do track attention, but do not contribute to higher conversions. This only occurs when the configurator is well designed, the possible options are intuitive framed and the interface provides enough guidance.
Configuring
Whenever users start with configuring, Smashing states that the most configurators offer a selection of preset products. Presets help users to identify possible outcomes for their own future product. However, presets also can work contradictory, it simply takes away the room to play. If all options are already are determined, what do users need to configure?
On the other hand, systems can use help as well. As there are configurators with dozens of outcomes, Smashing suggests to begin with simple questions. "When the number of options is slightly more overwhelming or the choices are slightly more nuanced, reducing the scope of options can immensely reduce the complexity of the configuration." By asking a few user preferences, the configuration become instantly easier.
It is up to the designer to choose how the implementation of the configuration will be. Half empty or half full, is the big questions: Do you want your user to have room to play around, or do you want to guide users by asking their preferences beforehand to limit the scope?
Product Visual
As not every part of content is as important, it is necessary to determine how you design the configurator interface. Smashing laughable emphasise how often users want to direct manipulate the product they are configuring. Direct manipulation means users wants to click on the part of the product they want to configure. In addition, Smashing mention the enormous number of users who keep clicking on the zoom button. Users particularly want to see detailed parts of the product, if they simply not able to do so, they start switching from angle and zoom in and out. If the product is shown well enough: centred and the possibility to see details, this behaviour did not appeared. With this information in mind, Smashing initiates to always display the configured product in every occasion. (e.g. Helmade helmets)
The ideal resolution of the product, Smashing continues, should be 65% to 75 % vertical space for narrow screens and 45% to 50% horizontal space. The other space could excellently be used for the header, title, product details and the customisation options. Conclusively, Smashing say: "The bottom line: The more space you can dedicate to the product’s visual while keeping the customisation controls easy to tap and access, the better."
Additonally
The last things I wanted to take into account were some small notes the articles stated. I made a small bullet list of the notes:
Only use iconography for navigation if it use is in good place
Shows validation the breadcrumbs steps
When there is a next button, also provide a previous button
Last updated
