SlideShare uma empresa Scribd logo
1 de 27
User Interface Design for the Web Lawrence Najjar [email_address]
Outline ,[object Object],[object Object],[object Object]
Why Usability is Important ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Why Usability is Important (continued) ,[object Object],[object Object],[object Object],[object Object]
Challenges for Designing Web-based User Interfaces ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Web User Interface Design Process ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
1. Define Users ,[object Object],[object Object],[object Object]
User Profile Facility Managers Gender Generally male Age 30 to 50 years old Education High school graduate Income $25,000 to $45,000 per year Location Facility manager office in office building Computer experience Moderate.  Facility manager uses computer for e-mail and researching products on the Web Computer IBM-compatible personal computer Web connection Slow connections (56K modem)   Objectives Want to save time, reduce costs of running facility, monitor security, and control specific equipment as needed.
Experience Architecture Intent Audience Context Learn about products Solve problems Get entertained Home Work Tech expert Tech novice Gadget lover
2. Define Functional Requirements ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Functional Requirements Function Description Priority Register Enter registration and personalization information Low Search Find product High Browse Browse catalog for product High
3. Write Use Cases ,[object Object],[object Object],[object Object],[object Object],[object Object]
Use Cases Use Case Task Flow Description User Preference Differentiation from Competitors Technical Difficulty Show confirmation Provide confirmation when user adds, edits, or erases registration Medium Low Low Remove confirmation Take the confirmation off the page Low Low Low Change registration Edit user’s reg. information Medium Medium Low Remove registration Erase user’s registration Low High Low Function Description Priority Register Enter registration and personalization information Low
4. Develop Site Diagram ,[object Object],[object Object],[object Object]
Site Diagram
5. Build Interactive Wireframe Mockup ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Interactive Wireframe Mockup
6. Test Usability ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Usability Test
7. Write Functional Design Specifications ,[object Object],[object Object],[object Object]
Functional Design Specifications ,[object Object],[object Object],[object Object],[object Object]
8. Perform User Acceptance Test ,[object Object],[object Object]
Conclusion ,[object Object],[object Object],[object Object]
References ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
References (continued) ,[object Object]
Additional Readings ,[object Object],[object Object],[object Object],[object Object],[object Object]

Mais conteúdo relacionado

Mais procurados

User interface design: definitions, processes and principles
User interface design: definitions, processes and principlesUser interface design: definitions, processes and principles
User interface design: definitions, processes and principles
David Little
 
Ui Design And Usability For Everybody
Ui Design And Usability For EverybodyUi Design And Usability For Everybody
Ui Design And Usability For Everybody
Empatika
 
User Interface Design in Software Engineering SE15
User Interface Design in Software Engineering SE15User Interface Design in Software Engineering SE15
User Interface Design in Software Engineering SE15
koolkampus
 
Chapter 9 id2e_slides
Chapter 9 id2e_slidesChapter 9 id2e_slides
Chapter 9 id2e_slides
oopscrash1
 
What Is Interaction Design
What Is Interaction DesignWhat Is Interaction Design
What Is Interaction Design
Graeme Smith
 
Usability in product development
Usability in product developmentUsability in product development
Usability in product development
Ravi Shyam
 

Mais procurados (20)

User Centered Design in short
User Centered Design in shortUser Centered Design in short
User Centered Design in short
 
User interface design: definitions, processes and principles
User interface design: definitions, processes and principlesUser interface design: definitions, processes and principles
User interface design: definitions, processes and principles
 
UX - Beyond Design Practice
UX - Beyond Design PracticeUX - Beyond Design Practice
UX - Beyond Design Practice
 
User Centered Design 101
User Centered Design 101User Centered Design 101
User Centered Design 101
 
Design process interaction design basics
Design process interaction design basicsDesign process interaction design basics
Design process interaction design basics
 
Ui Design And Usability For Everybody
Ui Design And Usability For EverybodyUi Design And Usability For Everybody
Ui Design And Usability For Everybody
 
What is User Centered Design?
What is User Centered Design?What is User Centered Design?
What is User Centered Design?
 
