Tags: ft

We do quite a bit of prototyping at Clearleft. There’s no better way to reduce risk than to get something in front of users as quickly as possible to test whether you’re on the right track or not.

As Benjamin said in the podcast episode on prototyping:

It’s something to look at, something to prod. And ideally you’re trying to work out what works and what doesn’t.

Sometimes the prototype is mocked up in Figma. Preferably it’s built in code—HTML, CSS, and JavaScript. Having a prototype built in the materials of the medium helps establish a plausible suspension of disbelief during testing.

Also, as Trys said in that same podcast episode:

Prototypical code isn’t production code. It’s quick and it’s often a little bit dirty and it’s not really fit for purpose in that final deliverable. But it’s also there to be inspiring and to gather a team and show that something is possible.

I can’t reiterate that enough: prototype code isn’t production code.

I’ve written about the two different mindsets before:

So these two kinds of work require very different attitudes. For production work, quality is key. For prototyping, making something quickly is what matters.

Addy recently wrote an excellent blog post on the topic of prototyping. The value of a prototype is in the insight it imparts, not the code.

It’s crucial to remember that in a prototype, the code serves merely as a medium—a way to facilitate understanding. It’s a means to an end, not the end itself. The code of a prototype is disposable and mutable. In contrast, the lessons learned from a prototype, the insights gained from user interaction and feedback, are far more durable and impactful.

This!

It can be tempting to re-use code from a prototype. I get it. It seems like a waste to throw away code and build something from scratch. But trust me—and I speak from experience here—it will take more time to wrangle prototype code into something that’s production-ready.

The problem is that quality is often invisible. Think about semantics, performance, security, privacy, and accessibility. Those matter—for production code—but they’re under the surface. For someone who doesn’t understand the importance of those hidden qualities a prototype that looks like it works seems ready to ship. It’s understandable that they’d balk at the idea of just throwing that code away and writing new code. Sometimes the suspension of disbelief that a prototype is aiming for works too well.

As is so often the case, this isn’t a technical problem. It’s a communication issue.

UX London 2023 is over.

That feels weird. I’ve spent most of this year planning for this event. It’s been something that’s coming towards me. Now it’s in the rear-view mirror. Surreal.

I’ve talked about this with other conference organisers. Some of them get the post-conference blues. It makes sense. You spend so much time pouring all your energy into something and then one day, suddenly it’s done. No wonder smart folks book some holiday time for the week after a big event.

Luckily for me, the organisation of UX London isn’t all on my shoulders. Far from it. Louise did all the hard work: planning, logistics, execution. All I had to take care of was the line-up.

Before the event, I was already feeling pretty darn happy with the line-up I had assembled. Now that the event is over, I’m feeling even happier. I was blown away.

There were some speakers on the line-up that I already knew would deliver the goods. I’ve seen them speak before. They’re a safe pair of hands. But there were other speakers I had never met before, much less seen them speak. I was pretty sure they’d be great, but I couldn’t be certain.

Well, it turned out that literally everyone was fantastic. I know, I know—that sounds highly improbable. Out of 15 people, no duds? But take it from me, every single one of them was terrific. You kinda had to be there.

Imran, Vim, Daniel, Trine, Vitaly, Mansi, Stephen, Asia, Amy, Paul, Stacey, Ignacia, Stefanie, Hannah, and Dave—thank you, thank you, thank you!

I’ve been getting a heartwarming buzz from reading how much people got out of the event…

Eliza Lawson finished her summary by saying:

So many amazing things to take away from the conference. But I think the main one for me is “I want to do that. I could do that. I’m GOING to do that…one day.”

Anastasiya Korolkova came as part of the scholarship programme:

☺️ Thank you to everyone involved in organizing this remarkable event. Your dedication and hard work created a truly remarkable and enriching experience. I am sincerely grateful and eagerly look forward to what the future holds for UX London.

Jojo Tulip finished their detailed write-up by saying:

Couldn’t recommend UX London enough, it was awesome 😎👍

Jan Henckens said:

A good mix of inspiring talks and practical workshops, top-notch organisation and cool venue meant we had a great time (and we might already want to go back next year 😀)

