Category: Web Design

Free Tutorial: Optimize Your Business Website

For any business owner, freelancer, entrepreneur, or anyone interesting in building an online business or side gig. This free webinar from WordPress.com web design pros (YouTube) will teach you tips on site design, SEO, monetization, and mobile optimization.

Kathryn Presner

Two weeks ago, my colleague Marjorie asked if I’d be interested in helping run a webinar for small businesses, with tips on getting the most out of their website. She knew I’d done a lot of public speaking and thought I might be interested. Even though we wouldn’t have a lot of time to prepare, it took me all of three seconds to accept.

Fast forward to yesterday, when my colleague Steve Dixon and I presented a one-hour online workshop called Optimize Your Business Website: Secrets from Web Design Pros. Topics included essential pages for business sites, layout templates, the WordPress block editor, and what it takes to optimize a site so it’s both easy to find in search engines – and easy for visitors to use. We also looked at how to make sure your site is both accessible and mobile-friendly, along with a few different ways to…

View original post 60 more words

(TTFS) Time to First Smile

Page load times are important to customer happiness, and if you haven’t used the Chrome User Experience Report tool yet on your website or web app, I urge you to do so.

chrome-ux
Screenshot from the free Chrome UX report tool.

Tracking things like:

  • Time to First Byte
  • First Paint
  • First Contentful Paint
  • First Meaningful Paint
  • Time to Interactive

These are important numbers to measure and improve. However, I think we can add a qualitative measure to the list. Introducing…

Time to First Smile.

When does your customer feel delight? Do they know what to do next? Are they telling all their friends about your product? Do they feel a cha-ching moment soon after signing up?

Time to work on getting that first smile.

😀

Manuel Matuzović on Accessibility and Inclusive Design

Manuel Matuzović writes in My Accessibility Journey: What I’ve Learned So Far on A List Apart:

An attendee asked why I was interested in accessibility: Did I or someone in my life have a disability? I’m used to answering this question—to which the answer is no. A lot of people seem to assume that a personal connection is the only reason someone would care about accessibility.

This is a problem. For the web to be truly accessible, everyone who makes websites needs to care about accessibility. We tend to use our own abilities as a baseline when we’re designing and building websites. Instead, we need to keep in mind our diverse users and their diverse abilities to make sure we’re creating inclusive products that aren’t just designed for a specific range of people.

This echoes what I’m reading in Tragic Design: The Impact of Bad Product Design and How to Fix It by Jonathan Shariat and Cynthia Savard Saucier: “We shouldn’t wait until we or someone close to us needs it to start caring about accessibility.”

Manuel’s post contains a lot more on getting started with accessibility. Check it out!

It serves me as a reminder that inclusive design is about creating a diversity of ways for people to participate—good design is for everyone.

 

Stripe Connect, Frontend Experience

Screen Shot 2018-01-04 at 21.56.40

Connect: behind the front-end experience is an extraordinary frontend engineering knowledge drop from Stripe’s design team — how they built engaging landing pages with next-generation technologies like CSS 3D, CSS Grid, and the Web Animations API — including the (new to me) Intersection Observer API to detect the visibility of an element. A must-read.

Via Twitter / johnmaeda.

(Video) CSS Grid Changes Everything

If you make websites, this is must-watch TV: CSS Grid Changes Everything (About Web Layouts) with Morten Rands-Hendriksen at WordCamp Europe 2017.

 

An educational and engaging presentation by @mor10 (epic pun on his Twitter handle!) that explains everything you need to know to move past float and flex and start using CSS grid today in your web design or WordPress theme.

View links and slides on the author’s site; source: WordPress YouTube channel.

Does IQ Measure Literacy?

In Paper Mark Kurlansky said something that surprised me: “IQ measures literacy, not intelligence.” (View more about this book on Goodreads; I also recommend Salt and Cod by the same author.)

Once I thought about this more, it rang true. If you can read well, you can typically test well, especially if the standardized test is geared toward that particular skill. In fact, it’s a strong bias toward literacy as intelligence, without regard for other types of learning and communication.

Sara Wachter-Bettcher mentions this same issue in her essential “Design for Real Life” talk about standardized testing bias in North America.

