Foundations of Interaction Design
I teach a number of classes at CCA, including Creative Founder, Story and Play. One year I tried on teaching Foundations. I love the Sophomores, and the class went great, but I found myself a bit bored teaching core concepts yet again. I passed on teaching the class the next year in favor of some other “weirder” ones (like Play!). I want to write up my choices as I designed this class so that other teachers can use this as a resource. And someday I may return to this interesting problem, “How do we make interaction and UX designers?”
Here is the syllabus. The best part of it is, IMO, the deliverable checklist.
Goals and Process
When I committed to teaching this class, I had a lot of decisions to make. My Foundation class would be 15 weeks long, once a week, for six hours. This may feel like a lot of time, but it’s not, really, to teach the foundations of interaction design. I believe it’s not enough to teach “pure” interactive design, you have to teach the skills that support good HCI decisions. One well designed interactive flow is informed by knowledge of psychology, data and information theory, understanding of implementation and more. Not quite as bad as Dan Saffer’s diagram, but close.
When deciding what to cover, you have to look at the student in context of what other classes they are required to take, and what classes they’ll take in the future. I know they’ll have Research, Story and Systems in the spring, and they will take Visual Design and Prototyping the same time as Foundations. So I can lightly touch on those subjects, while delving more deeply into core and related disciplines that they might not get any other time. The sketches above were me trying to decide what were the core ideas I wanted to impart. I also made a lot of sketches just of IxD process.
As well, because it’s a pre-existing required course, I am handed learning goals. Here they are, shown in Scrivener (I plan classes in Scrivener, which is novel writing software. It’s designed for long form, which courses are. I like the modular nature and corkboard. Want my file? It will work in a mac, but work better in a PC.)
These goals are pretty broad. I’ve taught User Experience Design several times before, so I had some feelings about what young designers need to know. I decided classic HCI-style Interaction Design would be the heart of the class, but I wouldn’t ignore Information Architecture, Information Design and Game Design. IA, because all software is full of data these days, Info Design, because communication is core, and Game Design because my students grew up on games. Might as well leverage their passion to teach. Using Game Design to teach interaction design (and more) has proven an effective strategy.
Horizontal Teachings
As well as core craft skills, I always have “horizontal learnings” or things that will be practiced again and again throughout the class.
- Sketching. Visual communication is critical for designers. The started every class with sketching. They did sketchnotes. The sketched throughout the project. And when I learned they sucked at sketching, I gave them “scales” to do — practice shapes to improve hand-eye coordination. We followed with weekly drawings. Since we only met once a day, they’d have a drawing a day to do, handed in as a group at the end of the week. I could theme these based on whatever we were covering that week — reverse engineering interfaces and flows, or interfaces on household objects.
- Iteration with Constant Validation. I wanted them to internalize a healthy rhythm of a project, so every single one included research, ideation, research, iteration, etc. We didn’t skip research, even though it was light and varied. I trusted the Design Research class to compliment my teaching, but my class is where they’d build the instinct to start with research. (I hoped!) Iterative loops is found in the experiential learning cycle, as well as in UCD and Lean Startup. They had to learn this. They had to live this.
- Structured Actionable Critique and Peer Coaching. I do “Secret Santa” critique, where a student draws three names and that’s who gives critique. That way you don’t have that one dude who critiques everyone, and that one student who hides. All voices are heard. I also gave them a format for critique: Questions first. Then 3 keeps and changes. Finally ideas to explore. Over the semester we played with critique. What if we only asked questions? What if we only said nice things? What happens when we call it coaching rather than critique? It made students conscious of their approaches.
- Clarity despite Ambiguity. This was my ornery objective. I was told undergrads can’t handle ambiguity. But I wasn’t going to tell them there were truths where there weren’t any. So as I introduced each subject — IA, design thinking, user research — I’d send them on a web scavenger hunt to define it. They’d then draw the definition on a large index card, and we’d review the breadth of definitions they’d found. The industry is young and always changing. You have to make your peace with that.
They started with defining Interaction Design…
We’d walk through all their findings, and decide what definition we’d work with in our class.
Instruction
As well as learning objectives, I make a list of core skills I wanted to cover. This is a non-complete list, with links to decks when they exist (mostly from when I taught at General Assemb.ly and Stanford Continuing education). I’ve moved away from decks to lecturing on the whiteboard, interactively, so not everything has a deck.
If you are a practicing digital product designer and you are unfamiliar with any of these concepts, get thee busy!
- Generative research (deck for all kinds of research.)
I know it’s taught elsewhere in the program, so I do a quick overview to both drive in the importance and contextualize it to the project. I used Interviewing Users to teach it.
- Concept Models.
I’ve written a very long article on models, but I emphasize concept models for early stage sense-making. Designers who make concept models before sitemaps, flows, etc make significantly more coherent work.
Forest, then trees. - Information Architecture basics, mostly categorization and metadata. I used my book. Because I can. and I gave them chapters for free. Because I can. And i love them.
- Interaction Design Fundamentals including goal directed design with personas and scenarios, use cases and flows, error state, usage scenarios and more. So much more! Fitt’s Law! Poke yoke! See About Face and Designing for the Digital Age for more.
- Interface Design.
Not look and feel, but affordances. Feedback. Screens, so many screens! - Evaluative Research (same deck as above)
You know, seeing if what you made sucks a little, a lot, or catastrophically.
The Projects
CCA holds studio classes with project-based learning. Projects tend to be the organizing principle behind any course, and project design is critical. Each project has to have needs met by the learnings you with to impart. For example, if you want to teach IA, you need to have a project for software that contains a known data set. If you want to teach error states, there has to be a need for user data input.
You can have one big project, or many smaller ones, or a mix. I favor a mix, doing what I call “spiral learning.” This means in the first project you introduce a set of concepts and skills, and as you work through the next projects you hit those core ideas over and over.
I have many formats for classes, but this one took a favorite five project format. Two tiny projects that bookend the class, and three bigger ones in between.
Project 1: Creating a User Guide to You.
Opening project. Full description here. “students will create a self-portrait by gathering information about themselves and then exploring multiple ways to visualize it using two or more of Richard Saul Wurman’s hatracks, also known as “LATCH”. 2 weeks.
Learnings: Simple categorization, information design.
Next Time: it’s too much to ask sophomores to use data to tell people how to interact with them in a two week project. Just focus on representing data to teach others about an aspect of their lives. It is a great introductory project. I get to know the students, and they get to know each other.
Project 2: Life Logger. Create a tracking device that tells you if you are meeting a personal goal. Full description here. “In this project you will design an app (IOS or Android or other with permission) to track an element of a user’s life they wish to change.” Based on a project designed by Karl Fast. 3-4 weeks.
Learnings: Flows, concept models, input and forms, prompts and notifs, usage scenarios, interface, information design.
Next Time: Reduce student choices of what to track to food, sleep, etc. Make it simple. Layout key elements of project to students: reminders, data entry, data display. Lots of scaffolding needed in this project.
Addendum: Met with erin malone yesterday (8/10/17) and we decided to take this project out, maybe move it to a later class, and replace with a kiosk project. Rough idea: a kiosk at a Walgreens or the like where you print a greeting card with a photograph. Has IA (browsing cards) IxD (placing and cropping the image) and it’s good to design for a infrequent usage scenario.
Project 3: Aesthetics of Interaction Design: A Sketching App in the Style of an Artist
“This app was commissioned by a Museum showing a retrospective of your artist’s work. They want to showcase both the artist’s work, and provide a sketching tool so patrons can feel what it is like to be the artist. You are creating a document for an engineer to build the app. This is the first draft you would use in discussion to find out how feasible the work is, and to help him/her understand your vision.” I invited engineers to come and have the conversations which was EYE OPENING for the students. 3-4 weeks.
Learnings: IA (the artist area), flows, concept models, toolbox approach to interaction (painting area), feedback, affordances, usability.
Next Time: This is an amazing project. Students felt deeply for the artists they chose, and exploded with insights and ideas. It demanded the right cohort of skills from them. Conversations with engineers were educational. I changed from having a project brief, and had it unfold, instead. The three assignments from classroom here
Also, I think this note from me says everything about what should be changed next time. “After further grading of your sketchpad work, I have one thing to say:
ANNOTATE! YOU MUST ANNOTATE! I CAN’T READ YOU MIND! You must tell me what those icons are, what they do, how they work!
http://expiriti.com/education/2014/06/26/lesson-10-communicating-ux-design/
http://wireframes.linowski.ca/tag/annotation/
http://uxmovement.com/wireframes/why-its-important-to-annotate-your-wireframes/
http://boxesandarrows.com/writing-smart-annotations/
https://www.pinterest.com/pin/186758715774030395/”
Project 4: Translate a video game game to a board game.
Choose a video game you love and make a board game out of it. This came from Chapter 4 of Challenges for Game Designers, a fine fine book. As I mentioned, I’d quit fancy project briefs and we’d instead talk through the project extensively. I followed up with a classroom posting, which is here.
It was inspired by Dragon’s Gold from Chalmers but I found the write up in Challenges for Game Designers for usable and actionable.
Learnings: Basic game design (MDA, formal elements) affordances and feedback, INSTRUCTIONS, usability, information design: pretty much everything above and more.
Next Time: I’d change nothing! It was fun, they were critical, smart and capable. It was a blast, and it hit on everything they’d learned so far. And it was fun. They even enjoyed the textbook, which was Tracy Fuller’s Game Design Workshop. It landed on Thanksgiving, so they playtested with family.
Project 5: A User Guide to Interaction Design
A poster explaining what IxD is, why it matters, what its context is, how it works and any other relevant information.
I think I’ll stop here.
I could go over all the awesome books I used (Dan Brown’s Communicating Design kept being invaluable when students got confused and Designing for the Digital Age by Kim Goodwin was critical for foundational knowledge.) I could go into how fun it is to go from theory to super pragmatic, from textbook to cartoons on YouTube, but I’m coming up on 2K words, and I’ve got more screeds to write. If you’ve gotten this far, leave questions and I’ll answer them (tweet at @cwodtke, Medium’s notifs suck.)
My new book on Visual Thinking is out!
Want to get better in business? Learn how to draw. There’s no faster, cheaper prototype in the world than a sketch on a sheet of paper. … With contributions from Amelie Sarrazin, Aleksandra Micek, Taylor Reese, Dan Brown, Daniel Cook, Kate Rutter, Eva-Lotta Lamm, Matthew Magain, Sunni Brown, Cristina Negrut, Daryl Meier Fahrni, Marc Bourguignon, Laura Klein, David Gray, Melissa Kim, Mike Rohde, Brian Gulassa, Andrew Reid, Rolf Faste, Raph Koster, Stone Librande, Robin Hunicke, Alicia Loring, Erin Malone, Stephen P. Anderson, Giorgia Lupi, Alex Osterwalder, Noelle Stransky, James Young, and Dan Roam.
Learn more about Pencil Me in, and purchase: http://amzn.to/2yb69CZ
Go here next to learn about the brilliant work done at Chalmers.
