Learn badge user interface best practices — This article covers badge design considerations in user interfaces. I published the file I created to illustrate the examples in this article to the Figma Community. Badges represent statuses, events, categories, content tags, and notifications. Badges typically comprise of text or numerical values, iconography, and identifying colors. Badges can be…

Alert design best practices and examples — From the mundane to the life changing, we are bombarded with notifications that annoy, alert, and redirect our attention and actions. Although alerts in our digital world may seem trivial, they should be crafted with great care and responsibility. This article focuses on how to design better user interface alerts. …

Learn accordion UX/UI design best practices — Accordions encapsulate content that’s revealed when clicked through an expand and collapse interaction. They are used in FAQs, product information, forms, navigation, and tables. They are best used when the user only needs a few key pieces of content on a page. Keep in mind that the use case and…

Data powers our world but the user interface often gets in the way. Learn design techniques to build better data tables. — The modern world runs on large datasets but users often suffer with poor table designs. This article explores ways to improve table UX through a number to UI considerations. Keep in mind these are just examples. The user and use case should drive your design decisions. Arrange columns in order of importance and visually distinguish identifying columns

Expanding from my previous article, this article explores how to design table UI patterns to customize columns. Customize what columns are shown

A comprehensive visual guide to designing features and functionality for enterprise SaaS tables — Many people got value from an article I wrote on tables in 2017. I created an updated version of this article with new visuals. The future looks on the past through data. Everything happening now lives on through memories subject to bias and recreation. History is determined by what’s…

Toggle on and off boolean properties from a single cell to build comprehensive tables in Figma — I published a responsive table file to the Figma community. I built it from a single cell component. In this article, I show how I built it out and how to combine cells into complex tables. The single cell component table | Figma Community Get the free responsive table file here www.figma.com If you’re like me, and prefer to follow along with a video instead of a long article, check out this explainer video below.

This article explores how The Hawthorne Effect and Observer Bias impact user research and how to mitigate it. The Hawthorne Effect The Hawthorne Effect refers to the phenomenon when people change their behavior when they know they’re being observed. This effect was discovered after a series of studies were conducted to determine how…

13 issues design and engineering teams face — Over the last decade, design systems have gained popularity for their benefits, such as improving consistency, collaboration, and efficiency — they also come with some notable downsides. This article explores potential issues designers and teams face when building and maintaining design systems. 1. Initial Time Investment Building a comprehensive design system takes time. Before…