How can I improve the UI/UX of this form?

Question

I have the following form on a website I'm building. I've tried a few different approaches/designs but I can't seem to find anything clean that fits. This is a pretty high res screenshot - in reality you'd scroll the page.

Does anyone have any suggestions/examples they think could work? I've had a look at a wizard approach, but it always felt like a lot of steps.

Happy to DM a link to the hosted version. It's not ready, hence I don't want to publicise it in the post.

Some context

The app is for creating shared tasks with other people. Someone creates the task, invites others and the appropriate people are notified when it's their turn to complete the task.

Anyone can create tasks for free. Users who haven't signed up can access and fill out this creation page. This is the only thing they need to fill out. They are required to create an account when they click the save button if they want to continue. It's imperative this page is clean/exciting as intimidated users are much less likely to fill it out and will bail.

Once a user creates a task, I imagine they would have little or no interaction with this page again, unless they wanted to create more tasks. Editing would be infrequent (this form is also used to edit).

Target Audience

As you can imagine, this can appeal to a variety of different people. The common use cases I identify on my homepage are:

• At home: Who's turn is it to take out the rubbish? We know!

• In your sharehouse: Toilets looking a little rough? We can help share the load.

• At work: Share fridge starting to grow fur? Take turns.

It can be used in enterprise, families, share houses, between partners. I would always expect it to be adults interacting with the product however, even if children were to receive notifications.

Devices

I've built it as a responsive app, meaning it works on mobile. As with a lot of sites, I'd expect as much, if not more traffic on mobile than on desktop. I'm also building a native mobile app that mirrors similar functionality to the website.

-- Update --

Lots of people are talking about inputs/labels, greyed out things etc. Just to clarify, some of the UI is disabled. The add email button is disabled (no email in the input) and the save/submit button is also disabled because the form hasn't been filled out. My CTA primary buttons buttons are clear and blue.

The input design moves the placeholder/hint to a label when you focus the input or add text. I'll add further screenshots with annotations.

Answer 1

I feel you might be coming at this from the wrong angle. A form shouldn't excite you (or a user), it should get the job done quickly and painlessly.

Boring can sometimes (usually!) be best.

You mention that this form can be accessed on mobile - can we see that?

There are some issues with your form that I can see from the screenshot, many of which are accessibility problems.

Add labels to text fields. All fields in a form should have clear labels. You have used hint text within the field as the labels - this is not good for usability.

Remove any placeholder text. You don't ever need to use placeholder text in any fields in a form. Far better experience for the users to leave the fields blank.

Add help text for the description. This may not be needed in the entire context of the app experience, but I wouldn't know what to add in that field right now. You have good help text on the sharing section.

Increase colour contrast. The grey text and element colour you are using only has a contrast ratio of 2.81:1, which will cause issues for a number of users, especially on mobile. Increase it to something like #7C6D6D to ensure good contrast (and add a hint of warmth).

Put it all in one page and simplify the layout. This is a task that people want to complete quickly and easily. That should be the forefront of your design. Your users won't care how pretty the form is if it take them to long to fill in.

And please, don't rely on Dribbble for good UX. I like browsing it too, but many of the UI designs would give poor user experiences, and quite a few never actually get made. :)

Answer 2

I'll start by saying this will probably be an unpopular opinion because, for reasons I can't comprehend, what you've done is done a lot. My complaint is that you've made 5 text fields and 3 multiple choice questions around 2800 pixels tall.

"In reality you'd scroll the page"

I swear in a decade we'll all have 8k monitors and still be endlessly scrolling because user interface people have convinced themselves that everything needs to have at least 1000 pixels of complete emptiness around it and the buttons need to be the size of your fist on the screen with tiny monochrome icons in the middle.

If you absolutely must make the same UI for phones and desktop, with big buttons for sausage fingers to easily press, here's my suggestion:

Yes what you're doing is considered aesthetic or whatever, but by the time your users are making their tenth task you're just wasting the time that you're supposed to be saving them. If you're really worried about your users to be scared off by the sight of more than one question at a time, give them the tutorial version of the page the first few times, or give them a checkbox at the end "Make this more compact next time". A calendar/reminder is a natural side task, it (and it's menus) should act like it. Many desktop users will not be keeping this window full screen and that will just make your plus-sized margins that much more obnoxious. And if they're like me, and scroll back through the form to double check it afterwards...augh.

Oh, and increase the contrast. If any user has to adjust their monitor/phone's contrast/brightness to see your light gray on white, you messed up. Just because Google does it, doesn't mean you also have to make every color scheme to be white on light gray with a gradient of light to super light gray. 50% gray to 100% black range is also available. And colors too.

This looks like it was made with Google forms.

Answer 3

I agree mostly with what @Steve O'Connor has said, but there are two things I think we can discuss further:

Hint text should be useful. Meaning that if you're going to use it, write examples instead, like: "e.g. [email protected]" in the email field. Hint texts are extremely helpful especially when the field itself doesn't exactly explain what should be written in it (in cases like adding phone numbers).

The description field is only a single line field when you know for a fact that it cannot be more than a sentence or two. If there is a case where users can write a paragraph as a description then it is better to switch the single-lined field to a multi-lined one.

Other than that you should definitely increase the contrast when users type in the input fields (for a second I thought the email you had written was a hint text) and there's no need to separate them in this case in their own boxes. They could be all connected and separated simply by their respective headers.

Final thing, in my experience, the fields seem to be too long in width. In general you want them to have a set max width which they shouldn't exceed, and so not completely stretch with the screen size.

Answer 4

Great answers so far! I would just like to add a few points:

• Check those tiny grammar details: Instead of 'Lets' > 'Let's', instead of 'Create A New Task' > 'Create a new task' or 'Create a new Task' it is not a big deal but those small details could matter for some users who would not take your form too seriously. As your site gets bigger those mistakes could be more common.

• Why at the 'How should we notify you' section the non-selected options are grayish and in the other sections that is different? I don't know if everyone will agree here but I like that functionality of highlighting my selected option and blurring or making the other options less noticeable. I don't understand why the other sections of your form do not implement this, it makes it confusing for me.

• Time selection contrast Is the 'at' preposition a button? The contrast is not enough. It seems like both the time and the 'at' word are buttons.

• Unify everything or change the structure: As others pointed out, forms should get the job done quickly BUT I think a good design could be exciting as well. I would group everything in a different structure or maybe you could try having like 3 different screens that get loaded instantaneously with a kind of progress bar and these tiny dots at the bottom of the form so the user can see how many empty fields that he/she has left to be filled. Careful if you do this, it's not easy to design something that leaves the user with a good taste.

• Change the button colors: They seem disabled

• Background color and general style: I'd choose different colors. Of course the style of a website should be in concordance with the logo, primary colors chosen for other things, etc, etc. As a general rule I always choose 3 main colors for most of the design.

• Random icon could be changed This is a personal preference but I would choose a different icon like the crossed arrows or a dice maybe.

Keep it up! You are in a good path. Always study famous websites and their layouts. Try to imagine why did the designers of that website chose those colors, that structure, the order of the elements, etc.

Answer 5

+1 what the previous answers said,

I'd also like to add a little note about the consistency of the selections. In the "how should we notify you" section, deselected elements are grey. If that's the intended effect, that should be consistent with the rest of the selections as well.

Answer 6

I see this sort of design a lot, and frankly I find it annoying.

I think it can be tidied up quite easily though. These would be my steps:

1. Get rid of the empty grey space between each portion, maybe leave a tiny line.
2. Have each question except the top one collapsed, so you can only see the question but not the answer options.
3. Once the data is filled in the top question, open up the second question. When the second is filled, open the third and collapse the first. Have the current and previous questions open.
4. Clicking on the question are expands or collapses that question, always.

It is also very important to get the microcopy (text, especially of the questions) to be very clear.

Answer 7

Disclaimer: I am not a UX/UI designer, but I am a user who knows what he wants.

I will repeat a few points that I think are very important:

1. This is a form, users hate forms

If forms are unavoidable, you should do everything to streamline the process to make them as quick and effortless as possible. This is especially true for forms that will be completed again and again by the user.

With this in mind, I don't think that the separation into multiple cards is necessary. In fact I would go as far as to say that the entire thing should be encapsulated in a single card. This form is taking up so much unnecessary space and I would hate having to scroll through a form that I fill out maybe 5 times a day - empty space is good to an extent.

2. Small improvements

I agree with much that has been said on the smaller suggestions. Increase colour contrasts, change hint text etc. above