SlideShare ist ein Scribd-Unternehmen logo
1 von 59
Downloaden Sie, um offline zu lesen
User Centered Design 
22-3376 Web Design 2 // Columbia College Chicago
Site Planning
Standard Web Development Process 
1 Planning 
2 Design 
3 Production & QA 
4 Launch +
Where does the 
web designer fit in?
Graphic/Communication Design 
Referred to as the “look & feel” of the site, but it is more than 
that. The skill of using type, imagery and layout to convey literal 
and emotional messages. 
+ 
UI (user interface) Design 
The skill of creating consistent, intuitive and engaging interactive 
systems. Include usability issues: is the user able to effectively 
complete their goals? 
+ 
UX (user experience) Design 
An umbrella skillset that asks the question: was the interaction 
positive? How could it be better?
Standard Web Development Process 
1 Planning 
2 Design 
3 Production & QA 
4 Launch +
Planning 
This stage might include: 
1. Statement of Work (SOW) 
2. Creative Brief 
3. Research and analysis: site goals, competitive research, 
defining the user, field research, brainstrorming, defining 
user scenarios, etc. 
4. Technical requirements 
5. Schedules 
6. Budget 
! 
! 
!
Research and Analysis: Defining the user 
Before you can start figuring out the shape and structure, you need 
to have some idea of who you users are, and why they would come 
to your site. Unless your role is strictly on visual design, this is 
usually the first stage that a UI/UX designer is engaged. 
This analysis can take the form of 
use cases, 
personas, 
and/or user/task flowcharts.
Use Case
Personas
User/Task Flows
Research and Analysis: Defining the shape and scope 
The sitemap is the start of the IA phase of a project (information 
architecture). It is a schematic showing the pages and their 
relationships. It provides an overview of the site and navigation 
needs. This document and any user flow outlines are closely related.
Standard Web Development Process 
1 Planning 
2 Design 
3 Production & QA 
4 Launch +
Design 
This stage might include: 
1. Low fidelity prototypes/Wireframes 
2. Moodboard/conceptual design 
3. High-fidelity prototypes / Static Design 
4. Asset production 
5. Styleguide 
! 
! 
!
Wireframes / Prototypes
Wireframes / Prototypes
Wireframes / Prototypes
Moodboards
Moodboards
Utility, Usability, User Experience 
Utility: 
Does it provide the features you need? 
Usability: 
How easy and pleasant is it to use the features? 
User Experience: 
“UX” encompasses all aspects of the end-user's interaction 
with the company, its services, and its products.
Usability
Usability is a quality attribute 
that assesses how easy user 
interfaces are to use. The 
word "usability" also refers 
to methods for improving 
ease-of-use during the 
design process. 
(useit.com)
Five Basic Attributes of Usability 
Easy to Learn: How easy is it for users to accomplish basic tasks the 
first time they encounter the design? 
Efficient to Use: Once users have learned the design, how quickly can 
they perform tasks? 
Easy to Remember: When users return to the design after a period of 
not using it, how easily can they reestablish proficiency? 
Few Errors: How many errors do users make, how severe are these 
errors, and how easily can they recover from the errors? 
Satisfaction: How pleasant is it to use the design? 
(useit.com)
Usability Testing = 
what they do 
! 
Focus Groups = what 
they say
User Experience (UX)
User Experience: 
The creation and synchronization of the elements that affect user’s 
experience with a particular company, with the intent of influencing 
their perceptions and behavior. 
(Unger and Chandler, A Project Guide to UX Design)
A Slippery Definition 
There is no one defined role or definition for a UX designer within 
web and application design; typically it is a hybrid role that 
combines: 
information architecture, 
interaction design, 
visual design and 
usability engineering 
— but different aspects of those roles may be emphasized more 
heavily depending on the team.
Building Credibility and Trust 
O N E D O L L A R
User Centered Design 
(UCD)
Project 1: Group Crits 
Is there a clear visual hierarcy? 
Is it obvious what is clickable? 
BASIC PRINCIPLE 
Does the design match the user goals (from last week) 
Does the visual design embody the site’s message? 
Is the imagery, type and color compelling, professional? 
In what ways is the design using gestalt principles? 
Proximity, common region, connectedness, similarity 
How is the design using these basic design principles: 
balance, emphasis, rhythm, unity contrast 
Know your user, for they are not you.
The chief difference from other product design 
philosophies is that user-centered design tries to 
optimize the product around how users can, want, 
or need to use the product, rather than forcing the 
users to change their behavior to accommodate the 
product. 
(Wikipedia)
Procrustean Bed
UCD principles in fork & spoon design 
Needs to fit in a range of mouth sizes 
Handle needs to accommodate large and small 
hands 
Needs to function on both solids and liquids 
Needs to be produced in large sets, equal amounts 
of each 
Needs to be easily stackable in small spaces 
Needs to be durable and reusable
There is plenty of room for ‘design’ in UCD
Business-Centered Design 
Change in plans. 
We need a low-cost, 
single use, all-purpose 
utensil. Our costs must 
come in below $.000001 
a unit or I won’t get a 
bonus this year.
UCD in a new user context
gov.uk
persuasive 
transactional/service 
informational 
entertainment
“There has been a reinvention of the internet and the 
behaviour of users in the last few years. Digital services are 
now more agile, open and cheaper. To take advantage of 
these changes, government needs to move to a ‘service 
culture’,putting the needs of citizens ahead of those of 
departments"
User Centered Design
User Centered Design
User Centered Design

