Ultimately, she compliments you on your distinguished taste in scones and gingerly rings up your items. “How about an espresso to go with it?” You happily agree.  

She then pauses, looks into the distance, and says robotically, “Define customer payment method.” For a moment, the words awkwardly dangle in the air. “Um, credit please,” you say, and she swivels the payment kiosk toward you.  

You soon exit the shop, thinking not about the dark chocolate cardamom scone wrapped snugly in your bag or the impressive mural that spanned the length of the well-renovated space. But how it got a little weird there at the end.    

Our choice of words can affect an experience, whether on or offline. In a digital product, “Define customer payment method” is known as microcopy (or UX copy). Microcopy refers to the small text snippets guiding a user through the experience. Instructions, buttons, dialogs, labels, and error messages are all examples of microcopy.    

It’s worth pointing out that microcopy is not content. Articles, posts, media and marketing messages are all examples of content. It is important for a designer to be knowledgeable about a product’s content, but they are not responsible for crafting it. 

Writing is designing   

As designers, we take to heart the brand guidelines for aspects of visual design like colors, fonts, and type styles. But strip any interface down to the barest, most important elements, and you’re left with words. Words themselves are often not given the attention they deserve by designers (and often product teams in general). I would argue that the shortlist of core brand guidelines should include guidelines on writing. 

Writing should be led by designers  

Of all product team members, UX Designers have the best vantage point to guide UX writing. Our distinct perspective is fueled by our knowledge of the product, our users’ needs, and our client’s business objectives. Therefore it is logical that we, the architects of the user’s experience, should be the primary wielders of the words that shape that experience. 

Designers should hone their writing skills 

Writing is not a skill UX and UI designers tend to focus on in their core training. This was certainly true for me. Through experience and instinct, my writing skills increased incrementally over the years. In hindsight, this slow and steady progression could have been fast-tracked with just a bit of time and energy spent consciously building these skills. I recommend that designers of all levels do just this.  

I took a recent deep dive into various writing books and resources and wanted to share some of that knowledge. What follows are three fundamental principles for writing effective microcopy that I have found especially useful in my own writing. 

Editor’s Note: UX copy vs. UI copy: What’s the difference?

The line between UI copy and UX copy can be blurry. UI copy generally refers to the copy on interfaces, such as buttons and headers. UX copy relates more to informational text and help text — text that gives the user more context regarding the actions they can take and the results of those actions.  

1. Use plain language  

Writing in plain language ensures readers will gain a quick, clear understanding. Text written in plain language reduces the cognitive load on the user and allows them to focus on the task at hand. It is also a factor in accessibility. Plain language improves the experience of individuals with cognitive and learning disabilities. 

Above all else, be clear  

Messages should be straightforward and easily understandable. Period. This is plain language in a nutshell.  

Be concise  

Using fewer words can often simplify a message. Don’t use ten words when five will do — but don’t get carried away here! This does not mean that using fewer words is always better. Keep in mind the previous rule and make sure not to sacrifice clarity for the sake of brevity.  

Choose easy, informal words  

Reduce cognitive load by avoiding unnecessary jargon and complex terms. Deanna Horton’s Handy List of Human Words is a fantastic resource to help you trade fancy words for fast ones. 

Use short phrases and sentences  

These make for a quicker, more direct read. Simple as that. Nuff said. 

Write like you speak  

Keep it natural. Try reading your copy out loud and see if it sounds natural. Returning to our opening scenario, a more human alternative to the mechanical “Define customer payment method” might be, “How would you like to pay?”   

2. Be conversational  

Humans communicate with other humans through conversation. Humans communicate with computers through interfaces. Us humans have been communicating with one another for tens (hundreds?) of thousands of years. But it is only in our very recent history that we have begun communicating with computers. So we don’t totally know how to handle it yet.  

As Kinneret Yifrah points out in Microcopy: The Complete Guide, we “treat [our]computers according to the social norms we apply when communicating with other human beings.” Interfaces, therefore, should follow the rules of human conversations and abide by social norms.  

Know the context  

Through user research, you know a lot about your user’s overall needs, goals, and motivations. This is essential high-level knowledge. Being aware of their immediate situation is equally as important. You may know your user is overall very career-focused, so it might be a good idea to encourage them to connect their LinkedIn account. But you should also be aware that if the user is in the midst of recovering a lost password, now might not be the best time to prompt them to connect. 

