COMP6176 Human and Computer Interaction (2/2)


Download COMP6176 Human and Computer Interaction (2/2)


Preview text

FM - BINUS - AA - FPA - 27/R0

Course Outline
COMP6176 Human and Computer Interaction (2/2)
Effective Date 01 February 2016

Study Program Computer Science
Revision 0

1. Course Description
This course comprises the human factors in interactive software, theories, principles and guidance in interface development, interface components, interface styles, disciplines associated with design and evaluation of user interface in order to support the usability. This course gives students the ability to design and evaluate the user interface.

2. Graduate Competency
Each course in the study program contributes to the graduate competencies that are divided into employability and entrepreneurial skills and study program specific outcomes, in which students need to have demonstrated by the time they complete their course.

BINUS University employability and entrepreneurial skills consist of planning and organizing, problem solving and decision making, self management, team work, communication, and initiative and enterprise.

2.1. Employability and Entrepreneurial Skills

Aspect

Key Behaviour

2.2. Study Program Specific Outcomes
Study Program Specific Outcomes
Able to classify problems and to apply design and development principles for specific problems
3. Topics • Interaction Design • Understanding and Conceptualizing Interaction • Cognitive Aspects • Social Interaction • Emotional Interaction • Interfaces • Review I • Establishing Requirements • Data Analysis, Interpretation, and Presentation • Design , Prototyping and Construction • Basic Evaluation • Advanced Evaluation • Review II • Introduction to Graphics Editor • Managing Design Processes (1) • Managing Design Processes (2) & Introduction to Web Development • HTML Form • Introduction to CSS (1) • Quiz • Introduction to CSS (2) • Introduction to Javascript • Javascript Form, Validation and Dialog Box

Course Outline

FM - BINUS - AA - FPA - 27/R0 COMP6176 - Human and Computer Interaction | 2

• Introduction to JQuery • Introduction to HTML 5 • Project Collection
4. Learning Outcomes On successful completion of this course, student will be able to: • LO 1: Describe the concept of interaction design • LO 2: Use guidelines, principles, models, and framework related with interaction design • LO 3: Choose the data gathering technique from user to develop successful interaction design • LO 4: Design the user requirements with interaction styles • LO 5: Evaluate the user interfaces of interactive software
5. Teaching And Learning Strategies In this course, the lecturers might deploy several teaching learning strategies, including Class Discussion, Project Work, Class Presentation, Group Discussion, and Lecture.
6. Textbooks and Other Resources 6.1 Textbooks 1. Jenny Preece, Helen Sharp, Yvonne Rogers. (2012). Interaction Design. 03. Wiley Publishing. ISBN: 978-0-470-66576-3.
The book in the first list is a must to have for each student.
6.2 Other Resources 1. Eight Golden Rules 2. http://www.cs.virginia.edu/~horton/cs305/slides/prototyping-f08.ppt 3. http://vulms.vu.edu.pk/Courses/CS408/Downloads/6-CognitiveFrameworks.ppt 4. http://www.cs.virginia.edu/~horton/cs305/slides/prototyping-f08.ppt 5. http://www.cs.virginia.edu/~horton/cs305/slides/prototyping-f08.ppt 6. http://www.cs.virginia.edu/~horton/cs305/slides/prototyping-f08.ppt 7. http://vulms.vu.edu.pk/Courses/CS408/Downloads/6-CognitiveFrameworks.ppt 8. http://www.cs.virginia.edu/~horton/cs305/slides/prototyping-f08.ppt 9. http://www.cs.virginia.edu/~horton/cs305/slides/prototyping-f08.ppt 10. http://www.cs.virginia.edu/~horton/cs305/slides/prototyping-f08.ppt 11. http://www.cs.virginia.edu/~horton/cs305/slides/prototyping-f08.ppt 12. http://www.cs.virginia.edu/~horton/cs305/slides/prototyping-f08.ppt 13. http://web.arch.usyd.edu.au/~rob/teaching/2007/DECO1200/DECO1200-Slides-06.pdf 14. http://www.interactiondesign.com.au/methodology 15. http://www.usability.gov/how-to-and-tools/methods/usability-testing.html 16. http://www.medien.ifi.lmu.de/lehre/ss10/mmi1/MMI1-SS10-07-Basic-HCI-Models-2.pdf 17. http://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.15.9372&rep=rep1&type=pdf 18. http://mmi.tudelft.nl/ValuesInDesign/submissions/ekbia.pdf 19. http://www.cs.waikato.ac.nz/Teaching/COMP325B/lectures/Chapter10ID.pdf 20. http://sydney.edu.au/engineering/it/~info4990/2009s2/rm06b.pdf 21. http://www.cs.virginia.edu/~horton/cs305/slides/prototyping-f08.ppt 22. http://www.jmu.edu/EnvironmentalInfoSys/ID/L5%20-%20Conceptual%20Design.pdf 23. http://www.maxqda.com/qualitative-data-analysis-software 24. http://www.tulane.edu/~lamp/pdfs/Presenting_Research_Results.pdf 25. http://atlasti.com/quantitative-vs-qualitative-research/ 26. http://www.interaction-design.org/encyclopedia/ethnography.html 27. http://www.id-book.com/firstedition/interactive_perlman.htm 28. http://www.cdc.gov/healthyyouth/evaluation/pdf/brief16.pdf 29. http://www.uiparade.com/ 30. http://electronics.howstuffworks.com/gadgets/other-gadgets/virtual-reality.htm 31. http://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.259.4640&rep=rep1&type=pdf 32. http://www.interaction-design.org/encyclopedia/3d_user_interfaces.html 33. http://literarydevices.net/zoomorphism/ 34. http://www.peter-lo.com/Teaching/IT359/L05.pdf 35. http://www.cs.rochester.edu/courses/112/spring2013/10chapter5.pdf 36. http://bjfogg.com/fbm_files/page4_1.pdf 37. http://earthlab.uoi.gr/theste/index.php/theste/article/download/21/16

