Slide 1

Slide 1 text

ATEC 3363 Cassini Nazir Basic Interaction Design WEEK 1 Introductions Syllabus review Lecture/discussion: Interaction Design Assignment Review

Slide 2

Slide 2 text

WEEK 1 WEEK 2 WEEK 3 WEEK 4 WEEK 5 WEEK 6 WEEK 7 WEEK 8 WEEK 9 WEEK 10 WEEK 11 WEEK 12 WEEK 13 WEEK 14 WEEK 15 IxD COURSE TIMELINE Hi-Fi Prototypes Final Exam Preparation Lo-Fi Prototypes GUI Script and Storyboard User Needs Research Project Phase I: Discovery Project Phase II: Innovation Understanding Experience IxD History, Practice and Methods IxD Design Principles Form Teams IxD Case Studies IxD Foundation

Slide 3

Slide 3 text

WEEK 1 WEEK 2 WEEK 3 WEEK 4 WEEK 5 WEEK 6 WEEK 7 WEEK 8 WEEK 9 WEEK 10 WEEK 11 WEEK 12 WEEK 13 WEEK 14 WEEK 15 IxD COURSE TIMELINE Understanding Experience Hi-Fi Prototypes Final Exam Preparation Lo-Fi Prototypes GUI Script and Storyboard User Needs Research Project Phase I: Discovery Project Phase II: Innovation IxD History, Practice and Methods IxD Design Principles Form Teams IxD Case Studies IxD Foundation Course Syllabus What is IxD? Design Hierarchy of Needs *

Slide 4

Slide 4 text

WEEK 1 WEEK 2 WEEK 3 WEEK 4 WEEK 5 WEEK 6 WEEK 7 WEEK 8 WEEK 9 WEEK 10 WEEK 11 WEEK 12 WEEK 13 WEEK 14 WEEK 15 IxD COURSE TIMELINE Understanding Experience Hi-Fi Prototypes Final Exam Preparation Lo-Fi Prototypes GUI Script and Storyboard User Needs Research Project Phase I: Discovery IxD Design Principles Form Teams IxD Case Studies IxD Foundation History and Principles Further Definition Seven Stages of Action Exercise IxD History, Practice and Methods Project Phase II: Innovation

Slide 5

Slide 5 text

WEEK 1 WEEK 2 WEEK 3 WEEK 4 WEEK 5 WEEK 6 WEEK 7 WEEK 8 WEEK 9 WEEK 10 WEEK 11 WEEK 12 WEEK 13 WEEK 14 WEEK 15 IxD COURSE TIMELINE Understanding Experience Hi-Fi Prototypes Final Exam Preparation Lo-Fi Prototypes GUI Script and Storyboard User Needs Research Project Phase I: Discovery Form Teams IxD Case Studies IxD Foundation GUI Design Principles Human Interface Guidelines Seductive Interaction Design UI Patterns IxD History, Practice and Methods IxD Design Principles Project Phase II: Innovation

Slide 6

Slide 6 text

WEEK 1 WEEK 2 WEEK 3 WEEK 4 WEEK 5 WEEK 6 WEEK 7 WEEK 8 WEEK 9 WEEK 10 WEEK 11 WEEK 12 WEEK 13 WEEK 14 WEEK 15 IxD COURSE TIMELINE Understanding Experience Hi-Fi Prototypes Final Exam Preparation Lo-Fi Prototypes GUI Script and Storyboard User Needs Research Project Phase I: Discovery Form Teams IxD Foundation IDEO GE Innovation Lab Mozilla frog design Cooper/Hewitt Stone Yamashita Partners Student-research IxD History, Practice and Methods IxD Design Principles IxD Case Studies Project Phase II: Innovation

Slide 7

Slide 7 text

WEEK 1 WEEK 2 WEEK 3 WEEK 4 WEEK 5 WEEK 6 WEEK 7 WEEK 8 WEEK 9 WEEK 10 WEEK 11 WEEK 12 WEEK 13 WEEK 14 WEEK 15 IxD COURSE TIMELINE Understanding Experience Hi-Fi Prototypes Final Exam Preparation Lo-Fi Prototypes GUI Script and Storyboard User Needs Research IxD Foundation Organize Team Choose Research Category Assign Roles and Responsibilities IxD History, Practice and Methods IxD Design Principles IxD Case Studies Project Phase I: Discovery Form Teams Project Phase II: Innovation