And I’m equally pleased that the speakers got so much out of the event…

Imran:

Huge thanks to Jeremy Keith for inviting me, and the team at Clearleft for organising a great event.

Trine:

UX London was amazing - full of wonderful UX folks who genuinely care about using their skills to do good.

Mansi:

I bring back with me relationships and ideas that go way beyond the gathering!

I’m going to bask in this post-conference glow for a little while. Then it’s time to start planning the next event…

It’s often said that it’s easier to make a fast website than it is to keep a website fast. Things slip through. If you’re not vigilant, performance can erode without you noticing.

It’s a similar story for other invisible but important facets of your website: privacy, security, accessibility. Because they’re hidden from view, you won’t be able to see if there’s a regression.

That’s why it’s a good idea to have regular audits for performance, privacy, security, and accessibility.

I wrote about accessibility testing a while back, and how there’s quite a bit that you can do for yourself before calling in an expert to look at the really gnarly stuff:

When you commission an accessibility audit, you want to make sure you’re getting the most out of it. Don’t squander it on issues that you can catch and fix yourself. Make sure that the bulk of the audit is being spent on the specific issues that are unique to your site.

I recently did an internal audit of the Clearleft website. After writing up the report, I also did a lunch’n’learn to share my methodology. I wanted to show that there’s some low-hanging fruit that pretty much anyone can catch.

To start with, there’s keyboard navigation. Put your mouse and trackpad to one side and use the tab key to navigate around.

Caveat: depending on what browser you’re using, you might need to update some preferences for keyboard navigation to work on links. If you’re using Safari, go to “Preferences”, then “Advanced”, and tick “Press Tab to highlight each item on a web page.”

Tab around and find out. You should see some nice chunky :focus-visible styles on links and form fields.

Here’s something else that anyone can do: zoom in. Increase the magnification to 200%. Everything should scale proportionally. How about 500%? You’ll probably see a mobile-friendly layout. That’s fine. As long as nothing is broken or overlapping, you’re good.

At this point, I reach for some tools. I’ve got some bookmarklets that do similar things: tota11y and ANDI. They both examine the source HTML and CSS to generate reports on structure, headings, images, forms, and so on.

These tools are really useful, but you need to be able to interpret the results. For example, a tool can tell you if an image has no alt text. But it can’t tell you if an image has good or bad alt text.

Likewise, these tools are great for catching colour-contrast issues. But there’s a big difference between a colour-contrast issue on the body copy compared to a colour-contrast issue on one unimportant page element.

I think that demonstrates the most important aspect of any audit: prioritisation.

Finding out that you have accessibility issues isn’t that useful if they’re all presented as an undifferentiated list. What you really need to know are which issues are the most important to fix.

By the way, I really like the way that the Gov.uk team prioritises accessibility concerns:

The team puts accessibility concerns in 2 categories:

1. Theoretical: A question or statement regarding the accessibility of an implementation within the Design System without evidence of real-world impact.
2. Evidenced: Sharing new research, data or evidence showing that an implementation within the Design System could cause barriers for disabled people.

The team will usually prioritise evidenced issues and queries over theoretical ones.

When I wrote up my audit for the Clearleft website, I structured it in order of priority. The most important things to fix are at the start of the audit. I also used a simple scale for classifying the severity of issues: low, medium, and high priority.

Thankfully there were no high-priority issues. There were a couple of medium-priority issues. There were plenty of low-priority issues. That’s okay. That’s a pretty good distribution.

If you’re interested, here’s the report I delivered…

Accessibility audit on clearleft.com

Colour contrast

There are a few issues with the pink colour. When it’s used on a grey background, or when it’s used as a background colour for white text, the colour contrast isn’t high enough.

The SVG arrow icon could be improved too.

Recommendations

Medium priority

• Change the pink colour universally to be darker. The custom property --red is currently rgb(234, 33, 90). Change it to rgb(210, 20, 73) (thanks, James!)

Low priority

• The SVG arrow icon currently uses currentColor. Consider hardcoding solid black (or a very, very dark grey) instead.

Images

