The right way to use drop shadows — All user interfaces are a collection of surfaces. You have the background, foreground, and the elements that float on top. To show users what screen elements are active, you have to use surface elevation. Some components that need elevation are toasts, cards, and menus. When you fail to use elevation…

Introduction to chip components Traditional checkboxes and radio buttons have become a thing of the past. They’re outdated and have lousy usability. Their tiny targets are hard to click with accuracy. The difference between a dot and checkmark cue can confuse non-tech-savvy users. The next evolution of checkboxes and radio…

A better alternative to native pickers — Booking appointments online is a challenging task on mobile devices. One reason is that most interfaces use native iOS and Android pickers that are a pain to use. Native pickers are the input components that spin like slot machines. The user has to swipe their finger up and down each…

Make information easier to read and scan — The most challenging design element to work with is whitespace. Whitespace is the invisible element that permeates every screen between the cracks and crevices of each component. There’s no standard on what the perfect amount of whitespace is. Designers must use their intuitive feeling to space elements, which is quite…

Make your UI look professional — Many elements on interfaces tend to mimic real-world objects. Drop shadows are one of them. These are helpful cues to indicate whether a window or panel is floating. Floating surfaces signify a temporary or momentary state that requires user interaction. For users to interpret floating surfaces correctly, your shadows must…

Make mobile navigation faster — How often do you click the back button on your mobile device? Users frequently click the back button to navigate interfaces. Since mobile devices have limited screen space, designers will divide their content across screens to make everything fit. As a result, users must constantly press the back button to…

Designing outside the box If you examine most mobile apps, you might notice they all look the same. They all use navigation bars, table lists, and a linear data display. …

The best responsive table design — There’s no better way to display lots of data than to use a table. Viewing tables on desktop screens is easy but difficult when viewing them on mobile screens. A data table expands horizontally and can’t fit in such a confined space. What’s the best way to display a large…

Optimizing call-to-action buttons for all users — Many apps use their brand color on their call-to-action buttons. Doing this may seem like a harmless act of branding, but it can actually hurt the user experience. Brand-colored buttons can lead to inaccessible text labels, button state conflicts, and a lower clickthrough rate. Inaccessible Text Labels Brand-colored buttons often have inaccessible text…