As a backend person, sometimes I look at what's being done for front end stuff and pull back in ever so slight horror.
It's an excellent article, and the work within is very well done, but there's a part of me that screams "Why would you introduce this much complexity for what should be a simple scroll?" (overcoming technical hurdles to produce the desired end result aside).
I don't get "as a backend engineer" comments like these.
OP is doing a basic analysis on what kind of solutions exist for a typical UX edge-case. They even provide the simple solution that most people use (margin-bottom).
And for fun they go on to see if they can solve it without the minor drawback of the simple solution.
We've got to stop acting like it's a badge of honor to avoid UX consideration. We might not be people who implement UIs, we use UIs all day and should be able to muster up a few opinions about how a UX interaction should work.
The issue is that UI/UX is in a terrible place. Your comments would be valid if this was 15 years ago.
UX is in the gutter with extra clicks and terrible workflows in almost every website. UI is a catastrophe of mobile first, but not really, but sort of kind of we want power users but we need regular users, and all our UI kits look like total ass that is incompatible with so many other things.
This website is a great example. The webpage doesn't load instantly and instead forces the user to wait for text to appear. Great UX engineering guys, make the user wait!
Let’s not act like backend dev is much better. They’re two sides of the same coin.
The entire web stack – backend and frontend – is a mess because the nature of the web is cumulative development over two decades, leading to a pile of abstractions upon abstractions that by some miracle remain mostly interoperable and backwards compatible.
More people use computer applications effectively now than at any previous point in history. You might want to check your priors and consider that taste does not inform usefulness.
As a full-stack engineer who also studies UX, most UI solutions span from a desire for originality, aesthetics, etc. and not improved experience.
Which is what I loved about this article - it demonstrates a sizeable effort resulting in a UI implementation that is just not much better than having callouts / figures in the text- and then admits it.
I think the article does a pretty good job of explaining the gap between what can happen easily, and what a 110% over engineered "perfect" solution is to a UX problem.
Building excellent user interfaces is hard, regardless of the technical stack. You have to sweat a lot of the finer details, break out of any platform default behaviour where appropriate, and over engineer something in service of building a 'delightful' user experience.
Or, you can do as most do, and just not do this. #anchor-links with `scroll-behavior: smooth;` CSS will get you the basic smooth scrolling.
The really hard part of that is that if you can’t build an excellent interface, you will build a worse one than if you used the native interface. So you either need to be prepared to sweat every last detail forever.
Using #anchor-links that show up in the URL (but not the browser navigation history) should really be the UX baseline for acceptable anchor link implementations. I hate it when long pages don't allow you to actually link specific sections.
From time to time I dip my toe in and try new things, but as productive as I can get with Astro, the illusion vanishes as soon as I have to understand any of the plumbing.
Fortunately, I can still party like it’s 1999 just fine: just yesterday, I worked on a janky brutalist web app (the same way I did back in 2002, cribbing from the O’Reilly “Dynamic HTML: the Definite Reference”) and “deployed” it with rsync to pico.sh. It’s practically unstyled and I didn’t even use jquery, but it works.
The thing is, backend stuff is largely solved. You need to store data? Here you go, here's a database. You need to process a bunch of strings for similarity? We got an algorithm for that.
But frontend stuff is messy. How do you tell a person what they're trying to do is wrong and they need to change their inputs? Oh, maybe we can highlight the input or we can pop a modal message. Haha, psyche! Users ignore that shit! Now what you gonna do, buddy?
Frontend is a mess because all you people are a mess.
Contempt for your users inevitably leads to bad products so it’s no wonder things are bad if this is the prevalent attitude among front end web developers.
There's a difference between contempt (i.e. "users are stupid") and realism, though. And realism can range from "users don't want to troubleshoot" to "some users are near-violently anti-tech and won't read errors", depending on context.
The unfortunate truth is that if you're doing B2C or even B2B outside of tech companies, the second one will often come up...
Bad devs exist. Bad users do too. Thing is, you can't usually fire the bad users.
> And realism can range from "users don't want to troubleshoot" to "some users are near-violently anti-tech and won't read errors", depending on context.
No dude, I have things to do and your little software is a tiny roadblock in my day. I dont want to become a fellow expert in your niche, do the thing and get out of my way.
Building UI for work and for consumers is completely different. I’ve done both, user attitudes are veeeery different. Building an ecommerce page is also very different to building an engagement trap for users to sit in.
Problems start when engineers/designers/producters don’t understand their users and their goals. Or when the user is not also the customer (this is the worst)
There's a third category too, users looking for security weakness and probing the system with a spectrum of inputs. The response to these inputs can reveal a lot about how the backend is designed.
It reminds me of an online store in the beginning of 2000s
To buy a product, you had to drag&drop the product image over the shopping basket icon. It took me quite a while to figure that out, and I bet they lost a lot of customers.
[Edit: I acknowledge that a PM or manager may have forced the developer to do this, but it's just one example of many]
Sometimes the developers have to take the blame, instead of blaming "stupid" users. Some take that attitude to frameworks as well. If the users complain, they haven't understood how to use it correctly. Just look at the "how to make a todos in 5min" video on YouTube to be convinced of its beauty
Yeah, it's really easy to cherry pick an example from the past of an application probably built by a junior level employee being brow-beat into submission my an MBA-laden PM.
Also, backend people can be arrogant as well, but it seems that for some reason new ideas tend to be picked up quicker in frontend, which unfortunately results in bad ideas spreading fast too.
Nah, the front end is just visible. And any errors that originate get surfaced in the front end. All you get to see as a use is "website said no".
It's only now, in the days of "vibe coding" that I would firmly put the sole blame on developers for bad application interfaces, because it's usually just one clueless person who is YOLOing code out into the wild. Everywhere else: hidden icebergs of complexity and you didn't know what led to the current state.
I don't read it as contempt but rather the equivalent of a backend engineer saying that you can't trust user inputs and need to validate, authenticate, and authorize every request.
I don't have contempt for users. I have contempt for single-issue developers who have never stepped out of their little corner of software who act like front end should be easy because it's "just" some scripting.
I wouldn’t call what they wrote as “contempt.” It seems to me, to be cynical realism; something I tend to exhibit, myself.
I like people. I really do. I especially love the users of the software I write, and go well out of my way, to craft the best UI possible.
But I am constantly being blindsided by knuckleheads; some of whom, are really, really smart, educated, and inquisitive people.
I write iOS apps, and spend many, many hours, testing and tweaking. Right now, I am completely rewriting an app, because I couldn’t get the UI right, at the final stage. I realized my fundamentals were borked, and that I needed to go back to the ol’ drawing board, as Wile E. Coyote would say. Many developers would have shipped, but I have the luxury of being able to redo it (I have done it before).
It’s a cool trick, and one that I’d probably use, if I was dedicated to Web design, the way I am, to app design.
Lack of concern or outright contempt for front end and the users is why front end development is a subfield in the first place, because backend devs can't or won't produce something people can use.
> backend devs can't or won't produce something people can use.
Where by people you mean management and sales, and by produce you mean add 150 different tracker scripts? :).
Snark aside, contempt for frontend dev and contempt for users are two different things; the latter has thoroughly infected the fields of UI/UX. It's most visible in webdev, because that's where most UI work happens. Second to that is mobile app dev, where it's just as bad.
Also, there are actually two somewhat distinct types of contempt for the user:
1) Paternalism - "users are idiots and need to be babysit at every step, or else they hurt themselves (or make us spend money on support)"; this one is pretty overt in UI/UX.
2) Exploitation - "users are livestock, the purpose of the site/app is to milk them as much as we can - whether it's taking their data, money, or both; the design must guide users to allow extracting maximum value from them before eventually discarding them"; this one is less talked about, even though it underpins many UI/UX patterns (not all of them known as "dark patterns").
I do a decent amount of ux work and probably fall into category 1 here. The problem isn’t “we don’t want to spend money on support”, the problem is “people really do need to be babysat for a lot of things, and no matter what you do, they will not read the documentation.
That's fair. People really are like that. This is suboptimal, and I emphasize with both frustrated devs and PHBs worried about escalating support costs. The reasons behind why users are like this are complex, but "users are stupid" isn't one of them.
I think "users are not paying attention" is a friendlier way to describe it.
A while back, I was supporting an e-sports event. We had professionals, competing for an awful lot of money who were deeply familiar with the game. We had taken mobile phones, etc from them so no distractions.
They were briefed before hand that all they had to do was wait until they were given the green light, and click the big OK button on their screen to enter the game. We added a giant modal with the OK that explained "press this button when you are told to". This was a last minute workaround for the fact that we could only tell how many people were in the queue for something, but not which of our expected players were not in the queue. Our telemetry tells us one person is missing, so we have to go walking around to find them. Found the guy, sitting in front of a giant modal saying "Click this when you are told to", and his response was "I didn't know I was supposed to click it".
Now add mobile phones, children, doorbells, cooking, neighbours, and this becomes widespread.
It's a decent approximation, if you remember it's an approximation for "the user is tired/stressed/not paying attention/doesn't actually want to deal with your app". I remember a talk which suggested "The user is drunk" as a better approximation, because it's more obviously not literally true.
> Paternalism - "users are idiots and need to be babysit at every step, or else they hurt themselves (or make us spend money on support)"; this one is pretty overt in UI/UX.
Reminds me of a quote I'm not too sure if it's authentic but it's way too believable: "There is a considerable overlap between the intelligence of the smartest bears and the dumbest tourists."
Like, over half the population is barely literate [1]. That's why we're seeing so, so many interfaces being "dumbed down", with options for "power users" being hidden behind ever increasing hurdles, font sizes and margins/paddings increasing, and visuals being dulled down. It's all being ground down to be palatable to an ever increasing amount of utterly braindead people.
> Frontend is a mess because all you people are a mess.
As a backend guy who considers himself extremely fortunate that nearly all of his users/customers are technical, this got an audible chuckle out of me.
I believe it's because on the frontend, everyone wants to look different and have a unique identity. Whereas on the backend, everyone needs to be the same to follow standard best practices.
Well, part of that is a business need (your app/website/whatever is an extension of your brand, which is a very important part of making money). The other part is there are actually many valid ways to style a button, or have some kind of hover animation, or some kind of navigation bar.
Sure, there are some guidelines and best practices, but there are just infinite ways to display information to people. You can't just look at a technical specification for how well X/Y/Z performs because design is subjective and humans are all different. Whereas none of your users will complain if you use Redis (or similar) for caching something on the backend.
It's interesting that you used "wants" in the first sentence and "needs" in the second.
Not saying that you're totally wrong, but I think this difference is not necessarily a deliberate decision by individual engineers, or caused by personality or skill level.
The employee market demographics surely play a role, but this is about concretions, not generalizations.
There is no lack of (often poor) generalizations when it comes to the skills and requirements demanded by BE and FE roles, respectively.
Not wanting to dismiss your idea / the grain of truth. But IMO you are falsely generalizing.
Also, there are not only FE devs claiming to be "full stack" when they don't know HTTP basics.
There are also BE developers with similarly daunting knowledge gaps.
Or in other words, in both worlds there are juniors masquerading as seniors and the other way around, depending on the organization.
I think the biggest problem is that HTML and even HTTP weren't developed with those use cases in mind.
Before WWW was a thing we already had user interfaces and the fact that current users frequently prefer those ancient, text user interfaces over modern ones tells a real LOT.
Because the scroll, as you see, is not simple. The complexity of the real-world scenarios outlined in the post force the complexity of the solution. It may feel that "it's simple common sense" kind of thing, but if you ever tried to implement a simple common-sense thing, you know that it only appear simple.
By the same token, some UX person might read about the mechanics of database transactions with two-phase commits, or about MVCC, and ask why so much complexity exists around what should just be a simple write to disk.
Because the default behavior, the problem they describe in the introduction, is bad. It confuses many people, I’ve seen it firsthand many times as an observer in usability testing.
Is it really necessary to highlight the heading at all?
I’m a passionate frontend engineer, but I do think we are often busy “asking if we could”, and ignore “if we should”.
Worth noticing, on mobile you can’t even read the conclusion in the “it’s beautiful” demo, because the navigation covers it.
I understand that it is just a demo, and that issue could be solved independently…
But I think it also points at the observation that when you try to do these kinds of unusual things, you open yourself to unintended consequences.
And while you can mitigate those consequences one by one, my experience is that you generally won’t have a chance nailing them all, unless you are also minimizing their number… by not getting too fancy.
All I know is the default browser behavior for anchor links within a page has real usability issues when you have anchored headings at the bottom of the page.
You are correct though that there are many cures worse than the disease, but it is a real "disease", so to speak.
> All I know is the default browser behavior for anchor links within a page has real usability issues when you have anchored headings at the bottom of the page.
Yes, you click on the link and the text you were supposed to have jumped to is in the wrong place.
But the "solution" here takes this very problem and expands it to cover the entire sample article instead of just the bottom of the sample article. How is that an improvement?
It is fun! The person you're responding to isn't wrong; front end is a little horrifying. But it's kind of like a jungle in that the scary beasts, swamps, poisonous plants, and the harsh elements are accompanied by incredible opportunities to experiment, explore, discover, and appreciate beauty.
Backend presents some awesome opportunities too, but I absolutely love weird problems like the one you're solving here. It's in the realm of simultaneously necessary and totally unnecessary. This is where interesting stuff happens!
Chrome developers keep adding unhinged complicated “features” that nobody wants or asked for and immediately are abused and broken.
Numerous autoplaying video methods for example especially when they follow the mouse, play in the background, or use lazy loading to be unkillable.
Speaking of lazy loading or whatever hundreds of variations probably exist around it now, the terrible front end devs of the world have decided to use that for everything. Everything is a sliding panel full of sliding panels and there’s no way to use browser back features coherently.
Scrolling down a site now loads a new site and destroys your history. Even if you scrolled to move content up because an autoplaying video anchored to the bottom of the screen is blocking the view. Scroll down too far causes a jump and the site decides you’re done and loads the next thing with no way to navigate back.
How do these developers have a job? How are features like this even invented with no critical thought or understanding of real world use cases questioned. It’s again and again and again that we see this.
And the Google team is so proud every time with their demo videos that is painfully obvious they put no thought into it outside of their bubble of them deciding some random thing was technically possible to do as a proof of concept and should therefore be immediately released as a fully supported feature.
That's only because you are used to the over complexity of backend work. As someone who is pretty far removed from both front and backend work (or web work in general), both seem pretty complex. Frontend at least has the excuse of being at the interface between humans and computers, which is inherently much harder
You say "backend" but I'm guessing you're not talking about modern cloud infrastructure work, the complexity at which I (as a frontend person) scream in similar abject horror.
As a backend developer, I have a lot of respect for frontend developers that have to deal with edge-cases and minutiae that we don't have to. Building APIs and interfaces for computers is easy. Building them for people is HARD.
I can recommend backend people to do frontend once in a while. You don't have to like it. But it will make you a better developer. I've been in more than one team where there was this us and them dynamic and some lack of mutual understanding about why things worked a certain way or limitations and constraints. It can lead to poorly thought through APIs and API responses, which then triggers frontend work to engineer around that. Also, frontend developers tend to have better intuition for asynchronous stuff; because everything in a browser is async. Backend developers tend to be a bit naive on that front.
I'm a hands-on CTO in a very small company. So, if it's technical, I'm doing it. Websites, apps, backends, databases, devops and all the rest. Not always fun. But at this point I can fill every role in a typical product team and do a decent job.
And I agree that what passes for state of the art on the web is a bit meh. Anchors date back to the early days of the web. One of those forgotten features that is still vaguely useful but a bit underused. There's a reason mobile developers prefer native UI toolkits. Browsers are a bit limited and backwards. CSS is a bit of a straight jacket. And Javascript is a bit of a basket case as a language.
I remember the days when every new project started with "now let's write our own String class". As someone who works on both, it seems server and native software left this era in the distant past, but we're still there in web development.
It's an excellent article, and the work within is very well done, but there's a part of me that screams "Why would you introduce this much complexity for what should be a simple scroll?" (overcoming technical hurdles to produce the desired end result aside).