SlideShare a Scribd company logo
1 of 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]

More Related Content

What's hot

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
 

What's hot (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
 

Viewers also liked

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
 

Viewers also liked (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
 

Similar to 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
 

Similar to 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
 

Recently uploaded

Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
vu2urc
 
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
Earley Information Science
 

Recently uploaded (20)

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...
 
Evaluating the top large language models.pdf
Evaluating the top large language models.pdfEvaluating the top large language models.pdf
Evaluating the top large language models.pdf
 
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...
 
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
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
 
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...
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
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
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
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
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
 
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
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - 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.