Journal tags: product

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.

1. 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.
2. Tshili Ndou follows on with her talk aboutvalidating features. Tschili will show you how to create high value products and avoid wasting money.
3. 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).
4. 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.

1. 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.
2. 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.
3. 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.
4. 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.

Jessica and I spent last week working remotely. We always work remotely in the sense of not being in an office, but I mean we were remote from home too.

We’ve done this twice before. Once in Ortigia, Sicily and once in Cáceres, Spain. This time we were in Turin.

We had one day at the start of the trip to explore the city and do touristy things, checking out museums and such. After that we hunkered down in a very lovely and cosy AirBnB working each day.

I found it very productive. Maybe it’s a similar effect to going to a coffee shop to write—something about the change of scene encourages more of a flow state. The apartment was nice and quiet too so it wasn’t a problem when I needed to be on a call.

Best of all was what awaited at the end of each working day. We were staying in the Quadrilatero neighbourhood, famed for its aperitivo scene. Heck, there was a wonderful Vermouth bar literally across the street.

And after an aperitivo? Time to sample some Piedmontese cuisine. Bagna càuda! Vitello tonnato! Agnolotti! Panna cotta! We had some wonderful meals at restaurants like Consorzio, L’Acino, and Pautasso (a neighbourhood spot we went to on our last night that had the most perfectly convivial atmosphere you could imagine).

They say a change is as good as a rest. I certainly enjoyed this change of scene.

There’s something about going somewhere for a working week that feels very different to going somewhere primarily as a tourist. You get a different flavour of a place.

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.

If you’re travelling around Ireland, you may come across some odd pieces of 19th century architecture—walls, bridges, buildings and roads that serve no purpose. They date back to The Great Hunger of the 1840s. These “famine follies” were the result of a public works scheme.

The thinking went something like this: people are starving so we should feed them but we can’t just give people food for nothing so let’s make people do pointless work in exchange for feeding them (kind of like an early iteration of proof of work for cryptobollocks on blockchains …except with a blockchain, you don’t even get a wall or a road, just ridiculous amounts of wasted energy).

This kind of thinking seems reprehensible from today’s perspective. But I still see its echo in the work ethic espoused by otherwise smart people.

Here’s the thing: there’s good work and there’s working hard. What matters is doing good work. Often, to do good work you need to work hard. And so people naturally conflate the two, thinking that what matters is working hard. But whether you work hard or not isn’t actually what’s important. What’s important is that you do good work.

If you can do good work without working hard, that’s not a bad thing. In fact, it’s great—you’ve managed to do good work and do it efficiently! But often this very efficiency is treated as laziness.

Sensible managers are rightly appalled by so-called productivity tracking because it measures exactly the wrong thing. Those instruments of workplace surveillance measure inputs, not outputs (and even measuring outputs is misguided when what really matters are outcomes).

They can attempt to measure how hard someone is working, but they don’t even attempt to measure whether someone is producing good work. If anything, they actively discourage good work; there’s plenty of evidence to show that more hours equates to less quality.

I used to think that must be some validity to the belief that hard work has intrinsic value. It was a position that was espoused so often by those around me that it seemed a truism.

But after a few decades of experience, I see no evidence for hard work as an intrinsically valuable activity, much less a useful measurement. If anything, I’ve seen the real harm that can be caused by tying your self-worth to how much you’re working. That way lies burnout.

We no longer make people build famine walls or famine roads. But I wonder how many of us are constructing little monuments in our inboxes and calendars, filling those spaces with work to be done in an attempt to chase the rewards we’ve been told will result from hard graft.

I’d rather spend my time pursuing the opposite: the least work for the most people.

I think it was Jason who once told me that if you want to make someone’s life a misery, teach them about typography. After that they’ll be doomed to notice all the terrible type choices and kerning out there in the world. They won’t be able to unsee it. It’s like trying to unsee the arrow in the FedEx logo.

I think that Stewart Brand’s pace layers model is a similar kind of mind virus, albeit milder. Once you’ve been exposed to it, you start seeing in it in all kinds of systems.

Each layer is functionally different from the others and operates somewhat independently, but each layer influences and responds to the layers closest to it in a way that makes the whole system resilient.

Last month I sent out an edition of the Clearleft newsletter that was all about pace layers. I gathered together examples of people who have been infected with the pace-layer mindworm who were applying the same layered thinking to other areas:

