Teaching Interaction Design

64
Teaching Interaction Design Hans Põldoja, Tallinn University

Transcript of Teaching Interaction Design

Page 1: Teaching Interaction Design

Teaching Interaction Design

Hans Põldoja, Tallinn University

Page 2: Teaching Interaction Design

Hans Põldoja

Lecturer of educational technology Tallinn University, Institute of Informatics

Doctoral student Aalto University, School of Arts, Design and Architecture

[email protected] http://www.hanspoldoja.net

Page 3: Teaching Interaction Design

What is interaction design?

Page 4: Teaching Interaction Design

(IxDA)

Page 5: Teaching Interaction Design

“Interaction design refers to the process that is arranged within the existing resource constraints to create, shape, and decide all use-oriented qualities (structural, functional, ethical, and aesthetic) of a digital artifact for one or many clients.”

(Löwgren & Stolterman, 2007)

Page 6: Teaching Interaction Design

HCI and Interaction Design in Tallinn University

Page 7: Teaching Interaction Design

Interaction Design Methods course

Page 8: Teaching Interaction Design

Interaction Design Methods course

https://ifi7156.wordpress.com

Page 9: Teaching Interaction Design

Structure of the course

• 5 ECTS / 130 hours

• 8 meetings (26 hours)

• work on a group project (80 hours)

• work on individual assignments (8 hours)

• work on literature (16 hours)

Page 10: Teaching Interaction Design

Types of projects

• Web applications

• Mobile applications

• Content-driven projects

Page 11: Teaching Interaction Design
Page 12: Teaching Interaction Design
Page 13: Teaching Interaction Design
Page 14: Teaching Interaction Design
Page 15: Teaching Interaction Design

Research-based design process

(Leinonen, Toikkanen, & Silfvast, 2008)

Page 16: Teaching Interaction Design

IxD course

Group blog

Project idea

Contextual inquiry Personas Scenarios

Design session

Concept mapping

Testing tasks

User stories

Paper prototypes

Testing the paper

prototypes

User interface

prototypes

Feedback Feedback Testing Feedback

Final presentation

2 weeks 2 weeks 2 weeks 2 weeks 4 weeks 2 weeks

January 30 February 13 February 28 March 27 April 24 May 8

Group Assignments

Individual Assignments

March 13

Page 17: Teaching Interaction Design

Group blog

Project idea

Contextual inquiry Personas Scenarios

Design session

Concept mapping

Testing tasks

User stories

Paper prototypes

Testing the paper

prototypes

User interface

prototypes

Feedback Feedback Testing Feedback

Final presentation

2 weeks 2 weeks 2 weeks 2 weeks 4 weeks 2 weeks

January 30 February 13 February 28 March 27 April 24 May 8

Group Assignments

Individual Assignments

March 13

Page 18: Teaching Interaction Design

Group blog

Project idea

Contextual inquiry Personas Scenarios

Design session

Concept mapping

Testing tasks

User stories

Paper prototypes

Testing the paper

prototypes

User interface

prototypes

Feedback Feedback Testing Feedback

Final presentation

2 weeks 2 weeks 2 weeks 2 weeks 4 weeks 2 weeks

January 30 February 13 February 28 March 27 April 24 May 8

Group Assignments

Individual Assignments

March 13

Page 19: Teaching Interaction Design

A real life...

Contextual inquiry Personas Scenarios Design

sessionConcept mapping

User stories

Testing task

Paper prototypes

Testing the paper

prototypes

User interface

prototypes

Page 20: Teaching Interaction Design

Personas

Page 21: Teaching Interaction Design

Cooper, A., Reimann, R., & Cronin, D. (2007). About Face 3: The Essentials of Interaction Design. Indianapolis, IN: Wiley Publishing, Inc.

Page 22: Teaching Interaction Design

Persona’s elements

• Photo

• Background info (age, gender, computer, tech skills, disabilities, ...)

• Goals

• Information seeking styles

• Usability needs

(Cooper, Reimann, & Cronin, 2007)

