SlideShare a Scribd company logo
1 of 12
Name-Swapnil Angre.
    Edit Insti,Dadar
 The user interface is one of the most important parts of any
  program because it determines how easily you can make the
  program do what you want. A powerful program with a poorly
  designed user interface has little value. Graphical user interfaces
  that use windows, icons, and pop-up menus have become
  standard on personal computers.
 User interface design or user interface engineering is the
  design of computers, appliances ,machines, mobile,
  communication devices, software applications, and websites
  with the focus on the user’s experience and interaction. The goal
  of user interface design is to make the user's interaction as
  simple and efficient as possible, in terms of accomplishing user
  goals—what is often called user-centered design.
   User Interface Design is beneficial for both software and
    hardware. Some of the benefits of having a good User Interface
    Design are:

    1.Ergonomics: Ergonomically correct user interfaces prevent
    industrial injuries and hence absence due to illness.
     2. Fewer errors: Intelligently designed user interfaces drastically
    reduce the number of errors and their related costs.
     3. Productivity / Save Development time: A better user design
    allows reduction of the development time spent due to reduced
    iterations and rework and overall better productivity.
4. Productivity / Save Development time: A better user design
   allows reduction of the development time spent due to reduced
   iterations and rework and overall better productivity.
5. Customer returning: If customers find a site or product usable,
   then the possibility that they use this site / product again
   improves drastically.
6. Customer returning: If customers find a site or product usable,
   then the possibility that they use this site / product again
   improves drastically.
7. Increase user satisfaction: When systems match user needs,
   satisfaction often improves dramatically.
8. Increase market share (competitive edge): The importance of
    having a competitive edge in usability may be even more
    pronounced for e-commerce sites. Such sites commonly drive
    away nearly half of repeat business by not making it easy for
    visitors to find the information they need.

  This is benefits for user interface.
   Therefore to achieve that the software must have a great user
    interface which lets you do what need to do (e.g. creating a
    project and managing a team) intuitively without you even really
    thinking about it.
    A good user interface usually constitutes the following:
    1.Positioning of elements in places the user expects them
    2.Good use of color coding
    3.Speed and fast page loads
    4.Activity indicators
    5.Help and tool tips
 Web designers and programmers (including myself) have often
  tried to be clever when designing the information architecture
  (where things go) in web pages. We often fall down the trap of
  trying to be too creative and thinking 'lets try something totally
  different' so we design things in such a way that might look cool,
  but in reality what happens is the user gets lost and has to re-
  learn how to work their way around your application or website.
 There is a good reason why search boxes are often in the top
  right, and why navigation is tabbed, and why buttons often look
  the same. It's because the user expects them to be like that.
 Users will spend a lot of their time using a Mac or PC and will
  expect the search to be in the top right with a little magnifying
  glass, and will expect a button to look a certain shape and
  change color when they hover over it. Because of these
  expectations in order to be a good UX designer you need to just
  go 'with the grain' and do what is expected. This will lead to
  happy users, and hopefully paying customers.
 It's important to use color in your interface. Colors send signals
  to the user sub-consciously, so therefore you can make use of
  this with things like buttons and links.
 For example, a Submit or Signup button works well in green
  because green means "Go" and feels safe. If it was red then
  users would hesitate before clicking on it because they would
  feel like they might be deleting something. Orange also tends to
  work well for a Signup button. A good example of a big, clear,
  green signup button. is on In Direo.
 Having a rollover state is good too, and this can be done by
  either fading the button with opacity or by setting a different
  rollover color (e.g. a lighter shade or perhaps grey). This
  indicates to the user that they are over the button and will feel
  comfortable clicking it.
 If you want to highlight something on a page, for example an
  important notice then a light yellow background can really make
  something stand out and draw your users attention.
 You need speed to save time! Therefore if your application takes
  5 seconds every time someone clicks a button to load a page
  then that is BAD! If I want to set up a new project then I want to
  get it all set up within about 10 seconds. If half that time is spent
  loading the page then I will not bother using that application.
 When I built Project Bubble was thinking about this from day
  one. For me being able to create a project and add to-dos
  straight away was an absolutely essential feature for the app.
  Being a paper and pen guy I had to have something that was as
  quick (if not quicker) than just getting out my notepad and writing
  down my to-dos, so this was all taken in to account when
  designing the UI for Project Bubble.
 If you are using AJAX to load pages then you must utilize
  loading GIFs or your users will not know anything has happened.
  It's important for your users to see that something is happening
  and they will be patient as long as they can see a loading image.
 I made a transparent loading GIF for this exact purpose, which
  you can all download if you want. There are others I use as well
  on Project Bubble such as when changing the status between
  open and closed projects.
   Principle #1: Understand Your Users and Support
    Their Goals
   Principle #2: Make Your Interface Easy to Learn and
    Enjoyable to Use
   Principle #3: Remain Consistent
   Principle #4: Form a Dialog with Your Users
   Principle #5: Be Problem Free
