Web Vitals is a new great set of articles on Web.dev (by Google) focussing on delivering a great user experience on the web. To help developers focus on what matters most, they’ve selected a set of metrics which they call “Core Web Vitals”. The metrics that make up Core Web Vitals will evolve over time. […]
Tag Archives: ux
Guidelines for text fields design
Text fields are probably one of the most used interface components; contact forms, payment details, account creation, lead generation. Users definitely need to interact with text fields when using your product. The purpose of this post is to highlight some of the key guidelines which I follow when it comes to designing better text fields. […]
Giving a dragging animation a more natural feel with math
By applying some math you can give an element that you’re dragging around a more natural feel … See the Pen Sigmoid-2 by Nash Vail (@nashvail) on CodePen. How to fix dragging animation in UI with simple math →
Smooth Scrolling Sticky ScrollSpy Navigation
Yesterday evening I was working on some documentation pages. The page layout is quite classic, as it consists of a content pane on the left and a sidebar navigation on the right. Looking for a way to make the page less dull I decided to add a few small things to it: Smooth Scrolling when […]
Pure CSS Scroll Shadows (Vertical + Horizontal)
A long time ago (2012!), Lea Verou shared a way on how to add scrolling shadows to containers that needs scrolling. Using those shadows in a scroll container is a great UX thing, as they visually tell the user that the content is scrollable. 🐛🍏 The technique doesn’t play that nice on iOS though, due […]
Building Better Interfaces, a talk by Hakim El Hattab
At CSS Day 2019, I was fortunate to see Hakim El Hattab bring his talk Building Better Interfaces. A recording of his talk – and all other talks – are available on YouTube: This session is a deep-dive into the areas of interface design that Hakim has specialized in for over a decade—interactivity and animation. […]
An HTML attribute potentially worth $4.4M to Chipotle
Jason Grigsby: I recently found myself racing to fill out Chipotle’s online order form before my mother could find her credit card. In the process, I discovered a bug that could cost Chipotle $4.4 million annually. The form didn’t play nice with autocomplete and therefore would not get sent … The culprit? A JS library […]
Button Placement in Forms
Button placement on forms is often ignored or prioritised based on what looks good. But button placement can make or break a form, and a form can make or break a user’s experience. That’s why it’s essential to get it right. Here I’ll explain where to put buttons across a range of different forms based […]
Hierarchic Indeterminate Checkboxes with JavaScript (Vanilla)
Earlier today Chris Coyier tweeted that he was in the process of rewriting one of his pens without jQuery: Been trying to re-write this without jQuery: https://t.co/xvsZMKsfvL I’m like 70% there but haven’t quite gotten it. jQuery is doing so much helpful DOM traversal here it’s a pain in the ass without it. — Chris […]
Paint Holding in Google Chrome
One of the features that shipped with Chrome 76 is “Paint Holding”. It’s a technique that removes the “flash of white” – e.g. the white page you briefly see while the browser is loading the next page – when navigation between two pages on the same origin, thus delivering a smoother experience to the user. […]