SlideShare a Scribd company logo
What are
User Interface Patterns?
Jazanoor Farrukh (HnH Naqoosh)
Jazanoor Farrukh
Jazanoor Farrukh
Have you ever noticed how…
Most product interfaces are similar looking?
• We generally follow the same
steps while purchasing a
product and going through
the check-out process.
• Most logins are made up of
two input fields requesting
Username and Password,
along with a button to Submit
the entered information.
Truth be told…
Whether you're designing an
interface from scratch or fine-
tuning an existing one, you'll
run into a variety of design
problems that need to be
addressed.
Fortunately!
Within the field of user
interface design, there are
many different established
solutions that you can use to
create cohesive designs. These
solutions are called
UI Design Patterns.
So, what really is UI Design Pattern?
• These are recurring solutions to common problems in user
interface design.
• With the help of library of components, they provide proven
solutions to user problems.
• Developers are able to cut down the time spent creating and
testing parts, expediting the overall development process.
• Users benefit in terms of having access to interfaces that are
easy, enjoyable, and consistent.
Basic patterns may fall into below categories:
Social sharing:
facilitate sharing of
content onto various
social media platforms.
Navigation:
help guide users around
the interface, ensuring
they’re able to find their
way back to the
homepage if they get
lost.
Input/output:
include various forms
that allow users to
submit information, or
receive feedback based
on an action.
1.
2.
3.
Common UI Patterns include:
• Menus
• Modals
• Buttons
• Bottom Tab Bar
• Accordion
• Carousal
• Breadcrumbs
• Tabs
• Forms
• Etc.
Dark UI design patterns?
• Dark UX/UI design patterns, such as trick questions or hard-to-see
options in a menu, are patterns that trick users into performing a
specific tasks.
• For example, tricking users into subscribing for e-mails.
• Others may hide key pieces of information to commit customers
into undesired memberships.
• Such activities can ruin trust between a company and its users.
UI design relies heavily on empathy, and creating an
interface that’s enjoyable and satisfying to use.
After all,
Thank you
(For further queries, feel free to reach out)
Jazanoor Farrukh (HnH Naqoosh)
Jazanoor Farrukh
Jazanoor Farrukh

More Related Content

Similar to What are UI Patterns?

UI.docx
UI.docxUI.docx
Intro to UX Design
Intro to UX DesignIntro to UX Design
Intro to UX Designjayyearley
 
Multi Platform User Exerience
Multi Platform User ExerienceMulti Platform User Exerience
Multi Platform User ExerienceTanya Zavialova
 
Intro to ux and how to design a thoughtful ui
Intro to ux and how to design a thoughtful uiIntro to ux and how to design a thoughtful ui
Intro to ux and how to design a thoughtful ui
Thanos Makaronas
 
Lesson 2 HCI 2.pptx
Lesson 2 HCI 2.pptxLesson 2 HCI 2.pptx
Lesson 2 HCI 2.pptx
EllenGracePorras
 
UX-Driven & Inclusive Data Visualizations
UX-Driven & Inclusive Data VisualizationsUX-Driven & Inclusive Data Visualizations
UX-Driven & Inclusive Data Visualizations
Michelle Michael
 
Intelligent Design - Transitioning UX into UI
Intelligent Design - Transitioning UX into UI Intelligent Design - Transitioning UX into UI
Intelligent Design - Transitioning UX into UI
Michelle Reyes
 
A UX designer is concerned with the enti
A UX designer is concerned with the entiA UX designer is concerned with the enti
A UX designer is concerned with the enti
ROHISIVAM
 
What is Interaction Design?
What is Interaction Design?What is Interaction Design?
What is Interaction Design?
Ghazanfar Latif (Gabe)
 
UI Development Content
UI Development ContentUI Development Content
UI Development Content
MUDDUKRISHNA14
 
UI Development Content
UI Development ContentUI Development Content
UI Development Content
MUDDUKRISHNA14
 
Interface Design
Interface DesignInterface Design
Interface Design
gavhays
 
