large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

From Design System to ‘NFT Design System’: Creating TinyFaces

Neurodiversity and Inclusion: Choosing Kinder Design

medium_652ccf22c8853584bde5553986a4eed0.png

small_652ccf22c8853584bde5553986a4eed0.png

thumbnail_652ccf22c8853584bde5553986a4eed0.png

Web5 is here. Goodbye Web3? TBD.

<div>
<div>
<div>
<div>
<div>
<p>UX Designer. Writer. Ex-Entrepreneur. Dad to Inty &amp; Luna. Husband to Sandrita. Scotsman with an English accent. Living in Australia 😜</p>
</div>
</div>
</div>
</div>
</div>
<div>
<div>
<div>
<div>
<div>
<div><img src="http://ift.tt/2sGLhgf" alt="1*Ucqmsn7HsVLB9v6LKASj8A.jpeg"></div>
</div>
</div>
<div>
<blockquote><p>Writing is easy. All you have to do is cross out the wrong words. (Mark Twain)</p></blockquote>
<p>These are my notes from a Google I/O 2017 talk by three UX Writer’s. It’s a great resource to start creating a <strong>UX Writing process</strong> within your organisation. Useful for anyone involved in putting words on interfaces.</p>
<h3>Topics covered:</h3>
<h4>1. Introduction to Content Strategy</h4>
<p>Maggie Stanphill, UX Director, Content Strategy, Google</p>
<h4>2. Three UX Writing Best Practices</h4>
<p>Alison Rung, UX Writer, Google</p>
<h4>3. Building Brand voice for your new Product</h4>
<p>Julian Appenrodt, UX Write, Google</p>
<h4>4. Your UX Writing Checklist</h4>
<p>Maggie Stanphill, UX Director, Content Strategy, Google</p>
</div>
</div>
</div>
<div>
<hr>
<div>
<div>
<h3>1. Introduction to Content Strategy</h3>
<p>Google follow the principle, focus on the user and all else will follow. Focusing on the user starts with the content.</p>
<p>Content strategy is the crafting and development of all product messaging. UX writing is a speciality within this discipline. It focuses on helping users achieve their goals with language.</p>
<p>Language helps the user get where they want to go. By focusing on what the user wants to achieve content strategy builds loyalty and trust.</p>
<div>
<div><img src="http://ift.tt/2rIs0hb" alt="1*T-mb63KDyEUR_7GYwFFCrA.png"></div>
</div>
<p>How Google incorporates UX Writing within UX</p>
<p>Writers work with Designers to think about information hierarchy on the page. This then guide user actions. Writers work with researchers to test hypothesis about language and inform our insights.</p>
<p>When you have the foundation of UX writing and you add brand voice, something amazing can happen. UX writing can survive with the fundamentals but it can thrive with brand voice.</p>
<div>
<div><img src="http://ift.tt/2sGvCxg" alt="1*jsyIcQgUwPfnvLhtzEXK_w.png"></div>
</div>
<blockquote><p>Oh don’t use big words. they mean so little.</p></blockquote>
<blockquote><p>(Oscar Wilde)</p></blockquote>
</div>
</div>
</div>
<div>
<hr>
<div>
<div>
<h3>2. Three UX Writing Best Practices</h3>
<h4>1. Clear</h4>
<p>Often words used are software problems and not people problems. Pay attention to verbs. A verb is an action word. It tends to be the most powerful part of your sentence. In a perfect world it will relate some action to the user.</p>
<p>For clarity we remove technical terms and we put the action in the context of the user.</p>
<div>
<div><img src="http://ift.tt/2rIR1Jb" alt="1*PXDWczEriVnCdZIXUq6aIQ.png"></div>
</div>
<p>This is especially important when you’re writing a product announcement or an app update. Currently focus is on the technical specs of the new feature you’re releasing. Instead focus on the new action that people can perform. Jargon free offers context.</p>
<h4>2. Concise</h4>
<p>Concise doesn’t only mean short, it means something closer to efficient. When we are writing with concision we look at our message and we make sure every word on the screen has a distinct job.</p>
<div>
<div><img src="http://ift.tt/2sGzSwT" alt="1*zx5p_n77qLKnOhxaqJlkrQ.png"></div>
</div>
<p>The above is a common problem in product writing. Here we don’t need the header. This is typical in interfaces. Because the design field shows some pre-existing text field, we feel we need to fill it in. You should avoid this. When you can instead practice <strong>content first design</strong>.</p>
<p>Content first design makes sure your visuals are inline with what you’re trying to say. Not the other way around. So try not jam your message in boxes that weren’t meant for them.</p>
<p>Try to have designers work in parallel with writers.</p>
<div>
<div><img src="http://ift.tt/2rILO3M" alt="1*sviebAyIdop4W3PTO14MWw.png"></div>
</div>
<p>Here we’ve removed the header. As you know we don’t read every word on screens, we scan.</p>
<p>We know that peoples eyes follow an <strong>F shaped pattern</strong> as they read over the screen. They read the first line. Then the second line. Then they start skipping down the page, catching only the first or second word of each sentence. For this reason we keep our text not only concise but also frontloaded.</p>
<p><strong>Frontloading </strong>means to put your important concepts first. This is so people’s eyes catch those important words as they skip down.</p>
<div>
<div><img src="http://ift.tt/2sGKHyW" alt="1*Gg2Qo4XN9O9jpw311g6D7Q.png"></div>
</div>
<p>Above most of the words are at the end of the sentence. We can fix this by flipping it around with the below</p>
<div>
<div><img src="http://ift.tt/2rIt98i" alt="1*mSSEYtYdXie-5MRpGHl_Dw.png"></div>
</div>
<p>You won’t always be able to do the above. The principle will always hold true and you can use it anywhere you are writing for screens. Keep the most important text up front and then <strong>ruthlessly edit</strong> what comes after it.</p>
<div>
<div><img src="http://ift.tt/2sGB3wp" alt="1*IUbTPJPrrWFYDDyDHOW5sA.png"></div>
</div>
<h4>3. Useful</h4>
<p>The call to action (CTA) guides people to there next step. You want your text to help people get where they want to go. For that reason the call to action needs to resonate with what they want to do. Here OK is not a good call to action.</p>
<div>
<div><img src="http://ift.tt/2rIrik4" alt="1*azcVIawj92768uCJ4JHP8A.png"></div>
</div>
<p>Try again is a good option instead, but this isn’t all we need. We need to give them an option if they’ve forgotten their password. If you forget your password and your only option is to ‘try again’ then you’ll be frustrated.</p>
<div>
<div><img src="http://ift.tt/2sGB5o1" alt="1*ne7QgBWuYWaJ5a95cacMLA.png"></div>
</div>
<p>Paying attention to writing and the people you’re writing for is so important. It can uncover some of the basic functions that your app or website needs to offer. So if you don’t think of those edges cases and write for them you might see some drop off in the usage.</p>
<div>
<div><img src="http://ift.tt/2rIN6fe" alt="1*7PaJWCp-Yl6IrjxKMjjKhg.png"></div>
</div>
<h4>Best practice wrap up</h4>
<p>If you pay attention to these three principles you’ll connect better with your users.</p>
<div>
<div><img src="http://ift.tt/2sGQ0yl" alt="1*WvU8abpxC16-hBwyHMOaLw.png"></div>
</div>
<p><strong>Good UX writing is not a science.</strong></p>
<p>These three principles are not always in harmony. There is a kind of tension between them. They are competing with each other.</p>
<div>
<div><img src="http://ift.tt/2rIQZRz" alt="1*VoIsITI61P06ItGOJ-w2_w.png"></div>
</div>
<p>When we made the text clear it is still pretty long, and not so scannable. When it made the text concise it made it shorter but at the expense of some clarity. Finally when we made the text useful it became longer again and became less scannable.</p>
<p>Consider your user context and you’ll find the right balance between these principles. Think about what they want to do in the moment.</p>
<p>You can also look towards your products brand voice. Your brand voice should create the right balance of clear, concise and useful. This should be true to your products character.</p>
<p>Think about your products core function. Then you’ll begin to find the elements of that character. Then think about what makes it special, how it’s differentiated.</p>
<p>Below is what Google would do inline with their own positive brand voice. We don’t like to lead with a negative words like wrong. We are also ok to have a the text a little longer, a little less concise, to be friendly and chatty. Now this sounds like Google. It doesn’t mean it’s right for your brand. It’s up to you to build your own brand voice for you own product.</p>
<div>
<div><img src="http://ift.tt/2sGEJyg" alt="1*sBnHvvTNgCAVnmUs4ctsJA.png"></div>
</div>
<blockquote><p>Make the most of your words.</p></blockquote>
<blockquote><p>(Claire Savage)</p></blockquote>
</div>
</div>
</div>
<div>
<hr>
<div>
<div>
<h3>3. Building Brand voice for your new Product</h3>
<h4>Brand principles</h4>
<p>Start with a set of brand principles. These can be 3 or 4 adjectives that embody your brand, and how you want people to perceive it. To come up with these adjectives you can do a brainstorming exercise.</p>
<p><strong>Imagine you are signing up your product to a dating site.</strong></p>
<p>What words or info would you put in your products profile. What is about your product that you think would make it stand out or seem most interesting to people.</p>
<p><strong>What would make them want to swipe right and want to learn more?</strong></p>
<p>You can then distil these qualities into descriptive words. These will then will become your brand principles.</p>
<p>With Google Pay the principles were: fresh, empathetic and approachable.</p>
<p>Now you have your brand principles. The next step is what these principles will sound like when you apply them to you writing. These will then become your writing guidelines.</p>
<div>
<div><img src="http://ift.tt/2rIz6SK" alt="1*2GfDY1b6TNwJPo-AFWsaeA.png"></div>
</div>
<h4>Tone</h4>
<p>You can then take it one step further and think about what your voice will sound like in different contexts. <strong>This is tone.</strong></p>
<p>An easy way to remember the difference between voice and tone, is to think about like a person. A persons voice stays the same. The tone they talk to you in may change, depending on the situation or what they’re saying.</p>
<p>In an app this might be like talking to users in a different way for different circumstances.</p>
<h4>Tone spectrum</h4>
<p>For Android Pay we mapped these different moments on a user journey. We did it in a tone spectrum ranging from serious to whimsical. This makes sure that we are using our voice in a consistent way across the entire user experience.</p>
<p>For your product the two ends of the spectrum might called something different. Your tone might range from informative to inspiring or direct to humorous. Once you have created your two ends you then need to determine what moments in the user journey you’re going to map.</p>
<p>A good way to do this is to think about the distinct milestones or interactions in your user experience. These can be thing like on-boarding, education or troubleshooting.</p>
<p><strong>To help you decide were these will fall on the spectrum you can then think about:</strong></p>
<ul>
<li><strong>What the users goal is</strong></li>
<li><strong>What they might be feeling in that moment</strong></li>
<li><strong>What you’d like them to feel</strong></li>
</ul>
<div>
<div><img src="http://ift.tt/2sGvAFE" alt="1*RSoxJV47Ou2ulrtenMMUzQ.png"></div>
</div>
<h4>Now do some UX writing 🤓</h4>
<p>So you established your voice and you have mapped your tune. Now it’s time to apply both of these and do some UX Writing.</p>
<p>It’s time to decide what words will go in your user interface. That ends up being a combination of everything we’ve talked about today.</p>
<p><strong>To be successful your interface text needs to be:</strong></p>
<ul>
<li><strong>Clear</strong></li>
<li><strong>Concise</strong></li>
<li><strong>Useful</strong></li>
<li><strong>As well as reflect your brands natural voice</strong></li>
</ul>
<p>To show you how we get there we can walk through how the UX writing process looks like.</p>
<p>As an example lets try to see what we say to the user, the first time that they use Android Pay. We can guess that they’re curious. So we want to tell them what we can do with the app, as well as give them reason to move beyond this screen and set it up.</p>
<h4>Step 1</h4>
<p>At the beginning of the process we start with something descriptive like the below.</p>
<div>
<div><img src="http://ift.tt/2rIoDqs" alt="1*YprRJxMXd3fSX_-xt69TCQ.png"></div>
</div>
<h4>Step 2</h4>
<p>We then think about the three principles of good UX Writing. This text is clear and useful but it’s not concise. We look at what pieces of information are essential. What parts could use visuals instead. We edit it to something like.</p>
<div>
<div><img src="http://ift.tt/2sGITpK" alt="1*2lhLMbr8rNYyXj5EbG-L2Q.png"></div>
</div>
<h4>Step 3</h4>
<p>For this we’ve ticked off clear, concise and useful and need to think about one more part. Tone. We’d ask ourselves, does this text convey our brand? Not too much, it fells pretty generic.</p>
<p>So going back to our brand principles we think about how we can make it fresher and more exciting. Even whimsical as this might be our first impression on the user.</p>
<p>In our final iteration we end up with something like this.</p>
<div>
<div><img src="http://ift.tt/2rIEm99" alt="1*38ocNPNzks_ttIAxB3ltDg.png"></div>
</div>
<h4>A/B Testing</h4>
<p>It’s a little longer than before, but adding a little personality can do this. It’s up to you whether infusing this personality is worth the words. This is not always a clear decision. If you’re not sure whether some words will be more effective than others then A/B test it.</p>
<div>
<div><img src="http://ift.tt/2sGwe6e" alt="1*-nzjpz3D3OSqdqrojioSjA.png"></div>
</div>
<p>When trying to find the right words for your product never underestimate the power of A/B testing.</p>
<p>We ran an A/B test on the start screen on Android Pay. We changed the button from ‘add card’ to ‘get started and it resulted in a 12% increase in click throughs.</p>
<div>
<div><img src="http://ift.tt/2rIxQin" alt="1*3MDrZ9tmT8q8rVR2vw7dcQ.png"></div>
</div>
<p>testing is a great way to confirm a hypothesis you might have. Or to decide between two different version of text, you’re not sure which will connect more with you users.</p>
</div>
</div>
</div>
<div>
<hr>
<div>
<div>
<blockquote><p>Bad writing slows things down. Good writing speed them up.</p></blockquote>
<blockquote><p>(Ken Roman)</p></blockquote>
</div>
</div>
</div>
<div>
<hr>
<div>
<div>
<h3>4. Your UX Writing Checklist</h3>
<p>With this checklist, you’re on your way to make your product stand out with language.</p>
<h4>Standout UX Writing Checklist</h4>
<h4>ALWAYS</h4>
<ul>
<li><strong>User First:</strong> Focus on your users</li>
<li><strong>Clear:</strong> Write in a language free of jargon, and with context</li>
<li><strong>Concise:</strong> Write in a style that’s efficient and scannable</li>
<li><strong>Useful:</strong> Write in a way that directs the next action</li>
<li><strong>On Brand:</strong> Define your brand voice and apply an appropriate tone</li>
</ul>
<h4>WHENEVER POSSIBLE</h4>
<ul>
<li><strong>User First:</strong> Choose language that performs, proven by research and A/B testing</li>
</ul>
</div>
</div>
</div>
<div>
<hr>
<div>
<div>
<blockquote><p>Bringing writers in at the end of the creative process, is like trying to put toothpaste in to a tube.</p></blockquote>
<blockquote><p>(John Steinbeck)</p></blockquote>
</div>
</div>
</div>
<div>
<hr>
<div>
<div>
<p><strong>If you enjoyed this, have a read of my other UX articles:</strong></p>
<p><a href="http://ift.tt/2pn4bXv">UX Design For Your Life</a></p>
<p><a href="http://ift.tt/2olPaIi">24 Ways to Look Like an Awesome UX Designer</a></p>
<p><a href="http://ift.tt/2pXNfLD">51 Research Terms You Need to Know as a UX Designer</a></p>
<p><a href="http://ift.tt/2nHmHdD">53 Tech Terms You Need to Know as a UX Designer</a></p>
<p><a href="http://ift.tt/2miApqa">How to become a UX Designer at 40 with no digital or design experience</a></p>
<div><img src="http://ift.tt/2rIUqYh" alt="1*emxDrmtEiMy6h5JXecj-Og.gif"></div>
<h3>Worth reading?</h3>
<p>Please click the 💚️ below to help others find it, and leave a comment. Thanks for reading.</p>
</div>
</div>
</div>
</div>
<div><a href="http://ift.tt/2qRPZvb">http://ift.tt/2qRPZvb</a></div>


UX Writing: How to do it like Google with this powerful checklist Notes from Google I/O 2017 on choo…

UX Writing: How to do it like Google with this powerful checklist Notes from Google I/O 2017 on choo…

Top Stories