3 Tips for Better Forms UX

When you enter information into a form, it is easy to make mistakes. How do you help your users make less mistakes? You provide them with defaults. Defaults can help users to fill out a form quicker, make decisions easier and reduce errors.

3 Tips For Better Forms UX
Photo By: BiljaST

When you build a form, you need to get different types of information. Some information like their name, address and email address need to be entered by the user. Other information like state, country, gender or some other information that requires a decision can use a default. A default is the most likely option that a user would choose.

For example, your user is going to buy a product. The default quantity is one. You set the quantity for them, so they don’t have to. It helps them to make the purchase quickly. You don’t want them to think to hard on how many they want.

Should you use a drop down list or something else?

It depends. If you have a short number of options, you can use a radio button list. The list makes it easy to scan your options and choose quickly.

For a longer list of options like State or Country, a radio button list would be too hard to read. It is better to put the options in a drop down list. Most mobile devices can handle the use of a drop down list on a form. If you aren’t certain which one works better for your form, you can ask these 9 questions to help you decide.

Address Form with Defaults

Should you choose an option in a drop down list?

When you can, fill drop down lists like state and country with user data. For drop down lists that require a decision by the user, you can leave the field blank. By leaving them blank, people scan for the empty or blank fields and fill them in. They rarely change fields with defaults in them.

Should you use placeholders in fields?

If you are designing a short form with a couple of fields like a login or sign up form, then the answer is yes. You can use placeholders instead of labels on these forms.

Curves Join Form

When you create longer forms like an event registration form, don’t use placeholders. Use clear label, error messages and defaults to help guide the user through the form.

When you build a form, you can use these techniques to help guide them through filling out a form. Defaults, radio button lists or other input fields, pre-selected drop down lists and placeholders in fields when necessary. By making decisions for users and guiding them through the data entry process of your form, you can help make filling out forms faster and easier.

Ways to make screenshots of your code great

How do you take screenshots of your code? The simplest way is to use your screen capture application that comes with your OS. Then, you can improve it by using a graphics editor like GIMP.

Make Your Code Screenshot Look Great
Photo: Photo by Nicole De Khors from Burst

What if you want your code to look right without the extra work? You can capture your code using a extensions that work with your code editor.

Polacode

Polacode is a Visual Studio Code extension. You launch it by using the command palette and typing Polacode, It opens the Polacode window next to your code. You select and copy the code you want a screenshot of. Paste it into Polacode, click the camera button and it generates a screenshot for you. Then, you can use the screenshot for your blog, social media accounts or future reference.

Polacode Screenshot Example

If you don’t want to add an extension to your IDE, you can install software like Carbon to take screenshot. For more details on Carbon and Polacode check out Scotch’s 6 awesome tools for creating a screenshot of your code.

How do I make my screenshot great?

If you use Visual Studio Code, you can modify the settings to get a clean and easy to read screenshot. Andrew J. Byrnewalks you through the 6 settings he uses. If these tools don’t create the screenshot that you are looking for, you can also use 5 Ideas for making a screen shot great.

What if I want more than a screenshot?

Screenshots are great for static images of your code. What if you want to create a demo or screencast? Travis Fischer on Hacker Noon provides you with different tools for making your code look beautiful.

Getting Started with a Design System

When your website is small, you can use design tools like sketches, sitemap and color schemes to create a consistent and cohesive look and feel. What happens as your team and website grows? How do you keep your website design and functionality from being a mess? You may start out by creating a design style guide or building a pattern library. Eventually, you’ll need something more. A tool like a design system.

Getting Started with a Design System
Photo by Sarah Pflug from Burst

What is a design system?

A Design System is a documented library of colors, fonts, buttons, components, visual elements and other design features that helps to create a consistent user experience. It is more than a style guide or a pattern library. A style guide focuses on the design or look and feel. Pattern libraries focus on building and providing a consistent code base. Your design system pulls both the style guide and pattern library into a single, documented system for your entire team to use.

