Select appropriate user interface patterns

This story gives you list of considerations to identify appropriate user interface patterns. Continuous improvement is the buzz word in the IT world today. First, you introduce possible options for user interface (UI) and accessibility to web applications. Thereafter, you continue to analyze appropriate UI and solutions to offer.

Purpose

Over time, the digital ecosystem has adhered to the demand to adapt to the relevant UI space. Also, the pace in which technology is evolving (which usually understands web accessibility as an improvement and not just a requirement) and business needs to adapt to these latest technologies, makes it difficult to choose an appropriate UI for developers. This practice will categorize the UI patterns based on different scenarios, limitations, and the type of backend applications.

Getting started

Amid different technologies, proprietaries, and open source, these are the two most relevant, broader, and fundamental UI characteristics:

1. High user interactivity: On demand availability of interactive elements beyond the static desktop application environments (such as menus, trees, sliders, and so on) which can be programmed under any user events (such as click of a mouse, pressing a key, drag and drop, and so on) and with complete personalization.
2. High speed response to the user’s interaction: Systems must have the capability to handle user responsiveness on higher throughputs and lower latency. It could be on any level as in-tag, table, or even the whole webpage which is decided and implemented by the developer. Here is a list of the available UI patterns relevant to the present-day digital- world and their significance.

User interface patterns

Embedded UI in monolithic web application:
The conventional menu navigation also known as two-way architecture or MVC architecture pattern-based monolith UI is still a good choice based on a small set of requirements, and no rapid development and change requirements. This monolithic application has a clear separation of concern layered with MVC pattern. One major drawback of this pattern is that it is bulky in nature and it changes anything and retests everything. Common utilities of UI can be shared across UI pages and multiple databases can be handled with this monolithic design approach. While writing a cloud-native microservices app, to start with, monolithic is one among the many recommended approaches. With time, there is a chance to decompose it later.

RIA interface:
Rich internet applications (RIA) may substantially improve the user’s experience on web based on two aspects usability and web accessibility. It has a distinct isolated area known as the sandbox where the client’s serving of RIA is executed. One special feature of RIA is a client engine that intermediates between the user and the application server. The client engine downloads when RIA launches.

In order to understand the problems of accessibility presented by RIA, broadly, there are some technology models where the RIA may be created:

1. With standardized technologies such as (X) HTML, CSS, or JavaScript
2. With embedded technologies, using specific (X) HTML tags that allow the execution of external applications within the user agent
   For example, Adobe Flash and Microsoft Silverlight follow such models

From a development point of view, to implement an RIA, it must have three distinguishable layers:

1. The structure and content layer: This layer define different blocks of webpages such as header, content, footer, browser and so on.
2. The presentation layer: This is the layer on which the elegance of visual appearance is usually designed along with the layout of structural blocks using CSS.
3. The behavior layer: This layer is designed to be an event-driven aspect that programs how the page must react based on the user’s actions by directly interacting with the document object model (DOM) using JavaScript. The information updates are encoded by applying a combination of technologies known as AJAX, where you can perform asynchronous data requests to the server (that is, without reloading the page) and immediately present them to a section of the webpage.

SPA Interface:
Single page applications (SPAs) are thin client and normal web-based UI applications. In today’s digital world, a robust SPA is designed by reducing monolithic complexities. (For example — page-switch time, server-roundtrips, and so on.) There are many open source JavaScript frameworks, such as Angular 2+, React, Vue, Backbone.js, EXT.js, and so on, that can provide a SPA solution.

There are some practical scenarios where SPA makes a good fitment:

1. Hybrid solutions: Though SPA architecture is more complex, and dependent on AJAX, WebSocket, and so on. for server communication, it is very useful to help develop hybrid UI application. Mobile applications are mostly hybrid in nature and can be accessed on any desktop browser as well.
2. Offline solutions: Web apps such as SPAs can handle many interactions on the client-side without even contacting the server(s). This feature allows for cutting short multiple server interactions and offers the ability to offline process to an extent.
3. Native-like experience: SPA allows offering a rich set of native-like features such as back or forward button, dynamic data loading from the server side, richer compatibility with RESTful web services, interaction with web components, and a fluid transition between page state and rich user experience.

Monolith UI consuming microservices:
Modern digital world has clearly separated UI applications from the backend and middleware system. A set of UI components are responsible to maintain the roundtrip with microservices architecture style-based backend services. In this scenario, a single monolith client-side application with an MVC-like pattern is designed to focus on logic and data to be displayed over the UI and not targeting any specific design layout of a consuming microservice.

Micro frontends generated by microservices:
A composite UI dashboard driven by microservices can be challenging. It is yet another way of writing a SPA. Here, each microservice provides its own small composite UI and each UI component is like a small API gateway. If composite UI techniques are different from techniques followed in building the traditional UI, it could pose a challenge when building a mobile native-app. However, if all microservices components are micro frontend-enabled within their own space, it becomes easier to transport, deploy, scale out and access independently. When you use a group of SPAs or self-contained executable microservices to suffice one larger business capability, circuit breaker (CB) pattern is mandatory to design the resilience and high-availability. This way, without discontinuing the entire ecosystem, as a group, you achieve something from the timeout situation that occurred within a single SPA or microservices.

Dynamic lightweight UI components — Plug and play web components:
The pieces of UI as a component are designed to be technology agnostic and dynamically a lightweight utility. This UI pattern is a cross-browser, cross-platform and cross-device to make it happen with specific plugins and dynamically make it readily available for download. Furthermore, it gives the UI designer the ability to rewrite any brownfield or write a greenfield application afresh and this offers a powerful way to enhance the UI of a website or webpage.

For example,

• Tiny scrollbar is a cross-browser lightweight JavaScript or jQuery scrollbar that comes with different plugins. It is a nice and elegant way to enable content scrolling on mobile and desktop devices.
• Google polymer and web-components backed by Google API is another such option that takes interoperability and encapsulation within itself.

Progressive web application (PWAs), responsive web-design and data-driven UIs are also relevant to the digital UI architecture design age.

Menu or icon-based CLI:
The command-language interface (CLI) pattern frames the appropriate commands in the language and enters them appropriately when required. But it is not always possible to remember each command when the pace of change in the ecosystem is quite fast. Similarly, you have a direct manipulation interface that presents the interface to a user in the form of a visual model (icon, object, and so on) usually referred to as an iconic interface. In this type of interface, the user issues commands by performing actions on the visual representation. For example, pull the file to open, trace a box to delete a file, and so on. Menu-based or icon-based CLI is the best alternative to trigger commands in certain contexts. For example, open a popup window, delete any file or execute any service.

No UI:
Today, web browsers act as a rest client tool as well. It is enabled with the scope of the desired payload (user inputs) to be sent while calling a backend API endpoint. The rest client browser has a certain level of UI which generates a response preferably in JSON structure. This means you do not need a dedicated UI to some extent. This is very helpful when you just need to check the status and health of the backend API compatibility with UI responsiveness without considering the proper shape and design of the content to showcase.