Home
Flows
Components
Changelog
PATTTTERNS - An open catalog of design patterns | Product Hunt

Made with šŸ’™ by Pablo Armenv2.1.12

Home
/Flows
/Accessibility & Personalization
Description
Great products should fit for every person.

Patterns for Accessibility & Personalization

Because great products should fit for every person. Good interfaces allows people adjust the experience for different physical or cognitive requirements. This pattern usually combine checkboxes, forms and button components.
Ā 
Recommendation (Ad)
https://uink.digital
Ā 
  • Desktop (71)
  • Tablet (1)
  • Mobile (14)
404. Side Menu from Filter Button

404. Side Menu from Filter Button

Desktop | Pathfinding | Accessibility | Decision Making | Web | English | Side Panel | Scrollbar | Toggle Field | Button | Image / Illustration | Fixed on Scroll | Filters | Animation

402. Window Minimize (Zoom-to-dock Transition)

402. Window Minimize (Zoom-to-dock Transition)

Desktop | Awareness | Accessibility | Decision Making | Apple OS | EspaƱol | Navbar | Drag & Drop Gesture | Animation | Pagination | Side Panel | Transition | Click Event

389. Text Edit Inline Input

389. Text Edit Inline Input

Desktop | Accessibility | Decision Making | Web | English | Text Input | Hypertext Links | Modal

388. Multiple Item Selection Drag & Drop

388. Multiple Item Selection Drag & Drop

Desktop | Accessibility | Feedback | Awareness | Decision Making | Web | EspaƱol | User Selection | Drag & Drop Gesture | Tooltip | Scrollbar | Checkbox

379. Dropdown Filters

379. Dropdown Filters

Desktop | Pathfinding | Accessibility | Web | EspaƱol | Filters

360. Page Outline Menu

360. Page Outline Menu

Desktop | Pathfinding | Awareness | Accessibility | Onboarding | Web | English | Pagination | Anchor Scroll

362. Modal Blackout with Form & Animations

362. Modal Blackout with Form & Animations

Desktop | Accessibility | Apple OS | EspaƱol | Modal | Text Input | Transition

349. HubSpot - Toggle High Contrast

349. HubSpot - Toggle High Contrast

Desktop | Accessibility | Awareness | Web | English | Hypertext Links | Navbar

359. Toggle List/Grid View

359. Toggle List/Grid View

Desktop | Accessibility | Onboarding | Pathfinding | Web | EspaƱol | Tooltip | Hypertext Links

347. YouTube - Floating Progress Bar

347. YouTube - Floating Progress Bar

Desktop | Awareness | Accessibility | Feedback | Web | English | Side Panel | Accordion

342. Savee - Light/Dark Mode Switcher

342. Savee - Light/Dark Mode Switcher

Desktop | Accessibility | Pathfinding | Web | English | Checkbox | Tabs

341. Image Grid Customization Sliders

341. Image Grid Customization Sliders

Desktop | Accessibility | Pathfinding | Web | English | Animation | Drag & Drop Gesture | Range Field

340. Asana - Zoom/Magnifier Over Image

340. Asana - Zoom/Magnifier Over Image

Desktop | Accessibility | Pathfinding | Web | English | Animation

346. Toggl - Sidebar Menu Show More

346. Toggl - Sidebar Menu Show More

Desktop | Pathfinding | Accessibility | Awareness | Web | English | Accordion | Navbar

345. Vertical Accordion for FAQs

345. Vertical Accordion for FAQs

Desktop | Pathfinding | Accessibility | Awareness | Web | EspaƱol | Accordion | Hypertext Links

343. Modal Drag & Drop to Fixed Position

343. Modal Drag & Drop to Fixed Position

Desktop | Accessibility | Pathfinding | Awareness | Web | EspaƱol | Drag & Drop Gesture | Modal | Side Panel

332. Apple - Drag&Drop Browser File to Desktop

332. Apple - Drag&Drop Browser File to Desktop

Desktop | Pathfinding | Accessibility | Awareness | Web | Drag & Drop Gesture | Image / Illustration | File OS | Modal | Click Event

330. PositivePsychology - Article User Feedback

330. PositivePsychology - Article User Feedback

Desktop | Accessibility | Feedback | Web | English

325. Apple - Drag & Drop Slots

325. Apple - Drag & Drop Slots

Desktop | Decision Making | Awareness | Accessibility | Apple OS | English

315. Signal - PIN Reminder

315. Signal - PIN Reminder