When shaping your message, consider the user’s recent circumstances and what has brought them to this point in the experience. What are they trying to do? What are their expectations? What are they potentially thinking and feeling? A better understanding of the context of your user’s journey will help you better predict how to best communicate with them.   

Be cooperative & take turns  

In a good conversation, participants work toward a mutual goal: perhaps getting paperwork filled out before a doctor’s visit or something more indirect like filling the elevator with just enough conversation to make a short ride as least awkward as possible.  

Exchanges should be relatively even, not long, drawn-out monologues. Pause for understanding and feedback. Part of this is knowing how much information to provide at one given time and when to pause and listen for feedback.  

One option is to use progressive disclosure. Perhaps the user doesn’t need the ins and outs of why their email address is required, and you can provide a “why do we need this?” link should they want to know more.  

Use the active voice  

We tend not to use passive when we speak, just when we write. It’s also a way to ensure a sense of pace as the active voice feels more natural – more like a human conversation that we humans so irrationally expect from computers. 

Be polite  

Being polite does not just mean saying please and thank you. A genuinely polite interaction provides value, does not waste the user’s time, and provides options (especially for errors).  

Imagine you’ve ordered a coffee at a diner, and you’re told, “I am so sorry. There currently is no coffee. This must be very disappointing. Please accept our apologies.” While that response might be apologetic, it’s not exactly polite. It wastes your time, provides no useful information, and suggests no solution.  A better response might be, “Sorry, we’re out of coffee until tomorrow. How about tea?”  

A conversational design example 

Airbnb masters the art of conversational writing. Take a look at any property screen. It reads like a conversation you’re having during an in-person tour. “This is Where you’ll sleep… Here’s What this place offers… Things to know” The use of “you” invites the user right into the house.  

The property screen mentions something very human, which is the act of sleeping – Airbnb could have just as easily called it “Bedrooms.” 

3. Use your voice and tone

Let’s talk about who we represent on our side of the conversation. We speak for our client’s or employer’s brands. It could also be a sub-brand or an individual product’s brand. 

Your voice is consistent  

Think of your voice as your personality. Voice is determined in large part by your brand’s attributes/personality. At Big Nerd Ranch, our traits are things like Brave, Pioneering, and Seasoned. Your client should be able to furnish some documentation about their brand. If not, a workshop may be in order.  

Your tone changes based on context  

Tone conveys mood. If voice determines what you say, tone is how you say it. Tone should be adapted to fit the user’s circumstances and state of mind. The tone you employ while talking at a birthday party would (hopefully) be different than that you would use at a funeral. Likewise, the tone used while onboarding would differ from the tone of an error message.  

Check out this message from the Slack app, highlighting some recent feature changes. Slack describes its brand voice as human, clear, and concise. The tone is upbeat and informative.   

They nailed the delivery. “Two things!” You can imagine a coworker tapping you on the shoulder to relay a quick thought. Let’s check that “Human” checkbox on Slack’s list of brand traits. 

The informative sentence that follows is clear and concise, summarizing the updates in just nine words. The accompanying link is direct and phrased in plain language—it also offers the user additional information should they be interested. While Slack’s product team no doubt was tempted to list all of the other improvements they worked so hard on, they showed restraint in highlighting just two and tucked the rest away for more curious readers.   

It’s important to note the positioning of the message; It is positioned within the context of the features in question. Had the announcement been delivered outside of that context, in a modal or an email, for example, additional explanation or images may have been needed. 

One more thing. Let’s acknowledge the politeness of the message. It does not interrupt the user from going about their business, but perches atop the input field until the user acknowledges it.   

Editor’s Note: How much can you make UX copywriting?

Effective UX writing doesn’t just make you a better developer — it opens the exciting career path of technical writing. According to ZipRecruiter, the average UX copywriter makes more than $100,000 a year, with experienced UX content writers making over $150,000. Good UX writing is hard to come by and a critical part of the software design process.  

Tying it all together  

 Now that we have discussed three important principles of good UX writing: plain language, conversational writing, and voice and tone, let’s take a look at one last example and see if we can check the boxes on what we’ve learned. How does this final step in the Airbnb booking process rate?  

Plain language? Check. It’s clear, concise, and informal. It uses short phrases and sentences and avoids jargon.   

Conversational? Check. From the prompt, it’s clear how I’m to respond. It even has a suggested start to help get me on my way.   

Proper use of voice and tone? Check and check. “Straight-forward,” “Thoughtful,” and “Spirited” are some of Airbnb’s brand values, and all are represented in this example.  