• Rich applied pace layers to career paths,
• Mark applied pace layers to the design process, and
• Jorge Arango applied pace layers to reading.

My own little mash-up is applying pace layers to the World Wide Web. Tom even brought it to life as an animation.

See the Pen Web Layers Of Pace by Tom (@webrocker) on CodePen.

Recently I had another flare-up of the pace-layer pattern-matching infection.

I was talking to some visiting Austrian students on the weekend about design principles. I explained my mild obsession with design principles stemming from the fact that they sit between “purpose” (or values) and “patterns” (the actual outputs):

Purpose » Principles » Patterns

Your purpose is “why?”

That then influences your principles, “how?”

Those principles inform your patterns, “what?”

Hey, wait a minute! If you put that list in reverse order it looks an awful lot like the pace-layers model with the slowest moving layer at the bottom and the fastest moving layer at the top. Perhaps there’s even room for an additional layer when patterns go into production:

• Production
• Patterns
• Principles
• Purpose

Your purpose should rarely—if ever—change. Your principles can change, but not too frequently. Your patterns need to change quite often. And what you’re actually putting out into production should be constantly updated.

As you travel from the most abstract layer—“purpose”—to the most concrete layer—“production”—the pace of change increases.

I can’t tell if I’m onto something here or if I’m just being apopheniac. Again.

I’ve written before about how I don’t have notifications on my phone or computer. But that doesn’t stop computer programmes waving at me, trying to attract my attention.

If I have my email client open on my computer there’s a red circle with a number in it telling me how many unread emails I have. It’s the same with Slack. If Slack is running and somebody writes something to me, or @here, or @everyone, then a red circle blinks into existence.

There’s a category of programmes like this that want my attention—email, Slack, calendars. In each case, emptiness is the desired end goal. Seeing an inbox too full of emails or a calendar too full of appointments makes me feel queasy. In theory these programmes are acting on my behalf, working for me, making my life easier. And in many ways they do. They help me keep things organised. But they also need to me to take steps: read that email, go to that appointment, catch up with that Slack message. Sometimes it can feel like the tail is wagging the dog and I’m the one doing the bidding of these pieces of software.

My RSS reader should, in theory, fall into the same category. It shows me the number of unread items, just like email or Slack. But for some reason, it feels different. When I open my RSS reader to catch up on the feeds I’m subscribed to, it doesn’t feel like opening my email client. It feels more like opening a book. And, yes, books are also things to be completed—a bookmark not only marks my current page, it also acts as a progress bar—but books are for pleasure. The pleasure might come from escapism, or stimulation, or the pursuit of knowledge. That’s a very different category to email, calendars, and Slack.

I’ve managed to wire my neurological pathways to put RSS in the books category instead of the productivity category. I’m very glad about that. I would hate if catching up on RSS feeds felt like catching up on email. Maybe that’s why I’m never entirely comfortable with newsletters—if there’s an option to subscribe by RSS instead of email, I’ll always take it.

I have two folders in my RSS reader: blogs and magazines. Reading blog posts feels like catching up with what my friends are up to (even if I don’t actually know the person). Reading magazine articles feels like spending a lazy Sunday catching up with some long-form journalism.

I should update this list of my subscriptions. It’s a bit out of date.

Matt made a nice website explaining RSS. And Nicky Case recently wrote about reviving RSS.

Oh, and if you want to have my words in your RSS reader, I have plenty of options for you.

Following on from Jeffrey and Margot, the third talk in the morning’s curated content at An Event Apart Seattle is from Sarah Parmenter. Her talk is Designing for Personalities. Here’s the description:

Just as our designs today must accommodate differences of gender, cultural background, and other factors, it’s time to create apps, websites, and internal processes that account for still another strand of human diversity: our very different personality types.

In this new presentation, Sarah shares real-life case studies demonstrating how businesses and organizations large and small are learning to adjust the thinking behind their websites and processes to account for the wishes, needs, and comfort levels of all kinds of people.

We know that the world is full of different conventions—currency, measuring systems, and more—and our web forms address these differences. Let’s do the same for the emotional and psychological assumptions behind our customer profiles. Let’s learn to design for a palette of different personalities.

I’m going to do my best to write down some of what she says…

Sarah works with Adobe, and at a gathering last year, she ended up chatting with some of her co-workers about ancestry, for some reason. She mentioned that she had French and Norwegian roots. The French part is evident in her surname: parmentier means potato farmer. So Sarah did a DNA test. It turned out that Sarah had no French or Norwegian roots—everything in her ancestry came from within an eighty mile radius of her home. It was scary how much she strongly believed for years in something that just wasn’t true.

