My friends and I are all very opinionated when it comes to TV and movies. We found that, when we watch together, we pause too many times to point out acting or writing choices, plot holes, and trivia. We decided to introduce a rule to my apartment: Everyone only gets one pause. My pause is almost always spent on moments showcasing UI/UX. Technology usually looks strange in popular media. It’s most of the way there, but usually a little off, landing somewhere in the uncanny valley of user experience. As designers, it’s very difficult to turn off the part of our brains that sees a user interface and feels the need to break it down: What could be improved? Where’s the back button? What functionality is missing? So what is it about UI/UX in TV and movies that’s so weird? How is it used as a storytelling tool, and what can we as designers learn from it? [Related: How the "Love is Blind" dating approach is coming for your apps] Why is TV and movie UI weird? First, the obvious point. Not all UI in pop culture is designed by UI/UX designers. Whether it’s considered a low priority or just isn’t in the budget, it seems like it often gets left to someone else on the team in editing or production design. On-screen technology doesn’t have to look like real-world technology, but when it doesn’t, it can take away from an otherwise impactful moment. When interfaces in movies and TV don’t follow modern design trends, we can either feel that they’re badly designed in the world of the story or that they’re simply unrealistic. Another obstacle productions face is the difficulty of showing a phone on screen. If you’re too zoomed out, it’s hard to see what’s going on, and if you’re close enough to show the UI clearly, you might deal with depth-of-field issues that make the edge of the screen blurry. This can work well for dramatic effect (as seen in the movie Eighth Grade, below), but it doesn’t always work for the purposes of the scene, especially if it’s important to see more of the frame around it. Enter post-production. In order to show the UI necessary for the plot, productions will sometimes opt for superimposing the UI later, in order to keep the focus and brightness compatible with the rest of the frame and clear enough for the audience. A common design choice is to make text very large on screen, prioritizing readability over UI. This achieves the goal of focusing on the important information, though it can come at the cost of taking the viewer out of the moment because they’re so distracted by the one element that’s unrealistically dominating the screen real estate. Designing for technology in film is a very similar challenge to designing digital products. The balance between aesthetics and functionality ultimately boils down to what makes sense in the context. While real websites and programs are feature-rich, in TV or movies, these same interfaces will be boiled down to their most basic and essential elements. Viewers will only get a few seconds to see the screen, and if the one thing the script needs to highlight isn’t immediately noticeable, the scene might not work. Nowhere is this more visible than in hacking scenes. Putting aside Matrix-inspired walls of moving code, hacking scenes will usually show one, particularly important action that’s key to the scene, like gaining access to important files. In an episode of Castle there’s a moment when, to stop their location from being discovered, Castle and his hacking compatriot decide to launch a “cyber nuke” to scramble the computers of Beckett and her respective hacker. The UI in the entire scene is not quite based on reality, to say the least, but what stood out to me was the confirmation button for launching this fictional cyber weapon. A giant screen appears with an illustration of a missile and an enormous button with the word “LAUNCH” written out in all-caps. In a real program, this wouldn’t look so cartoonish, and there would also have to be a close or cancel button. On the other hand, they definitely highlighted the important action in the scene. Sounds in pop culture UI also tend to be a little exaggerated. A loading bar wouldn’t make little digital clicking noises the entire time it’s transferring files because, if you’re not trying to download top-secret documents while enemy operatives search the building for you, it would drive you crazy. Designing for technology in film is a very similar challenge to designing digital products. The balance between aesthetics and functionality ultimately boils down to what makes sense in the context. How does sci-fi imagine UI? Science fiction is a reflection of where our technology stands today and a glimpse of what it might be tomorrow. Star Trek depicted touch screens and voice commands in the '60s, and Back to the Future 2 featured fingerprint scanners. But while concepts are sometimes well predicted, when it comes to design, sci-fi can be a hit or a miss. Glass devices A lot of futuristic design uses glass as electronic devices to give a sense of technological development. This works for two reasons: First, we don’t currently have the ability to see through devices without cables and microchips in the way, and, second, when it feels like content is jumping off the screen, it makes the technology feel more connected to the world around it. In terms of UI, this is an extension of minimalistic design trends going back to early 1900s movements such as Bauhaus. In digital design, flat design started being used more and more as smartphones advanced, and was adopted widely after the launch of iOS 7 in 2013. Intuitively, it feels like the sleek futuristic designs we see in movies are what these design principles would look like down the line. However, if it were possible to make this vision a reality, it’s likely that users would not enjoy seeing their hand behind the glass, and the semi-transparent screen might make it difficult or frustrating to use. Dark themes Space travel shows in particular have used dark themes for a very long time. Going back to the earliest incarnation of Star Trek in the '60s, almost all of the interfaces consist of colorful buttons on a black background. In this context, the dark background evokes space, while the simplicity of the design helps make it feel futuristic. With iPhones officially introducing dark mode and designers reimagining interfaces to comply with it, this was a great prediction of where design paradigms were moving towards. Gesture-based UI Interfaces that are entirely gesture-based feel cutting-edge because we still rely on buttons, icons, and tooltips. In a world where all navigation and features are accessed by gestures, there’s an implied level of connectivity between humans and machines that we don’t have yet. It definitely looks sleek and exciting, but, if you were to look at the way Tom Cruise interacts with computers in Minority Report, you’d see how needlessly complicated the hand gestures he uses are. Realistically, any platform that limits itself to gestures will either require the user to remember too many movements or will offer a very limited number of ways through which you can interact with its programs. The reason buttons and icons are used so widely is that they’re a great way of letting the user know what their options are without having to teach them in onboarding or via tooltips. Cut-off corners Battlestar Galactica is where I use all my pauses to point out the UI. All of their screens, tablets, papers, clipboards, and even books look like someone just snipped off the corners with scissors. From a practical standpoint, this is annoying because it would definitely be more expensive and more work to do this than to just have normal corners. From a UI perspective, it’s a great example of a classic design principle: repeating elements. Making a design choice and sticking to it gives a cohesive feel to your product, and Battlestar Galactica definitely achieved it with the way they use these shapes. Voice commands Voice commands have been popular in science fiction for much longer than they have existed in real life. We use voice commands for our phones and other smart devices, but our virtual assistants don’t have anywhere near the range of actions and intelligence the ones depicted on screen do, and we don’t use them as often. The futuristic appeal of voice commands is that the voice on the other end feels like a real person that you could have an almost human relationship with. In the movie Her, the artificial intelligence is so advanced that people feel comfortable talking to it out in the world, because for all intents and purposes, they’re basically talking to another person. In reality, using voice commands feels awkward and clunky because at the end of the day, we know we’re still just talking to ourselves. How UI design advances the plot As technology becomes a bigger part of our lives, pop culture incorporates it more into TV and movies. The portrayal of technology is a reflection of where we are and where we want to go. Because modern tech can provide too easy a solution for plot points, a lot of TV shows choose to be vague about the time setting, such as Netflix’s Sex Education, or find an excuse for their phones not to work, like bad reception or low battery. UI/UX being an important part of the plot is usually a sign of good writing, as the story reflects reality and contemporary culture. The plot is adapting to its surroundings and not trying to make them disappear. When technology is taken out of the picture, the story feels less based in reality and can make audiences disengage. On the other hand, when technology is used as an important part of the plot or character development, it can help further immerse us. Breaking Bad has a moment in season one that showcases UI brilliantly. Walt’s son, Walt Jr., creates a website to help raise funds for his dad’s cancer treatment. The designers specifically chose to make the website look amateurish. The cheesy, repeating background, bad coloring and use of Comic Sans make for terrible UI, but, if it were a polished design, we wouldn’t have felt the sympathy we did for Walt Jr. in that moment, knowing he probably spent hours making it himself. Another good example of UI/UX being important to a plot is in the Community episode App Development and Condiments. A social rating app called MeowMeowBeenz takes the college campus by storm and creates a societal ecosystem where your worth is decided based on your ratings. But while the app is tearing Greendale apart, its cartoonishly goofy design and sound effects (little “meow’s” play when you’re given a rating) highlight how ridiculous the commotion around it is. By giving the app a silly design, the production is cuing the audience in to what the characters only learn later: The idea that you can be given a number to determine your value is ridiculous. Sometimes, user pain points are meant to create hurdles for the protagonists in a story. Many movies feature the hero trying to download an important file onto a thumb drive while under time constraints. We’re shown several close-up shots of the progress bars over tense music, as they manage to download the files just in the nick of time. Anyone can relate to the uncertainty and impatience felt when waiting for a process to finish and staring at a slowly progressing bar, often with wildly fluctuating wait times. In an episode of Buffy, Willow’s frustration over a loading bar even tempts her to use magic to make it finish faster, despite her addiction issues. The prevalence of this trope in the media shows that, for the most part, we haven’t done enough to address this pain point. Some products will show animations or flip through different photos or illustrations to keep the user preoccupied during the loading period, but the majority–and most glaringly, the largest–of products still hasn’t updated this outmoded element. What can we learn from the way designs are shown on screen? On screen, it’s the clear calls-to-action and focus on key UI elements that helps create a narrative. The same applies to UX design. The user should always have a clear call-to-action and not get lost in a jungle of features. Leveraging user stories, we can create narratives around the way users navigate our platform and focus the hierarchy of information to optimize that flow. When we’re introducing new features to our product, we need to carefully think about where they fit best. It can be tempting to put a lot of things on one page, or stick them in an overflow menu, but we need to make sure the screen is clean and that the actions are easy to find when the user needs them. The minimal amount of content shown in TV and movies stresses how much information people can digest in a small amount of time, which is usually how long users take to try to understand products. What makes the portrayal of sci-fi technology so appealing is how little friction the users have with the products. It’s rare to see a character struggle to figure out how to use a platform or make a mistake. These stories show the ideals we should strive for in our relationship with technology: We want technology to help us when we need it and disappear when we don’t. We want interfaces that are smooth, intuitive and convenient to help us get things done with the utmost ease. As designers, we need to keep evolving, learning, and being empathetic to our user needs. We can learn how to better ourselves from courses, competitors, communities - and even movies and TV.