Study Program Computer Science - Bina Nusantara University

Course Outline

FM - BINUS - AA - FPA - 27/R0 COMP6176 - Human and Computer Interaction | 3

38. http://www.hcii.cmu.edu/courses/social-perspectives-hc 39. http://www.smashingmagazine.com/2011/09/09/interaction-design-tactics-for-visual-designers/ 40. http://www.hillside.net/plop/2009/papers/Special/Social%20Experience%20Design%20Patterns.pd 41. http://aisel.aisnet.org/cgi/viewcontent.cgi?article=1057&context=thci 42. http://www.zeepedia.com/read.php?cognitive_frameworks_modes_of_cognition_human_processor_mo
del_goms_human_computer_interaction&b=11&c=6 43. http://vulms.vu.edu.pk/Courses/CS408/Downloads/6-CognitiveFrameworks.ppt 44. http://webdesign.tutsplus.com/articles/using-metaphors-in-web-design--webdesign-4752 45. http://www.csdl.tamu.edu/~furuta/courses/04a_436/chapters/ch02/ch02.ppt 46. http://www.cse.chalmers.se/research/group/idc/ituniv/kurser/07/mdi/pdf%20files/Chapter_2.pdf 47. http://www.mif.vu.lt/~moroz/HCI/4_conceptualization.pdf 48. http://users.csc.calpoly.edu/~fkurfess/484/W11/Slides/Chapter6ID-FJK.ppt 49. http://ocw.metu.edu.tr/pluginfile.php/1166/mod_resource/content/0/Schedule/se705_week6.pdf 50. http://www.dburnsdesign.com/blog/2014/05/the-difference-between-good-ui-and-bad-ui/ 51. http://www.sharritt.com/CISHCIExam/interactionDesign.html 52. http://designmodo.github.io/Flat-UI/ 53. http://asktog.com/atc/principles-of-interaction-design/ 54. http://www.fastcodesign.com/3032719/ui-ux-who-does-what-a-designers-guide-to-the-tech-industry

7. Schedule
Theory
Session/ Mode 1 F2F

Related LO LO 1

Topics
Interaction Design - Introduction - Good and Poor Design - What is Interaction Design - Interaction design and User Experience - What is Involved in Interaction Design

