• Skip to main content
  • Skip to footer

InRhythm

Your partners in accelerated digital transformation

  • Who We Are
  • Our Work
  • Practices & Products
  • Learning & Growth
  • Culture & Careers
  • Blog
  • Contact Us

Lily Malykhina

Nov 14 2018

5 Best Practices for Building Better Forms

 

Various forms like sign-ups, logins or checkout pages are seen everywhere in application and websites, but what attracts a user to fill one out? What exactly makes one click the sign-up or call-to-action button on the page? Forms exist to be filled out, but there are a surprising number of forms which—through poor design, excessive fields, or other factors—push users to abandon them, unfilled. Make your forms simple and easy to navigate, and watch the data come flowing in. Here are a few best practices when putting together your own forms to keep engagement high:

Ask for less information (and have an easy login!)

If you have a page with a sign-up flow for a new mobile app, what do you want to know from your user? It depends on what the product is and why you need the information from them. As an example, a date or friend matching platform would want your age, gender, and zip code on one screen. The next page could be preferences about the person you are hoping to match with. All of this information is necessary for the app’s purpose, but connecting to Facebook or Google has also made it much easier to skip certain steps of this process, and less info needs to be filled out.

Graph explaining process of "Login with Facebook" functionSource: https://developers.facebook.com/docs/facebook-login/overview

The above image shows how easy it is for the user to access all of the fields needed—i.e. name, picture, friends—from the Facebook API instead of filling out the same information manually.

Single-column ease vs. multi-column stress

When you’re making a form, make sure it’s single-column instead of multi-column, since it’s easier for users to scan through and complete instead of trying to tab through different fields and potentially getting frustrated.

Form Flow Guide

As the image above illustrates, it’s easier for a user to scan through one column, answering questions in a linear format instead of doing a Z-pattern back and forth.

Automate, automate, automate

One of the best form practices for improving design is automation, since it makes it easier for the user to go through fields faster when what they type is automated, and without worrying about switching from lower and upper cases. The only fields that should not be capitalized are emails and passwords, since those cause delivery issues.

Progress tracker

A user who is filling out a form—unless it’s a simple sign-up—wants to know how long the process will take them, and maybe even if it should be filled out now or saved for later. For mobile and desktop alike, a progress tracker should be included, like the examples shown below.

Survey Progress Bar Example
Source: https://uxplanet.org/progress-trackers-in-ux-design-4319cef1c600

If the user is on a certain step it’s important to note that as well, all within an easily understood display of what they’ve already completed.

Testing (even when you don’t want to)

This is the step that many don’t even think of taking, since the design could be flawed and more time could be wasted in redesigning. The form you just created should be tested on a few different devices (at the very least on mobile and desktop) to see if it actually works and makes sense. What’s the point of developing a product that doesn’t work for the user?

There are many more best practices for forms, but these are a few of the essentials that should be included in yours to make progress as easy as possible. The ultimate goal is getting the user to click on the “continue” or “submit” buttons in the end. By following these best practices, you can remove common roadblocks in form submissions and make the experience better for your users. Subscribe to the InRhythm blog for more UX and UI blogs from the design team!

Written by Lily Malykhina · Categorized: Design UX/UI · Tagged: best practices, ux

Sep 28 2018

The Best Design Programs for UX/UI

 

Let’s begin with the basics: user experience (UX) design is how a person feels about using a product, whether that be a website, mobile application, or anything human-computer related. User interface (UI) design, by comparison, is all about the look and feel of the design itself; in other words, the colors or icons a person sees on the page.

While this seems straightforward, there are many free and paid tools for UX and UI, so which programs are the best? If you get an assignment from your boss and need to do a wireframe or mockup quickly, which program do you use if there isn’t one specified? Photoshop and Illustrator just don’t do the trick now for creating fast designs, but thankfully there are a few easy, intuitive programs that can help you get the job done.

Sketch

This has been one of the most popular programs for UX/UI designers to use since it launched in 2010. Sketch is used to create differently sized artboards for various browser sizes, apps, or even banners, allowing you to format your design to fit the multiple standard dimensions on the fly. One of my favorite aspects of Sketch is linking it to InVision, where one can create a prototype of their artboards. Sketch isn’t trying to compete with larger, more established programs like Photoshop, but instead is focused on trying to make UX and UI easier with features like converting drop shadows in CSS since it saves time for developers to know exactly what code to use.

Cost: $99 for Mac users. Well worth the price!

 

InVision Studio

InVision first came out with an easy to use prototyping tool that syncs with Craft directly on Sketch. This year, they came out with their own design program—Studio—which is still in early access. I asked product manager Karla Smagorinsky from InVision, who works directly with Freehand, to tell us what Studio can really do: “Studio is a new type of screen design tool that gives designers the power to quickly create high-fidelity prototypes with rich motion and microinteractions that leave nothing open to interpretation. This means designers and digital product teams can have higher quality feedback sessions with both internal stakeholders and external users, allowing companies to move faster and release higher quality products.” Studio differentiates itself from Sketch by rapid prototyping, and adaptable layouts; overall, InVision has an ecosystem of great tools like Freehand, Inspect, Design Manager System (DSM) and many more! This is a great tool if you need to link up two items (like wireframes and prototyping) in the fastest way possible for a low cost.

Cost: Free for both Studio (only on Mac) and prototyping tools (web-based)

 

Adobe XD

Adobe had to put themselves back on the market in 2015 after Sketch came out. Adobe XDis still in beta, seeing what works and what doesn’t work for its users. Some of the best features are on a repeat grid, so a user can select objects and then repeat those objects along an x- or y-axis. Adobe has also created reusable symbols, so it’s easier to place objects in multiple artboards. The best part of having a product like Adobe XDis that it’s integrated into one platform so it is easier to get feedback and iterate based on your designs.

Cost: $9.99/month for the standalone product (works on Macs and Windows) or $49.99/month as part of the Creative Cloud Suite

Those are the three best design tools out on the market right now. While there are other options available, these three remain the most competitive in the market and are regarded as the standard for our designers. The tools you’ll need will ultimately depend on what you need to do and how fast you need to do it, but any of these would be great options to consider!

Be sure to look out for our post on the best prototyping tools being featured soon on the InRhythm blog.

 

Written by Lily Malykhina · Categorized: Design UX/UI, InRhythm News, Learning and Development

Footer

Interested in learning more?
Connect with Us
InRhythm

140 Broadway
Suite 2270
New York, NY 10005

1 800 683 7813
get@inrhythm.com

Copyright © 2022 · InRhythm on Genesis Framework · WordPress · Log in

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Cookie settingsACCEPT
Privacy & Cookies Policy

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these cookies, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may have an effect on your browsing experience.
Necessary
Always Enabled
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Non-necessary
Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.
SAVE & ACCEPT