{"id":"sj3ml89pv5lfytr","title":"Why Human-Centered Design is the Secret to Making Every Click Count","slug":"human-centered-design-secret-making-every-click-count","summary":"Human-centered design is practical engineering. If users cannot understand the page quickly or complete the task easily, the design is not finished.","imageUrl":"https://briancrabtree.me/images/journal-human-centered-design-secret-making-every-click-count.webp","category":"UX Theory","date":"12/02/2025","featured":false,"likes":49,"author":"Brian Crabtree","content":"<h2>The fallacy of aesthetic design</h2>\n\n<p>There is a pervasive myth that a visually stunning website allows you to get away with poor usability. This might have been true in the early 2000s when Flash intros were considered the height of sophistication, but today’s users are ruthless. They have been trained by the relentless speed of native applications to expect immediacy. When a user lands on your site, they are not admiring your parallax scrolling effects or your custom typography. They are trying to solve a problem. They want to buy a product, find a phone number, or read an article. Every architectural choice that stands in the way of that goal is a failure of User Experience.</p>\n\n<p>We need to be honest about the cost of modern web development trends. We have prioritized the developer experience over the user experience. We build complex single-page applications for simple content sites because it feels modern to the engineering team, not because it benefits the user. The result is a web that feels sluggish and fragile. A beautiful interface that takes four seconds to become interactive is not a good user experience; it is a broken promise. It is akin to handing someone a glossy brochure that gives them a paper cut every time they try to turn the page.</p>\n\n<h2>Performance as the primary feature</h2>\n\n<p>If you take nothing else away from this, understand that performance is the only metric that truly matters. You can talk about engagement and retention until you are blue in the face, but those are lagging indicators of performance. When a site loads instantly, users stay. When it drags, they leave. It is really that simple. We often try to overcomplicate this with discussions about brand loyalty and emotional resonance, but the most respectful thing you can do for a user is not waste their time.</p>\n\n<p>This goes beyond just the initial page load. It is about the perceived performance during interaction. We have all visited those sites where you click a button and nothing happens for half a second because the main thread is blocked by some tracking script or a massive re-rendering cycle. That momentary hesitation destroys trust. It makes the user question if the system is working. In the e-commerce world, that hesitation is where you lose the sale. In the SaaS world, that hesitation is where you lose the subscription. You are effectively burning money because you refused to optimize your critical rendering path.</p>\n\n<h2>The trust economy and digital credibility</h2>\n\n<p>Trust is a finite resource in the digital space. Users are naturally skeptical. They have been trained to fear phishing scams, malware, and dark patterns. A professional, highly functional website is the only way to establish credibility in a zero-trust environment. This is not about having a fancy logo. It is about determinism. Does the back button work exactly how the user expects it to? If they refresh the page, do they lose their form data? Does the layout shift violently as images load, causing them to click the wrong link?</p>\n\n<p>These layout shifts, known technically as Cumulative Layout Shift, are more than just an annoyance; they are a sign of amateurish engineering. When content jumps around, it screams that the site was built without care. It tells the user that you did not bother to define aspect ratios for your media or that you are injecting ads dynamically without reserving space. It erodes confidence. If you cannot handle the basic geometry of a webpage, why should I trust you with my credit card number? Broken links, 404 errors, and slow API responses are not just technical debt; they are reputation debt.</p>\n\n<h2>Architectural decisions for the real world</h2>\n\n<p>Building for exceptional UX requires us to be cynical about the environments in which our code runs. We cannot assume the user has a fiber connection or the latest iPhone. We must engineer for resilience. This starts with how we choose to render pixels to the screen. The industry swings back and forth on this, but the fundamental truth remains that sending HTML to the browser is always faster than sending a script that generates HTML.</p>\n\n<p>Server-Side Rendering (SSR) has returned to the forefront for a reason. By doing the heavy lifting on your server—which is powerful and under your control—rather than on the user's device, you guarantee that the user sees content immediately. This is the difference between a white screen of death and a functional page. However, we must be careful not to fall into the \"uncanny valley\" of hydration, where the server sends HTML that looks ready, but the JavaScript bundle hasn't loaded yet to make it interactive. That is a deceptive pattern that frustrates users who try to open a menu that won't respond. The architecture must prioritize progressive enhancement, ensuring that the core functionality works even before the JavaScript kicks in.</p>\n\n<h2>The scourge of third party bloat</h2>\n\n<p>As engineers, we often optimize our own code to within an inch of its life, only to have the marketing team demand the inclusion of five different analytics trackers, a chatbot, a session recorder, and a social media widget. Suddenly, your highly optimized 50kb bundle is joined by 2MB of third-party trash that blocks the main thread and ruins the lighthouse score. This is where the technical lead must be a gatekeeper.</p>\n\n<p>Part of ensuring a good User Experience is saying \"no.\" Every external script you add is a liability. It is a potential point of failure, a security risk, and a performance tax that the user pays with their battery life. You must ruthlessly audit these dependencies. If a third-party tool degrades the user experience significantly, it is not worth the data it collects. You are degrading the very product you are trying to measure.</p>\n\n<h2>Resilience and error handling</h2>\n\n<p>Finally, we must talk about the \"happy path.\" Most developers build for the scenario where everything works perfectly. The API returns a 200 OK, the image loads, and the user inputs valid data. But the web is chaotic. Wifi connections drop in tunnels. Servers time out. CDNs fail. A truly great user experience is defined by how the application handles failure.</p>\n\n<p>When an error occurs, do you show a cryptic \"Object Object\" alert, or do you provide a helpful message with a path to recovery? Do you preserve the user's input so they don't have to retype it? Robust error handling is the safety net of UX. It turns a potential frustration into a minor hiccup. It shows the user that you have thought about them and that you respect the effort they are putting into using your tool. This isn't flashy work. It isn't something you can put in a portfolio screenshot. But it is the bedrock of a professional, user-centric web application. For a related angle I keep coming back to, see <a href=\"/journal/semantic-html-landmarks-beyond-divs/\">Semantic HTML Landmarks Search Engines Actually Read</a>.</p>","tags":["React Server Components","Next.js App Router","TypeScript","Serverless Functions","Edge Computing"],"views":135}