Thank you.

More Related Content

Viewers also liked

Unit 7 - Task 3 – P4,P5,M2
Unit 7 - Task 3 – P4,P5,M2Unit 7 - Task 3 – P4,P5,M2
Unit 7 - Task 3 – P4,P5,M2Ryan-Parish
 
Lecture 13 requirements modeling - flow & behavior (2)
Lecture 13   requirements modeling - flow &  behavior (2)Lecture 13   requirements modeling - flow &  behavior (2)
Lecture 13 requirements modeling - flow & behavior (2)IIUI
 
Professional ui for a website design
Professional ui for a website designProfessional ui for a website design
Professional ui for a website designRavi Bhadauria
 
Balloon Project Summary
Balloon Project SummaryBalloon Project Summary
Balloon Project Summaryrhlee46
 
Intro to Web Design
Intro to Web DesignIntro to Web Design
Intro to Web DesignKathy Gill
 
Integrating Interaction Design Evaluation into Product Design
Integrating Interaction Design Evaluation into Product DesignIntegrating Interaction Design Evaluation into Product Design
Integrating Interaction Design Evaluation into Product DesignYingjie Chen
 
golden rules of user interface design
golden rules of user interface designgolden rules of user interface design
golden rules of user interface designgadige harshini
 
Evaluación a interfaces - Test de usuarios,evaluación heurística y eye-tracking
Evaluación a interfaces - Test de usuarios,evaluación heurística y eye-trackingEvaluación a interfaces - Test de usuarios,evaluación heurística y eye-tracking
Evaluación a interfaces - Test de usuarios,evaluación heurística y eye-trackingPercy Negrete
 
PEShare.co.uk Shared Resource
PEShare.co.uk Shared ResourcePEShare.co.uk Shared Resource
PEShare.co.uk Shared Resourcepeshare.co.uk
 
System engineering
System engineeringSystem engineering
System engineeringLisa Elisa
 
Simple Steps to Great Web Design
Simple Steps to Great Web DesignSimple Steps to Great Web Design
Simple Steps to Great Web DesignMatthew Smith
 
Lecture 14 requirements modeling - flow and behavior
Lecture 14   requirements modeling - flow and  behaviorLecture 14   requirements modeling - flow and  behavior
Lecture 14 requirements modeling - flow and behaviorIIUI
 
Principles of User Interface Design
Principles of User Interface DesignPrinciples of User Interface Design
Principles of User Interface DesignKANKIPATI KISHORE
 
User interface design
User interface designUser interface design
User interface designSlideshare
 
Software Reengineering
Software ReengineeringSoftware Reengineering
Software ReengineeringAbdul Wahid
 
PoltuBaaz - Election Management and Political Consulting Services
PoltuBaaz - Election Management and Political Consulting ServicesPoltuBaaz - Election Management and Political Consulting Services
PoltuBaaz - Election Management and Political Consulting ServicesGaurav Singh
 

Viewers also liked (17)

Unit 7 - Task 3 – P4,P5,M2
Unit 7 - Task 3 – P4,P5,M2Unit 7 - Task 3 – P4,P5,M2
Unit 7 - Task 3 – P4,P5,M2
 
Ict investor pitch template
Ict   investor pitch templateIct   investor pitch template
Ict investor pitch template
 
