Predicting UX Engineering
(References: Full codebase” Live Website))
Introduction
A solid website experience is the result of a joint effort between a designer and a frontend engineer. Each individual brings his own expertise to the table. Through collaboration they build something better than have built in one of the two. As a frontend -engineers we are used to taking designs, implementing them and then continuing. However, there are skills that engineers possess that designers do not do, that can bring user experiences to a higher level.
Different vantage points
Designers work in an artificial environment. There are no network requests. Screen dimensions are usually dissolved. Performance is not care. This is not the debt of the designer. Figma is not Google Chrome. Figma is far away from the real world of slow internet connections and devices with limited processing power.
Frontend Engineers live the opposite experience. They are involved in interactions in the browser. They consider network requests, latency, caching, memoizing, rendering, bundling, lazy drawers, browser behavior and much more. Although these terms are technically focused, their final goal is to improve the user experience.
Engineers tackle exactly the same problem as designers, but from a different perspective. Engineers have the power to implement these techniques to improve the user experience.
What you have to focus on
The first step to improve the user experience is to decide what to work on.
Schooling teaches us to think of performance in abstract terms. Big O. Big Omega. Big Theta. Small o. These are all very abstract methods to define performance. They are far away from the real world. They have their place, but it is not in this article.
Imagine that you are looking for some improvements to make. You will find a code in the frontend that has theoretically poor performance. It can be refacted to have better performance. In reality, the average duration is 50ms. Flashing takes around 100 ms. [1] This is an improvement that the user will not notice.
Look to find out what you can work on, at real situations. Real devices. Real internet connections. Real complaints. Focus there.
An example
(View the following section for technical details)
Mine Photography Portfolio Is a good example to consider. User actions are quite limited. They can view leaves and photos with full resolution through galleries. Think by the user trip. What actions could the user take? Knowing this, experiences can be built that prepare the website before users act, so that interactions feel immediately.
A user wants to see the content as quickly as possible.
Since the page is loaded, you give priority to what the user can see in his viewport. Use Placeholder images, such as BlurhashesTo let the user know that things load. Put priority on the visible miniatures and postpone everything else for later. While the user browses on the page, give a priority to loading the miniatures that the user will see below.
A user wants to browse through a gallery.
Apply the techniques of the previous section.
In addition, now that the user browses at a gallery, their next action is to select a miniature and view it in full resolution. Once all the miniatures are loaded, start photos with full resolution of the miniatures in the user’s viewport.
A user wants to browse photos with full resolution.
Due to the previous step, the photo that the user has selected has already been loaded. Their next step is to look at the previous or subsequent full resolution image. Give priority to loading these images.
Leather
I originally had this and the previous section together. However, I realized that a deep technical dive is not the point of this article. Every situation requires enormous different technical solutions. I will leave this part if you want to know more about specific technologies and techniques that I have used.
Think about the experience
As engineers, we have more to contribute to great user experiences than we often realize. We understand the ins and outs of the applications that we build – the user flows, the edge cases and what happens after each click. By using that knowledge to supplement and improve what designers create, we can build experiences that go beyond what can build alone.
Footnotes
[1] https://en.wikipedia.org/wiki/blinking
#Predictive #Engineering #Travis #Bumgarner