Design for Humanity: 5 Educators Weigh in on Interaction Design Methods & Tools

The video below shows toddlers interacting with magazines, swiping an image on a single page as if it were a screen. Each toddler tries a number of times, but nothing happens. This scenario is a prime example of the shift in design meaning, context and learning.

With the advent of meaningful content on the web, increases in mobile device usage and growth of interactive technologies, designing for interaction and experiences has become a common professional thread. In today’s environment, interaction design refers to the practice of designing digital products, systems and services based on human goals and behaviors.

The Creative Group 2016 Salary Guide states that an interaction designer with one to five years of experience can make as low as $58,250, and as high as $88,500, while an interaction designer with five or more years under her belt can make up to $120,750, depending on location. Industrial designers (sometimes called product designers) have been addressing interaction and experience for quite a while.

Nevertheless, how does one get involved in interaction design without a background in product design and training primarily in graphic design? Change can be a scary thing for a lot of people; adjusting one’s career after years of one type of professional practice can be daunting. Moreover, when changing design fields, what principles carry over? What technologies and resources should we use? What training do we need? Where do we even start?

interaction-design-expertsHere, HOW has brought together some of the leading educators and experts in the interaction design field to share their best advice on how to better understand—and get involved with—interaction design.

THE IMPORTANCE OF INTERACTION DESIGN

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.

Why is it important for designers to start thinking more toward interaction design?

Joel Beukelman

I have thought a lot about this and I think it all comes down to this: Most tradition visual/graphic design was about communicating a message and selling a brand/thing. Now with web/mobile/tech, those same designers have the opportunity to design the thing being sold. Interaction design is not about the pixels, drop shadows or buttons… Those are the parts that make it up, but the most important thing to consider in interaction design is the product and how the user will use it. I commonly find myself explaining this to many designers transitioning into UI/UX, and it is an important distinction to make.

Secondarily, interaction design is natively technical given the platform. I’m not suggesting all interaction designers should code, but they must understand the patterns and limitations of the technical environment or operating system their designs will live in.

Maggie Hendrie

There are many online resources, weekend workshops, meetups, hackathons and maker labs for professionals and educators with varying degrees of rigor and depth. Aside from certificate and degree programs, I recommend that designers read, attend workshops and try to apply what they’ve learned to a small personal project.

Heather Shaw

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 fields. 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.

Brian Lucid

What brings the diverse ange of interaction design practitioners together is the shared desire to satisfy the needs of users by creating exceptional products and services. Interaction design synthesizes strategy and craft in response to the needs of others. For designers who subscribe to user-centered design advocate Don Norman’s definition of design as “the practice of intentional creation to enhance the world,” interaction design provides an opportunity to reframe and address a range of human problems through an array of designed outputs.


TEACHING & LEARNING INTERACTION DESIGN

Core aspects of graphic design such as visual communication, typography and semiotics are used in interaction design. Interaction design may focus its core values on such aspects as user research, human behaviors and iterative design development, among other topics. If someone wants to learn more about interaction design and has a graphic design background, it’s important to view it as more of a shift in how to use interaction design methods, resources and tools.

How does teaching and learning interaction design differ from traditional graphic design?

Liz Danzico

Investigations into data and design systems, design research and ethnography, physical computing, cognitive psychology, electronics, code, prototyping, user research, technical proficiency and more are often part of the teaching and learning of interaction design. Those may be part of graphic design training, but for interaction design, they’re at the center.

Heather Shaw

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.

Here’s how our programs intersect:

Our program introduces 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.

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 [of] 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.”

Maggie Hendrie

A broad and foundational design education is about creative problem solving, but so many disciplines feed into Interaction Design methodology that the curriculum needs to be integrative. I would define Interaction Design (IxD) as the human experience of digital services, products and environments. Our Bachelor of Science in Interaction Design partners with our Graphic Design and Industrial Design programs to teach each discipline’s fundamentals so that, in class with graphic students, IxD students learn relevant screen and communication design: layout, typography, visual hierarchy, brand, media design and motion graphics. Graphic design education also fosters narrative storytelling, visualization, information design and graphic language. These graphics fundamentals are especially important in transmedia projects where each platform has its own opportunities and constraints but demands a coherent UX.

However, graphic design of the interface is only part of screen-based interaction; IxD involves system and user behavior, information architecture, transactions and user flows amongst other skills. Teaching a human-centered methodology—observing users, building personas and using cases as well as ideating from low- to high-fidelity prototypes—is somewhat different from the traditional graphic approach. There is also an increasing divide between visual interface and interaction design in use of code and prototyping tools. IxD requires design of user behaviors of tap, touch, zoom, wave and more; there is an ever-evolving language that has to be mastered.


INTERACTION DESIGN METHODS