Weitere ähnliche Inhalte

Was ist angesagt?

What is a User Experience?
What is a User Experience? What is a User Experience?
What is a User Experience? Dotinum
 
Academy PRO: UI\UX. Introduction.
Academy PRO: UI\UX. Introduction.Academy PRO: UI\UX. Introduction.
Academy PRO: UI\UX. Introduction.Binary Studio
 
A UI and UX training presentation
A UI and UX training presentationA UI and UX training presentation
A UI and UX training presentationaayush_jain_87
 
Simple Steps to UX/UI Web Design
Simple Steps to UX/UI Web DesignSimple Steps to UX/UI Web Design
Simple Steps to UX/UI Web DesignKoombea
 
UX/UI Design and How It Works
UX/UI Design and How It WorksUX/UI Design and How It Works
UX/UI Design and How It WorksAciron Consulting
 
UX UI - Principles and Best Practices 2014-2015
UX UI - Principles and Best Practices 2014-2015UX UI - Principles and Best Practices 2014-2015
UX UI - Principles and Best Practices 2014-2015Harsh Wardhan Dave
 
Web and App 
Design Fundamental: Quick and dirty tips to improve your UX in n...
Web and App 
Design Fundamental: Quick and dirty tips to improve your UX in n...Web and App 
Design Fundamental: Quick and dirty tips to improve your UX in n...
Web and App 
Design Fundamental: Quick and dirty tips to improve your UX in n...Bow Kraivanich
 
Web Usability: Making Your Sites More Awesomer
Web Usability: Making Your Sites More AwesomerWeb Usability: Making Your Sites More Awesomer
Web Usability: Making Your Sites More AwesomerJennifer Riehle McFarland
 
BIH - What is UX?
BIH - What is UX? BIH - What is UX?
BIH - What is UX? Allison Tran
 
Brand Identity in UI/UX Design
Brand Identity in UI/UX DesignBrand Identity in UI/UX Design
Brand Identity in UI/UX DesignAdryan Putra
 
UI Design, Trends, Patterns and User Experience - Academy of Design
UI Design, Trends, Patterns and User Experience - Academy of DesignUI Design, Trends, Patterns and User Experience - Academy of Design
UI Design, Trends, Patterns and User Experience - Academy of DesignShiran Sanjeewa
 
Ui ux designing principles
Ui ux designing principlesUi ux designing principles
Ui ux designing principlesDzung Nguyen
 
Usability Essentials to Know
Usability Essentials to KnowUsability Essentials to Know
Usability Essentials to KnowPravin Mehta
 
UI-UX Practical Talking - Mohamed Shehata
UI-UX Practical Talking - Mohamed ShehataUI-UX Practical Talking - Mohamed Shehata
UI-UX Practical Talking - Mohamed ShehataMohamed Shehata
 
How to Find a Good UI/UX Designer (or be one!)
How to Find a Good UI/UX Designer (or be one!)How to Find a Good UI/UX Designer (or be one!)
How to Find a Good UI/UX Designer (or be one!)Emerentiana Meicy
 
Asap casestudy - UX / UI Design for Corporate Instant Messaging Mobile App
Asap casestudy - UX / UI Design for Corporate Instant Messaging Mobile AppAsap casestudy - UX / UI Design for Corporate Instant Messaging Mobile App
Asap casestudy - UX / UI Design for Corporate Instant Messaging Mobile Appram bal
 

Was ist angesagt? (20)

What is a User Experience?
What is a User Experience? What is a User Experience?
What is a User Experience?
 
Academy PRO: UI\UX. Introduction.
Academy PRO: UI\UX. Introduction.Academy PRO: UI\UX. Introduction.
Academy PRO: UI\UX. Introduction.
 
A UI and UX training presentation
A UI and UX training presentationA UI and UX training presentation
A UI and UX training presentation
 
Simple Steps to UX/UI Web Design
Simple Steps to UX/UI Web DesignSimple Steps to UX/UI Web Design
Simple Steps to UX/UI Web Design
 
UX/UI Design and How It Works
UX/UI Design and How It WorksUX/UI Design and How It Works
UX/UI Design and How It Works
 
UX UI - Principles and Best Practices 2014-2015
UX UI - Principles and Best Practices 2014-2015UX UI - Principles and Best Practices 2014-2015
UX UI - Principles and Best Practices 2014-2015
 
