Interaction Design

1. Interaction Design A.CHARLES

2. The design world is always changing. Roles, mediums, trends, and technology continue to evolve.The word “design” itself is a pretty broadly used term and can apply to everything from fashion and tech to manufacturing and architecture.

3. Interactive/Web DesignerFrom landing pages and blog templates to entire websites and mobile apps, the digital space is an interactive designer’s domain.Interactive or web designers also need to understand the technology used to build websites and turn their designs into actual online experiences.In general, web designers will know Adobe Creative Suite (Photoshop, Illustrator, etc.) and some may also know CSS and HTML.

4. User experience (UX)explores the experience people have using a site, app, or tool to ensure it’s easy to use and not confusing.User interface (UI)involves how people navigate through a site, app, or tool, using elements such as buttons, menus, color, and images.Many designers may be skilled at both UX and UI.

5. Interaction designfocuses on how people are involved with the experience of the product, for example, a progress bar that shows where you are while signing up for a site or an icon that changes color to signal you’ve turned on a setting.Information architecture (IA) involves creating the blueprint for a website by making sure it’s organized in an understandable way. Information architects come from a variety of backgrounds, including design, writing, library science, and psychology.

6. Interactive designers createWebsites, landing pages, microsites, web pagesBlog templates and themesMobile appsBanner adsSocial media assetsEmail marketing assetsSkills: Photoshop, Illustrator, Dreamweaver, CSS, HTML, wireframing, prototyping

7. The 5 Pillars of Interaction DesignGood interaction design is driven by a human connection. But what drives human connection and how does that translate into a computerized interface?Success depends on the perfect execution of UX fundamentals.

8. 1. Goal-driven DesignEven if you’re not personally conducting user research, you still need to know how to build the insights into the design.a. Personas — Personas are fictional characters created from the behaviors and psychologies of your target users. Personas come in handy as a reference when making crucial design decisions. for example, “What kind of checkout process would the Seasonal Shopper prefer?”

10. b. User Scenarios — Related to personas, user scenarios explain how the personas act when using the site. For example, “It’s Black Friday, and the Seasonal Shopper has a long list of presents to buy online before work.” User scenarios force you to explore the context in which the persona interacts with your product.

11. c. Experience Maps — Going one step further from user scenarios, experience maps chronicle all the conditions surrounding a single interaction, including emotion and external circumstances. “Angry that her skiing trip ended in a broken leg, the Seasonal Shopper must do her Christmas shopping as quickly as possible.”These three techniques create a complete picture of the experience: the user, the scenario, and the entire emotional journey.

12. 2. UsabilityUsability is the bare minimum for design. If your audience can’t use the product, they certainly won’t desire it. Let’s look at EventBrite’s seat designer.This online app lets event organizers create a reserved-seating event from start to finish with a high level of detail (such as determining rows, tables, and a dance floor, if needed). It consolidates a multi-step, multi-program process into a single linear path.

14. Like Eventbrite, a system’s usability must be effortless. The less attention the user pays to figuring out the system, the more they can accomplish the task at hand.

15. 3. Affordances & SignifiersThe concept of affordances is that a function must speak for itself, and suggest its own use (i.e. a road affords walking). Signifiers hint at the affordance (i.e. the road’s flat surface signals you to walk with your feet).Affordances in DesignWithout signifiers, users can’t perceive the affordance.

16. In the above example, you can see the progression of button design. The first stage lacks any signifiers and looks just like standard text, while the third stage resembles a button with its rounded edges and gradient.

17. In the above iPhone dock example, you can see how the rounded edges let us know that we can interact with the buttons, while the metaphorical images (phones, envelope, musical note) communicate the purpose. Signifiers also work as metaphors, because people also need to know why they would interact with something, not just if it’s possible.

18. 4. LearnabilityIn an ideal world, a user remembers every function after a single use. Reality is much different. Familiarity and intuition must be designed into every interface.Successful interaction design boils down complexity by creating consistency and predictability. Consistency creates predictability, which improves learnability.

19. A common tactic for improving learnability is using UI patterns. Many sites and apps already use these patterns so the user is familiar (plus the pattern is consistent), and you’re still allowed plenty of creativity to customize the design elements for your site. For example, Google

20. 5. Feedback & Response TimeFeedback is the heart of interaction. Since every interaction is a conversation between your user and product, your product better be friendly, interesting, and helpful.

21. Whether an elaborate animation, a beautiful  micro-interaction, or a simple beep, your product must communicate if the task was or was not accomplished (and what to do next).

22. In the below example from Hootsuite, the owl simply “goes to sleep” The feedback is intelligent and fun, and actually turns a possibly negative experience (stopping updates) into a positive one. Another key factor in feedback is response time. The best response times are as immediate as possible. Imagine how infuriating it would be if you were playing a guitar, and every note came seconds after strumming.

23. ClosingInteraction design isn’t about how interfaces behave, it’s about adapting technology based on how people behave. You must know your target users like and expect, functionally and emotionally. Based on the technological constraints, you must then design the product for desirability.