User centered Design
User centered DesignUser centered Design
User centered Design
 
Usability principles 1
Usability principles 1Usability principles 1
Usability principles 1
 
User Interface Design in Software Engineering SE15
User Interface Design in Software Engineering SE15User Interface Design in Software Engineering SE15
User Interface Design in Software Engineering SE15
 
Sunil Das Profile
Sunil Das ProfileSunil Das Profile
Sunil Das Profile
 
Chapter 9 id2e_slides
Chapter 9 id2e_slidesChapter 9 id2e_slides
Chapter 9 id2e_slides
 
What Is Interaction Design
What Is Interaction DesignWhat Is Interaction Design
What Is Interaction Design
 
What is usability
What is usabilityWhat is usability
What is usability
 
UI / UX Engineering for Web Applications
UI / UX Engineering for Web ApplicationsUI / UX Engineering for Web Applications
UI / UX Engineering for Web Applications
 
Embry-Riddle Campus Solutions UX Design
Embry-Riddle Campus Solutions UX Design Embry-Riddle Campus Solutions UX Design
Embry-Riddle Campus Solutions UX Design
 
Usability & Design Principles
Usability & Design PrinciplesUsability & Design Principles
Usability & Design Principles
 
General UX activities & process overview
General UX activities & process overviewGeneral UX activities & process overview
General UX activities & process overview
 
Usability in product development
Usability in product developmentUsability in product development
Usability in product development
 
UX Experience Design: Processes and Strategy
UX Experience Design: Processes and StrategyUX Experience Design: Processes and Strategy
UX Experience Design: Processes and Strategy
 

Destaque

Usability requirements and their elicitation
Usability requirements and their elicitationUsability requirements and their elicitation
Usability requirements and their elicitation
Lucas Machado
 
Insivia Seminar Series: Usability & User Interface
Insivia Seminar Series: Usability & User InterfaceInsivia Seminar Series: Usability & User Interface
Insivia Seminar Series: Usability & User Interface
Insivia
 

Destaque (20)

Usability challenges in Agile/Scrum timesility challenges in Agile/Scrum t
Usability challenges in Agile/Scrum timesility challenges in Agile/Scrum tUsability challenges in Agile/Scrum timesility challenges in Agile/Scrum t
Usability challenges in Agile/Scrum timesility challenges in Agile/Scrum t
 
Usability and security in future voting systems
Usability and security in future voting systemsUsability and security in future voting systems
Usability and security in future voting systems
 
Usability requirements and their elicitation
Usability requirements and their elicitationUsability requirements and their elicitation
Usability requirements and their elicitation
 
Interface Usability - Adding Schweppervescence
Interface Usability - Adding SchweppervescenceInterface Usability - Adding Schweppervescence
Interface Usability - Adding Schweppervescence
 
User-Interface Usability Evaluation
User-Interface Usability EvaluationUser-Interface Usability Evaluation
User-Interface Usability Evaluation
 
Home Page Analysis
Home Page AnalysisHome Page Analysis
Home Page Analysis
 
Insivia Seminar Series: Usability & User Interface
Insivia Seminar Series: Usability & User InterfaceInsivia Seminar Series: Usability & User Interface
Insivia Seminar Series: Usability & User Interface
 
Mobile Usability Evaluation
Mobile Usability EvaluationMobile Usability Evaluation
Mobile Usability Evaluation
 
Collaborative techniques for developing usability requirements
Collaborative techniques for developing usability requirementsCollaborative techniques for developing usability requirements
Collaborative techniques for developing usability requirements
 
Usability & Interface Design for HiTech Products
Usability & Interface Design for HiTech ProductsUsability & Interface Design for HiTech Products
Usability & Interface Design for HiTech Products
 
A User Interface Usability Evaluation of the Electronic Ballot Box used in th...
A User Interface Usability Evaluation of the Electronic Ballot Box used in th...A User Interface Usability Evaluation of the Electronic Ballot Box used in th...
A User Interface Usability Evaluation of the Electronic Ballot Box used in th...
 
