CategoryUI (User Interfaces)

February 24, 2021 — Where to put the label in a web form? In the early days, we talked about left-aligned labels versus top-aligned labels. These days we talk about floating labels. Let’s explore why they aren’t a very good idea, and what to use instead. Some people assume float labels are best because Google’s Material Design uses them. But in this case, Adam Silver recommends using conventional text fields which have the label outside the input (to tell the user what to type), and a distinct border all the way around (to make it obvious where the answer goes). Read more…

February 3, 2021 — Tooltips are powerful design patterns implemented to enhance the design experience by providing additional information precisely when users need it. The key to designing tooltips that fit seamlessly into the overall design is to plan for them early in the design process. Specifically, designing useful tooltips requires proper timing and proper implementation. In this article, Eric Olive will show you how to design tooltips that will amplify your mobile designs and explain where mobile tooltips are most effective. Read more…

January 18, 2021 — In this tutorial, Fortune Ikechi is going to show you how to use Grommet as a UI library for React applications. He’ll use Grommet as a UI library of choice to create a pricing component, this would help you have a better understanding of how to use Grommet. This tutorial will be beneficial to readers who are interested in developing responsive components in their React application using Grommet. This article requires a basic understanding of React and Styled-components. Read more…

December 11, 2020 — Software and apps often solve very complex problems for businesses and consumers in the way of sales, marketing, finances, and so on. But offering a product that solves your users’ problems isn’t enough. If the UI is just as complex as the original problem, user churn is going to be high. Today, we’re going to look at some tips for designing a simple UI regardless of your solution’s complexity. Read more…

December 8, 2020 — The 2019 Capgemini research institute’s report published after a research on the use of chat assistants showed a drastic 76% increase in customer satisfaction from organizations where chat assistants where built and incorporated into their services. But how does Dialogflow, a product from Google’s ecosystem, aid developers in building chat assistants and contribute to this quota? Read more…

September 25, 2020 — “Intuitive design” is one of those overused phrases that we as designers hear all too often from stakeholders and their requirements. In this article, Carrie Webster explores what intuitive design actually means, why it doesn’t make sense, how we can better approach design solutions, and what the future of interfaces might look like. It is aimed at user experience designers and anyone interested exploring these concepts in greater detail. Read more…

September 15, 2020 — We must effectively design to gain and hold users’ attention in order to have them use our digital products. In this article, Victor Yocco covers specific tactics with supporting research that are bound to help you design for attention. He also discusses the need to understand why we want to gain users’ attention as well as what our users’ needs are. Read more…

September 8, 2020 — Thanks to the wide support of the prefers-reduced-motion-media feature, we now have more advanced ways to design motion that can be creative and innovative while also being safer for those with motion sensitivities. Read more…

September 1, 2020 — In this article, Abdulazeez Adeshina will show you what storybook is about and how to use it to build and test React components by building a simple application. He’ll start with a basic example that shows how to work with storybook, then will go ahead to create a storybook for a Table component which will hold students’ data. You should have basic knowledge of React and the use of NPM before proceeding with this article, as you’ll be building a handful of React components. Read more…

August 20, 2020 — Ionic Framework provides first-class support for building fast and mobile-optimized applications for any platform using React. In this tutorial, Jerry Navi will show you how to build forms using Ionic React’s UI input components in this tutorial. You will also learn how to use a library to help with detecting form input changes and responding to validation rules. Finally, you will learn to make your forms accessible to screen readers by adding helpful text to your inputs’ ARIA attributes. Read more…