References
- Interaction Design - Interaction Design, Chapter 1
and Chapter 9 - The difference between
Good UI and Bad UI, http://www.dburnsdesign.co m/blog/2014/05/thedifference-between-good-uiand-bad-ui/ - User- centered design and development, http://users.csc.calpoly.edu/~ fkurfess/484/W11/Slides/Cha pter6ID-FJK.ppt - The process of Interaction design and Design Languages, http://ocw.metu.edu.tr/pluginf ile.php/1166/mod_resource/c ontent/0/Schedule/se705_we ek6.pdf - A designer guide to The Tech Industry, http://www.fastcodesign.com /3032719/ui-ux-who-doeswhat-a-designers-guide-tothe-tech-industry - Interaction Design, http://www.sharritt.com/CISH CIExam/interactionDesign.ht ml - First Principles of Interaction Design, http://asktog.com/atc/principl es-of-interaction-design/ - Free User Interface UI, http://designmodo.github.io/F

Study Program Computer Science - Bina Nusantara University

Course Outline 2
F2F
3 F2F
4 F2F

FM - BINUS - AA - FPA - 27/R0 COMP6176 - Human and Computer Interaction | 4

LO 1 LO 2
LO 1 LO 2
LO 1 LO 2

Understanding and Conceptualizing Interaction - Introduction - Conceptual Models - Interface Metaphor - Interaction Types - Paradigms, Theories, Models and Frameworks
Cognitive Aspects - Introduction - What is Cognitive - Cognitive Frameworks
Social Interaction - Introduction - Being Social - Face-to-Face Conversations - Remote Conversations - Telepresence - Co-Presence - Emergent Social Phenomena

lat-UI/
- Understanding and Conceptualizing Interaction
- Interaction Design, Interaction Design Chapter 2
- Eight Golden Rules - Using Metaphors in Web
Design, http://webdesign.tutsplus.co m/articles/using-metaphorsin-web-design--webdesign4752 - Understanding and Conceptualizing interaction, http://www.cse.chalmers.se/r esearch/group/idc/ituniv/kurs er/07/mdi/pdf%20files/Chapt er_2.pdf - Conceptual Model in Interaction Design, http://www.mif.vu.lt/~moroz/ HCI/4_conceptualization.pdf - Understanding and Conceptualizing Interaction, http://www.csdl.tamu.edu/~fu ruta/courses/04a_436/chapte rs/ch02/ch02.ppt - Cognitive Aspects - Interaction Design, Interaction Design Chapter 3 - Transaction on Human Computer Interaction, http://aisel.aisnet.org/cgi/vie wcontent.cgi?article=1057&c ontext=thci - Cognitive Framework, http://www.zeepedia.com/rea d.php?cognitive_frameworks _modes_of_cognition_huma n_processor_model_goms_h uman_computer_interaction &b=11&c=6 - Cognitive Framework, http://vulms.vu.edu.pk/Cours es/CS408/Downloads/6CognitiveFrameworks.ppt - Social Interaction - Interaction Design, Chapter 4 - Designing Social Interfaces, http://www.hillside.net/plop/2 009/papers/Special/Social% 20Experience%20Design%2 0Patterns.pd - Interaction Design Tactics for Virtual Designer, http://www.smashingmagazi ne.com/2011/09/09/interactio n-design-tactics-for-visualdesigners/ - Social Perspectives in HCI,

Study Program Computer Science - Bina Nusantara University

Course Outline
5 GSLC
6 F2F
7 F2F
8 F2F

FM - BINUS - AA - FPA - 27/R0 COMP6176 - Human and Computer Interaction | 5

LO 1 LO 2
LO 4
LO 1 LO 2 LO 4 LO 3

Emotional Interaction - Introduction - Emoticons and the User Experience - Expressive interfaces - Frustrating Interfaces - Persuasive Technologies and Behavioural
Change - Anthropomorphism and Zoomorphism - Models of Emotion
Interfaces - Introduction - Interface Types - Natural User Interfaces
Review I - Interaction Design - Understanding and Conceptualizing Interaction - Cognitive Aspects - Social Interaction - Emotional Interaction - Interfaces Establishing Requirements - Introduction - What, How, and Why ? - What are Requirements ?

