Es/Interact/Diseño de Interacción 1
Course Number: US-300
- 1 Course Description
- 2 Prerequisites
- 3 Recommended Textbook(s)
- 4 Recommended Reading
- 5 Technologies Required
- 6 Competencies
- 7 Assignments
- 7.1 Course Blog
- 7.2 Reading Assignments
- 7.3 Labs
- 7.3.1 Lab 1 - Determine the business purpose of a new Web site
- 7.3.2 Lab 2 - Define the primary audiences
- 7.3.3 Lab 3 part 1 - Conduct a heuristic analysis of an existing site
- 7.3.4 Lab 3 part 2 - Identify Design Patterns
- 7.3.5 Lab 4 - Define 10 Key Tasks
- 7.3.6 Lab 5 - Create Storyboards
- 7.3.7 Lab 6 - Write a Functional Spec
- 7.3.8 Lab 7 - Create Interaction Designs
- 7.3.9 Lab 8 - Communicate the Design
- 7.3.10 Lab 9 - Evaluate Prototyping Tools
- 7.3.11 Final - Build a Prototype
- 8 Examination Questions
- 9 Resources
- 10 Contributors
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.
- Krug, Steve. Don’t Make Me Think: A Common Sense Approach to Web Usability. Grand Rapids: New Riders, 2005.
- Unger, Russ and Carolyn Chandler. A Project Guide to UX Design: for User Experience Designers in the Field or in the Making. Berkely: New Riders Press, 2009.
- Tidwell, Jenifer. Designing Interfaces: Patterns for Effective Interaction Design. : O'Reilly Media, Inc., 2005.
- Saffer, Dan. Designing for Interaction: Creating Innovative Applications and Devices. Berkely: New Riders Press, 2009.
- Hoekman, Robert. Designing the Obvious: A Common Sense Approach to Web Application Design. 1st. Berkeley, CA: New Riders Press, 2006
- Spool, Jared M. The Elements of a Design Pattern. UIE.com, 2006
- Yahoo! Yahoo! Design Pattern Library. Yahoo! Developer Network, 2009
- Tidwell, Jenifer Designing Interfaces (Web site). Designing Interfaces, 2009
- 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)
|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|
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.
Course Blog Grading Rubric Rubric
|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.|
Aside from the readings noted in each lab, the following readings will provide background relevant to essay and discussion questions.
- Chapters 2, 4, and 12 of A Project Guide to UX Design: for User Experience Designers in the Field or in the Making
- Chapters 2 and 3 of Dan Saffer’s Designing for Interaction: Creating Smart Applications and Clever Devices.)
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:
- “A Project Guide to UX Design”, pages 56–66
- Kelly Goto’s Communication Brief Worksheet
Conduct a client interview using the client survey. Summarize your findings and write a one page project brief. Project Brief required components:
- purpose & business objectives
- audience definition
- value to audience
- desired perception
- technical and user needs
Lab 2 - Define the primary audiences
- “A Project Guide to UX Design” pages 112–125
- The article, Building a Data Backed Persona.
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:
- 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
|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
|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.
|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:
- Required functionality
- Preferred functionality
- 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?
|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:
- Microsoft Visio
- Adobe Flash
- Balsamiq Mockups
- 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
- 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.
|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.|
- Define Interaction Design, and describe how it is different from Information Architecture
- Describe the following approaches: user-centered design, activity-centered design, systems design, and genius design
- Define and discuss the key elements to a design pattern
- 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?
- 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?
- 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?
- 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
|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.|
Contributor: Russ Unger
Editors: Fred Beecher