This content originally appeared on Level Up Coding - Medium and was authored by Bahul Neel Upadhyaya
The Future of UI Design?
Imagine a world where your smartphone interface adapts to your emotions, where your smart home intuitively adjusts its controls based on the time of day, and where business dashboards morph in real time to guide critical decision-making during a crisis. This isn’t science fiction — it’s the promise of Relativistic UI, the next frontier in interface design.
Today’s user interfaces are struggling to keep up with the complexities of our digital lives. They often remain static in a dynamic world, rigid in the face of diverse user needs, and disconnected from the intricate business domains they aim to serve. As we juggle multiple devices, switch between various contexts, and demand more from our digital tools, it’s clear that traditional UI design paradigms are reaching their limits.
This article traces the evolution of UI design from the modular approach of Atomic Design through adaptable frameworks inspired by the general concept of Mouldable UI. We’ll delve into the idea of Principles and how they enable packaging higher-order concepts into reusable bundles, simplifying component code. We’ll introduce the concept of Frames of Reference, borrowed from physics, and explore how this can revolutionize context awareness in user interfaces. Finally, we’ll delve into the emerging paradigm of Relativistic Design, drawing parallels with Einstein’s extension of Galileo’s relativity, and discuss how these concepts can address real-world UI challenges.
Atomic Design: Building Blocks of Consistency
Brad Frost’s Atomic Design revolutionized UI development by introducing a hierarchical component structure that emphasizes modularity and reusability. The methodology breaks down interfaces into five distinct levels:
- Atoms: Basic UI elements like buttons, input fields, and icons.
- Molecules: Combinations of atoms forming simple components, such as a search bar (input field + button).
- Organisms: Complex components made up of molecules and atoms, like a header section.
- Templates: Page-level layouts that place components into a grid or structure.
- Pages: Specific instances of templates filled with dynamic content.
Benefits of Atomic Design:
- Consistency: Ensures a unified design language across the interface.
- Reusability: Components can be used in various contexts, reducing duplication.
- Scalability: Facilitates easier updates and maintenance as the system grows.
- Collaboration: Creates a shared vocabulary between designers and developers.
While Atomic Design provides a solid foundation for building consistent and reusable interfaces, it primarily addresses static layouts and doesn’t inherently account for the dynamic nature of modern user interactions.
The Reactivity Challenge: Beyond Static Components
As web applications have evolved, so too have user expectations. Modern UIs must adapt to user interactions, device capabilities, and changing application states. In a reactive application, even something as simple as a button may need to:
- Change its appearance based on user permissions.
- Adapt its size and layout for touch interfaces.
- Transform into a loading indicator when pressed.
Atomic Design Limitations:
- Static Nature: Atoms are defined in isolation and lack inherent adaptability.
- Complex Variations: Managing multiple states and variations of components can lead to bloated codebases.
- Context Ignorance: Components don’t inherently adapt based on user roles, device types, or application states.
To bridge this gap, we turn to the general concept of Mouldable UI, which offers a more flexible and context-aware approach to interface design.
Mouldable UI: Crafting Flexible and Adaptive Interfaces
Mouldable UI is a design paradigm that emphasizes creating user interfaces capable of adapting to various contexts and user needs. Originating from the Smalltalk programming environment, it advocates for flexibility and adaptability in software design. The core idea is to create interfaces that can be molded to fit different situations, much like how clay can be shaped into various forms.
Key Concepts of Mouldable UI (General Understanding):
- Design Tokens: Atomic pieces of design information (like colors, fonts, sizes) that can be applied consistently.
- Variants: Different versions or states of a UI component rendered based on specific conditions or contexts.
- Principles: Rules or guidelines that dictate how components adapt using constraints and context.
- Constraints: Conditions that guide component adaptation, often derived from querying the context.
- Mouldables: Higher-order components that can shape themselves using a composition of variants and other components.
By formalizing adaptability logic, Mouldable UI enables developers to create components that are inherently aware of their context and can adjust themselves accordingly. This reduces complexity and duplication, leading to more maintainable and scalable codebases.
Our Interpretation and Implementation
To illustrate how Mouldable UI principles can be applied in modern UI development, we’ll explore our interpretation and implementation of these concepts using a framework we call Nuxt Gravity. This is our version of Mouldable UI, tailored for Vue.js applications built with Nuxt.js.
Note: Nuxt Gravity is an upcoming library currently in development. The following examples are for illustrative purposes to demonstrate one way of implementing Mouldable UI concepts.
Trait Variant: Enhancing Component Flexibility
Real-World Example: Adaptive Button Component Using Traits and Principles
Let’s consider a Button component that needs to adapt based on various contexts:
- Loading State: The button shows a loading indicator when an action is in progress.
- User Role: Admin users see additional styling.
- Device Type: Touch devices require larger touch targets.
In traditional component design, we’d pass several props to the Button component to handle these variations:
<!-- Using Props -->
<Button :isLoading="isLoading" :userRole="userRole" :isTouchDevice="isTouchDevice" />
This approach can become cumbersome, especially as the number of context-dependent variations increases. Moreover, many of these props are not intrinsic to the Button itself but relate to external context.
Implementing with Our Version of Mouldable UI and Nuxt Gravity
Here’s how we might implement the Button component using the Trait variant and Principles in our interpretation:
<!-- Button.vue -->
<template>
<Trait :principle="buttonTraits" v-slot="{ traits }">
<button v-bind="traits">
{{ buttonText }}
</button>
</Trait>
</template>
<script setup>
import { defineProps, computed } from 'vue';
import { unionPrinciple, rule, trait, always } from 'nuxt-gravity';
const props = defineProps({
isLoading: Boolean,
userRole: String,
isTouchDevice: Boolean,
});
// Define principles representing higher-order concepts
const loadingRule = rule(
() => props.isLoading,
trait('button.loading', { class: 'btn-loading', disabled: true })
);
const adminRule = rule(
() => props.userRole === 'admin',
trait('button.admin', { class: 'btn-admin' })
);
const touchDeviceRule = rule(
() => props.isTouchDevice,
trait('button.touch', { class: 'btn-touch' })
);
// Combine principles into a reusable bundle
const buttonTraits = unionPrinciple(
loadingRule,
adminRule,
touchDeviceRule,
always(trait('button.default', { class: 'btn-default' }))
);
const buttonText = computed(() => (props.isLoading ? 'Loading...' : 'Submit'));
</script>
Explanation:
- Principles as Reusable Bundles or Rules: We define principles from rules (loadingRule, adminRule, touchDeviceRule) that encapsulate related tokens and constraints.
- Packaging Higher-Order Concepts: Each principle represents a higher-order concept (e.g., loading state, user role) and could be reused across different components (later we’ll deal with the fact that we reference props, which is not portable).
- Simplified Component Code: By combining rules into a single principle: buttonTraits, we eliminate complex, non-behavioural code from the component, making it cleaner and more maintainable.
- Trait Merging: Traits from multiple principles are merged when their conditions are met, allowing for flexible adaptation based on context.
Benefits Highlighted:
- Reusability of Higher-Order Concepts: Principles can be applied to multiple components, promoting consistency and reducing duplication.
- Simplification: Component code focuses on behaviour rather than complex adaptation logic.
- Scalability: New principles can be added without modifying existing component structures.
- Clarity: The use of principles makes the adaptation logic explicit and easier to understand.
Assembly Variant: Adapting Content Structure with Principles
Example: E-Commerce Product Card with Assembly Variant and Principles
In an e-commerce application, a ProductCard component might need to adapt its display based on the product type:
- Physical Goods: Shows shipping options and stock levels.
- Digital Downloads: Highlights file size and format.
- Services: Emphasizes scheduling and availability.
Developing with the Assembly Variant and Our Principles
<!-- ProductCard.vue -->
<template>
<Assembly :principle="productTypePrinciple($props)">
<!-- Physical Product -->
<template #physical>
<div class="product-card physical">
<!-- Display product image, price, shipping options, stock levels -->
</div>
</template>
<!-- Digital Product -->
<template #digital>
<div class="product-card digital">
<!-- Display product image, price, file size, format -->
</div>
</template>
<!-- Service -->
<template #service>
<div class="product-card service">
<!-- Display service description, scheduling options, availability -->
</div>
</template>
<!-- DEfault -->
<template #default>
<div class="product-card unknown">
<!-- Display a generic product description -->
</div>
</template>
</Assembly>
</template>
<script setup>
import { defineProps } from 'vue';
import { unionPrinciple, rule, designToken, always, defaultToken } from 'nuxt-gravity';
// Define principles for product types
const productTypePrinciple = (props) => {
const physicalProductRule = rule(
() => props.type === 'physical',
designToken('physical')
);
const digitalProductRule = rule(
() => props.type === 'digital',
designToken('digital')
);
const serviceProductRule = rule(
() => props.type === 'service',
designToken('service')
);
// Combine principles into a reusable bundle
return unionPrinciple(
physicalProductRule,
digitalProductRule,
serviceProductRule,
always(defaultToken)
);
};
defineProps({
type: String, // 'physical', 'digital', or 'service'
});
</script>
Explanation:
- Principles for Product Types: We define principles that represent each product type, encapsulating related tokens and constraints.
- Reusability and Clarity: Principles can be reused and make the component’s adaptation logic clear and maintainable.
- Eliminating Complex Code: By using principles, we avoid embedding complex, non-behavioural code in the component, focusing on the layout and content structure.
Introducing Frames of Reference: A New Perspective in UI Design
To further enhance the adaptability of our interfaces, we introduce the concept of the Frame of Reference, a term borrowed from physics. In classical mechanics, a frame of reference is a set of coordinates used to measure the position and motion of objects. Galileo introduced the idea to explain how the laws of physics are the same in any inertial frame, and Einstein extended it with his theory of relativity, showing how measurements of time and space are relative to the observer’s frame of reference.
Applying Frames of Reference to UI Design
In UI design, the Frame of Reference represents the local and global context available to a component, allowing it to make informed decisions without relying solely on passed-down props or global state. By adopting this concept, we can empower components to access relevant context information directly, leading to more adaptable and context-aware interfaces.
Frames of Reference in Practice
Refining the Trait Example Using Frames of Reference and Principles
Returning to our Button component, we can update it to use Frames of Reference and further leverage principles. Instead of passing props like isLoading, userRole, or isTouchDevice, we rely on composable query identifiers imported from a module.
Updated Implementation with Frames of Reference and Our Principles:
<!-- Button.vue -->
<template>
<Trait :principle="buttonPrincipleBundle" v-slot="{ traits }">
<button v-bind="traits">
{{ buttonText }}
</button>
</Trait>
</template>
<script setup>
import { computed } from 'vue';
import {
unionPrinciple,
rule,
trait,
always,
query,
some,
useFrame,
} from 'nuxt-gravity';
// Import query identifiers from a module
import { isLoadingQuery, isAdminQuery, isTouchDeviceQuery } from 'my-queries';
// Acquire a reference to the Frame of Reference
const frame = useFrame();
// Define constraints using queries
const isLoading = some(query(isLoadingQuery));
const isAdmin = some(query(isAdminQuery));
const isTouchDevice = some(query(isTouchDeviceQuery));
// Define principles representing higher-order concepts
const loadingPrinciple = rule(
isLoading,
trait('button.loading', { class: 'btn-loading', disabled: true })
);
const adminPrinciple = rule(
isAdmin,
trait('button.admin', { class: 'btn-admin' })
);
const touchDevicePrinciple = rule(
isTouchDevice,
trait('button.touch', { class: 'btn-touch' })
);
// Combine principles into a reusable bundle
const buttonPrincipleBundle = unionPrinciple(
loadingPrinciple,
adminPrinciple,
touchDevicePrinciple,
always(trait('button.default', { class: 'btn-default' }))
);
const buttonText = computed(() =>
isLoading(frame) ? 'Loading...' : 'Submit'
);
</script>
Explanation:
- Using Our Principles with Frames of Reference: We apply principles that now use constraints derived from the Frame of Reference.
- Constraints as Higher-Order Functions: Constraints like: isLoading are functions that evaluate the context within the Frame of Reference.
- Simplification of Component Code: By encapsulating adaptation logic within principles and constraints, we remove complex code from the component.
- Global Context Access: Components can access necessary context without explicit prop drilling, making them more adaptable and maintainable.
Understanding the some Function:
- Constraint Function: some is a constraint that converts a query function (frame) => Array into a test function (frame) => Boolean. It checks if there are any results from the query.
- Usage: By applying some to a query, we can use it in rules to determine if a condition is met based on the presence of any results.
Extending the Relativistic View of UI
Just as Einstein extended Galileo’s relativity to account for the constancy of the speed of light and the interwoven nature of space and time, we can extend our understanding of UI design by adopting a Relativistic perspective. By leveraging Frames of Reference and principles, we enable components to perceive their environment relative to their specific context within the application.
Introducing the UI Manifold
By utilizing the Frame of Reference, components now have potential access to the entire state space of the application from their own point of view. This introduces the concept of the UI Manifold, representing the structure and relationships between components in the interface.
Key Concepts:
- UI Manifold: The interconnected fabric of the interface, encompassing all components and their relationships.
- Locality and Context: Each component exists within a specific context in the manifold, influenced by its position and relationships.
- Global Concerns in Local Decisions: Components can make informed decisions based on both local and global contexts without the complexity of managing the global state explicitly.
Component Gravity: Imbuing Components with Weight
In the UI Manifold, components can possess properties akin to mass and gravity, influenced by factors like UI flow, visual prominence, and contextual importance.
Analogous Concepts:
- Component Gravity: Represents the importance or weight of a component in a given context.
- UI Curvature: The way components with higher gravity influence the layout and flow of the interface.
- Geodesic Paths: The most intuitive routes through the interface, shaped by the arrangement and gravity of components.
MouldableGravity: Contextual Rendering Based on Component Gravity
Example: Adaptive Alert Component with MouldableGravity and Our Principles
Let’s consider an interface where we need to decide whether to display a critical alert in a specific location. We can use principles to encapsulate the logic related to component gravity. In this example, we’ll assume that the computation of gravity is taken care of internally by the MouldableGravity component, and we don't need to pass any props to it.
<!-- AlertComponent.vue -->
<template>
<MouldableGravity>
<!-- High gravity area: The component is being rendered in a focal point of the UI -->
<template #high>
<CriticalAlert :message="message" />
</template>
<!-- Medium gravity area: The component is important but not the primary focus -->
<template #medium>
<ImportantNotification :message="message" />
</template>
<!-- Low gravity area: The component is part of the general UI fabric -->
<template #low>
<!-- Optionally render nothing or a less obtrusive component -->
<StandardMessage :message="message" />
</template>
</MouldableGravity>
</template>
<script setup>
import { defineProps } from 'vue';
const props = defineProps({
message: {
type: Object,
required: true,
},
});
</script>
Explanation:
- No Props Needed: The MouldableGravity component does not require any props; it internally determines the gravity based on the Frame of Reference.
- Contextual Rendering: Depending on the computed gravity, the appropriate slot (#high, #medium, or #low) is rendered.
- Simplifying Component Logic: By assuming the computation is handled by MouldableGravity, we avoid embedding complex logic in our component.
- User Focus Preservation: This approach ensures that critical alerts appear prominently when appropriate without overwhelming the user in less critical contexts.
Relative to Current Industry Practices
Responsive Design
Relativistic Design enhances responsive design by not only adjusting layouts for different screen sizes but also adapting component behaviour and visibility based on context and user interactions.
No-Code Platforms
By abstracting complex context management and adaptation logic through principles and Frames of Reference, Relativistic Design principles can empower no-code platforms to offer more sophisticated and adaptable components without requiring users to write code.
State Management and Contextual Awareness
Relativistic Design provides a framework for components to access and react to global states without the overhead of traditional state management solutions. This aligns with modern practices in frameworks like React and Vue, where context APIs are used to pass down state implicitly.
Addressing Real-World UI Challenges
Challenge 1: Complex Decision Boundaries
In large applications, determining where and how to render components based on multiple global factors can be complex.
Solution:
- Principles as Reusable Bundles: By packaging related tokens and constraints into principles, we simplify complex decision logic and make it reusable.
- Local Decision Points: Components use the Frame of Reference and principles to make decisions, reducing the need for complex prop drilling or global state management.
Challenge 2: Dynamic Personalization
Providing personalized experiences based on user behaviour and preferences.
Solution:
- Contextual Queries and Principles: Components query the Frame of Reference and apply principles that encapsulate personalization logic, allowing for real-time adaptation without extensive reconfiguration.
Challenge 3: Performance Optimization
Dynamic adaptations can impact performance if not managed efficiently.
Solution:
- Efficient Use of Principles: By defining principles that only evaluate necessary constraints, we minimize performance overhead.
- Selective Rendering: Components adapt based on principles, avoiding unnecessary renders and improving performance.
Potential Criticisms and Limitations
Criticism 1: Increased Complexity
The introduction of concepts like Principles, Frames of Reference, and UI Manifolds might add complexity to the development process.
Response:
- Learning Curve: While there is an initial learning curve, the long-term benefits of maintainability and scalability can outweigh the upfront complexity.
- Simplification of Component Code: Principles help remove complex, non-behavioural code from components, making them cleaner and easier to maintain.
Criticism 2: Performance Overhead
Accessing global context and dynamically adapting components could lead to performance issues.
Response:
- Efficient Computation: By optimizing the evaluation of queries, constraints, and principles, performance overhead can be minimized.
- Selective Context Access: Components only access the context they need through principles, reducing unnecessary computations.
Criticism 3: Difficulty in Debugging
Abstracting context management might make it harder to trace bugs and understand component behaviour.
Response:
- Enhanced Debugging Tools: Development tools can be designed to visualize the Frame of Reference, principles, and component decisions, aiding in debugging.
- Clear Documentation: Well-documented principles and patterns can mitigate confusion.
Conclusion: Embracing a New Paradigm in UI Design
Just as Einstein extended Galileo’s principles of relativity to revolutionize our understanding of physics, we can extend our approach to UI design by adopting a Relativistic perspective. By combining modularity, adaptability, and contextual awareness through Principles, Frames of Reference, and composable query functions, we can create UIs that are:
- Modular and Consistent (Atomic Design)
- Flexible and Context-Aware (General Mouldable UI Concepts Applied Through Our Implementation)
- Holistically Adaptive and Intuitive (Relativistic Design)
By making adaptability a first-class concept and leveraging principles to package higher-order concepts into reusable bundles, we simplify component code and eliminate complex, non-behavioural logic. This approach allows us to create interfaces that truly understand and respond to the complex needs of users and businesses alike.
As we continue to explore these concepts, we open new possibilities for creating more engaging, effective, and user-centred interfaces. The future of UI design is not just about making components look good or function well in isolation; it’s about creating systems that understand and adapt to the complexities of human interaction and the ever-changing digital landscape.
Are you ready to extend your understanding of UI design and embrace the future of Relativistic Design?
Further Exploration and Resources
- Nuxt Gravity: Learn more about our implementation of Mouldable UI principles in your projects. (Note: Nuxt Gravity is currently in development; keep an eye out for its release.)
- Mouldable UI in Smalltalk: Explore the origins of Mouldable UI concepts in the Smalltalk programming environment.
- Responsive Web Design: Explore techniques for building interfaces that adapt to different devices and screen sizes.
- No-Code Platforms: Understand how visual development tools are making UI design more accessible.
- Principles in UI Design: Delve deeper into how principles can encapsulate higher-order concepts and simplify component development.
- Frames of Reference in UI Design: Learn how encapsulating local context enhances rendering decisions.
References
- Frost, B. (2016). Atomic Design. atomicdesign.bradfrost.com
- Einstein, A. (1905). On the Electrodynamics of Moving Bodies. Annalen der Physik.
- Black, A.P., et al. (2007). Traits: Composable Units of Behaviour. In Software–Practice & Experience, 39(1), 19–39.
- Wuyts, R., et al. (2015). Moldable Tools for Object-Oriented Systems. In Journal of Object Technology, 14(2), 1–35.
- W3C. (2018). Web Content Accessibility Guidelines (WCAG) 2.1. w3.org
- Nuxt Gravity Documentation (Upcoming)
- Marcotte, E. (2010). Responsive Web Design. alistapart.com
Final Thoughts
Throughout this article, we’ve been deliberate in distinguishing between the general concept of Mouldable UI and our specific interpretation and implementation of it using Nuxt Gravity. By emphasizing the concept of Principles, we’ve highlighted how packaging collections of related tokens together via constraints permits the encapsulation of higher-order concepts into reusable bundles. This approach simplifies component code by eliminating complex, non-behavioural logic, making components cleaner and more maintainable.
In the MouldableGravity example, we’ve assumed that the computation of gravity is handled internally by the utility component, requiring no props from the developer. This simplifies the component usage and focuses on the rendering logic, allowing developers to trust that the appropriate content will be displayed based on the context.
Principles allow us to represent complex design aspects like typography, accessibility, localization, layout, and even entire CSS frameworks in a modular and reusable way. By combining principles with Frames of Reference and the Relativistic perspective, we can create user interfaces that are not only adaptable and context-aware but also easier to develop and maintain.
Just as Einstein extended Galileo’s relativity to account for new understandings of space and time, we can extend our view of UI design by adopting these innovative concepts. This opens up possibilities for more responsive, context-aware, and user-centric interfaces that can adapt to the ever-changing landscape of user needs and technological advancements.
Thank you for exploring these ideas and considering how they might influence the future of UI design.
Note: While we’ve discussed specific implementations and interpretations of Mouldable UI and concepts like Relativistic Design through our framework, these ideas have a rich history and multiple approaches. The examples provided are intended to illustrate how these concepts can be applied in modern UI development.
From Atomic Design to Relativistic Interfaces was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Level Up Coding - Medium and was authored by Bahul Neel Upadhyaya
Bahul Neel Upadhyaya | Sciencx (2024-10-15T17:45:22+00:00) From Atomic Design to Relativistic Interfaces. Retrieved from https://www.scien.cx/2024/10/15/from-atomic-design-to-relativistic-interfaces/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.