1

I have the following form (to the right), and my intent is that its:

  1. Eye catchy
  2. Simple to use

enter image description here

We are not a professional designer, hence I feel there's something wrong it, but I am not exactly sure what, and is kindly reach out to you guys for any feedback you may have.

UPDATE enter image description here

  • 1
    1. Change the text above the dropdown menu at the bottom of the form, to Select your desired position. 2. Capitalize the first letter of the text on the green button as follows: Secure early access. – karel Jun 25 '16 at 11:58
  • Consider using "Placeholder" text inside the boxes, rather than Name*, Email*, etc. outside of the boxes. It will simplify your design. – shannonmac Jun 25 '16 at 12:02
  • Thanks for your opinion. I am using label instead of placeholder, but should i use placeholders instead – John Jun 25 '16 at 12:26
  • 1
    I actually disagree with moving the titles inside of the text fields. As soon as the user starts typing their call-to-action disappears. That can create a frustrating user experience if they forget what field they are entering, or if their browser's auto-complete mixes things up (it happens). It would be visually cleaner, yes, but potentially frustrating. – Vicki Jun 27 '16 at 4:44
  • 1
    To piggyback off of @Vicki 's point. There are a number of reasons to not use place holders. Placeholders weren't supported in IE 10 and down, placeholder support is fairly inconsistent with screen readers for the visually impaired, Not to mention that it goes against stand HTML Specification. – knocked loose Jun 27 '16 at 18:18
2

Late to the show, but here is what I would do:

First off, it goes against standard to ask for a full name, so I would split up the name field into first and last name fields.

Second, I would match the colors to that of the app. I'd drop the border and replace it with a gray border with a subtle dropshadow. That teal should be your action color, that way people know anytime they see that green, it is an actionable element (ie, buttons, filters, navigation, etc.)

Third, bring your font sizes up and make your fields a little bigger, this will make the form appear more friendly and inviting.

Fourth, make sure all the fields are the same size and distance apart, and make sure the form is centered.


I know I mentions this in a comment, but I'll leave more detail down here over the placeholder vs label argument.

Placeholders have specific places, they look great and can be very helpful when used right. It's important to not use solely a placeholder however. This is because many browsers ( and people not using javascript ) will not be able to see the form or the form's instructions.

Here is my example of your recreated form as well

Form Example

  • Thanks! Out of curiosity what the properties for your border/shadow? – John Jun 28 '16 at 8:51
  • 1
    @John I believe it was (in Illustrator) Mode: Multiply, Opacity: 25%, X Offset: 0, Y Offset: 1px, Blur: 3px, Color: #b1afb0. I was trying to match the one in the picture you provided, so if you have access to that one, that is always another option. – knocked loose Jun 28 '16 at 13:18
  • Ok thanks. Have a look at the update, and let me know what you think! – John Jun 28 '16 at 13:46
  • 1
    @John I forgot to mention, the outline on the form is .4px font, but this can be achieved in web by converting the format to RGBA, the declaration should look something along these lines: border: 1px solid rgba(177, 175, 176, 0.50); Other than that, looks good to me! :) – knocked loose Jun 28 '16 at 14:18
1

Here're a few suggestions for your UI:

  • Use a larger font size for readability.
  • Re-word the second sentence into a non-conditional sentence.
    "Provide the information requested below for early access to our platform."
  • Use "Sentence case."
  • Use place-holder information to prompt for desired responses.
  • 1
    This is a very short answer to a very broad question. Why should he makes these change? What resources or studies support these claims? – Zach Saucier Jun 27 '16 at 4:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.