All the web’s a stage: How playwriting informs better UX
Let’s put the spotlight on elevating microcopy with playwriting techniques.
“Anything you put in a play — any speech — has got to do one of two things: either define character or push the action of the play along.” — Edward Albee, Playwright
I first encountered Edward Albee’s words as a college freshman in my undergraduate Intro to Playwriting course. I was no stranger to creative writing, but that class was my first dive into writing for the stage. And now, as I make my first leap into UX as a new graduate, I realize Albee’s words still apply.
Playwrights pen words for action, and so do UX writers — what changes is their stage.
Playwrights write a scripted narrative, and that narrative stays contained in specific snippets of time — performances. By following stage directions and director cues, actors trace actions across a constructed world, but the story wraps when the curtain falls. And when it lifts, they play it again.
Now let’s view the theater as a staged interface. The UX writers (playwrights) provide the copy (syntax and stage directions) to move users (characters) through product actions (plot). Plays are conversational. Transactional. And these interacting motives drive a production until the curtain drops.
Playwrights tinker with syntax, prompts, and rich text to indicate how their characters should engage with their world, and each other. Italicized words in an argument beg more emphasis. Parenthesized adverbs clue actors to speak lines in the appropriate tone. Plays are scripted moments — but spoken lines only land with proper context.
Sound familiar? Strip away the costumes and curtains. You’re looking at a model for effective UX.
UX writers script moments, too.
Our words move users through a series of scenes to reach a definitive end. Our stage cues come as meaningful word choice, deliberate tone.
Then, for context, the design kicks in. Specific typography and visual cues nudge users in the right direction. As UX writers, we can’t script their thoughts, but we can work with our design and development teams to guide their story.
With parallels between playwriting and UX sketched out, we can take a closer look at the Edward Albee quote I pulled before.
Albee breaks successful language into two theatrical drives.
An effective playwright uses words to:
1. Define character.
2. Push action.
When we look at a user’s engagement with a UI, the same framework holds, just with a slight shift of phrase.
When writing successful microcopy, we want it to:
1. Define and maintain a brand voice.
2. Prompt user action.
We have limited space to communicate with users, so keeping our copy clear, concise, and conversational is key. Our UI should be intuitive. Our microcopy should support that mission, as if we’re stepping into the user’s mind and responding to their inner monologue.
Basically, we’re looking to stage a user-interface dialogue.
What would this look like in action?
Let’s strengthen our microcopy by picturing it onstage, in real time.
Here’s a quick scene between a fictional patron and coffee shop employee. Patron wants to post a job on the shop bulletin. Employee is the individual overseeing the project:
Patron stands facing a bulletin board decorated with flyers. They hold a homemade flyer of their own. Employee, wearing a branded apron, approaches.
Employee: Hey, you look a little lost. Can I help you?
Patron: Uh, yeah. How do people get jobs up there?
Employee: Customers run their flyers by me.
Patron: How do you decide what to post?
Employee: If they’re appropriate, we tack ’em up.
Patron: Oh, neat. Can I throw one on?
Employee: Depends. What’s the job?
Patron: I’m looking for a freelance copy editor.
Employee: Part-time?
Patron: Yep.
Employee looks over Patron’s printout.
Employee: Looks good. Pop it under the freelance section.
Notice how, in this mini scene, Employee approaches Patron to learn their needs. When writing for UX, we typically fuse this step into our copy to anticipate them instead. Now let’s transpose their conversation into a verbal UI exchange, with Patron as User and Employee as Interface:
User navigates to a web bulletin where they can post or search for jobs. When given a choice between buttons “Post”or “Search,” they click “Post.”
Interface: Here to hire? Let’s get to work. What position are you looking to fill?
User: Freelance copy editor.
Interface: Is this position full or part-time?
User: Part-time.
Interface: How would you describe this job to applicants?
User: We’re looking for a savvy freelance editor to tackle our biweekly public health beat.
Interface: Great. Here are some suggested tags to get more eyes on your posting.
The scene would continue in a similar manner until User’s job posting is complete. Written out as a conversation, it can get pretty wordy, even if our scene’s language does establish character and prompt action per Albee’s advice. Our job as UX writers is to determine this path of user activity and work with designers to make these verbal exchanges more intuitive.
We can take this playwriting exercise, for instance, and integrate some of its dialogue into the UI design of a fictional job site with:
- Input fields. Instead of verbally asking User, “What position are you looking to fill?” we could use Job Title as the placeholder text in an input field. Same goes for Job Description. This consolidates multiple lines of dialogue into one intuitive step.
- Selectable tags. Below User’s inputted job description, we can provide a horizontal scroll of additional tags they can activate by clicking.
But while we do want concise copy, we shouldn’t let efficiency overpower our brand voice. Indeed.com’s job posting form opts for a Job Title label with no placeholder text. This approach aligns with the company’s practical tone — their primary goal is to provide a functional hiring platform.
Indeed’s job description section follows suit. Notice how they add a succinct line below their field title to prompt appropriate user input.
But if our fictional job site is known for a friendlier tone, maybe we’d use label text like Indeed’s and include placeholder text in the actual field, too.
We can call on playwriting to make our copy more conversational.
For example, placeholder text in this job description field could read: Jobs with detailed descriptions get more views. Reach more potential applicants by adding yours. Incorporating brand voice into placeholder text encourages stronger user-product dialogue without compromising other design aspects.
Now, we can see how playwrights and UX writers are linked. Both use language to create and define experiences.
While I won’t be writing UX plays, I can expand on elements of successful playwriting to map out user interactions and streamline my copy to best facilitate those exchanges.
To this end, as UX writers, we might view ourselves as techy pseudo-playwrights: Microcopy makes our lines, and all the web’s a stage.
Have a UX story of your own? Send your ideas our way. More writers and fresh perspectives can only make PatternFly’s Medium publication stronger.
