Resources for form UX.

by Odd-Arne Johansen

Can anybody in here point me to some resources about building forms? Not the technical bit, but how to make forms very user friendly, nice to look at and easy to work with, especially on a phone.

Odd-Arne Johansen

on August 21, 2020

Say something nice to oddarne74…

Post Comment

3

They only have the bare-bones form components, but I like UI Playbook: https://uiplaybook.dev/play/textfield

JohannesI

·
6 years ago
·
Reply
3

I am building a component library from scratch at the moment.

For styling, I have found it best to find UI components I like, then inspect them using Chrome Dev tools. From here, I can see the CSS / HTML they have used to build them.

Another great resource is Codepen, it has some really unique examples of forms, which all the source code available to learn from:

https://codepen.io/search/pens?q=form

ankleio

·
6 years ago
·
Reply
3
Recommendations

You can use general principles of UX and UI design as starting point. My view of design is highly influenced by Steve Krug's book “Don't make me think!” and NN group.

One big takeaway: we look for clues how things works. If it is a button make it look like a button.

If you want to learn more about forms design I recommend book “Web Form Design: Filling in the Blanks” by Luke Wroblewski. It is focused on usability side of things (to make forms very user friendly. It has about 200 pages. The book is readable. At the end of each chapter is part called “Best practices” that you can apply to your work.

For learning about how to make it look better I suggest you two books: “Refactoring UI” by Adam Wathan & Steve Schoger and “The Non-Designer's Design Book” by Robin Williams. Both are written for people with no previous experience in design. The former teach you a systematic approach to design and contains some cool tricks. The latter is more about general principles of graphic design that are also applicable to UI. It compressed graphic design principles literally into CRAP (Contrast, Repetition, Alignment, and Proximity).

Feedback on your form

What I like
- Pointer on the submit button. It helps to know I can click on it.
- It is short. The shorter form the greater chance somebody will fill it.
- Structure of the form.
- Questions are clear.
Space for improvement
- Animation on submit button looks weird. If you hover over it, it overflows and scrollbar shows at the bottom. I would choose different way to show user it is a button. Maybe change of color?
- You could try to use the same mouse cursor you use on submit button on multiple choices because it shows it is clickable.
- You don't have to fill all available space. I would add more space around sides of the form.
- In my opinion “Submit answers” is too much technical. Never use jargon when you write for your user. I think “Send” is more clear.
- “Please answer the following four questions. It will be a great help to us.” Maybe I would try something like “Please fill this short survey and help us to improve our product for you.” You want to empathise what's in it for them, not for you. That will make users care more.
Anyway you have a good start! I hope this long list doesn't discourage you. It is a bit longer than I expected ^_^.

Hope it helps you!

Let me know when you have a new version of the form. I would like to see how you improve.
KamilaHerkova

·
6 years ago
·
Reply
1. 2
  
  I did a pass over the form again and implemented your suggestions. I think the form is better now. Also changed cursor when you hover over the text fields.
  
  Form here: https://gg.smoothsailingsoftware.com/survey/afdc0c74-3e74-43c2-891d-2fda7681baf9
  
  Odd-Arne Johansen
  
  ·
  6 years ago
  ·
  Reply
  1. 2
    Yes, it is definitely much better now. Good work!
    
    A little more space for improvement ;)
    
    “Start your growth engine today”:
    
    I think the contrast between text and background is low. It makes the text more difficult to read, especially in certain light conditions (sunlight on display) or if you have worser vision. For experimenting with a color, I use DevTools in Chrome. It tells you, if there is enough contrast and you can play with color until you are satisfied. I would aim somewhere near AA standard. Then it should be readable for almost everybody. Use inspect to focus on element. It shows you plenty of information. Contrast is one of them. Also use HSL instead of hex because it's more similar to the way we think about colors. In DevTools it shows you space where there are colors with enough contrast.
    
    Mouse pointer appears on the whole line, even if you point into empty space. It is confusing.
    
    KamilaHerkova
    
    ·
    6 years ago
    ·
    Reply
    1. 1
      
      I have adjusted the colors, and Lighthouse now give me a score of 100% for Accessability!
      
      The mouse pointer hover effect over the whole line should be fixed, but currently the scaling does not work. Win some, lose some I guess :) Will look into it tomorrow.
      
      Thank you for your feedback. It really is invaluable.
      
      https://gg.smoothsailingsoftware.com/survey/afdc0c74-3e74-43c2-891d-2fda7681baf9
      
      Odd-Arne Johansen
      
      ·
      6 years ago
      ·
      Reply
      1. 1
        
        Congrats!
        
        But the mouse pointer hover effect over the whole line is still not fixed. It sometimes hard to do even basic things in CSS. It is mystery to me.
        
        I am glad I could help you. It nice to see how much you have improved.
        
        KamilaHerkova
        
        ·
        6 years ago
        ·
        Reply
        
        1
        
        Thats weird. Are you using Safari?
        
        That you get a pointer when hovering over one of the radio button labels are by design BTW. This hover zone used to extend all the way to the margin, but is now limited only to the label text.
        
        Odd-Arne Johansen
        
        ·
        6 years ago
        ·
        Reply
        
        1
        
        Everything work well every except link “Start your growth engine today”. See the screenshot below. Pointer shows everywhere between the two lines. I have tried it in Chrome, Firefox and Vivaldi.
        
        KamilaHerkova
        
        ·
        6 years ago
        ·
        Reply
        
        1
        
        Finally! I found it!
        
        Thank you so much!
        
        Odd-Arne Johansen
        
        ·
        6 years ago
        ·
        Reply