Web and App 
Design Fundamental: Quick and dirty tips to improve your UX in n...
Web and App 
Design Fundamental: Quick and dirty tips to improve your UX in n...Web and App 
Design Fundamental: Quick and dirty tips to improve your UX in n...
Web and App 
Design Fundamental: Quick and dirty tips to improve your UX in n...
 
Ux & ui
Ux & uiUx & ui
Ux & ui
 
Web Usability: Making Your Sites More Awesomer
Web Usability: Making Your Sites More AwesomerWeb Usability: Making Your Sites More Awesomer
Web Usability: Making Your Sites More Awesomer
 
BIH - What is UX?
BIH - What is UX? BIH - What is UX?
BIH - What is UX?
 
Brand Identity in UI/UX Design
Brand Identity in UI/UX DesignBrand Identity in UI/UX Design
Brand Identity in UI/UX Design
 
UI UX in depth
UI UX in depthUI UX in depth
UI UX in depth
 
UI Design, Trends, Patterns and User Experience - Academy of Design
UI Design, Trends, Patterns and User Experience - Academy of DesignUI Design, Trends, Patterns and User Experience - Academy of Design
UI Design, Trends, Patterns and User Experience - Academy of Design
 
Ui ux designing principles
Ui ux designing principlesUi ux designing principles
Ui ux designing principles
 
Usability Essentials to Know
Usability Essentials to KnowUsability Essentials to Know
Usability Essentials to Know
 
UX Trends 2016
UX Trends 2016UX Trends 2016
UX Trends 2016
 
UI-UX Practical Talking - Mohamed Shehata
UI-UX Practical Talking - Mohamed ShehataUI-UX Practical Talking - Mohamed Shehata
UI-UX Practical Talking - Mohamed Shehata
 
How to Find a Good UI/UX Designer (or be one!)
How to Find a Good UI/UX Designer (or be one!)How to Find a Good UI/UX Designer (or be one!)
How to Find a Good UI/UX Designer (or be one!)
 
UI Design 101: Day 02 of 07
UI Design 101: Day 02 of 07UI Design 101: Day 02 of 07
UI Design 101: Day 02 of 07
 
Asap casestudy - UX / UI Design for Corporate Instant Messaging Mobile App
Asap casestudy - UX / UI Design for Corporate Instant Messaging Mobile AppAsap casestudy - UX / UI Design for Corporate Instant Messaging Mobile App
Asap casestudy - UX / UI Design for Corporate Instant Messaging Mobile App
 

Andere mochten auch

HTML Foundations, pt 3: Forms
HTML Foundations, pt 3: FormsHTML Foundations, pt 3: Forms
HTML Foundations, pt 3: FormsShawn Calvert
 
Class Intro / HTML Basics
Class Intro / HTML BasicsClass Intro / HTML Basics
Class Intro / HTML BasicsShawn Calvert
 
Introduction to Responsive Web Design
Introduction to Responsive Web DesignIntroduction to Responsive Web Design
Introduction to Responsive Web DesignShawn Calvert
 
CSS Foundations, pt 2
CSS Foundations, pt 2CSS Foundations, pt 2
CSS Foundations, pt 2Shawn Calvert
 
Intro to Javascript and jQuery
Intro to Javascript and jQueryIntro to Javascript and jQuery
Intro to Javascript and jQueryShawn Calvert
 
Creating Images for the Web
Creating Images for the WebCreating Images for the Web
Creating Images for the WebShawn Calvert
 
Usability and User Experience
Usability and User ExperienceUsability and User Experience
Usability and User ExperienceShawn Calvert
 
CSS Foundations, pt 1
CSS Foundations, pt 1CSS Foundations, pt 1
CSS Foundations, pt 1Shawn Calvert
 
Html / CSS Presentation
Html / CSS PresentationHtml / CSS Presentation
Html / CSS PresentationShawn Calvert
 

Andere mochten auch (15)

HTML Foundations, pt 3: Forms
HTML Foundations, pt 3: FormsHTML Foundations, pt 3: Forms
HTML Foundations, pt 3: Forms
 
Class Intro / HTML Basics
Class Intro / HTML BasicsClass Intro / HTML Basics
Class Intro / HTML Basics
 
Intro to jQuery
Intro to jQueryIntro to jQuery
Intro to jQuery
 
Web Layout
Web LayoutWeb Layout
Web Layout
 
Introduction to Responsive Web Design
Introduction to Responsive Web DesignIntroduction to Responsive Web Design
Introduction to Responsive Web Design
 
Week 2-intro-html
Week 2-intro-htmlWeek 2-intro-html
Week 2-intro-html
 
Web Typography
Web TypographyWeb Typography
Web Typography
 
HTML Email
HTML EmailHTML Email
HTML Email
 
CSS Foundations, pt 2
CSS Foundations, pt 2CSS Foundations, pt 2
CSS Foundations, pt 2
 
Intro to Javascript and jQuery
Intro to Javascript and jQueryIntro to Javascript and jQuery
Intro to Javascript and jQuery
 
