Ctrl + Alt + Delight: A Keyboard Shortcut to Great Content Design

Ningfei Ou at UXDX Community: From Ideation to Delight in Design. Video: https://youtu.be/T8fx0i2C17s

Readable transcript: edited from the recording's captions for readability (fillers and false starts removed, punctuation and section headings added). Wording is the speaker's own. Timestamps are positions in the video. Names marked [?] could not be verified against the audio.

Errors, despair, and why content matters

[00:00:00] Hi everybody, my name is Ningfei, or Ning, and I will share a bit about content design, or UX writing, tonight. I don't know how many of you are UX writers already, or content designers, or maybe you're a product designer or an aspiring product designer. But regardless, I think it's extremely important to talk about how content plays a key role in terms of the entire product, whether it's an app that you're building, or a website, or a particular software. So I'm going to go straight into it.

[00:00:38] Right, so this is an error that is not happening right now to your computer, so don't fear. It's something you might have seen if you were using a PC maybe 10, 20 years ago, and it goes to show how much we've moved from such errors. I don't know if this blue screen of death still exists today, but if it does, I think at least the copy, the writing on the screen, should be changed. It doesn't bring delight, in fact it brings despair, probably, if you were working halfway through your work and it tells you to press control alt delete.

[00:01:23] So we've come a long way from such error messages. This is another example of a terrible critical error in the computer. Let's say if you've done too many operations, this might come up on your Windows. And so what I want to say is that how we communicate on the screen is very important in letting the user know what's happening and bringing out the emotions in the user. So, how do we design content in a way, and how do we write in a way, that brings delight and brings joy and ease of use for your product?

[00:01:56] A bit about myself. I'm from Singapore, a small country in Southeast Asia, and that's originally where I'm from. I've studied in the US and the UK, now I'm based in Berlin in Germany, and I work at Bolt, which is the ride hailing app. There's food delivery and other services as well, and we're in most parts of Europe, the Middle East and Africa. So in my free time I write a bit of poetry with a typewriter, and I have a design podcast that I just launched about two, three weeks ago, and you can find out more on my LinkedIn. Oh, by the way, introduce yourself in the chat if you wish. Very interested to hear and to find out who else is in this event tonight.

What content design is

[00:02:45] Now, a bit about content design, a very quick intro. So content design started off with product design, specializing in words within product design, and it may have evolved from content strategy or copywriting or various other associated disciplines. Now, how it works is that within the product, you can see this triangle, this is visual design, this is interaction design, how users interact with it, and this is content design, what it says and how it communicates to the user. So these three play a big role, and content design is one of the main pillars of that. It is a niche today within the entire product design industry, but it is by no means rare. You wouldn't have a short supply of content designers out there if you are starting a company.

[00:03:46] So one concept that I want to mention here is that copy, or words, or text, or strings, however you put it, is design. And this is something that product designers should be aware of. Initially it started with a lot of lorem ipsum text, but then it has evolved to become more embedded within design as a discipline itself. So on average, for a FAANG company or a big startup like mine, you will get an average of maybe four to five product designers to one UX writer or content designer. The terms are synonymous, by the way. So that's how it has been run, and a good design team should have a UX writer within the team.

[00:04:39] So content design is evolving. As you can see, this is just a comparison of some of the apps you see in Asia, and you can see, from the left to the right, there's a big change in information hierarchy, or information architecture, and how crowded it is on the left. So for apps in China, for instance, it has evolved to a point where if you're communicating in Mandarin or in Chinese or another language, you might have a very different UI than how you would see it with a more English-facing app, for instance, today. So it's constantly evolving, and it's not just evolving with time, it's evolving with geographies, and that's something that is interesting to mention.

