[Week 3] Notes on Building Wireframes and Low-Fidelity Prototypes

[Week 3] Notes on Building Wireframes and Low-Fidelity Prototypes

Course 3 of 7 Google's UX Design Professional Certificate by Coursera

In Course 3 Week 3 we dive into the 4th step of the Design Thinking Framework; Prototyping. We also learn about ethical design and how UX can be misused to manipulate user behavior.

Week 3: Building Low-fidelity prototypes

Prototypes

  1. A prototype is an early model of a product that demonstrates its functionality, without actually building the entire product. A prototype shows stakeholders and potential users what your design idea can do.

  2. This can be of two types, low-fidelity, and high-fidelity prototypes.

    • A low-fidelity prototype is a simple interactive model that provides a basic idea of what the product would look like. The goal is to make your designs testable so that you can collect and analyze feedback early on.

    • Lo-fi prototypes can again be done on paper or digitally.

    • On the other hand, high-fidelity prototypes are highly functional and interactive. They are very close to the final product, with most of the necessary design assets and components developed and integrated. We will look deeper into high-fidelity designs in Course 5.

Creating Prototypes

The main aim here is to present the intended functionality and to test end-to-end navigations of different paths users can take while using the app, to and fro. Few main points to keep in mind while prototyping are:

  1. Make sure to fulfill these criteria:

    • All of the wireframes required to complete the main user flow are included.

    • There is a way for users to proceed forward and backward within the flow.

    • Cues for navigation are clearly indicated within the prototype.

    • Successful completion of the simulated activity is indicated for users.

    • Users return to a sample origin after completing the simulated activity.

  1. Think about incorporating special components such as back buttons, navbar, search bar, popups, chatbot windows, accessibility buttons, etc. for each wireframe.

  2. Focus on happy path flows but also consider edge cases that may cause complexities in the user flow. This may include having insufficient options during form submissions, not catching errors after a payment failure, missing an important feature like canceling an order, etc.

  3. In the case of websites, a user can land on a page from many different locations. So navigation should be clear and readily available on such pages.

  4. Remember that accessibility is not an option, but a necessity. Try to keep all your wireframe designs accessible.

  5. Paper prototyping is cheap, easy, quick, and collaborative. Use it to gather feedback before starting with digital prototyping.

  6. Some questions to consider are:

    • What are common user flows through your product?

    • What buttons will users interact with? In what order will they perform these actions?

    • What will users expect to happen after they click a button or submit a form?

Deceptive Patterns

  1. Biases such as implicit bias are often unconscious and they can sometimes lead designers to unintentionally create experiences that exclude, belittle or mislead users. But misleading design isn't always unintentional or the result of bias, designs can be intentionally deceptive as well. These are called deceptive patterns.

  2. Deceptive patterns are UX methods that trick users into doing or buying something they wouldn't otherwise have done or bought. They are also called dark patterns.

  3. Deceptive patterns were first identified by UX specialist, Harry Brignull in 2010. The use of deceptive patterns has only increased since it was first called out.

  4. We should avoid deceptive patterns in our designs. They are ethically wrong and not a good business practice.

  5. Some of the common deceptive patterns are:

    • Forced Continuity: The practice of charging a user for membership without a warning or a reminder.

    • Sneak into the basket: When a user has to remove an item from their cart if they don’t want to buy it, which is an extra step that could be easily missed.

    • Hidden costs: Hidden or unexpected charges in the user’s cart that are not revealed until the end of the checkout process.

    • Confirmshaming: When users are made to feel guilty when they opt out of something.

    • Urgency: Attempting to convince users to purchase an item before they run out of time and miss today’s “amazing” price.

    • Scarcity: When a website makes users very aware of the limited number of items in stock.

Examples of Deceptive patterns

  1. Signing up for a seven-day free trial of a streaming service, and getting charged on Day 7, but without any email or notification that your free trial was coming to an end.

  2. When making a hotel reservation and trip insurance is added automatically, or on purchasing a new phone an extended warranty is added to your cart automatically.

  3. Website advertising free shipping, but then charging you for handling.

  4. Booking movie tickets online, but when you reach the final checkout page, there are suddenly online booking fees.

  5. Having guilt-tripping prompts such as "I like paying full price" or "No, I don't care about the environment enough to subscribe to this newsletter".

  6. An example of urgency can be when a pop-up opens on a website to promote a deal just for the next hour or a coupon that expires in thirty minutes.

  7. An example of scarcity is when a website says that only five of these items are left.

The bright red notification flag on your favourite social media app is also an urgency deceptive pattern and so is a jingle or a short sound accompanied by a notification.

Attention Economy

  1. Attention economics is an approach to the management of information that treats human attention as a scarce commodity and applies economic theory to solve various information management problems.

  2. The term attention economy originated with psychologist and Nobel Laureate Herbert A. Simon, who believed that there are limits on what humans can think about and do at one time.

  3. The concept of the attention economy also explains how interacting with technology may cause depression or anxiety for some. For example, a user may feel sad when they don’t hear or see new notifications on their phone, or they may experience the fear of missing out (also known as FOMO) if they don’t continually refresh their social media feed or check their messages.

  4. UX designers should be ethical in their design approach and avoid the pitfalls of the attention economy. Technology should be used to empower the user, not hinder them.

Simon once said, “A wealth of information creates a poverty of attention.”

So this wraps us up the short and sweet course 3 of Google's UX design course. This week I realized why it's important to have a firm grasp on a design tool so that you can quickly and fluidly transform your ideas into designs. And now I understand why Figma is so popular as it is effortless to use and removes the boilerplate part of designing.
I can't believe we have learned so much and are still not even halfway done. Course 4 is heavily UX-research-oriented (a developer's Achilles' heel), so let's recharge our brain cells and hop right into it.