Tag: Product Design

Microinteractions are trigger-feedback pairs that occur within a digital interface. They serve as subtle cues that inform users about the outcome of their actions or the current status of the system. From a simple button click to a complex animation, microinteractions have the power to transform user interactions, provide valuable feedback, and reinforce brand identity.

When Are Microinteractions Useful?

To understand when a product might benefit from microinteractions, designers must first understand the general principles of usability and interaction design. Microinteractions are not mere aesthetic additions to a product, but an opportunity to help users learn, understand, and operate an interface.

Keeping system status visible

In 1994, usability pioneer Jakob Nielsen listed 10 Usability Heuristics for User Interface Design that are still used today to measure the usability of digital interfaces. Nielsen’s first heuristic, Visibility of System Status, states that a design “should always keep users informed about what is going on, through appropriate feedback within a reasonable amount of time.”

Users should never be left guessing about what the system is doing behind the scenes or whether their actions have been successfully processed. For example, consider an app that allows users to upload files.

After a user starts the upload process, a progress bar dynamically fills up, indicating the percentage of completion. This microinteraction not only informs users about the file upload in progress, but also reassures them that their action has been recognized and the system is actively processing their request. Keeping the status of the file upload visible helps users feel better informed and in more control.

Error prevention and recovery

No matter how thoughtful your design, users still sometimes make mistakes. Nielsen’s fifth heuristic, Error Prevention, encourages designers to minimize errors by providing useful constraints and defaults, and to warn users when performing an action they might regret.

His ninth heuristic, Help Users Recognize, Diagnose, and Recover from Errors, reminds designers to inform users when something goes wrong by using recognizable visual cues, plain language, and clear instructions for resolving the issue.

Creating a new account can be frustrating if users are left to guess whether their password meets minimum security requirements. Inline validation is an effective pattern for reminding users what corrections they need to make their password a valid one.

As users create and confirm their new password, the form provides immediate feedback on the validity of each input field. If a user enters a password missing required characters or creates a mismatch when confirming their password, microinteractions trigger subtle visual cues, such as changing the border color of the field to red and displaying specific error messages. This real-time feedback helps users correct errors on the spot, rather than submitting invalid entries and having to start the signup process from scratch.

Incorporating Microinteractions in User Experience Design

If you’re looking to add microinteractions to one of your existing designs, here are some steps to take.

Identify the interaction problem facing the user

Start by observing target users as they encounter a problem, and learn as much as you can about the user’s goal, the context in which the issue occurs, and the obstacle preventing the user from success.

Test and iterate

Come up with a hypothesis for what might solve the problem, create a minimum viable prototype version of your solution, and test that prototype with target users. Then, use that feedback to iterate on your solution.

Structure the microinteraction

The first two steps listed above are as true for any UX challenge as they are for microinteractions. However, once you’ve verified that a particular microinteraction helps users reach their goals, it’s time to structure the implementation.

Interaction designer and author Dan Saffer coined the term “microinteractions” in his 2013 book Microinteractions: Designing With Details. In his book, Saffer identifies four necessary components of a successful microinteraction:

1. Trigger
   What initiates the microinteraction? Triggers are often user-triggered, typically when the user interacts with an interface. However, some triggers are system-triggered, such as a notification appearing when a user receives an email or instant message.
   
2. Rules
   What happens once the microinteraction is triggered? The rules should make sense to the user. If the user drags a scrollbar downwards, for example, the user expects page contents to scroll upwards. Any other behavior would feel jarring.
   
3. Feedback
   How will the system keep the user informed of what’s happening during the microinteraction? Feedback can be any combination of visual, audio, or haptic (meaning tactile) alerts.
   
   Providing feedback can be particularly critical to reassure users making purchases online. Imagine nothing happening after pressing a button to submit payment. Did the transaction work? Is my credit card number secure?
   