It’s like that on the web. There are things we do because lots of people do them, but that doesn’t mean they work. Many websites and digital processes are broken and it’s down to us to fix it.

With traditional personas, we make an awful lot of assumptions about people. Have a look at facebook.com/ads/preferences. See just how easy it is for computers to make startling amounts of assumptions.

The other problem with personas is that they are amalgamations. But there’s no such thing as an average costumer. The Microsoft design team add much more context so that they can design for real people in real situations.

Designing for personas only takes care of a fraction of the work we need to do. When we add in another layer of life getting in the way, and a layer of how someone is feeling, you’ve a medley of UX issues that need solving.

The problem is that personality traits aren’t static. They evolve with context. Personas are contextual but static. What we should really be doing is creating the most desirable experience for the user, and we can only do that by empowering them, as Margot also said. We need to give our users control.

If there were such controls, Sarah would use them to reduce motion on websites. She suffers from motion sickness and some websites literally make her sick. There is a prefers-reduced-motion media query but so far only Safari and Firefox support it. It’s hard to believe that we haven’t been doing this already. This stuff seems so obvious in hindsight.

Sarah asks who in the room are introverts. People raise their hands (which seems like quite an extroverted thing to do).

Now Sarah brings up the Meyers-Briggs test, a piece of pseudoscientic bollocks. Sarah is INFJ—introversion, intuition, feeling, judging. Weird flex, but okay.

Introverts will patiently seek out complex UX patterns if it aligns with their levels of comfort. These are people who would rather do anything rather than speak to someone on the phone. An introvert figured out that if you sat on the Virgin Atlantic homepage long enough, a live chat will pop up after twenty minutes.

Apple is great for introverts. They don’t bury their chat options (unlike Amazon). Remember, introverts are a third of the population.

Users will begin to value those applications and services that bother them the least, respect their privacy, and allow them a certain level of control.

Let’s talk about designing compassionate products.

What we’re asking of people in time-critical or exceptionally personal situations is for them to have the foresight to turn on incognito mode. Everyone has an urban legend horror story about cookies following them around the web. Cookies can seem like a smart marketing solution until context lets them down.

Sarah’s best friend got pregnant. She started excitedly clicking around the web looking for pregnancy-related products. She sadly lost the baby. Sarah explained to her how to use a cookie eraser. Her friend that she was joking. Sarah showed her how to clean her search history. But if you’ve liked and subscribed a bunch of things while you’re excited, it’s not that easy—when the worst happens—to think back on everything you did.

There’s an app that’s not in the US. It’s a menstrual cycle and fertility tracking app. It captures a lot of data. At the point when Sarah’s friend lost her baby, this change was caught by the app. The message she got was lacking in empathy. It was more like market research than a compassionate message. At a time when they should’ve been thinking of the mindset of their user, they were focused on getting data. No one caught this when the app was being designed.

The entire user experience of our websites and apps is going to rely on how empathetic we are.

We don’t always save things to reminisce; we save to give us the option to remember. We can currently favourite a photograph or flag as inapropriate. It would be nice to simply save something to a memory vault.

Bloom and Wild is a company in the UK. They send nice mailbox flowers. On March 5th last year, Sarah sent an email to the CEO of Bloom and Wild. She had just received a mailout about mother’s day after her mother passed away. Was their no way of opting out of receiving mother’s day emails without unsubscribing completely?

Well, yesterday they finally implemented it! Bloom and Wild have been overwhelmed by the positive response.

For those of us trying to make the web a better place, sometimes it can be as simple as reaching out to point out what companies could be doing better. And sometimes, just sometimes, they listen.

Also, read Design For Real Life by Eric Meyer and Sara Wachter-Boettcher.

As standard, we should be giving users end-to-end control over how they interact with us.

Sarah wants to talk about designing a personal UX journey. For one of her clients, Sarah dip-sampled hundreds of existing customers. There were gaps in the customer journey. They think that what was happening was the company was getting very aggressive after initial interaction—they were phoning customers. Sarah and her team started researching this. That made them unpopular with other parts of the company. Sarah gave her team Groucho Marx glasses whenever they had to go and ask people uncomfortable questions.