[00:05:30] And why is it important? Good content writing can help users grasp information quickly, allowing for a smoother navigation experience, enhanced user engagement, positive connection with users, increased conversion and completion of tasks, which is a primary duty as a product designer, and it helps to build trust and credibility for your brand. And if you're a designer, you should be asking these questions as you write for the app. Does my user understand it? Do I know what words to use? Why is my product performing badly? How do I group content together? How do I declutter my web page? Why do users dislike my app? These are questions, if you're asking these, these are very related to content design.

[00:06:11] So this is an example of a message that I received from my home bank back in Singapore, and it says, "Hm, it seems you did not save any money last month. Don't let financial emergencies catch you off guard, manage your spending with these tips, because every little bit you save," and so on. So when I first got this I was kind of astounded, because it's telling me outright that I didn't save any money last month, which is not true, because I only didn't save money with this particular bank and I was a user of several banks. And as a designer, if you're not aware of your user behavior, and as a writer, if you word things like that, it can be very offensive to your user sometimes, and it might put them off, or it might dissuade them from using your app.

Clear, concise, useful

[00:06:54] So as a content designer or a UX writer, what should you look out for? The key principles are that it should be clear, it should be concise, and it should be useful to your user. If you have the means to, or if it's appropriate, it can be delightful, and you can employ heuristics, behavior heuristics, much like design principles or usability heuristics, where you can.

[00:07:23] So broadly speaking, this is how I see content design and how I see it being grouped. A big chunk of which is UI, or microcopy. So these are words that you will write for an interface, and they are very plain, they're very simple, and they are meant to tell you what's going on, and that's it, and not try to do more than what it should. So your menus, your calls to action, your navigation, like your tab, your click and so on, headers, instructions, success and error messages and so on. So all of these serve a particular function, to communicate to the user what's going on with the app and with the interaction with the app.

[00:08:12] And then you have slightly content heavier sort of copy, which is more onboarding, maybe more related to your product, maybe you can slip in a bit of marketing in there, push notifications for example, campaign related stuff. And then you go into long form, or perhaps even social media stuff, so that is more traditional marketing copywriting.

[00:08:37] And then you have other things and skill sets which are part of the content design domain, which includes information architecture, which has been around for a long time, and that is how you would structure a website or an app, kind of like a sitemap, how the information flows, how it's categorized, how it's classified, nomenclature and so on. So that's a big school.

[00:09:02] And then there's conversation design, or voice user interface. That's another realm of content design, where you would design for chatbots and how to converse with people, and there are principles with that as well, like the cooperation principle, or maybe waiting, or even prompting the user. So that's very big now. It used to be very popular with designers who were specializing in, let's say, Alexa or Siri or the Google app and so on, and I hope I don't trigger my Google. But yeah, that's one domain that's increasingly getting more specialized because of chatbots, but also because of AI, with ChatGPT, with formerly Bard, now Gemini.

[00:09:45] And then there's also creative copywriting, that's more ad based, maybe a bit more of brand slogans, a bit more of out of home ads for example. Fascinating stuff. I don't quite have a very, very good muscle for that, it used to be, but then now I'm really specializing in microcopy and UI. But all of these fall within the domain of content design.

Buttons, tooltips and tone

[00:10:09] So an example of UI microcopy, which is one of the most important things, which is a button copy. This is how your business gets users through the door, whether to put in words like Submit, when to say Get Started, Save Changes, Next, Continue, whatever. So an example of what you can do here is to use action-oriented and concise language to clearly communicate the outcome of clicking or tapping the button. So avoid generic terms like "click here", "tap here". And I like to say that it's the big and the fat and the most important thing, because it drives the most traffic and is the most important for conversion.

[00:10:50] Or you can talk about tooltips, which is a UX writer's best friend. How do we conceal, or how do we save information for later, or how do we put a mask over it, or rather put it in a separate room where it's not needed up front? "Hover over the icon for more details", "tap and hold to see more options", these kinds of content can be put into such tooltips. You would usually see a tooltip with the "i" in a circle icon maybe, or maybe it's hidden in a caret, in a dropdown, or one of these. So, why tooltips? They provide supplementary information or guidance without cluttering the interface.

