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.
Watch this video to see how to implement these great user experience features in your Bubble app.
1 thought on “Simple Tips to Improve UX Using Icons in Your Bubble.io No Code Web App”
Nice Article. UX is the experience your customer has while using the product. It focuses on the needs and pain-points of the users. It is the content you create to reach and interact with your customers before they have even touched your merchandise.