Interact/Interaction Design 1

From Web Education Community Group
< Interact
Revision as of 06:49, 11 December 2011 by Schepers (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

Course Number: US-300

Course Description

In this course students will learn to use the principles of Interaction Design to define a software project in terms of its purpose, scope, audience, major elements, task flows, layout, and more. Students will identify a need, define a solution, and create deliverables for an entire interaction design project. Standard design patterns, and frameworks will be introduced in order to create interfaces that map to users’ expectations and improve the user experience.

Prerequisites

Recommended Textbook(s)

Recommended Reading

Technologies Required

  • Mac or PC computers with internet connection
  • Software for creating wireframes and task-flow diagrams (OmniGraffle, Microsoft Visio, Balsamiq Mocups, Adobe Illustrator/Photoshop/Fireworks, Axure, etc.)
  • Word processing application (Microsoft Word, Apple Pages, Google Docs) for documentation purposes
  • Web Browsers (Firefox, Opera, Safari, Internet Explorer)


Competencies

Topic Competency Evaluation Methods
Interaction Design Define Interaction Design, and describe how it is different from Information Architecture Essay Question 1
Describe the following approaches: user-centered design, activity-centered design, systems design, and genius design Essay Question 2
Discuss the difference between prominent methodologies such as waterfall and agile, and how interaction design approaches may vary in each Discussion Question 1
Product & Audience Definition Conduct a client interview to determine the business purpose of a new web site, and define the primary project goals Lab 1
Create 1–2 personas for the target audiences that contain the motivations, goals, frustrations and common characteristics Lab 2
Research & Evaluation Methods Discuss how usability testing or task analysis can provide information on an existing product (current version, competitive version, non-competitive but similar model) Discussion Question 2
Conduct a heuristic analysis of an existing site Lab 3
Identify 4 design patterns being used on the site Lab 3
Conceptual Design Take a completed site map and project brief, and list 10 tasks that users should be able to accomplish on that site Lab 4
Discuss the differences and advantages/disadvantages with various conceptual design illustration methods (e.g., sketching, storyboarding, page flows) Discussion Question 3
Choose 2 of the tasks above and create storyboards outlining the interaction for each Lab 5
Detailed Design Discuss the difference between conceptual and detailed design Discussion Question 4
Write a functional specification for one of the chosen scenarios Lab 6
Define and discuss the key elements to a design pattern Essay Question 3
Create a task flow and 5–6 wireframes for the scenario Lab 7
Explain the design to a fellow student (who will be building a prototype based on it) Lab 8
Light Prototyping Discuss the pros and cons of the following types of prototypes; paper, sketch interactive, high-fidelity without full functionality, high-fidelity with full functionality Discussion Question 5
Evaluate 3 prototyping tools, briefly discussing the pros and cons of each Lab 9
Take another student’s documentation and develop a prototype accordingly (option, this can be paper prototyping, or using a chosen tool according to the skills of the class) Final

Assignments

Course Blog

Setup a blog using WordPress, Blogger, or another comparable system. Each week of the course, write one blog post that expands upon the topics discussed in class or readings. Each post should be at least 200 words in length, and should contain images and links where appropriate.

Recommended: Subscribe to your classmates’ blog RSS feeds using Google Reader, Netvibes, Bloglines, or another RSS reader of your choice so you can learn from your peers.


Course Blog Grading Rubric Rubric

Criteria Performance Quality Score
0 points 1 point 2 points 3 points
Blog Posts (evaluated weekly) Blog post was not published on time, is poorly written, does not contain content relevant to the course, or does not meet the post length requirement. Blog post was published on time, contains some spelling and/or grammatical errors, meets the post length requirement, but content is not very relevant to the course, or does not expand upon course topics. Blog post was published on time, contains no spelling and/or grammatical errors, meets the post length requirement, and the content expands upon course topics. Blog post is published on time, is very well written with no typos, grammar, or spelling errors, expands upon course topics, and exceeds the minimum post length. Post contains images where relevant to the content, and links to plenty of sources and resources.  


Reading Assignments

Aside from the readings noted in each lab, the following readings will provide background relevant to essay and discussion questions.


Labs

Lab 1 - Determine the business purpose of a new Web site

The point of this activity is to define the purpose, audience, value, desired perception, technical and user needs for a new web site. In teams of two, select a web site topic below:

  • eText books for college students
  • a text/email alert service for sports to let you know when a game is getting really good
  • a fresh baked cookie delivery service
  • an online dating service

One member of your team will play the role of the interaction designer. The other member of your team will play the client who wants the new Web site.

Review the following:

Conduct a client interview using the client survey. Summarize your findings and write a one page project brief. Project Brief required components:

  1. purpose & business objectives
  2. audience definition
  3. value to audience
  4. desired perception
  5. technical and user needs

Lab 2 - Define the primary audiences

Look back at the client survey and project brief you completed in Lab 1 and develop 3 personas representing different user types within the primary audience. Use the persona template to bring an imaginary audience member to life by filing in the following details:

  • photo
  • name
  • quote
  • description
  • demographics
  • technical profile
  • top three user goals

Discuss whether or not these different personas may interact with each other on the site, and how they would do so.

Product and Audience Definition
Criteria Performance Quality Score
0 points 1 point 2 points 3 points
Project Definition The project brief was incomplete or does not present the full picture of the project. Assignment is complete but large portions demonstrate a lack of understanding of the difference between business goals and user needs. All the main components are present and the full story is told, but some areas are lacking in the appropriate level of detail, or do not demonstrate a well-balanced perspective between business and user needs. The brief is written in a clear, actionable manner and shows a solid understanding of the difference between business and user needs.  
Target Audience Definition The assignment is incomplete, or the personas created do not accurately represent the target audience previously defined. The personas created fit the target audience, but the rationale behind representing these three personas is not clear (for example, the personas seem fairly similar to each other) The personas are clear and represent the target audience well, but the description of how they relate to each other (or interact with each other) is not fully explored. The personas are clear and their relationship to each other on the site (or in the larger context) is well-reasoned and well-written.  

Lab 3 part 1 - Conduct a heuristic analysis of an existing site

The point of this activity is to build skills in evaluation of a site according to common usability guidelines (also known as “heuristics”). The most commonly referenced set of heuristics are those made known by Jakob Nielsen. These two articles provide those heuristics and details on conducting an analysis:

To the instructor: Select an existing web site that can be easily accessed (no registration required for most areas). Provide students with the following focus:

  • The URL to be analyzed
  • The primary audience of focus (for example, parents of young children, for a parenting advice site)
  • 3–4 scenarios that should be considered (for example, finding an answer to a medical question, finding a pediatrician in the area, signing up for a newsletter)

To the students: Conduct a heuristic analysis using Jakob Nielsen’s 10 usability heuristics. Note at least 10 findings and discuss the usability impact of each. Once you are done, share your findings with the rest of the class and note the degree to which findings overlap from student to student.


Lab 3 part 2 - Identify Design Patterns

Read chapters 1 and 2 of Jenifer Tidwell’s book, “Designing Interfaces,” to get an understanding of design patterns and how they are used. Identify at least 4 design patterns being used in the site from your heuristic, and describe how the sites design follows each pattern (patterns can come from anywhere in Tidewell’s book, not just the first two chapters — students can also see much of the information online at the Designing Interfaces (Web site). Discuss the specific design for each that was chosen within the site, and whether or not you think there was a better alternative to solving that particular design problem.


Research & Evaluation Methods
Criteria Performance Quality Score
0 points 1 point 2 points 3 points
Heuristic Analysis The heuristic analysis was incomplete. Findings are poorly written or communicated. The analysis is complete, but findings do not focus on the audience or scenarios provided. Usability impact of findings are not clearly communicated. Focus and findings are appropriate, but many findings tend to be in trivial areas with larger issues being missed. Most issues with high usability impact are found, and good rationale is made in the analysis regarding the impact of each.  
Design Pattern Identification The assignment was not completed, or none of the chosen patterns are truly representative of what is seen on the site. Some of the chosen patterns are represented on the site, but the description of how the site follows them demonstrates an unclear understanding of the purpose of the pattern. All patterns are accurately chosen and represented, but alternative designs are vague or do not clearly demonstrate an improvement All patterns are accurate and alternative designs are specific and thoughtful, demonstrating an improved design  

Lab 4 - Define 10 Key Tasks

For the instructor: For this lab, 1-3 different project briefs for a project that can easily include field observations as part of the design exploration (depending on course length this could be an exercise you give to the class; see the Project Brief activity above for input). For example, an information kiosk at a museum, a concierge service in a hotel lobby, a self-serve kiosk at a fast food restaurant, or a student’s dashboard in a computer lab could all allow for observations as part of persona development. Students will use this information to outline key tasks.

For students: Using the materials provided, create a short persona for the site (1–2 paragraphs, text only) and outline 10 tasks that the persona may perform on the site. If possible, go to a relevant location and observe the people, context, and activities there as an input to this.

Tasks should be multi-step (around 2–5 steps) but specific, leading to a definite conclusion. For example, the task “research information on exhibits” would be too vague. Some good examples are:

  • “Find the restrooms using an interactive map”
  • “Choose which toy to include in the kid’s meal”
  • “Post a question to a class discussion”


Lab 5 - Create Storyboards

Read pages 147–150 of “A Project Guide to UX Design” on the process of Storyboarding. Choose 2 tasks from the list above and create storyboards that represent the user’s initial need, the thought process that leads the user to the site, his/her experience when using the site, and the result.

Conceptual Design
Criteria Performance Quality Score
0 points 1 point 2 points 3 points
Task Definition The assignment was incomplete, tasks were vaguely defined, or the tasks did not fit the persona chosen Tasks listed were complete, but the tasks were too large and/or did not suggest a definite conclusion Tasks are the appropriate level of specificity, but some do not fit the probable needs of the chosen persona - or the persona definition is too broad Tasks are specific and appropriate, and fit with the persona details (which are clear and realistic).  
Storyboarding The activity is incomplete, or the student did not include the persona as part of the context of the task The full task is represented, but there are gaps in the overall process - or the thinking/behavior of the persona chosen is not realistic The task is well detailed and appropriate for the persona chosen. Interaction design details are complete and usable, getting the job done, but may not demonstrate much innovation in the design or speak to high user satisfaction. Tasks are specific and appropriate, and the scenario involving the persona is clear and realistic. The context of use is well-represented (for example, collaborations with others during the process). Creativity and critical thinking are apparent in the solutions presented.  


Lab 6 - Write a Functional Spec

Continuing with the concept created in Labs 4 and 5, write a short functional spec representing the major features to be included in the project. Each major item should have a heading, a short descriptive paragraph as to the purpose, and related tasks. For example:

  • Heading: Class Discussions
  • Description: Discussion boards will be provided for students to discuss topics posted by the instructor, and to ask clarifying questions of other students
  • Tasks: Post a new conversational topic, post a reply, search for a topic

Document the desired functionality and prioritize each item into the following categories:

  1. Required functionality
  2. Preferred functionality
  3. Bonus functionality


Lab 7 - Create Interaction Designs

Read chapters 10 and 11 of “A Project Guide to UX Design” covering site maps, task flows, and wireframes.

Create a site map representing the navigational areas of the site. Be sure to include a framework that accounts for all required functionality.

Choose 1 feature from the functional spec and create tasks flows for each of the tasks within them. Then, create a series of wireframes (6–8) that represent the full flow for that feature, from starting point to finish. Use notes to indicate any behavior within the page that may not be clear, and to indicate how a user would move from one page to the next.


Lab 8 - Communicate the Design

To the instructor: A key factor in the success of an interaction designer is to demonstrate an ability to clearly communicate their interaction designs, and the surrounding context of use, to different people on the project team. For this lab, once you’ve given direct feedback on the results of Lab 7 and allowed time for any adjustments, pair up two students and have them each describe their solution to the other using any materials that were inputs or outputs from the previous lab. Once both have had equal time to explain and ask questions(15 minutes each), have them fill out and submit a questionnaire that asks the following of their partner’s work, without having the materials in front of them:

  • What is the main purpose of the site?
  • Describe a typical user.
  • Describe one of the tasks included. What need is driving that user to complete that task?
  • How does this design support them through the task?


Detailed Design
Criteria Performance Quality Score
0 points 1 point 2 points
Functional Specification Functional spec is incomplete and/or irrelevant to the clients’ needs. Functional spec is unclear or poorly written. There are three or more grammatical errors. Functional spec includes required and preferred functionality. Spec reasonably relevant to the clients’ needs. Spec include some irrelevant information and/or is lacking in some details. Functional spec is well written and clear. There are three or fewer grammatical errors. Functional Spec includes required, preferred and bonus functionality. Functional spec is extremely relevant to the clients’ needs and is well detailed. Functional spec is very well written and clear. There are no grammatical errors.  
Interaction Design Some materials within the assigment are incomplete, or the different pieces do not seem to belong to the same site. All materials are present, but the relationships between materials (site map, task flows, and wireframes) are not clear; or there is insufficient detail in one or more of the materials to tell the full story of the interaction. All materials are complete and the full story is told; the student has included enough detail in each to represent the task fully, and has demonstrated a solid anticipation of user needs and behavior.  
Communication (note, these points are assigned to the communicator, not to the partner) There is a clear mismatch between the materials as designed by the student, and the description provided by their partner. The mismatch represents a significant difference in understanding (to the point where problems in the project are very likely to occur) The description represents the major points of the interaction, to the point where the partner would likely be successful in implementing the design. However, there is little indication that the partner has internalized the overall context, purpose, or design details. The description demonstrates a solid understanding of the purpose of the project and the value of the particular design. The partner seems to have acquired insights into the purpose, the user, and/or the design of the solution that goes beyond repeating items from the materials.  


Lab 9 - Evaluate Prototyping Tools

Choose 3 prototyping tools that you have access to. Possible prototyping tools include:

  • Omnigraffle
  • Microsoft Visio
  • Adobe Flash
  • Balsamiq Mockups
  • iPlotz
  • Adobe Fireworks
  • Adobe InDesign
  • Microsoft Sketchflow

Choose one of the flows you created in a previous lab (ideally one with no more than 3 steps). Recreate that flow in each of the 3 tools. Then, provide an evaluation of each tool along the following lines:

  • Overall ease of use
  • Strengths
  • Weaknesses
  • The types of projects, or points in the process, that would benefit most from this tool

Final - Build a Prototype

To the instructor: have each student spend 5–10 minutes describing their materials from Labs 7 & 8 to the rest of the class. Then, allow each student to pick another student’s work from which to create a light prototype (multiple students should be able to select the same student’s work, as long as it is not their own. You may want to assign extra credit to a student with very popular work if you consider it a sign they’ve chosen an engaging topic, or included great ideas and detail).

To the student: Choose the work of one of your fellow students, and use it to create a prototype based on the tasks they outlined in previous labs. Pick your tool based on your previous review of prototyping tools. Feel free to collaborate with the creator of the materials if you have questions or ideas during prototype creation (note, if the creator’s materials are being used by multiple students, be sure to be respectful of that person’s time and consider a group meeting). Add additional ideas/details if you think they add to the user’s experience.

Then, present your prototype to the class via a live demo.


Prototyping
Criteria Performance Quality Score
0 points 1 point 2 points
Tool Evaluation The review given makes it apparent that the student did not fully attempt all 3 tools; or the points provided are vague or incomplete. Details of the tool’s strengths or weaknesses are complete, but the differences between when each one is ideally used do not appear to be clear or relevant to a project. The review is detailed and well-written, providing a clear differentiation between tools and an understanding of when and how to use them within a project.  
Prototype Creation The assignment was incomplete, and/or the live demo was poorly given (for example, interactions were not described clearly, or the student had not tested their prototype and encountered issues during the presentation that were within their control). The prototype represents the functionality of the materials, but the implementation did not introduce new ideas or did not demonstrate an engaging experience (either through the functionality represented, or the description given during the demo). The prototype takes the materials to the next level, in showing an engaging interaction that is true to the spirit of the materials provided and introduces new ideas via use of the chosen tool. The presentation is given in a way that highlights the benefits of the solution and the context of use.  


Examination Questions

Essay Questions

  1. Define Interaction Design, and describe how it is different from Information Architecture
  2. Describe the following approaches: user-centered design, activity-centered design, systems design, and genius design
  3. Define and discuss the key elements to a design pattern

Discussion Questions

  1. Approaches to Interaction Design. Of the four approaches covered in the readings from “Designing for Interaction” - user-centered design, activity-centered design, systems design, and genius design - which approach would you prefer to follow, and why? Which one might you pick if working with a large project team where there are several designers? Are there other factors that may affect your choice of approach?
  2. Methods for Site Analysis. Discuss how usability testing or task analysis can provide information on an existing product. When might you use each method? For a brand new site (where no current version exists to be tested), how might you gather information before design begins?
  3. Design Stages. Discuss the difference between conceptual and detailed design. Do you think it’s important to differentiate between these two stages? Why or why not? If you did separate them, what would you do differently in each stage?
  4. Prototyping. Discuss the pros and cons of the following types of prototypes; paper, sketch interactive, high-fidelity without full functionality, high-fidelity with full functionality


Discussion Questions Grading Rubric Rubric

Criteria Performance Quality Score
0 points 1 point 2 points 3 points
Content Content was not applicable to the discussion. Ideas were incomplete or had inaccuracies, or there are two or more opinions presented without supporting facts. Content is complete and accurate, but lacking in new ideas, or there may be one areas an opinion is presented without supporting facts or references.Content generally doesn’t invite further discussion or investigation. Content is complete, accurate and offers new ideas. The discussion is well supported with details that explain the participant’s conclusions.Content encourages further discussion on topic.  
Critical Thinking Lacking critical thinking. Responses tend to be inaccurate or unclear. Lacking critical thinking. Responses tend to address peripheral issues. Generally accurate, but with omissions or clear recitation. Some critical thinking (application, analysis, synthesis, and evaluation) evident, but responses may not directly address the issue. Clear evidence of critical thinking (application, analysis, synthesis, and evaluation). Responses are characterized by originality and relevance to the topic.  

Adapted from http://www.harpercollege.edu/doit/docs/sample_rubric.rtf

Resources

Contributors

Primary course developers: Carolyn Chandler and Jason Ulaszek

Contributor: Russ Unger

Editors: Fred Beecher