The Bixby platform allows developers to create Capsules with nearly endless possibilities. To help developers better-understand how to design a Bixby Capsule and ensure a coherent experience for all Bixby users, we created a robust design system. Bixby Views a system of user interface components that allow you to quickly design visual interfaces for your capsule, express your brand identity, and create a unique experience for your service. Designed with scale in mind, each component and page template were carefully crafted to fit everyday needs and to automatically span across every Bixby-supported device in Samsung’s diverse device landscape – meaning you only have to design your capsule once.
When using Bixby Views, you have a variety of tools to help simplify the development process and create reusable components. To set the stage for what Views are and how to use them in your project, let’s first look at the three View types of the Conversation Model.
Like a real conversation, Bixby’s conversation model is categorized by a set of basic moments in a common two-way conversation. These categories are:
Result views let you build displays for search results, individual detail pages, image carousels, and more. You can use use several components via layout-macros, and render a layout from your *-view file.
If you need the user to be taken to an outside application, Bixby can directly launch that application with the result-view.
Example: Our user asks: “Find a popular restaurant nearby that takes reservations” you should use a result view to show a list of results that match the user’s search.
Input views let your capsule gather information from the user. If your user makes a request that can’t be completed without more information, Bixby will prompt the user to provide that information through one of a number of available interactive components. Examples include components that allow users to easily pick time, date, images, or find information with the aid of auto-complete. You can also use components to create forms with text and numeric fields.
Example: Our user sees that a restaurant called “Comet Gastropub” came up as a search result for their previous query. They decide to book a reservation and ask Bixby. “Get me a table for four at Tartine tonight.” The user provided the name of the restaurant they want the reservation at, how many guests, and the day, but forgot to mention a time. To prompt the user to provide a time for this request, you can use an Input Moment with a time picker component.
Confirmation views let you build user interfaces for reviewing and confirming actions during a Confirmation Moment. This moment is when a user can review the details of an action and approve it. As with result views, confirmation views can use layouts and layout-macros. In addition, confirmation views can use transaction properties in their layouts.
Example: Our user has filled in all of the necessary information to book a table at Comet Gastropub. They can see which restaurant they’re setting the reservation at, the date, time, and number of guests for the reservation. If everything looks good, they can submit the reservation and Bixby will take care of the rest.
The beauty of Bixby Views is that it is one system that works across all of the devices in the Bixby ecosystem. As a developer, you only need to design your capsule once and it will work on any device that you tell it to, with its interface automatically refactoring to fit that device. This streamlines your ability to create consistent cross device experiences – without having to rebuild your app for each device: one single source of truth.
While the “one-size-fits-all” model is helpful in most cases, it doesn’t always result in the ideal fit for each case. Sometimes it makes sense to design an experience within the unique constraints of the device. To help with this, we make it possible to create custom layouts for a specific device to ensure you can create the best multi-device experience for your capsule.
Bixby Views has a large catalog of available UI components to use within each View type. Developers can choose from an array of components depending on common UX goals and interaction paradigms. This includes components for text, images, and other basic layout-based components like cards, cells, and pickers. Each component comes with documentation for how and when you might want to use each component. To ensure your capsule has the best experience, it is paramount to consider the design guides surrounding the these components before defining the goals and needs of your Capsule. To see the full capabilities of Bixby Views and the documentation for each component, view the developer docs on bixbydevelopers.com
If you’re a designer or just want to lay out your Capsule before you start building, we creacrafted helpful design resources that make it incredibly easy to design the screens of your capsules. In the next blog, we’ll discuss the tools and resources available and how to use them.