Images on the Web
Images on the WebImages on the Web
Images on the Web
 
Creating Images for the Web
Creating Images for the WebCreating Images for the Web
Creating Images for the Web
 
Usability and User Experience
Usability and User ExperienceUsability and User Experience
Usability and User Experience
 
CSS Foundations, pt 1
CSS Foundations, pt 1CSS Foundations, pt 1
CSS Foundations, pt 1
 
Html / CSS Presentation
Html / CSS PresentationHtml / CSS Presentation
Html / CSS Presentation
 

Ähnlich wie User Centered Design

User Experience Explained
User Experience ExplainedUser Experience Explained
User Experience ExplainedSameer dwivedi
 
Embry-Riddle Campus Solutions UX Design
Embry-Riddle Campus Solutions UX Design Embry-Riddle Campus Solutions UX Design
Embry-Riddle Campus Solutions UX Design paulodavila
 
Proof That UI UX Really Works
Proof That UI UX Really WorksProof That UI UX Really Works
Proof That UI UX Really WorksSamer Tallauze
 
A Practical Approach to Great User Adoption User Definition & User Interface ...
A Practical Approach to Great User Adoption User Definition & User Interface ...A Practical Approach to Great User Adoption User Definition & User Interface ...
A Practical Approach to Great User Adoption User Definition & User Interface ...Damon Sanchez
 
584697015-UI-and-UX-hiten presentation.pptx
584697015-UI-and-UX-hiten presentation.pptx584697015-UI-and-UX-hiten presentation.pptx
584697015-UI-and-UX-hiten presentation.pptxhirenmkaklotar19
 
User centered design process
User centered design processUser centered design process
User centered design processRachna Mittal
 
Responsive & Organic Design
Responsive & Organic DesignResponsive & Organic Design
Responsive & Organic DesignMirco Pasqualini
 
Ux Overview
Ux OverviewUx Overview
Ux Overviewmbrosset
 
Website Usability | Day 1
Website Usability | Day 1Website Usability | Day 1
Website Usability | Day 1studiokandm
 
Building for People: 5 Practical Tip for Greating Great UX
Building for People: 5 Practical Tip for Greating Great UXBuilding for People: 5 Practical Tip for Greating Great UX
Building for People: 5 Practical Tip for Greating Great UXqixingz
 
UXBASIS – Getting UX integrated
UXBASIS – Getting UX integratedUXBASIS – Getting UX integrated
UXBASIS – Getting UX integratedJames Kelway
 
The Essential UIUX Designing Principles to Follow for Maintain Customer Engag...
The Essential UIUX Designing Principles to Follow for Maintain Customer Engag...The Essential UIUX Designing Principles to Follow for Maintain Customer Engag...
The Essential UIUX Designing Principles to Follow for Maintain Customer Engag...Inexture Solutions
 
UI_UX Design Program.pdf
UI_UX Design Program.pdfUI_UX Design Program.pdf
UI_UX Design Program.pdftopseowebmaster
 
Konsep-UX-Design-dikonversi 02.pdf
Konsep-UX-Design-dikonversi 02.pdfKonsep-UX-Design-dikonversi 02.pdf
Konsep-UX-Design-dikonversi 02.pdfAgusNugrosNugroho
 
Importance of User Centric Design in Software Development Services.pdf
Importance of User Centric Design in Software Development Services.pdfImportance of User Centric Design in Software Development Services.pdf
Importance of User Centric Design in Software Development Services.pdfMverve1
 

Ähnlich wie User Centered Design (20)

UX/UI Introduction
UX/UI IntroductionUX/UI Introduction
UX/UI Introduction
 
The Science behind Good UIs and UXs
The Science behind Good UIs and UXsThe Science behind Good UIs and UXs
The Science behind Good UIs and UXs
 
User Experience Explained
User Experience ExplainedUser Experience Explained
User Experience Explained
 
Embry-Riddle Campus Solutions UX Design
Embry-Riddle Campus Solutions UX Design Embry-Riddle Campus Solutions UX Design
Embry-Riddle Campus Solutions UX Design
 
Proof That UI UX Really Works
Proof That UI UX Really WorksProof That UI UX Really Works
Proof That UI UX Really Works
 
A Practical Approach to Great User Adoption User Definition & User Interface ...
A Practical Approach to Great User Adoption User Definition & User Interface ...A Practical Approach to Great User Adoption User Definition & User Interface ...
A Practical Approach to Great User Adoption User Definition & User Interface ...
 
584697015-UI-and-UX-hiten presentation.pptx
584697015-UI-and-UX-hiten presentation.pptx584697015-UI-and-UX-hiten presentation.pptx
584697015-UI-and-UX-hiten presentation.pptx
 
User centered design process
User centered design processUser centered design process
User centered design process
 
Best Practices in UX Design
Best Practices in UX DesignBest Practices in UX Design
Best Practices in UX Design
 
Responsive & Organic Design
Responsive & Organic DesignResponsive & Organic Design
Responsive & Organic Design
 
