#design systems

“computation does not need to make objects colder. when used thoughtfully, it makes them more alive” 🖤

User interface (UI) architecture and design are essential aspects of software development. The UI is the point of contact between the user and the software application, and it significantly impacts the user experience, usability, and satisfaction. The user interface architecture refers to the underlying structure and organization of the user interface elements, while the user interface design…

There was a trivial bug logged in JIRA—yes, it was a minor detail—that had been assigned to me to fix. The bug affected several different buttons appearing on different screens of the application. The fix required a small change to the HTML, and that meant I had to alter the JavaScript that was generating the buttons. It was simple enough that, with my limited understanding of JavaScript, I was able to implement the fix without assistance from a developer. Having fixed the button on one screen, I assumed I would be able to pretty much copy and paste the fix into the other screens. However, upon viewing the code, I realized that the code generating the second button was written differently from the code generating the first, even though the resulting HTML was identical.

The two screens had been implemented by different developers at different points in time. Rather than reusing code that already existed in the product, the second developer implemented the screen in his own way. As a result, the codebase became more difficult to maintain. Months down the road, it took twice as long to implement a simple bug fix as it would have if code had been shared.

A well designed user interface, by its very nature, is consistent. A button is represented in a very specific way, consistently throughout the entire application. There may be variations, but the user will always recognize it as a button. As such, a user interface, by its very nature, should be modular. Like a set of Legos, each component should be reusable in different contexts.

This modularity should apply not just to the appearance and behavior of the UI components, but to the code that generates them. If every button in the application is composed of an icon and label contained within a pill-shaped box, there should be a chunk of code that can generate every button in the application when passed the text for the label and the ID of the icon. That way, when the team decides that they want to change the button, they don’t have to implement the change in 100 different places throughout the application. The change is made once within that single chunk of code, and every button in the application automatically exhibits the change.

The last time I wrote about Shopify's homepage, I heard a soft grumble from someone who worked there that they wished more of Shopify's tools were accessible. So I was pleased to find a new design system from the e-commerce company, called Polaris, highlighting accessibility as one of its core fundamentals. Polaris provides documentation, tools and components for building with Shopify, including a UI Kit and React component library. The combination of resources helps people with different skillsets get involved, which is cool.

The React component library has nice looking, (mostly) accessible demos and they've encouraged participation on Github. So if you find something that could be improved, let them know! I found some color contrast issues with their demo site and a few issues with components which I plan to file on Github when I get a chance.

Overall, it's really awesome to see accessibility being advocated in design systems. They're great opportunities to bring awareness to accessibility and offer pre-built components that have it baked in, helping consumers get accessibility right from the start. More of this, please!