introduction to interface and interaction design
DESCRIPTION
Lecture slides from Interface and Interaction Design course in Tallinn UniversityTRANSCRIPT
![Page 1: Introduction to Interface and Interaction Design](https://reader033.vdocuments.net/reader033/viewer/2022050816/54c8009c4a79598d618b45f1/html5/thumbnails/1.jpg)
MII7134 Interface and Interaction Design
Hans PõldojaTallinn University
![Page 2: Introduction to Interface and Interaction Design](https://reader033.vdocuments.net/reader033/viewer/2022050816/54c8009c4a79598d618b45f1/html5/thumbnails/2.jpg)
Focus of the course
• Focus on web-based user interfaces
• Topics: scenarios, personas, user stories, information architecture diagrams, prototypes, XHTML, CSS, accessibility, evaluation
![Page 3: Introduction to Interface and Interaction Design](https://reader033.vdocuments.net/reader033/viewer/2022050816/54c8009c4a79598d618b45f1/html5/thumbnails/3.jpg)
Structure of the course
• 5 day workshop
• Online blogging seminar and independent work
• Presentation of course projects
• Graded assessment
![Page 4: Introduction to Interface and Interaction Design](https://reader033.vdocuments.net/reader033/viewer/2022050816/54c8009c4a79598d618b45f1/html5/thumbnails/4.jpg)
Learning environment
• Course blog: http://www.hanspoldoja.net/mii7134/
• Del.icio.us: http://del.icio.us
• Slideshare: http://www.slideshare.net
• Flickr: http://www.flickr.com
• Tag: mii7134
![Page 5: Introduction to Interface and Interaction Design](https://reader033.vdocuments.net/reader033/viewer/2022050816/54c8009c4a79598d618b45f1/html5/thumbnails/5.jpg)
Understanding design
![Page 6: Introduction to Interface and Interaction Design](https://reader033.vdocuments.net/reader033/viewer/2022050816/54c8009c4a79598d618b45f1/html5/thumbnails/6.jpg)
“Design is not just what it looks like and feels like. Design is how it works.” (Steve Jobs)
![Page 7: Introduction to Interface and Interaction Design](https://reader033.vdocuments.net/reader033/viewer/2022050816/54c8009c4a79598d618b45f1/html5/thumbnails/7.jpg)
“Form follows function” (Louis Sullivan)
![Page 8: Introduction to Interface and Interaction Design](https://reader033.vdocuments.net/reader033/viewer/2022050816/54c8009c4a79598d618b45f1/html5/thumbnails/8.jpg)
Design as a process
![Page 9: Introduction to Interface and Interaction Design](https://reader033.vdocuments.net/reader033/viewer/2022050816/54c8009c4a79598d618b45f1/html5/thumbnails/9.jpg)
Requirementsanalysis
Conceptualdesign
Mockups andprototypes
Production Launch
Evaluation
The Pervasive Usability Process
![Page 10: Introduction to Interface and Interaction Design](https://reader033.vdocuments.net/reader033/viewer/2022050816/54c8009c4a79598d618b45f1/html5/thumbnails/10.jpg)
Requirements analysis
• Requirements specification
• User Interviews
• User Surveys
• Competitive Analysis
![Page 11: Introduction to Interface and Interaction Design](https://reader033.vdocuments.net/reader033/viewer/2022050816/54c8009c4a79598d618b45f1/html5/thumbnails/11.jpg)
Requirements analysis
• Requirements specification > Personas, Scenarios
• User interviews > Participatory design sessions
• User surveys
• Competitive analysis
![Page 12: Introduction to Interface and Interaction Design](https://reader033.vdocuments.net/reader033/viewer/2022050816/54c8009c4a79598d618b45f1/html5/thumbnails/12.jpg)
Personas
![Page 13: Introduction to Interface and Interaction Design](https://reader033.vdocuments.net/reader033/viewer/2022050816/54c8009c4a79598d618b45f1/html5/thumbnails/13.jpg)
Personas
• Photo
• Background info (age, gender, computer, tech skills, disabilities, ...)
• Goals with the web site (experience goals, end goals)
• Information seeking styles
• Usability needs
![Page 14: Introduction to Interface and Interaction Design](https://reader033.vdocuments.net/reader033/viewer/2022050816/54c8009c4a79598d618b45f1/html5/thumbnails/14.jpg)
Scenarios
![Page 15: Introduction to Interface and Interaction Design](https://reader033.vdocuments.net/reader033/viewer/2022050816/54c8009c4a79598d618b45f1/html5/thumbnails/15.jpg)
Participatory design sessions
![Page 16: Introduction to Interface and Interaction Design](https://reader033.vdocuments.net/reader033/viewer/2022050816/54c8009c4a79598d618b45f1/html5/thumbnails/16.jpg)
Participatory design sessions
• Write guidelines for arranging the design session
• Find 2...4 users for the design session
• Present scenarios and ask feedback
• Take notes, record the session and make a summary
![Page 17: Introduction to Interface and Interaction Design](https://reader033.vdocuments.net/reader033/viewer/2022050816/54c8009c4a79598d618b45f1/html5/thumbnails/17.jpg)
Competitive analysis
![Page 18: Introduction to Interface and Interaction Design](https://reader033.vdocuments.net/reader033/viewer/2022050816/54c8009c4a79598d618b45f1/html5/thumbnails/18.jpg)
Competitive analysis
• Title and URL
• Screenshot
• Pros
• Cons
• Usability Issues
![Page 19: Introduction to Interface and Interaction Design](https://reader033.vdocuments.net/reader033/viewer/2022050816/54c8009c4a79598d618b45f1/html5/thumbnails/19.jpg)
Project ideas
![Page 20: Introduction to Interface and Interaction Design](https://reader033.vdocuments.net/reader033/viewer/2022050816/54c8009c4a79598d618b45f1/html5/thumbnails/20.jpg)
![Page 21: Introduction to Interface and Interaction Design](https://reader033.vdocuments.net/reader033/viewer/2022050816/54c8009c4a79598d618b45f1/html5/thumbnails/21.jpg)
![Page 22: Introduction to Interface and Interaction Design](https://reader033.vdocuments.net/reader033/viewer/2022050816/54c8009c4a79598d618b45f1/html5/thumbnails/22.jpg)
![Page 23: Introduction to Interface and Interaction Design](https://reader033.vdocuments.net/reader033/viewer/2022050816/54c8009c4a79598d618b45f1/html5/thumbnails/23.jpg)
![Page 24: Introduction to Interface and Interaction Design](https://reader033.vdocuments.net/reader033/viewer/2022050816/54c8009c4a79598d618b45f1/html5/thumbnails/24.jpg)
![Page 25: Introduction to Interface and Interaction Design](https://reader033.vdocuments.net/reader033/viewer/2022050816/54c8009c4a79598d618b45f1/html5/thumbnails/25.jpg)
![Page 26: Introduction to Interface and Interaction Design](https://reader033.vdocuments.net/reader033/viewer/2022050816/54c8009c4a79598d618b45f1/html5/thumbnails/26.jpg)
Your idea comes here....
![Page 27: Introduction to Interface and Interaction Design](https://reader033.vdocuments.net/reader033/viewer/2022050816/54c8009c4a79598d618b45f1/html5/thumbnails/27.jpg)
References
• Brinck, T., Gergle, D., Wood, S.D. (2002). Usability for the web: designing web sites that work. Morgan Kaufmann Publishers.
![Page 28: Introduction to Interface and Interaction Design](https://reader033.vdocuments.net/reader033/viewer/2022050816/54c8009c4a79598d618b45f1/html5/thumbnails/28.jpg)
Photos
• http://www.flickr.com/photos/delgoff/435077003/
• http://www.flickr.com/photos/kk/57090119/
• http://www.flickr.com/photos/hanspoldoja/1762379848/
• http://www.flickr.com/photos/cybertaur1/463401444/
• http://www.flickr.com/photos/enzomolinari/1306012480/
• http://www.flickr.com/photos/robandstephanielevy/234434882/