introduction to interface and interaction design

MII7134 Interface and Interaction Design

Hans PõldojaTallinn University

Focus of the course

• Focus on web-based user interfaces

• Topics: scenarios, personas, user stories, information architecture diagrams, prototypes, XHTML, CSS, accessibility, evaluation

Structure of the course

• 5 day workshop

• Online blogging seminar and independent work

• Presentation of course projects

• Graded assessment

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

Understanding design

“Design is not just what it looks like and feels like. Design is how it works.” (Steve Jobs)

“Form follows function” (Louis Sullivan)

Design as a process

Requirementsanalysis

Conceptualdesign

Mockups andprototypes

Production Launch

Evaluation

The Pervasive Usability Process

Requirements analysis

• Requirements specification

• User Interviews

• User Surveys

• Competitive Analysis

Requirements analysis

• Requirements specification > Personas, Scenarios

• User interviews > Participatory design sessions

• User surveys

• Competitive analysis

Personas

Personas

• Photo

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

• Goals with the web site (experience goals, end goals)

• Information seeking styles

• Usability needs

Scenarios

Participatory design sessions

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

Competitive analysis

Competitive analysis

• Title and URL

• Screenshot

• Pros

• Cons

• Usability Issues

Project ideas

Your idea comes here....

References

• Brinck, T., Gergle, D., Wood, S.D. (2002). Usability for the web: designing web sites that work. Morgan Kaufmann Publishers.

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/