Improve UX in Your Bubble App

Improve UX for Icon’s in Your Bubble.is App’s

Having a good user interface is an important part of your Bubble app’s design. The use of different colors, icons and other visual cues can make a big difference in not only helping your users interact seamlessly with your app but also increase user satisfaction. Watch the video below to see how you can implement user experience features in your Bubble app.

Bubble provides a library of icons you can use in your app’s design. Below is just a sample of the icons available.

Sample of Icons Available in Bubble

To help guide users as they interact with your app, you can change the color of an icon based on certain conditions. For instance, when a user hovers over an icon, you can set a Conditional to change the icon’s default color to a different color (refer to image below). Similarly, if you’re using Custom States to show a Group when an icon is pressed, you can “set” the icon’s color while that Group is “active” (or shown). You can see an example of this in the Conditional below where the icon color is green.

Conditional to Change Icon Colors

In addition to changing the color of an icon, you can also show or hide descriptive text associated with an icon. For instance, in the image below, “Users” will be visible when the app user hovers over the icon or when the icon is clicked (and the Custom State value becomes “Users”). Adding text can be a great way to help a user better understand what the purpose of an icon is.

Conditional to Show Text

Watch this video to see how to implement these great user experience features in your Bubble app.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s