5 Tips For Improving Your UX Writing

How can you make your users’ experience better? By using UX Writing, also known as microcopy. It is the small bits of copy that goes unnoticed. When UX Writing is good, it helps guide your users through the user interface of your app or software. They can get things done quickly and easily without frustration or support calls.

5 Tips for Improving UX Writing
Photo by Shopify Partners from Burst

Where do you use it?

You’ll find microcopy everywhere in your interface. Typical uses are:

  • Buttons
  • Headings
  • Success and error messages
  • Form labels
  • Pop-ups
  • Instructions
  • Tooltips
  • Navigation menus

How do you improve your UX Writing?

1. Keep it short and concise

Good UX Writing is short and concise. It helps to guide the user through their task. People scan words when using an app or website. Make it easier for them to understand what is happening.

2. Use simple words

Avoid difficult, technical terms. Use short and simple words. Include action words like save, create or cancel. You want your copy to be clear and easy to understand.

3. Use structural element to make it easier to read

Depending on your copy, you may need to add structural elements to make it stand out. Use a combination of color, icons and bold or italic text for error messages. Headings, numbered or bulleted lists and sidebars for other important information.

4. Edit

No matter what you write, editing makes it better. Edit your copy using a tool like Hemingway Editor to help make it readable and easy to understand.

5. Test

You want to get feedback from people who match your users. Your coworkers may miss things that your users might have trouble with. If they have trouble understanding something, you should rewrite it. Sometimes a different word makes the interface work better.

Resources

Tips for Debugging CSS

Your CSS isn’t working right. Sometimes your styles don’t do what you expect them to do. What can you do to find the problem and fix it? Debugging CSS can be challenging.

Tips for Debugging CSS
Photo by Yan Krukov from Pexels

Check for syntax errors

Typos and other mistakes can creep into your CSS. Read it from the bottom to the top. When you read it backwards, you may spot errors.

If you don’t see anything wrong, try using the W3C CSS Validator. It may find something that you missed.

Use the Browser DevTools

Most browsers include developer tools. Use these to help diagnose the problem. You can change, update or comment out code. On MDN Web Docs, you can learn more about FireFox’s Developer Tools. If you prefer Chrome, check out Chrome DevTools.

Does your browser support it?

If the browser you are using doesn’t support the CSS property and value you are using, it will ignore it. You can use Can I use to learn if your browser supports this feature.

Comment out or disable the code

When you comment out the code, you can test and figure out where conflicts are occurring. If that doesn’t work, use DevTools to see if one rule is overriding the one you are working on.

Use borders

Add a border to styles that are causing you trouble. The border can help you to see the relationships between elements.

Double check you are editing the right file

Are you sure that you were editing the right file? Did you copy it from your local development machine to the production server? When you are writing code, it can be easy to have many files open at once. Double check to be sure you edited the right one.

Take a break

Sometimes you need to take a break. Go for a walk, talk to a friend, get some water. Time away from a problem can help you figure it out.

Debugging CSS still not working?

Explain the problem to a coworker or a pet. Sometime talking to someone else about the problem helps you figure out what to do next.

Layouts with FlexBox

You can use a CSS library to design a large scale website. What do you do if your needs are simpler? A CSS library like Bootstrap may be too much for your project. Smaller projects may need a simple CSS solution.

Layouts with FlexBox
Image by Gerd Altmann from Pixabay

FlexBox or flexible box can be for design small-scale layouts or applications. For larger projects, you can use it with your favorite CSS library. FlexBox provides you with tools to create layouts that grow and shrink as you need them to.

When would you use FlexBox for layout?

If you are creating navigation menus, web forms, media items or card layouts. Even simple basic grid layouts can be done with FlexBox.

You can use FlexBox to create different kinds of grids. Grids like 3X3, Masonry or Alternating rows. Tobia Sahlin shows you how to build these basic layouts.

What problems can you solve with it?

You can tackle some problems with FlexBox that were difficult using CSS alone. Problems like Vertical Center, Sticky Footers, Input Add-ons and more. Solved By FlexBox shows you 6 different UI solutions that you can do. It includes solutions like vertical centering.

Where do I learn more?

Creating a simple weather app with Open Weather API

How do you get the weather? You could use an app or create your own. First, you need a way to get weather data. You can use an Application Programming Interface to get the data that you need.

Creating a simple weather app with Open Weather API

Where can you find APIs to use in your projects? Try ProgrammableWeb. It is an API directory that lets you find the right API for your project. I found a weather API called Open Weather. Open Weather allows you to get the current weather data, hourly or daily forecast and more.

With Open Weather, I created a simple weather app. It gets the current temperature, daily forecast (highs and lows) and weather conditions. Then, it tells you if the weather was right for riding a bike.

Getting Started

Before writing any code, I looked at Open Weather’s documentation. It explains how to use their API. They include examples using different programming languages like JavaScript. These examples are helpful were helpful to learn what I could do with the API.

On their examples’ page, I found Weather.js. Weather.js fetches data from Open Weather for you. It makes it easy to get weather information from Open Weather.

Building the App

Before building the app, I researched other weather apps to get an idea of what I wanted mine to look like. Then, I sketched out an idea on paper.

I chose to use HTML, CSS and JavaScript. Since I am familiar with Bootstrap, I used it as well. I built my prototype with Bootstrap’s starter template. Then, I wrote my own JavaScript file to fetch data from Open Weather using Weather.js.

Open Weather has weather icons. Weather.js doesn’t use those icons. I looked at the JavaScript and wrote code to get the icons.


Weather.Current.prototype.icon = function () {
  return this.data.list[0].weather[0].icon;
}

Now, my app shows the current and forecast temperatures, weather icon and conditions.

Bike Weather App Screenshot

What to do differently

Open Weather returns weather information for a specific location. Instead of hardcoding the location, I would use the location of the browser. Right now, I used Bootstrap for the UI. I would use a different tool for handling layout like FlexBox or CSS Grid.

Visual Studio Code Tips

Every programmer has their favorite code editor. Your favorite editor may change as you hear about new ones. My new favorite is Visual Studio Code. Visual Studio Code is a code editor for Windows, Linux and Mac OS from Microsoft.

Visual Studio Code Tips
Photo by Sarah Pflug from Burst

With VS Code, I can open Markdown files for editing. Or write code for many programming languages like PHP, JavaScript or C#. A good code editor lets you customize it.

Customize VS Code

How do you make it work for you? The simplest way is to change the theme. Themes change the look and feel of the editor. VS Code lets you select themes from the marketplace or write your own.

When you first install Visual Studio Code, it won’t do everything that you need it to do. Extensions help you to get the features and functionality that you need. You can also use settings and customizations inside VS Code to make it support the way you work.

Visual Studio Code Tips and Tricks

When you are first getting started with VS Code, visit Visual Studio Code Tips and Tricks. This guide helps you to be productive and start using it quickly.

What else can Visual Studio Code do?

It can be challenging to know everything that VS Code can do. You can find out more by checking out VS Code Can Do That?! You’ll find a list of things that it can do. Like Prettier, Node.js Debugging, JSON Intellisense or search user settings.