How do you focus on better UX skills?

Practice, research, learning and working with others can help you to build your UX skills. Not all projects that you do for clients or your company can help you learn new techniques. You have to make time to learn, practice and keep improving.

How do you focus on better UX skills
Photo by: Sarah Pflug

1. Work on improving your design skills

  • Practice drawing or sketching You don’t have to draw like an artist. Your sketches need to be good enough to get the idea down on paper. If you want to sketch better, consider taking an drawing class.
  • Work on Color Theory Study how color affects how people behavior and react to your designs. Use a color scheme generator for inspiration.
  • Experiment with design elements like white space, lines and animation These design elements can help make the user experience better by guiding your user to take the actions that you need them to do.
  • Try out new design tools Every year there are new tools for you to try. You don’t have to use them all. Experiment and play with a few that can help you create better user experiences.

2. Be inspired and Keep up with Design Trends and Techniques

You can find inspiration for design everywhere. Look online, read magazines, books and art. Read design articles daily.

3. Create Throwaway or Projects for Yourself

When you work for a client or company, you don’t always have time to experiment with new ideas or new techniques. A personal or throwaway project, a project that won’t be published, can give your the opportunity to learn new skills and create something new. In the Frontside podcast, they talk about building useless stuff. Or throwaway projects that you build which combats burnout and lets you test new ideas.

Can’t think of a small side project to work on? You can do copywork. Painters learned how to paint from the masters by copying their work. You can do the same with a website or a UI. Eric Kennedy explains how to improve your design skills with copywork.

4. Focus on the essentials

  • Focus on the big idea. Don’t get stuck on the details.
  • Don’t rely on research.
  • Keep it simple as possible.
  • Start with your content.
  • Don’t add things because you think their are fun or interesting.

5. Meet in person with UX Designers

Go to meetups, conferences or have coffee with other designers. Take time to meet with a mentor in person. By meeting in person, you can trade tips and techniques and help each other with current problems that you are working on.

How do you do all of this? As a developer or designer, you need to plan on continuing to add new techniques and skills. Plan to add time to your schedule so you can read design articles, apply what have learned and meet with others to share your new techniques.

Design Patterns in CTAs

What design patterns do you need to create an effective call to action? When you create a web design, you consider things like copy, color, fonts and images. The same things apply when designing your call to action.

Design Patterns in CTAs

Start with Copy

What should your call-to-action say? Use a minimal amount of copy. You want your visitors to scan your copy and quickly take action. Most calls-to-action have 1-2 sentences or a short bulleted list that convinces you to take action.

Nerd Fitness CTA

On NerdFitness.com, you can download a copy of their free weight-loss guide. Their copy uses a large heading that tells you want you are getting and 3 bullet points that explain what the guide entails. They use the copy to convince to give them your email address in exchange for their free weight loss guide.

Choose the right words for your Call-to-Action Button

You want to use words that get people to click. Start your button copy with a verb. Verbs like get, start or join. Avoid single word buttons. Instead use 2 or more words. You can add words like free or my to help people decide to click.

In the NerdFitness call-to-action, their button starts with a verb. They use “Get It Now” to convince you to download their guide.

Choose the right color for your button

Colors can affect whether or not people will click on your button. Your button need to stand out from the rest of the content. Be picky with the colors. Start with orange and test to see what colors work best.

Nerd Fitness used red. They use red on their website. It helps to make the button stand out and look like it belongs as part of the website too.

What size should your font be?

It depends. You may want to mix large fonts with small to make the copy stand out. Use a large font on your button to make it easy to read and entice your visitors to click on it. In the Nerd Fitness example, they use both large and small fonts. The size choices work to grab your attention.

How do you make it stand out?

Use photos, icons or background colors to make your CTA different enough from the rest of your content. Nerd Fitness used a yellow background, a black border and an image to make it different from the content of the page and compliment the rest of the design.

Summary

By combining copy, colors, fonts, buttons and decorative elements, you can create a CTA that entices your visitors to take the action that you want them to take. Not all CTAs work well. You may need to test and make changes to get the right design. Use these tips to incorporate current design trends when creating your next call to action.

White space in UI Design

Every element that you use in your UI needs special attention. You carefully pick out the colors, graphics, photos and fonts. Each item is chosen for how it fits into the design. You create a design that carefully balances all of these elements. Have you considered how you use white space?

