Jeremy Keith's Blog, page 15

UX London 2024, day two

If you can���t make it to all three days of this year���s UX London, there���s always the option to attend a single day.

Day two is focused on product design. You know, the real meat���n���potatoes of working at the design coalface (to horribly mix my metaphors).

The day begins with four back-to-back practical talks.

John V Willshire gets the ball rolling with a big-picture talk on the product of design. John will show you how to think about futures rather than features.Tshili Ndou follows on with her talk aboutvalidating features. Tschili will show you how to create high value products and avoid wasting money.Wioleta Maj is up after the break with a talk on understanding the impact of design choices. Wioleta will show you how to identify who we are creating our designs for (and who we are not).Harry Brignull closes out the morning with his call to action, Do Not Pass Go. Harry will show you how to get to grips with our industry���s failure to self-regulate when it comes to harmful design patterns.

After lunch, it���s decision time. Whereas the morning talks are sequential, the afternoon���s workshops run in parallel. You���ve got four excellent workshops to choose from.

Ben Sauer will be giving a workshop on the storytelling bridge. Ben will show you how to find your inner storyteller to turn your insights into narratives your stakeholders can understand quickly and easily.Tom Kerwin will be giving a workshop on multiverse mapping. Tom will show you how to pin down your product strategy and to align your team around the stuff that matters.Serena Verdenicci will be giving a workshop on behavioural intentions. Serena will show you how to apply a behavioural mindset to your work so you can create behaviour-change interventions.Brad Frost will be giving a workshop on the design system ecosystem. Brad will show you how to unpack the many layers of the design system layer cake so you can deliver sturdy user interfaces and help teams work better together.

Finally there���s one last keynote talk at the end of the day. All will be revealed very soon, but believe me, it���s going to be a perfect finisher.

If a day of outstanding talks and workshops on product design sounds good to you, get your ticket now.

And just between you and me, here���s a discount code to get 20% of the ticket price: JOINJEREMY.

UX London 2024, day one

UX London is just two months away!

The best way to enjoy the event is to go for all three days but if that���s not doable for you, each individual day is kind of like a mini-conference with its own theme.

The theme on day one, Tuesday, June 18th is design research.

In the morning there are four fantastic talks.

Tom Kerwin kicks things off with his talk on pitch provocations. Tom will show you how to probe for what the market really wants with his fast, counterintuitive method.Clarissa Gardner is giving a talk about ethics and safeguarding in UX research. Clarissa will show you how to uphold good practice without compromising delivery in a fast-paced environment.Aleks Melnikova���s talk is all about demystifying inclusive research. Aleks will show you how to conduct research for a diverse range of participants, from recruitment and planning through to moderation and analysis.Emma Boulton closes out the morning with her talk on meeting Product where they are. Emma will show you how to define a knowledge management strategy for your organisation so that you can retake your seat at the table.

After lunch you���ll take part in one of four workshops. Choose wisely!

Luke Hay is running a workshop on bridging the gap between research and design. Luke will show you how to take practical steps to ensure that designers and researchers are working as a seamless team.Serena Verdenicci is running a workshop on behaviorual intentions. Serena will show you how to apply a behavioural mindset to your work so you can create behaviour-change interventions.St��phanie Walter is running a workshop on designing adaptive reusable components and pages. St��phanie will show you how to plan your content and information architecture to help build more reusable components.Ben Sauer is running a workshop on the storytelling bridge. Ben will show you how to find your inner storyteller to turn your insights into narratives your stakeholders can understand quickly and easily.

After your workshop there���s one final closing keynote to bring everyone back together. I���m keeping that secret for just a little longer, but trust me, it���s going to be inspiring���plenty to discuss at the drinks reception afterwards.

That���s quite a packed day. If design research is what you���re into, you won���t want to miss it. Get your ticket now.

Just to sweeten the deal and as a reward for reading all the way to the end, here���s a discount code you can use to get a whopping 20% off: JOINJEREMY.

Displaying HTML web components

Those HTML web components I made for date inputs are very simple. All they do is slightly extend the behaviour of the existing input elements.

This would be the ideal use-case for the is attribute:

Alas, Apple have gone on record to say that they will never ship support for customized built-in elements.

So instead we have to make HTML web components by wrapping existing elements in new custom elements:

The end result is the same. Mostly.

Because there���s now an additional element in the DOM, there could be unexpected styling implications. Like, suppose the original element was direct child of a flex or grid container. Now that will no longer be true.

So something I���ve started doing with HTML web components like these is adding something like this inside the connectedCallback method:

connectedCallback() { this.style.display = 'contents'; ���}

This tells the browser that, as far as styling is concerned, there���s nothing to see here. Move along.

Or you could (and probably should) do it in your stylesheet instead:

input-date-future { display: contents;}

Just to be clear, you should only use display: contents if your HTML web component is augmenting what���s within it. If you add any behaviours or styling to the custom element itself, then don���t add this style declaration.