Lecture 13 requirements modeling - flow & behavior (2)
Lecture 13   requirements modeling - flow &  behavior (2)Lecture 13   requirements modeling - flow &  behavior (2)
Lecture 13 requirements modeling - flow & behavior (2)
 
Professional ui for a website design
Professional ui for a website designProfessional ui for a website design
Professional ui for a website design
 
Balloon Project Summary
Balloon Project SummaryBalloon Project Summary
Balloon Project Summary
 
Intro to Web Design
Intro to Web DesignIntro to Web Design
Intro to Web Design
 
Integrating Interaction Design Evaluation into Product Design
Integrating Interaction Design Evaluation into Product DesignIntegrating Interaction Design Evaluation into Product Design
Integrating Interaction Design Evaluation into Product Design
 
golden rules of user interface design
golden rules of user interface designgolden rules of user interface design
golden rules of user interface design
 
Evaluación a interfaces - Test de usuarios,evaluación heurística y eye-tracking
Evaluación a interfaces - Test de usuarios,evaluación heurística y eye-trackingEvaluación a interfaces - Test de usuarios,evaluación heurística y eye-tracking
Evaluación a interfaces - Test de usuarios,evaluación heurística y eye-tracking
 
PEShare.co.uk Shared Resource
PEShare.co.uk Shared ResourcePEShare.co.uk Shared Resource
PEShare.co.uk Shared Resource
 
System engineering
System engineeringSystem engineering
System engineering
 
Simple Steps to Great Web Design
Simple Steps to Great Web DesignSimple Steps to Great Web Design
Simple Steps to Great Web Design
 
Lecture 14 requirements modeling - flow and behavior
Lecture 14   requirements modeling - flow and  behaviorLecture 14   requirements modeling - flow and  behavior
Lecture 14 requirements modeling - flow and behavior
 
Principles of User Interface Design
Principles of User Interface DesignPrinciples of User Interface Design
Principles of User Interface Design
 
User interface design
User interface designUser interface design
User interface design
 
Software Reengineering
Software ReengineeringSoftware Reengineering
Software Reengineering
 
PoltuBaaz - Election Management and Political Consulting Services
PoltuBaaz - Election Management and Political Consulting ServicesPoltuBaaz - Election Management and Political Consulting Services
PoltuBaaz - Election Management and Political Consulting Services
 

Recently uploaded

TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024Lonnie McRorey
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsSergiu Bodiu
 
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .Alan Dix
 
DSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningDSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningLars Bell
 
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Mattias Andersson
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxLoriGlavin3
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr BaganFwdays
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Commit University
 
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks..."LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...Fwdays
 
Advanced Computer Architecture – An Introduction
Advanced Computer Architecture – An IntroductionAdvanced Computer Architecture – An Introduction
Advanced Computer Architecture – An IntroductionDilum Bandara
 
Vertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsVertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsMiki Katsuragi
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Manik S Magar
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brandgvaughan
 
Commit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyCommit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyAlfredo García Lavilla
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationSlibray Presentation
 
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsMark Billinghurst
 
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebDev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebUiPathCommunity
 
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLScyllaDB
 
Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Scott Keck-Warren
 

Recently uploaded (20)

TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
 
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .
 
DSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningDSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine Tuning
 
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!
 
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks..."LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
 
Advanced Computer Architecture – An Introduction
Advanced Computer Architecture – An IntroductionAdvanced Computer Architecture – An Introduction
Advanced Computer Architecture – An Introduction
 
Vertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsVertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering Tips
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brand
 
Commit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyCommit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easy
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck Presentation
 
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR Systems
 
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebDev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio Web
 
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQL
 
Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024
 

