This tutorial will break down what UI Components and component libraries are, how they work, why they are used, and how they can make a developer's life easy.
Prerequisites
Knowledge of web development and interest in end-user experience.
UI Components- What Are They?
Source: Heavyweights on Dribble.com
UI Components can be thought of as building blocks or sections/elements of a user interface. When developers or designers are designing an app or website there are many pieces that come together to make the complete user interface. These pieces could include, input fields, dropdown lists, buttons, toggles, search fields, sliders, tags, and more.
UI components provide interactivity for the user as they move through the app or website. A good UI will make it easy for the user to tell the computer what they want it to do. Easy communication between the user and application is the goal of a UI.
UI Component Libraries
A UI component library consists of a set of ready-made components such as input fields, dialog, buttons, and more. These libraries can make the layout of your application much simpler, quicker, and easier and keep you from building it from the ground up. There are several benefits to using these UI Component libraries such as:
Accessibility - Libraries adhere to accessibility guidelines, so developers don’t need to bother with it.
Compatibility - Frontend developers often run into issues with cross-browser or cross-device compatibility. If we use these available libraries, they provide this compatibility out of the box and saves us so much time!
Look - Components already look fantastic with requiring any extra effort.
Easy to use - Many of these established libraries are well organized and have excellent documentation that makes them easy to implement and follow.
Potential Drawbacks of UI Component Libraries
While UI component libraries have some great advantages, as with most things. There may be some challenges as well. Some of these challenges are:
Library size - some of the UI Component Libraries tend to be somewhat large. If you are building a small project or app, it may not be the best idea to use a library, instead consider building your UI from scratch.
Look - While this was also listed as a benefit of using UI libraries it can also be a drawback depending on the situation. Your application's look and feel will largely be dependent on the style defined in the UI library so it’s important that this style aligns with what you want your app to look like.
Changes - If you decide you’re not necessarily a fan of some of the components offered and you move to a more custom design but still decide to use some of the components offered by the library, it can be confusing to know which components are custom and which are brought in by the library. This is especially true when you add new team members. Speaking of new team members, it can be a challenge when bringing on new team members when it relates to the UI library you decide to use, if they are not familiar with the library, it may cause a bit of a delay when they need to implement or change the data housed in these components. While this is true for most things, it can be especially true here since they are so many different UI libraries.
Quality of a Great User Interface
Great UI’s share eight qualities in common. Let’s talk about those qualities now.
Clarity
The first quality is clarity. This means the interface avoids obscurity by ensuring everything in the UI is clear. This could include visual elements, flow, or metaphors.
Concision
The next quality a great UI should have is concision or the reduction of redundancy (programmers may think of this as DRY - Don’t Repeat Yourself). Sometimes developers or designers can overcomplicate things to the user accidentally by over-explaining certain processes. It’s best to avoid this by only including the necessary content on the screen at one time.
Familiarity
Familiarity is also important when it comes to UI’s. If someone is using your interface for the first time some of the elements can still be familiar to them, using real-life metaphors is helpful in this scenario.
Responsiveness
Great UI’s will be responsive, this is quite possibly one of the most common words a front-end developer or web designer will ever hear in their lifetime. Have you ever used a website or app and you want to request some information and you are not sure if your request was processed or not? That is not a very responsive interface. Responsive interfaces will provide good feedback to the user when a request is made. You might see something like “please wait while we process your request”.
Consistency
Another quality that is super important in developing a user interface is consistency, keeping your UI consistent allows for users to recognize patterns throughout your application which will help them to navigate.
Aesthetic
Aesthetic, or artistic taste is another very important aspect of a UI. If your app is aesthetic, users will find more joy in using it.
Efficient
Efficiency is very very important when developing a user interface, if your app is slow users are going to find another solution very quickly.
Forgiveness
Forgiveness, applications should not punish users for making a mistake, instead, they should give them tips and point them in the right direction.
History of User Interface
1945-1968 - The Batch Era - In the batch era the input element of user interfaces was predominantly punched cards. The output elements added line printers to the media. There would be a deck of punched cards that described the program and a dataset. The punching of the cards was done on a typewriter-like machine. These user interfaces were extremely unforgiving and prone to mechanical failure.
1969 - Present - Command-line interfaces(CLI’s) - The move from the batch era to CLI’s improved the speed of requests from hours or days to just a few seconds. This also allowed users to change their minds with real-time feedback.
1985 - SAA User Interface or text-based user interface - IBM created the Systems Application Architecture(SAA) that included a common user access derivative. This created what we now know as Microsoft Windows and DOS or windows console.
CometChat UI Kit
CometChat's UI Kits are an option to launch a fully functional chat application with awesome UI & UX. In CometChat UI all the UI Components are interlinked and work together to run a fully functional chat on your website or application
Summary
In this tutorial, we covered UI components including UI Component Libraries, the benefits of using such libraries, and what goes into building a UI. Sign Up to the developer dashboard and explore how you can start building you a chat app with kick-ass UI & UX.
**About Author
**
Randy is a Full Stack Software Engineer that studied at Flatiron School. His strongest technical skills are Ruby, Ruby on Rails, JavaScript, React/Redux and PostgreSQL. He enjoys learning new technologies and expanding his development skills whenever he gets a chance. When his face isn’t buried in the terminal he loves exploring new places, traveling, live music, and camping.
Randy Steele
CometChat
