Uh oh! We couldn’t find any match.

Please try other search keywords.

Bixby Developer Center

Guides

Designing With Bixby Views

Bixby lets you construct views to build your capsule's user interface. Bixby Views uses the same language that Bixby's models are defined in. By using them, you can create interactive designs for Bixby in a simple, consistent manner. Views render the content of Moments in Bixby's conversation model.

Designing With Space Resorts Example

Let's walk through through the Bixby Views design system with the Space Resorts sample capsule. In this capsule, users can book hotel rooms on different planets. You can consider this a case study that you can follow while designing your own capsules.

I want to book a room at the best Space Resort in the Galaxy.

Bixby: Check out these space resorts!

case study introduction

Step 1: Define Your Business Goal

The Space Resorts capsule allows users to browse and reserve rooms (or HabitatPods) through the Space Resorts service, using Bixby from their Samsung Device.

Space Resort’s business goal is to get users to browse and book these HabitatPods. With that in mind, your team designer and project manager can decide on a few must-work use cases:

  1. Book a hotel room on your favorite planet which has a space spa amenity
  2. Cancel your recently booked Space Resort on Jupiter
  3. Check the status of a recent Space Resorts booking
  4. Search for cool new Space Resorts on Pluto for Canada Day weekend at a rate of less than $500/night

You can learn more about defining must-work use cases in the Planning a Capsule guide.

Step 2: Create the Main Flows

Based on the must-work use cases you define in Step 1, think of four to eight main user flows. Make sure that the user can complete the task in the most efficient way possible.

For example, consider the flow of must-work use case 1: Book a hotel room on your favorite planet which has a spa amenity.

Book a Space Resort that has a spa.

Step 2

You can also refer to the Designing Your Capsule guides to help you understand which flows to use.

Step 3: Write Bixby's Dialog

Based on the must-work use cases, think about the actual dialog Bixby will say to users during these conversations.

Book a Space Resort that has a spa.

Step 3

For guidance on how to write the best dialog for your capsule, see Writing Dialog in the Design Guides. For more information how to implement dialog, see Refining Dialog in the Developer Guides.

Step 4: Define the Information Hierarchy

Your capsule should provide curated content with the most valuable results from the user's request.

Next, define the information hierarchy, based on the must-work use cases.

Multiple Results

Show a summary of the result concept, selecting the top three to five priority pieces of information:

  • Priority 1: Provide a high-res image to show nice resort pictures.
  • Priority 2: Resort name
  • Priority 3: Location and any services provided
A Single Result

You want to show high-resolution images of the available space resorts. To understand the selling points of each resort, give a short summary of each resort in a description. There are a lot of amenities, but you should show the top 3 selling points. For the Space Resorts capsule, you should also show room information as a detail view to help users learn more.

  • Priority 1: Provide more images
  • Priority 2: Resort name and secondary information
  • Priority 3: Rartings and review count
  • Priority 4: Hotel description (max 5 lines)
  • Priority 5: Amenities
  • Priority 6: Room information
Inputs

For inputs, you want to consider which information you need to display for the user to book a room.

  • Priority 1: Price per room
  • Priority 2: Room name
  • Priority 3: Room images
  • Priority 4: Special offer
Confirmations

You will also need to confirm the details of a user’s choices.

  • Priority 1: Check-in check-out time
  • Priority 2: Choice of room
  • Priority 3: Contact information (name, phone number and email address)
  • Priority 4: Payment method and total price

Step 5: Find the Best Components for Each Moment

For more information on each of these components and why they are useful for these Moments, see Components and Layout Patterns.

For Multiple Results

You can use an image-card or a thumbnail-card to cover all three of these priorities.

Priority 1: Provide a high-res image to show nice resort pictures.
Priority 2: Resort name
Priority 3: Location and any services provided

image-card with text position Overlayimage-card with text position Belowthumbnail-card with image on left
Step 5, Multiple results. image-card with text overlayStep 5, Multiple results. image-card with text belowStep 5, Multiple results. thumbnail-card with image on the left
For a Single Result

Within a larger layout, you can use the following components to cover the different priorities:

Priority 1: Provide more images

image-carouselimage-list
Step 5, Single Results, single-result-1Step 5, Single Results, single-result-1

Priority 2, 3, and 4: Resort name and Secondary information, Ratings and review count, and Description

title-areasingle-lineparagraph
Step 5, Single Results, single-result-234Step 5, Single Results, single-result-234Step 5, Single Results, single-result-234

Priority 5: Top 3 Amenities

partitionedsingle-line
Step 5, Single Results, single-result-5Step 5, Single Results, single-result-5

Priority 6: Room information and options

thumbnail-card with image on rightthumbnail-card with image on left
Step 5, Single Results, single-result-6 rightStep 5, Single Results, single-result-6 left
For Input

To have users choose a room to stay in, provide a list of available rooms for users to select from. In this case, one of the provided input-view pickers won't work. You should use the selection-of key to create a list of options. Use the same components for multiple results to list each option:

title-cardthumbnail-cardcompound-card
Step 5, InputStep 5, InputStep 5, Input

This compound-card uses a combination of a title-area and a image-list

For any other user information you might need, you can use one of the input view pickers. For example, for the dates of a stay, use a date-picker.

Confirmations

Use noninteractive components for information that you need to summarize but users can't change.

imagecell-areatitle-areasingle-lineparagraph
Step 5, Confirmation, imageStep 5, Confirmation, cell-areaStep 5, Confirmation, title-areaStep 5, Confirmation, single-lineStep 5, Confirmation, single-line
To include legal text, use the legal text style.

Use input-cell or split-input-cell for information that users can change.

input-cell
Step 5, Confirmation, input-cell

Design Tips

Simple and Minimal Information

Be intentional about the information hierarchy. You shouldn't try to recreate a touch-based UI application. Bixby Views components work well with simple and minimal information.

Find the best space resort on Venus.


Do this!Don't do this!
Simple and minimal info, doSimple and minimal info, don't

Design With Dialog

Bixby is a voice-forward experience, so always make sure you're designing for both the content users see and dialog, and that they work well together.

What's the air quality on Venus today?


Do this!Don't do this!
Simple and minimal info, doSimple and minimal info, don't

Provide Curated Content

A Bixby capsule should provide the most relevant content, based on the user's utterance.

Where is Venus?


Do this!Don't do this!
Simple and minimal info, doSimple and minimal info, don't
Note

Allow the user to complete their request within Bixby Views. Hyperlinks should be avoided, as they take away inline follow-up questions. To provide more detail for a piece of content that is summarized in the Bixby Views, you can have a separate link to punch-out if you need using an attribution-link. Do not visually treat external links the same as internal links.

Punching Out of Bixby Views

If you need to leave Bixby to launch a separate application through app punch out, place this content at the end of your View using an attribution-link. Do not place this information in the start or middle of your content. For more information on app punch out, see the User Experience Policies.

Do this!Don't do this!
Simple and minimal info, doSimple and minimal info, don't Simple and minimal info, don't

Conclusion

If you follow all the case study steps and design tips, here is the Space Resorts design:

Find the best Space Resort on the planet

Space Resort Design

Yay I booked it