4. Loops and Modes
   Loops determine the duration of the microinteraction, whether it repeats, and whether it evolves over time. Modes are settings that might impact the behavior of a microinteraction. If the user turns on Do Not Disturb mode, system-triggered email or instant messaging notifications should be silenced.

Reflect brand identity

When designing microinteractions, it’s important to know your brand’s voice and tone. How would your product react when celebrating a user’s successful achievement? What language would it use to warn a user about an action that might have negative consequences?

Many companies have created more consistent microinteractions across products by documenting their design, motion, and implementation rules within a design system. For example, Uber uses an animated component called a Snackbar to deliver important status updates such as a user successfully favoriting a location.

Designers can review the documentation within Uber’s Base Design System to learn Uber’s general motion principles, the specifics of designing a Snackbar component, and guidelines for crafting Snackbar messaging to provide user feedback.

Do You Have an Eye For Detail?

A lot of considerations go into creating a successful microinteraction, including researching user behavior, testing out different design ideas, communicating with developers, and understanding a company’s brand voice. If doing big work to craft small design details sounds like an exciting process, consider applying to Flatiron School’s Product Design Bootcamp.

Not sure if you’re ready to apply? Download the syllabus to learn more about the skills you can acquire in our bootcamp.

And if you are curious about what students learn during their time at Flatiron, attend our Final Project Showcase.

Most designers should already be aware of the importance of accessibility. After all, UX designers spend their careers identifying and removing obstacles between users and their goals. In the case of accessible design, that means testing whether users with disabilities can navigate and understand your content using the assistive technologies they depend upon.

Knowing the principles of digital accessibility is critical for designers. But if you’re the only person at your organization advocating for users with disabilities, your team won’t build accessible products. Accessibility requires a company-wide commitment, an inclusive hiring process that actively seeks the perspectives of people with disabilities, and a structured process of planning and testing. An organization’s accessibility maturity is a measure of the effectiveness and sustainability of its accessibility practices.

But what happens if you’re at a company with little to no accessibility maturity? How can designers make the case for a product design and development process that prioritizes accessible outcomes?

Case #1: Accessible Design is the Right Thing to Do

Users with disabilities deserve to be able to use your product, and denying them access is discrimination. This is the ideal reason organizations should embrace an accessible approach.

Any designer who truly values usability should understand that no product is truly usable until everyone can use it. This definition absolutely includes users of assistive technologies.

While there are numerous types of assistive technologies used to navigate the web, some of the best-known tools include:

• Screen readers: software that reads web content aloud to assist users who are blind or have low vision
• Screen magnifiers: software that increases the size of text and other web content for users with low vision
• Alternative input: some users are unable to operate a mouse or keyboard, and depend on alternate methods of controlling the computer, such as:
  • Voice recognition: Users provide commands to the computer verbally
  • Eye tracking: Users control the mouse pointer via eye movements and blinking
  • Switch controls: Users with limited mobility can navigate computers using, for example, switches controlled by pressing a button or by the user’s breath

Disability and accessibility expert Sheri Byrne-Haber recommends showing team members numerous assistive technology demonstrations when advocating for accessible solutions, which presents users of assistive technology as highly capable once usability barriers are removed.

Accessible Design Supports All Kinds of Disabilities

As Microsoft’s Inclusive Persona Spectrum makes clear, accessible design doesn’t only support users with permanent disabilities. Some disabilities are temporary, affecting the user for a limited time. Temporary disabilities might result from illnesses, injury, or surgery.

Other disabilities are situational, meaning the user’s abilities are impacted by specific, short-term circumstances.

Captions, for example, make audio and video content accessible for all of the following:

• Users with a permanent disability such as deafness
• Users with a temporary disability such as an ear infection
• Users with a situational disability such as working in a noisy room

Accessible Design Improves Usability For All Kinds of Users

The usability benefits of accessible design frequently extend to all users. This phenomenon is known as the curb-cut effect. 

