Learning how a browser works as a product designer.
Welcome back, guys! It’s been quite a lot of time since my last post so I am back with some new learnings and insights to share with the community.
So, today in this post, we are going to talk about a topic that a lot of designers ignore but it is really important to understand and learn. And the topic is How does the browser work?
One question I always hear from designers is, we are Product Designers, we understand user problems, do user research, and play with Pixels and so many other design-related stuff, so why do we need to understand how the browser works? But let me tell you, it is really important. Being a designer, if you want to focus and improve the end-to-end journey of user interactions and create an impact through UX, then it is important to understand and learn how the browser works. Not only this but knowing how browsers can help you in providing great details in your design deliverables to the tech teams, because whatever you build or design, eventually, it is going to run on the Browser (for web applications).
You are a product designer and if you don’t know how your product works, then it doesn’t add any meaning to your profile. So, knowing how the browser works, can give you an edge against other product designers.
So, in this post, we are going to learn a few things about how browsers work and their role in designing interfaces. Don’t worry, we won’t go too technical rather these learnings will help you in designing detailed UX flows, and help you organize your UI components and screens in a way that your Devs will thank you for doing such great work. Mark my words.
So, first of all, Why browsers are important?
- A browser is an environment that works on multiple devices.
- Designs for browsers need to be responsive and adaptive.
- Interactions are the key elements in the designs made for browsers.
Knowing how the browser works is the most fundamental thing to learn as a UI /UX designer. Browser is a multi-communication channel that is a bridge between user actions and data centers. But in the background, there are a lot of things which are going on. And if you know how your designs are rendered and work behind the scenes, then it can help you design great UX. Also, it provides good opportunities for UI designers to delight users with creative designs, or design experiences in case things go wrong.
Learning browsers as a designer
Browser is not just an interface but it is a complete experience and there are a lot of transactions happening between users, front-end, back-end, and database. And for crafting a smooth and great UX journey, each interaction matters. Each transaction consists of user actions, user reactions, and user feedback.
Not only the transactions but also the way things are loaded in the browser and the whole structure is also an interesting thing to look into.
So, let’s start.
Div way — Everything is in the container.
Every browser has a DOM structure — which is nothing but a hierarchical representation of an HTML or simply a document with the root node and a series of child nodes that represent the elements, attributes, and text content of the document.
If we correlate with our Figma designs, then also, we also have a master Frame and a lot of nested frames and groups which makes a complete screen.
In the browser, everything is wrapped in the Div which are flexible containers with some padding or margins (spacing around those divs), and these divs with specific paddings and margins play an important part in the whole information structure of the UI. There are different defined div containers like head, body, section, footer etc.
Similarly, we design everything in frames, we also give some sort of spacing which is nothing but the padding or margins present in the browser. That’s the reason why, today we have an Auto-layout feature in the Figma, which has the options to set padding, margins, and flexibility to define the behavior of the UI elements to be responsive and adaptive. If you define each element with proper grouping, padding, and margins then it will do wonders for your front-end team because then it will be easier for them to understand the whole structure and replicate the same behavior of your designs.
One more important thing is Naming the layers, we do it not because it is a good way to organize your files but because it defines the whole body content of your frames, and in collaboration with your front-end team, you can achieve consistency in the naming of UI components and coded components to smoothen the transition of designs to code.
Design Tokens are one way to keep the naming of the UI styles and coded components the same in the designs and code.
API communication
Application programming interfaces (APIs) — are the core part of how information flows between the front-end, back-end, and between databases. Four parts of the browser.
As a designer, you need to understand the role of information, i.e. which information will be present by default and which information will be retrieved from the database. The reason to understand API callings is that it helps you design the UX of loading, validations, error cases, and edge cases in case things are not working since users are not aware of these things and your UX shouldn’t be broken in any case.
If we look closely from a designer perspective then these APIs involve a lot of UI cases that can possible
- API callings — There are certain UI components for example tables and forms where there is a requirement to call the data from the Server and depending on the complexity of the data, we need to consider to show it to the users that things are in processing or may take some time.
- The time it takes to retrieve data — As mentioned in the above points, returning information from the server might take some time and on UI, it should be reflected with proper messaging for user feedback.
- Data Validations —Sometimes while returning the data from the server, Data is not returned as expected, in this case, there are a lot of negative scenarios possible and it becomes the responsibility of the designers to think about the designs or interactions in such cases.
Understanding how your designs are using APIs can help designers recognize different limitations or opportunities to design UX, leading to more realistic and innovative designs.
Not only this, But while creating the high-level prototype, understanding APIs allows designers to create prototypes that closely mimic the final product by using actual data and functionalities including the data validations, and loading states.
Every UI component has a UI state
Each interface is made of a lot of UI components and each component has a UI state and each UI state communicates its behavior to the users.
If we look at each UI component then each component has 3 states that provide three things Anticipation, Action, and Reaction. For example, in the case of form inputs, it has a Normal state, active state, and filled state, again drilling down more, depending on the user interactions other states can be possible. And since we design for browsers, and browsers run on multiple devices, your designs must also work on different screens and devices. There is a real need to provide to right state of the UI component to let users understand what is happening.
Once you know how things are rendered and work in a browser, then it gives you a great idea of how each UI component will work and you will be able to design every state for the component. We do it for buttons, and form inputs, but when we look at how tables are formed or rendered in the browsers, then it can also have a lot of UI states for example, when you open any screen with a table, first of all, your div container will be formed, then it will load the data based on the whether it is available on the front end or back end, and once done, it will be visible to the users or may not completely load. So, now if you look at this situation, then there can be a lot of UI states that can be possible, for example, to show loading, we need to have a skeleton state, for loading too long, we might need a timeout screen, if things couldn’t load, then we need to reload screen, and once everything is loaded, then we can show data. So, now you can see, that keeping a note of each state while designing UI screens helps understand the state of the UI at each point in time and helps the user make a decision.
Also, detailed documentation of UI states helps your developers understand the expected behavior of components, leading to a smoother development process and reducing the likelihood of misinterpretation
Different states can be used to provide clear feedback on user actions, such as indicating success, errors, or required fields. This helps users understand the outcome of their interactions and what they need to do next.
So, these are a couple of things that might be helpful to learn and know how the browser works as a product designer.
