Prefer to listen to this lesson? Click below.

Workshop Scenario:

Please think of yourself in the following scenario as you complete this workshop:

You are a student who is interested in pursuing a career in technology. You have always been fascinated by the way technology impacts our daily lives and want to learn more about how software and apps are designed to make our interactions with technology more seamless and intuitive.

In the last lesson, you learned how to clearly arrange your information according to how it should be used. You now wonder how your users could interact with your designs in an efficient and accessible way.

By the end of this lesson, you will understand the principles of interaction design and the importance of usability.

As you work your way through this workshop, you’ll be applying the skills you learn to present your ideas for a hypothetical app that incorporates elements of UX/UI design.

Today, you will be working on your mid-way project.

Lesson Objective

Your objective for today is to learn how to:

• Justify and integrate design choices that support user behavior and usability.

• Create a preliminary presentation displaying and describing your app progress.

As you read, please consider the following questions:

• Explain the difference between affordances and signifiers in interaction design. Give an example of each.

• What are some common accessibility issues that designers should be aware of?

Lesson 4: Interaction Design

Interaction design is the art and science of creating user-friendly digital products. It's about designing interfaces that are intuitive, efficient, and enjoyable to use. Interaction designers work to understand how users think and behave and use that knowledge to create interfaces that align with users' mental models.

Consider your favorite digital product, whether a website, app, or software program. Chances are, it has been designed with interaction design principles in mind. The buttons are placed where you expect them to be, the navigation is easy to use, and the feedback is immediate and helpful.

4.1 Principles of Interaction Design

Let's explore the basic principles of interaction design:

• Affordances are cues that suggest how an interface element can be used, like a button looking like something you can press.

• Signifiers are visual or auditory cues that indicate an affordance, like a button changing color when you hover over it to show it's clickable.

• Mappings are the relationships between user actions and interface responses, like clicking a button that performs the action you expect it to.

• Feedback is the response from the system to the user's actions, like a system providing feedback to let you know that your action was successful.

• Constraints are limitations on user actions to prevent errors or misuse, like a date field only allowing input in a specific format.

• Mental models are the users' understanding of how the system works. Designers should construct products that align with users' mental models to create intuitive interfaces.

These interaction design principles can help designers create interfaces that are easy to use, efficient, and effective.

4.2 Usability in Interaction Design

Usability is all about making sure that a product meets the needs of its users and is easy to use. This is critical because it affects how users perceive a product and whether they're willing to use it again in the future.

Designing for Accessibility

One important aspect of usability is designing for accessibility. This means designing interfaces that are usable and accessible to people with visual impairments, hearing impairments, motor impairments, and cognitive impairments.

When designing for accessibility, designers must consider the specific needs of users with disabilities. For example, users with visual impairments may require screen readers or high-contrast interfaces.

Users with hearing impairments may require closed captions or sign language interpretation. Users with motor impairments may need interfaces that can be navigated with a keyboard rather than a mouse. And users with cognitive impairments may require interfaces that use clear and concise language.

Designing for Efficiency and Learnability

When we design efficient interfaces, we reduce the number of steps required for users to complete tasks. This means that users can complete tasks quickly and without frustration.

Additionally, when we design interfaces incorporating learnability, users can quickly understand how to use them. This means that users can get started with the product immediately without spending time learning how to use it.

Designers can improve efficiency and learnability by reducing unnecessary complexity. When we simplify interfaces, we make it easier for users to understand how to use them. This means removing extreme elements, using clear and concise language, reducing the number of steps required to complete a task, and avoiding overwhelming users with too much information.

Closing Assessment:

Now that you have reached the end of this lesson, you should be able to answer the following:

1. Explain the difference between affordances and signifiers in interaction design. Give an example of each.

2. What are some common accessibility issues that designers should be aware of?

Mid-way Project: Your turn to show what you know

In this project, you will have the opportunity to apply the principles of UX and UI design that you have learned in the first four lessons of this workshop. You will be creating a presentation that describes how you are designing an app that incorporates all the objectives covered in lessons 1-4.

You will be evaluated on the clarity and effectiveness of your presentation, the quality of your design work, and your ability to apply the principles of user experience and user interface design to your app.

Your presentation should be 6-8 slides and must include the following:

• Introduction: Briefly introduce the app that you are designing and its purpose.

• User Research: Explain the user research methods you used to gather information about your target audience.

• Personas: Present at least 2 personas you developed to represent your target audience.

• Information Architecture: Describe the information architecture you developed to organize the content of your app.

• Interaction Design: Describe how you designed the interactions in your app to create a seamless user experience.

• Accessibility: Describe how you designed your app to be accessible to all users, including those with disabilities.

Project Steps:

Step 1: Review lessons 1-4. Identify the information you want to include in your presentation.

Step 2: Outline your information and brainstorm your thoughts and ideas.

Step 3: Using Google Slides/PowerPoint, create a 6-8 slide presentation outlining your app components based on the points mentioned above.

Step 4: Share with your family and friends for feedback.

Step 5: Share the Google Drive link to your presentation below. Please ensure that your link is accessible and can be viewed. Save your presentation as you will be adding to it for your final project.

Course created by: Sarah Moutaoukil & Samantha Nally