Sarah’s team went on a remarketing effort. They sent an email to people who were in the gap between booking an appointment and making a purchase. They asked the users what their preferences were for contacting them. The company didn’t think they were doing anything wrong but this research showed that 76% of people prefered to avoid phone calls.

They asked a few more questions. If you ask questions, there has to be value in it for the users. Sarah got the budget for some gift cards. They got feedback that many people don’t like taking calls, especially when they’re at work. The best: “I’m an intorvert. I hate calls. Sorry.”

The customer feedback was very, very clear. Even though this would take a lot of money to fix, it was crucial to fix it. Being agile was crucial.

Then they looked at a different (shorter) gap in the customer journey. It was clear that an online booking service was desirable. They made a product quickly that booked more appointments in ten days than had previously been booked in a month by sales agents.

They also made a live chat system. You see a very slow roll-out. At the beginning, it has all new customers. After a while, people return with more questions.

The mistake they made was having a tech-savvy team with multiple browser windows open. That’s not how the customer service people operate. They usually deal with people one on one. So they were happy to leave people waiting on live chat for twenty or twenty five minutes, and of course that was far too long. So when you’re adding in a new system like this, think about key performance indicators that you want to go along with it e.g. live chat must have a response within five minutes.

There’s also a long tail of conversion. Sometimes the sales cycle is very lengthy. They decided to give users the ability to select which product they wanted and switch options on and off. It was all about giving the power back to the user. This was a phenomenal change for the company. They were able to completely change the customer journey and reduce those big gaps. They went from a cycle of fourteen weeks to seven days. They did that by handing the power back to the user.

Sarah’s question for the audience is: What is stopping your user completing your cycle? This can be very difficult. You might have to do horrible things to validate a concept. It’s okay. We’re all perfectionists, but sometimes you have to use quick’n’dirty code to achieve your goal. If the end goal is we’re able to say “hey, this thing worked!” then we can go back and do it properly.

To recap:

• Respect privacy and build in a personal level of UX adjustment into every product.
• Outlier data can create superfans of your product.
• Build the most empathetic experience that you can.

When we do front-end development at Clearleft, we’re usually delivering production code, often in the form of a component library. That means our priorities are performance, accessibility, robustness, and other markers of quality when it comes to web development.

But every so often, we use the materials of front-end development—HTML, CSS, and JavaScript—to produce something that isn’t intended for production. I’m talking about prototyping.

There are plenty of non-code prototyping tools out there, and our designers often reach for them to communicate subtleties like motion design. But when it comes to testing a prototype with real users, it’s hard to beat the flexibility of HTML, CSS, and JavaScript. Load it up in a browser and away you go.

We do a lot of design sprints, where time is of the essence. The prototype we produce on the penultimate day of the sprint definitely won’t be production quality, but it will be good enough to test.

What’s interesting is that—when it comes to prototyping—our usual front-end priorities can and should go out the window. The priority now is speed. If that means sacrificing semantics or performance, then so be it. If I’m building a prototype and I find myself thinking “now, what’s the right class name for this component?”, then I know I’m in the wrong mindset. That question might be valid for production code, but it’s a waste of time for prototypes.

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

Whereas I would think long and hard about the performance impacts of third-party libraries and frameworks on a public project, I won’t give it a second thought when it comes to a prototype. Throw all the JavaScript frameworks and CSS libraries you want at it (although I would argue that in-browser technologies like CSS Grid have made CSS libraries like Bootstrap less necessary, even for prototyping).

Alternating between production projects and prototyping projects can be quite fun, if a little disorienting. It’s almost like I have to flip a switch in my brain to change tracks.

When a prototype is successful, works great, and tests well, there’s a real temptation to use the prototype code as the basis for the final product. Don’t do this! I’ve made that mistake in the past and it always ends badly. I ended up spending far more time trying to wrangle prototype code to a production level than if I had just started from a clean slate.

Build prototypes to test ideas, designs, interactions, and interfaces …and then throw the code away. The value of a prototype is in answering questions and testing hypotheses. Don’t fall for the sunk cost fallacy when it’s time to switch over into production mode.

Of course it should go without saying that you should never, ever release prototype code into production.

And yet…

More and more live sites seem to be built with a prototyping mindset. Weighty JavaScript frameworks are used regardless of appropriateness. Accessibility, if it’s even considered at all, is relegated to an afterthought. Fragile architectures are employed that rely on first loading and then executing JavaScript in order to render basic content. Developer experience is prioritised over user experience.

