Stop Misusing Toggle Switches
Use a toggle switch if you are:
- Applying a system state, not a contextual one
- Presenting binary options, not opposing ones
- Activating a state, not performing an action
Tags: ux
227
4 Rules for Intuitive UX – Learn UI Design
- Obey the Law of Locality
- ABD: Anything But Dropdowns
- Pass the Squint Test
- Teach by example
Mobile E-Commerce UX: Deemphasize ‘Install App’ Ads or Avoid Them Entirely
The test results are in:
During our testing “Install App” banners were the direct and sole cause of several abandonments of some of the world’s largest e-commerce websites.
Read on for details…
Paint Holding - reducing the flash of white on same-origin navigations | Web | Google Developers
This is an excellent UX improvement in Chrome. For sites like The Session, where page loads are blazingly fast, this really makes them feel like single page apps.
Our goal with this work was for navigations in Chrome between two pages that are of the same origin to be seamless and thus deliver a fast default navigation experience with no flashes of white/solid-color background between old and new content.
This is exactly the kind of area where browsers can innovate and compete on the UX of the browser itself, rather than trying to compete on proprietary additions to what’s being rendered.
Dark Patterns at Scale: Findings from a Crawl of 11K Shopping Websites
1,841 instances of dark patterns on ecommerce sites, in the categories of sneaking, urgency, misdirection, social proof, scarcity, obstruction, and forced action. You can browse this overview, read the paper, or look at the raw data.
We conducted a large-scale study, analyzing ~53K product pages from ~11K shopping websites to characterize and quantify the prevalence of dark patterns.
Patterns for Promoting PWA Installation (mobile) | Web Fundamentals | Google Developers
Some ideas for interface elements that prompt progressive web app users to add the website to their home screen.
Methods - 18F Methods
A very handy collection of design exercises as used by 18F. There’s a lot of crossover here with the Clearleft toolbox.
A collection of tools to bring human-centered design into your project.
These methods are categorised by:
- Discover
- Decide
- Make
- Validate
- Fundamentals
User interfaces: hiding stuff should be a last resort by Adam Silver
When we hide content, there’s a greater risk the user won’t see it. There’s a higher reliance on digital literacy and it’s generally more labour intensive for the user.
Worse still, sometimes we kill off essential content.
UX Workshop | Trys Mudford
I’m so, so happy that Trys has joined us at Clearleft!
Here, he recounts his first day, which just happened to coincide with an introductory UX workshop that went really well.
Hello, Goodbye - Browser Extension
A handy browser extension for Chrome and Firefox:
“Hello, Goodbye” blocks every chat or helpdesk pop up in your browser.
Performance Budgets That Stick - TimKadlec.com
I like Tim’s definition here:
A performance budget is a clearly defined limit on one or more performance metrics that the team agrees not to exceed, and that is used to guide design and development.
And I agree about the four attributes required for a performance budget to succeed. It must be:
- Concrete
- Meaningful
- Integrated
- Enforceable
The point is not to let the performance budget try to stand on its own, somewhere hidden in company documentation collecting dust. You need to be proactive about making the budget become a part of your everyday work.
Don’t Get Clever with Login Forms | Brad Frost
- Have a dedicated page for login
- Expose all required fields
- Keep all fields on one page
- Don’t get fancy
The ineffectiveness of lonely icons | Matt Wilcox, Web Developer & Tinkerer
When in doubt, label your icons.
When not in doubt, you probably should be.
Creating distraction-free reading experiences — Adrian Zumbrunnen
It’s our job as designers to bring clarity back to the digital canvas by crafting reading experiences that put readers first.
Building a Progressively-Enhanced Site | Jim Nielsen’s Blog
This is an excellent case study!
The technical details are there if you want them, but far more important is consideration that went into every interaction. Every technical decision has a well thought out justification.
It’s What You Make, Not How You Make It.
How did I miss this great post from 2016 by one of my favourite people‽ It’s even more more relevant today.
To me it doesn’t matter whether you write your HTML and CSS by hand or use JavaScript to generate it for you. What matters is the output, how it is structured, and how it is served to the client. When we allow our tools to take precedent over the quality of our output the entire web suffers. Sites are likely to be less accessible, less performant, and suffer from poor semantics.
Four Cool URLs - Alex Pounds’ Blog
A fellow URL fetishest!
I love me a well-designed URL scheme—here’s four interesting approaches.
URLs are consumed by machines, but they should be designed for humans. If your URL thinking stops at “uniquely identifies a page” and “good for SEO”, you’re missing out.
The Elements of UI Engineering - Overreacted
These are good challenges to think about. Almost all of them are user-focused, and there’s a refreshing focus away from reaching for a library:
It’s tempting to read about these problems with a particular view library or a data fetching library in mind as a solution. But I encourage you to pretend that these libraries don’t exist, and read again from that perspective. How would you approach solving these issues?
Is Tech Too Easy to Use? - The New York Times
Of all the buzzwords in tech, perhaps none has been deployed with as much philosophical conviction as “frictionless.” Over the past decade or so, eliminating “friction” — the name given to any quality that makes a product more difficult or time-consuming to use — has become an obsession of the tech industry, accepted as gospel by many of the world’s largest companies.
Drupal’s commitment to accessibility | Dries Buytaert
Shots fired!
I’ve come to believe that accessibility is not something you do for a small group of people. Accessibility is about promoting inclusion. When the product you use daily is accessible, it means that we all get to work with a greater number and a greater variety of colleagues. Accessibility benefits everyone.