After my last post, I received many responses from the readers. This encourages me to share more experience about the pain points and solutions in the process of addressing UX problems. Today I will talk about the five must-have in a . If one of the components is missing in your , I cross my fingers to wish you a good luck for operating the system well with positive user feedback.

Why 2B, not 2C?

The design towards a consumer-facing application is different from a business-facing one. The former engages its users with simplified workflows as well as intuitive visuals; however, for the business customers, their focuses and decisions are much more rational. Aesthetics is not the primary principle for an analytical ; instead, decoding domain complexity turns to be a higher priority task for designers. Meanwhile, the consumer-facing design emphasizes originality. It is hard to prioritize components for unified experience with the creativity-driven results. With such perspective, you may have already got how different the strategies would be when employing components for these two types of applications.

The five key components

It’s time to uncover the list of five key components. Feel free to give me feedback if you have any.

The five key UI components

Navigation, a GPS mapping your experience across places

All applications have their own navigation systems. The systems guide their users to shuttle through workflows and complete tasks. Navigation is a fundamental component to structure an application. Without it, your users will be in a dilemma after the first click.

Not only in the digital industry, but also in our physical world, people are getting navigated everywhere. For example, a way-finding system in the airport is key to the passengers for their arrival or departure. People catch up time for the destinations. Nobody will be able to spend enough time on researching the space. Therefore it’s important to keep the navigation simple, visible and clean, so that the users could achieve their goals in a short time.

Dallas/Fort Worth International Airport Wayfinding (Source: FontsInUse)

Usually there are two to three levels of a global hierarchy. If more levels being involved, except they are placed for a specific purpose, you should reexamine the hierarchy design to reduce complexity. So that it is easier for your user to click through the application with confidence.

In-content navigation is another type used frequently. Just as its name implies, such a component is placed in a specific module in order to switch the parallel content. Meanwhile, it should not conflict with the global navigation, as said, it belongs to a branch of the latter.

An example from Google Analytics — Traffic Channel, Source / Medium and Referrals are gathered together for user to view the visualizations in the same group.

Some time we will add mega menu to facilitate one more level of complexity. But no more than two please — birth control your navigation to avoid making the users dizzy is a principle to promote friendly experience.

The mega menu of Amazon’s “Departments” is a case with two layers of hierarchy

The most common alignment patterns for navigation are either on the left or on the top, or both. The purpose for such a layout is to meet people’s reading habit, as well as reserve enough space for them to handle content with their right hand.

A screenshot of the UI templates from WrapBootstrap

Navigation reflects the skeleton of an application. It is one of the most important components in the library of a design system.

Notification, a messenger sharing system feedback in real time

A user interacts with an application to accomplish his tasks. He receives feedback from the application to learn about the results of his operations, as well as system statuses. All of these feedback will be presented as notifications at the first glance.

Based on the severity level, there are four types of notifications: Error, Warning, Information and Success. The system pops up an error message to remind its user a very bad thing happened. He needs to give up his current focus and take care of the problem immediately. A warning message shows up when the system wants to warn its user about a potential risk. He still has time to process the risk, but should take action as soon as possible to avoid system performance is impacted. Informational notification is about something neutral. For example, a new version of the application is released. So the releasing could be announced with an informational notification format. Success message gives the user positive feedback. It doesn’t require his response; instead, it just appears to report the good news, and then exits without interrupting the user further.

On the UI, the four types of notification, are dressed with specific colors to enhance their visual difference. These colors are selected in purpose to make the notification representatives visually more comprehensive.

Bootstrap alert colors in the banner style (Source: Bootstrap Alerts)

Meanwhile, the notifications are formatted with distinct styles. These styles also have functional meanings that will strengthen out the interactions. For example, a modal notification pops up to enforce the user to make a decision before continuing his work; however, a banner notification or a toast notification may just show up somewhere to inform the user a situation without interrupting his work arbitrarily.

With these UI treatments, notification can play its role much better as a communicator to facilitate to exchange ideas and decisions between the system and its user.

