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

Made with šŸ’™ by Pablo Armenv2.1.12

Home
/Flows
/Awareness & Status
Description
We read faster and worse than thought.

Patterns for 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. This patterns makes strong use of notifications, progress bars and status chips.
Ā 
Recommendation (Ad)
https://uink.digital
Ā 
  • Desktop (116)
  • Tablet (3)
  • Mobile (19)
403. File Upload and Background Loader

403. File Upload and Background Loader

Desktop | Awareness | Feedback | Onboarding | Web | English | User Selection | Drag & Drop Gesture | Loader | Animation | Image / Illustration | Empty State | Progress State | Button | File OS | Click Event

402. Transition: Zoom-to-Dock for Minimize

402. Transition: Zoom-to-Dock for Minimize

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

401. In-App News Notification

401. In-App News Notification

Desktop | Awareness | Notification Badge | Tooltip | Infinite Scroll | Hypertext Links

400. 3D Button Shadow

400. 3D Button Shadow

Desktop | Awareness | Pathfinding | Button | Animation | Transition

397. Modal w/ Card Options

397. Modal w/ Card Options

Desktop | Decision Making | Feedback | Awareness | Onboarding | Pathfinding | Web | EspaƱol | Modal | Thumbnail | Animation | Close Overlay | Cards | Dim Overlay

388. Drag & Drop and Checkbox to Select Multiple Item

388. Drag & Drop and Checkbox to Select Multiple Item

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

386. Skeleton Loader

386. Skeleton Loader

Desktop | Awareness | Onboarding | Web | English | Loader | Thumbnail

382. Interactive Background Animation

382. Interactive Background Animation

Desktop | Feedback | Awareness | Onboarding | Landing Page | Web | English | Animation | Scrollbar | QR

378. Modal Blackout w/ Animation

378. Modal Blackout w/ Animation

Desktop | Decision Making | Awareness | Onboarding | Web | EspaƱol | Modal | Hypertext Links | Animation

363. Better History - Back to Top on scroll

363. Better History - Back to Top on scroll

Desktop | Pathfinding | Awareness | Web | English | Pagination | Infinite Scroll | Hypertext Links | Fixed on Scroll

361. WhatsApp - Progress Bar Loading

361. WhatsApp - Progress Bar Loading

Desktop | Awareness | Pathfinding | Onboarding | Web | EspaƱol | Loader | Hypertext Links

360. Page Outline Menu

360. Page Outline Menu

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

356. MetaMap - Multi-Layout Topbar Menu

356. MetaMap - Multi-Layout Topbar Menu

Desktop | Pathfinding | Awareness | Decision Making | Web | English | Navbar | Dropdown Menu

No preview

355. Jira - Feature Presentation Tooltip

Desktop | Awareness | Decision Making | Onboarding | Web | EspaƱol | Tooltip | Hypertext Links | Pagination

No preview

354. Figma - Floating Form with Steps

Desktop | Feedback | Consent | Awareness | Web | English | Text Input | Side Panel

353. Population Pyramid - Visualizations with live filters

353. Population Pyramid - Visualizations with live filters

Desktop | Pathfinding | Awareness | Decision Making | Web | EspaƱol | Graph | Filters | Dropdown Menu | Transition

349. HubSpot - Toggle High Contrast

349. HubSpot - Toggle High Contrast

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

347. YouTube - Floating Progress Bar

347. YouTube - Floating Progress Bar

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

357. Modal w/ Steps & Animation (No blackout)

357. Modal w/ Steps & Animation (No blackout)

Desktop | Pathfinding | Awareness | Decision Making | Web | English | Modal | Animation | Image / Illustration

344. MercadoLibre - Horizontal Item Slider

344. MercadoLibre - Horizontal Item Slider

Desktop | Awareness | Pathfinding | Web | EspaƱol | Carrousel | Modal | Pagination | Image / Illustration

343. Behance - Login with Code Validation

