When you are looking for a way to build useful, usable and beautiful digital products in a faster way, UI frameworks might be worth a look. But since there are tons of options, deciding on one is definitely challenging: Here is how we approached this challenge.
UX for the web + prototyping with a UI framework = 😍
Supposing that prototyping digital products in code rather than in dedicated design-tools is helpful (for many good reasons, to be elaborated in another blog post), starting the project from a plain html/css/js setup usually means unnecessary pain:
- Reinventing the core components of a web-based user interface (as e.g. standard form-components, buttons and basic web typography) first consumes a lot of time and energy.
- Secondly, there is the rather philosophical question if the Internet seriously needs more custom elements which are only going to be used in a single project.
- Last but not least, starting from scratch (or from sketch 😜) and coming up with something entirely new can even be harmful: Users have by now, about 30 years after the Internet was invented, a pretty solid mental model of how websites work. If the used components do not comply with this mental model of a website, users will most probably be confused.
Following it makes sense to start with a basic set of already iterated and user tested components (check out the Material Design teams research on simple form input fields) that can get extended and adjusted as needed. Those sets are called ‘UI Frameworks’.
Easy-to-use UI frameworks
Since a goal of prototyping user experiences is mostly not to build a fast website but to build the optimal experience in a quick, iterative way, this list includes only frameworks which can be used without further installation or configuration: Download or embed and play.
Lighter: A grid and fundamental styles.
- Susy no styles at all, but a seriously sophisticated grid
- Bulma actually on the edge to heavier with a lot of styles but no rich interactions
Heavier: A grid for proper responsive layouts on all viewports and a variety of elements with rich interactions.
Of course this list is definitely not yet complete - if you miss something, please let me know. So which framework suits which use case best? This is unfortunately not so easy to answer in general terms, but needs to be evaluated individually based on the requirements which emerge from the specific product- and team-situation:
Selecting the perfect UI framework for our needs
While working with one UI framework for the previous six month or longer, we developed an idea of what a ‘good’ framework is for us and our use-case (see next paragraph). So we looked into which frameworks are out there and tried to rebuild a rather complex place of our system with the ones that seemed to perform well in our set of criteria. That forced us to also look into the framework’s documentation and maintenance cycles. Based on this exercise we could judge how working with the different frameworks feels (developer/prototyping experience) as well as how the results look, feel and get perceived by real users. After going through our favourites with the entire team, we decided to switch to Google’s Material Design Components.
Our criteria for choosing a UI framework
User experience of the prebuilt elements
- Usability: How usable are the components the framework delivers on its own?
- Readability: How well readable is the typography by default (font, font-weight, line-height, letter-spacing, font-smoothing, text-rendering, …)?
- Accessibility: Is keyboard navigation possible? Are the colours in the UI easily distinguishable (even with colourblindness, light sensitivity, …)?
- Appearance on old/cheap monitors: Are all UI elements also visible on monitors with low resolution and contrast? Is the visual hierarchy consistent with the experience on a high resolution and high contrast monitor?
- Joy of use How joyful is the interaction with the components of the framework? E.g. visual design and micro-interactions.
- Consistency How consistent is the design of the components?
Prototyping / Developer experience
- Flexibility of the System How easily can components be adjusted (caution: the more flexibility, the more maintenance is needed to prevent inconsistencies)?
- Completeness of the component library Which fraction of the form elements and content modules we need is available?
- Documentation How well is the framework with its possibilities and limitations documented?
- Code semantics & clearness of code How well is the code understandable and readable?
- Maintenance: How well is the framework maintained?
- Error susceptibility: How easy is it to forget crucial details that produce bugs?