Note: This section of the site is under heavy construction, tread carefully.

Bookmarks tagged with “userexperience”

690 bookmarks by garrettc


Streets Series' Articles

A breakdown of improving a major US retailer’s website performance.

Bookmarked on #



SVG Loaders

Loading icons and small animations built with pure SVG.

Bookmarked on #


Typing delay experiment

"How annoying is too annoying? This is an experiment to see what amount of delay is too annoying for a user interaction like typing."

Bookmarked on #


(mac)OStalgia

“(mac)OStalgia is exploring my 2021 work-from-home routine from a nostalgic perspective. How would have the same workflow looked like with the tools of today and the limitations of yesterday. Unreliable internet, little disk storage, macOS 9 and much more”

Bookmarked on #


Estelle Weyl – “Fast. Simple. Accessible.“ | .concat() 2018 - YouTube

"You already know that accessibility is important. In fact, it’s the law. It’s also a good idea. Let’s make the Web accessible—and faster—for everyone."

Bookmarked on #



When to use target="_blank"

"Anchor links1 may have a target attribute which controls what happens when that link is clicked. One of the possible values of that attribute is _blank, which tells the browser to open a new window (or tab, if that’s the user’s preference) when that link is clicked. This used to be “invalid” in HTML (maybe only XHTML?) but people used it anyway since it worked. It’s now perfectly valid in HTML5. But are there good reasons to do so?"

Bookmarked on #



Designing an omni-search

“Omni-search is one of those features that can completely change the UX of a product. Since almost every product has search functionality, it’s definitely worth understanding the Omni option in depth. However, since search is, on the surface at least, a mear input box with a results dropdown, it seems deceivingly simple. I assure you, it is not.”

Bookmarked on #




inclusive-design-and-development handbook

Ingredients for case About the need for accessibility About the cost of accessibility

Bookmarked on #


UX Theatre: The Poster

"UX Theatre is easy to define. It's the application of any sort of design methodology without including a single user in the process. UX theatre is becoming more prevalent as executives learn the term user experience but their teams aren't empowered to do all the work that UX entails. "

Bookmarked on #


The right tag for the job: why you should use semantic HTML

Whether you write plain old HTML, HTML templating or JSX, are you using the right HTML tags? A guide to semantic HTML: what it is, why it’s so important, and how to use it

Bookmarked on #


Let’s talk about failure

“Not #humblebrag - ‘I’m a massive success because I failed fast’ failure. But failure in service design. Because every system fails at some point.”

Bookmarked on #


Design leadership: How to establish a design-led culture in your organisation

`I’m going to talk through some of the issues I’ve faced and actions I’ve taken when it comes to embedding a “design” culture, and to provide you with a simple 7-step guide doing the same. This post isn’t about what makes a great design lead (as I’ll be talking about that in a future post); rather, how to get your whole organisation on board with design thinking.`

Bookmarked on #


Convince Your Boss to Care About Speed

"Are you trying to convince your boss to commit to web performance work without much success? We have tips."

Bookmarked on #


How to Report Errors in Forms: 10 Design Guidelines

"Help users recover from errors by clearly identifying the problems and allowing users to access and correct erroneous fields easily."

Bookmarked on #


The Best Place for Error Messages on Forms

"Where are you placing the error messages on your form? If they’re not placed where users expect to see them, you could jeopardize their capability to complete your form."

Bookmarked on #


The Ultimate UX Design of Form Validation

"Form validation is the technical process where a web-form checks if the information provided by a user is correct. The output of this process is emotional rather than technical. The form either points out that the user made an error, or assures that the provided data is accurate. "

Bookmarked on #


The Almost-Complete Guide to Cumulative Layout Shift

"This post is an attempt to get the most comprehensive view of Cumulative Layout Shift: what it is, what it measures, how it measures, how you can see it, and how you can fix it."

Bookmarked on #



UX Lexicon

An evolving, interactive glossary of UX research terms. Those of us who work in UX, user researchers included, aspire to create terrific user experiences, but our terminology is a mess. 80 UXers from around the globe began to address that problem. This lexicon of UX terms includes research methods,

Bookmarked on #


Web Interface Handbook

"This is a book about the fundamentals of creating a good web interface. You will find out how to make effective forms, typography, grids, and many other components of web design."

Bookmarked on #


Why the Email Confirmation Field Must Die

"The email address is one of the most corrected form fields. It’s easy to mistype because the input contains a long string of various characters. This can lead to users submitting an incorrect email address. Is the solution to make users retype their email like the password confirmation field?"

Bookmarked on #


Sticky Headers: 5 Ways to Make Them Better

Persistent headers can be useful to users if they are unobtrusive, high-contrast, minimally animated, and fit user needs.

Bookmarked on #


HTML Design Principles: Priority of Constituencies

"In case of conflict, consider users over authors over implementors over specifiers over theoretical purity."

Bookmarked on #


Dark Patterns at Scale: Findings from a Crawl of 11K Shopping Websites

"Dark patterns are user interface design choices that benefit an online service by coercing, steering, or deceiving users into making unintended and potentially harmful decisions. We conducted a large-scale study, analyzing ~53K product pages from ~11K shopping websites to characterize and quantify the prevalence of dark patterns."

