Benefits of Implementing UI Common Components

A Component is a piece of independent User Interface code designed to perform a granular and specific function in your application. The simplest and most common examples are buttons, drop-down-lists, text boxes, etc. A common component may also be complex (e.g. containers made up of multiple components or widgets specifically coded for data visualization). Implementing common, shared or reusable components is already a prevalent practice in the computing industry, and it’s supported in your favorite Javascript frameworks (e.g. Angular, React/Redux and Vue.js). If you’re not already using them, below are some basic benefits of implementing common components:

Saves Valuable Coding Time
This is probably the most obvious benefit of designing and writing common components. Code once then simply reuse it. Common components also save coding time for defect resolution and style updates, because the results cascade to all implementations. In some cases, you may need to extend common components, and since there is already a base code to start with, you will not have to recode them. All you need to do is implement the existing code and build upon it to handle those special cases common components don’t cover.

Enables a Consistent User Experience
Providing the same user experience across related applications is ideal because it reduces the learning curve for the user. Consistent visual cues aid the user in figuring out the behavior of controls and assists them in going through the workflow. It also gives your application that professional feel and shows you gave thoughtful consideration towards designing a good user experience. This is also a great starting point in establishing usability standards across an enterprise. Performing actions the same way across a suite of related applications among a common user base is extremely beneficial. Humans are creatures of habit and the use of familiar controls reinforces it, and consequently promotes efficiency.

Provides Consistent Business Rules
Sharing common components also promotes consistent validation and adoption of business rules. Thoughtful design and implementation should prevent these types of situations and sharing common components—specifically business components—provides additional safeguards not only across modules in an application, but in a suite of related applications. Entering credit card information is a good example of this. Not only can you reuse the look-and-feel of capturing the data but the functionality (e.g. determining which card type is being used, formatting, security code, etc.) and data validation comes with it as well.

Makes it Easier to Test
If you did your due diligence, your common components should be focused to a specific functionality. The operation should also be very generic and simple. Having said this, it should be easier to test not just in development (TDD) but also during systems validation. This will enable QA to construct simpler and directed test cases—not to mention the fact that a consistent user experience benefits your QA as well as your users.

We hope you found this information helpful. For more information on how Anexinet can help your enterprise organization provide a consistent, game-changing user experience in other ways, please check out our Application Scoping & Prototype kickstart now.