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.
388. Multiple Item Selection Drag & Drop
388. Multiple Item Selection Drag & Drop
SelectionDrag & Drop
363. Better History - Back to Top on scroll
363. Better History - Back to Top on scroll
PaginationScrollHypertextFixed on Scroll
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
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
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
333. Static Tooltip with Steps
333. Static Tooltip with Steps
299. Fixed Corner Popup with Steps
299. Fixed Corner Popup with Steps
_00.42.51/w=1920,quality=90,fit=scale-down)
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
_07.10.33_p._m..png&w=1920&q=90)
274. Interactive Background Animation
274. Interactive Background Animation
Animation & VideoLoaderDrag & Drop
231. Automatic Floating Popover with Steps
231. Automatic Floating Popover with Steps
HypertextPaginationSide Panel
_15.12.59/w=1920,quality=90,fit=scale-down)
_16.00.46/w=1920,quality=90,fit=scale-down)
212. Automatic Background Animation 
212. Automatic Background Animation
Animation & VideoLoaderHypertext
_00.32.31/w=1920,quality=90,fit=scale-down)
_11.28.04_a._m..png&w=1920&q=90)
_11.42.04_p._m..png&w=1920&q=90)
_12.03.02/w=1920,quality=90,fit=scale-down)
_13.52.38/w=1920,quality=90,fit=scale-down)
_02.02.36_p._m..png&w=1920&q=90)
_09.05.58_p._m..png&w=1920&q=90)
_09.47.02_p._m..png&w=1920&q=90)
132. Amazon - Store Tooltip Reminders
132. Amazon - Store Tooltip Reminders
TooltipHypertext
_10.03.52/w=1920,quality=90,fit=scale-down)
42. Browser Status Banner for Pages_06.23.32_p._m..png&w=1920&q=90)
42. Browser Status Banner for Pages
BannerHypertextEmpty StateError State
_23.24.56/w=1920,quality=90,fit=scale-down)
_09.35.30_p._m..png&w=1920&q=90)
_11.56.38_a._m..png&w=1920&q=90)
_23.29.09/w=1920,quality=90,fit=scale-down)
_00.09.24/w=1920,quality=90,fit=scale-down)
_21.29.50/w=1920,quality=90,fit=scale-down)
_08.04.40_a._m..png&w=1920&q=90)
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
173. Share Invitation to Live Movie
173. Share Invitation to Live Movie
HypertextNavbarLive StateEmpty StateCopy to ClipboardAvatarShare ThumbnailInvitation Link
83. Rewards Notification on Topbar_23.36.31/w=1920,quality=90,fit=scale-down)
83. Rewards Notification on Topbar
Notification BadgeDropdown MenuNavbar
_03.59.07_p._m..png&w=1920&q=90)
_02.05.03_p._m..png&w=1920&q=90)
_19.04.51/w=1920,quality=90,fit=scale-down)
_10.22.23_p._m..png&w=1920&q=90)
_02.04.21_p._m..png&w=1920&q=90)
_12.12.09_p._m..png&w=1920&q=90)
_20.00.24/w=1920,quality=90,fit=scale-down)
_12.48.42_p._m..png&w=1920&q=90)
_16.21.40/w=1920,quality=90,fit=scale-down)
_07.33.05_p._m..png&w=1920&q=90)
_23.17.53/w=1920,quality=90,fit=scale-down)