Alt text is improving on the site. There’s reasonable alt text at the top level pages and the first screen’s worth of case studies and blog posts. I made a sweep through these pages a while back to improve the alt text but I haven’t done older blog posts and case studies.

Recommendations

Medium priority

• Make a sweep of older blog posts and case studies and fix alt text.

Low priority

• Images on the contact page have alt text that starts with “A photo of…” — this is redundant and can be removed.

Headings

The site is using headings sensibly. Sometimes the nesting of headings isn’t perfect, but this is a low priority issue. For example, on the contact page there’s an h1 followed by two h3s. In theory this isn’t correct. In practice (for screen reader users) it’s not an issue.

Recommendations

Low priority

• On the home page, “UX London 2023” should probably be h3 instead of h1.
• On the case studies index page we’re currently using h3 headings for the industry sector (“Charities”, “Education” etc.) but these should probably not be headings at all. On the blog index page we use a class “Tags” for a similar purpose. Consider reusing that pattern on the case studies index page.
• On the about index page, “We’re driven to be” is an h3 and the subsequent three headings are h2s. Ideally this would be reversed: a single h2 followed by three h3s.

Link text

Sometimes the same text is used for different links.

Recommendations

Low priority

• On the home page the text “Read the case study” is re-used for multiple links. It would be better if each link were different e.g. “Read about The Natural History Museum.”

Forms

The only form on the site is the newsletter sign-up form. It’s marked up pretty well: the input has an associated label, although a visible (clickable) label would be better.

Tabbing order

The site doesn’t use JavaScript to mess with tabbing order for keyboard users. The source order of elements in the markup generally makes sense so all is good.

The focus styles are nice and clear too!

Structure

The site is using HTML landmark elements sensibly (header, nav, main, footer, etc.).

Back in November of last year I announced that UX London would be returning in 2023 and that I’d be curating the line-up again. That’s where I’ve been putting a lot of my energy over the last six months.

The line-up is complete. If I step back and try to evaluate it objectively, I’ve gotta say …hot damn, that’s a fine roster of speakers!

Imran Afzal, Vimla Appadoo, Daniel Burka, Trine Falbe, Vitaly Friedman, Mansi Gupta, Stephen Hay, Asia Hoe, Amy Hupe, Paul Robert Lloyd, Stacey Mendez, Ignacia Orellana, Stefanie Posavec, Hannah Smith, and David Dylan Thomas.

Take a look at the complete schedule—a terrific mix of thought-provoking talks and practical hands-on workshops.

On day one, you’ve got these talks:

• Designing your design process,
• Thinking differently about digital sustainability,
• Let’s choose empathy,
• The lies we tell ourselves about design systems, and
• What if people weren’t the product? Building a web that loves humanity.

Then on day two:

• The necessity and practice of women-centric design,
• Time team: Documenting decisions and marking milestones,
• User experience beyond screens,
• Can designers save lives? Not by themselves, and
• Ghosts in the machine: AI, design, and ethics.

And that’s just the talks! You’ve also got these four excellent workshops on both days:

• Practical, ethical design,
• Designing for complex UIs,
• Strategies for creating and evolving design systems, and
• Dataviz sketching session.

That’s a lot of great stuff packed into two days!

In case you haven’t guessed, I am very excited about this year’s UX London. I would love to see you there.

As an appreciation for you putting up with my child-like excitement, I’d like to share a discount code with you. You can get 20%—that’s one fifth!—off the ticket price using the code CLEARLEFT20.

But note that the standard ticket pricing ends on Friday, May 26th so use that code in the next week to get the most bang for your buck. After that, there’ll only be last-chance tickets, which cost more.

Looking forward to seeing you at Tobacco Dock on June 22nd and 23rd!

Before The Situation, I used to work in the Clearleft studio quite a bit. Maybe I’d do a bit of work at home for an hour or two before heading in, but I’d spend most of my working day with my colleagues.

That all changed three years ago:

Clearleft is a remote-working company right now. I mean, that’s hardly surprising—just about everyone I know is working from home.

Clearleft has remained remote-first. We’ve still got our studio space, though we’ve cut back to just having one floor. But most of the time people are working from home. I still occasionally pop into the studio—I’m actually writing this in the studio right now—but mostly I work out of my own house.