It may seem difficult to imagine a modern city without ramps cut into sidewalks to provide access for people in wheelchairs, but disability activists fought for decades for the right to usable sidewalks. Curb cuts specifically benefit people in wheelchairs, but they also make access easier for people pushing strollers, rolling luggage, or using crutches. 

Returning to our example of captions for audio content, while statistics suggest that 15% of US adults have some degree of hearing loss, 50% of Americans watch videos with subtitles most of the time. So while captions are a must for deaf users, they also assist other viewers, including:

• Users who aren’t native speakers of the language used in the video
• Users watching the video at a low volume or in a noisy environment
• Users who use captions as a concentration aid

Case #2: Accessible Design is Good For Business

In June 2020, Twitter experienced a public relations fiasco when it released an inaccessible audio tweets feature without captions. The company admitted it lacked a full-time accessibility team that would have caught the issue during the planning and testing phases, and more than a year passed before Twitter finally launched accessible voice tweets. 

While the ethical argument outlined in the previous section of this article still applies—Twitter needed higher accessibility maturity because providing audio content without captions discriminates against users who depend on them—the bad publicity surrounding the inaccessible audio tweets also undoubtedly harmed Twitter’s reputation as a company. How can designers make a business case for building accessible products?

Accessible Design Increases Market Reach

The United Nations estimates that 15% of the world’s population lives with a disability. That number rises to over 46% for people 60 years and older.

In the United States alone, there are approximately 20 million working-age adults who report at least one disability, with a market share of about $490 billion.

In addition to enhancing your organization’s reputation as disability-friendly, building accessible products means people with disabilities can spend their money at your business and not somewhere else. And customers with disabilities are frequently highly loyal; due to the difficulty of finding accessible accommodations, for example, disabled travelers tend to find one solution and stick to it.

An accessible website is also easier to find using search engines, thanks to the SEO benefits of semantic HTML markup and accessible media content. Google and other search engines value accessibility best practices such as:

• descriptive and properly ordered headings
• descriptive link text
• alternative descriptions for images
• captions and transcripts for audio and video files

Accessible Design Can Lower Operational Costs

If users with disabilities are able to conduct successful transactions using your product, that means fewer complaints, which lowers the amount your business needs to spend staffing customer service centers.

Accessible Design Leads to Innovation

A common misconception about accessible design is that accessibility compliance stands in the way of the creation of innovative products, when in fact much of the technology users currently rely upon for communication was originally invented to help users with disabilities, including the following:

• Keyboards: typewriters with keyboards were initially invented in the early 19th century to help blind people compose letters
• Transistors: the first transistorized consumer product in the US was a hearing aid
• Captions: Captions first appeared on TV in the 1970s to assist viewers who are deaf and hard of hearing
• Email: Vint Cerf, who helped create the first email service connected to the internet as well as the TCP/IP protocol, sees email as a powerful communication tool for hearing-impaired users like himself
• Multitouch interfaces: A graduate student battling carpal tunnel syndrome developed the multitouch technology powering the 2007 launch of the iPhone

Case #3: Accessibility Compliance Avoids Lawsuits

Avoiding lawsuits isn’t the ideal motivation for an accessibility program, as it tends to lead to doing the bare minimum, reactively conducting audits and applying fixes rather than proactively building a sustainable level of accessibility maturity. 

Still, if the ethical and business cases for accessible design don’t sway your organization, perhaps the very real threat of a lawsuit will.

Accessibility Lawsuits are Increasing, and Quick Fixes Aren’t Helping

From 2019 to 2022, the number of website accessibility lawsuits filed in federal courts annually increased from 12 to 14%. By 2023, the total number of lawsuits had climbed to more than 4,600. 
What’s striking about the 2023 numbers is that over 900 of the lawsuits were against businesses that included accessibility overlays on their websites.

Accessibility overlays are automated plugins that attempt to improve a website’s accessibility through external third-party code. While these overlays promise a quick fix, thus far they’ve proved no substitute for a robust accessible design process. In fact, a blind user named Patrick Perdue told The New York Times in 2022 that overlays make using a screen reader to navigate the web more difficult:

“I’ve not yet found a single one that makes my life better . . . I spend more time working around these overlays than I actually do navigating the website.”

Solving For Accessibility is Cheaper Than Settling a Lawsuit

According to attorney Kris Rivenburgh, businesses targeted in web accessibility litigation can expect to spend a minimum of $25,000 in legal fees and remediation expenses. And the costs can sometimes be far higher. 

In the court case Robles v. Domino’s Pizza, LLC, a blind user named Guillermo Robles sued Domino’s Pizza because its website and mobile app were not accessible using a screen reader. The pizza chain spent six years in court arguing unsuccessfully that the Americans with Disabilities Act (ADA) should not apply to websites. 

By the time the Ninth Circuit Court of Appeals confirmed in 2022 that websites qualify as “places of public accommodation” and deserve ADA protection, observers estimated that Domino’s had spent millions of dollars in legal fees. And by fighting the lawsuit, Domino’s established a reputation as a brand willing to discriminate against users with disabilities.

Most organizations would prefer to avoid serious legal fees and a similar hit to their reputation. The best strategy to avoid lawsuits is a high level of accessibility maturity—one you can advocate for as a compassionate and informed designer.

Interested in Designing for Accessibility?

If designing products that people with disabilities can use aligns with your passions, consider applying now to Flatiron School’s Product Design Bootcamp. Our curriculum contains numerous lessons on working accessibility into your design process and complying with accessibility guidelines.

Not sure if you’re ready to apply? Download the syllabus to learn more about the skills you can acquire in our bootcamp.

And if you are curious about what students learn during their time at Flatiron, attend our Final Project Showcase.

As a product designer, I’ve seen talented product designers with wireframes that achieved cosmic perfection fail. I’ve seen lesser (albeit capable) product designers succeed time and time again. The reason? Successful designers know how to tell amazing, memorable stories in their design presentations to sell their work. 

Why Do UX Designers Create Presentations?

Design presentations serve a few purposes. They are a chance for designers to connect their decisions to the needs and problems facing either the business or the user. They also allow designers to gather feedback and alignment from the team.

So, say you work at a tech company that (like most) prides itself on making decisions based on data. Why not just prepare a series of charts and diagrams? While data does an excellent job of narrowing decisions, it doesn’t capture human problems particularly well. To evangelize a product team and give an engaging UX presentation, you need something more potent, something that transcends the boundaries of statistics and wireframes—enter storytelling.

Why is Effective Storytelling Helpful When Presenting UX Work?

Imagine you’re presenting a new feature to your team. You could list the features you’ve designed, the user flow diagram, and maybe even some specs for the work. I’d argue this style of presentation doesn’t rationalize your design or sell your audience on your work. Instead, it proves how much work you did, which isn’t the goal of a design presentation.

Successful narrative design in presentations is all about walking your audience through a set of problems facing a user, a sequence of how they look for solutions, and ultimately, how they experience relief and delight from that problem. Executives believe in the value of storytelling in business, because they know it helps sales, marketing, and engineering align around a common set of goals and advocate for excellence. (Not to mention a study that found 65-70% of information retained via storytelling versus 5-10% for simple charts and graphs.) 

“You don’t sell a house by talking about sheetrock. You sell it by getting the buyer to picture themselves in the neighborhood.”
– Mike Montiero, Mule Design Studio

Storytelling fosters empathy. When we put our audience in the shoes of a user, it opens the door for more thoughtful discussion and problem solving because it invites non-designers to weigh in on problems they understand instead of feeling removed from technical jargon.

6 Storytelling Techniques to Apply to Your Design Presentations

Now that we’ve established the importance of storytelling, let’s dive into some practical UX presentation techniques that designers can apply to their presentations:

Craft a Compelling Narrative

