Web2 week-7-user-centered
-
Upload
shawn-calvert -
Category
Documents
-
view
240 -
download
1
Transcript of Web2 week-7-user-centered
![Page 1: Web2 week-7-user-centered](https://reader033.fdocuments.net/reader033/viewer/2022052906/5589b6bad8b42a23058b4604/html5/thumbnails/1.jpg)
22-3376 Web Design 2 // Columbia College Chicago
User Centered Design
![Page 2: Web2 week-7-user-centered](https://reader033.fdocuments.net/reader033/viewer/2022052906/5589b6bad8b42a23058b4604/html5/thumbnails/2.jpg)
Site Planning
![Page 3: Web2 week-7-user-centered](https://reader033.fdocuments.net/reader033/viewer/2022052906/5589b6bad8b42a23058b4604/html5/thumbnails/3.jpg)
Planning1
Design2
Production & QA3
Launch +4
Standard Web Development Process
![Page 4: Web2 week-7-user-centered](https://reader033.fdocuments.net/reader033/viewer/2022052906/5589b6bad8b42a23058b4604/html5/thumbnails/4.jpg)
![Page 5: Web2 week-7-user-centered](https://reader033.fdocuments.net/reader033/viewer/2022052906/5589b6bad8b42a23058b4604/html5/thumbnails/5.jpg)
Where does the web designer fit in?
![Page 6: Web2 week-7-user-centered](https://reader033.fdocuments.net/reader033/viewer/2022052906/5589b6bad8b42a23058b4604/html5/thumbnails/6.jpg)
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?
![Page 7: Web2 week-7-user-centered](https://reader033.fdocuments.net/reader033/viewer/2022052906/5589b6bad8b42a23058b4604/html5/thumbnails/7.jpg)
Standard Web Development Process
Planning1
Design2
Production & QA3
Launch +4
![Page 8: Web2 week-7-user-centered](https://reader033.fdocuments.net/reader033/viewer/2022052906/5589b6bad8b42a23058b4604/html5/thumbnails/8.jpg)
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
!
!
!
![Page 9: Web2 week-7-user-centered](https://reader033.fdocuments.net/reader033/viewer/2022052906/5589b6bad8b42a23058b4604/html5/thumbnails/9.jpg)
![Page 10: Web2 week-7-user-centered](https://reader033.fdocuments.net/reader033/viewer/2022052906/5589b6bad8b42a23058b4604/html5/thumbnails/10.jpg)
![Page 11: Web2 week-7-user-centered](https://reader033.fdocuments.net/reader033/viewer/2022052906/5589b6bad8b42a23058b4604/html5/thumbnails/11.jpg)
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.
![Page 12: Web2 week-7-user-centered](https://reader033.fdocuments.net/reader033/viewer/2022052906/5589b6bad8b42a23058b4604/html5/thumbnails/12.jpg)
Use Case
![Page 13: Web2 week-7-user-centered](https://reader033.fdocuments.net/reader033/viewer/2022052906/5589b6bad8b42a23058b4604/html5/thumbnails/13.jpg)
Personas
![Page 14: Web2 week-7-user-centered](https://reader033.fdocuments.net/reader033/viewer/2022052906/5589b6bad8b42a23058b4604/html5/thumbnails/14.jpg)
User/Task Flows
![Page 15: Web2 week-7-user-centered](https://reader033.fdocuments.net/reader033/viewer/2022052906/5589b6bad8b42a23058b4604/html5/thumbnails/15.jpg)
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.
![Page 16: Web2 week-7-user-centered](https://reader033.fdocuments.net/reader033/viewer/2022052906/5589b6bad8b42a23058b4604/html5/thumbnails/16.jpg)
Standard Web Development Process
Planning1
Design2
Production & QA3
Launch +4
![Page 17: Web2 week-7-user-centered](https://reader033.fdocuments.net/reader033/viewer/2022052906/5589b6bad8b42a23058b4604/html5/thumbnails/17.jpg)
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
!
!
!
![Page 18: Web2 week-7-user-centered](https://reader033.fdocuments.net/reader033/viewer/2022052906/5589b6bad8b42a23058b4604/html5/thumbnails/18.jpg)
Wireframes / Prototypes
![Page 19: Web2 week-7-user-centered](https://reader033.fdocuments.net/reader033/viewer/2022052906/5589b6bad8b42a23058b4604/html5/thumbnails/19.jpg)
Wireframes / Prototypes
![Page 20: Web2 week-7-user-centered](https://reader033.fdocuments.net/reader033/viewer/2022052906/5589b6bad8b42a23058b4604/html5/thumbnails/20.jpg)
Wireframes / Prototypes
![Page 21: Web2 week-7-user-centered](https://reader033.fdocuments.net/reader033/viewer/2022052906/5589b6bad8b42a23058b4604/html5/thumbnails/21.jpg)
Moodboards
![Page 22: Web2 week-7-user-centered](https://reader033.fdocuments.net/reader033/viewer/2022052906/5589b6bad8b42a23058b4604/html5/thumbnails/22.jpg)
Moodboards
![Page 23: Web2 week-7-user-centered](https://reader033.fdocuments.net/reader033/viewer/2022052906/5589b6bad8b42a23058b4604/html5/thumbnails/23.jpg)
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.
![Page 24: Web2 week-7-user-centered](https://reader033.fdocuments.net/reader033/viewer/2022052906/5589b6bad8b42a23058b4604/html5/thumbnails/24.jpg)
![Page 25: Web2 week-7-user-centered](https://reader033.fdocuments.net/reader033/viewer/2022052906/5589b6bad8b42a23058b4604/html5/thumbnails/25.jpg)
Usability
![Page 26: Web2 week-7-user-centered](https://reader033.fdocuments.net/reader033/viewer/2022052906/5589b6bad8b42a23058b4604/html5/thumbnails/26.jpg)
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)
![Page 27: Web2 week-7-user-centered](https://reader033.fdocuments.net/reader033/viewer/2022052906/5589b6bad8b42a23058b4604/html5/thumbnails/27.jpg)
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)
Five Basic Attributes of Usability
![Page 28: Web2 week-7-user-centered](https://reader033.fdocuments.net/reader033/viewer/2022052906/5589b6bad8b42a23058b4604/html5/thumbnails/28.jpg)
Usability Testing = what they do
!
Focus Groups = what they say
![Page 29: Web2 week-7-user-centered](https://reader033.fdocuments.net/reader033/viewer/2022052906/5589b6bad8b42a23058b4604/html5/thumbnails/29.jpg)
![Page 30: Web2 week-7-user-centered](https://reader033.fdocuments.net/reader033/viewer/2022052906/5589b6bad8b42a23058b4604/html5/thumbnails/30.jpg)
![Page 31: Web2 week-7-user-centered](https://reader033.fdocuments.net/reader033/viewer/2022052906/5589b6bad8b42a23058b4604/html5/thumbnails/31.jpg)
User Experience (UX)
![Page 32: Web2 week-7-user-centered](https://reader033.fdocuments.net/reader033/viewer/2022052906/5589b6bad8b42a23058b4604/html5/thumbnails/32.jpg)
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)
![Page 33: Web2 week-7-user-centered](https://reader033.fdocuments.net/reader033/viewer/2022052906/5589b6bad8b42a23058b4604/html5/thumbnails/33.jpg)
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.
![Page 34: Web2 week-7-user-centered](https://reader033.fdocuments.net/reader033/viewer/2022052906/5589b6bad8b42a23058b4604/html5/thumbnails/34.jpg)
O N E D O L L A R
Building Credibility and Trust
![Page 35: Web2 week-7-user-centered](https://reader033.fdocuments.net/reader033/viewer/2022052906/5589b6bad8b42a23058b4604/html5/thumbnails/35.jpg)
![Page 36: Web2 week-7-user-centered](https://reader033.fdocuments.net/reader033/viewer/2022052906/5589b6bad8b42a23058b4604/html5/thumbnails/36.jpg)
![Page 37: Web2 week-7-user-centered](https://reader033.fdocuments.net/reader033/viewer/2022052906/5589b6bad8b42a23058b4604/html5/thumbnails/37.jpg)
![Page 38: Web2 week-7-user-centered](https://reader033.fdocuments.net/reader033/viewer/2022052906/5589b6bad8b42a23058b4604/html5/thumbnails/38.jpg)
![Page 39: Web2 week-7-user-centered](https://reader033.fdocuments.net/reader033/viewer/2022052906/5589b6bad8b42a23058b4604/html5/thumbnails/39.jpg)
User Centered Design (UCD)
![Page 40: Web2 week-7-user-centered](https://reader033.fdocuments.net/reader033/viewer/2022052906/5589b6bad8b42a23058b4604/html5/thumbnails/40.jpg)
Project 1: Group Crits
Is there a clear visual hierarcy?
Is it obvious what is clickable?
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
BASIC PRINCIPLE
Know your user, for they are not you.
![Page 41: Web2 week-7-user-centered](https://reader033.fdocuments.net/reader033/viewer/2022052906/5589b6bad8b42a23058b4604/html5/thumbnails/41.jpg)
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)
![Page 42: Web2 week-7-user-centered](https://reader033.fdocuments.net/reader033/viewer/2022052906/5589b6bad8b42a23058b4604/html5/thumbnails/42.jpg)
Procrustean Bed
![Page 43: Web2 week-7-user-centered](https://reader033.fdocuments.net/reader033/viewer/2022052906/5589b6bad8b42a23058b4604/html5/thumbnails/43.jpg)
![Page 44: Web2 week-7-user-centered](https://reader033.fdocuments.net/reader033/viewer/2022052906/5589b6bad8b42a23058b4604/html5/thumbnails/44.jpg)
![Page 45: Web2 week-7-user-centered](https://reader033.fdocuments.net/reader033/viewer/2022052906/5589b6bad8b42a23058b4604/html5/thumbnails/45.jpg)
![Page 46: Web2 week-7-user-centered](https://reader033.fdocuments.net/reader033/viewer/2022052906/5589b6bad8b42a23058b4604/html5/thumbnails/46.jpg)
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
![Page 47: Web2 week-7-user-centered](https://reader033.fdocuments.net/reader033/viewer/2022052906/5589b6bad8b42a23058b4604/html5/thumbnails/47.jpg)
There is plenty of room for ‘design’ in UCD
![Page 48: Web2 week-7-user-centered](https://reader033.fdocuments.net/reader033/viewer/2022052906/5589b6bad8b42a23058b4604/html5/thumbnails/48.jpg)
![Page 49: Web2 week-7-user-centered](https://reader033.fdocuments.net/reader033/viewer/2022052906/5589b6bad8b42a23058b4604/html5/thumbnails/49.jpg)
![Page 50: Web2 week-7-user-centered](https://reader033.fdocuments.net/reader033/viewer/2022052906/5589b6bad8b42a23058b4604/html5/thumbnails/50.jpg)
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.
Business-Centered Design
![Page 51: Web2 week-7-user-centered](https://reader033.fdocuments.net/reader033/viewer/2022052906/5589b6bad8b42a23058b4604/html5/thumbnails/51.jpg)
![Page 52: Web2 week-7-user-centered](https://reader033.fdocuments.net/reader033/viewer/2022052906/5589b6bad8b42a23058b4604/html5/thumbnails/52.jpg)
UCD in a new user context
![Page 54: Web2 week-7-user-centered](https://reader033.fdocuments.net/reader033/viewer/2022052906/5589b6bad8b42a23058b4604/html5/thumbnails/54.jpg)
![Page 55: Web2 week-7-user-centered](https://reader033.fdocuments.net/reader033/viewer/2022052906/5589b6bad8b42a23058b4604/html5/thumbnails/55.jpg)
persuasive transactional/service informational entertainment
![Page 56: Web2 week-7-user-centered](https://reader033.fdocuments.net/reader033/viewer/2022052906/5589b6bad8b42a23058b4604/html5/thumbnails/56.jpg)
“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"
![Page 57: Web2 week-7-user-centered](https://reader033.fdocuments.net/reader033/viewer/2022052906/5589b6bad8b42a23058b4604/html5/thumbnails/57.jpg)
![Page 58: Web2 week-7-user-centered](https://reader033.fdocuments.net/reader033/viewer/2022052906/5589b6bad8b42a23058b4604/html5/thumbnails/58.jpg)
![Page 59: Web2 week-7-user-centered](https://reader033.fdocuments.net/reader033/viewer/2022052906/5589b6bad8b42a23058b4604/html5/thumbnails/59.jpg)