Slide 8

Slide 8 text

WEEK 1 WEEK 2 WEEK 3 WEEK 4 WEEK 5 WEEK 6 WEEK 7 WEEK 8 WEEK 9 WEEK 10 WEEK 11 WEEK 12 WEEK 13 WEEK 14 WEEK 15 IxD COURSE TIMELINE Understanding Experience Hi-Fi Prototypes Final Exam Preparation Lo-Fi Prototypes GUI Script and Storyboard IxD Foundation Assimilate Research Build Needs List IxD History, Practice and Methods IxD Design Principles IxD Case Studies Project Phase I: Discovery Form Teams User Needs Research Project Phase II: Innovation

Slide 9

Slide 9 text

WEEK 1 WEEK 2 WEEK 3 WEEK 4 WEEK 5 WEEK 6 WEEK 7 WEEK 8 WEEK 9 WEEK 10 WEEK 11 WEEK 12 WEEK 13 WEEK 14 WEEK 15 IxD COURSE TIMELINE Understanding Experience Hi-Fi Prototypes Final Exam Preparation Lo-Fi Prototypes IxD Foundation Compare findings Consensus on needs Develop use scenario IxD History, Practice and Methods IxD Design Principles IxD Case Studies Project Phase I: Discovery Form Teams User Needs Research GUI Script and Storyboard Project Phase II: Innovation

Slide 10

Slide 10 text

WEEK 1 WEEK 2 WEEK 3 WEEK 4 WEEK 5 WEEK 6 WEEK 7 WEEK 8 WEEK 9 WEEK 10 WEEK 11 WEEK 12 WEEK 13 WEEK 14 WEEK 15 IxD COURSE TIMELINE Understanding Experience Hi-Fi Prototypes Final Exam Preparation IxD Foundation Low-fi screen prototypes Setup for user tests Produce test reports IxD History, Practice and Methods IxD Design Principles IxD Case Studies Project Phase I: Discovery Form Teams User Needs Research GUI Script and Storyboard Lo-Fi Prototypes Project Phase II: Innovation

Slide 11

Slide 11 text

WEEK 1 WEEK 2 WEEK 3 WEEK 4 WEEK 5 WEEK 6 WEEK 7 WEEK 8 WEEK 9 WEEK 10 WEEK 11 WEEK 12 WEEK 13 WEEK 14 WEEK 15 IxD COURSE TIMELINE Understanding Experience Final Exam Preparation IxD Foundation Start final screen art Plan demonstration IxD History, Practice and Methods IxD Design Principles IxD Case Studies Project Phase I: Discovery Form Teams User Needs Research GUI Script and Storyboard Lo-Fi Prototypes Project Phase II: Innovation Hi-Fi Prototypes

Slide 12

Slide 12 text

WEEK 1 WEEK 2 WEEK 3 WEEK 4 WEEK 5 WEEK 6 WEEK 7 WEEK 8 WEEK 9 WEEK 10 WEEK 11 WEEK 12 WEEK 13 WEEK 14 WEEK 15 IxD COURSE TIMELINE Understanding Experience IxD Foundation Finish final screen art Gather presentation materials Produce report and slide deck Rehearse IxD History, Practice and Methods IxD Design Principles IxD Case Studies Project Phase I: Discovery Form Teams User Needs Research GUI Script and Storyboard Lo-Fi Prototypes Project Phase II: Innovation Hi-Fi Prototypes Final Exam Preparation

Slide 13

Slide 13 text

WEEK 1 WEEK 2 WEEK 3 WEEK 4 WEEK 5 WEEK 6 WEEK 7 WEEK 8 WEEK 9 WEEK 10 WEEK 11 WEEK 12 WEEK 13 WEEK 14 WEEK 15 IxD COURSE TIMELINE Hi-Fi Prototypes Final Exam Preparation Lo-Fi Prototypes GUI Script and Storyboard User Needs Research Project Phase I: Discovery Project Phase II: Innovation Understanding Experience IxD History, Practice and Methods IxD Design Principles Form Teams IxD Case Studies IxD Foundation

Slide 14

Slide 14 text