343. Behance - Login with Code Validation

Desktop | Consent | Decision Making | Awareness | Web | EspaƱol | Text Input | Hypertext Links | Pagination

339. Asana - Platform Onboarding Simulator

339. Asana - Platform Onboarding Simulator

Desktop | Decision Making | Awareness | Pathfinding | Web | English | Text Input | Pagination | Animation | Hypertext Links

346. Sidebar Menu With Collapsable Items (Show More)

346. Sidebar Menu With Collapsable Items (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

No preview

336. Floating Popover on Click

Desktop | Pathfinding | Awareness | Apple OS | English | Tooltip | Text Input | Hypertext Links

343. Modal/Dialog Drag & Drop to Fixed Position

343. Modal/Dialog Drag & Drop to Fixed Position

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

334. MercadoLibre - Call to Action Trigger Effect

334. MercadoLibre - Call to Action Trigger Effect

Desktop | Decision Making | Awareness | Web | EspaƱol

331. Linkedin - Search Bar Blackout

331. Linkedin - Search Bar Blackout

Desktop | Pathfinding | Awareness | Web | EspaƱol

332. Drag & Drop to Create File from Web Image

332. Drag & Drop to Create File from Web Image

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

322. Search on Menu Items

322. Search on Menu Items

Desktop | Pathfinding | Awareness | Apple OS | EspaƱol | Navbar | Dropdown Menu | Text Input | Fixed on Scroll

No preview

333. Static Tooltip with Steps

Desktop | Onboarding | Pathfinding | Awareness | Apple OS | English

325. Drag & Drop Tag Colors to Slots

325. Drag & Drop Tag Colors to Slots

Desktop | Decision Making | Awareness | Accessibility | Apple OS | English | Drag & Drop Gesture | Color Marker | Checkbox | Tags

319. Modal Blackout w/ Multiple Choice

319. Modal Blackout w/ Multiple Choice

Desktop | Decision Making | Consent | Awareness | Web | EspaƱol | Modal | Avatar | Button | Hypertext Links

315. Signal - PIN Reminder

315. Signal - PIN Reminder

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

318. Instagram - Animated Illustration with Menu

318. Instagram - Animated Illustration with Menu

Desktop | Pathfinding | Awareness | Web | English | Animation | Pagination | Carrousel

316. Modal Blackout for Delete Confirmation

316. Modal Blackout for Delete Confirmation

Desktop | Decision Making | Awareness | Web | EspaƱol | Modal | Text Input | Button

308. MercadoLibre - Hero Slider

308. MercadoLibre - Hero Slider

Desktop | Pathfinding | Awareness | Web | EspaƱol | Carrousel | Drag & Drop Gesture | Transition | Photo

308. Spinners for Module Loading

308. Spinners for Module Loading

Desktop | Awareness | Pathfinding | Web | English | Loader | Twitter

307. Tooltip on Hover

307. Tooltip on Hover

Desktop | Awareness | Pathfinding | Apple OS | Web | English | Thumbnail | Tooltip | Side Panel | Google | Google Chrome

306. Drag & Drop for Reordering List Items (Mouse)

306. Drag & Drop for Reordering List Items (Mouse)

Desktop | Awareness | Accessibility | Web | English | Drag & Drop Gesture | Filters | List Items | Modal | Checkbox | Notion

305. Button Combo for App Download

305. Button Combo for App Download

Desktop | Pathfinding | Decision Making | Awareness | Web | EspaƱol | Button | Microsoft | Microsoft Teams

303. Background Animation (on Load)

303. Background Animation (on Load)

Desktop | Onboarding | Awareness | Apple OS | English | Animation | Password Input

300. Sound Bars Graph

300. Sound Bars Graph

Desktop | Awareness | Pathfinding | Apple OS | EspaƱol | Sound Bar | Transition | Click Event | Dropdown Menu | WhatsApp

No preview

299. Fixed Corner Popup with Steps

Desktop | Feedback | Awareness | Web | English | Notion

295. ā€œNEWā€ Badge on Menu Items

295. ā€œNEWā€ Badge on Menu Items

Desktop | Mobile | Awareness | Decision Making | Pathfinding | Web | English | Navbar | Notification Badge | Hypertext Links | Notion

293. Collapsable Sidebar Menu

293. Collapsable Sidebar Menu

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

292. Vertical Icon Menu

292. Vertical Icon Menu

Desktop | Awareness | Pathfinding | Web | English | Tooltip | Side Panel | Navbar | Hover Event | Image / Illustration | Notification Badge | Dashboard | Mailchimp

291. Action Menu from Button

291. Action Menu from Button

Desktop | Decision Making | Awareness | Pathfinding | Web | English | Google | Google Meet

290. Floating Popover on Click

290. Floating Popover on Click

Desktop | Awareness | Decision Making | Web | English | Unsplash

288. Vimeo - Topbar Language Switching

288. Vimeo - Topbar Language Switching

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

286. Background Animation on Scroll

286. Background Animation on Scroll

Desktop | Awareness | Pathfinding | Web | EspaƱol | Animation | Transition | Image / Illustration | Fixed on Scroll | Apple

285. Cloudflare - Sidebar with Scroll

285. Cloudflare - Sidebar with Scroll

Desktop | Pathfinding | Awareness | Web | English | Cloudflare

284. Emergency Information Map

284. Emergency Information Map

Desktop | Pathfinding | Awareness | Landing Page | Web | EspaƱol | Google

No preview

284. Top Tooltip on Link Hover

Desktop | Awareness | Pathfinding | Web | English | Crunchbase

281. Background Animation (on Mouse Move)

281. Background Animation (on Mouse Move)

Desktop | Awareness | Web | English

268. Drag & Drop to Upload File

268. Drag & Drop to Upload File

Desktop | Awareness | Pathfinding | Web | Apple OS | English | Drag & Drop Gesture | Modal | Hypertext Links | Animation | Image / Illustration | GIPHY

275. Popover on Hover

275. Popover on Hover

Desktop | Awareness | Decision Making | Web | EspaƱol | Tooltip | Linkedin

274. Interactive Background Animation

274. Interactive Background Animation

Desktop | Pathfinding | Awareness | Web | English | Animation | Loader | Drag & Drop Gesture | GitHub

243. GIPHY - Trim Video Slicers

243. GIPHY - Trim Video Slicers

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

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

251. Progressive Layout Loader

251. Progressive Layout Loader

Desktop | Pathfinding | Awareness | Web | English | Tooltip | Loader | Animation | Google | Google Analytics

235. Background Animation (on Mouse Hover)

235. Background Animation (on Mouse Hover)

Desktop | Decision Making | Awareness | Pathfinding | Web | EspaƱol | Animation | Hypertext Links | Disney

241. Modal Blackout w/ Steps

241. Modal Blackout w/ Steps

Desktop | Onboarding | Awareness | Web | English | Modal | Hypertext Links | Pagination | Image / Illustration | Wordpress

231. Floating Dialog Popover w/ Steps

231. Floating Dialog Popover w/ Steps

Desktop | Awareness | Pathfinding | Web | EspaƱol | Hypertext Links | Pagination | Side Panel | Alert Dialog | Modal | Dark Mode | Wordpress

229. Top Banner for Design Changes

229. Top Banner for Design Changes

Desktop | Awareness | Web | EspaƱol | Hypertext Links | Banner | Google | Google Meet

222. Floating Banner on User Input

222. Floating Banner on User Input

Desktop | Decision Making | Awareness | Web | English | Banner | Twitter

221. Stacked Action Button

221. Stacked Action Button

Desktop | Awareness | Pathfinding | Web | English | Fixed on Scroll | Navbar | Infinite Scroll | Button | Back Link | Search Input | Twitter

No preview

212. Automatic Background Animation (on Load)

Desktop | Decision Making | Awareness | Web | English | Animation | Loader | Hypertext Links

172. PedidosYa - Search Results Recommendation

172. PedidosYa - Search Results Recommendation

Desktop | Onboarding | Decision Making | Awareness | Web | EspaƱol | Tooltip | PedidosYa

207. Downloading Desktop App

207. Downloading Desktop App

Desktop | Awareness | Web | English | Hypertext Links

45. Webapp Video Loader

45. Webapp Video Loader

Desktop | Awareness | Web | English | EspaƱol | Loader

199. Sidebar Emptystate

199. Sidebar Emptystate

Desktop | Onboarding | Awareness | Web | English | Side Panel | Hypertext Links | Empty State | Image / Illustration | Google | Google Suite

43. File Upload Status

43. File Upload Status

Desktop | Awareness | Web | English | Side Panel | Fixed on Scroll | Error State | Progress State | Google | Google Suite

No preview

190. Delete Confirmation w/ Name (moved)

Desktop | Awareness | Web | English | Text Input | Modal | Hypertext Links | Webflow

189. Feature Preview on Menu

189. Feature Preview on Menu

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

5. Website Promotional Top Banners

5. Website Promotional Top Banners

Desktop | Awareness | Web | English | Banner | Hypertext Links

31. Page Blocker Edition Warning

31. Page Blocker Edition Warning

Desktop | Awareness | Web | English

No preview

132. Amazon - Store Tooltip Reminders

Desktop | Onboarding | Awareness | Web | EspaƱol | Tooltip | Hypertext Links | Amazon

130. Animated Email Page

130. Animated Email Page

Desktop | Awareness | Decision Making | Email | English | Animation | Hypertext Links | Google | Gmail

189. Illustration (Meme) on Empty State

189. Illustration (Meme) on Empty State

Desktop | Awareness | Web | English | Image / Illustration | Hypertext Links | Webflow

42. Browser Status Banner for Pages

42. Browser Status Banner for Pages

Desktop | šŸ“± Mobile | Awareness | Apple OS | EspaƱol | Banner | Hypertext Links | Empty State | Error State | Apple Safari

No preview

164. Static Tooltip on Menu

Desktop | Awareness | Web | EspaƱol | Tooltip | Hypertext Links | Linkedin

158. Bar Reading Status

158. Bar Reading Status

Desktop | Awareness | Pathfinding | Web | English | Progress State | Notification Badge | Navbar | Fixed on Scroll | McKinsey

56. Floating Tooltip with Steps and Blackout

56. Floating Tooltip with Steps and Blackout

Desktop | Onboarding | Decision Making | Awareness | Web | English | EspaƱol | Google | Gmail

203. Password Expiration on Login

203. Password Expiration on Login

Desktop | Awareness | Web | English

179. Stylized Feature Highlighting

179. Stylized Feature Highlighting

Desktop | Awareness | Web | English | Google | Google Suite

147. Linked Settings for User Permissions

147. Linked Settings for User Permissions

Desktop | Consent | Awareness | Web | English | Google | Google Analytics

139. Synced Hover Animations

139. Synced Hover Animations

Desktop | Decision Making | Awareness | Web | English | Hypertext Links | Graph | Mailchimp

124. Critical Changes Warning

124. Critical Changes Warning

Desktop | Awareness | Apple OS | EspaƱol | Slack

100. Floating Tooltip/Dialog

100. Floating Tooltip/Dialog

Desktop | Awareness | Web | EspaƱol | Google | Google Sites

117. Side Status Notification

117. Side Status Notification

Desktop | Awareness | Apple OS | English | EspaƱol | WhatsApp

116. User Feedback on Web Content

116. User Feedback on Web Content

Desktop | Feedback | Awareness | Web | EspaƱol

63. GitHub - Contextual Back Navigation Bar

63. GitHub - Contextual Back Navigation Bar

Desktop | Awareness | Pathfinding | Web | English | GitHub

116. 2-pane Automatic Slider

116. 2-pane Automatic Slider

Desktop | Pathfinding | Awareness | Web | EspaƱol | Tiendanube

133. Website-Browser Notification Reminder

133. Website-Browser Notification Reminder

Desktop | Awareness | Web | English | Facebook

176. Wordpress.com - Natural Inputs with Suggestions

176. Wordpress.com - Natural Inputs with Suggestions

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

91. Bubble Status Reading

91. Bubble Status Reading

Desktop | Pathfinding | Awareness | Appreciation | Web | English | Infinite Scroll | Pagination | Animation | Fixed on Scroll | Progress State | Empty State | TechCrunch

173. Share Invitation to Live Movie

173. Share Invitation to Live Movie

Desktop | Pathfinding | Onboarding | Awareness | Web | Apple OS | EspaƱol | Hypertext Links | Navbar | Live State | Empty State | Copy to Clipboard | Avatar | Thumbnail | Invitation Link | Disney

83. Rewards Notification on Topbar

83. Rewards Notification on Topbar

Desktop | Awareness | Appreciation | Web | English | Notification Badge | Dropdown Menu | Navbar

55. Contextual Form Input Errors

55. Contextual Form Input Errors

Desktop | Awareness | Web | EspaƱol | Zoom

38. Youtube - Video Statusbar

38. Youtube - Video Statusbar

Desktop | Awareness | Web | English | Google | YouTube

66. Actionable Empty State

66. Actionable Empty State

Desktop | Onboarding | Awareness | Web | English | Loader | Empty State | Google | Google Suite

39. Youtube - Dismissed Bottom Popup

39. Youtube - Dismissed Bottom Popup

Desktop | Awareness | COVID-19 Edition | Web | English

196. Video Story on Website

196. Video Story on Website

Desktop | Decision Making | Awareness | Web | EspaƱol

37. Branded Illustrations for Reinforcement

37. Branded Illustrations for Reinforcement

Desktop | Awareness | Web | English

42. Modal for Tags Editing

42. Modal for Tags Editing

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

80. Contextual Input Status

80. Contextual Input Status

Desktop | Awareness | Web | English | Noun Project

29. General Form Errors Banner

29. General Form Errors Banner

Desktop | Awareness | Web | English | Text Input | Banner | Notification Badge | Mailchimp

105. Floating Tooltip Blackout

105. Floating Tooltip Blackout

Desktop | Awareness | Web | English | Button | Dim Overlay | Tooltip | Alert Dialog | Close Overlay | Hypertext Links

23. Floating Voice Widget with Actions

23. Floating Voice Widget with Actions

Desktop | Awareness | Apple OS | macOS | English | Fixed on Scroll | Button | Animation | Avatar | Sound Bar | Color Marker | Apple

50. Food Order Receipt

50. Food Order Receipt

Desktop | Email notification | Awareness | Email | English | Uber EATS

10. Dedicated Screen for Action Confirmation

10. Dedicated Screen for Action Confirmation

Desktop | Decision Making | Awareness | Consent | Web | EspaƱol | English | Button | Hypertext Links | Invitation Link | Image / Illustration | Linkedin

146. Intelligencer - Hamburger Menu

146. Intelligencer - Hamburger Menu

Desktop | Mobile | Pathfinding | Awareness | Web | English

6. Modal Blackout w/ Form

6. Modal Blackout w/ Form

Desktop | Awareness | Web | English

4. Floating Status Banner

4. Floating Status Banner

Desktop | Awareness | Web | Google | Gmail

155. Menu Search Highlighting

155. Menu Search Highlighting

Desktop | Awareness | Pathfinding | Apple OS | macOS | EspaƱol | Dropdown Menu | Search Input | Click Event | User Selection | Text Input | Dim Overlay | Apple

Ā 
Ā