Banking on mobile
Banking on mobile Banking on mobile
Banking on mobile
 
ADM: Mobile banking and trading website - Keytrade Bank
ADM: Mobile banking and trading website - Keytrade BankADM: Mobile banking and trading website - Keytrade Bank
ADM: Mobile banking and trading website - Keytrade Bank
 
An overview of software requirements engineering
An overview of software requirements engineeringAn overview of software requirements engineering
An overview of software requirements engineering
 
Visual Usability: principles & practices for designing great web and mobile a...
Visual Usability: principles & practices for designing great web and mobile a...Visual Usability: principles & practices for designing great web and mobile a...
Visual Usability: principles & practices for designing great web and mobile a...
 
User Interface Design for Medical Devices - The Relationship Between Usabilit...
User Interface Design for Medical Devices - The Relationship Between Usabilit...User Interface Design for Medical Devices - The Relationship Between Usabilit...
User Interface Design for Medical Devices - The Relationship Between Usabilit...
 
Hofstede's Cultural Dimensions
Hofstede's Cultural DimensionsHofstede's Cultural Dimensions
Hofstede's Cultural Dimensions
 
online banking system
online banking systemonline banking system
online banking system
 
Online Banking Project
Online Banking ProjectOnline Banking Project
Online Banking Project
 
Design Process in the Responsive Age
Design Process in the Responsive AgeDesign Process in the Responsive Age
Design Process in the Responsive Age
 

Semelhante a User interface design for the Web Engineering Psychology

11.0001www.iiste.org call for paper. quality control solutions for niche mark...
11.0001www.iiste.org call for paper. quality control solutions for niche mark...11.0001www.iiste.org call for paper. quality control solutions for niche mark...
11.0001www.iiste.org call for paper. quality control solutions for niche mark...
Alexander Decker
 
Streamlining EMC Documentum Web Publisher to Increase Web Author Productivity
Streamlining EMC Documentum Web Publisher to Increase Web Author ProductivityStreamlining EMC Documentum Web Publisher to Increase Web Author Productivity
Streamlining EMC Documentum Web Publisher to Increase Web Author Productivity
BlueFish
 
Appalanaidu_4.4 Years Exp in DotNet Technology
Appalanaidu_4.4 Years Exp in DotNet TechnologyAppalanaidu_4.4 Years Exp in DotNet Technology
Appalanaidu_4.4 Years Exp in DotNet Technology
APPALANAIDU KONDALA
 

Semelhante a User interface design for the Web Engineering Psychology (20)

What’s in your BA Toolbox – Has User experience and Usability gone to the way...
What’s in your BA Toolbox – Has User experience and Usability gone to the way...What’s in your BA Toolbox – Has User experience and Usability gone to the way...
What’s in your BA Toolbox – Has User experience and Usability gone to the way...
 
Perficient PepsiCo Rich Internet Apps Seminar
Perficient PepsiCo Rich Internet Apps SeminarPerficient PepsiCo Rich Internet Apps Seminar
Perficient PepsiCo Rich Internet Apps Seminar
 
Redesigning TCS.com with Remote Research
Redesigning TCS.com with Remote ResearchRedesigning TCS.com with Remote Research
Redesigning TCS.com with Remote Research
 
Focused Question and Answer for Job Portal
Focused Question and Answer for Job PortalFocused Question and Answer for Job Portal
Focused Question and Answer for Job Portal
 
Chapter 7)
Chapter 7)Chapter 7)
Chapter 7)
 
Study On User Interface(UI) Attributes Of Web Forms For Better User Experience
Study On User Interface(UI) Attributes Of Web Forms For Better User ExperienceStudy On User Interface(UI) Attributes Of Web Forms For Better User Experience
Study On User Interface(UI) Attributes Of Web Forms For Better User Experience
 
E017363243
E017363243E017363243
E017363243
 
Designing usable web applications (part 1) experience dynamics web seminar
Designing usable web applications (part 1)  experience dynamics web seminarDesigning usable web applications (part 1)  experience dynamics web seminar
Designing usable web applications (part 1) experience dynamics web seminar
 