Good narrative design in presentations relies on a satisfying structure. Start by setting the stage—introduce the protagonist (the user) and establish the context of their journey. What are their pain points, frustrations, and motivations? It’s important to make sure you also talk about how your user attempts to solve these problems as you introduce them. Then present a hypothesis or assumption on how your solution offers them relief, and how you intend to prove it. Finally, conclude with the transformation—how your product makes their life better, and most importantly; how you know.

Use Visual Storytelling

People process and understand stories a lot faster than non-narrativized content. Are you explaining to us how airport security lacks efficiency? Show us a flow chart. Does your design presentation center on how customer support struggles with call volume? Charts and pictures can help us understand the magnitude of the problem. Visual storytelling in design can take many forms, but rest assured your narrative will resonate with your audience and hold their attention if you include strong visuals. 

Use Assumptions to Create Contrast

You will encounter dozens of story structure models, all with their own merits—but one of the easiest and most engaging UX presentation techniques is to present an assumption, and compare it to a reality you encountered in your process. Sometimes this reality is revealed through user testing, other times through research and iteration. This technique helps you gain credibility and gives you moments of surprise; a “plot twist” to grab your audience with.

Invoke Emotion

Don’t be afraid to tug at your audience’s heartstrings. Is your story about elementary schoolers? Show us some cute kids. Global hunger? Give the audience a statistic or quote that illustrates the magnitude of the problem. Emotion is the fuel that drives engagement and empathy. Share anecdotes, testimonials, or case studies that evoke joy, frustration, or excitement. Help your audience connect with the human side of your design, and they’ll be more invested in its success.

Keep it Simple and Clear

While storytelling adds depth and richness to our presentations, for impactful design storytelling, simplicity is key. Avoid jargon and technical details that may confuse or overwhelm your audience. Focus on conveying your message in clear, concise language, ensuring that everyone can follow along and understand the story you’re telling. 

Invite Participation

Lastly, make your design presentations interactive. Encourage questions, feedback, and discussions to foster a sense of ownership and collaboration among stakeholders. It’s okay to think about your presentation as negotiation and Invite them to become co-creators of the narrative, shaping the future of the product together. A great way to engage your audience is to tell them what type of feedback you’re looking for so they can keep an eye out in your presentation for opportunities to chime in. 

In Conclusion

Storytelling is a powerful tool that can help you make engaging UX presentations and earn credibility if done well. By explaining the value of design instead of its contents we can inspire, educate, and ultimately drive meaningful change. So, the next time you find yourself preparing for a design presentation, remember to channel your inner storyteller—because that’s where the magic happens.

Ready to Learn the Foundations of Product Design?

Any product design role requires a foundational knowledge of design thinking and user-centric design. If you are ready to start your journey as a product designer, apply now to Flatiron’s Product Design Bootcamp. Need more time to decide? Take a look at our syllabus and see how we teach designers to succeed in tech.   

Spend enough time on the web, and you’ll encounter a lot of familiar experiences.

For example, try visiting any news website. Even if it’s one you’ve never seen before, you’ll likely instantly recognize that the site contains news. You’ll also spot a number of clues indicating how to use the site.

The New York Times website resembles many other news sites. The logo in the top center serves as a link to the homepage. Underneath the logo is a series of tabs for each section of news content. The page header also contains a magnifying glass icon allowing the user to search the site. 

Below the header are today’s news articles. The most important article is accompanied by the largest headline, as well as a photo.

And it’s not just news websites that feel alike. Pull up examples from just about any category of digital content—public libraries, athletic shoe stores, social media apps for sharing videos—and you’ll undoubtedly find more similarities than differences in their interfaces.

The reason these experiences feel so familiar is that designers are taking advantage of UI design patterns. Design patterns are common solutions designers use to solve frequently occurring usability problems in user interfaces.

But why are these patterns so popular? How do designers decide where and when to implement them? And are they appropriate for every usability challenge?

Why Do Designers Use Patterns?