http://www.hcii.cmu.edu/cour ses/social-perspectives-hc - Telepresence : A Real Component in A Model to Make Human Computer Interface Factors Meaningful in the Virtual Learning Environment, http://earthlab.uoi.gr/theste/in dex.php/theste/article/downlo ad/21/16 - Emotional Interaction - Interaction Design, Interaction Design Chapter 5 - Zoomorphism, http://literarydevices.net/zoo morphism/ - A behaviour Model for Persuasive Design, http://bjfogg.com/fbm_files/p age4_1.pdf - Emotional Interaction, http://www.cs.rochester.edu/ courses/112/spring2013/10c hapter5.pdf - Understanding How Interfaces Affect Users, http://www.peterlo.com/Teaching/IT359/L05.p df - Interfaces - Interaction Design, Interaction Design Chapter 6 - How Virtual Reality works, http://electronics.howstuffwor ks.com/gadgets/othergadgets/virtual-reality.htm - 3D User Interface, http://www.interactiondesign.org/encyclopedia/3d_ user_interfaces.html - Data and information visualization methods and interactive mechanisms : A survey, http://citeseerx.ist.psu.edu/vi ewdoc/download?doi=10.1.1. 259.4640&rep=rep1&type=p df - Review I - Interaction Design, Interaction Design Chapter 1-6,9 - User Interface Design Inspiration and Design Tools, http://www.uiparade.com/
- Establishing Requirements - Interaction Design,
Interaction Design Chapter 7, 10

Study Program Computer Science - Bina Nusantara University

Course Outline
9 GSLC
10 F2F
11 GSLC

FM - BINUS - AA - FPA - 27/R0 COMP6176 - Human and Computer Interaction | 6

- Data Gathering for Requirements - Task Description - Task Analysis

LO 3 LO 4

Data Analysis, Interpretation, and Presentation - Introduction - Qualitative and Quantitative - Simple Quantitative Analysis - Tools to Support Data Analysis - Using Theoretical Frameworks - Presenting the Findings

LO 4

Design , Prototyping and Construction - Introduction - Prototyping and Construction - Conceptual Design - Physical Design - Using Scenarios in Design - Using Prototypes in Design - Support for Design

LO 5

Basic Evaluation - Introduction - Types of Evaluation - Evaluation Case Studies - Evaluation Framework

- Designing and using Questionnaires, http://www.idbook.com/firstedition/interacti ve_perlman.htm
- Data Collection Method for Program Evaluation : Observation, http://www.cdc.gov/healthyyo uth/evaluation/pdf/brief16.pdf
- Ethnography, http://www.interactiondesign.org/encyclopedia/eth nography.html
- Data Analysis , Interpretation, and Presentation
- Interaction Design, Interaction Design Chapter 8
- Comparison of Qualitative and Quantitative Research, http://atlasti.com/quantitative -vs-qualitative-research/
- Presenting Research Result Research, http://www.tulane.edu/~lamp/ pdfs/Presenting_Research_ Results.pdf
- Qualitative Data Analysis Software, http://www.maxqda.com/qual itative-data-analysis-software
- Design, Prototyping, and Construction
- Interaction Design, Introduction Design Chapter 11
- Conceptual Design : Moving from Requirement, http://www.jmu.edu/Environ mentalInfoSys/ID/L5%20%20Conceptual%20Design. pdf
- Design, Prototyping and Construction, http://www.cs.virginia.edu/~h orton/cs305/slides/prototypin g-f08.ppt
- Basic Evaluation - Interaction Design,
Interaction Design Chapter 12-13 - Worlds and Values : A Situated Evaluation Framework for Interaction Design, http://mmi.tudelft.nl/ValuesIn Design/submissions/ekbia.pd f - Introducing Evaluation

Study Program Computer Science - Bina Nusantara University

Course Outline

FM - BINUS - AA - FPA - 27/R0 COMP6176 - Human and Computer Interaction | 7

Interaction Design,

http://www.cs.waikato.ac.nz/

Teaching/COMP325B/lectur

es/Chapter10ID.pdf

- HCI Evaluation,

http://sydney.edu.au/enginee

ring/it/~info4990/2009s2/rm0

6b.pdf

12

LO 5

Advanced Evaluation

- Advances Evaluation

F2F

- Introduction

- Interaction Design,

- Usability Testing

Interaction Design Chapter

- Conduction Experiments

14-15

- Field Studies

- Usability Testing,

- Inspection

http://www.usability.gov/how-

- Analytics

to-and-

- Predictive Models

tools/methods/usability-

testing.html

