6.148.scripts.mit.edu6.148.scripts.mit.edu/2017/pages/lectures/WEBday1_uiux.pdf · User Experience...
Transcript of 6.148.scripts.mit.edu6.148.scripts.mit.edu/2017/pages/lectures/WEBday1_uiux.pdf · User Experience...
![Page 1: 6.148.scripts.mit.edu6.148.scripts.mit.edu/2017/pages/lectures/WEBday1_uiux.pdf · User Experience (UX) research usability testing sketches wireframes UI & UX User Interface (UI)](https://reader030.fdocuments.us/reader030/viewer/2022040117/5e1172d4f0c5f8086942f1b9/html5/thumbnails/1.jpg)
Web Design & UI/UX
6.148Yolanda Zhou
go.6148.io/uiux
![Page 2: 6.148.scripts.mit.edu6.148.scripts.mit.edu/2017/pages/lectures/WEBday1_uiux.pdf · User Experience (UX) research usability testing sketches wireframes UI & UX User Interface (UI)](https://reader030.fdocuments.us/reader030/viewer/2022040117/5e1172d4f0c5f8086942f1b9/html5/thumbnails/2.jpg)
User Interface: the design of the interface between the user and the product
User Experience: the user's overall experience of using the product
UI & UX
![Page 3: 6.148.scripts.mit.edu6.148.scripts.mit.edu/2017/pages/lectures/WEBday1_uiux.pdf · User Experience (UX) research usability testing sketches wireframes UI & UX User Interface (UI)](https://reader030.fdocuments.us/reader030/viewer/2022040117/5e1172d4f0c5f8086942f1b9/html5/thumbnails/3.jpg)
UI UX
![Page 4: 6.148.scripts.mit.edu6.148.scripts.mit.edu/2017/pages/lectures/WEBday1_uiux.pdf · User Experience (UX) research usability testing sketches wireframes UI & UX User Interface (UI)](https://reader030.fdocuments.us/reader030/viewer/2022040117/5e1172d4f0c5f8086942f1b9/html5/thumbnails/4.jpg)
User Experience (UX)
researchusability testingsketcheswireframes
UI & UX
User Interface (UI)
layoutvisual designbrandingHTML/CSS
![Page 5: 6.148.scripts.mit.edu6.148.scripts.mit.edu/2017/pages/lectures/WEBday1_uiux.pdf · User Experience (UX) research usability testing sketches wireframes UI & UX User Interface (UI)](https://reader030.fdocuments.us/reader030/viewer/2022040117/5e1172d4f0c5f8086942f1b9/html5/thumbnails/5.jpg)
UI UX
![Page 6: 6.148.scripts.mit.edu6.148.scripts.mit.edu/2017/pages/lectures/WEBday1_uiux.pdf · User Experience (UX) research usability testing sketches wireframes UI & UX User Interface (UI)](https://reader030.fdocuments.us/reader030/viewer/2022040117/5e1172d4f0c5f8086942f1b9/html5/thumbnails/6.jpg)
Usabilityit’s really important
![Page 7: 6.148.scripts.mit.edu6.148.scripts.mit.edu/2017/pages/lectures/WEBday1_uiux.pdf · User Experience (UX) research usability testing sketches wireframes UI & UX User Interface (UI)](https://reader030.fdocuments.us/reader030/viewer/2022040117/5e1172d4f0c5f8086942f1b9/html5/thumbnails/7.jpg)
If your users see...
THEY LEAVE
![Page 8: 6.148.scripts.mit.edu6.148.scripts.mit.edu/2017/pages/lectures/WEBday1_uiux.pdf · User Experience (UX) research usability testing sketches wireframes UI & UX User Interface (UI)](https://reader030.fdocuments.us/reader030/viewer/2022040117/5e1172d4f0c5f8086942f1b9/html5/thumbnails/8.jpg)
Ok… so what should I do then?
elements of good usability
![Page 9: 6.148.scripts.mit.edu6.148.scripts.mit.edu/2017/pages/lectures/WEBday1_uiux.pdf · User Experience (UX) research usability testing sketches wireframes UI & UX User Interface (UI)](https://reader030.fdocuments.us/reader030/viewer/2022040117/5e1172d4f0c5f8086942f1b9/html5/thumbnails/9.jpg)
LearnabilityAbility of an interface to allow users to
accomplish tasks on the first try
![Page 10: 6.148.scripts.mit.edu6.148.scripts.mit.edu/2017/pages/lectures/WEBday1_uiux.pdf · User Experience (UX) research usability testing sketches wireframes UI & UX User Interface (UI)](https://reader030.fdocuments.us/reader030/viewer/2022040117/5e1172d4f0c5f8086942f1b9/html5/thumbnails/10.jpg)
What do I do?
![Page 11: 6.148.scripts.mit.edu6.148.scripts.mit.edu/2017/pages/lectures/WEBday1_uiux.pdf · User Experience (UX) research usability testing sketches wireframes UI & UX User Interface (UI)](https://reader030.fdocuments.us/reader030/viewer/2022040117/5e1172d4f0c5f8086942f1b9/html5/thumbnails/11.jpg)
Did I do it right?
![Page 12: 6.148.scripts.mit.edu6.148.scripts.mit.edu/2017/pages/lectures/WEBday1_uiux.pdf · User Experience (UX) research usability testing sketches wireframes UI & UX User Interface (UI)](https://reader030.fdocuments.us/reader030/viewer/2022040117/5e1172d4f0c5f8086942f1b9/html5/thumbnails/12.jpg)
Is this what I think it should be?
![Page 13: 6.148.scripts.mit.edu6.148.scripts.mit.edu/2017/pages/lectures/WEBday1_uiux.pdf · User Experience (UX) research usability testing sketches wireframes UI & UX User Interface (UI)](https://reader030.fdocuments.us/reader030/viewer/2022040117/5e1172d4f0c5f8086942f1b9/html5/thumbnails/13.jpg)
![Page 14: 6.148.scripts.mit.edu6.148.scripts.mit.edu/2017/pages/lectures/WEBday1_uiux.pdf · User Experience (UX) research usability testing sketches wireframes UI & UX User Interface (UI)](https://reader030.fdocuments.us/reader030/viewer/2022040117/5e1172d4f0c5f8086942f1b9/html5/thumbnails/14.jpg)
EfficiencyThe speed at which tasks can be
completed once learned
![Page 15: 6.148.scripts.mit.edu6.148.scripts.mit.edu/2017/pages/lectures/WEBday1_uiux.pdf · User Experience (UX) research usability testing sketches wireframes UI & UX User Interface (UI)](https://reader030.fdocuments.us/reader030/viewer/2022040117/5e1172d4f0c5f8086942f1b9/html5/thumbnails/15.jpg)
The faster the better
![Page 16: 6.148.scripts.mit.edu6.148.scripts.mit.edu/2017/pages/lectures/WEBday1_uiux.pdf · User Experience (UX) research usability testing sketches wireframes UI & UX User Interface (UI)](https://reader030.fdocuments.us/reader030/viewer/2022040117/5e1172d4f0c5f8086942f1b9/html5/thumbnails/16.jpg)
The less words the better
Jobs Employment Opportunities
![Page 17: 6.148.scripts.mit.edu6.148.scripts.mit.edu/2017/pages/lectures/WEBday1_uiux.pdf · User Experience (UX) research usability testing sketches wireframes UI & UX User Interface (UI)](https://reader030.fdocuments.us/reader030/viewer/2022040117/5e1172d4f0c5f8086942f1b9/html5/thumbnails/17.jpg)
The less thinking the better
Hmm. Pretty busy. Where
should I start?
Hmm. Why did they call it
that?
Can I click on that?
Is that the navigation? Or is that it over there?
Why did they put that there?
Those two links seem like they’re the same thing. Are they really?
![Page 18: 6.148.scripts.mit.edu6.148.scripts.mit.edu/2017/pages/lectures/WEBday1_uiux.pdf · User Experience (UX) research usability testing sketches wireframes UI & UX User Interface (UI)](https://reader030.fdocuments.us/reader030/viewer/2022040117/5e1172d4f0c5f8086942f1b9/html5/thumbnails/18.jpg)
The less thinking the better
![Page 19: 6.148.scripts.mit.edu6.148.scripts.mit.edu/2017/pages/lectures/WEBday1_uiux.pdf · User Experience (UX) research usability testing sketches wireframes UI & UX User Interface (UI)](https://reader030.fdocuments.us/reader030/viewer/2022040117/5e1172d4f0c5f8086942f1b9/html5/thumbnails/19.jpg)
Error ToleranceHow well the product prevents errors and can help the user recover from mistakes
![Page 20: 6.148.scripts.mit.edu6.148.scripts.mit.edu/2017/pages/lectures/WEBday1_uiux.pdf · User Experience (UX) research usability testing sketches wireframes UI & UX User Interface (UI)](https://reader030.fdocuments.us/reader030/viewer/2022040117/5e1172d4f0c5f8086942f1b9/html5/thumbnails/20.jpg)
Make sure users know about bad things
![Page 21: 6.148.scripts.mit.edu6.148.scripts.mit.edu/2017/pages/lectures/WEBday1_uiux.pdf · User Experience (UX) research usability testing sketches wireframes UI & UX User Interface (UI)](https://reader030.fdocuments.us/reader030/viewer/2022040117/5e1172d4f0c5f8086942f1b9/html5/thumbnails/21.jpg)
Prevent errors before they happen
![Page 22: 6.148.scripts.mit.edu6.148.scripts.mit.edu/2017/pages/lectures/WEBday1_uiux.pdf · User Experience (UX) research usability testing sketches wireframes UI & UX User Interface (UI)](https://reader030.fdocuments.us/reader030/viewer/2022040117/5e1172d4f0c5f8086942f1b9/html5/thumbnails/22.jpg)
Make recovery easy
![Page 23: 6.148.scripts.mit.edu6.148.scripts.mit.edu/2017/pages/lectures/WEBday1_uiux.pdf · User Experience (UX) research usability testing sketches wireframes UI & UX User Interface (UI)](https://reader030.fdocuments.us/reader030/viewer/2022040117/5e1172d4f0c5f8086942f1b9/html5/thumbnails/23.jpg)
emotionGood design conveys
![Page 24: 6.148.scripts.mit.edu6.148.scripts.mit.edu/2017/pages/lectures/WEBday1_uiux.pdf · User Experience (UX) research usability testing sketches wireframes UI & UX User Interface (UI)](https://reader030.fdocuments.us/reader030/viewer/2022040117/5e1172d4f0c5f8086942f1b9/html5/thumbnails/24.jpg)
![Page 25: 6.148.scripts.mit.edu6.148.scripts.mit.edu/2017/pages/lectures/WEBday1_uiux.pdf · User Experience (UX) research usability testing sketches wireframes UI & UX User Interface (UI)](https://reader030.fdocuments.us/reader030/viewer/2022040117/5e1172d4f0c5f8086942f1b9/html5/thumbnails/25.jpg)
![Page 26: 6.148.scripts.mit.edu6.148.scripts.mit.edu/2017/pages/lectures/WEBday1_uiux.pdf · User Experience (UX) research usability testing sketches wireframes UI & UX User Interface (UI)](https://reader030.fdocuments.us/reader030/viewer/2022040117/5e1172d4f0c5f8086942f1b9/html5/thumbnails/26.jpg)
![Page 27: 6.148.scripts.mit.edu6.148.scripts.mit.edu/2017/pages/lectures/WEBday1_uiux.pdf · User Experience (UX) research usability testing sketches wireframes UI & UX User Interface (UI)](https://reader030.fdocuments.us/reader030/viewer/2022040117/5e1172d4f0c5f8086942f1b9/html5/thumbnails/27.jpg)
![Page 28: 6.148.scripts.mit.edu6.148.scripts.mit.edu/2017/pages/lectures/WEBday1_uiux.pdf · User Experience (UX) research usability testing sketches wireframes UI & UX User Interface (UI)](https://reader030.fdocuments.us/reader030/viewer/2022040117/5e1172d4f0c5f8086942f1b9/html5/thumbnails/28.jpg)
Let’s Actually Design
a quick intro to graphic/web design
![Page 29: 6.148.scripts.mit.edu6.148.scripts.mit.edu/2017/pages/lectures/WEBday1_uiux.pdf · User Experience (UX) research usability testing sketches wireframes UI & UX User Interface (UI)](https://reader030.fdocuments.us/reader030/viewer/2022040117/5e1172d4f0c5f8086942f1b9/html5/thumbnails/29.jpg)
Layouts
Follow standard layouts
![Page 30: 6.148.scripts.mit.edu6.148.scripts.mit.edu/2017/pages/lectures/WEBday1_uiux.pdf · User Experience (UX) research usability testing sketches wireframes UI & UX User Interface (UI)](https://reader030.fdocuments.us/reader030/viewer/2022040117/5e1172d4f0c5f8086942f1b9/html5/thumbnails/30.jpg)
Follow standard layouts
Use grids
Layouts
![Page 31: 6.148.scripts.mit.edu6.148.scripts.mit.edu/2017/pages/lectures/WEBday1_uiux.pdf · User Experience (UX) research usability testing sketches wireframes UI & UX User Interface (UI)](https://reader030.fdocuments.us/reader030/viewer/2022040117/5e1172d4f0c5f8086942f1b9/html5/thumbnails/31.jpg)
Follow standard layouts
Use grids
More whitespace
Layouts
![Page 32: 6.148.scripts.mit.edu6.148.scripts.mit.edu/2017/pages/lectures/WEBday1_uiux.pdf · User Experience (UX) research usability testing sketches wireframes UI & UX User Interface (UI)](https://reader030.fdocuments.us/reader030/viewer/2022040117/5e1172d4f0c5f8086942f1b9/html5/thumbnails/32.jpg)
![Page 33: 6.148.scripts.mit.edu6.148.scripts.mit.edu/2017/pages/lectures/WEBday1_uiux.pdf · User Experience (UX) research usability testing sketches wireframes UI & UX User Interface (UI)](https://reader030.fdocuments.us/reader030/viewer/2022040117/5e1172d4f0c5f8086942f1b9/html5/thumbnails/33.jpg)
![Page 34: 6.148.scripts.mit.edu6.148.scripts.mit.edu/2017/pages/lectures/WEBday1_uiux.pdf · User Experience (UX) research usability testing sketches wireframes UI & UX User Interface (UI)](https://reader030.fdocuments.us/reader030/viewer/2022040117/5e1172d4f0c5f8086942f1b9/html5/thumbnails/34.jpg)
Follow standard layouts
Use grids
More whitespace
Design responsively
Layouts
![Page 35: 6.148.scripts.mit.edu6.148.scripts.mit.edu/2017/pages/lectures/WEBday1_uiux.pdf · User Experience (UX) research usability testing sketches wireframes UI & UX User Interface (UI)](https://reader030.fdocuments.us/reader030/viewer/2022040117/5e1172d4f0c5f8086942f1b9/html5/thumbnails/35.jpg)
Colors
![Page 36: 6.148.scripts.mit.edu6.148.scripts.mit.edu/2017/pages/lectures/WEBday1_uiux.pdf · User Experience (UX) research usability testing sketches wireframes UI & UX User Interface (UI)](https://reader030.fdocuments.us/reader030/viewer/2022040117/5e1172d4f0c5f8086942f1b9/html5/thumbnails/36.jpg)
Colors represent emotions
Colors
![Page 37: 6.148.scripts.mit.edu6.148.scripts.mit.edu/2017/pages/lectures/WEBday1_uiux.pdf · User Experience (UX) research usability testing sketches wireframes UI & UX User Interface (UI)](https://reader030.fdocuments.us/reader030/viewer/2022040117/5e1172d4f0c5f8086942f1b9/html5/thumbnails/37.jpg)
Colors represent emotions
Use web friendly colors
Colors
![Page 38: 6.148.scripts.mit.edu6.148.scripts.mit.edu/2017/pages/lectures/WEBday1_uiux.pdf · User Experience (UX) research usability testing sketches wireframes UI & UX User Interface (UI)](https://reader030.fdocuments.us/reader030/viewer/2022040117/5e1172d4f0c5f8086942f1b9/html5/thumbnails/38.jpg)
Colors represent emotions
Use web friendly colors
Colors
Flat UI Colors
![Page 39: 6.148.scripts.mit.edu6.148.scripts.mit.edu/2017/pages/lectures/WEBday1_uiux.pdf · User Experience (UX) research usability testing sketches wireframes UI & UX User Interface (UI)](https://reader030.fdocuments.us/reader030/viewer/2022040117/5e1172d4f0c5f8086942f1b9/html5/thumbnails/39.jpg)
Colors represent emotions
Use web friendly colors
Colors
Material UI Colors
![Page 40: 6.148.scripts.mit.edu6.148.scripts.mit.edu/2017/pages/lectures/WEBday1_uiux.pdf · User Experience (UX) research usability testing sketches wireframes UI & UX User Interface (UI)](https://reader030.fdocuments.us/reader030/viewer/2022040117/5e1172d4f0c5f8086942f1b9/html5/thumbnails/40.jpg)
Colors represent emotions
Use web friendly colors
Generally don’t use more than 3 colors (besides black and white)
Colors
![Page 41: 6.148.scripts.mit.edu6.148.scripts.mit.edu/2017/pages/lectures/WEBday1_uiux.pdf · User Experience (UX) research usability testing sketches wireframes UI & UX User Interface (UI)](https://reader030.fdocuments.us/reader030/viewer/2022040117/5e1172d4f0c5f8086942f1b9/html5/thumbnails/41.jpg)
Colors represent emotions
Use web friendly colors
Generally don’t use more than 3 colors (besides black and white)
Tools:Adobe Color CCPalettonCoolors
Colors
![Page 42: 6.148.scripts.mit.edu6.148.scripts.mit.edu/2017/pages/lectures/WEBday1_uiux.pdf · User Experience (UX) research usability testing sketches wireframes UI & UX User Interface (UI)](https://reader030.fdocuments.us/reader030/viewer/2022040117/5e1172d4f0c5f8086942f1b9/html5/thumbnails/42.jpg)
Colors represent emotions
Use web friendly colors
Generally don’t use more than 3 colors
Don’t use red and green for contrast
Colors
![Page 43: 6.148.scripts.mit.edu6.148.scripts.mit.edu/2017/pages/lectures/WEBday1_uiux.pdf · User Experience (UX) research usability testing sketches wireframes UI & UX User Interface (UI)](https://reader030.fdocuments.us/reader030/viewer/2022040117/5e1172d4f0c5f8086942f1b9/html5/thumbnails/43.jpg)
Fonts also represent emotions
Fonts
![Page 44: 6.148.scripts.mit.edu6.148.scripts.mit.edu/2017/pages/lectures/WEBday1_uiux.pdf · User Experience (UX) research usability testing sketches wireframes UI & UX User Interface (UI)](https://reader030.fdocuments.us/reader030/viewer/2022040117/5e1172d4f0c5f8086942f1b9/html5/thumbnails/44.jpg)
Fonts also represent emotions
Serif: good for long text or traditional lookTimes New Roman, Garamond, Georgia
Fonts
San-serif: good for a more modern lookArial, Helvetica, Trebuchet MS, Verdana, Calibri
Script/Decorative: use sparingly and only for titlesDancing Script, Lobster, Amatic SC, Permanent Marker
![Page 45: 6.148.scripts.mit.edu6.148.scripts.mit.edu/2017/pages/lectures/WEBday1_uiux.pdf · User Experience (UX) research usability testing sketches wireframes UI & UX User Interface (UI)](https://reader030.fdocuments.us/reader030/viewer/2022040117/5e1172d4f0c5f8086942f1b9/html5/thumbnails/45.jpg)
![Page 46: 6.148.scripts.mit.edu6.148.scripts.mit.edu/2017/pages/lectures/WEBday1_uiux.pdf · User Experience (UX) research usability testing sketches wireframes UI & UX User Interface (UI)](https://reader030.fdocuments.us/reader030/viewer/2022040117/5e1172d4f0c5f8086942f1b9/html5/thumbnails/46.jpg)
![Page 47: 6.148.scripts.mit.edu6.148.scripts.mit.edu/2017/pages/lectures/WEBday1_uiux.pdf · User Experience (UX) research usability testing sketches wireframes UI & UX User Interface (UI)](https://reader030.fdocuments.us/reader030/viewer/2022040117/5e1172d4f0c5f8086942f1b9/html5/thumbnails/47.jpg)
![Page 48: 6.148.scripts.mit.edu6.148.scripts.mit.edu/2017/pages/lectures/WEBday1_uiux.pdf · User Experience (UX) research usability testing sketches wireframes UI & UX User Interface (UI)](https://reader030.fdocuments.us/reader030/viewer/2022040117/5e1172d4f0c5f8086942f1b9/html5/thumbnails/48.jpg)
![Page 49: 6.148.scripts.mit.edu6.148.scripts.mit.edu/2017/pages/lectures/WEBday1_uiux.pdf · User Experience (UX) research usability testing sketches wireframes UI & UX User Interface (UI)](https://reader030.fdocuments.us/reader030/viewer/2022040117/5e1172d4f0c5f8086942f1b9/html5/thumbnails/49.jpg)
Fonts also represent emotions
Don’t use more than 2 or 3 fonts in total
Fonts
![Page 50: 6.148.scripts.mit.edu6.148.scripts.mit.edu/2017/pages/lectures/WEBday1_uiux.pdf · User Experience (UX) research usability testing sketches wireframes UI & UX User Interface (UI)](https://reader030.fdocuments.us/reader030/viewer/2022040117/5e1172d4f0c5f8086942f1b9/html5/thumbnails/50.jpg)
Fonts also represent emotions
Don’t use more than 2 or 3 fonts in total
Before changing font, consider changing:
● Font weight● Font size● Color● Capitalization (all caps, small caps)● Letter spacing
Fonts
![Page 51: 6.148.scripts.mit.edu6.148.scripts.mit.edu/2017/pages/lectures/WEBday1_uiux.pdf · User Experience (UX) research usability testing sketches wireframes UI & UX User Interface (UI)](https://reader030.fdocuments.us/reader030/viewer/2022040117/5e1172d4f0c5f8086942f1b9/html5/thumbnails/51.jpg)
Try things
Copy elements on websites you like
Ask Friends
Actually Doing Things
![Page 52: 6.148.scripts.mit.edu6.148.scripts.mit.edu/2017/pages/lectures/WEBday1_uiux.pdf · User Experience (UX) research usability testing sketches wireframes UI & UX User Interface (UI)](https://reader030.fdocuments.us/reader030/viewer/2022040117/5e1172d4f0c5f8086942f1b9/html5/thumbnails/52.jpg)
Current Trends
![Page 53: 6.148.scripts.mit.edu6.148.scripts.mit.edu/2017/pages/lectures/WEBday1_uiux.pdf · User Experience (UX) research usability testing sketches wireframes UI & UX User Interface (UI)](https://reader030.fdocuments.us/reader030/viewer/2022040117/5e1172d4f0c5f8086942f1b9/html5/thumbnails/53.jpg)
Flat UI & Material Design
Current Trends
![Page 54: 6.148.scripts.mit.edu6.148.scripts.mit.edu/2017/pages/lectures/WEBday1_uiux.pdf · User Experience (UX) research usability testing sketches wireframes UI & UX User Interface (UI)](https://reader030.fdocuments.us/reader030/viewer/2022040117/5e1172d4f0c5f8086942f1b9/html5/thumbnails/54.jpg)
Flat UI & Material Design
Parallax Scrolling
Current Trends
![Page 55: 6.148.scripts.mit.edu6.148.scripts.mit.edu/2017/pages/lectures/WEBday1_uiux.pdf · User Experience (UX) research usability testing sketches wireframes UI & UX User Interface (UI)](https://reader030.fdocuments.us/reader030/viewer/2022040117/5e1172d4f0c5f8086942f1b9/html5/thumbnails/55.jpg)
Flat UI & Material Design
Parallax Scrolling
Current Trends
![Page 56: 6.148.scripts.mit.edu6.148.scripts.mit.edu/2017/pages/lectures/WEBday1_uiux.pdf · User Experience (UX) research usability testing sketches wireframes UI & UX User Interface (UI)](https://reader030.fdocuments.us/reader030/viewer/2022040117/5e1172d4f0c5f8086942f1b9/html5/thumbnails/56.jpg)
Flat UI & Material Design
Parallax Scrolling
Micro-animations
Current Trends
![Page 57: 6.148.scripts.mit.edu6.148.scripts.mit.edu/2017/pages/lectures/WEBday1_uiux.pdf · User Experience (UX) research usability testing sketches wireframes UI & UX User Interface (UI)](https://reader030.fdocuments.us/reader030/viewer/2022040117/5e1172d4f0c5f8086942f1b9/html5/thumbnails/57.jpg)
Complete Environment Setup
Up Next...