It���s a bit of a hack to work around the lack of universal support for the is attribute, but it���ll do.

Pickin��� dates on iOS

This is a little follow-up to my post about web components for date inputs.

If you try the demo on iOS it doesn���t work. There���s nothing stopping you selecting any date.

That���s nothing to do with the web components. It turns out that Safari on iOS doesn���t support min and max on date inputs. This is also true of any other browser on iOS because they���re all just Safari in a trenchcoat ���for now.

I was surprised ��� input type="date" has been around for a long time now. I mean, it���s not the end of the world. You���d have to do validation on inputted dates on the server anyway, but it sure would be nice for the user experience of filling in forms.

Alas, it doesn���t look like this is something on the interop radar.

What really surprised me was looking at Can I Use. That shows Safari on iOS as fully supporting date inputs.

Maybe it���s just semantic nitpickery on my part but I would consider that the lack of support for the min and max attributes means that date inputs are partially supported.

Can I Use gets its data from here. I guess I need to study the governance rules and try to figure out how to submit a pull request to update the currently incorrect information.

Pickin’ dates

I had the opportunity to trim some code from The Session recently. That���s always a good feeling.

In this case, it was a progressive enhancement pattern that was no longer needed. Kind of like removing a polyfill.

There are a couple of places on the site where you can input a date. This is exactly what input type="date" is for. But when I was making the interface, the support for this type of input was patchy.

So instead the interface used three select dropdowns: one for days, one for months, and one for years. Then I did a bit of feature detection and if the browser supported input type="date", I replaced the three selects with one date input.

It was a little fiddly but it worked.

Fast forward to today and input type="date" is supported across the board. So I threw away the JavaScript and updated the HTML to use date inputs by default. Nice!

I was discussing date inputs recently when I was talking to students in Amsterdam:

They���re given a PDF inheritance-tax form and told to convert it for the web.

That form included dates. The dates were all in the past so the students wanted to be able to set a max value on the datepicker. Ideally that should be done on the server, but it would be nice if you could easily do it in the browser too.

Wouldn���t it be nice if you could specify past dates like this?

Or for future dates:

Alas, no such syntactic sugar exists in HTML so we need to use JavaScript.

This seems like an ideal use-case for HTML web components:

Instead of all-singing, all-dancing web components, it feels a lot more elegant to use web components to augment your existing markup with just enough extra behaviour.

In this case, it would be nice to augment an existing input type="date" element. Something like this:

Here���s the JavaScript that does the augmentation:

customElements.define('input-date-past', class extends HTMLElement { constructor() { super(); } connectedCallback() { this.querySelector('input[type="date"]').setAttribute('max', new Date().toISOString().substring(0,10)); } });

That���s it.

Here���s a CodePen where you can see it in action along with another HTML web component for future dates called, you guessed it, input-date-future.

See the Pen Date input HTML web components by Jeremy Keith (@adactio) on CodePen.

Ad revenue

It���s been dispiriting but unsurprising to see American commentators weigh in on the EU���s Digital Markets Act. I really wish they���d read Baldur���s excellent explainer first.

John has been doing his predicatable ���leave Britney alone!��� schtick with regards to Apple (and in this case, Google and Facebook too). Ian Betteridge does an excellent job of setting him straight:

A lot of commentators seem to have the same issue as John: that it���s weird that a governmental body can or should define how products should be designed.

But governments mandate how products are designed all the time, and not just in the EU. Take another market which is pretty big: cars. All cars have to feature safety equipment, which varies from region to region but will broadly include everything from seatbelts to crumple zones. Cars have rules for emissions, for fuel efficiency, all of which are designing how a car should work.

But there���s one assumption in John���s post that Ian didn���t push back on. John said:

It���s certainly possible that Meta can devise ways to serve non-personalized contextual ads that generate sufficient revenue per user.

That comes with a footnote:

One obvious solution would be to show more ads���������a lot more ads���������to make up for the difference in revenue. So if contextual ads generate, say, one-tenth the revenue of targeted ads, Meta could show 10 times as many ads to users who opt out of targeting. I don���t think 10�� is an outlandish multiplier there���������given how remarkably profitable Meta���s advertising business is, it might even need to be higher than that.

It���s almost like an article of faith that behavioural advertising is more effective than contextual advertising. But there���s no data to support this. Quite the opposite. I wrote about this four years ago.

Once again, I urge you to read the excellent analysis by Jesse Frederik and Maurits Martijn.

There���s also Tim Hwang���s book, Subprime Attention Crisis:

From the unreliability of advertising numbers and the unregulated automation of advertising bidding wars, to the simple fact that online ads mostly fail to work, Hwang demonstrates that while consumers��� attention has never been more prized, the true value of that attention itself���much like subprime mortgages���is wildly misrepresented.

More recently Dave Karpf said what we���re all thinking:

The thing I want to stress about microtargeted ads is that the current version is perpetually trash, and we���re always just a few years away from the bugs getting worked out.

