Categories
Design Notes

Watching: Designing for Trust in an Uncertain World

Video URL: https://aneventapart.com/news/post/designing-for-trust-in-an-uncertain-world-aea-video

I’ve been setting aside some of my free time to either watch talks or read books about design. Last weekend, I watched a recorded talk from An Event Apart called “Designing for Trust in an Uncertain World.”

To me, the gist was about how we can make people feel smart and confident about their decisions. People see many inconsistencies in the world—from politicians who flip-flop on issues to companies who say one thing but do the exact opposite. As a result, people have become skeptical and even cynical. Inconsistency undermines trust, she says.

Because of this, people are starting to look inward: they’re making decisions based on what they believe in. Since people are looking inward for information, maybe we can meet them there, informing and persuading them on their terms. Here are the three tools that we can use to do that:

Voice

Champion familiarity over precision and consistency over novelty.

Example: When Mailchimp released a suite of e-commerce services, they didn’t want to alienate their long-time customers. They didn’t want people to worry and to feel like they would get lost in the shuffle. So they continued to make themselves vulnerable and open and fun, which was consistent with Mailchimp’s way of communicating. They went further and also opened up a store to tell people what they’re learning along the way while using their own e-commerce tools. This brand consistency made people more familiar and confident about the future of Mailchimp.

Volume

Offer enough detail to convey a complete story and make the user feel smart.

Example: America’s Test Kitchen creates a lot of content. They want to empower people whether they’re novices who are trying to get something right the first time, or experts who want to learn more about the history and chemistry of a dish. You can get the short, pithy version, or the long, deep read on a recipe.

Another example: Gov.uk has the opposite problem: too much content. So people end up going somewhere else online to understand gov’t services and information. (I do the same when I’m on IRS.gov. I feel like I need to search online to summarize things for me.) They since reduced the amount of content, getting people to stick around instead of shying away from the official sources.

Vulnerability

Compare, don’t exclude, and prototype in public to work with users, not for them.

Example: Buzzfeed opened themselves up to feedback when they were working on their newsletter. Similar to what Mailchimp did when they publicly dogfooded their own e-commerce product, they made themselves vulnerable to their audience and involved them in the process.

Up Next

Here’s what I’m planning on doing next:

Categories
Design Notes Web

Watching: Slow Design for an Anxious World

Video URL: https://aneventapart.com/news/post/slow-design-for-an-anxious-world

I’m currently going through videos from AEA DC 2019, and I wanted to share my notes on Jeffrey Zeldman’s talk called Slow Design for an Anxious World.

When we need fast

  • Fast is great for service-oriented designs. 80% of the time, we want to create designs that reduces friction and gets out of the way so that people can get things done.
  • This is especially important for transactions like donating to a charity or buying a product. The faster you can get a person from start to finish, the better.
  • Time = friction

When we need slow

  • The rest of the time when comprehension is involved, we have to slow things down.
  • We want to focus on absorption not conversion when it comes to comprehension.
  • Readability = it wants to be read
  • Legibility = it’s readable
  • Readability transcends legibility

Some history and observations

  • There was a service called Readability that made reading pleasant on the web. It removed “info junk” like banners and navigation so that you can focus on the content. The website has been discontinued since, but the open source code is alive in Safari’s Reader.
  • These days, you can use Mercury Reader if you use Chrome.
  • There’s an A List Apart article that talked about creating a simpler page on the web. It breaks reading distances into three categories:
    • Bed (Close to face): Reading a novel on your stomach, lying in bed with the iPad propped up on a pillow.
    • Knee (Medium distance from face): Sitting on the couch or perhaps the Eurostar on your way to Paris, the iPad on your knee, catching up on Instapaper.
    • Breakfast (Far from face): The iPad, propped up by the Apple case at a comfortable angle, behind your breakfast coffee and bagel, allowing for handsfree news reading as you wipe cream cheese from the corner of your mouth.
  • Jeffrey Zeldman wanted to create a more relaxed reading experience on the web. He wanted a web that can be read from afar (Breakfast category) and with a relaxed posture. He experimented on his personal website and wrote about it in 2012.
  • Medium.com came out and it focused on content. Big type. Lots of whitespace. (2012)
  • The New York Times came out with a redesign that is “clean, quiet reading interface and a typographic style that’s increasingly visually connected to other incarnations of the Times” (2014)
  • The New Yorker also came out with a redesign. “While before, reading the New Yorker on mobile was a tortuous experience of pinching screens and zooming in and out, the new mobile site is one long scrollable joyride. Sharp text at a good size and unfussy navigation make the site a vast improvement on what went before.” (2014)
  • Aside from big type, art direction can also be used
    • A bit difficult to have different art directions in each content because you need to have time and resources.
    • ProPublica and Fray are examples.
  • Whitespace is important
    • There’s macro whitespace: Whitespace between the major elements in a composition
    • There’s micro whitespace: The space between list items, between a caption and an image, or between words and letters. The itty-bitty stuff.
    • Adds legibility
    • Conveys luxury: Look at the whitespace around brands like Apple or Chanel.
    • Also see Jeffrey’s style guide for content.
  • It has to be branded. When all sites look the same, all content appears equal. Facebook posts are an example: A reputable news site looks the same in a post as a disreputable blog.
  • It should also be authoritative. It should convey that you put in a lot of time and effort into it.

