Skip to content
micro-frontend.dev 2.0

Architecting composable applications with user experience in mind

Author: Natalia Venditto

Date First Published: Wed Jan 04 2023

Architecting for the user (experience)

Architecting a decoupled system with the user in mind, implies specifying from the use-case or user story, in a way that we can effectively decompose the system into smaller parts, connected by an API-First data distribution system.

An in-depth analysis and understanding of the user’s needs, and the business goals, will help us to identify the right level of granularity and decoupling needed, as well as what technologies, mechanisms and processes that are better adjusted to solve each specific use-case problems.

architecting for user experience usecases

Know your user

Being truly intentional about architecture for user experience, means you try to understand and approach the individual characteristics and context of each user, to the maximum extent possible.

User diversity

Users that will interact with your application have different abilities and needs. This is why it is very importat to cater for those, by implementing user-experience and accessibility best practices.

Global userbase

A global user-base implies your application will be downloaded and used by people in different geolocations, and therefore, with different network conditions. This is why it is important to optimize your code and your architecture, to reduce latency and throughput related performance degradation.

Device capacity

Not only the network speed may differ, but the devices our users employ to intract with our user interfaces or frontend, may be very different to the ones we use at development time and to test our apps. At the time of writing this website’s info, end of 2022, only 28% of the world’s population use an iPhone (16% in LATAM and 14% in APAC). Most users’ will browse your app from a USD 200 baseline smartphone.

You can learn more visiting Alex Russell’s blogsite, where he has a lot of data backed-up information about the device gap.

Know your business and benchmarks

It also means that you have to be work together with the business stakeholders, to understand the business goals and the business metrics that will be used to measure the success of the application, while still keeping the user at the center of the experience.

Critical path budget

The critical path (or render-blocking path) defines the resources that must be sequentially downloaded to correctly render a webpage. For a USD 200 smartphone, the critical path budget should be approximately 150 Kbs. Read more…

Bounce rate

The bounce rate represents the percentage of visitors that wil abandon a user-experience after a certain amount of time, when they’re not satisfied with it because it is slow, irresponsive or not meeting their expectations.

The bounce rate is about 32% for mobile devices taking between 1 and 3 seconds to load content, and 90% for sites that take between 1 and 5 seconds, to load content. Read more…

Request assets count

Another important metric to determine we’re implementing good practices with performance and the end-user in mind, is to limit the asset count to 50, and and keep the total size of the assets in one page, to under 3MB. That means the total size of static assets like images, fonts, videos, etc. Read more…