Page 23: Teaching Interaction Design

Persona types

• Primary (1)

• Secondary (0...2)

• Supplemental

• Customer

• Served: non-users affected by the use of the product

• Negative

(Cooper et al, 2007)

Page 24: Teaching Interaction Design

Persona type: Secondary persona Age: 50 Education: Master in International Management Occupation: Teacher

Leena Leena is a teacher in the Business program. She has been a teachers for a long time. Show knows how to teach very well and has her own methodology and routines. She has used all kind of different IT systems while teaching, but still have a problem putting together her teaching routines with technology. She sometimes feels she is forced to use the systems, but recognizes the need to do so in general. She likes her job, but sometimes finds it difficult to navigate through different intranets and desktops. Leena is interested in politics and usually reads a paper every morning. She is specially interested in international politics and economy.

Goals: Stability: “I don’t want to learn a new IT system very often. I like to know how things work and then use the functions to get the job done every semester.” Efficiency: “When I have 20 people in my class, I would like to be able to give personalized feedback to all in the shortest amount of time possible. ” Timeliness: “I would like to get schedules faster. When the information about scheduling is not there on time, my students complain about this to me.”

Photo by Timothy Krause, taken from http://www.flickr.com/photos/33498942@N04/6421896557

Page 25: Teaching Interaction Design

Background

Goals

Jan is studying at Masaryk University in Brno at Pedagogical Faculty. He comes from small village, where he lives during weekends and he commutes to Brno every week, where he shares a flat with other 5 roommates. As a student, he is financialy supported by his parents, but he tries to participate in some part time job from time to time to earn some extra money. Because his schedule is very flexible, he can go out basically any day during the week. He likes to spend his time either acrively doing some kind of sport or he likes to hang out with his friends in either pub, bar or disco. In average, he is out 3 times a week.

As an usual student, Jan is very skilful with using computer, since he needs it every day for purpouses of study or fun. He spends a lot of time on social networks or searching for information. He has a smartphone, but uses it mainly for social networking, not for reading or searching webpages.

To be able to find out, where are his friends hanging out tonightŸŸ

Ÿ

Wants to show other people information about his favourite places and what he is doingWants to be the best among his frineds in user ranking, to show of

Jan Klvaňa

Age and sex

Education

Occupation

: male 23

: Pedagogical Faculty of MU Brno

: Full-time student, with casual part time jobs

Page 26: Teaching Interaction Design

Scenario-based design

Page 27: Teaching Interaction Design

Carroll, J. M. (2000). Making Use: Scenario-Based Design of Human-Computer Interactions. Cambridge, MA: The MIT Press.

Page 28: Teaching Interaction Design

Scenario 1: First experience with EduFeedr

John is teaching an open online course where he has more than 30 participants. All the participants have their individual blogs where they publish the weekly assignment. John is using a feed reader to follow all the student blogs. He is also trying to comment all the posts that have an inspiring ideas.

In the middle of the course John notices that it becomes increasingly complicated to manage the course. Several participants are not able to keep up with the tempo of the course. In the feed reader it is not easy to see how far different participants have proceeded with the course.

One day John reads about new feed reader EduFeedr that has special features to support online courses. It an online feed reader similar to Google Reader. John creates an account and starts exploring the possibilities. He can easily import all the feeds from his current feed reader.

After importing the feeds he notices that the students’ posts are somehow grouped by the assignments. This way it is easy to see how far the participants have proceeded with their work.

It is possible to browse students posts by a tag cloud. Among other tags there is a tag "urgent". John clicks on the tag and finds out that a few students who needed fast feedback to proceed with their home task have used that tag.

There is also an image that displays the social network between the student blogs. John can see which blogs are more actively linked and commented.

John is impressed by these possibilities. He decides to get a cup of coffee and explore the other features of EduFeedr.

Page 29: Teaching Interaction Design

Participatory design sessions

• 2...3 participants and 1 designer

• Structured discussion about 3...4 scenarios

• Prepared questions about the scenarios

• Should not last more than 2 hours

