Tags: audio

Crash!

Did somebody drop something?

Why, yes! It’s a new episode of The Clearleft Podcast. The episode that just dropped is all about onboarding:

How do you introduce users to product features without alienating or patronising them?

It’s a tidy fifteen and a half minutes long, featuring words of wisdom from product designer James Gilyead, content designer Jo Dimbleby, and of course UX designer Krystal Higgins, who literally wrote the book on better onboarding.

I interviewed James and Jo, and used snippets of a talk that Krystal gave at one of our UX events a little while back. Have a listen:

James and Jo talk worked on a project together for Sage where thy prototyped patterns for onboarding users to product features. You can find out more about the project:

The folks at Sage had a hunch that an overview screen might be valuable for their customers. They asked Clearleft to help them test this hypothesis.

Another Clearleftie, Chris How, wrote a chapter for the Customer Onboarding Handbook published by CX Lead. You can get the book and read his chapter called Ongoing Onboarding.

That idea of ongoing onboarding is something James talks about on the podcast, calling it “longboarding”:

We ended up coining the term longboarding to describe a transition from a new user to an established user.

He goes one better with the term “non-boarding”:

Some products you don’t realize have onboarded you. And I think that’s a huge compliment.

Listen to the whole episode to get the full story. And while you’re at it, subscribe to the podcast feed or subscribe on Apple, Spotify, or wherever you get your podcasts.

PodRocket - A web development podcast from LogRocket: HTML web components with Chris Ferdinandi

I somehow missed this when it came out in January but Amber just pointed me to it—an interview with Chris about HTML web components, available for your huffduffing pleasure.

daviddarnes/play-button: A Web Component to play audio or video with a button

Isn’t this a lovely little HTML web component? All it does is hook up a button element with an audio or video element: exactly the kind of discrete drudge work that’s good to automate away.

Six uses for Huffduffer

It’s so nice to see when someone else finds Huffduffer to be useful!

New Low in the Accessibility “Industry:” Overlay Company Sues Globally-Recognized Accessibility Expert

Lainey Feingold on the ongoing court proceedings against Adrian Roselli:

This lawsuit against Adrian Roselli impacts every person who cares about including disabled people in the digital world. It impacts all of us who speak, write, and advocate for digital accessibility that is fair, equitable, and ethical.

Boom! The Clearleft podcast is back!

The first episode of season four just dropped. It’s all about design transformation.

I’ve got to be honest, this episode is a little inside baseball. It’s a bit navel-gazey and soul-searching as I pick apart the messaging emblazoned on the Clearleft website:

The design transformation consultancy.

Whereas most of the previous episodes of the podcast would be of interest to our peers—fellow designers—this one feels like it might of more interest to potential clients. But I hope it’s not too sales-y.

You’ll hear from Danish designer Maja Raunbak, and American in Amsterdam Nick Thiel as well as Clearleft’s own Chris Pearce. And I’ve sampled a talk from the Leading Design archives by Stuart Frisby.

The episode clocks in at a brisk eighteen and a half minutes. Have a listen.

While you’re at it, take this opportunity to subscribe to the Clearleft podcast on Overcast, Spotify, Apple, Google or by using a good ol’-fashioned RSS feed. That way the next episodes in the season will magically appear in your podcatching software of choice.

But I’m not making any promises about when that will be. Previously, I released new episodes in a season on a weekly basis. This time I’m going to release each episode whenever it’s ready. That might mean there’ll be a week or two between episodes. Or there might be a month or so between episodes.

I realise that this unpredictable release cycle is the exact opposite of what you’re supposed to do, but it’s actually the most sensible way for me to make sure the podcast actually gets out. I was getting a bit overwhelmed with the prospect of having six episodes ready to launch over a six week period. What with curating UX London and other activities, it would’ve been too much for me to do.

So rather than delay this season any longer, I’m going to drop each episode whenever it’s done. Chaos! Anarchy! Dogs and cats living together!

Audio Session API Explainer

Jen pointed me to this proposal, which should help smooth over some of the inconsistencies I documented in iOS when it comes to the Web Audio API.

I’ve preemptively add this bit of feature detection to The Session:

if ('audioSession' in navigator) { navigator.audioSession.type = "playback"; }

I documented a weird bug with web audio on iOS a while back:

On some pages of The Session, as well as the audio player for tunes (using the Web Audio API) there are also embedded YouTube videos (using the video element). Press play on the audio player; no sound. Press play on the YouTube video; you get sound. Now go back to the audio player and suddenly you do get sound!

It’s almost like playing a video or audio element “kicks” the browser into realising it should be playing the sound from the Web Audio API too.

This was happening on iOS devices set to mute, but I was also getting reports of it happening on devices with the sound on. But it’s that annoyingly intermittent kind of bug that’s really hard to reproduce consistently. Sometimes the sound doesn’t play. Sometimes it does.

I found a workaround but it was really hacky. By playing a one-second long silent mp3 file using audio, you could “kick” the sound into behaving. Then you can use the Web Audio API and it would play consistently.

Well, that’s all changed with the latest release of Mobile Safari. Now what happens is that the Web Audio stuff plays …for one second. And then stops.

I removed the hacky workaround and the Web Audio API started behaving itself again …but your device can’t be set to silent.

The good news is that the Web Audio behaviour seems to be consistent now. It only plays if the device isn’t muted. This restriction doesn’t apply to video and audio elements; they will still play even if your device is set to silent.

This descrepancy between the two different ways of playing audio is kind of odd, but at least now the Web Audio behaviour is predictable.

You can hear the Web Audio API in action by going to any tune on The Session and pressing the “play audio” button.

Openly Licensed Images, Audio and More | Openverse

A search engine for images and audio that’s either under a Creative Commons license or is in the public domain.

Explore the In Our Time archive | Braggoscope

Matt made this lovely website for spelunking and hyperlinking through the thousand episodes of Radio 4’s excellent In Our Time programme.

He’s also written a little bit about how he made it using some AI (artificial insemination) for the categorisation code.

It’s been almost two years since I added audio playback on The Session. The interface is quite straightforward. For any tune setting, there’s a button that says “play audio”. When you press that button, audio plays and the button’s text changes to “pause audio.”

By updating the button’s text like this, I’m updating the button’s accessible name. In other situations, where the button text doesn’t change, you can indicate whether a button is active or not by toggling the aria-pressed attribute. I’ve been doing that on the “share” buttons that act as the interface for a progressive disclosure. The label on the button—“share”—doesn’t change when the button is pressed. For that kind of progressive disclosure pattern, the button also has an aria-controls and aria-expanded attribute.

From all the advice I’ve read about button states, you should either update the accessible name or change the aria-pressed attribute, but not both. That would lead to the confusing situation of having a button labelled “pause audio” as having a state of “pressed” when in fact the audio is playing.

That was all fine until I recently added some more functionality to The Session. As well as being able to play back audio, you can now adjust the tempo of the playback speed. The interface element for this is a slider, input type="range".

But this means that the “play audio” button now does two things. It plays the audio, but it also acts as a progressive disclosure control, revealing the tempo slider. The button is simultaneously a push button for playing and pausing music, and a toggle button for showing and hiding another interface element.

So should I be toggling the aria-pressed attribute now, even though the accessible name is changing? Or is it enough to have the relationship defined by aria-controls and the state defined by aria-expanded?

Based on past experience, my gut feeling is that I’m probably using too much ARIA. Maybe it’s an anti-pattern to use both aria-expanded and aria-pressed on a progressive disclosure control.

I’m kind of rubber-ducking here, and now that I’ve written down what I’m thinking, I’m pretty sure I’m going to remove the toggling of aria-pressed in any situation where I’m already toggling aria-expanded.

What I really need to do is enlist the help of actual screen reader users. There are a number of members of The Session who use screen readers. I should get in touch and see if the new functionality makes sense to them.

Why we need CSS Speech - Tink - Léonie Watson

I was talking about this with Léonie just yesterday. I, for one, would love to have CSS speech support. You know who else would love it? Content designers!

In these days of voice interaction on every platform, there is a growing expectation that it should be possible to design that experience just like we can the visual experience. In the same way an organisation chooses a logo and colour palette for its website, it stands to reason that they may also choose a particular voice that represents their brand.