User interface for web design.

  • 1. Name-Swapnil Angre. Edit Insti,Dadar
  • 2.  The user interface is one of the most important parts of any program because it determines how easily you can make the program do what you want. A powerful program with a poorly designed user interface has little value. Graphical user interfaces that use windows, icons, and pop-up menus have become standard on personal computers.  User interface design or user interface engineering is the design of computers, appliances ,machines, mobile, communication devices, software applications, and websites with the focus on the user’s experience and interaction. The goal of user interface design is to make the user's interaction as simple and efficient as possible, in terms of accomplishing user goals—what is often called user-centered design.
  • 3. User Interface Design is beneficial for both software and hardware. Some of the benefits of having a good User Interface Design are: 1.Ergonomics: Ergonomically correct user interfaces prevent industrial injuries and hence absence due to illness. 2. Fewer errors: Intelligently designed user interfaces drastically reduce the number of errors and their related costs. 3. Productivity / Save Development time: A better user design allows reduction of the development time spent due to reduced iterations and rework and overall better productivity.
  • 4. 4. Productivity / Save Development time: A better user design allows reduction of the development time spent due to reduced iterations and rework and overall better productivity. 5. Customer returning: If customers find a site or product usable, then the possibility that they use this site / product again improves drastically. 6. Customer returning: If customers find a site or product usable, then the possibility that they use this site / product again improves drastically. 7. Increase user satisfaction: When systems match user needs, satisfaction often improves dramatically.
  • 5. 8. Increase market share (competitive edge): The importance of having a competitive edge in usability may be even more pronounced for e-commerce sites. Such sites commonly drive away nearly half of repeat business by not making it easy for visitors to find the information they need. This is benefits for user interface.
  • 6. Therefore to achieve that the software must have a great user interface which lets you do what need to do (e.g. creating a project and managing a team) intuitively without you even really thinking about it. A good user interface usually constitutes the following: 1.Positioning of elements in places the user expects them 2.Good use of color coding 3.Speed and fast page loads 4.Activity indicators 5.Help and tool tips
  • 7.  Web designers and programmers (including myself) have often tried to be clever when designing the information architecture (where things go) in web pages. We often fall down the trap of trying to be too creative and thinking 'lets try something totally different' so we design things in such a way that might look cool, but in reality what happens is the user gets lost and has to re- learn how to work their way around your application or website.  There is a good reason why search boxes are often in the top right, and why navigation is tabbed, and why buttons often look the same. It's because the user expects them to be like that.  Users will spend a lot of their time using a Mac or PC and will expect the search to be in the top right with a little magnifying glass, and will expect a button to look a certain shape and change color when they hover over it. Because of these expectations in order to be a good UX designer you need to just go 'with the grain' and do what is expected. This will lead to happy users, and hopefully paying customers.
  • 8.  It's important to use color in your interface. Colors send signals to the user sub-consciously, so therefore you can make use of this with things like buttons and links.  For example, a Submit or Signup button works well in green because green means "Go" and feels safe. If it was red then users would hesitate before clicking on it because they would feel like they might be deleting something. Orange also tends to work well for a Signup button. A good example of a big, clear, green signup button. is on In Direo.  Having a rollover state is good too, and this can be done by either fading the button with opacity or by setting a different rollover color (e.g. a lighter shade or perhaps grey). This indicates to the user that they are over the button and will feel comfortable clicking it.  If you want to highlight something on a page, for example an important notice then a light yellow background can really make something stand out and draw your users attention.
  • 9.  You need speed to save time! Therefore if your application takes 5 seconds every time someone clicks a button to load a page then that is BAD! If I want to set up a new project then I want to get it all set up within about 10 seconds. If half that time is spent loading the page then I will not bother using that application.  When I built Project Bubble was thinking about this from day one. For me being able to create a project and add to-dos straight away was an absolutely essential feature for the app. Being a paper and pen guy I had to have something that was as quick (if not quicker) than just getting out my notepad and writing down my to-dos, so this was all taken in to account when designing the UI for Project Bubble.
  • 10.  If you are using AJAX to load pages then you must utilize loading GIFs or your users will not know anything has happened. It's important for your users to see that something is happening and they will be patient as long as they can see a loading image.  I made a transparent loading GIF for this exact purpose, which you can all download if you want. There are others I use as well on Project Bubble such as when changing the status between open and closed projects.
  • 11. Principle #1: Understand Your Users and Support Their Goals  Principle #2: Make Your Interface Easy to Learn and Enjoyable to Use  Principle #3: Remain Consistent  Principle #4: Form a Dialog with Your Users  Principle #5: Be Problem Free