Desktop | Awareness | Accessibility | Apple OS | English | Text Input | Modal | Banner | Hypertext Links

312. Pocket - View Switcher

312. Pocket - View Switcher

Desktop | Pathfinding | Accessibility | Web | EspaƱol | Navbar | Thumbnail | Toggle Field | Radio Button

306. Drag & Drop for Reordering Items

306. Drag & Drop for Reordering Items

Desktop | Awareness | Accessibility | Web | English | Drag & Drop Gesture | Filters | Notion

302. Theme Switcher in Side-drawer

302. Theme Switcher in Side-drawer

Desktop | Accessibility | Pathfinding | Web | EspaƱol | Side Panel | Transition | Image / Illustration | Click Event | Google

293. Collapsable Sidebar Menu

293. Collapsable Sidebar Menu

Desktop | Awareness | Pathfinding | Accessibility | Web | English | EspaƱol | Side Panel | Transition | Click Event | Navbar | Google | Gmail

288. Vimeo - Topbar Language Switching

288. Vimeo - Topbar Language Switching

Desktop | Awareness | Accessibility | Web | English | EspaƱol | Vimeo

282. Telegram - Chat Setup Wizard

282. Telegram - Chat Setup Wizard

Desktop | Onboarding | Accessibility | Pathfinding | Apple OS | English | Telegram

280. Slack - Workspace Creation Wizard

280. Slack - Workspace Creation Wizard

Desktop | Accessibility | Onboarding | Apple OS | EspaƱol | Slack

271. Slack - Collapsable Sidebars

271. Slack - Collapsable Sidebars

Desktop | Pathfinding | Accessibility | Apple OS | EspaƱol | Slack

278. Search Menu Dropdown from Input Text

278. Search Menu Dropdown from Input Text

Desktop | Pathfinding | Accessibility | Web | English | Google | Google Analytics

277. Horizontal Card Slider with Actions

277. Horizontal Card Slider with Actions

Desktop | Pathfinding | Accessibility | Web | EspaƱol | Linkedin

265. Youtube - Hidden Options Menu (Dots)

265. Youtube - Hidden Options Menu (Dots)

Desktop | Pathfinding | Accessibility | Web | English | YouTube | Google

258. Squarespace - Adaptable Viewport Size

258. Squarespace - Adaptable Viewport Size

Desktop | Accessibility | Pathfinding | Web | English | Side Panel | Hypertext Links | Animation | Squarespace

256. Modal Blackout with Steps & Forms

256. Modal Blackout with Steps & Forms

Desktop | Onboarding | Decision Making | Accessibility | Web | EspaƱol | Facebook

243. GIPHY - Trim Video Slicers

243. GIPHY - Trim Video Slicers

Desktop | Decision Making | Awareness | Accessibility | Web | English | Animation | User Selection | Drag & Drop Gesture | GIPHY

254. Notion - Side Menu Toggle

254. Notion - Side Menu Toggle

Desktop | Pathfinding | Accessibility | Web | English | EspaƱol | Notion

253. Youtube - Table Row Selector

253. Youtube - Table Row Selector

Desktop | Accessibility | Pathfinding | Awareness | Web | English | User Selection | Text Input | Fixed on Scroll | Thumbnail | YouTube | Google

228. Notification Bell Status

228. Notification Bell Status

Desktop | Accessibility | Web | English | Hypertext Links | Dropdown Menu | Empty State | User Selection | Avatar | Animation | YouTube | Google

236. Horizontal Graph with Time Ranges

236. Horizontal Graph with Time Ranges

Desktop | Pathfinding | Accessibility | Web | English | Google | Google Analytics

226. Youtube Studio - Image Multi-zone Crop

226. Youtube Studio - Image Multi-zone Crop

Desktop | Accessibility | Web | EspaƱol | YouTube | Google

225. Cloudflare - Multiple Graphs by Time Ranges

225. Cloudflare - Multiple Graphs by Time Ranges

Desktop | Pathfinding | Accessibility | Web | English | Cloudflare

222. Cloudflare - Toggle Light/Dark Theme

222. Cloudflare - Toggle Light/Dark Theme

Desktop | Accessibility | Web | English | Cloudflare

220. Apple - Multi-window App

220. Apple - Multi-window App

Desktop | Accessibility | Pathfinding | Apple OS | EspaƱol | Apple | Apple Notes

219. Apple - Adjacent Sidebar Toggle

219. Apple - Adjacent Sidebar Toggle