It’s funny how the old ways of thinking have been flipped. If I want to get work done, I stay home. If I want to socialise, I go into the studio.

For a lot of the work I do—writing, podcasting, some video calls, maybe some coding—my home environment works better than the studio. In the Before Times I’d have to put on headphones to block out the distractions of a humming workplace. Of course I miss the serendipitous chats with my co-workers but that’s why it’s nice to still have the option of popping into the studio.

Jessica has always worked from home. Our flat isn’t very big but we’ve got our own separate spaces so we don’t disturb one another too much.

For a while now we’ve been thinking that we could just as easily work from another country. I was inspired by a (video) chat I had with Luke when he casually mentioned that he was in Cypress. Why not? As long as the internet connection is good, the location doesn’t make any difference to the work.

So Jessica and I spent the last week working in Ortygia, Sicily.

It was pretty much the perfect choice. It’s not a huge bustling city. In fact it was really quiet. But there was still plenty to explore—winding alleyways, beautiful old buildings, and of course plenty of amazing food.

The time difference was just one hour. We used the extra hour in the morning to go to the market to get some of the magnificent local fruits and vegetables to make some excellent lunches.

We made sure that we found an AirBnB place with a good internet connection and separate workspaces. All in all, it worked out great. And because we were there for a week, we didn’t feel the pressure to run around to try to see everything.

We spent the days working and the evenings having a nice sundowner appertivo followed by some pasta or seafood.

It was simultaneously productive and relaxing.

I wrote a while back about the UX London 2023 scholarship programme. Applications are still open (until May 19th) so if you know someone who you think should apply, here’s the link. As I said then:

Wondering if you should apply? It’s hard to define exactly who qualifies for a diversity scholarship, but basically, the more your life experience matches mine, the less qualified you are. If you are a fellow able-bodied middle-aged heterosexual white dude with a comfortable income, do me a favour and don’t apply. Everyone else, go for it.

The response so far has been truly amazing—so many great applicants!

And therein lies the problem. Clearleft can only afford to sponsor a limited number of people. It’s going to be very, very, very hard to have to whittle this down.

But perhaps you can help. Do you work at a company that could afford to sponsor some places? If so, please get in touch!

Just to be clear, this would be different from the usual transactional sponsorship opportunities for UX London where we offer you a package of benefits in exchange for sponsorship. In the case of diversity scholarships, all we can offer you is our undying thanks.

I’ll admit I have an ulterior motive in wanting to get as many of the applicants as possible to UX London. The applications are positively aglow with the passion and fervour of the people applying. Frankly, that’s exactly who I want to hang out with at an event.

Anyway, on the off chance that your employer might consider this investment in the future of UX, spread the word that we’d love to have other companies involved in the UX London diversity scholarship programme.

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!

I’d like to play it cool when I announce the latest speakers for UX London 2023, like I could be all nonchalant and say, “oh yeah, did I not mention these people are also speaking…?”

But I wouldn’t be able to keep up that façade for longer than a second. The truth is I am excited to the point of skittish gigglyness about this line-up.

Look, I’ll let you explore these speakers for yourself while I try to remain calm and simply enumerate the latest additions…

• Ignacia Orellana, Service design and research consultant,
• Stefanie Posavec, Designer, artist and author, and
• David Dylan Thomas, Author, speaker, filmmaker.

The line-up is almost complete now! Just one more speaker to announce.

I highly recommend you get your UX London ticket if you haven’t already. You won’t want to miss this!

I know I’m being tease, doling out these UX London speaker announcements in batches rather than one big reveal. Indulge me in my suspense-ratcheting behaviour.

Today I’d like to unveil three speakers whose surnames start with the letter H…

• Stephen Hay, Creative Director at Rabobank,
• Asia Hoe, Senior Product Designer, and
• Amy Hupe, Design Systems consultant at Frankly Design.

Just look at how that line-up is coming together! There’ll be just one more announcement and then the roster will be complete.

But don’t wait for that. Grab your ticket now and I’ll see you in London on June 22nd and 23rd!