SlideShare ist ein Scribd-Unternehmen logo
1 von 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]

Weitere Àhnliche Inhalte

Was ist angesagt?

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 centered Design
User centered DesignUser centered Design
User centered Design
Shalini Shingari
 
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
 

Was ist angesagt? (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
 

Andere mochten auch

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
 

Andere mochten auch (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
 

Ähnlich wie 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
 

Ähnlich wie 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
 

KĂŒrzlich hochgeladen

+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎+971_581248768%)**%*]'#abortion pills for sale in dubai@
 

KĂŒrzlich hochgeladen (20)

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
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
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...
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
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?
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
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
 
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...
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
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
 
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
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech 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.