Accessibility in action: Josh Collinsworth's "reduce motion" button

Manuel Matuzović praised Josh Collinsworth’s website, and I full-heartedly agree it’s a very pleasant design.

Josh Collinsworth

joshcollinsworth.com/

Josh Collinsworth’s website has a “Reduce motion” button right next to the “Dark mode” button.
#design-for-all

The thing that stood out the most (though merely a detail) is the “Move” button next to the “Dark mode” button in the header: since the design features some animations, users can disable these by simply clicking on that button.

Screenshot of a website navigation header featuring a button named "Move" next to a button with a "sun" icon
While the dark mode button is a common sight on websites these days, I haven’t seen a “reduce motion” button like this before.

This is inclusive design in action: while some users may have set a permanent preference to disable motion (and this is hopefully respected by website creators), enabling a simple switch for a motion-heavy website is a great feature.

Design for all » Inclusive usability » Motion

While moving elements may enrich UX for some, they can be a burden or even outright dangerous to others; careful consideration needs to be taken when animating parts of a design.

#design-for-all
2022