Usability Testing by Rajdeep Gupta, Misys
Usability Testing by Rajdeep Gupta, MisysUsability Testing by Rajdeep Gupta, Misys
Usability Testing by Rajdeep Gupta, Misys
STC India UX SIG
 
Lesson 2 HCI 2.pdf
Lesson 2 HCI 2.pdfLesson 2 HCI 2.pdf
Lesson 2 HCI 2.pdf
EllenGracePorras
 
Edge903 Project
Edge903 ProjectEdge903 Project
Edge903 Projectxyz01
 
Custom UI/UX Design Services
Custom UI/UX Design ServicesCustom UI/UX Design Services
Custom UI/UX Design Services
Chetu
 
First users: Heuristics for designer/developer collaboration
First users: Heuristics for designer/developer collaborationFirst users: Heuristics for designer/developer collaboration
First users: Heuristics for designer/developer collaboration
Jonathan Abbett
 
unit5_usability.pptx
unit5_usability.pptxunit5_usability.pptx
unit5_usability.pptx
SrilekhaK12
 
Understanding UI/UX Design by Aroyewun Babajide
Understanding UI/UX Design by Aroyewun BabajideUnderstanding UI/UX Design by Aroyewun Babajide
Understanding UI/UX Design by Aroyewun Babajide
Babajide Aroyewun
 
What Is Interaction Design
What Is Interaction DesignWhat Is Interaction Design
What Is Interaction DesignGraeme Smith
 

Similar to What are UI Patterns? (20)

UI.docx
UI.docxUI.docx
UI.docx
 
Intro to UX Design
Intro to UX DesignIntro to UX Design
Intro to UX Design
 
Multi Platform User Exerience
Multi Platform User ExerienceMulti Platform User Exerience
Multi Platform User Exerience
 
Intro to ux and how to design a thoughtful ui
Intro to ux and how to design a thoughtful uiIntro to ux and how to design a thoughtful ui
Intro to ux and how to design a thoughtful ui
 
Lesson 2 HCI 2.pptx
Lesson 2 HCI 2.pptxLesson 2 HCI 2.pptx
Lesson 2 HCI 2.pptx
 
UX-Driven & Inclusive Data Visualizations
UX-Driven & Inclusive Data VisualizationsUX-Driven & Inclusive Data Visualizations
UX-Driven & Inclusive Data Visualizations
 
Intelligent Design - Transitioning UX into UI
Intelligent Design - Transitioning UX into UI Intelligent Design - Transitioning UX into UI
Intelligent Design - Transitioning UX into UI
 
A UX designer is concerned with the enti
A UX designer is concerned with the entiA UX designer is concerned with the enti
A UX designer is concerned with the enti
 
What is Interaction Design?
What is Interaction Design?What is Interaction Design?
What is Interaction Design?
 
UI Development Content
UI Development ContentUI Development Content
UI Development Content
 
UI Development Content
UI Development ContentUI Development Content
UI Development Content
 
Interface Design
Interface DesignInterface Design
Interface Design
 
Usability Testing by Rajdeep Gupta, Misys
Usability Testing by Rajdeep Gupta, MisysUsability Testing by Rajdeep Gupta, Misys
Usability Testing by Rajdeep Gupta, Misys
 
Lesson 2 HCI 2.pdf
Lesson 2 HCI 2.pdfLesson 2 HCI 2.pdf
Lesson 2 HCI 2.pdf
 
Edge903 Project
Edge903 ProjectEdge903 Project
Edge903 Project
 
Custom UI/UX Design Services
Custom UI/UX Design ServicesCustom UI/UX Design Services
Custom UI/UX Design Services
 
First users: Heuristics for designer/developer collaboration
First users: Heuristics for designer/developer collaborationFirst users: Heuristics for designer/developer collaboration
First users: Heuristics for designer/developer collaboration
 
unit5_usability.pptx
unit5_usability.pptxunit5_usability.pptx
unit5_usability.pptx
 
Understanding UI/UX Design by Aroyewun Babajide
Understanding UI/UX Design by Aroyewun BabajideUnderstanding UI/UX Design by Aroyewun Babajide
Understanding UI/UX Design by Aroyewun Babajide
 