Desktop | Tablet | Accessibility | Pathfinding | Apple OS | EspaƱol | Apple | Apple Notes

218. Apple Keynote - Template Format Selection

218. Apple Keynote - Template Format Selection

Desktop | Decision Making | Accessibility | Apple OS | EspaƱol | Apple | Apple Keynote

214. Netflix - Information Toggle

214. Netflix - Information Toggle

Desktop | Accessibility | Web | EspaƱol | Dropdown Menu | Video | Thumbnail | Navbar | Button | Toggle Field | Netflix

183. Apple MacOS - Full Screen Widget Customization

183. Apple MacOS - Full Screen Widget Customization

Desktop | Accessibility | Apple OS | Apple

54. Apple Safari - Browser Reader Mode

54. Apple Safari - Browser Reader Mode

Desktop | Accessibility | Apple OS | Web | Apple | Apple Safari

134. Save for Reading Later

134. Save for Reading Later

Desktop | Mobile | Accessibility | Web | English

138. Read Modes

138. Read Modes

Desktop | Accessibility | Web | EspaƱol

91. Settings for Account Privacy

91. Settings for Account Privacy

Desktop | Accessibility | Web | English | Twitter

189. Feature Preview on Menu

189. Feature Preview on Menu

Desktop | Awareness | Accessibility | Web | English | Dropdown Menu | Notification Badge

7. sitepoint - Accessibility Adjustments

7. sitepoint - Accessibility Adjustments

Desktop | Accessibility | Web | English

157. Webflow - Magnifying Glass on Images

157. Webflow - Magnifying Glass on Images

Desktop | Accessibility | Web | English | Webflow

11. Apple MacOS - Split OS Screens

11. Apple MacOS - Split OS Screens

Desktop | Accessibility | Web

167. Apple MacOS - 2-pane Widget Customization

167. Apple MacOS - 2-pane Widget Customization

Desktop | Accessibility | Apple OS | English | Apple

182. Static Tooltip for Text Formatting

182. Static Tooltip for Text Formatting

Desktop | Accessibility | Web | English | Google | Google Sites

29. About.me - Wizard Generation Profile

29. About.me - Wizard Generation Profile

Desktop | Onboarding | Accessibility | Web | English

186. Apple Safari - Browser Background Customization

186. Apple Safari - Browser Background Customization

Desktop | Accessibility | Apple OS | EspaƱol | Apple | Apple Safari

176. Wordpress.com - Natural Inputs with Suggestions

176. Wordpress.com - Natural Inputs with Suggestions

Desktop | Decision Making | Accessibility | Awareness | Pathfinding | Web | English | Wordpress

129. PDF Show & Download

129. PDF Show & Download

Desktop | Accessibility | Decision Making | Web | English

86. Table Column Slicer

86. Table Column Slicer

Desktop | Accessibility | Decision Making | Web | English

202. Apple Reminders - List Widget Customization

202. Apple Reminders - List Widget Customization

Desktop | Accessibility | Apple OS | EspaƱol

57. IDF - Encouraging Newsletter Sign-up

57. IDF - Encouraging Newsletter Sign-up

Desktop | Decision Making | Accessibility | Web | English

24. Window Maximize Options

24. Window Maximize Options

Desktop | Accessibility | Web | English

119. PrestaShop - Site Cookie Management

119. PrestaShop - Site Cookie Management

Desktop | Accessibility | Consent | Web | EspaƱol

54. Modal for Language & Region Picker

54. Modal for Language & Region Picker

Desktop | Accessibility | Web | English | Google

156. Figma - Keyboard Navigated Menu

156. Figma - Keyboard Navigated Menu

Desktop | Pathfinding | Accessibility | Windows | Apple OS | Web | English | View | Original source on Twitter | Figma

21. Apple MacOS - Advanced Color Picking

21. Apple MacOS - Advanced Color Picking

Desktop | Accessibility | Apple OS | English

42. Modal for Tags Editing

42. Modal for Tags Editing

Desktop | Accessibility | Awareness | Web | English | Google | Google Keep

160. Pocket - Content Highlighting

160. Pocket - Content Highlighting

Desktop | Accessibility | Pathfinding | Web | EspaƱol

188. Trello - Color shapes for Colour-blind

188. Trello - Color shapes for Colour-blind

Desktop | Accessibility | Web | EspaƱol | Modal | Tooltip | Hypertext Links | Text Input | Trello

Ā 
Ā 
Ā