Bixby Developer Center

Guides
References

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 a Bixby conversation.

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.

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

Bixby: Check out these space resorts!

Bixby displaying a list of space resorts in response to the user's query

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.

A flow for booking a space resort: initial request, the input moment for the booking dates, returning multiple results, narrowing down to a single result, selecting the result to book, the confirmation moment, payment through Samsung Pay, and the receipt

You can also refer to the Designing Conversations 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.

The flow for booking the space resort, with Bixby's dialogue added to each step

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: Ratings 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
Multiple results. image-card with text overlayMultiple results. image-card with text belowMultiple results. thumbnail-card with image on the left

Here are more examples:

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
More images in an image-carouselMore images in an image-list

Here are more examples:


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

title-areasingle-lineparagraph
More information presented in a title-area componentMore information presented in a single-line componentMore information presented in a paragraph component

Here are more examples:


Priority 5: Top 3 Amenities

partitionedsingle-line
Amenities presented in a partitioned componentAmenities presented in a single-line component

Here are more examples:


Priority 6: Room information and options

thumbnail-card with image on rightthumbnail-card with image on left
Room information presented in a thumbnail-card, image on rightRoom information presented in a thumbnail-card, image on left

Here are more examples:

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
Room information presented in a title-cardRoom information presented in a thumbnail-cardRoom information presented in a compound-card

Here are more examples:

This compound-card uses a combination of a title-area and an 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
Confirmation information in an imageConfirmation information in a cell-areaConfirmation information in a title-areaConfirmation information in a single-line componentLegal text in a paragraph component
To include legal text, use the legal text style.

Here are more examples:


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

input-cell
Editable confirmation info in an input-cell

Here are more examples:

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!
Do: present simple and minimal informationDon't: crowd the UI with unnecessary information

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!
Do: design dialog and views that work well togetherDon't: design dialog and views that give different information

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!
Do: show information that directly answers the user's query, "where is Venus"Don't: show information that doesn't answer the query, such as the Wikipedia entry for Venus
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. You could also have a card at the end of your view that has an on-click which lets them leave Bixby, and the on-click should have an external-link-badge to let users know that tapping on the card will let them leave Bixby. You should not place this information in the start or middle of your content.

There are additional situations where you can use app-launch instead to direct the user outside of Bixby entirely. For more information on app punch out, see the App Punch-Out Policies.

Do this!Don't do this!
Do: put an attribution-link that launches a separate app at the end of your viewDon't: put an attribution-link that launches a separate app in the middle of your view Don't: put an attribution-link that launches a separate app at the top of your view

Additionally, when using an attribution-link or an on-click with an external-link-badge, the primary content in the view should not be clickable. For example, use a cell-card and no on-click defined, to make it into a cell area. Only one part of a component should be tappable, and not multiple parts.

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

The flow for booking a space resort, now showing each view as designed: an input picker, a multiple result view, the single result detail view, input selection, the confirmation moment, payment through Samsung Pay, and the receipt

"Yay! I booked it!"