Ux Overview
Ux OverviewUx Overview
Ux Overview
 
Website Usability | Day 1
Website Usability | Day 1Website Usability | Day 1
Website Usability | Day 1
 
Building for People: 5 Practical Tip for Greating Great UX
Building for People: 5 Practical Tip for Greating Great UXBuilding for People: 5 Practical Tip for Greating Great UX
Building for People: 5 Practical Tip for Greating Great UX
 
UXBASIS – Getting UX integrated
UXBASIS – Getting UX integratedUXBASIS – Getting UX integrated
UXBASIS – Getting UX integrated
 
The Essential UIUX Designing Principles to Follow for Maintain Customer Engag...
The Essential UIUX Designing Principles to Follow for Maintain Customer Engag...The Essential UIUX Designing Principles to Follow for Maintain Customer Engag...
The Essential UIUX Designing Principles to Follow for Maintain Customer Engag...
 
UI_UX Design Program.pdf
UI_UX Design Program.pdfUI_UX Design Program.pdf
UI_UX Design Program.pdf
 
Konsep-UX-Design-dikonversi 02.pdf
Konsep-UX-Design-dikonversi 02.pdfKonsep-UX-Design-dikonversi 02.pdf
Konsep-UX-Design-dikonversi 02.pdf
 
UX Explained
UX ExplainedUX Explained
UX Explained
 
Desain Grafis 4 - UI/UX
Desain Grafis 4 - UI/UXDesain Grafis 4 - UI/UX
Desain Grafis 4 - UI/UX
 
Importance of User Centric Design in Software Development Services.pdf
Importance of User Centric Design in Software Development Services.pdfImportance of User Centric Design in Software Development Services.pdf
Importance of User Centric Design in Software Development Services.pdf
 

Mehr von Shawn Calvert

Web Design I Syllabus 22 3375-03
Web Design I Syllabus 22 3375-03Web Design I Syllabus 22 3375-03
Web Design I Syllabus 22 3375-03Shawn Calvert
 
HTML Foundations, pt 2
HTML Foundations, pt 2HTML Foundations, pt 2
HTML Foundations, pt 2Shawn Calvert
 
HTML Foundations, part 1
HTML Foundations, part 1HTML Foundations, part 1
HTML Foundations, part 1Shawn Calvert
 
Web Design 1: Introductions
Web Design 1: IntroductionsWeb Design 1: Introductions
Web Design 1: IntroductionsShawn Calvert
 
22-3530, Photo Communications Syllabus
22-3530, Photo Communications Syllabus22-3530, Photo Communications Syllabus
22-3530, Photo Communications SyllabusShawn Calvert
 
An Overview of Stock Photography
An Overview of Stock PhotographyAn Overview of Stock Photography
An Overview of Stock PhotographyShawn Calvert
 
Typography I syllabus
Typography I syllabusTypography I syllabus
Typography I syllabusShawn Calvert
 

Mehr von Shawn Calvert (12)

Web Design I Syllabus 22 3375-03
Web Design I Syllabus 22 3375-03Web Design I Syllabus 22 3375-03
Web Design I Syllabus 22 3375-03
 
HTML Foundations, pt 2
HTML Foundations, pt 2HTML Foundations, pt 2
HTML Foundations, pt 2
 
HTML Foundations, part 1
HTML Foundations, part 1HTML Foundations, part 1
HTML Foundations, part 1
 
Web Design 1: Introductions
Web Design 1: IntroductionsWeb Design 1: Introductions
Web Design 1: Introductions
 
22-3530, Photo Communications Syllabus
22-3530, Photo Communications Syllabus22-3530, Photo Communications Syllabus
22-3530, Photo Communications Syllabus
 
An Overview of Stock Photography
An Overview of Stock PhotographyAn Overview of Stock Photography
An Overview of Stock Photography
 
Color Photography
Color PhotographyColor Photography
Color Photography
 
PSA posters
PSA postersPSA posters
PSA posters
 
Composition & Light
Composition & LightComposition & Light
Composition & Light
 
of Pixels and Bits
of Pixels and Bitsof Pixels and Bits
of Pixels and Bits
 
Camera basics
Camera basics Camera basics
Camera basics
 
Typography I syllabus
Typography I syllabusTypography I syllabus
Typography I syllabus
 

Kürzlich hochgeladen

Call Girls In Jp Nagar ☎ 7737669865 🥵 Book Your One night Stand
Call Girls In Jp Nagar ☎ 7737669865 🥵 Book Your One night StandCall Girls In Jp Nagar ☎ 7737669865 🥵 Book Your One night Stand
Call Girls In Jp Nagar ☎ 7737669865 🥵 Book Your One night Standamitlee9823
 
❤Personal Whatsapp Number 8617697112 Samba Call Girls 💦✅.
❤Personal Whatsapp Number 8617697112 Samba Call Girls 💦✅.❤Personal Whatsapp Number 8617697112 Samba Call Girls 💦✅.
❤Personal Whatsapp Number 8617697112 Samba Call Girls 💦✅.Nitya salvi
 