[00:11:32] Now let's talk about tone and voice as well. This is something that's quite relevant. So as you can see, this is the same message but repeated five times as it goes down the rows, and you can see the tone differing, from "File saved", "File save, nicely done", all the way to "Yay, mad props on saving the file", which is very informal, very casual. And this has got to do with overall brand voice and your tone of voice, and how you, as a UX writer or content designer or even product designer, you might be the one deciding or influencing what this brand voice might be. So this is also something to pay attention to.

Rewriting an error message

[00:12:13] Another example, error messages, on how something that is seemingly okay. The original one of saying "Failure. An authentication error has occurred." This is not bad, this is decent copy. I can understand what's going on. But then we can make it simpler by simplifying the language, by saying "You entered the incorrect password", which is precise, it tells you what's wrong, not just about authentication. And then it's not so in your face, it doesn't use the word failure. And then can we make it more concise? Yes we can, we can say just "Wrong password", okay, that's it. But then we want to help our users to recover from this error and to bring them back to the flow where we want them, and we can say "Recover password", maybe provide an option for your user, so that's user freedom. So that's an example.

[00:13:04] This is another example of an error message, or rather just an instructional message to let the user know what they can do. This is a simple lesson in being concise and using active language rather than passive language. So "Click the button, download the file" front loads the verb, it doesn't use passive, which is a lot longer. Same thing for this example.

[00:13:27] Another thing about information architecture and about structuring your information: you can use bullet points. This is something that, if you're not a content writer, you might not realize. Use bullet points, number them, unnumbered lists and so on, use them to your advantage. Input fields, placeholder texts, instructions, these are all very important, providing examples, so it really helps your user move along the flow and help to reduce the friction where it might be complicated, for example an IBAN or whatever it is.

[00:14:09] So another thing to pay attention to is staying human. How can we as content designers bring humanity and empathy into an app, and personality? We sometimes risk being a bit too robotic if we just put in exactly what's going on, especially if you plug in, let's say, backend error messages. That's what I'm dealing with, in fact today, right at work, I had to rewrite some of the error messages that the back end was producing internally for the developers, but it didn't sound as human as it could be.

Heuristics: the psychology behind the words

[00:14:51] Now I'm going to speed through some of the other parts, because I don't have too much time. I'll just jump through a bit about heuristics, which is the psychology behind the words that we use. Some of the principles, if you're a product designer you might already be familiar with them, and a lot of it overlaps with how one would design for content or write copy. And one of which is, let's say, the system versus the real world. On the left you have a real calculator, well, this is 3D design, but a real calculator would look like this, and this is why our digital calculators look like this today as well. It tries to match the experience that we are already familiar with.

[00:15:30] And same thing in real life, we might get a road sign that tells us what's going on, and it's red, typically very big. Why? Because these are critical errors, critical dangers. And a speed bump might help us to slow down and be aware of what's going on. So these are things that you can also introduce in the digital app, not only as a product designer but as a UX writer. Just let users know, for example, this action cannot be undone. This is very important, let the user know that this action is irreversible, and we want to introduce this friction so that users can know that it is a very important or critical action that they are about to take.

[00:16:15] So this is me mapping, using Google Maps, and just showing some other heuristics that I might employ as a UX writer. So one of which is progressive disclosure, which is also a design principle. You disclose information progressively at the point where your user might need it the most. So this is an accordion, not a dropdown, it's an accordion hidden as a tooltip with a downward facing caret, which then reveals more information step by step. And if I had this at the start this would be overwhelming, but I just need the critical information here, and then it progressively discloses it to me, in Google Maps for example.

[00:16:56] Another one is this copy over here: "You can review this order before it's final." This anticipates some of the anxieties that the user might face. This is Amazon checkout, and it tells me that by clicking Continue I'm not paying for it yet, and this really helps with conversion, for example.