What that does is it assumes in their testing process that “a ‘good’ question is one that students who score well overall tend to answer correctly, and vice versa.”

So what that means is that if a student who scores well on the current SAT, in the current system with the current disparities, if they tend to do well on this other question, then it’s a good question, and if they don’t, then it’s bad.

What does this mean for text-only interfaces, or help documentation as paragraphs or blog posts? Something to keep in mind when creating products and software because often we required lots of reading to get the job done.

Photo from Pexels.

Abstract, High Resolution, Listen & Learn

Have you watched Abstract on Netflix yet? World-class designers share their life and work and philosophy, which I’ve found fascinating. A common thread in the episodes I’ve watched so far is that design doesn’t happen in a vacuum. In order to produce something useful and beautiful that people will love and buy, you have to engage with the world. It involves talking to people. Listening and verifying with your own eyes and ears.

Ralph Gilles — Head of Design at General Motors — says in Episode 5, “Go out and talk to people.” He gives the example of his Chrysler/Jeep design team engaging with millennials literally “in their living rooms.” Listening to their problems and trying to solve those problems, taking it all back to the car design lab. “How do you know what consumers want even before they know what they want?”

Tinker Hatfield — shoe Designer at Nike — says in Episode 2, “Get outside, engage with the world.” How a steady stream of fresh input leads to innovation and being outside, doing sports he loves, helps him staying connected to everything. Running a mile in their shoes, if you will. An example of the years of close back-and-forth work with Michael Jordan to perfect the Air Jordan basketball shoes.

I’m sensing a trend here: if I listen, I learn. When I approach my own software work, do I understand the needs of the person for whom I am designing and developing? If the answer is no, I need to step outside my office and talk to people using the software.

Another compelling series to hear from talented and innovative product designers is High Resolution, available on YouTube. In Episode 8, similar ideas emerge from Automattic’s own Head of Computational Design & Inclusion, John Maeda:

Don’t focus on kerfuffles within your org — keep your focus on the world. That’s where you are meant to be. No matter how great of the place you’re in.

… Creative people are diverse-oriented, and great remixers. — John Maeda

These thoughts remind me of the “jobs to be done” philosophy where success comes from understanding peoples’ circumstances. And not only accepting input when it fits a certain profile I already expect.

The key to successful innovation is identifying jobs that are poorly performed in customers’ lives and then designing products, experiences, and processes around those jobs. — via Harvard Business Review

Discovering what those jobs are requires engaging with your customers, in their lives, in their work. Now it’s time for me to get outta this chair.

Design Success Ladder: Meaningful Products

Via design.org: The UX Design Success Ladder: Achieving Meaningful Product Design.

Design-Success-Ladder-The-Key-to-Achieving-Meaningful-Product-Design-1.png

Product success envisioned as rungs of a ladder, that you climb up from the bottom: functional, usable, comfortable, delightful, meaningful.

I first heard this concept last year at WordCamp Phoenix in a presentation by Ward Andrews; the article showcase examples of products or services at each level.

Takeaway message: don’t stop at functional and usable. Set the bar higher.

Design for Real Life

Real life is complicated.

Even after we’ve tested all the important user flows and polished the edges in our app or site, people still stumble. Why? Because we’re humans, and because our products still have:

  1. Broken flows: transition points or interactions, like a form on a site, that aren’t working correctly.
  2. Content gaps: someone needs a specific piece of content, but you don’t have it—or it’s not in the right place at the right time.
  3. Pain points: people get hung up and are likely to abandon the site or app.

Making digital products friendly isn’t enough to make them feel human.

For more on this topic, I highly recommend Design for Real Life from A Book Apart; the ebook is only $11.

design-real-life.png

Instead of treating stress situations as edge cases, it’s time we move them to the center of our conversations—to start with our most vulnerable, distracted, and stressed-out users, and then work our way outward.

The reasoning is simple: when we make things for people at their worst, they’ll work that much better when people are at their best.

Order Design for Real Life from abookapart.com. See also the WordPress.org Flow glossary for terms inspired by this book that we use in testing WordPress.

Operation Homecooked Mobile Device Lab

Tucson-based web developer nerd Daniel Bishop wanted to test sites on multiple devices at once. So, he built a thing to do that. Awesomesauce.