Book Paid In Vashi In 8976425520 Navi Mumbai Call Girls
Book Paid In Vashi In 8976425520 Navi Mumbai Call GirlsBook Paid In Vashi In 8976425520 Navi Mumbai Call Girls
Book Paid In Vashi In 8976425520 Navi Mumbai Call Girlsmodelanjalisharma4
 
Real service provider college girl Mira Road 8976425520
Real service provider college girl Mira Road 8976425520Real service provider college girl Mira Road 8976425520
Real service provider college girl Mira Road 8976425520modelanjalisharma4
 
Booking open Available Pune Call Girls Nanded City 6297143586 Call Hot India...
Booking open Available Pune Call Girls Nanded City  6297143586 Call Hot India...Booking open Available Pune Call Girls Nanded City  6297143586 Call Hot India...
Booking open Available Pune Call Girls Nanded City 6297143586 Call Hot India...Call Girls in Nagpur High Profile
 
Top Rated Pune Call Girls Koregaon Park ⟟ 6297143586 ⟟ Call Me For Genuine S...
Top Rated  Pune Call Girls Koregaon Park ⟟ 6297143586 ⟟ Call Me For Genuine S...Top Rated  Pune Call Girls Koregaon Park ⟟ 6297143586 ⟟ Call Me For Genuine S...
Top Rated Pune Call Girls Koregaon Park ⟟ 6297143586 ⟟ Call Me For Genuine S...Call Girls in Nagpur High Profile
 
Booking open Available Pune Call Girls Kirkatwadi 6297143586 Call Hot Indian...
Booking open Available Pune Call Girls Kirkatwadi  6297143586 Call Hot Indian...Booking open Available Pune Call Girls Kirkatwadi  6297143586 Call Hot Indian...
Booking open Available Pune Call Girls Kirkatwadi 6297143586 Call Hot Indian...Call Girls in Nagpur High Profile
 
Jordan_Amanda_DMBS202404_PB1_2024-04.pdf
Jordan_Amanda_DMBS202404_PB1_2024-04.pdfJordan_Amanda_DMBS202404_PB1_2024-04.pdf
Jordan_Amanda_DMBS202404_PB1_2024-04.pdfamanda2495
 
Sector 104, Noida Call girls :8448380779 Model Escorts | 100% verified
Sector 104, Noida Call girls :8448380779 Model Escorts | 100% verifiedSector 104, Noida Call girls :8448380779 Model Escorts | 100% verified
Sector 104, Noida Call girls :8448380779 Model Escorts | 100% verifiedDelhi Call girls
 
Design Inspiration for College by Slidesgo.pptx
Design Inspiration for College by Slidesgo.pptxDesign Inspiration for College by Slidesgo.pptx
Design Inspiration for College by Slidesgo.pptxTusharBahuguna2
 
➥🔝 7737669865 🔝▻ dharamshala Call-girls in Women Seeking Men 🔝dharamshala🔝 ...
➥🔝 7737669865 🔝▻ dharamshala Call-girls in Women Seeking Men  🔝dharamshala🔝  ...➥🔝 7737669865 🔝▻ dharamshala Call-girls in Women Seeking Men  🔝dharamshala🔝  ...
➥🔝 7737669865 🔝▻ dharamshala Call-girls in Women Seeking Men 🔝dharamshala🔝 ...amitlee9823
 
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️Delhi Call girls
 
UI:UX Design and Empowerment Strategies for Underprivileged Transgender Indiv...
UI:UX Design and Empowerment Strategies for Underprivileged Transgender Indiv...UI:UX Design and Empowerment Strategies for Underprivileged Transgender Indiv...
UI:UX Design and Empowerment Strategies for Underprivileged Transgender Indiv...RitikaRoy32
 
Peaches App development presentation deck
Peaches App development presentation deckPeaches App development presentation deck
Peaches App development presentation decktbatkhuu1
 
Editorial design Magazine design project.pdf
Editorial design Magazine design project.pdfEditorial design Magazine design project.pdf
Editorial design Magazine design project.pdftbatkhuu1
 
Verified Trusted Call Girls Adugodi💘 9352852248 Good Looking standard Profil...
Verified Trusted Call Girls Adugodi💘 9352852248  Good Looking standard Profil...Verified Trusted Call Girls Adugodi💘 9352852248  Good Looking standard Profil...
Verified Trusted Call Girls Adugodi💘 9352852248 Good Looking standard Profil...kumaririma588
 
Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...
Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...
Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...nirzagarg
 
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Hy...
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Hy...Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Hy...
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Hy...Pooja Nehwal
 
Whitefield Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Ba...
Whitefield Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Ba...Whitefield Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Ba...
Whitefield Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Ba...amitlee9823
 

Kürzlich hochgeladen (20)

