In the rapidly evolving landscape of artificial intelligence, the potential applications of machine learning and AI technologies are boundless. While they offer significant enhancements in productivity and efficiency, building applications atop experimental technology presents challenges. In the realm of utility, there’s the challenge of designing an intuitive interface to introduce a feature that has never existed. At Numbers Station, we keep data processing and intricate algorithms behind the scenes – putting user-friendly yet advanced AI functionalities at the forefront of the product experience.
Our challenge of creating an application that serves both novice and power users is a big one. To create new experiences without small details constantly diverting our focus, our front-end team has invested significant effort into developing a flexible UI framework consisting of “atoms” and “molecules” which allows us to build components in a reusable way. Just as atoms are the building blocks of matter, they are also the building blocks for our application. The smallest reusable pieces—buttons, inputs, or parts of a pop-up modal—are considered atoms. A molecule is a combination of these elements, forming a larger, reusable component like a confirmation dialog or a table designed to display data in a specific way.
This pattern enables us to design thoughtful UX improvements once (such as making all of our atoms accessible by default), and apply that behavior consistently across the application. An example of this is our Truncate component. Web apps often display text on a single line which could overflow. It’s relatively easy to truncate this text and add an ellipsis, but it’s more challenging to conditionally display a tooltip over the text with its full content on hover if it overflows. We’ve created a component that allows us to easily “wrap around” some text, ensuring it behaves consistently thereby enhancing the UX with minimal additional effort.
The Truncate component with max lines set to 2:
As most software engineers know, it is generally considered good practice to separate the concerns of your application into smaller, decoupled units. This approach makes each component more flexible and less fragile when changes occur across the application. Therefore, when designing a new component for our UI framework, we ask ourselves several questions to ensure we’re not creating more technical debt to address later. To properly categorize these components:
.
1. Atom:
- Generally “pure” (with a given input it will always produce the same output without side effects)
- Serve a singular purpose and have the potential to be used in many places through the application
- Most of the time does not contain internal state
2. Molecule:
- Doesn’t necessarily match the requirements of an atom, but it will still be reusable throughout the application with some different configuration provided
- May have internal state
- May fetch its own data, but it will most likely have configuration passed in from outside to provide more information on how to fetch that data so it is more reusable
3. One-off (some systems refer to these as organisms):
- Fairly specific to a page or section of the application.
- It may have various configuration options but is unlikely to be useful in many other areas of the application
- Often has its own internal state and can handle its own data fetching
.
Of course these rules are not set in stone; they’re more of a general guide for how we decide. The aim is to avoid duplicating work unnecessarily—making life easier for our future selves and other front-end developers, and to create UX features that can be easily reused across the application without additional effort.
A good metaphor for UX design is a car. A driver doesn’t need to understand how a car works to drive it; they are given just a few easy-to-understand controls, and the inner workings of the car are abstracted away from them. Similarly, the goal of a well-designed application is to make it intuitive enough that new users can look at your application and immediately know what to do and how to do it—a big challenge for applications which are technical in nature like Numbers Station. Effective strategies include using real-life gestures that translate into digital interactions or reusing well-known visualization patterns like the “save” icon. Although many younger people have never seen a floppy disk (which inspired the icon over 50 years ago), they recognize its function because it’s universally used for saving data.
At Numbers Station, we are at the forefront of this innovation. We strive to make breakthroughs in both AI technologies as well as UX design. We continually improve our products and services for our users, and we’re excited to have you as our partners.
See a demo of our platform today.