Examples of Design Systems

How do I build my own design system?

Start with the tools that you know. You can build your own using a CMS that you are familiar with. To get started, you can look at Brad Frost’s Design System Boilerplate. You can use the boilerplate as a starting guide for building your own system. Next, review and document your visual elements, design features and other components that make your user experience unique.

When you build your own, start small and build as you go. Remember, the best solution is the one that you and your team uses. Refer to these tools and resources to learn more about how to build a design system:

Prototype a website with CSS Grid

When I build a prototype, I start with pen and paper. A paper prototype (blog Post) helps me to develop my ideas better. What if your drawings don’t get the ideas across to your team or client? What do you do then?

Prototype a website with CSS Grid
Photo by Stefan Schweihofer

You could use a prototyping app or start building in the browser. Sometimes, it is simpler to start building in the browser. With HTML, CSS and JavaScript, you can build it quickly.

Building Your Prototype in a Browser

When you create your prototype in the browser, use the basic tools for building the web–HTML and CSS. HTML and CSS let your build and make changes to your prototype quickly. You and your designers can focus on designing and testing finicky UI components like tables and drop downs.

What if HTML and CSS isn’t enough to get you started quickly? You want to build a prototype not focus on the layout. A framework like Bootstrap or CSS Grid can help you get started quickly.

Why CSS Grid?

You can build your prototype using other frameworks like Bootstrap. CSS Grid gives you more flexibility, simpler markup and no 12 column limitation. When you use a framework like Bootstrap, it can look as though it was built using that framework. If you need more flexibility in your branding and design, then Bootstrap won’t work for you. CSS Grid gives you more creative control.

How Do You Start?

With CSS Grid, you have three choices:

  • Start with a page layout example. With these experiments, you can learn how CSS Grid works without having to build all of the markup yourself. One of the examples uses the Skeleton Framework. I used this example to build a public domain book website with it.
  • CSS Grid Layout Builder, an app, you download to help you build your CSS Grid layout quickly.
  • Build a CSS Grid website by creating the markup yourself. Grid By Example is a good resource for learning how to build what you need with CSS Grid.

CSS Grid is another tool that you can use to build prototypes quickly. Layout templates, grid builders and online examples all can help you to create your prototype quickly so you can focus on the user experience and not the tools to build it. When building a prototype, the best tools are the ones that you use.

Finding time to work on side projects

You have different responsibilities: a job or business, family and yourself. These responsibilities can leave you with little time to spend on things that you are passionate about. Whether you choose to work on a side project or a hobby, how do you find the time?

finding time for side projects
Photo by Bich Tran from Pexels

Schedule it

Why schedule it? You may have different things that you want to accomplish including your side project. By scheduling it, you make it a priority. If it is on your schedule, you are more likely to do it and less likely to shove it aside for something else.

How much time to you give your project? Your other priorities like family time, hobbies and taking care of yourself will help you to determine how much time to devote to your project. Even if you have 15 minutes per day, you can get closer to finishing your project in small increments.

Use Planning Tools

Plans, goals, To-do lists, bullet journals or a chalkboard can help you keep your side projects on track. No matter what productivity tools that you decide on, they’ll help you on track.

Know When To Stop

Should you stop? A side project should be fun. You should learn something new and enjoy doing it. If your enjoyment is dwindling and you dread doing it, quit working on the project. You can always start something new.

Take Breaks

Sometimes you may need a break. You take days off from work to relax or enjoy a holiday. If you need a break, take it. Your side project should not be another job that you create for yourself. It should be something that you want to do.

Finding time for side projects

Side projects should be something that you want to do. It should let you explore new ideas, be creative and find out if you have a passion for it. When you decide to work on a side project, you can be more successful by:

  • Adding time it to your schedule to work on your project
  • Use planning tools to help you track and complete your project
  • Know when to stop working on a project that no longer interests you
  • Take a break when you need it