[00:17:14] Now, we can use heuristics to nudge users towards a certain action, but we may risk overdoing it if we employ too much dark UI, or evil UI, or patterns. So what this means is, we try to make use of some of the flaws in human behavior, human psychology, to maybe really try to move some metrics in the app, but then it might be to the user's detriment. Because look at this, this is Booking.com. I think this might have been exaggerated, but it just shows you, and I'm sure you might have experienced it, it shows you how some of these really prey on the anxiety, or the envy, or the FOMO of users, to really act on it as soon as they can. Like, 33 other people are looking at this now, so, oh, I better do something, I better reserve this now, otherwise I might lose this opportunity. So yeah, this is a negative example of using it the wrong way.

AI, and its limits

[00:18:20] Now, I've been asked to speak a bit about AI in some of the other seminars that I've spoken at, and I won't talk about that in detail today, but what about ChatGPT and other AI or writing tools that we use? And what I always say, if this question comes to you, is that we should embrace it, because overall it's better for the app, it's better for the product that we use, and technology and products generally help humanity if they are designed to improve our lives. And so we should embrace it, at least to the extent where we don't overly rely on it such that we make mistakes.

[00:19:04] So these pictures are just examples of technology that have come to the fore. On the left is the looms of the Luddite era. This is, I forgot what it's called, switchboards maybe, operators switching telephones. This is the typewriter, which is out of fashion now, but strangely enough I type poetry on it just as a nostalgia thing. And these are driverless trucks, which are apparently going to be deployed maybe in 20 years, 30 years, we might only have driverless trucks. So these are good, because they help humanity, and same with AI.

[00:19:44] But then there are real limits of AI. What I want to say here is that it's not just within the content design or the writing industry which have perhaps felt a greater impact, because a lot of the AI that we see are writing related or content generation AI. But same for Otter[?] AI, is it a UX research, I guess you can use it for UX research, it's a note capturing app if I'm not wrong. Grammarly, for instance, helps with grammar, and GitHub helps coders, developers, engineers, to code all the time. So we're not alone in this.

Accessibility

[00:20:26] And because I'm running out of time, a quick word on accessibility. So as UX writers we need to be inclusive, we need to be aware of our users, and that our users are not one-dimensional. A lot of them are challenged physically, for instance, or they might need more help with certain tasks. And so we want to be aware of the users, especially in what we write and how we write.

[00:20:58] We don't want to use words that are sensitive, we don't want to over-emphasize nouns, pronouns or genders. We also want to allow users who may not be able to read or write, or perhaps see very well, maybe they're very shortsighted. Color contrasts, color blindness, these are things that we want to pay attention to, especially when we write.

[00:21:22] So that's it, that's the end of my very short talk about content design and how to make it very delightful for your users. It has been a delight to share, and I welcome any questions.

Q&A

[00:21:40] Host: Fantastic, thank you so much, Ning. There are a few questions here, give me a moment. So one question that was interesting was around your navigation. Where do you even start with the navigation of understanding how people use other platforms other than their own? I think that relates back to when you mentioned going onto the banking app and you were insulted that you didn't save anything. So the question there is, where do you start with something like that and having that understanding? Should you focus on that if you're not, let's say, as advanced as you are at Bolt in those areas?

[00:22:30] Ning: I wonder if this question is regarding where should you start looking at, let's say if you're a product designer without a UX writer on your team, or maybe you are a new content designer, UX writer, and you're just starting in a team. I would perhaps look at the user flows that are core to your product and look at those flows.

[00:22:58] Ning: And I would work with research resources, if you have a UX researcher maybe, or if you can, let's say, get hold of existing users, you can conduct tests with them. There are UX writing tests for comprehension, highlighter tests, five-second tests, things that you can do, and just conduct interviews. Otherwise just do A/B tests with your users for the core flow, and find out where they might have pain points, where they might find it confusing, where they might feel, in my case for instance, insulted or enraged or perplexed. And then if these keep coming up, then those are signals that it's probably a good place for you to put effort into redesigning or maybe improving some of the words and the copy that you see.

