art center interactive design 4 - #1 intro to ux
DESCRIPTION
Art Center Interactive Design 4 Lecture Slides #1 (week 1) Intro to User ExperienceTRANSCRIPT
![Page 1: Art Center Interactive Design 4 - #1 Intro to UX](https://reader030.vdocuments.us/reader030/viewer/2022020306/547ecc95b4af9fa0158b570f/html5/thumbnails/1.jpg)
Intro to UX
Art Center Interactive Design 4 | Week 1 | Joy Liu
![Page 2: Art Center Interactive Design 4 - #1 Intro to UX](https://reader030.vdocuments.us/reader030/viewer/2022020306/547ecc95b4af9fa0158b570f/html5/thumbnails/2.jpg)
User Experience at a glance
![Page 3: Art Center Interactive Design 4 - #1 Intro to UX](https://reader030.vdocuments.us/reader030/viewer/2022020306/547ecc95b4af9fa0158b570f/html5/thumbnails/3.jpg)
The Disciplines of User Experience Design by envis-precisely.com, based on Dan Saffer (2008)
![Page 4: Art Center Interactive Design 4 - #1 Intro to UX](https://reader030.vdocuments.us/reader030/viewer/2022020306/547ecc95b4af9fa0158b570f/html5/thumbnails/4.jpg)
The Disciplines of User Experience Design by envis-precisely.com, based on Dan Saffer (2008)
![Page 5: Art Center Interactive Design 4 - #1 Intro to UX](https://reader030.vdocuments.us/reader030/viewer/2022020306/547ecc95b4af9fa0158b570f/html5/thumbnails/5.jpg)
The Spectrum of User Experience Oliver Reichenstein
![Page 6: Art Center Interactive Design 4 - #1 Intro to UX](https://reader030.vdocuments.us/reader030/viewer/2022020306/547ecc95b4af9fa0158b570f/html5/thumbnails/6.jpg)
Design for the end-user what does it mean?
![Page 7: Art Center Interactive Design 4 - #1 Intro to UX](https://reader030.vdocuments.us/reader030/viewer/2022020306/547ecc95b4af9fa0158b570f/html5/thumbnails/7.jpg)
Clients
Stakeholders
Marketing Team
!
Developers
Quality Assurance
Fellow Designers
!
!
!
Customers
![Page 8: Art Center Interactive Design 4 - #1 Intro to UX](https://reader030.vdocuments.us/reader030/viewer/2022020306/547ecc95b4af9fa0158b570f/html5/thumbnails/8.jpg)
Clients
Stakeholders
Marketing Team
!
Developers
Quality Assurance
Fellow Designers
!
!
!
Customers
![Page 9: Art Center Interactive Design 4 - #1 Intro to UX](https://reader030.vdocuments.us/reader030/viewer/2022020306/547ecc95b4af9fa0158b570f/html5/thumbnails/9.jpg)
UX ≠ UI pretty design is not the solution
![Page 10: Art Center Interactive Design 4 - #1 Intro to UX](https://reader030.vdocuments.us/reader030/viewer/2022020306/547ecc95b4af9fa0158b570f/html5/thumbnails/10.jpg)
Roles of UX Information Architect Interaction Designer Visual Designer UX Designer Usability Analyst User Researcher Experience Strategist Persona Writer Content Strategist
![Page 11: Art Center Interactive Design 4 - #1 Intro to UX](https://reader030.vdocuments.us/reader030/viewer/2022020306/547ecc95b4af9fa0158b570f/html5/thumbnails/11.jpg)
UX is not UI by Erik Flowers
![Page 12: Art Center Interactive Design 4 - #1 Intro to UX](https://reader030.vdocuments.us/reader030/viewer/2022020306/547ecc95b4af9fa0158b570f/html5/thumbnails/12.jpg)
Form follows function Physically & digitally
![Page 13: Art Center Interactive Design 4 - #1 Intro to UX](https://reader030.vdocuments.us/reader030/viewer/2022020306/547ecc95b4af9fa0158b570f/html5/thumbnails/13.jpg)
What is useful?
![Page 14: Art Center Interactive Design 4 - #1 Intro to UX](https://reader030.vdocuments.us/reader030/viewer/2022020306/547ecc95b4af9fa0158b570f/html5/thumbnails/14.jpg)
Usability Quality of a user's experience when interacting with products or systems
![Page 15: Art Center Interactive Design 4 - #1 Intro to UX](https://reader030.vdocuments.us/reader030/viewer/2022020306/547ecc95b4af9fa0158b570f/html5/thumbnails/15.jpg)
http://www.amazon.com/AutoExec-Wheelmate-Steering-Attachable-Surface/dp/B00E1D1GY6#
AutoExec Wheelmate Steering Wheel Attachable Work Surface Tray
![Page 16: Art Center Interactive Design 4 - #1 Intro to UX](https://reader030.vdocuments.us/reader030/viewer/2022020306/547ecc95b4af9fa0158b570f/html5/thumbnails/16.jpg)
http://www.amazon.com/AutoExec-Wheelmate-Steering-Attachable-Surface/dp/B00E1D1GY6#
AutoExec Wheelmate Steering Wheel Attachable Work Surface Tray
![Page 17: Art Center Interactive Design 4 - #1 Intro to UX](https://reader030.vdocuments.us/reader030/viewer/2022020306/547ecc95b4af9fa0158b570f/html5/thumbnails/17.jpg)
http://www.amazon.com/AutoExec-Wheelmate-Steering-Attachable-Surface/dp/B00E1D1GY6#
AutoExec Wheelmate Steering Wheel Attachable Work Surface Tray
![Page 18: Art Center Interactive Design 4 - #1 Intro to UX](https://reader030.vdocuments.us/reader030/viewer/2022020306/547ecc95b4af9fa0158b570f/html5/thumbnails/18.jpg)
![Page 19: Art Center Interactive Design 4 - #1 Intro to UX](https://reader030.vdocuments.us/reader030/viewer/2022020306/547ecc95b4af9fa0158b570f/html5/thumbnails/19.jpg)
![Page 20: Art Center Interactive Design 4 - #1 Intro to UX](https://reader030.vdocuments.us/reader030/viewer/2022020306/547ecc95b4af9fa0158b570f/html5/thumbnails/20.jpg)
“Affordances Matters” by Geoff Teehan, 04/16/2014 https://medium.com/@gt/affordances-matter-cab064b40b4b
NOW HOW IT SHOULD BE
![Page 21: Art Center Interactive Design 4 - #1 Intro to UX](https://reader030.vdocuments.us/reader030/viewer/2022020306/547ecc95b4af9fa0158b570f/html5/thumbnails/21.jpg)
“Affordances Matters” by Geoff Teehan, 04/16/2014 https://medium.com/@gt/affordances-matter-cab064b40b4b
NOW HOW IT SHOULD BE
![Page 22: Art Center Interactive Design 4 - #1 Intro to UX](https://reader030.vdocuments.us/reader030/viewer/2022020306/547ecc95b4af9fa0158b570f/html5/thumbnails/22.jpg)
“Affordances Matters” by Geoff Teehan, 04/16/2014 https://medium.com/@gt/affordances-matter-cab064b40b4b
NOW HOW IT SHOULD BE
![Page 23: Art Center Interactive Design 4 - #1 Intro to UX](https://reader030.vdocuments.us/reader030/viewer/2022020306/547ecc95b4af9fa0158b570f/html5/thumbnails/23.jpg)
No such thing as reading the manual. Period.
![Page 24: Art Center Interactive Design 4 - #1 Intro to UX](https://reader030.vdocuments.us/reader030/viewer/2022020306/547ecc95b4af9fa0158b570f/html5/thumbnails/24.jpg)
!by Nielsen Norman Group, 2012.
Utility does it provide the features you need?
Usability how easy & pleasant these features are to use?
Useful = Utility + Usability
![Page 25: Art Center Interactive Design 4 - #1 Intro to UX](https://reader030.vdocuments.us/reader030/viewer/2022020306/547ecc95b4af9fa0158b570f/html5/thumbnails/25.jpg)
How do you get from LA to NY?
![Page 26: Art Center Interactive Design 4 - #1 Intro to UX](https://reader030.vdocuments.us/reader030/viewer/2022020306/547ecc95b4af9fa0158b570f/html5/thumbnails/26.jpg)
How do you get from LA to NY?
By foot?
![Page 27: Art Center Interactive Design 4 - #1 Intro to UX](https://reader030.vdocuments.us/reader030/viewer/2022020306/547ecc95b4af9fa0158b570f/html5/thumbnails/27.jpg)
How do you get from LA to NY?
By foot?By skateboard?
![Page 28: Art Center Interactive Design 4 - #1 Intro to UX](https://reader030.vdocuments.us/reader030/viewer/2022020306/547ecc95b4af9fa0158b570f/html5/thumbnails/28.jpg)
How do you get from LA to NY?
By foot?By skateboard?By bicycle?
![Page 29: Art Center Interactive Design 4 - #1 Intro to UX](https://reader030.vdocuments.us/reader030/viewer/2022020306/547ecc95b4af9fa0158b570f/html5/thumbnails/29.jpg)
How do you get from LA to NY?
By foot?By skateboard?By bicycle?By bus?
![Page 30: Art Center Interactive Design 4 - #1 Intro to UX](https://reader030.vdocuments.us/reader030/viewer/2022020306/547ecc95b4af9fa0158b570f/html5/thumbnails/30.jpg)
How do you get from LA to NY?
By foot?By skateboard?By bicycle?By bus?By a beat-up Corolla?
![Page 31: Art Center Interactive Design 4 - #1 Intro to UX](https://reader030.vdocuments.us/reader030/viewer/2022020306/547ecc95b4af9fa0158b570f/html5/thumbnails/31.jpg)
How do you get from LA to NY?
By foot?By skateboard?By bicycle?By bus?By a beat-up Corolla?By a Porsche 911?
![Page 32: Art Center Interactive Design 4 - #1 Intro to UX](https://reader030.vdocuments.us/reader030/viewer/2022020306/547ecc95b4af9fa0158b570f/html5/thumbnails/32.jpg)
How do you get from LA to NY?
By foot?By skateboard?By bicycle?By bus?By a beat-up Corolla?By a Porsche 911?By American Airline economy seat?
![Page 33: Art Center Interactive Design 4 - #1 Intro to UX](https://reader030.vdocuments.us/reader030/viewer/2022020306/547ecc95b4af9fa0158b570f/html5/thumbnails/33.jpg)
How do you get from LA to NY?
By foot?By skateboard?By bicycle?By bus?By a beat-up Corolla?By a Porsche 911?By American Airline economy seat?By private 6-person jet?
![Page 34: Art Center Interactive Design 4 - #1 Intro to UX](https://reader030.vdocuments.us/reader030/viewer/2022020306/547ecc95b4af9fa0158b570f/html5/thumbnails/34.jpg)
How do you get from LA to NY?
By foot?By skateboard?By bicycle?By bus?By a beat-up Corolla?By a Porsche 911?By American Airline economy seat?By private 6-person jet?By Virgin Galactic?
![Page 35: Art Center Interactive Design 4 - #1 Intro to UX](https://reader030.vdocuments.us/reader030/viewer/2022020306/547ecc95b4af9fa0158b570f/html5/thumbnails/35.jpg)
How do you get from LA to NY?
By foot?By skateboard?By bicycle?By bus?By a beat-up Corolla?By a Porsche 911?By American Airline economy seat?By private 6-person jet?By Virgin Galactic?By transporter via USS Enterprise?
![Page 36: Art Center Interactive Design 4 - #1 Intro to UX](https://reader030.vdocuments.us/reader030/viewer/2022020306/547ecc95b4af9fa0158b570f/html5/thumbnails/36.jpg)
Elements of UX the underlying relationships
![Page 38: Art Center Interactive Design 4 - #1 Intro to UX](https://reader030.vdocuments.us/reader030/viewer/2022020306/547ecc95b4af9fa0158b570f/html5/thumbnails/38.jpg)
!by Jesse James Garrett, 2000.
![Page 39: Art Center Interactive Design 4 - #1 Intro to UX](https://reader030.vdocuments.us/reader030/viewer/2022020306/547ecc95b4af9fa0158b570f/html5/thumbnails/39.jpg)
!by Jeffery Callender and Peter Morville
![Page 40: Art Center Interactive Design 4 - #1 Intro to UX](https://reader030.vdocuments.us/reader030/viewer/2022020306/547ecc95b4af9fa0158b570f/html5/thumbnails/40.jpg)
Why documentation? http://theoatmeal.com/comics/design_hell
![Page 41: Art Center Interactive Design 4 - #1 Intro to UX](https://reader030.vdocuments.us/reader030/viewer/2022020306/547ecc95b4af9fa0158b570f/html5/thumbnails/41.jpg)
Mobile UX battle of screens
![Page 42: Art Center Interactive Design 4 - #1 Intro to UX](https://reader030.vdocuments.us/reader030/viewer/2022020306/547ecc95b4af9fa0158b570f/html5/thumbnails/42.jpg)
![Page 43: Art Center Interactive Design 4 - #1 Intro to UX](https://reader030.vdocuments.us/reader030/viewer/2022020306/547ecc95b4af9fa0158b570f/html5/thumbnails/43.jpg)
![Page 44: Art Center Interactive Design 4 - #1 Intro to UX](https://reader030.vdocuments.us/reader030/viewer/2022020306/547ecc95b4af9fa0158b570f/html5/thumbnails/44.jpg)
![Page 45: Art Center Interactive Design 4 - #1 Intro to UX](https://reader030.vdocuments.us/reader030/viewer/2022020306/547ecc95b4af9fa0158b570f/html5/thumbnails/45.jpg)
How is mobile different? where and when? dimensions? bandwidth and connectivity? behavior and emotion? human factors? circumstances of usage?
![Page 46: Art Center Interactive Design 4 - #1 Intro to UX](https://reader030.vdocuments.us/reader030/viewer/2022020306/547ecc95b4af9fa0158b570f/html5/thumbnails/46.jpg)
SAT Study Tool for 10th Grader where and when? dimensions? bandwidth and connectivity? behavior and emotion? human factors? circumstances of usage?
![Page 47: Art Center Interactive Design 4 - #1 Intro to UX](https://reader030.vdocuments.us/reader030/viewer/2022020306/547ecc95b4af9fa0158b570f/html5/thumbnails/47.jpg)
Carma Sutra Tutorial for Golden-Agers where and when? dimensions? bandwidth and connectivity? behavior and emotion? human factors? circumstances of usage?
![Page 48: Art Center Interactive Design 4 - #1 Intro to UX](https://reader030.vdocuments.us/reader030/viewer/2022020306/547ecc95b4af9fa0158b570f/html5/thumbnails/48.jpg)
User Engagement
Source: Google/Ipsos/Sterling, 2012
![Page 49: Art Center Interactive Design 4 - #1 Intro to UX](https://reader030.vdocuments.us/reader030/viewer/2022020306/547ecc95b4af9fa0158b570f/html5/thumbnails/49.jpg)
Native vs. Web Native / Web / Hybrid
![Page 50: Art Center Interactive Design 4 - #1 Intro to UX](https://reader030.vdocuments.us/reader030/viewer/2022020306/547ecc95b4af9fa0158b570f/html5/thumbnails/50.jpg)
Final Project Native iOS app redesign
![Page 51: Art Center Interactive Design 4 - #1 Intro to UX](https://reader030.vdocuments.us/reader030/viewer/2022020306/547ecc95b4af9fa0158b570f/html5/thumbnails/51.jpg)
Imagine, this is your start-up. !
This is something you are passionate about, you think about it everyday, you are proud of the idea. !
You’ve borrowed and saved up $20,000 to kickstart your product. For the next 14 weeks, you will design and create a clickable prototype. !
On week 14, you will pitch your idea to a group of venture capitalists and compete for $500,000 in cash to help you launch the idea to market.
![Page 52: Art Center Interactive Design 4 - #1 Intro to UX](https://reader030.vdocuments.us/reader030/viewer/2022020306/547ecc95b4af9fa0158b570f/html5/thumbnails/52.jpg)
1. Select 3 iOS apps in the App Store (less than 5 stars, no games) !
2. Take screenshots of all the sections in each app !
3. Annotate areas in need of improvement !
4. Write an elevator pitch for each app What is your product? Who is your market? Why do they care? What’s in it for them? Why is your product different from your competitors?