UI Component Requirements Elicitation — Part 1/3
User Interface (UI) components are building blocks for creating great user experiences in digital products. Building UI components based on implicit assumptions produces results that are far different from what was intended by the designers.
The primary role of a UX Engineering team in the design system is building UI components in digital application platforms such as iOS and Android . The very first challenge in building the right UI components is establishing a proper understanding of the intentions of the design provided by the design team before implementing the development framework. The mistake that engineers make time and again is diving right into development with only a superficial understanding of a UI component.
Designing UI components is a collaborative effort of designers and UX engineers. Designers usually conceptualize the function and form of UI components with certain functional requirements in mind such as navigation, displaying set of data and displaying a list of choices. The design process involves user testing to validate the usability of the UI components. Designers also incorporate a number of quality attributes, such as accessibility, visual aesthetic, etc, into their design.
On the other hand, the engineers contribute to the design decisions that revolve around reusability, maintainability, integrability, performance, etc.
The process of building something, whether it is a house, a piece of furniture, car or UI component requires intention, design, blueprint, and specification to define what we are trying to build.
In this series, we will share how the designers from a Design System team define UI component specifications that are shared with a UX Engineering team for further analysis.
UI Component Anatomy
UI components have structural form, i.e. component anatomy, which describes the elements that it is composed of and its layout. Establishing component anatomy is the very first step of reification as this provides the concrete structural details to shape the component.
Anatomy is the study of the structures of a UI component.
Atomic UI components, such as buttons and text, are very commonly used as parts of bigger molecular UI components. Component anatomy allows us to identify such atoms, which provides a better understanding of the component behavior.
A UX Engineering team must consider the integrability of atomic components, and establishing component anatomy allows us to evaluate this at early stages of development.
What’s Next
In this post, we learned that UI component anatomy is a specification artifact that must be in place in the early stages to get a more concrete understanding of what needs to be built.
At this point, you may wonder if establishing UI component anatomy is sufficient for a UX Engineering team to know exactly what to build. Well, hold your horses. There is more we can do to elicit further requirements, and component anatomy serves as a baseline for this analysis.
In the next article, we will explore how UX Engineering team conducts Type & State Modeling to represent the requirements of a UI component.