Visualization, a narrator telling a vivid story of data in visuals

Each enterprise application should definitely plot a set of charts to narrate the data in a visual way. That’s because the data itself is so abstract to be interpreted in a human manner. Visualizations help translate it to a vivid story so that it’s much easier for the readers to understand the data, do analysis on it, and then make a good decision.

The main purpose to deploy visualizations in an application is to monitor data changes and get hints towards the problem.

The most common visualization types are two dimensional charts: bar, pie, gauge, heat map, tree map, spark lines are used frequently. Three dimensional visualizations are used in some ways if a third level of data needs to be compared, but since there are readability issues, I recommend to avoid using a 3D visualization unless there is a fairly solid reason. It is because our eyes tend to flatten the world when processing signals to help the brain decrypt the signals in an easy way. Thus, if you were inserting a 3D graphics into your application, please hold on and think for a second about whether it could be replaced with a 2D graphics.

Today there are a few customizable JS libraries can be adopted in the enterprise environment, like Highcharts, D3.js and Google Charts. Each of them has its own uniqueness. It’s a lot of easier to customize a library rather than build the visualizations from scratch. Meanwhile, there are companies, like Tableau, Trifacta, and etc., are doing business on top of data analytics via these visualizations. And many researchers are dedicated on this topic as well: Edward Tufte, Fernanda Viegas and Martin Wattenberg, Jeffrey Heer, and etc.

Default line chart options in Highcharts library

This type of visualizations are very generic that you can find them out in most of the applications, as well as they can be customized with ready-to-use libraries.

Another type of visualizations is more related to a specific domain. The domain has its own language to illustrate data. For example, for oil and gas industry, log view is a type of standard visualizations to record well logs and seismic changes. Shapes and colors convey special scientific meaning in this scenario.

A log visualization example (Source: Nature)

Compared with the other UI components, like table, visualization is the most humanized way to elaborate your data and improve the application experience.

Data Table, a librarian maintaining your data in orders

Data table is all about data. Data is presented on the GUI in text. A table helps to group the data in a meaningful way. A typical data table is not only about columns and rows; what’s more, it must include features, like sort, filter and search. The reason to involve these add-ons is either to target a specific element in a mass quickly, or to find patterns that uncover the truth.

A typical data table (Source: ag-Grid)

Enterprise data sets are usually huge.That’s how the users prefer a compact view to display more rows on the screen. Laziness is a nature of human being. Nobody likes spending time on clicking the pagination or scrolling the page. That’s how first screen becomes important to designers.

Different from above components, data table is compatible enough to be nested with various composite components. For example, a form, a wizard, or another table. And it is common to have the mixture existed in one scenario.

Meanwhile, data table and visualization are used together frequently. They are the best buddies on presenting data in union in order to help the user understand data across the board.

An example of chart and data table combination (Source: WrapBootstrap)

Form, a translator promoting collaboration with comprehensive dialogs

If data table is the most compatible component to work with other composite components, form is the best team player to incorporate various base components.

The base components are listed as a form in order to assist the user to complete his task: text field is a sweetie being used frequently in a form. It restricts the user input in some degree as well as maximizes its flexibility at the same time. Selection is the same, no matter single select or multi select. The difference is the user has nothing to do with keyboards for the latter, whom has defined the options in a list already. After the form is filled, hit the button (for web experience only, it is not mandatory for mobile interaction) to send all queries to the server, and then enable next step.

An example of the enterprise forms (Source: Oracle)

With the back and forth, system finally understood the user’s intention, and then generated the needed outcomes step by step.

My introduction towards the five types of UI components is very limited and general. It’s hard for me to touch all of the aspects in one article. But this is a starting point that you can get some insights about the components, and then create an engaging digital experience strategically. Meanwhile, I didn’t talk about base components. They are too basic to be mentioned. You definitely know them better than me. So I am not going to waste your time on reading my two cents.

Source link


Please enter your comment!
Please enter your name here