Airbnb has earned itself an A+! 

Major bonus points!: Perhaps most importantly, Airbnb takes advantage of this interaction to accomplish goals important to both the users (both Traveler and Host) and to the business. In one of their posts, Airbnb mentions a couple of their company goals:  

• For Travelers to feel welcomed in a Host’s home   
• For Hosts to feel secure opening their homes to Travelers   

The copy nudges these two strangers into making a social connection, thereby encouraging a social relationship that benefits both the users and the business.  

Focus on writing! 

When written effectively, microcopy can make your designs more effective and the overall experience much more clear and enjoyable for your user. Keep in mind the three principles covered, take time to focus, and reap the rewards. 

Resources

Nielson Norman Group’s UX Writing Study Guide 

Microcopy: The Complete Guide by Kinneret Yifrah 

The post Writing is Designing: Three Principles for Writing Effective UX Copy  appeared first on Big Nerd Ranch.

When a custom designed UI is first implemented in an Android build, I often find the styling and nuances of the typography gets lost in translation. Adjusting some basic but often overlooked type characteristics can help preserve some of that appeal. Type characteristics can be easily adjusted by targeting a few attributes in the code; however, honing in on the right values for those attributes can be tricky since design software uses units of measure that are not compatible with Android type attributes.

In a recent project, our developers whipped up a simple tool that streamlined designer and developer communication when it comes to Android type attributes. Before we take a look at that I’d like to break down just a few aspects of type and get specific about how they can be manipulated in the code.

Font Size

Font size translates easily from design to development: One point (pt) is equal to one scaleable pixel (sp). Scaleable pixels take into account the user’s Font Size setting (which changes their font size globally on their device), so it is a best practice to use them rather than a fixed type size. Android’s textview has the attribute textSize and the method setTextSize.

That being said, when defining some particularly large type styles in our recent app, we opted to specify their size in fixed dp (density-independent pixel) units instead of relative sp units. Most users modify their size settings in order to improve readability. Since readability was not an issue with such large type, we opted to assure that this text didn’t get too overly large and unwieldy in the interface. Note that while this made sense in this instance, it’s usually a best practice to measure type size in sp so that any system-wide accessibility settings will be applied.

Leading

The typography term ‘leading’ refers to the vertical space between lines of text. This is synonymous with ‘line spacing’ and ‘line height’ and is also defined in pt/sp units. A base amount of leading is built into the font files themselves. To make things interesting, that amount of leading can vary from one font to the next.

In Android a TextView’s leading can be defined by the lineSpacingExtra and lineSpacingMultiplier attributes. The lineSpacingExtra attribute will increase (or decrease in the case of a negative value) a TextView’s leading, by a specified value and unit of measure, “3dp” for example. Alternatively, lineSpacingMultiplier can be used. This attribute accepts a floating point value (such as “1.3”) which adds additional spacing between lines as a multiplier. In code one would use the method setLineSpacing, which requires both extra and multiplier inputs in pixel units, so make sure to scale your attribute values accordingly.

Tracking

Tracking (or letterspacing) refers to a uniform amount of whitespace between characters in a given block of text. The term is often used interchangeably with kerning, although kerning refers to the space between two specific characters, not a group of characters as a whole. In the design program Sketch, tracking is measured in fractions of points. In Android, it can be adjusted using the letterSpacing attribute (available in API level 21 and above) which is measured in fractions of em units.

The Android Typesetter

Like I mentioned before, on our recent project’s early stages, we built a tool that allowed us to produce exact attribute values to match the finely tuned type styles in our UI designs. We embedded a temporary screen directly into the app that allowed me to adjust various values and style text on the fly. I was able to hone in on some precise attribute values without having to go back and forth continuously with the developer.

My goal was to get the styled text rendered by Typesetter to match perfectly with the UI mockup. To achieve this, my workflow would begin by uploading a font and setting the size. I would then adjust the Line Spacing and Letter spacing values, eyeballing the rendered text until it roughly matched the UI design. Next, I would import a screenshot into my original UI design in Sketch, placing it a layer behind the styled text.

Back in Typesetter I would adjust values as needed based on the comparison and repeat the process until I got the type to match. In this manner I was able to quickly produce a very accurate set of specs for each text style in the app.

Result