[00:23:56] Ning: Other than that, doing a complete audit of the app, that's good as well. And from the design stage, what I like to say is, if you're designing a new feature, a new product, bring in your content designers from the get-go. Bring them into part of the process, because how much information, how many words you show on your home screen for example, is how you would design the components on the home screen. So that's something that I would recommend.

[00:24:20] Host: Yeah, it's an interesting point on prioritization. How do you prioritize if you've got an entire website or app and you've just hired somebody and they're new to the role, where do you start? Yeah.

[00:24:34] Host: So what has been the worst or most common mistakes that you've seen companies make when looking at their content? Like, you gave the Amazon one as a good example, a great example. What's a bad example that you've come across? You don't have to name the company.

[00:24:51] Ning: Generally, so I've worked at a number of companies. Generally speaking, if you are not very familiar with content design, the key take home, the three principles, being clear, concise and useful. But the first thing to do is, if you don't need to say it, don't say it. I think that's a lot of the first question that I ask when I look at a screen or a flow, is this necessary, can I remove it? If I can omit it, I would, because otherwise anything you see on the screen is taking up space and it's taking up, you know, affordance, the user's attention on the screen. So if you can do away with it, do away with it.

[00:25:35] Ning: And a lot of people who design, let's say, websites on Wix for example, your own portfolio or some website, just because there's a text component, that doesn't mean you need to fill it in. Just remove it if it's not necessary. I think that's one of the first things that I would do.

[00:25:51] Host: Great. And what tools have you used to help with UX content writing, other than, let's say, ChatGPT and that generally?

[00:26:02] Ning: Well, I mostly work with the same tools that product designers would use, so agile tools like your Jira, whatever, and primarily in Figma. I don't know, I would say the thesaurus, but not quite. Maybe Mobbin, right? If you're a designer you can look at what other designers are already doing, so that's a repository of different screens and flows, and it's not just me who uses it, all designers use it, I think. Well, if you don't, then check it out, M-O-B-B-I-N. It's very useful when you're comparing screens and just to get a sense of what is industry best practice out there.

[00:26:42] Host: Yeah, great. And on ChatGPT, what have you used it for that has been really exciting for you? From our perspective we see it as a chance to amplify and do better work and just almost not waste time on the redundancy. So what have you used it for that has been really exciting for you?

[00:27:07] Ning: I mostly use it to find the best hotels, so like unique hotels when I travel. I think that's super useful. Other than that, I try to use it to brainstorm for words or phrases where I might not typically use. We all are affected by or influenced by our own linguistic repertoire, right? Whatever books we read, things we come across, news media, things that we consume growing up. But ChatGPT is able to take me out of my context and give a completely different view.

[00:27:49] Ning: So, brainstorming for words like, I don't know, how do I talk about accessibility in a thousand ways? And who are the people that might have their lives improved if I should pay attention to accessibility? And it would give me things that I'm not aware of, for instance, like somebody with only one arm, or maybe somebody who can only listen through one ear, for example. So helping to brainstorm, I think that's something that's very useful.

[00:28:21] Host: Yeah, no, amazing. That's all we have time for, Ningfei. Thank you so much. We might have to get you to get out your hardcore typewriter and write some poetry the next time, that's fascinating. And then, if people, as Ning said, please tune in and look at his LinkedIn profile for your podcast. I'm going to check that out. What is it about?

[00:28:42] Ning: It's about all forms of design, and product design specifically, so we interview people in the space, and different aspects of, let's say, from workshopping to how do you deal with managers, or maybe [?], and so on.

[00:29:00] Host: Yeah, really interesting. Great, we'll put it out on the Slack channels. Thank you so much. It was a pleasure and I'll talk to you soon.

[00:29:06] Ning: All right.