What Is Interaction Design
What Is Interaction DesignWhat Is Interaction Design
What Is Interaction Design
 

Recently uploaded

Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
SOFTTECHHUB
 
Le nuove frontiere dell'AI nell'RPA con UiPath Autopilot™
Le nuove frontiere dell'AI nell'RPA con UiPath Autopilot™Le nuove frontiere dell'AI nell'RPA con UiPath Autopilot™
Le nuove frontiere dell'AI nell'RPA con UiPath Autopilot™
UiPathCommunity
 
Leading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdfLeading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdf
OnBoard
 
Secstrike : Reverse Engineering & Pwnable tools for CTF.pptx
Secstrike : Reverse Engineering & Pwnable tools for CTF.pptxSecstrike : Reverse Engineering & Pwnable tools for CTF.pptx
Secstrike : Reverse Engineering & Pwnable tools for CTF.pptx
nkrafacyberclub
 
Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !
KatiaHIMEUR1
 
Essentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FMEEssentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FME
Safe Software
 
Enhancing Performance with Globus and the Science DMZ
Enhancing Performance with Globus and the Science DMZEnhancing Performance with Globus and the Science DMZ
Enhancing Performance with Globus and the Science DMZ
Globus
 
DevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA ConnectDevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA Connect
Kari Kakkonen
 
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdfFIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance
 
SAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdf
SAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdfSAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdf
SAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdf
Peter Spielvogel
 
Elizabeth Buie - Older adults: Are we really designing for our future selves?
Elizabeth Buie - Older adults: Are we really designing for our future selves?Elizabeth Buie - Older adults: Are we really designing for our future selves?
Elizabeth Buie - Older adults: Are we really designing for our future selves?
Nexer Digital
 
The Future of Platform Engineering
The Future of Platform EngineeringThe Future of Platform Engineering
The Future of Platform Engineering
Jemma Hussein Allen
 
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdfSmart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
91mobiles
 
RESUME BUILDER APPLICATION Project for students
RESUME BUILDER APPLICATION Project for studentsRESUME BUILDER APPLICATION Project for students
RESUME BUILDER APPLICATION Project for students
KAMESHS29
 
UiPath Community Day Dubai: AI at Work..
UiPath Community Day Dubai: AI at Work..UiPath Community Day Dubai: AI at Work..
UiPath Community Day Dubai: AI at Work..
UiPathCommunity
 
A tale of scale & speed: How the US Navy is enabling software delivery from l...
A tale of scale & speed: How the US Navy is enabling software delivery from l...A tale of scale & speed: How the US Navy is enabling software delivery from l...
A tale of scale & speed: How the US Navy is enabling software delivery from l...
sonjaschweigert1
 
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Albert Hoitingh
 
PHP Frameworks: I want to break free (IPC Berlin 2024)
PHP Frameworks: I want to break free (IPC Berlin 2024)PHP Frameworks: I want to break free (IPC Berlin 2024)
PHP Frameworks: I want to break free (IPC Berlin 2024)
Ralf Eggert
 
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
UiPathCommunity
 
The Metaverse and AI: how can decision-makers harness the Metaverse for their...
The Metaverse and AI: how can decision-makers harness the Metaverse for their...The Metaverse and AI: how can decision-makers harness the Metaverse for their...
The Metaverse and AI: how can decision-makers harness the Metaverse for their...
Jen Stirrup
 

Recently uploaded (20)

Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
 
Le nuove frontiere dell'AI nell'RPA con UiPath Autopilot™
Le nuove frontiere dell'AI nell'RPA con UiPath Autopilot™Le nuove frontiere dell'AI nell'RPA con UiPath Autopilot™
Le nuove frontiere dell'AI nell'RPA con UiPath Autopilot™
 
Leading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdfLeading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdf
 
Secstrike : Reverse Engineering & Pwnable tools for CTF.pptx
Secstrike : Reverse Engineering & Pwnable tools for CTF.pptxSecstrike : Reverse Engineering & Pwnable tools for CTF.pptx
Secstrike : Reverse Engineering & Pwnable tools for CTF.pptx
 
Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !
 
Essentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FMEEssentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FME
 
