Background Image

Why You Need to Understand Realtime UX for Reactive Apps

30 Aug 16

The rapid adoption of realtime UX frameworks like React and others have shown the demand for easy-to-use tooling and infrastructure that can make apps more user-friendly. But there are some fundamentals to understand in this realtime revolution.

Before the world of realtime apps, actions were obvious and simple. Click a link, page reloads, and the new content quite obviously appears before your eyes.

So instead consider several users in this system who interact with the same data and whose content view is updated without a page refresh. Here, changes can be much less obvious to the user, and actions and status need to be more considered. When content changes in front of someone despite their inaction there is opportunity for uncertainty to take hold.

Dominic Nguyen wrote:

“In the realtime world our challenges are not only to build delightful features, but to translate complexity and illuminate causation in data.

Translation is to express the sense of words in another language. It is expressing the complexity within our apps in a way that is natural and easy to understand. In practice, this is just reassuring users that our apps can understand, register, and respond to their intent.

Causation is the relationship between cause and effect. Our goal is to illuminate relationships in data which just means to show how two data points can conceivably lead to a new insight or that lever A affects lever B.”

He goes on to highlight 3 key principles to harness the power of realtime.

1. Be State Aware

The user should know the state of the system. At all times the product should communicate what’s happening and confirm user action.

Applications attempt to provide structure to an otherwise unstructured system. Since realtime reactive interfaces can change without inherent signals – like a page refresh – developers should be transparent by including the appropriate signals to communicate state – such as action confirmations or loading timers.

2. Expect Change

The user should know what to expect. The product should communicate what will happen when a user acts.

Surprises aren’t always good! Consider a vehicle as it transports passengers to their destination. Surprises in this system are flat tires and engine smoke. Unlike the car, the digital medium of an application allows us to anticipate and inform users of change – such as rendering a skeleton template as data is loaded.

3. Preserve Context

The user should know where content comes from and where it belongs.

Since we can’t possibly see or even consume what’s happening at all times in realtime apps, it’s important that we establish and reinforce the sense of space – where each screen and button lives in relation to other elements. Doing so means that we create landmarks that the user can rely on to get their bearings – such as when adding items to the top of a list.

Please get in touch with on twitter to talk more about reactive applications and realtime data!

Want to see how easy it is to get started with Diffusion Cloud? Sign up for a free demo here.

free-demo


The Diffusion Intelligent Data Platform manages, optimizes, and integrates data among devices, systems, and applications. Push Technology pioneered and is the sole provider of real-time delta-data streaming™ technology that powers mission-critical business applications worldwide. Leading brands use Push Technology to fuel revenue growth, customer engagement, and business operations. The products, Diffusion® and Diffusion Cloud™, are available on-premise, in-the-cloud, or in a hybrid configuration, to fit the specific business and infrastructure requirements of the applications operating in today’s mobile obsessed, everything connected world. Learn how Push Technology can reduce infrastructure costs, and increase speed, efficiency, and reliability, of your web, mobile, and IoT application.

LEARN MORE: Case Studies and Developer Resources