UX PATTERN
Awareness & Status
Because we read faster and worse than thought. Useful ways to drive user's attention to a specific topic or area of the screen for ease of use, not for selling ads.
397. Modal with Card Options
397. Modal with Card Options
Modal
388. Multiple Item Selection Drag & Drop
388. Multiple Item Selection Drag & Drop
SelectionDrag & Drop
386. Skeleton Loader
386. Skeleton Loader
Loader
382. Interactive Background Animation
382. Interactive Background Animation
Animation & Video
378. Modal Blackout with Animation
378. Modal Blackout with Animation
ModalHypertextAnimation & Video
363. Better History - Back to Top on scroll
363. Better History - Back to Top on scroll
PaginationScrollHypertextFixed on Scroll
361. WhatsApp - Progress Bar Loading
361. WhatsApp - Progress Bar Loading
LoaderHypertext
355. Jira - Feature Presentation Tooltip
355. Jira - Feature Presentation Tooltip
TooltipHypertextPagination
354. Figma - Floating Form with Steps
354. Figma - Floating Form with Steps
Input FieldSide Panel
353. Population Pyramid - Visualizations with live filters
353. Population Pyramid - Visualizations with live filters
GraphAnimation & VideoFiltersDropdown Menu
349. HubSpot - Toggle High Contrast
349. HubSpot - Toggle High Contrast
HypertextNavbar
347. YouTube - Floating Progress Bar
347. YouTube - Floating Progress Bar
Side PanelAccordion
357. Modal with Steps (No blackout)
357. Modal with Steps (No blackout)
ModalAnimation & Video
344. MercadoLibre - Horizontal Item Slider
344. MercadoLibre - Horizontal Item Slider
CarrouselModalPaginationIllustration
343. Behance - Login with Code Validation 
343. Behance - Login with Code Validation
Input FieldHypertextPagination
339. Asana - Platform Onboarding Simulator
339. Asana - Platform Onboarding Simulator
Input FieldPaginationAnimation & VideoHypertext
345. Vertical Accordion for FAQs
345. Vertical Accordion for FAQs
AccordionHypertext
336. Floating Popover on Click
336. Floating Popover on Click
TooltipInput FieldHypertext
343. Modal Drag & Drop to Fixed Position
343. Modal Drag & Drop to Fixed Position
Drag & DropModalSide Panel
334. MercadoLibre - Call to Action Trigger Effect
334. MercadoLibre - Call to Action Trigger Effect
331. Linkedin - Search Bar Blackout
331. Linkedin - Search Bar Blackout
332. Apple - Drag&Drop Browser File to Desktop
332. Apple - Drag&Drop Browser File to Desktop
333. Static Tooltip with Steps
333. Static Tooltip with Steps
325. Apple - Drag & Drop Slots
325. Apple - Drag & Drop Slots
319. Wordpress - Delete Confirmation with Name
319. Wordpress - Delete Confirmation with Name
315. Signal - PIN Reminder
315. Signal - PIN Reminder
Input FieldModalBannerHypertext
310. HubSpot - Checkbox Confirmation
310. HubSpot - Checkbox Confirmation
308. MercadoLibre - Hero Slider
308. MercadoLibre - Hero Slider
308. Spinners for Module Loading
308. Spinners for Module Loading
307. Tooltip on Hover
307. Tooltip on Hover
306. Drag & Drop for Reordering Items
306. Drag & Drop for Reordering Items
303. Background Animation
303. Background Animation
300. Sound Bars Graph
300. Sound Bars Graph
299. Fixed Corner Popup with Steps
299. Fixed Corner Popup with Steps
289. Floating Popover on Click
289. Floating Popover on Click
288. Vimeo - Topbar Language Switching
288. Vimeo - Topbar Language Switching
286. Apple - Background Animation on Scroll
286. Apple - Background Animation on Scroll
284. Emergency Information Map
284. Emergency Information Map
284. Top Tooltip on Link Hover
284. Top Tooltip on Link Hover
281. Ideabot - Background Animation on Mouse Movement
281. Ideabot - Background Animation on Mouse Movement
268. GIPHY - Alert on Drag & Drop
268. GIPHY - Alert on Drag & Drop
Drag & DropModalHypertextAnimation & VideoIllustration
275. Popover on Hover_07.10.33_p._m..png&w=1920&q=90)
_07.10.33_p._m..png&w=1920&q=90)
275. Popover on Hover
Tooltip
274. Interactive Background Animation
274. Interactive Background Animation
Animation & VideoLoaderDrag & Drop
243. GIPHY - Trim Video Slicers
243. GIPHY - Trim Video Slicers
Animation & VideoSelectionDrag & Drop
253. Youtube - Table Row Selector
253. Youtube - Table Row Selector
ScrollSelectionInput Field
251. Progressive Layout Loader
251. Progressive Layout Loader
TooltipLoaderAnimation & Video
235. Background Animation on Hover
235. Background Animation on Hover
Animation & VideoHypertext
241. Modal Blackout with Steps
241. Modal Blackout with Steps
ModalHypertextPaginationIllustration
231. Automatic Floating Popover with Steps
231. Automatic Floating Popover with Steps
HypertextPaginationSide Panel
212. Automatic Background Animation 
212. Automatic Background Animation
Animation & VideoLoaderHypertext
172. PedidosYa - Search Results Recommendation_00.32.31/w=1920,quality=90,fit=scale-down)
172. PedidosYa - Search Results Recommendation
Tooltip
101. Downloading Desktop App_11.28.04_a._m..png&w=1920&q=90)
_11.28.04_a._m..png&w=1920&q=90)
101. Downloading Desktop App
Hypertext
45. Webapp Video Loader_11.42.04_p._m..png&w=1920&q=90)
_11.42.04_p._m..png&w=1920&q=90)
45. Webapp Video Loader
Loader
43. File Upload Status_13.52.38/w=1920,quality=90,fit=scale-down)
43. File Upload Status
Side PanelFixed on ScrollError StateProgress State
95. Delete Confirmation with Name_02.02.36_p._m..png&w=1920&q=90)
_02.02.36_p._m..png&w=1920&q=90)
95. Delete Confirmation with Name
Input FieldModalHypertext
31. Page Blocker Edition Warning_09.47.02_p._m..png&w=1920&q=90)
_09.47.02_p._m..png&w=1920&q=90)
31. Page Blocker Edition Warning
132. Amazon - Store Tooltip Reminders
132. Amazon - Store Tooltip Reminders
TooltipHypertext
130. Animated Email Page
130. Animated Email Page
Animation & VideoHypertext
189. Illustration (Meme) on Empty State_10.03.52/w=1920,quality=90,fit=scale-down)
189. Illustration (Meme) on Empty State
IllustrationHypertext
158. Bar Reading Status
158. Bar Reading Status
Progress StateNotification BadgeNavbarFixed on Scroll
56. Automatic Blackout Popover with Steps
56. Automatic Blackout Popover with Steps
203. Password Expiration on Login_23.24.56/w=1920,quality=90,fit=scale-down)
203. Password Expiration on Login
179. Stylized Feature Highlighting
179. Stylized Feature Highlighting
147. Linked Settings for User Permissions_09.35.30_p._m..png&w=1920&q=90)
_09.35.30_p._m..png&w=1920&q=90)
147. Linked Settings for User Permissions
139. Synced Hover Animations
139. Synced Hover Animations
HypertextGraph
124. Critical Changes Warning_11.56.38_a._m..png&w=1920&q=90)
_11.56.38_a._m..png&w=1920&q=90)
124. Critical Changes Warning
100. Automatic Floating Popover_23.29.09/w=1920,quality=90,fit=scale-down)
100. Automatic Floating Popover
117. Side Status Notification
117. Side Status Notification
116. User Feedback on Web Content_00.09.24/w=1920,quality=90,fit=scale-down)
116. User Feedback on Web Content
116. 2-pane Automatic Slider
116. 2-pane Automatic Slider
133. Website-Browser Notification Reminder_08.04.40_a._m..png&w=1920&q=90)
_08.04.40_a._m..png&w=1920&q=90)
133. Website-Browser Notification Reminder
176. Wordpress.com - Natural Inputs with Suggestions
176. Wordpress.com - Natural Inputs with Suggestions
91. Bubble Status Reading 
91. Bubble Status Reading
ScrollPaginationAnimation & VideoFixed on ScrollProgress StateEmpty State
83. Rewards Notification on Topbar_23.36.31/w=1920,quality=90,fit=scale-down)
83. Rewards Notification on Topbar
Notification BadgeDropdown MenuNavbar
55. Contextual Form Input Errors_03.59.07_p._m..png&w=1920&q=90)
_03.59.07_p._m..png&w=1920&q=90)
55. Contextual Form Input Errors
38. Youtube - Video Statusbar_02.05.03_p._m..png&w=1920&q=90)
_02.05.03_p._m..png&w=1920&q=90)
38. Youtube - Video Statusbar
66. Actionable Empty State_19.04.51/w=1920,quality=90,fit=scale-down)
66. Actionable Empty State
LoaderEmpty State
39. Youtube - Dismissed Bottom Popup_10.22.23_p._m..png&w=1920&q=90)
_10.22.23_p._m..png&w=1920&q=90)
39. Youtube - Dismissed Bottom Popup
196. Video Story on Website
196. Video Story on Website
37. Branded Illustrations for Reinforcement
37. Branded Illustrations for Reinforcement
80. Contextual Input Status_12.12.09_p._m..png&w=1920&q=90)
_12.12.09_p._m..png&w=1920&q=90)
80. Contextual Input Status
105. Automatic Blackout Popover_12.48.42_p._m..png&w=1920&q=90)
_12.48.42_p._m..png&w=1920&q=90)
105. Automatic Blackout Popover
178. OS Voice Widget with Actions
178. OS Voice Widget with Actions
50. Food Order Receipt
50. Food Order Receipt
180. Dedicated Screen for Action Confirmation
180. Dedicated Screen for Action Confirmation
6. Modal Blackout with Form_07.33.05_p._m..png&w=1920&q=90)
_07.33.05_p._m..png&w=1920&q=90)
6. Modal Blackout with Form