In this blog post, we’d like to introduce you to the new UI updates available in KBMax version 3.3. In future blog posts, we’ll cover the other enhancements: the enhanced Snap programming language and back-end infrastructure, as well as the new features in our 3D scenes.
So, what’s new with our User Interface?
Our New Skins Feature
KBMax CPQ Cloud is no stranger to modern web design. Since the beginning, our user interface has been based on Responsive Design, which lets you create one design for both desktop and mobile screens. In this release, we’ve taken our commitment to deliver the best possible user experience even deeper: we’ve implemented Material Design.
What is Material Design? In a nutshell, Material Design is a new standard for presenting data that makes it easier to use. From mobile devices to touch screens, Material Design gets you the information you need, and then gets out of the way.
Starting now, our customers have the choice to remain in our “classic” skin, or change to the new material design. All the features listed here work in both skins. And you can always change from one to the other and back.
Our New UI Layout Controls
Previously, the flow of your configurator fields was simple: fields were always read from the top to the bottom, one field at a time, in a tall strip. This is ideal for smaller screens and simple questions, but you asked for more: the ability to build complex forms. You now have a broad set of tools to create your user interface.
Thanks to the new GridRow and GridColumn controls, you can now display fields side-by-side. FirstName and LastName? City, State and Zip? What your user expects together can now be shown together, on the same line:
You can also arrange many fields into a visual structure that’s easy to understand:
The new Tab control helps you group your fields so your users see them as equal options. You can even have nested tabs (as seen in the “Windows” tab in the example below).
If the new Tab control expands and collapses information horizontally, the new Expander and Accordion controls do the same vertically. The Expander and Accordion are both great tools for mobile-device audiences, as it gives those small-screen visitors easy control with large tap targets.
The Expander can express hierarchical information: users can “drill down” into a specific group of details in a single expander with just a click, and click again to collapse that section. | Group a number of expanders together into an Accordion: only one expander can be open at any time in an accordion group, with the others closing automatically. |
Expander example | Accordion Example |
Buttons have also been improved. Our standard button now comes in a total of 3 different flavors:
- A single Button, ideal for use on its own. This is the same button you’ve worked with before.
- A new Dropdown Button, which can offer many different options in a small space
- A new Toolbar of buttons, which can present buttons side-by-side into a menu.
Regardless of type, any of these buttons can include a custom icon. You can also now set the color of any button, to guide your user’s attention.
Even More UI Enhancements!
There are even more UI components to work with, including the new HTML Element (which allow you to display web assets stored elsewhere on the web in your configurator) and Text element (which gives you fine-grained control over how text is displayed). Check out the full list of our UI enhancements here.
We hope you enjoy these new additions to our configurators, scenes, logic, and infrastructure! Visit our online documentation for details on these features at any time by clicking the help bubble always shown in the lower-left corner of your Administration Interface.
Will we see you at Dreamforce?
Key Takeaways from Last Week's Pack Expo