Bubble vs Framer UI/UX teardown
I’ve been playing with a few no-code tools lately, comparing feature sets, and generally assessing their ease of use, value proposition, and functionality.
I found that framer was one of the easiest to use. I was up and running with it in no time, feeling completely confident in exploring all of it’s affordances, and I had a fully working website in about 1 day.
On the exact opposite end of the spectrum was bubble, which has the most robust feature set and functionality, but the UI and UX is so poor that I was so daunted, didn’t feel confident exploring the tool on my own, couldn’t get anything working the way I wanted, and still have yet to publish anything.
As a Lead Product Designer and all-around product-geek, I of course asked myself, what is the main difference between these two tools? After doing a brief comparison, I want to share a few key difference that contribute to the overall ease of use of Framer over Bubble.
When comparing tools side by side it’s important to think about both UI (the layouts, the use of whitespace, the placement of buttons, categorization and clustering of like-things, the design language system) and UX (the ease of use, the discoverability, the confusing click-through paths, all the extra clicks that create high cognitive load, the information architecture).
Side menu
Let’s get right to it. Here are some screens side by side. Starting with the styling of text fields:
What does framer do right that bubble does wrong?
- progressive disclosure — framer shows you that there is a link section, should you want this text to be a link. After the user opt-in to this option, only then are they shown the various options.
- grouping information — bubble not only shows all the link customizability straight away, but they don’t group it together.
- Typography hierarchy — bubble is using the same font styling for section headers as for labels. Incredibly hard to parse where sections begin and end.
- No scannability between labels and inputs. The contrast on the inputs is so low that it’s also hard to scan between what is a label and what is an input.
- Text for buttons — Notice bubble’s text ‘edit style’ and ‘detatch style’. Due to the already mentioned overwhelming feeling that the headers, labels, and inputs have created, having buttons that are only text just adds to the pile of cognitive overload.
Suggestion for bubble — use the ‘foreign language’ test. If a user didn’t speak english and came to this UI widget, could they understand what was going on here? Here’s a perfect example of that:
Overall layout
Let’s look at the 2 interfaces:
How do you feel looking at the framer one? and now the bubble one? For me, the framer one is open and airy. There’s a clear division of space that makes me feel calm — the center is the canvas and the controls are on the left and right. The top is clearly overarching functionality that hierarchically sits above the other panes. I can tell at a squint which section does what, and when exploring there is a lot to discover and learn by just hovering over elements, so I’m not stressed by accidentally ‘going somewhere’ and not understanding the mental model of the tool.
With bubble, it feels like everything is out in the open all on one hierarchical plane and I’m overwhelmed. There’s no use of negative space — it’s all crammed together. The top bar in not commanding a higher importance, leaving me questioning its relationship to everything below it.
As a test, I re-skinned bubble, to be more like framer.
So what did I do here?
- I reorganized the top bar and clustered a few disparate affordances. I put these things together:
2. I suggested that the sub-menus should appear on-hover, instead of onclick.
3. I took the categories of the sub-menu and moved them into an interim step, instead of starting with them all expanded in one long list. This allows for the user to feel less overwhelmed, more in the driver seat of narrowing in on what they’re looking for, and starting to learn the categorization of options. They’ll never learn the categorization when they’re all in one long list, and they likely won’t discover new things either.
4. I made the hover state imply a bit more overtly that these are draggable elements. In fact, I’d recommend changing the cursor to a hand too.
UX/ Interactivity
The last thing I wanted to point out is how functional the features are. While bubble is way more robust, they don’t make the features easy to use. A few examples.
- Editing text. In framer you just click on the text itself and start tying. In bubble you have to edit the text in a separate window.
2. Draggability of elements. In framer, you can pretty much drag anything anywhere and it’ll snap. In bubble not only can you not drag, but most things don’t snap to any sort of grid.
3. Matching analogous tools. In this day and age, designers are more-often-than-not wanting their tool to fit-in with other similar tools, or ‘sister tools’ so the user feels confident in the mental model. In this case, you’d want this type of tool to work off of flex-box rules, similar to figma, sketch, and other no-code tools. Bubble doesn’t appear to do that. Framer does.
4. Building for responsiveness. One of the main perks of no-code tools is that you don’t have to worry about beautiful responsiveness. It more or less comes for free out of the box. Framer shows this off in their main canvas. By default the user can zoom in and out of 3 breakpoints and design all 3 at once. In bubble I still have yet to figure out how to do this.
That’s it for now. There are definitely a ton more details to compare. But now I have to get back to actually building things. Hope other designers and product people enjoyed this.