INTERACTION DESIGN CLASS Cassini Nazir

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

INTERACTION DESIGN CLASS Cassini Nazir Book Review extra credit

Slide 17

Slide 17 text

TANGRAMS ࣣ޼൘

Slide 18

Slide 18 text

TANGRAMS ࣣ޼൘

Slide 19

Slide 19 text

TANGRAMS ࣣ޼൘

Slide 20

Slide 20 text

TANGRAMS ࣣ޼൘

Slide 21

Slide 21 text

TANGRAMS ࣣ޼൘

Slide 22

Slide 22 text

TANGRAMS ࣣ޼൘

Slide 23

Slide 23 text

Interaction design is about ...

Slide 24

Slide 24 text

Interaction design is about user experiences.

Slide 25

Slide 25 text

User Experiences Digital Tangible Individual Social

Slide 26

Slide 26 text

User Experiences Digital Tangible Individual Social Puma’s Clever Little Bag Unboxing iPhone 5 A door handle Texting on a mobile phone Searching an online archive Customer service phone call Reading an article online Going to a party

Slide 27

Slide 27 text

User Experiences Digital Tangible Individual Social This course focuses on digital experiences.

Slide 28

Slide 28 text

youtu.be/N6hCwjwzUHg

Slide 29

Slide 29 text

youtu.be/757MVI-J5cs

Slide 30

Slide 30 text

youtu.be/WIKM732oEek

Slide 31

Slide 31 text

Technology Design Business UX Visual Design Development Business Plan Prototyping Release Candidate Business Strategy Styleguide Interface Product Communication Performance Simplicity Consistency Brand Design Market Comm Information Design Backend Process Interaction Design Usability Engineering Surface Design Information Architecture Frontend Processes Oliver Reichenstein, Information Architects http://bit.ly/NvDpFL

Slide 32

Slide 32 text

Technology Design Business UX Visual Design Development Business Plan Prototyping Release Candidate Business Strategy Styleguide Interface Product Communication Performance Simplicity Consistency Brand Design Market Comm Information Design Backend Process Interaction Design Usability Engineering Surface Design Information Architecture Frontend Processes Oliver Reichenstein, Information Architects http://bit.ly/NvDpFL Computer Science hardware and software development

Slide 33

Slide 33 text

Oliver Reichenstein, Information Architects http://bit.ly/NvDpFL Computer Science Engineering product development and realization Technology Design Business UX Visual Design Development Business Plan Prototyping Release Candidate Business Strategy Styleguide Interface Product Communication Performance Simplicity Consistency Brand Design Market Comm Information Design Backend Process Interaction Design Usability Engineering Surface Design Information Architecture Frontend Processes

Slide 34

Slide 34 text

Oliver Reichenstein, Information Architects http://bit.ly/NvDpFL Computer Science Engineering Ergonomics study of human engineering Technology Design Business UX Visual Design Development Business Plan Prototyping Release Candidate Business Strategy Styleguide Interface Product Communication Performance Simplicity Consistency Brand Design Market Comm Information Design Backend Process Interaction Design Usability Engineering Surface Design Information Architecture Frontend Processes

Slide 35

Slide 35 text

Technology Design Business UX Visual Design Development Business Plan Prototyping Release Candidate Business Strategy Styleguide Interface Product Communication Performance Simplicity Consistency Brand Design Market Comm Information Design Backend Process Interaction Design Usability Engineering Surface Design Information Architecture Frontend Processes Oliver Reichenstein, Information Architects http://bit.ly/NvDpFL Computer Science Engineering Ergonomics Fine Art Illustration general aesthetic visualization

Slide 36

Slide 36 text

Technology Design Business UX Visual Design Development Business Plan Prototyping Release Candidate Business Strategy Styleguide Interface Product Communication Performance Simplicity Consistency Brand Design Market Comm Information Design Backend Process Interaction Design Usability Engineering Surface Design Information Architecture Frontend Processes Oliver Reichenstein, Information Architects http://bit.ly/NvDpFL Computer Science Engineering Ergonomics Fine Art Illustration Graphic Design general aesthetic visualization

Slide 37

Slide 37 text

