UI/UX Design patterns

User Interface Design patterns are recurring solutions that solve common design problems. Design patterns are standard reference points for the experienced user interface designer.

Design patterns provide a common language between designers. They allow for debate over alternatives, where merely mentioning the name of a design pattern implicitly carries much more meaning than merely the name.

Dwell into the patterns below to learn a common language of web design from

User Interface Design Patterns

Getting input

Forms

• WYSIWYG
• Password Strength Meter
• Input Feedback
• Calendar Picker
• Input Prompt
• Structured Format
• Fill in the Blanks
• Expandable Input
• Undo
• Keyboard Shortcuts
• Autosave
• Captcha
• Drag and drop
• Morphing Controls
• Preview
• Rule Builder
• Inplace Editor
• Forgiving Format
• Good Defaults
• Settings

Explaining the process

• Wizard
• Steps Left
• Completeness meter
• Inline Help Box

Community driven

• Vote To Promote
• Pay To Promote
• Rate Content
• Flagging & Reporting
• Wiki Navigation

Tabs

• Module Tabs
• Navigation Tabs

Jumping in hierarchy

• Notifications
• Breadcrumbs
• Modal
• Fat Footer
• Shortcut Dropdown
• Home Link

Menus

• Vertical Dropdown Menu
• Accordion Menu
• Horizontal Dropdown Menu

Content

• Carousel
• Cards
• Adaptable View
• Event Calendar
• Progressive Disclosure
• Pagination
• Article List
• Tagging
• Continuous Scrolling
• Archive
• Categorization
• Tag Cloud
• Thumbnail
• Favorites
• Gestures
• Pull to refresh

Dealing with data

Tables

• Table Filter
• Sort By Column
• Alternating Row Colors

Formatting data

• Dashboard
• Copy Box
• Frequently Asked Questions (FAQ)

Images

• Slideshow
• Gallery
• Image Zoom

Search

• Autocomplete
• Search Filters

Social

Reputation

• Collectible Achievements
• Leaderboard
• Testimonials

Social interactions

• Friend list Mini
• Activity Stream
• Auto-sharing Mini
• Chat
• Friend
• Reaction
• Invite friends
• Follow

Miscellaneous

Shopping

• Product page
• Pricing table
• Coupon
• Shopping Cart

Increasing frequency

• Tip A Friend

Onboarding

Guidance

• Walkthrough
• Blank Slate
• Playthrough
• Coachmarks
• Guided Tour
• Inline Hints

Registration

• Lazy Registration
• Account Registration
• Paywall

Persuasive Design Patterns

Cognition

Loss Aversion

• Loss Aversion
• Status-Quo Bias
• Optimism Bias Mini
• Negativity bias
• Framing Mini
• Endowment Effect

Other cognitive biases

• Illusion of control
• Need for closure
• Peak-end rule
• Curiosity Mini
• Set Completion Mini
• Value attribution Mini

Scarcity

• Scarcity
• Limited choice Mini
• Limited duration

Game mechanics

Gameplay design

• Periodic Events Mini
• Appropriate challenge
• Levels Mini
• Self-Monitoring Mini
• Storytelling Mini
• Intentional gaps Mini

Fundamentals of rewards

• Fixed rewards
• Variable rewards

Gameplay rewards

• Completion
• Prolonged play
• Powers
• Praise
• Unlock features
• Delighters Mini
• Achievements Mini

Perception and memory

Attention

• Reduction
• Tunnelling
• Isolation Effect

Comprehension

• Chunking
• Recognition over recall
• Pattern recognition Mini
• Conceptual metaphor Mini
• Anchoring
• Sequencing Mini
• Serial Positioning Effect

Feedback

Timing

• Kairos
• Feedback loops Mini
• Trigger Mini
• Simulation Mini
• Tailoring Mini

Social

Social biases

• Authority
• Liking
• Commitment & consistency
• Reputation Mini
• Role playing Mini
• Social proof
• Reciprocation
• Revenge Mini
• Self-Expression Mini
• Positive mimicry Mini
• Status Mini
• Nostalgia Effect Mini
• Competition Mini