The EFF are calling for a ban. Should that happen, the sky would not fall. Contrary to what John thinks, revenue would not plummet. Contextual advertising works just fine ���without the need for invasive surveillance and tracking.

Like I said:

Tracker-driven behavioural advertising is bad for users. The advertisements are irrelevant most of the time, and on the few occasions where the advertising hits the mark, it just feels creepy.

Tracker-driven behavioural advertising is bad for advertisers. They spend their hard-earned money on invasive ad tech that results in no more sales or brand recognition than if they had relied on good ol��� contextual advertising.

Tracker-driven behavioural advertising is very bad for the web. Megabytes of third-party JavaScript are injected at exactly the wrong moment to make for the worst possible performance. And if that doesn���t ruin the user experience enough, there are still invasive overlays and consent forms to click through (which, ironically, gets people mad at the legislation���like GDPR���instead of the underlying reason for these annoying overlays: unnecessary surveillance and tracking by the site you���re visiting).

Onboarding on the Clearleft podcast

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.

Headsongs

When I play music, it���s almost always instrumental. If you look at my YouTube channel almost all the videos are of me playing tunes���jigs, reels, and so on.

Most of those videos were recorded during The Situation when I posted a new tune every day for 200 consecutive days. Every so often though, I���d record a song.

I go through periods of getting obsessed with a particular song. During The Situation I remember two songs that were calling to me. New York was playing in my head as I watched my friends there suffering in March 2020. And Time (The Revelator) resonated in lockdown:

And every day is getting straighter, time���s a revelator.

The song I���m obsessed with right now is called Foreign Lander. I first came across it in a beautiful version by Sarah Jarosz (I watch lots of mandolin videos on YouTube so the algorithm hardly broke a sweat showing this to me).

There���s a great version by Tatiana Hargreaves too. And Tim O���Brien.

I wanted to know more about the song. I thought it might be relatively recent. The imagery of the lyrics makes it sound like something straight from a songwriter like Nick Cave:

If ever I prove false love
The elements would moan
The fire would turn to ice love
The seas would rage and burn

But the song is old. Jean Ritchie collected it, though she didn���t have to go far. She said:

Foreign Lander was my Dad’s proposal song to Mom

I found that out when I came across this thread from 2002 on mudcat.org where Jean Ritchie herself was a regular contributor!

That gave me a bit of vertiginous feeling of The Great Span, thinking about the technology that she used when she was out in the field.

I���ve been practicing Foreign Lander and probably driving Jessica crazy as I repeat over and over and over. It���s got some tricky parts to sing and play together which is why it���s taking me a while. Once I get it down, maybe I���ll record a video.

I spent most of Saturday either singing the song or thinking about it. When I went to bed that night, tucking into a book, Foreign Lander was going ���round in my head.

Coco���the cat who is not our cat���came in and made herself comfortable for a while.

I felt very content.

A childish little rhyme popped into my head:

With a song in my head
And a cat on my bed
I read until I sleep

I almost got up to post it as a note here on my website. Instead I told myself to do it the morning, hoping I wouldn���t forget.

That night I dreamt about Irish music sessions. Don���t worry, I���m not going to describe my dream to you���I know how boring that is for everyone but the person who had the dream.

But I was glad I hadn���t posted my little rhyme before sleeping. The dream gave me a nice little conclusion:

With a song in my head
And a cat on my bed
I read until I sleep
And dream of rooms
Filled with tunes.

Hanging punctuation in CSS

There���s a lovely CSS property called hanging-punctuation. You can use it to do exactly what the name suggests and exdent punctuation marks such as opening quotes.

Here���s one way to apply it:

html { hanging-punctuation: first last;}

Any punctuation marks at the beginning or end of a line will now hang over the edge, leaving you with nice clean blocks of text; no ragged edges.

Right now it���s only supported in Safari but there���s no reason not to use it. It���s a perfect example of progressive enhancement. One line of CSS to tidy things up for the browsers that support it and leave things exactly as they are for the browsers that don���t.

But when I used this over on The Session I noticed an unintended side-effect. Because I���m applying the property globally, it���s also acting on form fields. If the text inside a form field starts with a quotation mark or some other piece of punctuation, it���s shunted off to the side and hidden.

Here���s the fix I used:

input, textarea { hanging-punctuation: none;}

It���s a small little gotcha but I figured I���d share it in case it helps someone else out.

Spring drop

This weekend it felt like Spring dropped like an unexpected new album from Taylor Swift or Beyonc��.

The weather turned nice and sunny. The clocks sprang forward an hour. I had my first asparagus of the year. Flowers are flowering. It���s all just very nice.

It���s like the year would like to make up for the disappointing performance in its first quarter and promises much better things for the quarter to come.

I understand now why a major religion would co-opt this time of year for a resurrection-themed shindig.

Goodbye Winter. Hello Spring. Nice to see you again.