Reflecting on your work and work processes is a key component to growing as a designer. Creating a formal process for that reflection can help ensure it happens on a consistent basis, and doesn’t get lost in the shuffle of everyday work. A design retrospective presents an excellent framework for introspection, whether you work on a design team or as a solo designer. What is a design retrospective? Retrospectives, also referred to as retros, come from the world of Agile development and the Scrum system (for those not familiar with Scrum, it’s a project management system that emphasizes teamwork and iterative progress toward a goal, usually broken down into sprints). In a traditional Scrum retrospective, at the end of each sprint cycle the entire design team comes together to reflect on what worked and what didn’t, and make plans for future improvements. A Scrum retrospective generally has four parts: Setting the stage Reviewing what went well Assessing what needs to be improved Coming up with next steps These steps provide a structure for reflecting on a project and creating an actionable plan to improve the next project. During each part of the retro, activities are often used to help the team better share their knowledge in a fun or interactive way. In most cases, everyone is invited to participate simultaneously by writing down feedback on sticky notes or on a virtual whiteboard, for example. This is especially useful when sharing feedback on what needs improvement. If everyone is writing down their thoughts at the same time, they don’t have time to overthink what they’re sharing and are more likely to be straightforward about their feedback. How often to run a retrospective In Scrum, retrospectives are generally conducted at the end of each “sprint”—a set period of time in which specific tasks are completed (sprints generally last 1-2 weeks, though may be longer). That means they may be occurring during the middle of an actual project. On larger projects, you might have multiple retrospectives before the product is completed. Even if your team isn’t working within the Agile/Scrum framework, you should still run retrospectives for each project. Reflecting on the work you’ve completed and how you’ve completed it sets your team up for improvement. Designers and design teams who adopt a growth mindset can find the retro process to be a vital step toward development. If you’re not working in sprints, the frequency of your design retrospectives depends largely on the project. Smaller projects might only need retrospectives done at the end, once the product has been launched. However, heftier projects can benefit from more frequent retros, carried out after reaching each major milestone. This allows for iterative improvements throughout the project, creating better work along the way. For larger projects, there are four main points at which you should consider running a retrospective: at the end of the discovery phase, at the end of the prototyping stage, when the first functional product is created, and once feedback has been received and acted upon. These are good functional milestones for retros because they’re natural turning points in a project. Having a retrospective in the middle of any of these phases can actually derail the project or slow down momentum. Breaking down the four stages of a design retrospective If you’re running a design retrospective, there are a few key phases you’ll want to go through with your team. 1. Set the stage Setting the stage in a retrospective can be one of the most important steps. This is where the person leading the retrospective (the Scrum master in the case of Agile) sets the tone for the rest of the meeting. They should also remind everyone of the goal of the retrospective: to embrace an improvement mindset and help the team create better work going forward. As the facilitator in a retrospective, it’s your responsibility to make sure that all team members feel like their opinions are heard and valued. It’s important to create a culture of growth. Remind participants that feedback should be constructive, whether it’s positive or negative. This is particularly important when going through the feedback for what needs improvement. If a project isn’t going well, this can quickly turn into a blame game. Participants should not take feedback personally (and should be careful not to make feedback personal). Facilitators are responsible for making sure that doesn’t happen. 2. Evaluate what went well It’s important to focus on the positive during your retrospective. The facilitator should plan an activity that helps team members consider what went well during the project or sprint. This is often the easiest part of a design retrospective. People generally like to talk about positive things. It’s easier than talking about the negatives of a project. There are a few questions facilitators can try to find answers to during the retrospective to get the best insight into what went well. What went according to plan? This is important to note, because it’s an indication of how well the team’s expectations met reality. If most things went as planned, then you know the plan was well thought-out and the process used to create it can be implemented again. If things didn’t go according to plan, it’s a good idea to reassess the plan itself, as well as the method used to come up with it, to see what can be improved. Were any new systems successful? If your team tried out something new, assess whether it’s working or not and make a decision whether to continue using it or try something else. What tools and techniques worked? Similar to trying new systems, if your team used any new tools or techniques, the retrospective is a perfect time to assess what’s working and what isn’t. What did the team learn? The best designers adopt a growth mindset and constantly look to learn new things. Discussing what everyone learned helps reinforce those learnings and makes sure the entire team benefits. What are the strengths of the design? While traditional retrospectives often focus on the team and workflow, it’s important for a design team to also look at the design itself. This is an excellent learning opportunity for the team to see where their strengths lie. You don’t always have to evaluate the answers to every question above, but you can use them as a jumping-off point for how to structure this part of the retro. Be sure to record all of the answers to these questions, so that you can refer back to them later on during the retro and after you’ve finished the process. 3. Evaluate what went poorly While discussing what went well is vital to the retrospective process, evaluating what didn’t go so well is equally beneficial. Without diving into what went wrong, it’s hard to fix those things going forward. It’s important for the facilitator to maintain certain standards during this portion of the retrospective. Talking about the negative aspects of a project can quickly devolve into personal attacks and blaming other teammates if allowed. Reminding participants to avoid personal attacks, and not to take criticism personally, is vital. All criticism given during this section should be constructive. It should be given with the intention of making improvements, not just as a complaint. To that end, there are specific questions facilitators can ask to get constructive feedback from the team that’s less likely to cause conflict among team members. What didn’t work? By focusing on whether something worked well or not, it keeps the focus on the process and not the people. What should be done differently? Just because something technically worked, doesn’t mean it’s the optimal way to do it. Exploring different ways to accomplish project goals is a chance for the team to grow and problem-solve together. What was lacking? Sometimes it’s the things that are missing that can cause the most problems on a project. Are there issues with communication? Lack of a clear approval process? Find out what people on your team are missing in the process or in the work itself and plan to brainstorm for solutions during the final part of the retrospective. What about the design itself could have been improved? Just like looking at the strengths of a finished design, looking at where it falls short is also important. In some cases, the shortfalls might have been unavoidable due to client constraints or resources available. But in other cases, it might be a weakness on the team or in the workflow that caused issues. Was enough time spent on each part of the process? Were shortcuts taken or corners cut? Encourage the team to take an honest look at the design and figure out what could have been better. Just like the positives, make sure to record all of the negatives your team comes up with. These will be important for crafting an action plan in the final part of the retrospective. 4. Make an action plan A retrospective that doesn’t result in a plan of action for improvement moving forward is a waste of your entire team’s time. It’s important to take the feedback you collected in the previous parts and analyze what should be continued and what should be changed. Once you’ve recorded all of the positive and negative feedback from the group, you’ll want to check it for duplicates or conflicts. If a lot of people are saying the same things, that should be an area of focus. If one person said a particular part of the process worked for them and someone else says the opposite, that warrants further discussion to figure out why that piece is viewed so differently. Your action plan should include things to continue doing, things to stop doing, and things to change. It’s important to get some consensus on the most important elements. In most cases, you’ll have way more potential action items than you can possibly implement immediately, so prioritization is key. You can use interactive group activities to facilitate this part of the retro. A good way to get an idea of how the team is feeling is to ask each team member to vote on their top two or three priorities for things to start doing, stop doing, and continue doing. Hopefully, this results in a few clear winners. If not, it can initiate further discussion to get the team on the same page. How many action items should you end up with? As far as things to continue doing, you can include all of the items the team agrees on. The same generally goes for things to stop doing. The only potential pitfall here is if the things to stop doing need to be replaced with new systems. This adds an extra layer of complexity to the plan going forward, as new systems will need to be determined and implemented (which can be time-consuming). As far as new things to try, this is where you’ll need to limit the number of action items. Trying to make too many changes at once can set the team up for failure. Instead, focus on no more than two or three new action items for the next phase of the project (or the next project). These should be thoroughly defined. Before completing the retrospective, you should also make sure to establish who’s responsible for implementing each change. Retrospective activities While you can definitely just ask the questions and facilitate a group discussion for positive and negative feedback in a retrospective, creating activities can help make the process more fun and interactive. The most basic activities include using a whiteboard or sticky notes for collecting feedback simultaneously. Have everyone write down their remarks at the same time and then share. This can be done in person or via online tools. Depending on the size of your team, you might consider breaking off into pairs to discuss each question and then sharing the answers as a larger group after. This can be particularly useful for large teams, since it keeps the number of answers being discussed smaller. There are dozens of retrospective activities that take the same basic concepts of revealing positives and negatives in fun ways. Some examples are the Sailboat Retrospective—which uses the metaphor of an anchor holding the boat back and the sails driving it forward, the 4Ls—which stand for Liked, Learned, Lacked, and Longed For, and the Starfish exercise—the five points of the starfish represent Keep Doing, Less Of, More Of, Stop Doing, and Start Doing. Funretro.io has a huge database of ideas for interactive retro activities. Conducting a solo retrospective Just because you’re a solo designer instead of part of a team doesn’t mean you can’t benefit from a retrospective. It’s a good time to reflect on what’s been going well and where you still have room for improvement. While a team retrospective is often based on activities that foster collaboration and communication, I recommend a more informal approach to solo retros. You can still follow the main three phases of a team retrospective (leaving out the first step of setting the stage). But rather than doing formal activities, you can simply write and reflect on your experiences. Take out a notebook or open a note app and write down what went well and what didn’t. Consider all aspects of the project: the workflow, the communication with clients, the final design, etc. Once you’ve made lists of the things that went well and the things that didn’t, you can create a plan for what changes to implement and what to continue doing. Reflecting on your own work can be challenging for some designers. Try giving a bit of time between the completion of a project and the retrospective so that you can approach it with fresh eyes (a week is usually enough time). You may find it useful to jot down notes as you think of ideas throughout the process, ensuring that you won’t forget anything when you come to conduct your retrospective. Try to look at your own work objectively, as if you were looking at a design someone else created. Remove your personal feelings from it and try to approach the entire process with a critical eye. As you do this more, it will get easier to do. Retrospectives make you a better designer Retrospectives are an important part of the UX design process. They also play a vital role in helping you become a better ux designer. Being able to honestly reflect on your work and workflow is the first step in improving both of those. Designers and design teams who adopt a growth mindset can find the retro process to be a vital step toward development. Whether you conduct formal retrospectives as part of a design sprint or Scrum framework, or simply at the end of your projects, the insights you’ll gather can improve your team’s work together and elevate future projects.

Typography is at the core of the personality and style of a design project. A type choice can blend into the background with subtlety that helps clearly communicate messaging or serve as a dominant visual force that pushes the design forward. Either way, typeface design is an important element in any project. Experimental typefaces can help add a powerful edge or the right feeling to a design. They often serve as artistic and typographic elements concurrently. But experimental typefaces aren’t always bold and bizarre; this type style encompasses anything new and interesting that pushes type norms just a little outside of the usual comfort zone. Here’s a guide to everything you need to know about experimental typefaces with a selection of some great examples to try in your projects. What are experimental typefaces? Experimental typefaces are generally of the display family, and have an unexpected look or interaction, such as animation, different x-heights, or a general disregard of the rules of letterform shape and spacing. These text styles include quirky lines, colors, and letterforms. They have flair and plenty of personality. But that’s not always the case. “I think there might be a misunderstanding about this term of ‘experimental.’ We tend to use it to describe display typefaces that look either new or weird or disturbing,” says Jérémy Landes, Art Director & Type Designer at Studio Triple. “The question of the design process behind the creation of these typefaces, and the question of the experimentation in the design process, is not really the point. Anyway, it seems to me that this term tries to convey the idea of a certain novelty, an avant-garde in the display genre,” he notes. The definition of an experimental font may not be truly solidified, but you can think of it like this: An experimental font is anything that bucks the rules of traditional type design. What might be most important when designing or using experimental or expressive typefaces is the push and pull between uniqueness and readability. When working with this kind of type element, there’s a delicate balance between typography as art and typography to convey a message. According to Jérémy Landes, while experimental typefaces stand out for their innovation, the main criteria to examine them is audiences’ reactions. “They feel new, but the question behind a successful experimental typeface is more one of the Zeitgeist. Will people relate to it? Will people be intrigued by this novelty, more than repelled? The question of why a creation, and a typeface, is successful at one point in time is for me the most intriguing one.” Before conducting any type of design experiment, it is important to think about how it will resonate with your core audience and overall messaging. Related: What a queerer design industry might look like: more expressive, collective and subversive “The question behind a successful experimental typeface is more one of the Zeitgeist. Will people relate to it? Will people be intrigued by this novelty, more than repelled?" Types of experimental typefaces Experimental typefaces can have a variety of purposes–purely aesthetic, commercial display, or to promote a specific goal, such as social or promotional engagement. Visually, these typefaces come in a lot of forms: Animated Color fonts Variable fonts Handwritten fonts Custom novelty Illustrated or artistic lettering Three-dimensional 10 remarkable experimental typefaces 1. Solide Mirage Monospace | Free, open source Design: Velvetyne Fonts Solide Mirage was originally designed as a custom typeface for French-British music band, Frànçois and the Atlas Mountains. The band and designer decided to release the font as free and open source, to be used by fans as well as anyone else who appreciates its experimental aesthetic. This unicase display typeface combines upper and lowercase characters together, resulting in a somewhat haphazard look. It was inspired by the Didone genre, while putting a new spin on the classic style with compressed shapes and long, elaborate serifs, especially on letters with ascenders or descenders. The typeface supports the Latin and Greek writing systems, and has ornamental alternates for some of the letters, shaped as squiggly zig-zags. Consider using this font for branding. Note that while it is highly readable with some character combinations, others can be more difficult. 2. UltraSolar Normal Sans serif novelty | Paid Design: Adrien Midzic for Pizza Typefaces This experimental typeface is highly readable and includes quirky details such as cutouts and missing curves. These details are inspired by traditional ink traps in typography, only that in this case, the missing details are stylistic interpretations and aren’t meant to be filled with ink in the printing process. Best use cases would include titles and headers, or a short word or phrase in a display space. 3. Grind Grotesque Sans serif | Free, open source Design: Mickaël Emile This open source font boasts an extremely wide stance, and is adequately named after the sliding stunt performed in extreme sports. In that vein, it’s best used with extreme design intent. The letterforms are sharp and compressed, with long straight lines and very little curves. 4. Euphoria Novelty typeface | Paid Design: Janik Sandbothe for Typelab With hairline-thin strokes and pronounced, bubble-like terminals, this typeface turns to an Art Nouveau magazine cover illustrated by Ludwig von Zumbusch for inspiration. This expressive all-caps font features a single stroke design, as if scribbled lavishly in one go. Its play on stroke width contrasts and free-flowing curves provide a lot of visual interest for display usage. 5. Digestive Novelty | Paid Design: Studio Triple This font takes inspiration from Gothic architecture, Art Nouveau, seaweeds and human anatomy. The type design strikes a balance between attraction and repulsion, mixing tall proportions with loose, fluid shapes. Digestive is a type family of seven fonts, ranging from super compressed to wide. This experimental typeface is best used for large text, and adding generous letter-spacing can help improve its legibility. 6. Cascadeur Modular and variable font | Paid Design: Peter Bushuev for Naum Type Foundry This experimental typeface is a modernist homage to space-age typography. Its design is based on a four-lines grid, and together with it’s very tight kerning it creates a sense of filling up the space. The Cascadeur type family is made up of 12 styles and a variable font, supporting a variety of languages. Most letters come with two to four alternates. This typeface is perfect for a design featuring oversized headlines or type for digital display or print. It would also work well as a primary artistic element. 7. Russibani Novelty typeface Design: Sveinn Þorri Davíðsson and Siggi Eggertsson Aptly named Russibani, meaning roller coaster in Icelandic, this experimental typeface takes inspiration from roller coaster rails, using a single, continuous line for each letterform. The result is a pixelated-like appearance that gives off a mechanical feel. Best uses may include branding projects or as the type treatment for a main headline or other large lettering. 8. Lovelo Animated sans-serif | Paid Design: James van den Elshout and Hans Renzler for Animography This highly readable typeface includes 64 adjustable controllers, with each letter composed of six modifiable strokes. You can tweak this font’s motion speed, color, stroke width, and many other features, allowing for versatile uses of the same design. Lovelo, which offers uppercase letters and extended Latin glyphs, can be downloaded either as a JSX file or an After Effects project. This typeface works best on a solid background as a decorative text element. 9. Singdings Dingbat-based display | Paid Design: Fable Type Foundry With illustrative touches and a hint of whimsy, this experimental font features architectural landmarks and other objects from Singapore in honor of the country’s 55th birthday. The all-caps typeface offers 130 glyphs, with two to three alternates for each letter. These different versions allow designers to blend clean, geometric letters with unique dingbat-style ones, adding flexibility of use. The specificity of the typeface dictates use somewhat, making it best fitted for projects related to its namesake, or in any design that calls for a palm tree as a capital T, a shrimp for a G and more. 10. David Milan: Hand lettering Custom created lettering Design: David Milan While not an actual typeface, experimental typography can also take on the form of hand lettering. These unique renders of letterforms can add a bespoke touch to a design. Based in Madrid, David Milan creates his lettering pieces either digitally or with markers and brush pens. His style ranges from hyper-realistic 3D designs, to looser strokes that highlight the human hind behind them. The typography itself also varies, going from handwritten script to cleaner capital letters. When it comes to custom lettering and phrase design by a lettering artist, use and application is almost unlimited and can accommodate a wide range of design projects. How do you use experimental typefaces? Once you become enamored with the idea behind experimental typefaces, it is hard not to dive in. But you want to ensure that you’re using experimental typefaces the right way. It’s important to consider whether these styles are appropriate for your audience or publication, the value of readability versus artistic value, and the overall relationship to your brand as a whole. Here’s how you can make experimental typefaces work for your projects: Use a typeface that feels like it goes with your brand. Experimental typefaces are funky by nature, so choosing an appropriate way to display them is important. Mix it up. Using experimental typefaces can mean that you have to switch typefaces frequently for some text elements. Is that acceptable within your brand’s style? Create a messaging match. A color font typically feels fun and light. Does that go with your content and tone? The same is true of any experimental typeface. Type in the words in the font you plan to use. What emotions or meaning come to you when you see it for the first time? Does that fit the goal of your messaging? Build brand value. For startups or rebrands, an experimental typeface choice spark for a logotype or text element that becomes part of your brand’s visual story. Think of typography as art. Not all typography is designed to read like a novel. For short words or phrases where the letters meld together in just the right way, type can be used as an artistic element. This concept can be a solid option if you find yourself in a project without a lot of other imagery. That last point brings about a good question: How do you weigh readability versus the artistic value of an experimental typeface? There’s no perfect answer. It really depends on your brand voice and tone in relationship to the font and aesthetic. But there are a few things you can do: Test fonts, pay attention to analytics, and poll your audience. Do they understand what you are trying to communicate? Watch for red flags in your analytics such as drops in traffic, reduced time on site/page, and unclicked calls-to-action. Pair an experimental typeface with a simpler, more legible font that reiterates key messaging. Only use an experimental typeface with the finalized version of your UX copy. Don’t use placeholder text or elements that will auto populate, such as a header tag for webpages or a blog. These typefaces require attention and care that only comes with manual typesetting. Conclusion Experimental typography is one of those design tools that people tend to either love or hate. (I’m in the former category.) These typefaces are expressive, creative, and special. They give type designers a chance to stretch with concepts, letterforms, and artistic vision. The key thing when looking at typefaces in this category is toggling between readability and artistic value (more traditional fonts for websites here). Not all type styles have both, and it can be a determining factor when it comes to using an experimental typeface or not.