Call Girls In Jp Nagar ☎ 7737669865 🥵 Book Your One night Stand
Call Girls In Jp Nagar ☎ 7737669865 🥵 Book Your One night StandCall Girls In Jp Nagar ☎ 7737669865 🥵 Book Your One night Stand
Call Girls In Jp Nagar ☎ 7737669865 🥵 Book Your One night Stand
 
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman MuscatAbortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
 
❤Personal Whatsapp Number 8617697112 Samba Call Girls 💦✅.
❤Personal Whatsapp Number 8617697112 Samba Call Girls 💦✅.❤Personal Whatsapp Number 8617697112 Samba Call Girls 💦✅.
❤Personal Whatsapp Number 8617697112 Samba Call Girls 💦✅.
 
Book Paid In Vashi In 8976425520 Navi Mumbai Call Girls
Book Paid In Vashi In 8976425520 Navi Mumbai Call GirlsBook Paid In Vashi In 8976425520 Navi Mumbai Call Girls
Book Paid In Vashi In 8976425520 Navi Mumbai Call Girls
 
Real service provider college girl Mira Road 8976425520
Real service provider college girl Mira Road 8976425520Real service provider college girl Mira Road 8976425520
Real service provider college girl Mira Road 8976425520
 
Booking open Available Pune Call Girls Nanded City 6297143586 Call Hot India...
Booking open Available Pune Call Girls Nanded City  6297143586 Call Hot India...Booking open Available Pune Call Girls Nanded City  6297143586 Call Hot India...
Booking open Available Pune Call Girls Nanded City 6297143586 Call Hot India...
 
Top Rated Pune Call Girls Koregaon Park ⟟ 6297143586 ⟟ Call Me For Genuine S...
Top Rated  Pune Call Girls Koregaon Park ⟟ 6297143586 ⟟ Call Me For Genuine S...Top Rated  Pune Call Girls Koregaon Park ⟟ 6297143586 ⟟ Call Me For Genuine S...
Top Rated Pune Call Girls Koregaon Park ⟟ 6297143586 ⟟ Call Me For Genuine S...
 
Booking open Available Pune Call Girls Kirkatwadi 6297143586 Call Hot Indian...
Booking open Available Pune Call Girls Kirkatwadi  6297143586 Call Hot Indian...Booking open Available Pune Call Girls Kirkatwadi  6297143586 Call Hot Indian...
Booking open Available Pune Call Girls Kirkatwadi 6297143586 Call Hot Indian...
 
Jordan_Amanda_DMBS202404_PB1_2024-04.pdf
Jordan_Amanda_DMBS202404_PB1_2024-04.pdfJordan_Amanda_DMBS202404_PB1_2024-04.pdf
Jordan_Amanda_DMBS202404_PB1_2024-04.pdf
 
Sector 104, Noida Call girls :8448380779 Model Escorts | 100% verified
Sector 104, Noida Call girls :8448380779 Model Escorts | 100% verifiedSector 104, Noida Call girls :8448380779 Model Escorts | 100% verified
Sector 104, Noida Call girls :8448380779 Model Escorts | 100% verified
 
Design Inspiration for College by Slidesgo.pptx
Design Inspiration for College by Slidesgo.pptxDesign Inspiration for College by Slidesgo.pptx
Design Inspiration for College by Slidesgo.pptx
 
➥🔝 7737669865 🔝▻ dharamshala Call-girls in Women Seeking Men 🔝dharamshala🔝 ...
➥🔝 7737669865 🔝▻ dharamshala Call-girls in Women Seeking Men  🔝dharamshala🔝  ...➥🔝 7737669865 🔝▻ dharamshala Call-girls in Women Seeking Men  🔝dharamshala🔝  ...
➥🔝 7737669865 🔝▻ dharamshala Call-girls in Women Seeking Men 🔝dharamshala🔝 ...
 
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
 
UI:UX Design and Empowerment Strategies for Underprivileged Transgender Indiv...
UI:UX Design and Empowerment Strategies for Underprivileged Transgender Indiv...UI:UX Design and Empowerment Strategies for Underprivileged Transgender Indiv...
UI:UX Design and Empowerment Strategies for Underprivileged Transgender Indiv...
 
Peaches App development presentation deck
Peaches App development presentation deckPeaches App development presentation deck
Peaches App development presentation deck
 
Editorial design Magazine design project.pdf
Editorial design Magazine design project.pdfEditorial design Magazine design project.pdf
Editorial design Magazine design project.pdf
 
Verified Trusted Call Girls Adugodi💘 9352852248 Good Looking standard Profil...
Verified Trusted Call Girls Adugodi💘 9352852248  Good Looking standard Profil...Verified Trusted Call Girls Adugodi💘 9352852248  Good Looking standard Profil...
Verified Trusted Call Girls Adugodi💘 9352852248 Good Looking standard Profil...
 
Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...
Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...
Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...
 
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Hy...
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Hy...Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Hy...
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Hy...
 
Whitefield Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Ba...
Whitefield Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Ba...Whitefield Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Ba...
Whitefield Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Ba...
 

