The Art of the Frontend: Prioritizing UX
I believe the most important thing in the world of frontend development is UX. It’s more important than UI. UI could be simple or fancy, it depends on your design and product. Every UI should work, period. There is nothing to discuss on that. But the question is, how should it work? In this post, I am gonna talk about some UX tricks and how these tricks relates to JS and shortly frontend development.
Tab Widgets
Most of the time, you see these tab widgets on e-commerce websites. Their design is straightforward:
It’s end-to-end simple. You just need to combine at least 2 widgets together and put buttons above for navigating between them. Typically, these widgets display products in sliders.
Often 10 products for each widget shown on average. If product images are too big, or in incorrect format, loading time of images is getting longer. As far as I can see this is not a problem for a widget that contains 10-15 products. Most devices can handle this. But we can make it better. Ah, tab widgets, hang on we are getting there. If you were the developer, how would you handle this? Let’s start with the basics.
You can add loading="lazy" and decoding="async" to off-screen products. And vice versa to initial ones. If available, you can use .webp or .avif image format. Also if you know the available space for the product cards, you can specify inital width and height, it helps with CLS. With these methods, each image will be loaded when its turn comes. If the widget is not in above the fold area, we can add intersection observers to images or directly widgets. But for widgets, we need to think different. Let’s imagine you have on-demand code structure. This on-demand structure are simply trigger based widgets. They render only if you make requests (or function calls, depends on your structure).
Trigger Based Widgets
That will be the method of each widget. Let’s go deeper. Imagine you have 4 tabs. Each one contains 15 products, now you need to handle 60 images (unless more js JS required for interaction). Let’s not render 4 tabs together.
Choose one that is going to be rendered initially. Now we need to prepare the requests for each of them for lazy loading. It’s a simple step too. When you make a new tab request, you need to remove the current tab from the DOM and replace it with a new tab. After that, you are almost ready to send this task back to your ACM. Why almost? Because now there is a huge CLS in your code. When you switch tabs, height becomes 0 and new tab fills this empty space. We can solve this problem with a loading spinner. The most basic solution for this is putting a loading spinner as a placeholder on the tab’s container and toggling it when switching tabs.
Here we are. You have produced fast, reliable and optimized code for your widgets. Now when an end-user comes to this website, they will have 4 options to look out for finding their desired products. If you want to go even further, you can fetch the other tabs while the user is still swiping the initial one. You can register these responses in window object and toggle them now without making a request. This is a simple example of how you can improve your UX.
You have just a few seconds to engage the user unless the user is loyal to you or looking for a specific product. Otherwise, they will leave. So, you need to be fast and reliable. You need to be user-friendly and user-oriented. You need to focus on user experience.
Conclusion
Embracing this type of strategies represents a pivotal shift towards prioritizing the end-user’s needs, which is fundamental in crafting successful and dynamic online environments. As we continue to push the boundaries of frontend development, the focus on UX will undoubtedly remain at the forefront, guiding the evolution of web design towards more accessible, efficient, and enjoyable user experiences.