Cis 375 Enhance teaching / snaptutorial.com
Cis 375   Enhance teaching / snaptutorial.comCis 375   Enhance teaching / snaptutorial.com
Cis 375 Enhance teaching / snaptutorial.com
 
11.0001www.iiste.org call for paper. quality control solutions for niche mark...
11.0001www.iiste.org call for paper. quality control solutions for niche mark...11.0001www.iiste.org call for paper. quality control solutions for niche mark...
11.0001www.iiste.org call for paper. quality control solutions for niche mark...
 
Rich Internet Applications
Rich Internet ApplicationsRich Internet Applications
Rich Internet Applications
 
CIS 524 Education Organization / snaptutorial.com
CIS 524  Education Organization / snaptutorial.comCIS 524  Education Organization / snaptutorial.com
CIS 524 Education Organization / snaptutorial.com
 
Usability awareness brown bag
Usability awareness brown bagUsability awareness brown bag
Usability awareness brown bag
 
Streamlining EMC Documentum Web Publisher to Increase Web Author Productivity
Streamlining EMC Documentum Web Publisher to Increase Web Author ProductivityStreamlining EMC Documentum Web Publisher to Increase Web Author Productivity
Streamlining EMC Documentum Web Publisher to Increase Web Author Productivity
 
Cis 524 Education Specialist-snaptutorial.com
Cis 524 Education Specialist-snaptutorial.comCis 524 Education Specialist-snaptutorial.com
Cis 524 Education Specialist-snaptutorial.com
 
Cis 524 Exceptional Education-snaptutorial.com
Cis 524 Exceptional Education-snaptutorial.comCis 524 Exceptional Education-snaptutorial.com
Cis 524 Exceptional Education-snaptutorial.com
 
Cis 375 Education Redefined - snaptutorial.com
Cis 375    Education Redefined - snaptutorial.comCis 375    Education Redefined - snaptutorial.com
Cis 375 Education Redefined - snaptutorial.com
 
CIS 524 Enhance teaching / snaptutorial.com
CIS 524 Enhance teaching / snaptutorial.comCIS 524 Enhance teaching / snaptutorial.com
CIS 524 Enhance teaching / snaptutorial.com
 
Appalanaidu_4.4 Years Exp in DotNet Technology
Appalanaidu_4.4 Years Exp in DotNet TechnologyAppalanaidu_4.4 Years Exp in DotNet Technology
Appalanaidu_4.4 Years Exp in DotNet Technology
 
minor project 1 about quiz web applcation
minor project 1 about quiz web applcationminor project 1 about quiz web applcation
minor project 1 about quiz web applcation
 

Último

IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
Enterprise Knowledge
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
giselly40
 

Último (20)

Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreter
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
 

User interface design for the Web Engineering Psychology

  • 1. User Interface Design for the Web Lawrence Najjar [email_address]
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8. User Profile Facility Managers Gender Generally male Age 30 to 50 years old Education High school graduate Income $25,000 to $45,000 per year Location Facility manager office in office building Computer experience Moderate. Facility manager uses computer for e-mail and researching products on the Web Computer IBM-compatible personal computer Web connection Slow connections (56K modem) Objectives Want to save time, reduce costs of running facility, monitor security, and control specific equipment as needed.
  • 9. Experience Architecture Intent Audience Context Learn about products Solve problems Get entertained Home Work Tech expert Tech novice Gadget lover
  • 10.
  • 11.
  • 12. Functional Requirements Function Description Priority Register Enter registration and personalization information Low Search Find product High Browse Browse catalog for product High
  • 13.
  • 14. Use Cases Use Case Task Flow Description User Preference Differentiation from Competitors Technical Difficulty Show confirmation Provide confirmation when user adds, edits, or erases registration Medium Low Low Remove confirmation Take the confirmation off the page Low Low Low Change registration Edit user’s reg. information Medium Medium Low Remove registration Erase user’s registration Low High Low Function Description Priority Register Enter registration and personalization information Low
  • 15.
  • 17.
  • 19.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.