- Heuristic User Interface

Evaluation : Three Case

Studies of Dialog Design,

http://citeseerx.ist.psu.edu/vi

ewdoc/download?doi=10.1.1.

15.9372&rep=rep1&type=pdf

- Looking back Fitts’Law,

http://www.medien.ifi.lmu.de/

lehre/ss10/mmi1/MMI1-

SS10-07-Basic-HCI-Models-

2.pdf

13

LO 3

Review II

- Review II

F2F

LO 4

- Establishing Requirements

- Interaction Design,

LO 5

- Data Analysis , Interpretation, and Presentation

Interaction Design Chapter

- Design , Prototyping and Construction

7,8,10-15

- Basic Evaluation

- Methodology of Interaction

- Advanced Evaluation

Design,

http://www.interactiondesign.

com.au/methodology

- The process of Interaction

Design,

http://web.arch.usyd.edu.au/

~rob/teaching/2007/DECO12

00/DECO1200-Slides-06.pdf

Practicum Session/ Mode 1 F2F
2 F2F

Related LO LO 1 LO 2 LO 4
LO 1 LO 2 LO 4

Topics
Introduction to Graphics Editor - Introduction to Graphics Editor - Basic Tools of Graphics Editor - Text Effects - Image Manipulation - Resizing (Image Size, Canvas Size) - Transform (Rotate, Flip) - Layer (Layer Mask, Style Merge) - Selection Managing Design Processes (1) - Filtering - Designing Web Header - Designing Website Prototype

References
- Interaction Design Chapter 1, 2, 3, 9
- Interaction Design, Chapter 1, 2, 3, 9
- Cognitive Framework, http://vulms.vu.edu.pk/Cours es/CS408/Downloads/6CognitiveFrameworks.ppt
- Interaction Design Chapter 1, 2, 3, 9
- Cognitive Framework,
http://vulms.vu.edu.pk/Cours

Study Program Computer Science - Bina Nusantara University

Course Outline
3 F2F
4 F2F
5 F2F
6 F2F
7 F2F
8 F2F
9 F2F

FM - BINUS - AA - FPA - 27/R0 COMP6176 - Human and Computer Interaction | 8

LO 1 LO 2 LO 4
LO 1 LO 2 LO 4
LO 1 LO 2 LO 3 LO 4 LO 5
LO 1 LO 2 LO 3 LO 4 LO 5
LO 1 LO 2 LO 3 LO 4 LO 5
LO 1 LO 2 LO 3 LO 4 LO 5
LO 1 LO 2 LO 3 LO 4 LO 5

Managing Design Processes (2) & Introduction to Web Development - Slicing - Introduction to Web Development - Basic Tools of Web Development - Managing Website pages in Web Development - Link - Images
HTML Form - Table - HTML Form Introduction - HTML Form Element - Form Action
Introduction to CSS (1) - Internal and External CSS - CSS Selector (Class, Id, Element) - Web Structure (Div) - CSS Box and Positioning - CSS text Styles - CSS Links - Hover Effect
Quiz - Quiz
Introduction to CSS (2) - Drop Down Menu - Responsive Design (Meta tag and media screen)
Introduction to Javascript - HTML and Javascript - Variables, Strings and Arrays - Selection - Looping - Function - Built in Functions (Date, String, Math) - Event Handler Javascript Form, Validation and Dialog Box - Submitting Form Data - Displaying Form Data - Validation - Dialog Box

es/CS408/Downloads/6CognitiveFrameworks.ppt - Interaction Design Chapter 9, 11 - Interaction Design, Chapter 9, 11 - Design, Prototyping and Construction, http://www.cs.virginia.edu/~h orton/cs305/slides/prototypin g-f08.ppt - Interaction Design Chapter 11 - Interaction Design, - Design, Prototyping and Construction, http://www.cs.virginia.edu/~h orton/cs305/slides/prototypin g-f08.ppt - Interaction Design Chapter 11 - Interaction Design, Chapter 11 - Design, Prototyping and Construction, http://www.cs.virginia.edu/~h orton/cs305/slides/prototypin g-f08.ppt - Interaction Design Chapter 1, 2, 3, 9, 11 - Interaction Design, - Design, Prototyping and Construction, http://www.cs.virginia.edu/~h orton/cs305/slides/prototypin g-f08.ppt - Interaction Design Chapter 11 - Interaction Design, Chapter 11 - Design, Prototyping and Construction, http://www.cs.virginia.edu/~h orton/cs305/slides/prototypin g-f08.ppt - Interaction Design Chapter 11 - Interaction Design, - Design, Prototyping and Construction, http://www.cs.virginia.edu/~h orton/cs305/slides/prototypin g-f08.ppt - Interaction Design Chapter 11 - Interaction Design, Chapter 11 - Design, Prototyping and Construction, http://www.cs.virginia.edu/~h