Methods help shape and guide interaction design problems and solutions. Although they aren’t always cookie-cutter solutions, methods can be used from the very start when framing a project, to later in the process when developing prototype ideation and wireframing to determine informational and hierarchical structure. Some methods can be executed individually, but many involve a team or more importantly make use of external personnel such as stakeholders or potential users for testing. Knowing what methods to start with or use takes time and practice, and every company has a different set of problems, so when starting out, try different approaches and see what is the most effective for your problem. Our experts give us a short list of common methods that are used in interaction design.

What are some methods anyone can use in interaction design?

Joel Beukelman

Design Principle & Vision Posters/Decks: This is really the thought and strategy that primes the physical design. It is very theoretical, visually ambitious (not buttons and menus), and high level. This is an essential part of the interaction design process when working on platform products/projects with many teams, apps or third parties. These documents, similar to brand books, provide the leadership and design team a “North Star” for what the design (UI & UX) should and shouldn’t be. These types of documents and design thinking aid in decision-making and alignment across larger teams.

Wireframes: Wireframes mainly focus on information architecture, hierarchy and product structure. This is a great format to communicate UX at a high level to organize content, features and scope. I normally wireframe on whiteboards in a very quick manner, rather than a more formal digital deliverable. For more process/approval-based environments, wireframes can be formalized for scope approval and defining project direction before moving in to the details of the visuals.

Brian Lucid

Problem Framing: The key to success in any project is understanding which questions to ask. Putting a process in place for identifying and framing a problem is a key milestone toward addressing it. Problem-framing restructures the problem and facilitates changing the frame of reference from which the problem is observed. Properly framed design challenges allow for a variety of solutions and take into account constraints and context.

  • Journey Mapping: A journey map is a diagram that depicts, from the user’s perspective, all the positive and negative interactions that the user has with an organization, service, product or brand. Mapping the story of a user’s emotional state allows designers to identify and strategize key moments in the product, service or experience.

journey-mapping-2

Above and below: the process and completed form of a journey map

journey-mapping-1

  • Co-Creation: Bring users into the design process not as research subjects, but as design collaborators. The audience being designed for may have an easier time communicating their needs and desires by showing rather than telling. Empower users to think and make alongside the design team.
  • Narrative Building / Storyboarding: Abstract experiences can be challenging to conceptualize and communicate. Creating narratives—low-fidelity storyboards at the start of the project to high-quality animations as it becomes resolved—helps to clarify a product or service and explain how and where it will be used. 
  • Iterative Prototyping: Evidence-based design requires rapid prototyping coupled with a rigorous and frequent user feedback. This is a process of continual, incremental refinement based upon close communication with users.

Liz Danzico

It’s a challenge to think of one, or even a handful of methods that characterize or typify what interaction designers do, as the context really defines the method. That said, we use sticky notes a great deal. Sticky notes allow us to be lighter weight in our process, getting ideas onto paper and making them public (i.e., sticking them to the wall). In this way, ideas get in front of teams faster before teams move forward to something more high fidelity. We might do this in brainstorming or gathering assumptions. We even use it for sketching or for voting on ideas. There are many methods enabled by this otherwise innocuous piece of paper.


TOOLS OF THE TRADE

While interaction design methods and learning resources provide us with great informational elements, in the end, interaction designers need tools to execute and solve problems. Often the end context in interaction design is digital, but that doesn’t mean that the tools always need to be digital. A common thread in interaction design is that analog tools such as whiteboards are used in various methods such as determining project direction, showing user flow and brainstorming. After the initial phases, interaction designers use digital tools to show prototypes, create visual design elements and manage workflow.

What tools do you use to execute an interaction design?

Joel Beukelman

In addition to the analog resources such as whiteboards and sticky notes, digital tools include:

  • Sketch (visual design & UX flows)
  • Keynote (high-fidelity flows/prototypes)
  • Principle (animation) & Zeppelin (engineering collaboration)
  • Adobe Illustrator (icon design and Illustration)
  • Adobe Photoshop (image manipulation and textures)
  • Google Docs/Slides/Drawings (documentation)

Brian Lucid

When prototyping physical products and environments, a wide range of digital fabrication tools and techniques are employed, including 3D printing, laser cutting and CNC routing. Spatial experiences can be prototyped physically, or virtually using game engines like Unity and commercial virtual reality headsets such as the Oculus Rift and HTC Vive.


In Conclusion

Whether you specialize in interaction design or a more traditional design field, learning to design for human goals and priorities will improve your final product and ensure that your users get what they need from any design. Take advantage of the tools, methods and resources these experts have outlined here to expand your horizons as a designer and refine your practice.


Learn more about interaction design in these courses from HOW Design University:

COMMENT