Typesetter helped preserve the integrity of the UI design and saved us a chunk of time in the process. Developers were able to input the values listed in the Line Spacing Addition and Letter Spacing columns above directly into the code. It avoided a more time consuming trial and error process between designers and developers, and allowed us to fully address type styles once in the project rather than encountering them at multiple times during the build.

We have since created an open source standalone version of Typesetter, so feel free to use it for your own projects. Stay tuned to this blog for more on Android development and design as Android O promises to improve the process of using custom typography in your apps.

The post Perfecting Custom Typography in Android appeared first on Big Nerd Ranch.

Since 2001, the Big Nerd Ranch logo has featured a nerdy propeller affixed to a 10-gallon hat. This friendly little chap perfectly embodies our character and culture, but it was time for a makeover. Our Design team carried out some small but key changes to help modernize our brand.

The Challenge

We did not seek a full scale redesign, or embark on a quest to rediscover our spirit animal. Our ethos, spirit and personality haven’t changed over the years; we just needed to do a better job of conveying them.

We wished to do justice to the brilliance of our fellow Nerds, who speak expertly in code, teach app development to others around the world, execute cutting-edge development for Fortune 500 companies and commence authoring a book on a programming language when it is mere days old.

Furthermore, our design department has grown into a well-oiled, full-service UX and UI machine that shares our knowledge and design principles in our iOS Mobile Design and Android Mobile Design bootcamps. We needed to practice what we preach.

And if we were going to take our logo in a different direction, we had better make darn sure it jived with the brand traits outlined in our style guide. These were all of the things we liked to think about ourselves and strove to be: brilliant, kind, hardworking and more. Some recent market research conducted amongst a pool of our alumni validated our winning personality.

Stylistically, the logo needed some work, but there were other issues to tend to as well: technical concerns related to legibility, flaws in the hierarchy of elements and some misuses of typography.

Finding our Type

Big Nerd Ranch is a modern tech company with an Old West name and quirky Nerd twist. The perfect way to marry these two was with a modern slab serif—a nod to Western “Wanted” posters and to contemporary tech, which has breathed new life into the slab. Being the friendly people we are, we also needed a happier character than most slabs provide. Archer, created for Martha Stewart’s brand by Hoefler & Co (née Hoefler-Frere Jones), led the pack for most of the design process, as its ball terminals gave the face much-needed life.

Archer’s description read like our brand guidelines. Modern, credible, and charming, its only initial flaw was its use by countless companies to give their opaqueness some cheer. But Stewart’s slab fell down when set up next to the swashes of the hat.

It wasn’t until we found Cabrito by the foundry Insigne that we knew we had what we wanted. Its creator’s goals of legibility and teaching children to read were a nod to our training and made our logo a pleasure to see across various sizes. Cabrito’s wide range of OpenType features and companion sans meant that we had plenty of tools to work with across our branding.

And we dare you to trill the “r” in Cabrito (which means “little goat” in Spanish) without cracking a smile.

Hats Off

Our original hat with its hand-crafted texture reproduced poorly in digital formats, and the weathered rustic style made it feel a bit dated. The first order of business was to eliminate the brushstroked edge. We did so and quickly achieved a cleaner, smoother, more rounded stroke.

Next, we targeted thin and thick areas and rendered a more consistent line weight. This minimized the calligraphic quality of the line and increased legibility of the overall symbol.

Eliminating the pointed ends of the strokes helped form a more cohesive mark when paired with the letterforms.

Lastly, the movement lines framing the propeller were removed, as the implied movement could be achieved instead through the form itself. The blades were made more symmetrical and their angles now echo the sweeping forms represented in the hat brim.

We integrated, we tweaked, we obsessed, we threw things away, and we landed upon what we believe to be a solid and emotive mark that echoes the friendliness and experience we’re known for.

Kicking around Color

The refreshed logo deserved a refreshed color palette. Our previous, more rustic palette could appear muddy and inconsistent on various screens. We needed to commit to colors, rather than using colors that could be interpreted.

We love our Big Nerd Ranch Gold. It communicates our boldness, vibrancy and fun, and so it deserved to stay. We paired that with a strong charcoal to establish our primary tier. To bring about the secondary set, we shook some of the dust off of our green and settled it alongside a bright and lively red-orange.

A Logo Reborn

We love the outcome: a refined, more contemporary mark that remains true to our nerdy heritage. We hope you agree!

The post A Ten-Gallon Makeover: Big Nerd Ranch’s New Logo appeared first on Big Nerd Ranch.