Technology Design Business UX Visual Design Development Business Plan Prototyping Release Candidate Business Strategy Styleguide Interface Product Communication Performance Simplicity Consistency Brand Design Market Comm Information Design Backend Process Interaction Design Usability Engineering Surface Design Information Architecture Frontend Processes Oliver Reichenstein, Information Architects http://bit.ly/NvDpFL Computer Science Engineering Ergonomics Fine Art Illustration Graphic Design Industrial Design controls and product aesthetics

Slide 38

Slide 38 text

Technology Design Business UX Visual Design Development Business Plan Prototyping Release Candidate Business Strategy Styleguide Interface Product Communication Performance Simplicity Consistency Brand Design Market Comm Information Design Backend Process Interaction Design Usability Engineering Surface Design Information Architecture Frontend Processes Oliver Reichenstein, Information Architects http://bit.ly/NvDpFL Computer Science Engineering Ergonomics Fine Art Illustration Graphic Design Industrial Design Social Informatics socializing technology systems

Slide 39

Slide 39 text

Technology Design Business UX Visual Design Development Business Plan Prototyping Release Candidate Business Strategy Styleguide Interface Product Communication Performance Simplicity Consistency Brand Design Market Comm Information Design Backend Process Interaction Design Usability Engineering Surface Design Information Architecture Frontend Processes Oliver Reichenstein, Information Architects http://bit.ly/NvDpFL Computer Science Engineering Ergonomics Fine Art Illustration Graphic Design Industrial Design Social Informatics Information Design information architecture

Slide 40

Slide 40 text

Technology Design Business UX Visual Design Development Business Plan Prototyping Release Candidate Business Strategy Styleguide Interface Product Communication Performance Simplicity Consistency Brand Design Market Comm Information Design Backend Process Interaction Design Usability Engineering Surface Design Information Architecture Frontend Processes Oliver Reichenstein, Information Architects http://bit.ly/NvDpFL Computer Science Engineering Ergonomics Fine Art Illustration Graphic Design Industrial Design Social Informatics Information Design Psychology cognitive dynamics in communication

Slide 41

Slide 41 text

Technology Design Business UX Visual Design Development Business Plan Prototyping Release Candidate Business Strategy Styleguide Interface Product Communication Performance Simplicity Consistency Brand Design Market Comm Information Design Backend Process Interaction Design Usability Engineering Surface Design Information Architecture Frontend Processes Oliver Reichenstein, Information Architects http://bit.ly/NvDpFL Computer Science Engineering Ergonomics Fine Art Illustration Graphic Design Industrial Design Social Informatics Information Design Psychology Social Sciences social dynamics in communication

Slide 42

Slide 42 text

Technology Design Business UX Visual Design Development Business Plan Prototyping Release Candidate Business Strategy Styleguide Interface Product Communication Performance Simplicity Consistency Brand Design Market Comm Information Design Backend Process Interaction Design Usability Engineering Surface Design Information Architecture Frontend Processes Oliver Reichenstein, Information Architects http://bit.ly/NvDpFL Computer Science Engineering Ergonomics Fine Art Illustration Graphic Design Industrial Design Social Informatics Information Design Psychology Social Sciences Web Design dynamic network interaction

Slide 43

Slide 43 text

Technology Design Business UX Visual Design Development Business Plan Prototyping Release Candidate Business Strategy Styleguide Interface Product Communication Performance Simplicity Consistency Brand Design Market Comm Information Design Backend Process Interaction Design Usability Engineering Surface Design Information Architecture Frontend Processes Oliver Reichenstein, Information Architects http://bit.ly/NvDpFL Computer Science Engineering Ergonomics Fine Art Illustration Graphic Design Industrial Design Social Informatics Information Design Psychology Social Sciences Web Design No one person will be an expert in all disciplines

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

youtu.be/WRuWKpfaRK8

Slide 47

Slide 47 text

youtu.be/hnSPmcZjEqs

Slide 48

Slide 48 text

USER EXPERIENCE HIERARCHY of NEEDS MEANINGFUL PLEASURABLE CONVENIENT USABLE RELIABLE FUNCTIONAL works as intended is available and accurate can be used without difficulty super easy to use, works like I think memorable experience worth sharing has personal significance

Slide 49

Slide 49 text

Assignment 1 Find examples of each rung of the User Experience Hierarchy of Needs.