It’s wild that there’s no way to do this on the web.

dConstruct 2022 was great fun. It was also the last ever dConstruct.

If you were there, and you’d like to re-live the magic, the audio from the talks is now available on the dConstruct Archive. Here they are:

• George Oates
• Lauren Beukes
• Daniel Burka
• Sarah Angliss
• Matt Webb
• Seb Lee-Delisle
• Anil Seth

Thanks to some service worker magic, you can select any of those talks for offline listening later.

The audio is also available on Huffduffer on the dConstruct Huffduffer account. Here’s the RSS feed that you can pop into your podcast software of choice.

If you’re more of a visual person, you can watch videos of the slides synced with the audio. They’ve all got captions too (good ones, not just automatically generated).

So have a listen in whichever way you prefer.

Now that I’ve added the audio from the last dConstruct to the dConstruct archive, it feels like the closing scene of Raiders Of The Lost Ark. Roll credits.

I’ve published a transcription of the talk I gave at CSS Day:

In And Out Of Style.

The title is intended to have double meaning. The obvious reference is that CSS is about styling web pages. But the talk also covers some long-term trends looking at ideas that have appear, disappear, and reappear over time. Hence, style as in trends and fashion.

There are some hyperlinks in the transcript but I also published a list of links if you’re interested in diving deeper into some of the topics mentioned in the talk.

I also published the slides but, as usual, they don’t make much sense out of context. They’re on Noti.st too.

I made an audio recording for your huffduffing pleasure.

There are two videos of this talk. On Vimeo, there’s the version I pre-recorded for An Event Apart online. On YouTube, there’s the recording from CSS Day.

It’s kind of interesting to compare the two (well, interesting to me, anyway). The pre-recorded version feels like a documentary. The live version has more a different vibe and it obviously has more audience interaction. I think my style of delivery suits a live audience best.

I invite you to read, watch, or listen to In And Out Of Style, whichever you prefer.

The Cello and the Nightingales: How the World’s First Fake News United Humanity in Our First Collective Experience of Empathy for Nature – The Marginalian

Decades before fiber optic cable spanned the bottom of the ocean to link continents, the airborne voice of a spring songbird did.

Mario Popova writes of an interspecies broadcast:

Those were the early days of broadcasting and recorded music, when the technology was both too primitive and too expensive to make the joy of music as ambient as air; the days before we made our Faustian deal with the technocrats who made music cheap and musicians poor so that we could stream it anytime anywhere with no recompense or thought of the souls from which the stream pours.

For over a year now I’ve been recording the audio versions of Jay Hoffman’s excellent Web History series on CSS Tricks.

We’re up to ten chapters now. The audio version of each chapter is between 30 and 40 minutes long. That’s around 400 minutes of my voice: a good six and a half hours of me narrating the history of the web. That’s like an audio book!

The story so far covers:

1. Birth
2. Browsers
3. The Website
4. Search
5. Publishing
6. Web Design
7. Standards
8. CSS
9. Community
10. Browser Wars

…with more to come.

The audio is available as a podcast. You can subscribe to the RSS feed. It’s also available from Apple and Spotify.

That’ll give you plenty to listen to while you wait for the next season of the Clearleft podcast.

Season three of the Clearleft podcast is done and dusted. I’m pretty happy with how the six episodes turned out.

Episode one

Coaching. There was one question at the heart of this episode: what’s the difference between training, coaching, and mentoring? I got some great answers to that question, with some good stories along the way.

Episode two

Design Engineering. It will come as no surprise that I really enjoyed this episode. This is a topic I think is growing in importance. The relevation for me was the way Trys framed it less as the intersection between design and development, and more about the gap between design and development. And remember we’re looking for a design engineer to join Clearleft.

Episode three

Design Research. A really fun deep dive, thanks to Steph. I feel like this episode set things up for the next two episodes. Oh, and we’re also looking for a design researcher to join Clearleft.

Episode four

Innovation. I had lots of great material to draw on here: a panel discussion, conference talks, and interviews. I really like the ensemble nature of the end result.