Slow design toolkit:

  • Big type
  • Hierarchy
  • Minimalism
  • Art direction
  • Whitespace
  • Branded
  • Authoritative

Categories
Design Notes Web

Reading: Design for Real Life

A picture of the book, "Design for Real Life", in my hand.
The book Design for Real Life.

I recently read the book called Design for Real Life, and I wanted to share some of the notes that I wrote down while reading the book.

  • Advocates for designing for the most vulnerable, distracted, and stressed-out users. If you make things for people at their worst, they’ll work that much better when people are at their best.
  • There are a lot of edge cases where our design fails. See Facebook’s Year In Review, Flickr auto-tags, and Medium’s inappropriate copy.
  • Edge cases = Stress cases. Instead of thinking about these things as edge cases, we should think about them as stress cases. These are scenarios where our design and content fail, and they should be treated like a failing unit test or integration test.
  • Make a list of potential user scenarios. Here’s an example from the book:
    • People who want to share
      • Had a great year
      • Had a horrible year
    • People who don’t want to share
      • But want to relive it
      • Great year
        • Horrible year
      • And don’t want to relive it
        • Great year
        • Horrible year
  • Find fractures in your design by challenging assumptions and finding stress cases.
  • Make space in your design and accept a broader range of answers to accommodate your users:
    • Names: “Juan Antonio Gabriel Ancajas Talon,” for example, doesn’t fit in most input fields. Also, what is a real name?
    • Gender: Consider how a binary input field would leave people out.
    • Race: Consider how a generic “Multiracial” field would make people feel.
  • Design to include: What if your period tracking app doesn’t support people outside of: “avoiding pregnancy,” “trying to conceive,” or “fertility treatments”?
  • Classic edge-case thinking: “We’re designing for the 90%, not the 10%” or “That’s a difficult use case that I don’t want to think about.”
  • “For now” can lead to “forever” for a busy team.
  • Everyday stress cases (this can be people in crisis or something mundane going wrong). Examples from the book:
    • A person who as received a threat from a previously unknown stalker, and needs to delete or make private every public account as quickly as possible.
    • A university student whose roommate has declared they intend to commit suicide, and needs information on what to do.
    • Someone who has discovered their mortgage’s auto-pay has failed two months in a row, and is afraid they’ll be foreclosed on.
    • A person working two jobs whose only car was damaged in an accident, and is trying to submit incident information to their insurance company late at night, after they’ve finally gotten off work.
  • Stress cases are also technical failures:
    • Low battery
    • Slow Internet
  • Create personas that are real: Instead of thinking about ideal people who are smiling and have ideal lives, think about people who are distracted, short on time, have bills to pay, has dinner to prepare, and have kids to take care of.
  • Just like mobile-first design, try stress-first design.
  • Add contexts in your user journey. Consider who goes to the hospital in the morning, late afternoon, and at midnight. You’d find out that people who visit the hospital at midnight are people who are in crisis because normal visiting hours are over.
A table that represents the time of day. It allows people to contextualize where each persona falls into.
A table that represents the time of day. It allows people to contextualize where each persona falls into.
  • Add intention to designs: Do you really need to ask income level, real name, mailing address, salutation, or level of education? Consider how people would feel: “Why do they need my postcode? Why do they need my gender?”
  • Touchy subjects: Things that are likely to cause stress or make the reader uncomfortable (not just money, religion, or politics):
    • Error messages
    • Warnings
    • System alerts
    • Financial and privacy-related updates
    • Legal agreements
  • Compassion is more than being nice. It’s accepting people as they come—in all their pain, with all their challenges—and not just feeling empathy towards them but doing something with that empathy. Compassion is not meant to soften bad news or coddling. It’s understanding and kindness.
  • The premortem: Evaluate the project before it happens to check our biases.
  • The question protocol: Ensure that every piece of information you ask is intentional and appropriate by asking:
    • Who within the organization uses the answer
    • What they use them for
    • Whether an answer is required or optional
    • If an answer is required, what happens if a user enters any old thing just to get them through the form
  • The designated dissenter: Assign someone in the project to assess every decision underlying the project, and asking how changes in context or assumptions might subvert those decisions.