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 no code web app.
Bubble provides a library of icons you can use in your app’s design. Below is just a sample of the icons available.
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.
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.