Bookmarked on #


Applying white space in UI design

"Good UI design is the thoughtful application of white space at all scales of an interface, from component to page, micro to macro. When white space is used well, the result is an interface that is harmonious, legible, and, above all, effective and easy to use."

Bookmarked on #


How to avoid layout shifts caused by web fonts

"One of the biggest causes of layout shifts for my clients is late-loading web fonts, let's look at how to optimise them!"

Bookmarked on #


The unreasonable effectiveness of simple HTML

"Go sit in an uncomfortable chair, in an uncomfortable location, and stare at an uncomfortably small screen with an uncomfortably outdated web browser. How easy is it to use the websites you’ve created?"

Bookmarked on #


Add scroll margin to all elements which can be targeted

We can add an extra bit of space to targeted elements, thanks to modern CSS!

Bookmarked on #


Web Platform Design Principles

This document contains a set of design principles to be used when designing Web Platform technologies.

Bookmarked on #


Falsehoods Programmers Believe About Names – With Examples

"In 2010, Patrick McKenzie wrote the now-famous blog “Falsehoods Programmers Believe About Names”, in which he listed 40 things that were not universally true about names. Did programmers sit up, take notice and change their attitudes to names? Sadly, not really. We still get asked to fill our names out in online forms which assume we have a first name and a last name (in that order) and which refuse to allow us to continue unless we have filled out both. They assume our names can be entered in alphabetic characters, often only ASCII. I fear that part of the reason that this blog post had less impact than I hoped was that Patrick did not give examples of how each assumption can be false. But having worked in a previous life on IBM’s Global Name Management product, I can assure you that it’s all true. Still not convinced? In this post I’m going to list all 40 of Patrick’s original falsehoods, but give you an example (or two) drawn from my experiences working in this space."

Bookmarked on #


The Ultimate Guide to Not F#!@ing Up Push Notifications

"TLdNR: push notifications became yet another way to artificially re-engage users and force content down their throat. That’s why so many of them hate it. But there’s some interesting use cases for it. Here is some advice on how to stop ruining it for the rest of us. Spoiler alert: stop asking for permission on page load (and make them useful for users)"

Bookmarked on #


Float Labels with CSS

"You’ve probably seen this pattern going around. It’s an input that appears as if it has placeholder text in it, but when you click/tap into that input, that text moves out of the way and allows you to type there. It’s rather clever, I think."

Bookmarked on #


Mobile Form Usability: Never Use Inline Labels

"Labels placed inside the form field (aka “inline labels”) are widespread in mobile apps and sites — almost to the point of being a best (mal)practice. Yet in every usability test we’ve conducted inline labels have suffered from major usability problems. Mobile included."

Bookmarked on #


Accessibility Testing is like Making Coffee

"In accessibility testing, and when making coffee, we are shooting for the smoothest experience. We want to get to the essence of the thing we’re making. We want to filter out the grit and bitterness and include everything that makes our final product enjoyable."

Bookmarked on #


Keyframes.app | CSS Toolbox

Keyframes gives you a visual timeline to help you create, view, and run animations without having to go back and forth between your browser and editor.

Bookmarked on #


How fast should your UI animations be?

"Good animation timing is more of an art than a science. Thinking in terms of a range instead of one set duration value will serve you much better in your design work."

Bookmarked on #


Enhancing User Experience With CSS Animations

"How to build CSS animations and transitions in your interfaces that are inclusive, accesible and will enhance your users' experience."

Bookmarked on #


The UX of LEGO Interface Panels

Piloting an ocean exploration ship or Martian research shuttle is serious business. Let’s hope the control panel is up to scratch. Two studs wide and angled at 45°, the ubiquitous “2x2 decorated slope” is a LEGO minifigure’s interface to the world. 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.

Bookmarked on #


7 Gestalt principles of visual perception: cognitive psychology for UX

"The human brain is wired to see structure, logic, and patterns. It helps us make sense of the world. In the 1920s a group of German psychologists developed theories around how people perceive the world around them, called Gestalt principles."

Bookmarked on #


Designing Efficient Web Forms: On Structure, Inputs, Labels And Actions

"Someone who uses your app or website has a particular goal. Often, the one thing standing between the user and their goal is a form. Forms remain **one of the most important types of interactions** for users on the web and in apps. In fact, forms are often considered the final step in the journey of completing their goals. Forms are just a means to an end. Users should be able to complete them quickly and without confusion."

Bookmarked on #



Accessible to some

An experiment that tries to help you understand how bad accessibility affects users and their daily experiences on the web.

Bookmarked on #



How to Ask About Gender in Forms Respectfully

"When asking about gender online, it's important that we take a few moments to make sure we are asking these questions in an inclusive, respectful way."

Bookmarked on #


Designing forms for gender diversity and inclusion

"It’s easy for us designers to just slap a gender question that says Male/Female in there — and make it mandatory — because our marketing department needs that data to sell stuff. There are indications that this not only risks losing engagement but also leads to false conclusions based on bad data."

Bookmarked on #