Heydon recently highlighted an article that offered this tip for aspiring web developers:

As for HTML, there’s not much to learn right away and you can kind of learn as you go, but before making your first templates, know the difference between in-line elements like span and how they differ from block ones like div.

That’s perfectly reasonable advice …if you’re building a prototype. But if you’re building something for public consumption, you have a duty of care to the end users.

It’s day two of An Event Apart in Boston and Val is giving a new talk about building expressive products:

The products we design today must connect with customers across different screen sizes, contexts, and even voice or chat interfaces. As such, we create emotional expressiveness in our products not only through visual design and language choices, but also through design details such as how interface elements move, or the way they sound. By using every tool at our disposal, including audio and animation, we can create more expressive products that feel cohesive across all of today’s diverse media and social contexts. In this session, Val will show how to harness the design details from different media to build overarching themes—themes that persist across all screen sizes and user and interface contexts, creating a bigger emotional impact and connection with your audience.

I’m going to attempt to live blog her talk. Here goes…

This is about products that intentionally express personality. When you know what your product’s personality is, you can line up your design choices to express that personality intentionally (as opposed to leaving it to chance).

Tunnel Bear has a theme around a giant bear that will product you from all the bad things on the internet. It makes a technical product very friendly—very different from most VPN companies.

Mailchimp have been doing this for years, but with a monkey (ape, actually, Val), not a bear—Freddie. They’ve evolved and changed it over time, but it always has personality.

But you don’t need a cute animal to express personality. Authentic Weather is a sarcastic weather app. It’s quite sweary and that stands out. They use copy, bold colours, and giant type.

Personality can be more subtle, like with Stripe. They use slick animations and clear, concise design.

Being expressive means conveying personality through design. Type, colour, copy, layout, motion, and sound can all express personality. Val is going to focus on the last two: motion and sound.

Expressing personality with motion

Animation can be used to tell your story. We can do that through:

• Easing choices (ease-in, ease-out, bounce, etc.),
• Duration values, and offsets,
• The properties we animate.

Here are four personality types…

Calm, soft, reassuring

You can use opacity, soft blurs, small movements, and easing curves with gradual changes. You can use:

• fade,
• scale + fade,
• blur + fade,
• blur + scale + fade.

Pro tip for blurs: the end of blurs always looks weird. Fade out with opacity before your blur gets weird.

You can use Penner easing equations to do your easings. See them in action on easings.net. They’re motion graphs plotting animation against time. The flatter the curve, the more linear the motion. They have a lot more range than the defaults you get with CSS keyword values.

For calm, soft, and reassuring, you could use easeInQuad, easeOutQuad, or easeInOutQuad. But that’s like saying “you could use dark blue.” These will get you close, but you need to work on the detail.

Confident, stable, strong

You can use direct movements, straight lines, symmetrical ease-in-outs. You should avoid blurs, bounces, and overshoots. You can use:

• quick fade,
• scale + fade,
• direct start and stops.

You can use Penner equations like easeInCubic, easeOutCubic and easeInOutCubic.

Lively, energetic, friendly

You can use overshoots, anticipation, and “snappy” easing curves. You can use:

• overshoot,
• overshoot + scale,
• anticipation,
• anticipation + overshoot

To get the sense of overshoots and anticipations you can use easing curves like easeInBack, easeOutBack, and easeInOutBack. Those aren’t the only ones though. Anything that sticks out the bottom of the graph will give you anticipation. Anything that sticks out the top of the graph will give you overshoot.

If cubic bezier curves don’t get you quite what you’re going for, you can add keyframes to your animation. You could have keyframes for: 0%, 90%, and 100% where the 90% point is past the 100% point.

Stripe uses a touch of overshoot on their charts and diagrams; nice and subtle. Slack uses a bit of overshoot to create a sense of friendliness in their loader.

Playful, fun, lighthearted

You can use bounces, shape morphs, squashes and stretches. This is probably not the personality for a bank. But it could be for a game, or some other playful product. You can use:

• bounce,
• elastic,
• morph,
• squash and stretch (springs.

You can use easing equations for the first two, but for the others, they’re really hard to pull off with just CSS. You probably need JavaScript.

The easing curve for elastic movement is more complicated Penner equation that can’t be done in CSS. GreenSock will help you visual your elastic easings. For springs, you probably need a dedicated library for spring motions.

Expressing personality with sound

We don’t talk about sound much in web design. There are old angry blog posts about it. And not every website should use sound. But why don’t we even consider it on the web?

We were burnt by those terrible Flash sites with sound on every single button mouseover. And yet the Facebook native app does that today …but in a much more subtle way. The volume is mixed lower, and the sound is flatter; more like a haptic feel. And there’s more variation in the sounds. Just because we did sound badly in the past doesn’t mean we can’t do it well today.

People say they don’t want their computers making sound in an office environment. But isn’t responsive design all about how we don’t just use websites on our desktop computers?

Amber Case has a terrific book about designing products with sound, and she’s all about calm technology. She points out that the larger the display, the less important auditive and tactile feedback becomes. But on smaller screens, the need increases. Maybe that’s why we’re fine with mobile apps making sound but not with our desktop computers doing it?

People say that sound is annoying. That’s like saying siblings are annoying. Sound is annoying when it’s:

• not appropriate for the situation,
• played at the wrong time,
• too loud,
• lacks user control.

But all of those are design decisions that we can control.

So what can we do with sound?

Sound can enhance what we perceive from animation. The “breathe” mode in the Calm meditation app has some lovely animation, and some great sound to go with it. The animation is just a circle getting smaller and bigger—if you took the sound away, it wouldn’t be very impressive.

Sound can also set a mood. Sirin Labs has an extreme example for the Solarin device with futuristic sounds. It’s quite reminiscent of the Flash days, but now it’s all done with browser technologies.

Sound is a powerful brand differentiator. Val now plays sounds (without visuals) from:

• Slack,
• Outlook Calendar.

They have strong associations for us. These are earcons: icons for the ears. They can be designed to provoke specific emotions. There was a great explanation on the Blackberry website, of all places (they had a whole design system around their earcons).

Here are some uses of sounds…

Alerts and notifications

You have a new message. You have new email. Your timer is up. You might not be looking at the screen, waiting for those events.

Navigating space

Apple TV has layers of menus. You go “in” and “out” of the layers. As you travel “in” and “out”, the animation is reinforced with sound—an “in” sound and an “out” sound.

Confirming actions

When you buy with Apple Pay, you get auditory feedback. Twitter uses sound for the “pull to refresh” action. It gives you confirmation in a tactile way.

Marking positive moments

This is a great way of making a positive impact in your user’s minds—celebrate the accomplishments. Clear—by Realmac software—gives lovely rising auditory feedback as you tick things off your to-do list. Compare that to hardware products that only make sounds when something goes wrong—they don’t celebrate your accomplishments.

Here are some best practices for user interface sounds:

• UI sounds be short, less than 400ms.
• End on an ascending interval for positive feedback or beginnings.
• End on a descending interval for negative feedback, ending, or closing.
• Give the user controls to top or customise the sound.

When it comes to being expressive with sounds, different intervals can evoke different emotions:

• Consonant intervals feel pleasant and positive.
• Dissonant intervals feel strong, active, or negative.
• Large intervals feel powerful.
• Octaves convey lightheartedness.

People have made sounds for you if you don’t want to design your own. Octave is a free library of UI sounds. You can buy sounds from motionsound.io, targetted specifically at sounds to go with motions.

Let’s wrap up by exploring where to find your product’s personality:

• What is it trying to help users accomplish?
• What is it like? (its mood and disposition)

You can workshops to answer these questions. You can also do research with your users. You might have one idea about your product’s personality that’s different to your customer’s. You need to project a believable personality. Talk to your customers.

Designing for Emotion has some great exercises for finding personality. Conversational Design also has some great exercises in it. Once you have the words to describe your personality, it gets easier to design for it.

So have a think about using motion and sound to express your product’s personality. Be intentional about it. It will also make the web a more interesting place.

dConstruct 2015 is just ten days away. Time to draw the pre-conference podcast to a close and prepare for the main event. And yes, all the talks will be recorded and released in podcast form—just as with the previous ten dConstructs.

The honour of the final teaser falls to Nick Foster. We had a lovely chat about product design, design fiction, Google, Nokia, Silicon Valley and Derbyshire.

I hope you’ve enjoyed listening to these eight episodes. I had certainly had a blast recording them. They’ve really whetted my appetite for dConstruct 2015—I think it’s going to be a magnificent day.

With the days until the main event about to tick over into single digits, this is your last chance to grab a ticket if you haven’t already got one. And remember, as a loyal podcast listener, you can use the discount code ‘ansible’ to get 10% off.

See you in the future …next Friday!