Page 30: Teaching Interaction Design
Page 31: Teaching Interaction Design

Example questions

• Did the scenario wake-up any thoughts?

• Could you image yourself to the role of the teacher?

• Is there something you would like to change in the scenario?

Page 32: Teaching Interaction Design

Summarizing the design sessions

• Written summary based on audio recording or notes

• Concept map

Page 33: Teaching Interaction Design

Concept mapping

Page 34: Teaching Interaction Design

Novak, J. D. (2010). Learning, Creating, and Using Knowledge: Concept Maps as Facilitative Tools in Schools and Corporations. New York, NY: Routledge.

Page 35: Teaching Interaction Design

Role in interaction design

• Summarizing design sessions

• Establishing user interface vocabulary

• Building a common understanding in a project team

• Providing input for information architecture

Page 36: Teaching Interaction Design

(Põldoja & Väljataga, 2010)

Page 37: Teaching Interaction Design

(Põldoja et al, 2011)

Page 38: Teaching Interaction Design

User stories

Page 39: Teaching Interaction Design

Cohn, M. (2004). User stories applied: For agile software development. Boston, MA: Addison-Wesley.

Page 40: Teaching Interaction Design

User story format

"As a <role>, I want <goal/desire>”

Example:

Search for customers

As a user, I want to search for my customers by their first and last names.

Page 41: Teaching Interaction Design
Page 42: Teaching Interaction Design

Prototyping

Page 43: Teaching Interaction Design

Prototyping techniques

• Low-fidelity prototyping

• Paper prototyping

• Wireframes

• High-fidelity prototyping

• Graphical prototypes

• HTML/CSS prototypes

Page 44: Teaching Interaction Design

Snyder, C. (2003). Paper prototyping: The fast and easy way to design and refine user interfaces. San Francisco, CA: Morgan Kaufmann.

Page 45: Teaching Interaction Design

Initial user story

Page 46: Teaching Interaction Design
Page 47: Teaching Interaction Design

Improved user story

Page 48: Teaching Interaction Design
Page 49: Teaching Interaction Design
Page 50: Teaching Interaction Design
Page 51: Teaching Interaction Design

Detailed UI prototypes

Page 52: Teaching Interaction Design

Pencil

http://pencil.evolus.vn

Page 53: Teaching Interaction Design

Axure

http://www.axure.com/edu

Page 54: Teaching Interaction Design

InVision

http://www.invisionapp.com

Page 55: Teaching Interaction Design

Human-Computer Interaction master

programme

Page 56: Teaching Interaction Design

HCI master programme

http://hci.tlu.ee

Page 57: Teaching Interaction Design
Page 58: Teaching Interaction Design

Practice(4 credits)

Evaluating the User Experience(5 credits)

Interaction Design Methods(5 credits)

Developing Interactive Systems(5 credits)

Master Thesis Seminar(4 credits)

Research Methods(4 credits)

Page 59: Teaching Interaction Design

Hands-on activity: Paper prototyping

Page 60: Teaching Interaction Design

Context: redesigning the thesis topic database

Page 61: Teaching Interaction Design

Thesis topic database in TLU

http://www.cs.tlu.ee/teemaderegister/

Page 62: Teaching Interaction Design

Prototypes

• Thesis topic page

• Supervisor page

• Curriculum page

Page 63: Teaching Interaction Design

References• IxDA (n.d.). IxDA Mission. Retrieved from http://www.ixda.org/about/ixda-

mission

• Leinonen, T., Toikkanen, T., & Silvfast, K. (2008). Software as Hypothesis: Research-Based Design Methodology. In Proceedings of the Tenth Anniversary Conference on Participatory Design 2008 (pp. 61–70). Indianapolis, IN: Indiana University.

• Löwgren, J., & Stolterman, E. (2007). Thoughtful Interaction Design: A Design Perspective on Information Technology. Cambridge, MA: The MIT Press.

Page 64: Teaching Interaction Design

Thank You!

[email protected]

• http://www.slideshare.net/hanspoldoja