User Centered Design

  • 1. User Centered Design 22-3376 Web Design 2 // Columbia College Chicago
  • 3. Standard Web Development Process 1 Planning 2 Design 3 Production & QA 4 Launch +
  • 4.
  • 5. Where does the web designer fit in?
  • 6. Graphic/Communication Design Referred to as the “look & feel” of the site, but it is more than that. The skill of using type, imagery and layout to convey literal and emotional messages. + UI (user interface) Design The skill of creating consistent, intuitive and engaging interactive systems. Include usability issues: is the user able to effectively complete their goals? + UX (user experience) Design An umbrella skillset that asks the question: was the interaction positive? How could it be better?
  • 7. Standard Web Development Process 1 Planning 2 Design 3 Production & QA 4 Launch +
  • 8. Planning This stage might include: 1. Statement of Work (SOW) 2. Creative Brief 3. Research and analysis: site goals, competitive research, defining the user, field research, brainstrorming, defining user scenarios, etc. 4. Technical requirements 5. Schedules 6. Budget ! ! !
  • 9.
  • 10.
  • 11. Research and Analysis: Defining the user Before you can start figuring out the shape and structure, you need to have some idea of who you users are, and why they would come to your site. Unless your role is strictly on visual design, this is usually the first stage that a UI/UX designer is engaged. This analysis can take the form of use cases, personas, and/or user/task flowcharts.
  • 15. Research and Analysis: Defining the shape and scope The sitemap is the start of the IA phase of a project (information architecture). It is a schematic showing the pages and their relationships. It provides an overview of the site and navigation needs. This document and any user flow outlines are closely related.
  • 16. Standard Web Development Process 1 Planning 2 Design 3 Production & QA 4 Launch +
  • 17. Design This stage might include: 1. Low fidelity prototypes/Wireframes 2. Moodboard/conceptual design 3. High-fidelity prototypes / Static Design 4. Asset production 5. Styleguide ! ! !
  • 23. Utility, Usability, User Experience Utility: Does it provide the features you need? Usability: How easy and pleasant is it to use the features? User Experience: “UX” encompasses all aspects of the end-user's interaction with the company, its services, and its products.
  • 24.
  • 26. Usability is a quality attribute that assesses how easy user interfaces are to use. The word "usability" also refers to methods for improving ease-of-use during the design process. (useit.com)
  • 27. Five Basic Attributes of Usability Easy to Learn: How easy is it for users to accomplish basic tasks the first time they encounter the design? Efficient to Use: Once users have learned the design, how quickly can they perform tasks? Easy to Remember: When users return to the design after a period of not using it, how easily can they reestablish proficiency? Few Errors: How many errors do users make, how severe are these errors, and how easily can they recover from the errors? Satisfaction: How pleasant is it to use the design? (useit.com)
  • 28. Usability Testing = what they do ! Focus Groups = what they say
  • 29.
  • 30.
  • 32. User Experience: The creation and synchronization of the elements that affect user’s experience with a particular company, with the intent of influencing their perceptions and behavior. (Unger and Chandler, A Project Guide to UX Design)
  • 33. A Slippery Definition There is no one defined role or definition for a UX designer within web and application design; typically it is a hybrid role that combines: information architecture, interaction design, visual design and usability engineering — but different aspects of those roles may be emphasized more heavily depending on the team.
  • 34. Building Credibility and Trust O N E D O L L A R
  • 35.
  • 36.
  • 37.
  • 38.
  • 40. Project 1: Group Crits Is there a clear visual hierarcy? Is it obvious what is clickable? BASIC PRINCIPLE Does the design match the user goals (from last week) Does the visual design embody the site’s message? Is the imagery, type and color compelling, professional? In what ways is the design using gestalt principles? Proximity, common region, connectedness, similarity How is the design using these basic design principles: balance, emphasis, rhythm, unity contrast Know your user, for they are not you.
  • 41. The chief difference from other product design philosophies is that user-centered design tries to optimize the product around how users can, want, or need to use the product, rather than forcing the users to change their behavior to accommodate the product. (Wikipedia)
  • 43.
  • 44.
  • 45.
  • 46. UCD principles in fork & spoon design Needs to fit in a range of mouth sizes Handle needs to accommodate large and small hands Needs to function on both solids and liquids Needs to be produced in large sets, equal amounts of each Needs to be easily stackable in small spaces Needs to be durable and reusable
  • 47. There is plenty of room for ‘design’ in UCD
  • 48.
  • 49.
  • 50. Business-Centered Design Change in plans. We need a low-cost, single use, all-purpose utensil. Our costs must come in below $.000001 a unit or I won’t get a bonus this year.
  • 51.
  • 52. UCD in a new user context
  • 54.
  • 56. “There has been a reinvention of the internet and the behaviour of users in the last few years. Digital services are now more agile, open and cheaper. To take advantage of these changes, government needs to move to a ‘service culture’,putting the needs of citizens ahead of those of departments"