Part 2 – How to design better forms 💯
Courtesy of @ux.ale
📋 When creating a form it’s easy to get lost in the business mind sent: “I need all this information from the user and I need it right away”. Instead, try to empathize with your user and think:
🔹How can this process be as easy and smooth as possible?
🔹What can potentially be annoying?
🔹What can get confusing?
🔹What’s been annoying to be in the past while filling a form.
🔹How would I like to this to work?
⛔ Remember that asking personal information to the user should be the last step of your process.
🏄♂️ Let them navigate through your service freely first, once they like it and they are ready to use it, let them know (in a non-robot way) that you need some information from them in order to continue.⠀
Keep it simple and synthesize whenever you can.
Usually, the majority of fields are necessary to fill, so only mark the optional ones.
Autocomplete options reduce the time a user takes to fill a form. The lower the time, the higher the conversion rate.
Call to actions should state the intent.
Show where the error is and provide the reason. Don’t make the user wonder around to figure out where they made a mistake.
A bullet point on the password requirements creates a much friendly and seamless onboarding experience.
Microinteractions can save you space, time and combine some of the basic rules discussed previously into one step.
🧠 Hope this helps!
Bonus — 4 tools that may be useful in your designer way:
Crello — the simplest online image editor. A simple but powerful tool to create awesome designs for any social media format — posts, covers, graphics, and posters using the best software on the web. It’s easy! A lot of animated designs.
Webflow — all-in-one web design tool that allows users to design, build, and launch responsive websites visually.
Funnelytics — an incredible tool that helps you build the best marketing funnel mapping.
Flowkit — allows designers to create frighteningly fast user flows within Sketch and Figma.