"I love Waveguide - User Experience Design Examples | UX Patterns & Examples"

2022-05-08 07:54:50

Open main menu Home Get In Touch ? Home Get In Touch ? User Experience Design in the Wild Waveguide is a project by JJ. Ramirez that documents UX examples in different platforms and contexts. It was created as a repository that collects remarkable user experience design execution in production software and real-life interaction scenarios. Platform Select a tab All iOS Android Else All iOS Android Others Category All Adapting Context Aggregation Automation Clarity Correctness Creating Boundaries Customization Delight Digestability Discoverability Easter Egg Engagement Familiarity Feedback Loop Foolproofing Forgiveness Increasing Context Increasing Friction Inferring Context Just In Time Keeping Context Labeling Layout Learnability Multitasking Navigability Optimized Real Estate Potentially Dark Power User Predictability Privacy Recall Reducing Cognitive Load Reducing Friction Social Proof Telltale Trust Upsell Visibility Arlo Donate Video This is a solution found in the Arlo Security app. An Arlo camera will record multiple videos of ... Slack Tab Navigation Helper This is a pattern found in Slack. When users start tabbing (pressing the tab keycap to navigate) ... Ikea Load More Pagination This is a UI control found on the official Ikea Website. Ikea's website search allows users to lo... GIF LIFX Corner Segmented Control This is a UI control found in the LIFX iOS Official App. This UI element is a segmented control t... If you like the content, consider subscribing to Waveguide Next, a newsletter & blog where I share new examples and lessons on User Experience. GIF Twitter Live Tweet Counters This is an interaction found on Twitter. All tweets in a timeline have live counters that change ... ? Potentially Dark Pattern Chase Invest Account Upsell This is a solution found in the Chase Mobile App. Chase detects wire transfers to financial servi... Discord QR Code Login This is a solution found in Discord. When users attempt to log in, they are shown a prominent opt... Spotify Car View Mode This is a solution found in the Spotify mobile app. When Spotify detects that is currently being ... GIF Pocket Home Tab as a Menu This is a solution found in the Pocket app. When using the bottom navigation tabs, users will not... Home Depot Product Stock Details This is a solution found in The Home Depot website. When users are looking up a product, Home Dep... Progressive Security Affordances This is a solution found on the Progressive website. When users are quoting insurances coverage, ... TRED Test Drive Prompt This is a pattern found in TRED (a used-car online market place). When a potential buyer is inqui... Crisp Incentivized Setup This is a solution found in Crisp chat. When customers finish signing-up for an account, they lan... Netflix Delete and Play Next This is a solution found in the Netflix mobile app. When users watch shows that they previously s... GIF Google Thanos Snap This is an easter egg found in Google. When users search for "Thanos" and tap or click over Thano... If you like the content, consider subscribing to Waveguide Next, a newsletter & blog where I share new examples and lessons on User Experience. Uber Eats Previous Order Reminder This is a solution found in Uber Eats. When users navigate the menu of a restaurant where they pr... GIF Amazon Hamburger Cards This is a solution found in the Amazon app. When users open the sidebar menu (a.k.a hamburger men... GIF Shazam Listen on App Start This is a solution found in the Shazam app. Shazam has a setting that allows you to trigger the S... Sephora "Assist Me" Basket This is a solution found in some Sephora stores. When you visit Sephora, you can select between a... GIF Google Translate Listen Slow Down This is a solution found in Google Translate. Google Translate has a feature to listen to the pro... GIF GitBook Navbar and Tab Preview This is a solution found in Gitbook onboarding flow. When setting up an organization in GitBook, ... Chipotle Table Gap This is a customer experience solution found in some Chipotle restaurants with space constraints.... Alaska Airlines Open In New Tab This is a solution found in the Alaska Airlines in-flight website. When you open the flight track... GIF Zeit Brand Page Redirect This is a solution found in Zeit’s website. When a user attempts to right-click the logo in the n... Slack Character Summon This is a solution found in Slack. When users type a special character within a text input, like ... GIF Flipboard Pre-populated Text This is a solution found in the Flipboard Browser Extension (In this case Chrome). When users sha... GIF Reddit Thread Scroller This is a solution found in the Reddit mobile apps. Reddit threads are usually a long chain of co... GIF Invision Freehand Shortcuts Cheatsheet This is a solution found in the Freehand tool by Invision. When using Freehand, users can see a s... Shazam Reminder Notification This is a solution found in the Shazam apps for iOS and Android. When users tag a song using Shaz... GIF Algolia Region Latency This is a solution found in Algolia onboarding flow. When users are creating an Algolia account, ... GIF Twitter Floating to Fixed Transition This is a layout solution found on Twitter for Web. Every Twitter profile showcases the profile p... GIF Microsoft VS Code Unsaved File Affordance This is a solution found in Microsoft's VS Code (as well as many other code editors). When a user... If you like the content, consider subscribing to Waveguide Next, a newsletter & blog where I share new examples and lessons on User Experience. Bloomberg.com Stocks Widget This is a solution found in Bloomberg.com. All articles in Bloomberg that mention a publicly trad... GIF Medium Infinite Scroll Footer This is a layout solution found in Medium.com. Medium's website home uses infinite scrolling to r... GIF Amazon Forgiving Checkboxes This is a solution found in Amazon.com. When a user clicks on the label of one of the filter's ch... Pocket Save URL Prompt This is a solution found in the Pocket mobile apps (iOS and Android). When a user copies a URL fr... Apple Watch Nightstand Nudge This a solution found in the Apple Watch. When in Standnight mode, the Apple Watch will turn on i... GIF Adobe CC Augmented Help This is a solution found in modern Adobe CC products like Lightroom (and any Mac software that re... Bose Folded Icon Representation This is a solution found in the Bose Quiet Comfort 35 II case. When a customer opens the case for... Google Maps Crossing State Lines This is a solution found in the Google Maps mobile apps. When users are in navigation mode drivin... YouTube 10 Seconds Skip This is a solution found in the YouTube mobile apps. When a user performs a quick double on the e... Spectrum Chat Previous Sign-in Help This is a solution found in the login screen of Spectrum (https://spectrum.chat). It helps Spectr... Google Inbox Email Reminder Helper This is a solution found in the Google Inbox mobile app. When users start composing an email dire... Robinhood Trading Hours Theme This is a solution found in the Robinhood apps. When a user opens the app, the UI will get render... Fortrabbit Matching Examples This is a solution found in the Fortrabbit service documentation. When a customer needs to refere... GIF Airbnb Fixed Booking Options This is a solution found in the Airbnb web app. When a user scrolls through an Airbnb listing, th... Facebook Compose Focus This is a solution found in the Facebook Web App. When a user starts writing a post, the containe... GIF Procore Horizontal Scroll Handle This is a solution found in the Procore web app (enterprise software for construction). In Procor... GIF Google Docs Inferred Document Name This is a solution found in the Google Docs web app. When a user wants to name a new document, Go... Simplenote Collapse Keyboard Simplenote is a minimalist note-taking app. The app has a design that heavily optimized writing a... GIF Instagram Swipe Item Browsing This is an interaction solution found in the Instagram mobile apps that helps users to discover t... Amazon Swipe To Place Order This is a solution found in the Amazon mobile apps. When users select the "Buy Now" option when p... Foursquare Faded Map Layout This is a layout solution found in the Foursquare iOS app. In the 'Place Detail' view, the inform... Bareburger Refill Me This is a physical solution found in the Bareburger restaurant tables. Each table has a small pai... GIF Airtable Reactive Favicon This is a solution found in the Airtable web app. When a user changes the name, color, and iconog... Slack Passwordless Login This is a solution found in the Slack iOS (and Android) app. It allows Slack users to login into ... GIF Shazam Flashing Scrollbar This is a solution found in the Shazam iOS app. A hidden scrollbar flashes briefly when a user na... Twitter Threaded Compose This is a solution found in all Twitter clients. When a Twitter user is composing a tweet, they c... Amazon Share Screenshot This is a solution found in the Amazon iOS app. When a user takes a screenshot of a product, the ... GIF Amazon Web Services Contextual Help Panel This is a solution found in the most recent Amazon Web Services console design language. It allow... GIF Google Docs Scrollbar Page Counter This is a solution found in Google Docs document viewer. This solution is a small contextual tool... GIF Coinbase Price Alert Picker This is a solution found in the Coinbase app. It allows users to select the value for a cryptocur... GIF LinkedIn Split-flap Display This is a mobile specific solution that LinkedIn (and other apps like Facebook) uses to optimize ... GitHub Filter Syntax This is a solution found in GitHub that mixes fuzzy search with free text syntax for filtering/se... GIF Robinhood List to Horizontal Tabs This is an Android specific solution found in the Robinhood app. It allows users to navigate a li... GIF Amazon Shopping List Tray This is a solution found in the Amazon app that allows users to quickly add products to an existi... Sharp Simple Dial Operation This is a physical solution found on some commercial Sharp microwaves. Unlike other appliances, t... GIF WhatsApp Minimizable Video Call This is an interaction that allows Whatsapp users to minimize a video call so they can keep inter... GIF Facebook Docked Video This is a solution that Facebook uses on their video feed experiences. When users are watching a ... GIF Activehours (Earnin) Nearby Activity Prompt This is a solution found in the Activehours app. It's a social proof solution to promote sign-ups... Starbucks Preferred Store This is an solution found in the Starbucks iOS app. The app switches your preferred store dependi... GIF Privacy.com Password Strength This is an interaction found in the Privacy.com "Create Account" screen, that gives real-time fee... That's it! If you like the content, consider subscribing to Waveguide Next, a newsletter / blog where I share new examples and lessons on User Experience. Instagram Twitter GitHub © JJ. Ramirez. All rights reserved.