Study Program Computer Science - Bina Nusantara University

Course Outline

FM - BINUS - AA - FPA - 27/R0 COMP6176 - Human and Computer Interaction | 9

orton/cs305/slides/prototypin

g-f08.ppt

10

LO 1

Introduction to JQuery

- Interaction Design Chapter

F2F

LO 2

- Selector

11

LO 3

- Event

- Interaction Design,

LO 4

- Effect (Slide in, slide up, hide, show, toggle,

- Design, Prototyping and

LO 5

and animation)

Construction,

- Slider

http://www.cs.virginia.edu/~h

orton/cs305/slides/prototypin

g-f08.ppt

11

LO 1

Introduction to HTML 5

- Interaction Design Chapter

F2F

LO 2

- HTML 5 Structure

11

LO 3

- Canvas (draw, translation, rotation, scaling)

- Interaction Design, Chapter

LO 4

11

LO 5

- Design, Prototyping and

Construction,

http://www.cs.virginia.edu/~h

orton/cs305/slides/prototypin

g-f08.ppt

12

LO 1

Project Collection

- Project Collection

F2F

LO 2

- Project Collection

- Interaction Design,

LO 3

LO 4

LO 5

8. Evaluation Theory
Assessment Activity Assignment Mid Exam Final Exam
Practicum
Assessment Activity Assignment Project
Final Evaluation Score
Aspects Theory Practicum

Weight
20% 30% 50%

Learning Outcomes

1 2 3 4 5

√ √ √ √ √

√ √



√ √ √

Weight
40% 60%

Learning Outcomes 1 2 3 4 5 √ √ √ √ √ √ √ √ √ √

Weight
70% 30%

Study Program Computer Science - Bina Nusantara University

Course Outline

FM - BINUS - AA - FPA - 27/R0 COMP6176 - Human and Computer Interaction | 10

9. A. Assessment Rubric (Study Program Specific Outcomes)

LO LO 1
LO 2 LO 3

Indicators 1.1. Ability to explain the difference
between good and poor interaction design
1.2. Ability to explain the relation interaction design with humancomputer interaction and other fields
2.1. Ability to use guidelines, and principles related with the interaction design
2.2. Ability to use model and frameworks related with the interaction design
3.1. Ability to use data gathering technique from user

Excellent (85 – 100)
Correct explanation the difference between good and poor interaction design in accordance with guidelines and relevant examples Correct explanation the relation interaction design with humancomputer interaction and other fields with relevant examples
The guidelines and principles are used correctly and supported by relevant examples
The model and framework are used correctly and supported by relevant examples The data gathering technique are used correctly and can be combined to get the complete requirement

Proficiency Level

Good

Average

(75 – 84)

(65 – 74)

Correct

Correct

explanation explanation

the

the

difference

difference

between

between

good and

good and

poor

poor

interaction interaction

design in

design

accordance

with

guidelines

Correct explanation the relation interaction design with humancomputer interaction and other fields

Correct explanation the relation interaction design with humancomputer interaction only

The guidelines and principles are used correctly

The guidelines or principles are used correctly

The model and framework are used correctly

The model or framework are used correctly

The data gathering technique are used correctly to get the requirement s

Only can use one data gathering technique to get the requirement s

Poor (<= 64) Incorrect explanation the usability of interactive software
Incorrect explanation the relation interaction design with humancomputer interaction and other fields with relevant examples The guidelines, principles are used incorrectly
The guidelines, principles are used incorrectly
The data gathering technique are used incorrectly

Study Program Computer Science - Bina Nusantara University

Preparing to load PDF file. please wait...

0 of 0
100%
COMP6176 Human and Computer Interaction (2/2)