Design has had a massive impact on the success of many organizations, especially tech companies. However, there are still plenty of sectors where design doesn’t have a seat at the table yet. Healthcare is one of them. In healthcare, change isn’t embraced as much as in other industries. It comes more slowly, partly because it can have serious implications on the health of millions of people, and the user experience in some areas hasn’t changed in decades. Healthcare products also have the tendency to be very technical and scientific, and often don’t take the people interacting with systems or processes into account enough, from doctors to nurses to patients. Then there are privacy issues, and questions around how data is handled and what recommendations and insights a user can receive. As a result, doctors are spending a lot less time with patients and more time battling inefficient medical systems. “It’s an honour to work on products that can improve the lives and outcomes of patients facing some of the most difficult times in their lives,” points out Barbara Spanton, senior manager for user experience at Varian Medical Systems. “But the reality of working on these deeply impactful products is full of obstacles. This work often exists in sensitive domains, which are slow, regulated, and involve all the legacy and integration baggage you might imagine.” Despite the challenges, there are also huge opportunities in designing for this highly-specialized domain. A better user experience is urgently needed. In an ideal scenario it can save lives. But it’s also needed because some significant change is happening: health is no longer confined to the walls of the doctor’s office. The web has empowered people to manage their health themselves more than ever before, making it critical to get the UX of digital health products right. [Related: Neumorphism's new fan base] “Healthcare is an incredibly competitive and fast-moving sector,” says Andy Thornton, design strategy consultant at user experience design consultancy Clearleft. “The ability to take advantage of emerging technology and create services and user experiences of exemplary quality is crucial for adoption and retention of users, more so than perhaps in any other sector right now.” For this article, we talked to some of the world’s leading designers and thought leaders in the field who are actively working on making a difference in healthcare UX. They cover both the challenges and the opportunities of designing for medical care, and explain how UX design can benefit a space where it’s traditionally been lacking. Design with empathy for the users from the start One of the biggest challenges of designing digital products for healthcare is also one of the most obvious ones. “You can’t ‘move fast and break’ things when the product you’re building really does have life or death implications for those who will use it,” points out Jonny Belding, partner of digital health design agency Hanno, which hosts a weekly podcast on building digital products for better health and wellness. “Our team didn’t always work in the health space. In a previous life, we did a lot of work with non-medical startups, so our journey to becoming digital health designers has been a real eye-opener.” Healthcare is a space with heightened sensitivity, which means you need to carefully consider privacy, ethics, and laws to conduct your research. The design process itself, however, still starts and ends with customer insight. UX pioneer Don Norman adds that UX mistakes you tend to find in other sectors could have far more damaging consequences in healthcare. “I just spent 15 minutes trying to log on to a certain airline’s website, for example,” he explains. “I assumed I had the wrong password, but each time I use the new password they suggest, I get a 403: Forbidden error. My experience with the system over the past several months has been so bad that I simply will never fly with them again. But what if this had been a critical medical device? The patient might die while I tried to figure out what I could do. I couldn’t simply refuse to use the machine.” This gravity of what’s at stake means that the journey to launching a product in the healthcare space can have many more hurdles than you might see elsewhere. You simply can’t apply many of the approaches and techniques you’ve learned because they’re not intended for highly regulated industries. Understand the bureaucracy and regulations Apart from legacy technology and siloed practices, one of the biggest hurdles in designing for healthcare is the bureaucracy and regulations involved. These impose severe constraints, high costs, and a lot of delays. “Regulation can significantly affect the quality of the experience you're able to deliver,” cautions Clearleft’s Andy Thornton. “Also, regulatory standards in healthcare can vary hugely from region to region, making consistency and scalability of design solutions problematic.” It’s therefore not unusual for designers in the healthcare sector to have years of work still going through studies and trials before it eventually gets regulatory approval and reaches the market. Barbara Spanton focuses on a different persistent challenge. The digital products she works on are Electronic Medical Records (EMRs) – sometimes also called Electronic Health Records (EHR) – essentially digital versions of the paper file(s) that a doctor keeps as a record of a patient’s health data and events. EMRs impose a heavy burden of increased complexity on clinicians, without reciprocating any perceivable benefit. “The promise of digital EMRs is the smart use of previously-entered data to find insights, streamline and optimize care,” Barbara explains. “They also promise real-time safety checks and mitigations to ensure patient risk is minimized, easy sharing of patient data across hospitals and clinics, and increased efficiency in capturing and accessing records wherever and however you need them. However, this promise remains undelivered. Clinicians are spending additional hours every day documenting through dozens of controls, forms, and workspaces [the same information that] they used to be able to capture in a few short phrases on a paper chart. These systems benefit medical processes, hospital administrators, and claims. But they’re often an obstacle to delivering good care by patient-facing users.” Barbara believes that these challenges can be overcome by establishing a UX team that’s well-connected both within the organization as well as with end-users. She suggests framing all product decisions in terms of the impact they will have on all players they touch – be it the patient, clinician, caregiver, or administrators, and prioritizing the specific roles or scenarios that a specific product or feature must serve. Collaborate with non-technologists Collaboration is crucial in order to create an effective digital product in healthcare. “One of the big challenges in healthcare is to keep things simple,” finds Daniel Burka, director of product and design at Resolve to Save Lives, which is currently working on Simple, an app that helps improve hypertension control. “Health involves a complex, deeply interconnected web of systems and roles. How can we make tools that embrace that complexity yet are easy to use? It’s crucial that clinicians can focus more on their patients and less on data systems. To succeed, designers need to collaborate with everyone involved in delivering care. Your job is part-time designer and full-time facilitator.” Andy Thornton adds that designers need to understand the multitude of touchpoints that are intrinsic to healthcare. “Just in terms of the primary care experience of patients, there’s symptom identification, appointments and consultations, diagnosis, and prescription,” he points out. “They all have a variety of online and offline integrations to be considered. It’s a complex space with a diverse range of user needs. Understanding this complexity, and that not everything can be easily ‘automated,’ is key to designing appropriate digital solutions.” Don Norman agrees and cautions that many developers seek the advice of physicians, not realizing that the bulk of patient monitoring and supervision is performed by nurses, making them the real experts of the needs and quirks of medical devices. To collaborate effectively, Stacy La, who’s currently leading product development and design on the Resolve to Save Lives’ Prevent Epidemics initiative, suggests humbling yourself and keeping your ego in check. “Too often, the creators of digital products think they will solve all of healthcare’s problems,” she explains. “But technology by itself is not the solution.” For Stacy, improving the user experience of digital products in healthcare requires technologists to first, understand the healthcare ecosystem and its regulatory environment. Second, they need to have empathy for the people delivering and receiving healthcare services. Third, developers need to include healthcare providers in the design process. Stacy also advises not to get discouraged from working with non-technologists. In fact, these professionals’ rich experience and insights can help improve your team and your product. “Use it as an opportunity to share with others the power of design to make better products and deliver better services,” she recommends. “Designers have the ability to synthesize and visualize. We can distill complex workflows, processes, and ideas to get people on the same page. We can break down silos by showing people where inefficiencies are, and facilitate conversations that lead to solutions. This allows us to have a huge impact, even though healthcare isn’t a sexy industry.” Human-centred design in an extraordinary context In healthcare, established UX methods and practices are still applicable. Yet designers need to understand these new environments through contextual research. “Everything I do is based on human-centred design principles,” explains Tim Caynes, experience design director at Foolproof, who over the last few years has been collaborating with a provider of cloud-based visualisation software for endovascular surgery. “The most basic articulation of what that means is – I try to understand people to make better things,” he clarifies. “During my research, I’ve had to learn a whole set of languages, contexts, services, and ecosystems, to really understand the motivations and behaviors of clinicians with a singular focus – improving the patient experience,” Tim says. The design process therefore included interviews with surgeons and observations in the operating theatre, to really understand what they do in their own context. This knowledge helped the team make better decisions about how they approach the design. “We also discovered a couple of things about surgeons that were really important,” Tim reveals. “They are very short on time, and they’re highly focused. So in order to facilitate a meaningful conversation and not waste their time, it was critical to establish a level of trust between us and them, and that meant demonstrating knowledge and understanding of their areas of specialty. I’m 100 percent sure we would have not got to the same level of detail and engagement, if we had simply turned up without acquiring the depth of knowledge we did.” Conduct extensive user research Healthcare products span an enormous rage. As a result, designers must not only understand the clinicians’ needs and frustrations, but also consider the interests and motivations of various other parties, especially the patients’. Working in healthcare is incredibly rewarding and fulfilling. It drives you to do your best, knowing that your work is helping people at some of the most difficult times in their lives. Hanno’s Jonny Belding highlights the importance of conducting extensive user research, especially as the type of problems you’re solving don’t necessarily have immediately obvious solutions (for example, helping a parent to manage their child’s type 1 diabetes or building AI to help doctors diagnose cardiac diseases faster). “While user research is a crucial part of the design process in any industry, the user needs – and physical and emotional context – of a person managing a medical condition can be a lot more complex than those of your typical ride hailing app user,” he explains. “That means that a lot more user research is needed to get to the heart of the problem and understand it from both a medical and behavioural perspective, before we can design an elegant solution.” Healthcare is a space with heightened sensitivity, which means you need to carefully consider privacy, ethics, and laws to conduct your research. The design process itself, however, still starts and ends with customer insight. For more on this see Google’s UX Playbook for Healthcare, which covers UX research from end-to-end and includes a collection of best practice tips designers can follow to guide and delight users and establish trust. “Inform your design decisions from a deep understanding of the people using your services before co-designing and testing your solutions with them,” Andy Thornton advises. He notes that good design research and the scientific method actually have a lot in common. “Good research is led by observation and asking questions to form measurable hypotheses,” he says of both science and design. “These hypotheses are then tested, analysed, and interpreted to inform an improved iteration of the solution. It’s no coincidence that stakeholders can easily get on board to this approach.” As an example, he points to products that he’s been involved in at Clearleft, which aimed to reduce the demand on primary care providers, or at the very least to use them more appropriately. “The biggest challenge in helping the public become more proactive and preemptive in their approach to their health and wellbeing is changing ingrained behaviors,” Andy explains. “Moving from a state of ‘I have a heart condition and need to take medication’ to ‘I have high cholesterol and need to be reminded to exercise more’.” Good human-centered research is one way to ensure you are tackling potentially hidden underlying needs. Andy suggests techniques such as the five whys to help you get to the bottom of root-cause problems. He recommends Don Norman’s seminal book The Design of Everyday Things, which covers this notion in more detail, as in this quote: “People don’t want to buy a quarter-inch drill. They want a quarter-inch hole. [...] Once you realise that they don’t really want the drill, you realise that perhaps they don’t really want the hole either: they want to install their bookshelves. Why not develop methods that don’t require holes? Or perhaps books that don’t require bookshelves. (Yes, I know: e-books)” Last year, Clearleft set their interns the challenge of helping the British National Health Service (NHS) “do more with less”. They were astounded to learn that a third of people each year admit to seeing a doctor for a minor condition that they could have treated at home. Through research they discovered that anxiety, lack of confidence, and forgetfulness ‘got in the way’ of self-care; people were simply giving up too early, and too easily – a fascinating and underserved design problem. The result of the three-month project is Self Treat, a vision piece designed to increase self-management of minor health conditions: Better products with realistic strategies, determination and optimism Working in healthcare is incredibly rewarding and fulfilling. It drives you to do your best, knowing that your work is helping people at some of the most difficult times in their lives. To effectively tackle the many challenges in this field, Barbara Spanton believes that “we need to move beyond this idealistic notion of ‘doing meaningful work’, and settle into the reality of having impact in these often complex domains. We need strategies to help break down obstacles, stay motivated, and have impact in the long run. And we need to find a source of optimism and determination to fuel us through this slow, difficult work.” While Jonny Belding acknowledges that healthcare work comes with a lot more restrictions than most industries, his team has found these don’t mean you can’t create engaging experiences. There’s a lot of room for innovation. “You can still put what matters to users at the heart of the product,” he encourages. “You just have to be willing to break the mould and find new ways to blend science, art, design and engineering to support people in- and outside of the clinic. For designers, that’s hugely satisfying.”

Do people actually read on the web? When Jakob Nielsen researched the topic back in 1997, he found out that only 16 percent of users read a webpage word-by-word, and this was more than 20 years ago. In web standards, it’s like going back to the stone age. As of January 2020, there are 65 times as many internet users compared to 1997. We’re dealing with increasingly larger amounts of content. The attention spans of our users are becoming more and more scarce. Should we really care about written content if people don’t read it? Well, this isn’t exactly how it works. Have a look at this screenshot of the Momondo app, but with all the words blurred out: As you can see, this isn’t too informative. As designers, we should be using concise text that helps users achieve their goals. This kind of content in both web and mobile apps is called microcopy. In this article, we’re going to show you how interface copy can improve not only user experience but also increase conversion. A win-win situation, isn’t it? So, let’s start from the basics: What is microcopy? The term microcopy was first coined in 2009 by Joshua Porter, an acclaimed interface designer and the former UX Director at Hubspot. According to Porter, microcopy is “small yet powerful. [...] It’s the small copy that has the biggest impact.” He refers to short phrases and single words that are a part of the interface. He realized the importance of those when working on an eCommerce project. Once the checkout form was released, Porter found out that many transactions couldn’t be finalized. The reason? People weren’t entering their correct billing address. The solution? A single sentence: After Porter added a note to specify that the billing address has to be associated with the card, the number of errors decreased. This small yet effective touch significantly improved conversion rates. (These eComm design tips help, too.) This is a great classic example, yet there is much more to microcopy than just that. The author of the book Microcopy, Kinneret Yifrah, defines it as “the words or phrases in the user interface [...] the motivation before the action, instructions that accompany the action, and the feedback after the user has taken the action”. It’s not just about the technical guidelines. One of the most famous examples of microcopy comes from Facebook: They could have left the field empty, or used something rather usual, like “Your status…” Instead, they decided to go with a more conversational tone. “What’s on your mind?” doesn’t just tell us what the field does – it also starts a dialogue. The copy asks the user to write something. It makes them feel that someone truly cares about their thoughts. This single powerful sentence continues to encourage millions of people to share what’s on their mind and keep Facebook running. Let’s have a look at some examples with numbers. Here’s how microcopy can visibly boost conversion on your website: Microcopy examples: how good microcopy increases conversion rates Visit Norway case study Although product copy is supposed to be concise, sometimes extra context works wonders. Even a small additional line of microcopy can significantly increase conversion. A great example here is the Visit Norway website, developed by Making Waves, a software development company from Kraków, Poland. The UX writers decided to play with the website copy and A/B test different solutions: The concise description talks about the commitment and the mission behind the offers. Although it’s not necessary for navigating through the website, it has another crucial function. This short sentence increased the click-through rate by 26%. The UX writing team of Making Waves has described this case study in their webinar. The takeaway? Don’t be afraid to try different approaches – you can never be sure what’s going to work best! Pinterest case study According to Forrester, an acclaimed market research institute, almost 90% of digital businesses invest in personalization. Many bigger brands also put a lot of effort into testing copy in their product. Personalized messages can make a significant impact on conversions, especially when we’re talking about large volumes of users. Pinterest makes a great example of a brand with a structured approach to microcopy testing. They’ve created a dedicated testing platform, called Copytune. This internal tool allows them to test copy variations in different languages, by setting up independent experiments for each language. For instance, what works best in English won’t necessarily be the optimal choice for Spanish. This is clearly visible when you have a look at the list of winning variations: The Pinterest team has a clearly defined process for copy testing. In the Explore phase, they come up with a range of alternatives, even as much as 20 versions for a single line of copy. Next comes the Refine phase, during which the team tweaks different components of the winning variant. This allows them to see what exactly causes the success of this version. Here’s how it works: There are so many details to adjust, from verbs and conjunctions to product variables and their order. After trying different options, it’s time to move on to the Combine phase. The team combines the most successful components into one phase to see if it will perform even better. This approach can lead to significant increases in conversion rates. In one of the cases mentioned by Pinterest, the top variant from the exploration phase increased the open rates by just 1%. Adding other variables from the Combine phase led to an 11% gain, resulting in hundreds of thousand new Pinterest users weekly. As you can see, it may seem like a small rise, yet it translates to significant volumes. The takeaway? Do your best to track different variables separately and then combine the most successful ones for optimal performance. Of course, Pinterest is not the only company that has an internal system for testing copy. Netflix has an in-house solution called Project Shakespeare, a system first developed for globalization and now also used for testing. Canva case study Now we get to the bone of contention between UX writers. Is being concise and being creative mutually exclusive? Does one contradict the other, or maybe they can go hand-in-hand? The answer usually lies in the target group. Have a look at this example from Canva, a web-based graphic design platform: This picture is a comparison of two buttons from Canva’s onboarding email. On the left, you can see the original button. “Start the free tutorial” is pretty dry. It tells you what’s going to happen and ensures you that the tutorial is free. Theoretically, you’ve got all the necessary information and you don’t need much more. Canva’s team decided to get a little playful. They know their target group well: the tool is designed for the creative crowd. Even if the user is not an expert, they’re using Canva to unleash their potential. The second CTA strikes all the right chords. Even though it’s not as direct, it has one essential advantage: it’s focused on benefits. The ultimate goal of a Canva user is to create professional-looking designs without professional sills. This is exactly what “Unlock my design skills” stands for. In this case, the benefit-focused approach proved to be successful. The second CTA improved the click-through rate by 28%. Keep in mind that this strategy is not one-size-fits-all. While it may bring great results in many cases, it’s not suitable for all user groups. When you’re working on more technical, primarily B2B-focused products, you might want to be more concise than creative. Again, the key is to learn about your users and test different approaches. We’ve mentioned Kinneret Yifrah’s Microcopy book before. In there, she briefly describes the core value behind effective microcopy: “Your brand must have a clear and consistent character that was chosen and designed using a rational process. [...] What is important is not to make assumptions in advance without completing a voice and tone design that specifies your vision, missions, values and target audience.” The question is: how do you get started with all these things? We’re more than happy to help. How to write better microcopy Ideally, you should be working with a dedicated UX writer. Of course, not everyone has the necessary resources. Many designers have to work as a one-man-band. Even if you can’t collaborate with a professional writer, you can still learn some best practices that will improve your writing: Define the voice and tone This is the starting point for every product, including websites. The voice remains consistent throughout the product. It’s the tone that changes depending on the context. This example from Mailchimp is a great illustration of how it works: Before Mailchimp’s recent rebrand, this was the screen you saw when sending an email campaign. This can be a stressful moment (we’re talking large volumes and huge budgets here) so the tone is rather serious. The microcopy is a summary of the most important details, including the name of the campaign and the number of subscribers. It’s not the right place for jokes – it’s about being clear, concise and, above all, helpful. Here’s what the user saw after sending the campaign: High five, what a relief! This playful copy relieves the tension and confirms that everything went well. Creating an extensive voice and tone guide can be a lot of work. Luckily, you can get started with some handy tools created by UX writing professionals. Strategic Writing for UX is a great book to get you started. The author, Torrey Podmajersky, has described a simple yet effective method called voice chart. It’s a relatively small template you can use to define the most important details about your brand’s voice: Filling in all the fields will leave you with a brief and actionable point of reference for future writing tasks. Serve the users Although microcopy can eventually increase conversion, its main purpose is to serve the user. It’s supposed to guide them through the interface and help them achieve their main goals. Your users already know most of the old sales tricks. Why bother with outdated techniques when you can win them over with great customer experience instead? Help them get what they want and you’ll be on the right track. Actually, you don’t have to just take our word for it. This approach is used by industry giants, including Google. They’ve got their own decalogue, known as Ten things we know to be true. The first truth speaks for itself: Focus on the user and all else will follow. Start with the most important things You’re probably already familiar with the F-pattern: When we read (especially large volumes of text), we tend to focus on the first words. Of course, we can help users consume information with good design, yet it doesn’t change the fact that we often skim the text and only read the beginning. This is why our UX copy should be frontloaded, even though it’s short. To be sure your users won’t miss the point, put the crucial information at the start. In most cases, it’s also better to start with a verb in the active voice. This way, the user will know instantly what they’re supposed to do. See this example from Ahrefs, a prominent SEO tool: The sentence starts with a verb (get) and the core value comes right after it – the tool allows you to analyze the backlink profile of a website. Remaining details are included in the second part of the sentence. This way, the message is more directed towards action and facilitates conversions. Don’t forget the bigger picture One last tip: don’t treat a piece of text as separate from the rest of the website design. Written content is a part of the user journey. All information is perceived in the context of the whole product. This is why we encourage you to work with the content-first approach. When you have the content right from the start, you won’t feel like you’re squeezing information into the interface. Instead, the design will be there to support the content and create a smooth, balanced experience. Think of your value, of what you have to offer, and then build your product around it. Just like with Google’s philosophy, all else will follow, including the conversions. Don’t be afraid to test different pieces of copy and see which ones fit your audience best. A small fix can bring significant results. It’s also much cheaper than reinventing the wheel, so why not give it a try?

A good design isn’t all about nice illustrations, well-structured information architecture, or relevant microcopy. Sometimes, it’s the small details that can make your product experience more fun, intuitive, and human. These little touches allow your product to be more engaging and give users an element of feedback or satisfaction when completing a task; however tiny. These details, known as microinteractions, are trigger-feedback based events designed to help users complete a single task while making it engaging at the same time. Some examples are: Pull to refresh: Loading animation appears when the user pulls down the app page Swipe animation: Swiping up on an iPhone to unlock it Tap animation: Tapping an Instagram post to like it Button states: Hovering or clicking on a button changes its style Scrollbar: Appears when the user is scrolling through a page Even though they are subconsciously overlooked by most users, they serve an important purpose: to communicate feedback based on the results of an action. Without microinteractions, the user would have no idea if their actions did anything or made a difference, resulting in confusion and frustration. (Related: How to use our custom CSS) For example, would you still be able to tell if you had indeed liked a post on Instagram if the white heart didn’t pop up and the heart below didn’t turn red? Most probably not, as we all require some form of visual, audio, or physical feedback in order to process the results of our actions. It is a human tendency to expect something to happen when you initiate an action. Breaking down microinteractions In 2013, Dan Saffer published the book, Microinteractions, which outlines a model for designing microinteractions. In the book, he mentions four main components of microinteractions: Trigger The trigger is what activates the microinteraction and can either be user or system initiated. A user-initiated trigger is usually done by clicking, tapping, swiping, holding, or dragging a UI component. System-initiated triggers are a little more complicated as they are automatic and triggered when certain conditions are met. These conditions can be set by either the user or system depending on the nature of the product. For example, your phone notifications are system-initiated triggers that are set by the system, while the alarm clock feature is a system-initiated trigger that is set by the user. Rule The rules dictate what happens once the microinteraction is triggered. When the user clicks or tap on this icon, what happens next? Will they be redirected to a new page? Will it add the item to their shopping cart? Or will they be logged out of their account? The important thing about the rules is that they must be logical to the user — if the user clicked on a trash bin icon, they expect something to be deleted. The same goes for system-initiated triggers; what will happen when all the preset conditions are met? If the user sets the alarm at 8.00 pm [Condition], it will inform the user once the time is 8.00 pm [Rule]. Feedback The feedback is used to communicate a message to the user; for example whether the action was successful or whether an error occurred, if more information is required, or just to inform them of the status of the system. This is the creative part of the process. As designers, we have to decide what form of feedback would be the most effective to help communicate the message to the user. It can be in the form of visual, audio, or physical indicators depending on the device and nature of the product. Loops and modes The loop determines the frequency of the microinteraction. Is it a one-time interaction or does it repeat over time? A good example of this would be the on-boarding process. Most products will only show it to first-time users and not existing users. This is because the on-boarding process brings no real value to existing users who already know how to use the product. Another common way of using loops is linking the microinteraction to product availability in eCommerce websites, like in the example below by Hush Candle. Once a certain product is out of stock, the “add to cart” button will automatically be disabled — stopping the initial microinteraction from occurring. Modes are used to control the form of feedback sent. For example, the default feedback for new incoming notifications on your iPhone is a “bell” sound, but when you set your phone to silent mode, the feedback changes to use vibrations instead. The purpose of microinteractions Before you get started, you’ll need to think about what you want your microinteractions to accomplish; this will help determine the trigger, rules, and feedback. Do you want to increase engagement, display system status, provide error prevention, or communicate your brand? Think about error prevention. A simple microinteraction could help prevent the user from making a mistake that might lead to a negative experience. The most common manifestation of this is via a confirmation modal. When the user selects an option that has the potential to cause a huge impact such as deleting their document, it’s common to have a pop up modal that requires the user to confirm their action. Another good example would be how Mailchimp uses microinteraction in their sign up form to mitigate potential errors by listing out all their password requirements. When a requirement is met [Trigger], it will indicate to the user [Rules] by fading the text and circle [Feedback], and this repeats for each requirement [Loops]. Common uses of microinteractions There are many ways to use microinteractions as they encompass a substantial number of digital elements. It would be almost impossible to find a website or application that doesn’t contain any form of microinteractions. Here are some common ones that we use in our everyday lives. Loading Loading is a necessary evil for any product, but microinteractions can make the process a lot more engaging. They let the user know that the product is still working to respond to their actions. In any scenario, the user wants to know the status of a process in real-time. If they suspect or assume that something has gone wrong or if the system is not working properly, their immediate response would be to close or refresh, thus losing everything they have done so far. This would result in a negative experience. If you have a feature on your product that requires a little more loading time, consider implementing a microinteraction to entertain the user while keeping them informed of the loading status. This can be done by implementing a simple website animation that uses color transition; from red to green to signify completion. Standby Sometimes a product requires multiple steps to complete a single action. After the initial trigger, a microinteraction will be used to inform the user that the product is currently on standby and waiting for additional inputs. This prompts the user to continue interacting with the product in order to complete the intended action. A good example would be when you want to move an application on your iPhone. You would first need to tap and hold an app icon [Trigger], allowing the phone to go into edit mode [Rules], which is shown by the jiggling motion of all the app icons [Feedback]. This feedback informs the user that they are now able to move the icon by dragging it to a different position on the screen. Another great example would be Grammarly’s spelling suggestion plugin which helps inform the user of any spelling mistakes on a document. When the plugin detects a mistake [System-initiated Trigger], it will highlight it to the user [Rules] by underlining the text in red [Feedback]. This unlocks the second microinteraction and prompts the user to hover over the text to correct their spelling mistake. Data input Data input is a necessary component for most products; be it for login, sign up, shipping details, contact form and so on. It is a common source of frustration for many users. Let’s take the account creation process as an example; different products have different password requirements. Often, the user only gets an error message stating that they didn’t meet the password requirements after they hit the submit button. Inline validation would help prevent this negative experience and save the user from having to re-enter a new password. In the above example, we see how Mailchimp implements microinteractions in their sign up form to decrease the chances of errors occurring. Support undo Everyone makes mistakes. As designers, we should make it easy for the user to undo any action that they didn’t mean to do in the first place or that they changed their mind about. Microinteractions allow you to communicate the state of the UI element and give the user an opportunity to reverse any prior actions done. Some examples of elements that make use of microinteraction are toggles, tabs, radio buttons, checkboxes, etc. A simple example would be how most eCommerce websites allow the user to add an item to their wishlist or favorites by clicking on a heart icon. This microinteraction uses a change of icon style to communicate that you have favorited this item. It indicates that this can be easily undone by clicking on the icon again, reversing the action and reverting the icon to its original state. Brand communication Even though microinteractions should be simple and purposeful, it doesn’t mean that they should be dull. Just like your microcopy, the design of your microinteractions should follow and reflect your brand image. Blending emotions and brand values into your microinteractions adds a human element to your product, which could be the difference between a positive and a generic experience. An example is how Readme infuses humor into their login process by having their owl cover his eyes while you’re typing your access password. This adds some fun to the administrative-like process of filling in a form, making the overall experience much more pleasing. Another good example is how Spotify converted the progress bar of a song from any Star Wars soundtrack into a lightsaber during the launch of “Star Wars: The Force Awakens” movie. This is a perfect example of how microinteractions can be utilized to draw attention to specific content or events. Tips for designing better microinteractions There are a few things you need to keep in mind when designing microinteractions: Fast response time Your microinteraction should provide feedback immediately after the activation of the trigger; both user and system initiated. If your microinteraction takes too long to manifest itself, users might not associate it with the initial action. This would make the microinteraction pointless and possibly confusing. Just imagine clicking on a button and nothing happening in the next five seconds. Would you continue waiting or just assume that the button isn’t working and leave? Be purposeful As designers, we should always look to avoid features or elements that have no purpose or meaning to the product or user experience. The same goes for microinteractions — each of them should add value to the product as opposed to just improving the aesthetics of the product. Don’t add more details or elements than required to communicate the message. Before designing a microinteraction, ask yourself these questions: What is the objective of this microinteraction? Will it add value to the user’s experience? Are there any unnecessary details or elements? Be consistent This is applicable to all aspects of your app, but it’s particularly important for microinteractions. You need to create a consistent style for all interactions across the product. This way, users will only have to learn them once and will then be able to start enjoying your product. In summary Microinteractions are a key part of your user experience. Think about how your users will interact and engage with your product, then design the appropriate interactions to guide them along the way. As designers, it’s important that we use well-designed microinteractions to bring our products to the next level by making them more palpable. In other words, such interactions serve as a bridge to make the digital experience more familiar and intuitive.

A few years ago, my parents decided to buy my grandfather a brand new car GPS system. At the time, this was the hottest piece of tech out there. At the touch of your fingertips, you could get the fastest route anywhere. No more printed directions or physical maps - the possibilities were endless. As we all sat around the couch in excitement watching him rip off the wrapping paper, our faces quickly turned to confusion. He gave it a good look and then said: “I’ll pass.” When we told him it could get him anywhere he wanted, his response was that he already knows how to get where he wants to go. When we followed up with it can get you there faster, his response was that he doesn’t like to drive fast. Our hearts sank a bit. What we thought would revolutionize his driving habits was quickly dismissed. There was a clear divide between his reality and ours, and technology only seemed to heighten this division. Adapting to new technology The theme of older generations struggling to adapt to technology is all too familiar to most of us. Whether it be the sheer rejection of technology as my grandfather did or the inability to figure out how a piece of technology works, the older generation has always slightly lagged behind; In a study conducted in the European Union, 87% of people over the age of 75 have never been online and nearly 77% of seniors would require assistance in order to learn how to navigate a smartphone or tablet. Can we blame them though? As Millennials and Gen Zers have had the fortune of growing up digitally native, Boomers and beyond had to adapt to an ever-evolving tech landscape. Simple digital affordances that we take for granted had to be learned through trial and error, and the translation from analog devices to digital technology was not always a smooth process. People are innately resistant to change. With the advancement of technology, this was especially true. With change comes uncertainty and giving up something you already trust. For many Boomers and beyond, it was not a mere accessibility issue that drove them away from quickly adopting tech, but fears and personally held values of how technology could impact society. The fault is also on us, younger designers, for making the transition to online highly daunting to newcomers. The digital divide Now, with technology evolving faster than ever before, this inertia that older generations have held to so tightly is driving a divide between them and the digitally-savvy younger demographics. While for digitally inclined generations, technology has changed the way we interact with one another, older demographics are not as eager to jump on the bandwagon. This dichotomy between old analog values and newer tech-influenced values has erupted into a battle between generations where sayings such as “Ok Boomers” and “Millennials are lazy” have arisen. It is not that either generation is better or worse than one another, but that technology has created different realities and standards between them. Since technology has revolutionized the way we interact with the world, it is easy to place blame on older generations for not being willing or able to adapt. However, the fault is also on us, younger designers, for making the transition to online highly daunting to newcomers. [Related: Designing for seniors] Valuing generation-inclusive design While designers keep building up new interaction patterns and devices, we have yet to slow down and reflect on how we can also build backward and create a lower entry barrier for newcomers. It may not seem as exciting to design backward, but without doing so, we lose out on infinite accessibility, inclusivity, and onboarding design considerations. We also lose out on money - trillions of dollars to be exact. Baby boomers hold 2.6 trillion dollars in buying power yet 33% of them don’t even own smartphones. That is a deficit of 850 billion dollars that designers could be taking advantage of if we created more welcoming applications for Boomers. Creating more inclusive products to adjust for older demographics should not be seen as a luxury, but as a serious business advantage that could help a company bring in millions of dollars. Beyond the financial advantages of designing for Boomers and beyond, it also has serious design implications surrounding creating friendlier, more intuitive, and accessible products. From a friendly-interface standpoint, our goal as designers is to ensure we build a great end-to-end experience. When certain users are unable to even begin that experience, we have created a hostile product. We as designers have an ethical obligation to create something that is welcoming and inclusive to a diverse range of users. Even if our product is catered toward a specific demographic, tertiary users must still be able to have access as well. From an intuitive design standpoint, another goal of designers is to create seamless and transparent interactions that reduce cognitive load. While we may think our personal design style and following emerging trends is the best way to build the next big product, not all trends necessarily cover the best use-cases for our users. Take a look at Neumorphism for example. While it is an extremely clean and elegant design style, it is also highly inaccessible, has low contrast, and would not scale well. Similarly, while many digital natives might understand what icons do, without supplemental text to guide older users, many of them can quickly become lost. We as designers have an ethical obligation to create something that is welcoming and inclusive to all. Even if our product is catered toward a specific demographic, tertiary users must still be able to have access as well. Bridging design affordances between generations If we do not figure out how to bridge design affordances between Boomers and younger demographics then we will continue to be divided and suppress an entire generation of the limitless possibilities technology has to offer. As designers, we need to compromise between our desire for future-facing interactions and inclusive design choices. While the solution to this division is not fully clear yet, there are simple design choices we can partake in to assist older generations in becoming more digitally aware while keeping a great user experience for younger ones. One of the ways we can create more generation-inclusive interfaces is to think about the transition from physical to digital products. Whether it be digital or analog, we as humans draw certain associations between physical objects and their meaning. For example, the folder structure on your computer mirrors the way we organize folders in the physical world. When designing more welcoming products, think about the physical tools and mental associations older generations make, and then translate them into your digital products. Principles such as skeuomorphism and object-oriented UX can help designers conceptualize better ways to make their products more tangible to new users. Let’s take Microsoft Word as an example. Microsoft Word uses a floppy disk icon to represent the save button as older generations can make easy mental associations to a real-world and familiar object. If you ask most children and Gen-Zers what that icon is, they most likely won’t know what a floppy disk is. However, because they grew up with the icon, they still understand what it does and can even employ shortcuts such as control S. Word has also created a more generation-inclusive interface by using multimodal forms of communication when a function may not exist in the physical world. For an icon such as “Create and Share PDF” utilizing both text and iconography in tandem gives a new user greater context and understanding. Another way we can build for all generations is to create multiple user models in our products. There shouldn’t be one streamline user flow, as your users may come from different backgrounds and skill levels. For example, in Mario Kart users who are performing the worst tend to receive the best power ups while people who are more experienced with the game are often negatively impacted by them. This makes the game more exciting for newcomers as they are given a chance to excel, and also keeps experienced users engaged as they must compete with greater challenges in order to win. Providing support and flexibility to keep all users adequately engaged is essential in building a more inclusive product. Personalization is also key to provide support to users of all ages. We should create a base model that is accessible to anyone and then allow more digitally savvy users to tailor their own shortcuts to fit their needs. Designers should take a more bottom-up approach and start by creating solutions for the demographic that would have the most difficulty navigating. From there we can then build more tailored and future-facing features that more digitally savvy users crave. It is about laying down a strong foundation that can support everyone, while also building a more personalized experience for specific types of users. The best design balances focus with inclusivity. Products may be catered to specific demographics, but should still remain accessible. For example, Facebook tailors to older users by using a more text-heavy interface while TikTok is primarily made for young adults by using short videos to communicate. While both interfaces have a primary demographic, they still follow standard interaction and design patterns that could be used by tertiary users. Just because your product is catered to a specific demographic, doesn’t mean you need to exclude. Conclusion Perhaps, if we had spent more time acclimating my grandfather to his GPS instead of springing a new and daunting product on him, he would have adopted it sooner. While it's hard to slow down when so many new innovations are being created, we need to be more deliberate in how we introduce products to our users. Boomers, we have failed you on this end, but we will work on it. As we move forward with creating the future of design, it's important we slow down and look back on unmet needs. It's time Boomers and beyond work with millenials and below to create more generation-inclusive products.

Every UX designer goes through a job interview process, in which the most common questions are ‘What is your approach as a designer?’ and ‘What methodologies do you use?’. And unfortunately, designers who are not working in big organizations, or those who only do freelance work, often find themselves facing various constraints that make it difficult to follow one specific approach. When working in a design team, it’s likely that your team works according to a certain methodology in order to conduct an effective UX design process. But if you are working as the only designer in a small company or doing freelance work, client deadlines and constantly changing user requirements are some of the things that take most of your time and energy. In such situations, how do you make sure that you have a proper approach and a design methodology to follow when working on any project? Before we get to the answer to this question, there are a few things that are important to understand: What is a UX design strategy? Whenever an interviewer asks a designer about an approach or strategy, they usually mean ‘how do you start a project, after you are given certain requirements?’. However, there is no ‘one’ answer to this question, as it depends upon the project, and the amount of work that has already been done on it. For example, if it’s a project you’re starting from scratch, you will always begin with understanding the requirements, and defining a user base. You need to draw lines to understand who your users are and what their requirements are from this product. But if the product already exists, you can always start by understanding the existing research and studying the documents that have been made by the previous designers. Here, we will cover UX design strategies for designers who don’t have a specific process yet, when working on new projects. Why should a designer have a design strategy? Building a design strategy is important because as a designer, having a singular process with which you approach all of your projects can help you form more fluid processes. There’s less of a chance of getting stuck at a particular stage if you have a defined strategy that covers all the grounds, from research, to competitor analysis and more. Many times, designers don’t conduct user research, and directly jump to conclusions. On the other hand, many designers spend too much time on one thing, and fail to produce a design before the deadline. Both these approaches are wrong, and can and can negatively impact your design projects. You need to have a balance, and you need to know where to stop. That is where a design strategy comes into the picture. As an independent designer, you should also work as a product manager for yourself, and schedule a proper timeline including all the steps that you are going to take in your UX design process. A design strategy is like every designer’s individual journal. It’s your personal approach, and you can have as many steps in it as suits you. But you should also know which steps are of utmost importance, and cannot be skipped, and which steps can be ignored in cases where you have limited time. To help you better organise your process, here are the most important steps to include in your design strategy: Step 1: Understanding user requirements Every product has a user base and those users have a requirement from the product that you are designing. That is what we call ‘Value Proposition’. A value proposition for any product will help you analyse three things about that product: What is the product? Who are the users of the product? How will the product be used? The answers to these questions will become the basis of your research and act as a starting point for your design approach. Once you establish a value proposition, you should move on to: Step 2: Performing a competitive analysis There will surely be many other products in the market that are already solving the problems that your product aims to solve. Even if your product is the first one to target a user base or solve a unique problem, you will still have competitors who are close to doing what your product focuses on. A competitive analysis is not only important to see how you can solve major user problems, but it is also necessary to study the mistakes they are making, so that you can avoid them! Knowing your competition gets you deep insights about product design, user requirements, solving problems and addressing issues that they fail to address in their existing product. This helps you get an edge in the market and stay ahead of the game. Step 3: Searching for a suitable user base Then comes the part where most of the designers get confused, because start-ups usually don’t have the time or the budget for proper user research, and freelancers don’t have the means with which to conduct user research. Mostly, designers only take cues from the already available information. But in reality, you don’t need much infrastructure for user research, if you know how to find your users! The main challenge in user research is how to find your users, and you can get the answer on your smartphone. If your user base is generation-Z, you can find them using hip applications like TikTok or Instagram. If your user base is millennials, they can be found on both Facebook and Instagram alike. Once you know where to find your users, you can promote a small survey or approach some people for a friendly chat. Now, for generation-Z people (all those born after 1997), forwarding them a Google Form can be boring, and it’s likely you won’t get many responses. But you can try alternative methods, such as conducting a survey through Instagram stories. You can send them your Instagram handle, and ask them to participate in a poll that you will put up as a story, and also ask their friends to do the same. An Instagram poll is not only an interesting way to get their responses, but it also gives you numbers and insights quickly. This is just one unconventional example of how you can reach out to your target audience, but there are many more non-traditional ways to reach out to them. Hopefully, there will be many people who’ll want to contribute towards a project for a cause, but as a gesture of goodwill, it’s always nice to show you appreciate their time and help. You can either send them a small gift card or a simple thank you note. Anything that makes them feel like they contributed towards something, and that their opinions made a difference! Step 4: Doing user research Conducting user research is a lengthy process, as you need to find out which methodology fits your product requirements. Do you want to conduct a face-to-face interview, or do you want people to fill out a quick survey? That depends upon more than one factor. User research can be quantitative or qualitative depending on what kind of insights you are looking for. Are you willing to dive deep into the emotional mindset of your users? If so, you should go for qualitative research. Or are you looking to see how many people are using an existing product and facing problems with it? In this case, quantitative research can come to your rescue. Once you have your product requirements defined (this happens when creating a value proposition), you will also get clarity on the kind of research you want to do. And once you have clarity on that, you can easily find the most suitable methodology that will give you desired results. Step 5: Creating a product roadmap Creating a product roadmap is the next step, once you are done with the user research and have some information that can help you kick-off. A product roadmap is a basic timeline that includes tasks and deadlines. It is important to have a roadmap even if you are a freelancer, as it will help you avoid procrastination and improve your productivity, so you don’t run the risk of delaying the project. A roadmap helps you track your progress and see how you are doing. Step 6: Building the user interface Creating UI and prototypes, taking meetings, discussing issues with the team or the client, are things that you can do once your roadmap is ready. Working on the front-end design and a minimal viable product (MVP) is necessary for the second round of user research. But before you jump to the screens, it is equally important that you create a user journey map. As different users use the same product differently, it is important to design and cover all the possible journeys that a user can take to achieve one goal. They might press the same buttons, but in a different order. They might make the same choices, but follow a different pattern. As a designer, it’s your task to come up with all those different flows and journeys, and analyse whether any of them are too long or convoluted, or whether there are any dead-ends in the product. Once you’ve defined your user journey map, you can start with the screens! Step 7: Conducting a heuristic evaluation To make sure no mistakes go unnoticed, make space for a heuristic evaluation in your project timeline. It will help you critically evaluate your designs, look for common mistakes and correct them before the project moves into production. A heuristic evaluation also helps you to see if you covered major usability aspects, and if your product is user-friendly or not. Basically, it helps you take a break from designing, rewind and go back to the product requirements that you started with. At some point, it becomes important to see if you are still in-line with those requirements, or if you went off-track. Step 8: Doing user research, round-two! This time, the user research has to be more ‘to-the-point’ and direct, because now you have an MVP to show your users, and ask for their feedback. At this stage, the aim of your user research is to get insights about whether your product is solving their problem or not, and whether they like it or not. You can conduct personal interviews to test your product, and see if the users understand the functionality, or if they need some help using it. Based upon the insights of your research at this phase, you can always modify your product and make changes to make it more user-friendly. Step 9: Making small changes and final release! As you complete the changes suggested by the users in the second phase of user research, you should now move on to communicating with the developers about the project, and helping the development team pick up from there. As a designer, your job doesn’t end here. Step 10: Taking that extra step to be a great designer! Many designers think that submitting final screens and source files is where your responsibility ends. Well, technically you have done everything that was asked of you, but practically, there is a lot that has to be done even now. Designing screens was your job, but giving life to those screens is a developer’s job, and many times due to lack of proper communication, the screens that are developed look nothing like the designs in the source file. Communicating with the client and the developers, even after the designs are complete, is a best practice that you can develop, to make sure that everything is pixel-perfect. It reflects your professionalism and dedication towards your craft. You have put so much thought and work into those screens, would you now let a developer do injustice to them? Your designs are your craft, and any live website that you have designed can really add a lot of potential to your portfolio. It can give you more work in the future and make your profile stand out in the pool of designers. Hence, it is important to make sure that you keep in touch with the client, even after your job is done. This will help you see the progress and point out any corrections if necessary. It might take hardly an hour in a week to sync and correct them, but that’s what makes all those great designers different from the mediocre ones. Designing screens is a skill that many designers hone and take pride in, but it takes an extra step to make sure that your designs and screens are perfectly translated pixel by pixel into a developed project.

A badly designed tap target such as a button, link, or form field can cause users to become lost, confused, and frustrated. If users aren’t able to find the tap target, aren’t sure what it does, aren’t able to click it, or if it doesn’t respond to the user’s interaction, then they will likely start to think that the website or app is broken or doesn’t cater to their needs. So how do we master the art of designing tap targets, and in turn improve the overall user experience of our app or website? Let’s take a look. 1. Write clear tap target copy Backgrounds, shadows, rounded corners, and other visual attributes are used to draw attention to tap targets, but it’s important to remember that it’s the tap target copy that we’re bringing attention to. A tap target that successfully draws attention means nothing if users aren’t quite sure what it does. Besides, ‘ordinary’ text links don’t display many of these visual attributes, so writing tap target copy that’s actionable, consistent, and easy to understand is one of the most (if not the most) important thing to consider when designing them. When writing tap target copy (or any kind of UI copy, in fact), a ‘less-is-more’ approach is the most effective. This allows us to communicate directly and clearly, which lowers the cognitive load for users. Let’s take a look at a few examples. Be crystal clear While there’s totally nothing wrong with creating personality within an app or website design, humor is better suited in combination with marketing gimmicks, product descriptions, and so on, and not so much with microcopy. The opportunity to sound ‘different’ is rarely worth sacrificing the opportunity to be crystal clear, particularly when it comes to tap targets. Bad example: “Grab a bite” Good example: “Browse cafés” Motivate users to take action In order for users to feel motivated to interact with a tap target, the wording should ideally contain a verb (the action) and a noun (the subject of the action). This will make the tap target sound actionable and urge users to interact with it. Bad example (verb only): “Browse” (browse what?) Bad example (noun only): “Cafés” (do what with cafés?) Good example (verb + noun): “Browse cafés” (crystal clear) Optimize word count Generally, shorter UI copy is better because that’s fewer words that users have to try to interpret, and as a result that’s less frustration and cognitive load that users are subjected to. Bad example: “Browse all cafés” Good example: “Browse cafés” (“all” isn’t needed) However, the word “all” in the ‘bad’ example above isn’t necessarily bad so long as there are similar links that hint towards a specific subset of cafés (where the word “all” is the differentiator between those links). If two tap targets do (or link to) something different, then this should be obvious from the UI copy alone, so beware of shortening UI copy so much that it’s hard to distinguish from tap targets of a different nature. Try reading UI copy over and over until it ‘feels right,’ and when in doubt try asking other people too. So in a scenario where there are multiple but similar tap targets, the following UI copy would be more distinguishable: “Browse cafés in London” “Browse cafés in New York” “Browse all cafés” Maintain consistency As mentioned above, it’s fair to assume that two differently-worded tap targets don’t do (or link to) the same thing, which is why if they do, then they should use the exact same wording. Let’s assume that a tap target links to the login page of your product and its UI copy reads “Log in” — the following two examples would then be inconsistent with this UI copy and therefore confusing to users: “Log in” (original) “Login” (inconsistent) “Sign in” (inconsistent) Using “Log in” consistently results in a better user experience. Placeholders vs. labels (and why it matters) Placeholders and labels are sometimes misused and seen as interchangeable, but this is incorrect. In fact, they have two very specific uses and their default behaviours reflect this. Placeholders are used to display valid examples of acceptable input, which is why placeholder copy automatically disappears as users begin to replace it with their own input. Labels, on the other hand, describe the nature of the form field, so a typical label + placeholder combination should read something like this: Label: “Full name” Placeholder: “Avery Smith” Form fields that use placeholders in place of labels run the risk of users forgetting what they were supposed to type into the field. A form field should always utilize both, correctly. 2. Increase clickability by optimizing size and spacing While the WCAG (Web Content Accessibility Guidelines) recommends that targets be at least 44 by 44px in size, Google recommends 48 by 48px. However, there’s no reason why we can’t go even larger than this, since larger targets are easier to tap and click. Fitts’ Law, written in 1954, explains that the amount of time required for a user to interact with a target depends on its size. It’s worth noting that labels are also tap targets, so web developers will usually ‘wrap’ form fields inside the label to increase the target size, even if this isn’t visually obvious. Fitts’s Law also states that tap targets should have enough spacing to prevent accidental mis-taps. Google’s Lighthouse audit recommends at least 8px between different tap targets. Lastly, contextually relevant tap targets should be within thumb-range on mobile devices. While this isn’t feasible for every scenario (because of limited screen real estate), taking a mobile-first approach to design allows us to prioritize the most important tap targets at least. 3. Increase findability with better visual affordance Affordances in UI design are visual attributes that indicate what users are able to do with an object. By utilizing well-known design conventions we can include these visual affordances and in turn help users recognize when an object is interactive. Affordances for tap targets include shadows, rounded corners, and in the case of ordinary text links, underlines. Icons are also important, and can sometimes even replace UI copy entirely. For example, an [x] icon might imply that an object can be removed or dismissed, and a [+] icon might imply that users can contribute or seek additional information. Following these design conventions will improve usability significantly. 4. Establish visual hierarchy Clear visual hierarchy indicates to users the level of importance of each tap target. As a result, this diverts their attention to the ‘right’ tap target (i.e. the one that will help them achieve their objective). On top of following all usability best practices for tap targets, we also should try to create a range of different tap target styles, some of which don’t demand as much attention. Less-demanding styles include: Ghost buttons Smaller buttons Lower contrast buttons Buttons reduced to links Remember: when everything stands out, nothing stands out. That’s why there must be a clear visual hierarchy that we can leverage to steer the user’s attention in the right direction when needed. Maintaining a design system is an excellent way of ensuring correct usage of visual hierarchy. This is due to the fact that designs systems help to maintain multiple variations of multiple design components while reducing the number of unnecessary variations. Winding up with too many unnecessary variations is known as ‘design debt’ and this level of visual inconsistency is definitely something that we want to avoid. 5. Don’t forget about hover states States are used to communicate the outcome of a user’s interaction, and hover states are arguably the most common. On desktop, web browsers indicate that a tap target has been hovered over by automatically switching the cursor. However, on mobile devices, hover states don’t work quite the same way due to the lack of a cursor. So does this mean that we shouldn’t care about hover states? No, we should still care about hover states, both on mobile and on desktop. A little extra affordance when it comes to interacting with tap targets never hurts, although it’s not worth the effort of designing different hover states for each type of tap target. A quick but effective one-size-fits-all solution is to increase the brightness upon hover — this microinteraction works well regardless of the color of your button or text. On mobile, the equivalent of hover states are ‘active’ states, indicating that a button is currently in use. Therefore, a change in brightness should be noticeable even if the tap target is mostly hidden underneath the thumb (which is another terrific reason to make tap targets larger, by the way). 6. Don’t forget about focus states, either Focus states apply to all mobile and desktop tap targets navigated to via a keyboard or screen reader. Without a mouse cursor indicating where users are on the screen in realtime, focus states indicate which target is currently selected as users ‘tab’ through them. Focus states also become apparent when the document switches focus dynamically, or when an interactive element that expects user input (e.g. a form field) is selected. By default, devices and web browsers offer their own focus styles, which are instantly recognizable to those that navigate using keyboards and screen readers. While you may choose to design focus states yourself - taking into account web accessibility guidelines - a good practice is to leave the default version enabled, instead letting devices and browsers implement their own styles. Conclusion Sticking to design conventions is important. Why are links underlined? Who knows, but we’ve come to understand that underlined links are clickable because that’s been the convention for as long as webpages have existed. Other design conventions, such as the use of button shadows, make immediate sense. After all, buttons are three-dimensional in real life and three-dimensional objects have shadows. If we stick to the design conventions talked about in this article, we can ensure that tap targets — which are arguably one of the most important aspects of any user interface — are noticeable, understandable, actionable, tappable, and clickable.

UX writing is everywhere. We’re constantly interacting with it, whether we realize it or not. It’s in buttons, pop-ups, alerts, notifications, and default copy in text fields. It’s in the “What’s happening?” prompt in Twitter and the “What’s on your mind?” status update on Facebook. It’s what drives the user to perform actions. It’s what makes a product feel alive. What is UX writing and why is it important? UX writing lives in a place between marketing and product and can often fall to either department, depending on the company. Many companies don’t have dedicated UX writers. Whoever has a knack for it, the UX designer writing the feature spec, or the UI designer drawing up the mockups, might end up being the person who handles it. It’s strange how overlooked it is, given how big an impact it has. In almost any platform, whether it’s an app, a website, or an operating system, UX copy will be seen more than marketing copy, certainly by existing users. A brand’s tone is set and maintained meticulously by the marketing department, but, in many instances, writing a tooltip or a prompt gets picked up by anyone who’s on hand. If the UX writing is inconsistent with the image a brand sets in its ads and marketing materials, users might feel like the product is underdeveloped, unfriendly, or neglected. Great interactions with a product happen when the user feels that they are being spoken to at eye level. It’s important that UX writing is done right. It might seem like a small detail, but imagine how many variations of the call-to-action for a status update Facebook tested before settling on the current one. Just as changing a color or an image can have a significant impact on conversion rates, the exact words you use can determine how likely users are to follow through on an action you want them to take. How the principles of UX design apply to UX writing Good UX writing is like good UX design. It needs to be executed first and foremost with the user in mind. You may have a metric you’re trying to improve, but if you aren’t considering what the experience is like for your users, you may create an experience that is off-putting. When writing from your user’s perspective, think about what they care about and why they would want to perform that action. Always frame actions in the way the user will benefit from them most. Going back to Twitter again–you can imagine the difference in conversions between “Enter your tweet” (or something to that effect) and “What’s happening?” The former is uninviting and almost robotic, while the latter is personal, colloquial, and an interesting call-to-action. Putting yourself in your user’s shoes is more than just what sounds friendly, though. Just like user personas help identify how to build experiences for the user, they can help you understand how to speak to them as well. A messenger app targeted at 15-25-year-olds isn’t going to use the same language as a healthcare website design. Ideally, when drafting brand guidelines, the tone and language the company uses should be included. Simple adjectives like helpful, calm, and happy can help zero in on what your brand should sound like whenever it addresses your users, especially on your platform. If your workflow dictates that copy is added after design, you should make sure you’re not using placeholder text while designing, because accidentally forgetting to replace it with the real thing can result in the placeholder copy getting implemented. Developers aren’t necessarily looking closely at what the copy is when they’re coding, so you should never let something that’s not supposed to be implemented get to them. At the very least, there should be an acceptable, minimum level of quality that copy should be written with as the feature is being designed, even if you’re planning on coming back later with a writer. Why you should add UX copy as you design That being said, it’s worth considering writing UX copy as you design features, whether you’re writing it yourself or working alongside a writer. If, instead of waiting until the end to inject it, we make it a part of the process, UX copy doesn’t have to just inform the user. It can inform the design. Designing a user experience is ultimately about communicating with users: highlighting important parts of the platform, defining a hierarchy that makes it easy to parse, and creating a flow that’s intuitive. If we design with UX copy, we’re giving ourselves another chance to see things from our users’ perspectives during critical phases of the design process. Where things can go wrong if you neglect UX writing If you’re designing a new feature and adding copy as you go, you may find yourself having a hard time finding tooltip, button, or pop-up copy that’s clear. If you can’t communicate the feature to the user with text, your designs might not be communicating it visually, either. It could also highlight the disparity between the feature and the brand tone. For example, if a messaging platform is built to be used between close friends, it may not make sense to encourage the user to share their friend code on Twitter. It can be easy to overlook user needs or brand tone when company goals are at odds with them–and that’s not to say that they can’t be reconciled or balanced–but it’s important to keep humane design principles in mind as you design. Working on the UX copy as you design can also help make writing the UX copy easier. For example, spacing can be an issue when designing without a writer. Assuming you can say everything you want to communicate on one line during the design phase can make it hard to write the copy later. Sometimes text is longer than you might anticipate, and having to go back to the design phase late in the process will burn valuable time when it should be ready to hand off to developers. Knowing you need more space for the copy while you’re designing allows you to make changes before you’ve cemented the design in order for the copy to be optimally displayed. If, instead of waiting until the end to inject it, we make it a part of the process, UX copy doesn’t have to just inform the user. It can inform the design. A/B-testing copy is an important part of UX writing and a good way of boosting metrics, but it should always be executed by a UX writer in cooperation with a growth team, not just by the growth team alone. It’s easy to justify adding a variation to a copy test that you wouldn’t otherwise put in the platform. Using vague or misleading terms, or even veering into clickbait territory altogether, can be excused by saying the results will show whether it’s a successful variant or not. This can often be a debate between growth teams and product or marketing departments. Just because something raises metrics doesn’t mean it’s always worth doing. Adding clickbait text to a platform will likely improve conversions for an action you want a user to take, but it’ll also make your product feel cheap and erode user trust over time. Keeping a UX writer involved in this process will ensure that your users are being considered at every step, and that company goals aren’t being achieved at the expense of the people who love your product. What makes for good UX writing? 1. Good UX writing manages user expectations Pain points for users are often created when the product they’re using isn’t communicating what’s happening. Everyone at one point or another has complained about the inconsistent “time left” on loading bars. When the user doesn’t know what to expect from the product, they start to lose interest in it. Even for short wait times, for example a 10-second loading spinner on an app, it’s important to convey what’s going on to the user as accurately as possible. Showing the text “loading…” with no more information is like telling your user the process could take forever. After a few seconds, they won’t know what to expect and they will feel disconnected from your product. Giving them more information about the length of time or why it’s taking so long can go a long way to keeping them engaged. For instance, showing a spinner with the text “Loading your contacts. This can take up to 10 seconds” lets them know exactly what the process is and the amount of time it will take. Now your user feels more involved and connected to your product because you’ve shown you are transparent and that you care about their time. Managing user expectations can also be important when they are the ones taking actions. We’ve all experienced accidentally performing an action because there was no confirmation pop-up or the alert was unclear. Taking a negative action like deleting should always have two options: Cancel and Delete. Sometimes yes or no questions can be phrased in confusing ways. To avoid this and ensure a clear decision, include the action they are taking in the button copy (and, when applicable, mark it in red or other warning colors). 2. Good UX writing is succinct A large percentage of users (especially younger demographics) don’t read most of the text that’s presented to them, and not just in the terms of service. Users have become accustomed to being able to figure out how a product functions without their hands being held, so anything that isn’t critical is skimmed at best. Almost anything you want to tell the user should be conveyed in a sentence or two if you want to hold their attention. Even users who do read text displayed to them can only retain so much information at a time. Use your copy sparingly, especially for non-essential communication. The more times you bring up text via a pop-up, tooltip, etc, the more likely the user is to stop paying attention. Using the shortest possible version of your copy will make sure more users actually pay attention to what you need to tell them. While it can be frustrating to limit your interactions with users, it can also be an opportunity to define what’s most important to communicate and figure out how to convey it in the clearest and simplest way possible. 3. Good UX writing is actionable Keeping your copy in an active voice focuses the user on the task at hand. Introducing features or new concepts should be done when it’s relevant for the user and when they can interact with them. Instead of having an overlay with five arrows pointing to every button on the page, it’s best if you highlight what makes the most sense for the user to understand in context and let them follow up on it. Starting sentences with verbs also helps get the user moving toward that action. A good example is dead ends. If the user is ever at a point where there’s nothing to do, barring action on their part–like an empty feed–that’s when it’s critical to let them know how they can change that. For example, the first time a user uses a platform, there may be an empty state explaining that they can: “Follow friends to see their posts here.” Pair that with a “Sync Contacts” button, and the user knows why they’re stuck and how they can change that. Even if there’s another part of the platform that already has that same functionality, linking to it with this contextual UX copy will help let users know what to do and increase conversions on an action that’s beneficial both to you and them. 4. Good UX writing feels like a conversation with your product Your product’s tone should match its users and speak to them. Great interactions with a product happen when the user feels that they are being spoken to at eye level. An easy win when looking to adjust your brand language is to steer away from any technical terms that aren’t critical for the user to know. For example, if a user clicks on an expired link, seeing a large system “ERROR 400” text gives the impression that you don’t care about users in this situation and that your product is rigid and inflexible. If instead the user sees the text “Hmm, that link seems to be broken. We’ll get that checked out as soon as possible,” they will feel like you care about them and their experience. Finding your brand’s tone and injecting it into your product is the difference between having a conversation and running into a brick wall. So why focus on UX writing? There are a lot of important team members that companies need to run, and, at first glance, UX writers might not seem like a high priority. But hiring a UX writer can help cut down design time, facilitate better communication between departments and with users, and create a friendlier, easier-to-use product. Investing in your product and your users will ultimately pay off in adoption rate and retention. Users are more likely to use a product that feels more intuitive and speaks to them in a language they understand and appreciate.

Designers are taught to fill up a blank canvas. Our entire skillset revolves around the ensemble of visual elements, components, and patterns to shape the user’s experience of a product. We are taught to constantly look for opportunities to create meaningful experiences throughout the user journey and add more value to the business. One such opportunity that is often disregarded and ignored is the “empty state”, which refers to the components or screens that have yet to be filled with information and are thus left empty. The lack of information would add to the user’s cognitive load as they would need to spend extra time and effort figuring out their next step. What is an empty state? Empty states are commonly known as first user states, 404s, error states, or pre-filled states. They are screens in your interface that have yet to be filled with information or have nothing to display. For example: An empty shopping cart A dashboard that lacks data An error screen from trying to access premium-only feature A failed search with no results found A lack of internet connection These states might only form a small fraction of the user’s journey yet they are as important as any other screens within your product. They are often the bridge that leads the user down a certain path by providing information or instructions. In each of the above situations, the user needs to know what happened, why it happened, and how they can move forward. A well-designed empty state should answer those questions; just having a nice illustration and a vague header isn’t enough. Properly designed and written, empty states offer a bunch of opportunities to create meaningful conversations with your users and provide them with an engaging user experience. Why should I use empty states? New users need to go through an acquaintance process where they slowly become familiar with the functionality and features of a product. Depending on the nature of your product, empty states could be a critical factor in ensuring that the user sticks around long enough and takes enough actions to fully experience its benefits. For example, InVision utilizes empty states to indicate to users that they need to create and upload their designs before being able to create their own prototype using the platform. We as designers always claim to be user-centric, yet by ignoring the empty states, we are basically giving users the cold-shoulder. This would result in lower engagement rates, irritated users, and increased churn due to a bad impression. This is especially true for data-based applications as it is crucial to get the users to move forward in order to not lose them. This can be done through extensive ux user research and A/B testing to better understand the user’s goals and priorities, which could then be translated into the right call-to-action. As designers, we should be able to predict the user’s actions and offer engaging ways to lead the user while making every step meaningful. For example, Asana’s on-boarding process leads the users to complete certain tasks which helps them kick start their journey. By effectively using empty states, Asana focuses on the user’s core objective by asking them to create their first eight tasks, as opposed to urging them to invite more people to join the project or set up their profile. Designers should never assume that most users will know how to use the product, just because there are similar products out in the market. How to better design each type of empty state Every product has to have some sort of user-originated empty space. This can be due to a lack of content for a specific state, or a result of task completion. Whatever the case, it provides an opportunity for the designer to increase product satisfaction and lower abandonment rates. Here are four core principles of a good empty state design: Provide guidance: An empty state is a good opportunity to encourage users to interact with your product by guiding them instead of letting them roam blindly around your interface. Inject brand personality: Empty states are one of the few places where you could be playful, fun, serious, or quirky, creating a sense of personal touch and increased brand equity. Be informative: It’s important to inform your users why they are seeing an empty state and how they could move forward. Let them know that there’s nothing strange about the missing information and explain when they can expect to see it populated. Prompt action: Whatever the purpose of your empty state, you should always give your user a next step. A call-to-action button reduces the user’s cognitive load by providing them a quick option for them to move forward. Now let’s dive deeper into the different types of empty states and how to better design each one of them to improve the user experience. 1. User onboarding As new users explore your product for the first time, they’re also learning how to use it. This can be challenging when there is nothing to show, especially for SaaS products such as Evernote, Slack, and Grammarly. These products require the user to complete certain actions before being able to fully explore its features, making it hard to engage the user. This is why designing a good user onboarding process is a critical factor for engaging and retaining users. The key to reducing the churn rate is to get the users hooked within the first 3 to 7 days of using your product, which would be hard if all they saw were blank screens. A good way to overcome this is by providing starter or demo content to help the user experience the product features without any additional steps. Here’s an example of how Grammarly uses starter content: Grammarly demo document You learn how to use their features by diving in and using them, with the help of the demo document. When you first sign up for Grammarly, it comes with a demo document that’s used to educate you on its main features and capabilities. The demo document is a great example of “learn by doing” as it gives the user a hands-on experience of using the product. This is way better than showing them a lengthy walkthrough of each feature and requiring them to upload their own document before being able to try out the features; greatly reducing the barrier of use. They also did a good job of providing guidance through the use of pulsing hotspots to point out notable features. The hotspots are subtle enough to not obscure the interface, yet still use the law of focal point to draw the user’s attention. The hotspots are also arranged to sequentially guide the user from one feature to another in a logical order. Educational content Demo content might not be applicable or even possible depending on the nature of your product. The next best thing is to provide some form of educational content to help the user better understand the product and its features. It can be a tutorial video on how to use the product or illustrations to show its benefits. It’s important that users can remove or hide this content once they get acquainted with it, otherwise it might be annoying. Below are some forms of educational content that you could use: Welcome message Product tours Checklists Hotspots Action-drive tooltips 2. Cleared data Depending on the nature of your product, your users might be able to clear their data; or rather that might be their end goal. This can be in the form of a task, reminder, or email list where they strive to clear all remaining items. In such cases, an empty state might not actually be a bad thing, but an achievement instead. You can use this opportunity to add emotions and personality to your design for a more engaging and personalized experience. Let the user know that their actions led to this empty state of accomplishment and support them in continuing their good work. A nicely placed encouragement can boost the user’s confidence tremendously, motivating them to continue interacting with your product. Asana does a good job of injecting some personality into their empty states and congratulating the user for being up-to-date on their work. They also didn’t forget to be informative by telling the user that they can always check back later for new updates. 3. Error messages Nobody likes error messages, but they are bound to happen sooner or later due to various reasons; technical issues, connectivity problems, or user errors. Not every outcome can be predicted and not every result calls for a congratulatory response. If an error occurs, the least you could do is to reassure your users that it isn’t their fault, and give them clear steps to a solution. A minimalist approach might still leave the user feeling frustrated despite being armed with the knowledge of the error and a solution. A little humor can go a long way in helping the user feel better about the situation. The design and microcopy on these empty states can add a bit of personality and dilute the potential frustration. Mailchimp does a great job at this by informing the user that they’re a bit off track in a witty manner, accompanied by a funny illustration and offering a way back to the main page. This is a good example of how you can turn an error into a positive user experience. 4. No results Search is so ingrained into the user’s expectations that it’s pretty much a must for any data-rich product. Yet, there is always the possibility where the user searched for something that is unavailable, resulting in a no results empty state. It could also occur when filtering for a certain metric that has no items or information. A well-designed no results empty state should include the following elements: Give helpful suggestions A good start would be to give some clear instructions or suggestions on what the user might want to do next. Some common suggestion are: Check the spelling Search for simpler terms Search for something less specific Check the filtering options It’s important to be clear and use a friendly tone. The microcopy shouldn’t blame the user or make them feel dumb, but instead encourage them to redefine and continue their search. An empty search result page can be a point of major frustration, but with the infusion of UX writing to design teams, we’re seeing better and more empathic messages. Offer alternative results There are times when the issue isn’t with the search but with our content. This happens when we don’t exactly have what the user wanted or searched for. As opposed to just giving up and allowing the user to leave with a negative experience, we should include suggestions of other popular products, categories, or search terms. This would increase the odds of them staying and continuing to engage with our product. At the very least we might catch their attention, as this might lead them to discover something that they wouldn’t have looked for otherwise. Identify spelling mistakes If possible, you might want to add automatic spell checkers to your no result pages. This can be a big ask for the development team but it does wonders for the user’s experience. If there’s a chance that the user misspelt the search term, you could offer customized suggestions to help them save time and effort by quickly directing them to their intended search term results. Provide offline help If you want to go the extra mile, you could provide an email address or telephone number to allow the user to contact you directly. This will allow you to potentially find a way to help them, or at least the discussion will highlight the gaps in your product. Even though the contact information is already somewhere (normally buried away in the footer), the user might not actively seek it out. The no results page is an ideal place to surface it in a prominent and meaningful way, if appropriate. In summary Empty states are an important element of any product. They are usually seen as a solution for user on-boarding or when there’s no information to be shown. This solution uses visual cues and on-point microcopy to guide the user to accomplish their intended task instead of leaving them hanging and risking them abandoning the product. Your empty state should give a clear and distinct answer to the question, “Why is the user seeing this screen and what should they do moving forward?” Whenever the user stumbles across an empty statue due to first use, error, or lack of data, the design should help to guide them along to the next step and leave no room for confusion. Empty states should be a pit stop and not the finish line.

A quick Google jobs search will tell you this: UX writers are in demand. UX writing might be one of the least talked about – and hottest – web design skills on the market right now. And while UX writing has a lot to do with an overall website or app design, it’s a very different job. It calls for different competencies and requires you to use a separate part of your brain. Without good UX writing, your design projects will be flat, lack voice and personality, and will provide a subpar experience for users. This is the time to add UX writing to your resume, or dedicated UX writers to your team. UX writing in a nutshell User experience writing isn’t the same as general copywriting. It’s a hybrid style of writing that takes some of the best of copywriting and incorporates it with the design process, with a focus on end users. Good UX writing guides visitors through a website interface in an intuitive way. The writing is like breadcrumbs that lead users to certain content or actions, without the user having to stop and think about what they are doing or how to complete the journey. The more complex a project, the more vital solid UX writing becomes. Then there’s another layer. UX writing has to be in the right voice and tone to match the personality of the website or brand itself. A UX writer could be thought of as a product designer because they are part of the full design process and impact every part of website or app creation. UX writers might do anything from crafting microcopy to clever error messages to notifications or cues to lead users through the design. And their job doesn’t start after the website is designed. UX writing, outlining, and conceptualizing is as much a part of early-stage design as wireframing. What makes UX writers so valuable is that they can tell stories in a relatable context, that website visitors would enjoy and want to be a part of. They have a knack for turning complex information or instructions into something simple, creative, and engaging. Strong UX writing is the key to finishing a project with a consistent, and highly usable, design. Top skills for UX writers UX writers come from plenty of backgrounds – some are past copywriters, while others have design backgrounds. The commonality is a love for superior user experiences. The skills UX writers possess include: A design mindset with an understanding of how visuals and text come together to create context. Strong writing capacity with broad vocabulary and ability to change and adjust voice by project. Active listening and research methodology to determine actual wants and needs of users. Networking and relationship-building to marry design and user experience. Desire to keep evolving and learning since this field is fairly new and continuing to change. Ability to work on a collaborative team, manage deadlines, and show flexibility when it comes to editing and revisions. What makes UX writers so valuable is that they can tell stories in a relatable context, that website visitors would enjoy and want to be a part of. 10 UX writing guidelines We’re going to let you in on a little insider secret: There are a few principles that every UX writer knows (and follows) to create experiences that demand interaction and engagement. Add these ideas to your arsenal of tools to help grow your UX writing skill set: 1. Avoid long text blocks. Users don’t read; they scan. Brevity is key. 2. Junk the jargon. You never know who will visit your website. Make it equally understandable for all. 3. Write in active voice. Make users part of the action. 4. Use numerals when possible. Why write out one-hundred when 100 is much more scannable? 5. Dangle carrots that encourage clicking. Provide just enough detail that is necessary to perform an action. 6. Avoid dark patterns with language that are confusing or even misleading, such as use of double negatives or language that makes it hard to opt-out. 7. Start text blocks with the most important information, such as what’s the next step for the user to take in the user journey. Phrasing such as “Click for more” is easier to comprehend than “For more information, click the link.” 8. Combine text elements with visual pieces, infographics, and images. Good writing is all about context. 9. Avoid acronyms. You don’t want people to have to guess a meaning, assume an incorrect interpretation, or leave your interface because they have to look something up. 10. Create consistency. The same words, phrasing, instructions, and language should travel throughout a project. Ditch the thesaurus; synonyms can lead to confusion. UX writing and content creation One of the things that makes a UX writer a hot commodity is that much of their work doesn’t get any glory … and they are totally ok with it. UX writers craft the language behind onboarding screens and messages, legal messages and privacy policies, and even checkout instructions. And they have to do it all while adhering to their organization or brand style and guidelines. Here’s a basic list of content that the average UX writer will provide for a project: User interface text for screens or voice Marketing and support copy in the design Interface microcopy, such as button text Instructions and error messages Copy for pop-ups or chat screens Tooltips Internal or backend metadata Descriptions for settings or product features Think of the variance between these elements. Now think of a website you love, and how all these tiny details come together to create an amazing experience. That’s in part to a solid UX writer. Anatomy of great UX writing So, what exactly does good UX writing look – and read – like? Google’s Material Design documentation and the Spotify music player provide two different types of case studies. Material Design Documentation Google has invested plenty of time and expertise into the collection of information and guide to using Material Design on the web. It’s a resource that most designers are pretty comfortable with. The reason you are so comfortable with it – from scanning for certain specifications to perusing examples – is, partly, thanks to its stellar UX writing. Starting with the homepage and flowing to the smallest details, this massive resource has the right voice, reads in an instructional and active tone, and you never have to pause and think about the writing in order to understand the content. On the homepage, for example, every block of text is limited to a header and single sentence of description. That’s just enough detail to help you find what you are looking for and keep moving. The same concept also extends to the inner pages, such as Icons, where there’s more navigational text and microcopy. The pages include a sidebar outlining the information, related content links, and tiny descriptions below each icon. The text is written and designed for varying levels of hierarchy – headers, main copy, and instructional extras – and actionable text. Finally, note the copy inside of the search bar, “Filter by name.” This simple instruction is designed specifically for this page. The Components section is one of the most complicated in terms of content in the documentation, and perfectly unifies explanatory text, visual elements, interactive features and infographics. Combined, these various assets help designers understand Material Design conventions. Some of the best UX writing for the projects might be the Dos and Don’ts, which can also be seen in the Components section. Each example includes a visual element with a description of why you should or should not design it this way, such as “Cards don’t flip over to reveal information.” This seamless visual-copy connection shows that the writer and designer worked in concert to ensure that this information was concise, accurate, and understandable. UX writing works here because: It is concise, friendly, and easy to understand Thumbnails and visuals match the copy It uses an informational and authoritative voice A massive amount of information is displayed in a way that feels manageable Navigation is clear and accessible at all times Spotify Spotify’s music player – desktop and app versions – use UX writing to onboard users, provide information about music and content, and guide their musical user journey. Every bit of copy is easy to read at a glance. Various design elements for text help differentiate it by application or use, such as song name, artist, or user control (skipping song or changing to a new playlist). Each of these elements looks a little different, including styles for color and weight of text elements. Most of the writing is exceptionally short, which is even more important on small screens and apps. The generous amount of whitespace in the design makes the copy even easier to scan and read as it relates to image cards on the screen. Much like the Material Design documentation, this interface is loaded with content. UX writing provides the informational infrastructure to make it navigable and intuitive to use, without going into detailed text instructions. Buttons and markers are clear, labeled simply “Play” or “Pause” based on their actual use. The most exceptional example of UX writing for Spotify might be in the names and descriptions of their curated playlists. Each of these playlists has an iconic image with the playlist name, description, and information about the duration of the playlist, and number of followers. The playlist “I Love My ‘90s Hip-Hop” is keyworded to a specific genre for search, and includes the following deeper search description: “Real rap music from the golden era.” The textual cues help listeners decide if this is the playlist for them. UX writing works here because: Calls-to-Action are direct and limited in number, so the user doesn’t have to make too many choices Many of the words on screen can be complicated, like artist and song names. Simple design elements such as color and typography work with the complicated text, not against it Text blocks on the desktop and mobile app are consistent, creating a seamless user experience for those that switch between devices Small text and controls all have associated copy A voice that is inviting and fun, matching app content UX writing is what creates a conversation between the end user and the design. Your team needs a UX writer Whether you work with a design team of one or 100, you need a UX writer. UX writing is what creates a conversation between the end user and the design. That can translate to pageviews, interactions, specific conversations, and sales. In business terms, a UX writer can help your bottom line. If you are a design studio of one or a freelancer, it’s a good idea to get familiar with basic UX writing to give your projects a boost. If you are open to collaboration, you might find a UX writer to work with on projects. Small- to mid-sized teams are beginning to work more with UX writers, adding team members with these skills. In smaller organizations, UX writers might wear multiple hats and also work on digital advertising, marketing copywriting, or even design. It just depends on your background. Larger teams and companies are already investing in UX writers. After all, great copy can make or break the user experience. Conclusion Think of a UX writer as the person speaking directly to website, app, or product users. They are having a conversation about what you do, and encouraging further engagement and interaction. Everything online – websites, chatbots, product descriptions, and even Siri – functions because of amazing writing that works with the design interface. That’s not something that’s likely to change any time soon.