Thoughts on programming, web development and design.

Circuit Board

Month: September 2018

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.

Powered by WordPress & Theme by Anders Norén