Creating familiar experiences reduces the cognitive load required for users to understand and use an interface. Cognitive load is defined as the mental effort required to process information and perform a task.

Web usability consultant Jakob Nielsen provides a rule reminding interface designers to minimize cognitive load: 

“Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know.”

In other words, your interface needs to match the expectations of both mobile and desktop audiences who are used to navigating products similar to yours.

But when faced with a common usability challenge within a digital product, such as organizing a large number of news categories, beginning designers might feel tempted to create an alternative to the top navigation pattern found on competitor websites. After all, product designers are hired for their creativity, right? 

However, straying from the familiar pattern wastes the user’s time. Users aren’t visiting to puzzle their way through the designer’s fresh new interface—they’re here to read the news. And if the news that interests them is too difficult to find, they’ll leave.

And from the product team’s perspective, why spend extra design, testing, and development hours creating a novel approach to a navigation problem that’s been solved by countless other news websites?

Working with UI Design Patterns

Is implementing UI design patterns as simple as plugging one into your product’s interface? Not quite. Designers generally follow a four-step process to choose the right pattern and adapt it to the needs of their product and audience.

1. Identify the Problem

Before selecting a UI pattern as a solution, gather as much information as possible about the problem users are having. For example, web analytics might indicate potential subscribers to your news website are bailing out at a specific stage of the checkout form.

Your team should observe users attempting to complete the form in order to thoroughly understand the following:

• User goals: What motivates users to complete this task? 
• Pain points: What frustrations stand in their way?
• Context: What is the user doing when the problem occurs?

2. Find a Common Solution

Now that you understand the pain points facing users, the next step is to research what patterns are available to help solve the problem.

Start by reading about the problem. If you’ve observed that users are struggling to format phone numbers to match the expectations of your checkout form, read up on alternate solutions that don’t require specific formatting.

You might additionally check out sites that compile UI design patterns. Not all of these resources are free, but they can speed up the process of finding patterns and learning more about their implementation.

• UI Patterns
• Mobbin
• Pttrns
• UI Garage

3. Check Out Examples

Once you’ve identified the most useful pattern to solve your product’s usability problem, test out websites and apps that make use of the pattern. 

• When, where, and how is the pattern used? 
• What are the usability benefits of the pattern?
• Are there contexts in which the pattern might not make sense?

Your review should also evaluate the accessibility and ethics of the pattern. Accessibility means ensuring your interface can be operated by users with disabilities. As for ethics, avoid using dark patterns designed to trick users into performing unwanted actions.  

4. Adapt to Your Product’s Needs

Here’s where your creativity as a designer comes in. You’ll need to adjust your chosen pattern to suit your product in a way that balances all of the following:

• Desirability: Can users understand and use this pattern to reach their goals?
• Viability: Will the pattern help fulfill business needs?
• Feasibility: How easily can the development team implement this pattern?

Beyond Design Patterns

After thoroughly researching a design problem, you’ll occasionally discover that no existing pattern really satisfies your users’ needs. In that case, ideate on some new approaches to the problem. This is where great innovation comes from.

While today we might take popular UI design patterns such as tab bars across the bottom of mobile screens for granted, patterns like these began as a designer’s solution to a problem (in this case, limited mobile screen real estate combined with the need to keep frequently accessed options near the user’s thumb).

When in doubt, follow the advice of Don’t Make Me Think author Steve Krug. “Innovate when you know you have a better idea, but take advantage of conventions when you don’t.”

Ready to Build Your Own Interfaces?

If solving usability problems and designing user interfaces within digital products sounds like a fun challenge, consider applying now to Flatiron School’s Product Design Bootcamp. You’ll learn the design skills you need to build a competitive portfolio and land your first job in the product design industry.

Not sure if you’re ready to apply? Download the syllabus to learn more about the skills you can acquire in our bootcamp, or check out our free Product Design Prep Work to explore the material we teach in the course.

And if you are curious about what students learn during their time at Flatiron, attend our Final Project Showcase.