Episode five

Measuring Design. My favourite episode of the season, and probably my favourite episode of the Clearleft podcast so far. This episode builds on a hot topic from UX Fest. And just this week, Andy published a blog post that continues the debate. If you only listen to one episode of the season, make it this one.

Episode six

Design Principles. Needless to say, I enjoyed the heck out of this one. As a well-known nerd for design principles this felt kind of self-indulgent, but in the end there’s not much of me in it (thankfully). In fact it’s more like a case study of the work Clearleft did with Citizens Advice.

I also wrote a bit about each episode when they came out:

1. Coaching
2. Design Engineering
3. Design Research
4. Innovation
5. Measuring Design
6. Design Principles

Six episodes might not sound like much, but it takes a lot of work to put a season together. It’s rewarding though. And I’m already looking forward to crafting the arc for season four. But that won’t be until the start of next year.

Still, it’s never to early to subscribe so you’ll be the first to hear the newest episodes. Subscribe to the RSS feed or on Apple, Spotify, Google, or wherever you get your podcasts.

The final episode of season three of the Clearleft podcast is out. Ah, what a bittersweet feeling! On the hand it’s sad that the season has come to an end. But it feels good to look back at six great episodes all gathered together.

Episode six is all about design principles. That’s a topic close to my heart. I collect design principles.

But for this podcast episode the focus is on one specific project. Clearleft worked with Citizens Advice on a recent project that ended up having design principles at the heart of it. It worked as a great focus for the episode, and a way of exploring design principles in general. As Katie put it, this about searching for principles for design principles.

Katie and Maite worked hard on nailing the design principles for the Citizens Advice project. I was able to get some of Maite’s time for her to talk me through it. I’ve also got some thoughts from my fellow Clearlefties Andy and Chris on the topic of design principles in general.

It’s nineteen minutes long and well worth a listen.

And with that, season three of the Clearleft podcast is a wrap!

A new episode of the Clearleft podcast just dropped and I have to say, this is one of my favourites so far. It’s all about measuring design.

There was a bit of a theme running through UX Fest earlier this year. On the one hand, there was all the talk of designers learning to speak the language of business (to get that coveted seat at the table), which means talking in numbers. But on the other hand, isn’t there a real danger in reducing user experience to numbers in a spreadsheet?

For this episode I put the narrative together using lots of snippets from different talks, not just from UX Fest but from previous Clearleft events too. I also got some good hot takes from my colleagues Chris, Andy, and Maite. Oh, and it opens with former US Secretary of Defense, Robert McNamara. If you know, you know.

This episode comes in at 22 and a half minutes and I think it’s well worth your time. Have a listen.

This is the penultimate episode of season three. Just one more to go!

We’re past the halfway mark for this season of the Clearleft podcast. Episode four came out today. It’s all about innovation.

At the beginning of the episode, I think you can hear the scorn in my voice. Y’see, innovation is one of the words—like “disruptive”—that gets thrown around a lot and everyone assumes it only has positive connotations. But words like “innovative” and “disruptive” can be applied to endeavours that are not good for the world.

Bitcoin, for example, could rightly be described as innovative (and disruptive) but it’s also a planet-destroying ponzi scheme—like a lovechild of the trolley problem and the paperclip maximizer designed to generate the most amount of waste for the least amount of value.

So, yeah, I’m not a fan of innovation for innovation’s sake. But don’t worry. For this episode of the podcast I set my personal feelings to one side and let the episode act as a conduit for much smarter people.

The whole thing clocks in at 25 minutes but I think this episode might have the widest range of contributors yet. There are snippets from an internal Clearleft discussion, soundbites from a panel discussion, extracts from conference talks, as well as interviews with individuals. From Clearleft there’s Chris How, Andy Thornton, Jon Aizlewood and Lorenzo Ferronato. From the panel discussion there’s Janna Bastow, Matt Cooper-Wright, Dorota Biniecka and Akshan Ish. And from UX Fest there’s Radhika Dutt, Teresa Torres and Gregg Bernstein.

I happily defer to their expertise on this topic. Have a listen and hear what they have to say.