Enhancing Performance with Globus and the Science DMZ
Enhancing Performance with Globus and the Science DMZEnhancing Performance with Globus and the Science DMZ
Enhancing Performance with Globus and the Science DMZ
 
DevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA ConnectDevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA Connect
 
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdfFIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
 
SAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdf
SAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdfSAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdf
SAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdf
 
Elizabeth Buie - Older adults: Are we really designing for our future selves?
Elizabeth Buie - Older adults: Are we really designing for our future selves?Elizabeth Buie - Older adults: Are we really designing for our future selves?
Elizabeth Buie - Older adults: Are we really designing for our future selves?
 
The Future of Platform Engineering
The Future of Platform EngineeringThe Future of Platform Engineering
The Future of Platform Engineering
 
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdfSmart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
 
RESUME BUILDER APPLICATION Project for students
RESUME BUILDER APPLICATION Project for studentsRESUME BUILDER APPLICATION Project for students
RESUME BUILDER APPLICATION Project for students
 
UiPath Community Day Dubai: AI at Work..
UiPath Community Day Dubai: AI at Work..UiPath Community Day Dubai: AI at Work..
UiPath Community Day Dubai: AI at Work..
 
A tale of scale & speed: How the US Navy is enabling software delivery from l...
A tale of scale & speed: How the US Navy is enabling software delivery from l...A tale of scale & speed: How the US Navy is enabling software delivery from l...
A tale of scale & speed: How the US Navy is enabling software delivery from l...
 
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
 
PHP Frameworks: I want to break free (IPC Berlin 2024)
PHP Frameworks: I want to break free (IPC Berlin 2024)PHP Frameworks: I want to break free (IPC Berlin 2024)
PHP Frameworks: I want to break free (IPC Berlin 2024)
 
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
 
The Metaverse and AI: how can decision-makers harness the Metaverse for their...
The Metaverse and AI: how can decision-makers harness the Metaverse for their...The Metaverse and AI: how can decision-makers harness the Metaverse for their...
The Metaverse and AI: how can decision-makers harness the Metaverse for their...
 

What are UI Patterns?

  • 1. What are User Interface Patterns? Jazanoor Farrukh (HnH Naqoosh) Jazanoor Farrukh Jazanoor Farrukh
  • 2. Have you ever noticed how… Most product interfaces are similar looking? • We generally follow the same steps while purchasing a product and going through the check-out process. • Most logins are made up of two input fields requesting Username and Password, along with a button to Submit the entered information.
  • 3. Truth be told… Whether you're designing an interface from scratch or fine- tuning an existing one, you'll run into a variety of design problems that need to be addressed. Fortunately! Within the field of user interface design, there are many different established solutions that you can use to create cohesive designs. These solutions are called UI Design Patterns.
  • 4. So, what really is UI Design Pattern? • These are recurring solutions to common problems in user interface design. • With the help of library of components, they provide proven solutions to user problems. • Developers are able to cut down the time spent creating and testing parts, expediting the overall development process. • Users benefit in terms of having access to interfaces that are easy, enjoyable, and consistent.
  • 5. Basic patterns may fall into below categories: Social sharing: facilitate sharing of content onto various social media platforms. Navigation: help guide users around the interface, ensuring they’re able to find their way back to the homepage if they get lost. Input/output: include various forms that allow users to submit information, or receive feedback based on an action. 1. 2. 3.
  • 6. Common UI Patterns include: • Menus • Modals • Buttons • Bottom Tab Bar • Accordion • Carousal • Breadcrumbs • Tabs • Forms • Etc.
  • 7. Dark UI design patterns? • Dark UX/UI design patterns, such as trick questions or hard-to-see options in a menu, are patterns that trick users into performing a specific tasks. • For example, tricking users into subscribing for e-mails. • Others may hide key pieces of information to commit customers into undesired memberships. • Such activities can ruin trust between a company and its users.
  • 8. UI design relies heavily on empathy, and creating an interface that’s enjoyable and satisfying to use. After all,
  • 9. Thank you (For further queries, feel free to reach out) Jazanoor Farrukh (HnH Naqoosh) Jazanoor Farrukh Jazanoor Farrukh