Design for Humanity Q & A: Interaction Design Methods and Tools for Design Education
Questions by James Pannafino, Millersville University
Answers by Heather Shaw, Lesley University College of Art and Design
In December 2016 HOW magazine brought together design educators to share their best advice on how to better understand — and get involved with — interaction design. Excerpts from this Q&A are published in HOW online, below is the interview in full. Questions and introduction were written by James Pannafino, faculty at Millersville University and author of Interdisciplinary Interaction Design: A Visual Guide to Basic Theories, Models and Ideas for Thinking and Designing for Interactive Web Design and Digital Device Experiences. Answers by Heather Shaw, design department chair and co-developer of the Interactive Design major and online Design for User Experience programs at Lesley University.
Digital products can be accessed by almost anyone, which means it’s an exciting time to be a designer. More importantly, the power to use interaction design to create change and better the world is growing every day. Thinking toward interaction can be seen in many aspects such as humans interacting with devices, objects interacting on-screen, or humans interacting with other humans. ‘Interaction design’ has many levels of meaning to it, and as we learn more about each level, the realization of its importance becomes that much clearer.
— James Pannafino
How does teaching and learning interaction design differ from traditional graphic design?
It shouldn’t be so different. We need to shift design education and take a more holistic approach, with the aim of bridging the disciplines. If we can highlight what traditional design and interactive design have in common, then explore the differences between them, we’ll enhance the overall student experience.
The design program at Lesley University’s College of Art and Design (LUCAD) was traditionally a singular major in “Design.” But we found that our students were biasing the medium with which they were most confident. Most of our seniors’ portfolios were primarily comprised of print, while only a handful of students gravitated towards interactive after taking a required web design course and smattering of “interactive” electives.
Starting this Fall 2016, we’ve overhauled our program to create three pathways: a BFA in Graphic Design, a BFA in Interactive Design, and an online BS in Design for User Experience. By developing the two distinct BFAs and the online BS, we’re allowing for more in-depth exploration within interactive design and creating more opportunities for students to learn across the disciplines.
Here’s how these programs intersect:
Introduce interaction design principles early in curriculum. In their first year of study, all BFA design students must enroll in an introductory interactive course. This course introduces major concepts and working methods within interaction design — and more importantly, presents the content in ways that are engaging and exciting.
Projects are structured as 2–3 week sprints, team-based and collaborative. Most require students to conceptualize, design and build functional and simulated prototypes based on the needs and constraints of a specific user and/or audience. This allows students to engage in a highly iterative process of “making,” working loosely and broadly while exploring different materials and ideas.
Project deliverables range from cardboard and paper prototypes to more polished digital click-through simulations. By exposing students to a variety of methods and assemblages, we build their sensitivity to physical and digital craft and increase their confidence in working across various media.
Share core competencies across all design disciplines. All of our design programs share the core competencies that faculty believe are important: design thinking and research, visual language and form, typography, history and theory, and systems. As a result, the two BFA majors have significant overlap in course requirements. Students spend their first three semesters enrolled in the same required courses, then split off second semester sophomore year to take more specialized courses within their chosen BFAs. In the second semester of their junior year, students are reunited to work collaboratively around a community-driven “epic problem.”
One example is our Design Community Studio course. Modeling professional studio practices, the course connects students to client-driven local initiatives. Last year, the junior and senior students worked in collaboration with the residents of Willoughby Street in Somerville, MA on the Neighborways project. Neighborways is a national initiative that uses street art to subdue traffic in urban neighborhoods; giving priority to children playing, pedestrians and bicyclists along streets and intersections.
Somerville’s Willoughby Street was designated the first Neighborways project on the East Coast. The project required collaboration and teamwork and encouraged students to use a wide array of skills including research, documentation, concept development, sketching, prototyping, testing, and presenting. The students gained valuable experience as they took a large-scale project through multiple redesigns, critiques, and approvals through implementation. The winning concept, chosen by a vote of the neighborhood association, aimed to create a heightened awareness of the ecosystem through nature-inspired street graphics and sculptural bird-house installations.
A short-term goal for the shared junior studio is for students from both BFAs to fuse their skill sets in order to address the needs of real people, and make a meaningful impact within our local community. The long-term goal is to abandon the student portfolio as a disparate collection of artifacts in favor of more self-initiated, comprehensive systems that utilize the processes and practices learned through the disciplines.
Why is it important in your mind for designers to start to think more towards interaction?
Graphic design has always been a collaborative process — between clients, writers, photographers, illustrators, etc. Interaction design is interdisciplinary, drawing from areas such as philosophy, cognitive science, psychology, sociology and business. So interaction design is uniquely positioned at the convergence of several design disciplines. On a simplified level, the process typically associated with interaction design — research, prototyping, testing, refinement (repeat) — can inform and benefit ALL of the design disciplines. This cycle facilitates an understanding of an end user’s goals, and focuses on the structural, informational, psychological, and emotional aspects of designing a successful end product, regardless of its medium. The interaction design process can be applied to nearly every type of design problem.
What are some resources both professionals and educators can use to learn interaction design?
In the introduction to Bill Moggridge’s Designing Interactions, Gillian Crampton Smith suggests there are four dimensions to an interaction design language. Kevin Silver, Product Manager at IDEXX Laboratories, added a 5th: (2)
1-D — words, which are interactions
2-D — visual representations, which include typography, diagrams, icons, and other graphics with which users interact
3-D — physical objects or space, with which or within which users interact
4-D — time — within which users interact: for example, content that changes over time such as sound, video, or animation
5-D — behavior, including action (or operation), and presentation (or reaction)
This taxonomy inspired the core concepts we use at LUCAD to introduce students to interaction design. Our coursework is designed around an adaptation of Moggridge’s and Silver’s five dimensions: space, time, structure, systems, and context.
Space — location, position, frame, focus, point-of-view, depth-of-field
Time — sequence, movement, tempo, transitions, behaviors
Structure — organization, hierarchy, taxonomies, frameworks
Systems — visual, information, dynamic
Context — conditions, settings, discourse, feedback
The language and definitions for these five key elements are still works in progress, but for now this structure works well as the basis for crafting class assignments. In addition to Designing Interactions, these books are often referenced in the classroom:
The Design Method: A Philosophy and Process for Functional Visual Communication by Eric Karjaluoto
Design is a Job by Mike Monteiro
What are some methods someone can use to execute interaction design?
Employ research methods into your work. At LUCAD, all design students are required to take a Design Thinking and Research class in their first year of study. The course is designed to teach various research methods, including how to develop, implement, and analyze research in the context of a design case study. The course provides students with real-world examples, and teaches students how to apply the appropriate research methods in response to the examples. The most common research methods we find useful in the classroom include card sorting, contextual and individual interviews, focus groups, personas, prototyping, and surveys. An extensive list of research methods and definitions can be found on usability.gov.
Our Design Systems class is a good example of students putting research methods into practice. Student design teams were tasked with redesigning the Lesley University campus maps for Lesley students (called “user experts”) with physical, sensory and/or visual impairments. Design students teamed up with user experts and experienced what it was like for them to navigate the campus. This process enabled the design teams to identify specific challenges and pain points the user experts encountered on our sprawling urban campus.
The students designed prototypical solutions that addressed the specific needs of their user experts; proposed solutions included tactile maps, signage/wayfinding, and mobile and sound-based apps. At the project’s conclusion, teams presented their prototypes to Lesley’s director of access services for students with disabilities, and to user experts for feedback and assessment.
Start with an end user. In our curriculum, students design with and for real people in their junior year. Ideally, we would like to have students designing for real users even sooner. For our entry-level courses, we create user personas — usually based on real people or sets of people — and user scenarios, short stories that provide context around the problem the students are designing for. These are important for framing the problem, defining the constraints, and outlining the set of tasks and interactions that are necessary in the students’ design. Here’s a sample template we use to create users and user scenarios as a basis for student projects:
I am (user persona name, 3 characteristics). I am trying to (desired outcome/task), but (problem/barrier) because (root cause). This makes me feel (emotion).
Students are required to reference their end users by name (even if they are made up) so they connect their work to a human. In class, we can always point the work back to the user: “Will this enable _____ to accomplish _____?” This approach forces students to take ownership in the making of their projects.
Use analog processes in your work. Before we redeveloped the design program at LUCAD, we had limited interactive course offerings for the students. Their only introduction to interactivity was through a required beginner web design course, so students equated anything screen-based with coding and programming. Some students embraced the intricacies of web coding, but others complained that they didn’t know how to be creative in the medium. As faculty, we wanted to support the students who enjoyed programming without discouraging most students from taking more interactive courses. We realized that we needed to present interaction design more broadly — as an overall aspect of designing for people.
In response, we added a required introductory interactive course in the freshmen year, engaging the students through analog processes. We start with a project inspired by Nirvan Mullick’s short documentary, Caine’s Arcade: requiring student teams to design and build an arcade game for a user persona with unique constraints. Students begin with physical prototyping: using cardboard and paper to design and build a lo-fi physical game, rolling balls or tossing projectiles to score points. Then they translated what they learned into digital experiences. At a scheduled “game day,” we invite other students and faculty to test the arcade prototypes. In phase two of the project, students re-imagine and redesign their games for mobile. They get hands-on experience adapting physical behaviors to a digital interface.
Starting the project with cardboard prototyping enables students to “make” quickly and easily. They are able to focus on designing for user experience, rather than on the formal qualities of the made object. Working in a lo-fi material like cardboard helps students understand that this project is not about surface decoration, but about facilitating dynamic and engaging action from an audience. The digital portion of the assignment challenges students to translate their games for the screen while keeping the spirit of the gameplay. For their digital mock-ups, students design and build click-through prototypes using Apple Keynote, inVision, and POP (Prototyping on Paper) App: easy-to-learn tools that allow students easily simulate click-through screen-based interactions with no coding or programming knowledge.
Resources
1. https://serc.carleton.edu/econ/interdisciplinary/what.html
2. http://www.uxmatters.com/mt/archives/2007/07/what-puts-the-design-in-interaction-design.php
3. http://reboot.org/2012/02/19/design-research-what-is-it-and-why-do-it/ 4. https://www.usability.gov/what-and-why/user-research.html
Heather Shaw is an associate professor, and department chair for the Graphic Design, Interactive Design, and online Design for User Experience programs at Lesley University College of Art and Design. You can follow her on twitter @heathershaw
James Pannafino is an associate professor at Millersville University, Pennsylvania in the Art and Design Department where he teaches graphic and interactive design courses. You can follow him on twitter @JPannafino
