Great talk by Stéphanie Walter (starting at 39:00): With practical examples, I show why certain animations work better than others and how to find the best timing and duration to build UI animations that “feel right”. I explain how our brain works, why and how animations contribute to improving user experience. And what you need […]
Tag Archives: ux
The UX of LEGO Interface Panels
George Cave takes a look at the UX of the LEGO Interface Panels These iconic, low-resolution designs are the perfect tool to learn the basics of physical interface design. Armed with 52 different bricks, let’s see what they can teach us about the design, layout and organisation of complex interfaces. The UX of LEGO Interface […]
Web Vitals – Essential metrics for a healthy site
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. […]
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 […]