White space in UI Design

What is white space?

White space is the space between elements. It is intentionally left blank or empty. White space or negative space is the space between columns, graphics, text and other elements. You leave these areas untouched to help make your design easy to read and use.

Where can you use white space?

  • Photos, graphics or any visual element: By adding white space around your visual elements, you can make them stand out. Too little space around them and your design may look cluttered. Too much and it may look empty. You need to play with the space to see what works.
  • Navigation menus: Your visitors use the navigation menu to move through your design. Tinker with changing the spacing between menu items and text.
  • Headlines: They help guide people through your design. Increase the space around each headline. More space around your headlines makes them stand out and help people to understand how to use your design.
  • Content or copy: Not enough space between paragraphs or lists can make them difficult to read. Increasing the space around paragraphs or between characters can help to make it easier to scan and read.
  • Columns: Margins or spacing defines the borders of a column. Use margins and padding to give your columns more definition and breathing room.

As a design element, white space doesn’t have specific rules about when and where you should use it. You have to experiment with spacing to learn what works best. White space is a tool that you use to help make your designs more readable and easy to use. Isabella Morris on Usablity Geek talks about how to use white space to increase usability.

Improve Your UX with Microcopy

What is microcopy? It is the smallest piece of content on your website or app. Microcopy can be text-based or visual. Text-based includes buttons, calls to action, error messages and forms. Visual microcopy focuses on images and videos.

Improve Your UX With Microcopy

Microcopy needs to be easy to understand, short and draws the user in. It should guide the user and help them to understand how to use your website or app.

What can you do to improve your microcopy?

Talk to your users like a person

Does your copy sound conversational or like a marketer? If it sounds like a marketer, change the words. You want to write copy with the same words that your users use.

Use copy to guide your users

Write short and helpful sentences, not paragraphs. If you need more than 8 words to explain what the users need to do, rewrite it.

Explain errors

Nothing is more annoying than confusing or cryptic error messages. Let your users know how to fix the problem. Take the time to write simple and easy to understand error messages.

Minimize User Worries

Your microcopy should anticipate user questions. Use clear labels and descriptions in forms to minimize data entry problems. Let them know why you require certain pieces of information.

Know when to user your Brand voice

Your microcopy can use your brand voice. The trick is to know when to use it and when not to. Some situations require clear and simple language.

Want examples of good microcopy?

Goodmicrocopy.com, curated by Richard Sison, has a collection of clear, concise and sometimes quirky microcopy.

Screenshot Good Microcopy.com

When you create a website or app, the smallest bits can make your users’ experience a good one. To make their experience a good one, remember to design the smallest bits of microcopy.

Why a Lean UX Design Process?

Design is a marketing tool. The best marketing tool you can have is a well-designed product.
Annie Wang

How do you create a well-designed product? By focusing on solving the right problems and delivering value to your customers. A Lean UX Design process gives you the tools and system for developing a well-designed product.

Why A Lean UX Design Process

In Designing with Lean UX, Kate Kutter describes UX as

  • a mindset
  • focused on delivering value
  • inspiring the right kind of ideas
  • guides your decisions

What is Lean UX?

In A Lean Design Process for Creating Awesome UX, Annie Wang described Lean UX as a repeatable process that is goal-driven and outcome-focused. Your team has a designer, developer and product manager. Most startups are going to have small teams. They focus on the following principles:

  • Rapid cycles: think, make, check
  • Generate many options and decide quickly which ones to develop
  • Focus on solving the right problems
  • Recognize hypothesis and validate with user feedback
  • Research with users as the best source of information and inspiration

What does a Lean UX Design process look like?

A typical UX Design Process may incorporate the following:

  • Discovery
  • Wireframe
  • Prototypes
  • Validate Internally
  • Summarize
  • Iterate

In Lean UX, Lean doesn’t equal Skinny. Less is more.  You want to build a product that is simple and clear with less features and more details. You want to go through cycles of Think, Make and Check. The key is user feedback and to reduce cycle time, not your build time. Not every product needs to follow the same UX Design Process.

As we develop our own UX Design process, we want to focus on thinking, making and checking. User feedback is key to making products that are simple, clear and easy to use.

Have you created your own UX Design Process?