2. 1
  
  Thank you so much fo this thorough answer. I will definitely implement and experiment based on this. Will probably look into Refactoring UI also. I've bought courses from Adam before and have had great success.
  
  Again thank you for taking the time to do this.
  
  Odd-Arne Johansen
  
  ·
  6 years ago
  ·
  Reply
2

These articles by Tess Gadd I found on medium recently have got some very useful nuggets of info about form UX and accessibility in you might find useful:
https://uxdesign.cc/ui-cheat-sheet-text-fields-2152112615f8
https://uxdesign.cc/ui-cheat-sheets-buttons-7329ed9d6112
https://uxdesign.cc/ui-cheat-sheet-dropdown-field-a30025c0f432
https://uxdesign.cc/ui-cheat-sheet-radio-buttons-checkboxes-and-other-selectors-bf56777ad59e

martinollivere

·
6 years ago
·
Reply
1. 1
  
  Thanks, those links are useful!
  
  Odd-Arne Johansen
  
  ·
  6 years ago
  ·
  Reply
2

Hey! Are you talking about building forms in some platform like Wordpress or building an independent form?

For Wordpress you have a plugin called WPForms very easy to use without any code. You can check the contact form I've created here using this plugin, the result is pretty good! https://cashout.games/#contact-id

And if you want to build an independent form you have Google Forms and Typeform, both of them very easy to use without any previously knowledge.

Teodora

·
6 years ago
·
Reply
1. 1
  I'm building the form from the ground up for my app. I have 100% control over everything from HTML to CSS.
  
  The form itself is very simple, just some radio buttons and three text fields.
  
  You can see where I am at the moment here btw: https://gg.smoothsailingsoftware.com/survey/afdc0c74-3e74-43c2-891d-2fda7681baf9?fbclid=IwAR0D59zBcZeiQI_ZwH4ckIQaEVFKQK7HJ6ErdzQ1bp8zxnD984rj_VrTzrg
  
  (Error state is still work in progress)
  My goals are that anyone that encounters this form
  
  Thinks it is very fast.
  
  Is not scared away.
  
  Completes the form, even if some error is encountered.
  
  What I'm looking for is resources that people in this group use to make good looking, user friendly forms. Any feedback on the form will be greatly appreciated as well!
  Odd-Arne Johansen
  
  ·
  6 years ago
  ·
  Reply
  1. 1
    
    I think the information is very clear and well placed, maybe the description of the survey can be written in a more personal way and why they should fill it up.
    
    Another point maybe is to replace the text fields for check boxes (like in your first question). In this way, people would be more suitable to answer the questions because of the lazy of writing. Also, you can extract the data from your survey easily and in a clear way. Maybe you can leave text field only in your last question, people already have answered it all and they are only one step to submit it.
    
    Teodora
    
    ·
    6 years ago
    ·
    Reply
    1. 1
      
      Thank you for your reply!
      
      I've had the feedback about the text boxes before. The biggest thing this form must achieve is that people use their own words. The answers will be used to discover who the users are, what they use the product for and what improvements can be done, not what you think the answer might be. The text fields must stay.
      
      I will definitely work on the description.
      
      Thank you for your quick review!
      
      Odd-Arne Johansen
      
      ·
      6 years ago
      ·
      Reply
      1. 1
        
        Oh! That way make sense! Good luck with your survey! 😁
        
        Teodora
        
        ·
        6 years ago
        ·
        Reply
1

Hi, we're injecting our own decade worth of usability experience into making a new app design tool that includes built-in support for easily creating effective forms.

Intro post: https://www.indiehackers.com/post/making-of-a-new-app-design-tool-69a05d0bbb

HeyUXZen

·
6 years ago
·
Reply