As a front-end developer – the one responsible for building graphical interfaces – there are several ways to approach a page in a web project, depending on the goal.
In past projects, I was sometimes asked to simply follow the mockups created by UI designers. In that case, it’s purely about “web integration.” The issue is that mockups don’t always reflect real-life usage of a page, especially when dealing with large amounts of data. This is where ergonomics and user experience (UX) come into play – and it’s a challenge I enjoy and often encounter when working on pages for Babbar and YourTextGuru, where lots of data is displayed on each site page.
From an UX perspective, ergonomists generally intervene once the page is live, tracking user behavior to adjust the page accordingly.
As a front-end developer, I like to anticipate user behavior to provide a good experience from the very first interaction with a new feature. And for that, you need to put yourself in the user’s shoes.
In this article, I’ll walk you through my thought process behind the positioning page that went live a few months ago on YourTextGuru.
The Difference Between UX, UI, and Product Design
First, let’s clarify the difference between these three often-confused terms.
The UI designer creates mockups and imagines interfaces that look visually appealing.
In contrast, the UX designer (or ergonomist) focuses on the interface’s practicality. They aim to ensure that the experience is satisfying and the user can navigate the site effectively.
For a long time, CDiscount’s UI was incredibly chaotic (things were everywhere).
And yet, from a user perspective, it felt like stepping into a giant online market where you were bound to find a great deal among the flashing prices.
In an ideal world, UI and UX designers work hand in hand – alongside the developer. But in reality, all three tend to have different visions for the project.
That’s where the Product Designer steps in to bridge the gap between conflicting opinions. Their goal is to ensure the product meets market demands and serves users’ needs.
Focusing on “product” doesn’t mean neglecting a beautiful interface or the user’s satisfaction. It’s all about priorities. Interviews with Product Designers from large companies reveal that they often sit in the middle – balancing the expectations of designers, developers, and commercial stakeholders.
As a front-end developer, I naturally emphasize UX and product design, which I find crucial for creating features that meet market needs and encourage users to return. (Maybe that’s also because I’m not great at designing pretty interfaces…)
Design and User Experience Come Before Code
On YourTextGuru, we wanted a page that lists all the keyword data for a given site.
This meant dealing with various types of data from the back end that users might find valuable:
- Position
- URL ranking for the keyword
- SEO difficulty (how hard it is to rank against competitors)
- Category
- Keyword length
- Last update
- Competition (Google Ads competitiveness)
- Trend (how search volume evolves over time)
- URL traffic (estimated clicks for the past month)
- Top 1 traffic (estimated clicks if the URL ranked first)
- Volume (monthly search volume on Google)
- Delta improvement (estimated traffic if the URL gained one position)
- Delta top (estimated traffic if the URL reached the top spot)
- CPC (average cost per click on Google Ads)
- Minimum bid (lowest bid for Google Ads positioning)
- Maximum bid (highest bid for Google Ads positioning)
That’s a lot of data… In table form, it looks like this:
If the site ranks for 5,000 keywords, the table is enormous – 5,000 rows wide. Now imagine hundreds of thousands of keywords.
A simple solution: a massive table that loads gradually with a horizontal scrollbar.
But horizontal scrolling is taboo in web design! Users dislike it. On a mouse, you have to click the scroll wheel to enable horizontal scrolling. This creates friction, a problem both in terms of ergonomics and UI design (let’s face it, scrollbars aren’t exactly beautiful, and there’s a reason they’re rare on modern websites).
In such cases, you must understand user needs and think through various use cases. Ask the right questions.
- Are all these data points essential? Yes, but some are more important than others.
- Is every user looking for the same thing? No, each has different needs.
- Does every user need filters? Probably not, except for keyword searches.
At this point, I list different “user profiles” – personas – likely to land on this page. I quickly identified three key types:
- Users interested in Google Ads data.
- Users focused on search volumes.
- Users looking for SERP data like category and difficulty.
Turning Personas into Interfaces
Now that I have user profiles, how do I distinguish them?
One option is multiple views, where users switch between layouts by clicking an icon. However, this requires saving searches, filters, and sorts.
We could create role-based views, but that limits users to their dedicated view.
Ultimately, the core issue was horizontal scrolling. What if we hid unnecessary columns to avoid it?
To simplify things, we could save user preferences in cookies to remember which columns they frequently check.
How would users hide columns? A simple click? An eye icon? A dropdown list with checkboxes?
What if we used personas to create actionable “categories”? A switch could do the trick!
After some testing, we arrived at this graphic bar:
Quick filters for URL and keyword allow fast filtering. On the right, switches hide/reveal columns, providing a clearer data view. A “Filters” button opens a popup for advanced users.
Client feedback will lead to further tweaks, but this solution covers user needs. It might not be the ultimate design, but it emerged from testing – satisfying both us and our users.
Thinking About Product Is Key to Good Front-End Development
All these questions are part of the ergonomic thought process when creating a page. Some can be answered immediately, others require testing.
As a front-end developer, UX should never be overlooked. Any front-end dev facing use-case challenges must constantly ask, “What if…?” This mindset helps me step back and deliver the best experience for YourTextGuru’s users.
