Julie Grundy - The UX of Form Design: Designing an Effective Form @ UX New Zealand 2017

Watch Julie Grundy's talk at UX New Zealand 2017.
For more UX tips and ideas check out the Optimal Workshop blog: blog.optimalwo...

[@DVineMe]

7:35 That's not an inline label, that's a placeholder. Big difference between Name and . Placeholders aren't labels, they're to provide extra information about or an example of what should be entered. And make it clear that it's an example, so that, as she said, people don't think it's already filled out. And inline label would be a label element with it's CSS display property set to inline. Having an absolute positioned label so that it's displayed on top of the input element would be animated upwards on input focus. 26:59 Oh look, there they are. Some would actually argue that the animation makes it more clear to the user they've focused the input field. 12:20 Tel isn't an attribute, it's a value you can give to the type attribute. And this ladies and gentleman is why a developer will never give you what you want. Don't use words that have a meaning in HTML and CSS out of context. 12:52 That input mask is great... IF you have a US phone number. Different countries, different phone numbers. So then you have to add a country selector (which will add extra work for the user, and no you can't base it off their location, because residing in a country doesn't mean they have a phone number of that country) to get the right input mask, and even then there's probably a difference between landline and mobile. 15:23 Yeah, don't assume. Ugh, it's the same as here in Belgium: 3 official languages. About 60% of the population speaks Dutch. Yet, for some reason some sites will just force French on you, even though they could easily get your location (just like with the phone number: don't, but in this case at least if you're going to force a language, the odds of it being the right one will increase exponentially) or even the browser's accepted languages, so you can spend the next 5 minutes looking for the language selector in some obscure corner of the site. *facedesk*

[@prettystar7210]

Hey Thanks ..I was little confused what she said about Label...,I always thought placeholders are good...,they give very important message to Users...

[@hollycow8171]

Yes most of her examples are not matching with her so called FORM RULES.. lol. Just another blah blah show.

[@splutch49]

impressive work, thank you for sharing your knowledge ! It is the best video about forms that I have seen so far

[@trejkaz]

It didn't point out the erroneous name fields at all, though. I'm assuming all the other videos about forms you've seen have been pretty bad, or that it isn't a very high bar to be the best.

[@trejkaz]

Almost all the forms shown as examples take the user's name incorrectly. Not once did the speaker actually point this out. So I can give this talk a 6/10 tops. Some developers are going to look at the "fixed" form and assume that there are no other problems in it, but not once did the name input ever get corrected. There's also at least one apostrophe usage error in the slides.

[@adavizealiyu4811]

This is actually a masterclass, thank you

[@Azrael03781]

The hard part. Validation

[@breaths2]

She had me at “oh shit I forgot the contact form”. 😅

[@gaganahuja11]

Do you think voice input option should be available for users in forms?

[@JulieGrundy]

Hi Gagan, Thanks for your question. Yes, if it's possible, voice input is a great option. I think a little microphone icon to the right of the input field (if it is an open field of course) would be a nice trigger.

[@gaganahuja11]

Julie Grundy also do you think it is good if user can enter details in any language in forms textarea fields?

[@gaganahuja11]

Julie Grundy spell check should be there with word suggestion in textarea?

[@mad4ad]

What was the lunch menu again?

[@ajitghising8112]

thanks for sharing this. it helped me so much.

[@dipendrapoudel7645]

dami

[@pranoymehra2150]

Great presentation, boring stuff made learnable through great speaking skills.

[@lalaithan]

This is great in both info and presentation style! Thanks for sharing it.

[@remedytee]

Would be interesting to see how the 12 million dollar extra revenue was calculated 😅

[@carogitter9587]

Funny right? :)

[@RobCoops]

The input mask example was terrible unless you are only designing for the US. The rest of the world does not write a telephone number as (xxx) xxx-xxxx. They are much more likely to have something like xxx xxx xxx or xxxxxxxxx or maybe even +xx xxx xxx xxx or +xxx xxx xxx xxx. Since this presentation was in an other country the presenter clearly must be aware that there is civilized life outside of the US and that these lifeforms even use telephones. It would have been good to look into how well the given example would translate to that part of the world (the typical telephone number format would be on of: (0x) xxx xxxx , (0xx) xxx xxxx or (0xxx) xxx xxx so the provided example is pretty silly and would make the form less useful for anyone outside of the US.

[@messagedeleted3526]

Luckily they’re case study examples so you can apply it to your own projects that pertain to your own region/country.

[@hollycow8171]

Yes i was so annoyed with her presentation. most of them are not following her FORM RULES. am glad am not the one. SADLY some kids are going to follow her RULES lol. This is complete misleading of information UX Industry.

[@trejkaz]

The example telephone number she input during was for Australia, mind you. But yeah, her pattern was too strict. It should permit parentheses, hyphens, spaces, probably even more characters, should auto-strip or normalise them somewhere, and yeah, ideally format them correctly depending on which country code was specified out the front. There are libraries which can do this job.

[@anonymouse2141]

Wow...tough crowd! Great presentation...really informative.. thanks

[@tonywu1677]

Hi Julie, love to watch if you have "Voice and tone" section as well. Thanks for your great sharing :)

[@EmaIDMH]

Great video thanks

[@gaganahuja11]

Good video.

[@robertblak5790]

the math is just human validation

[@trejkaz]

I laughed at that. It was only basic arithmetic, I don't even qualify that as "math". If it showed an equation and said to solve for x, then sure, feel free to complain.