Stage 3 - Building responsive forms

[JeremieLitzler]

Building responsive forms

Luke Wroblewski:
Perfect form is no form !
A form always sits between a company and a user
Use a culture of learning rather than a culture of delivery
A form must make the intent clear
Look at your app from outside-in: use the role playing method

Resources

https://classroom.udacity.com/courses/ud890
http://www.luceit.com/sites/default/files/Web%20Form%20Design%20Filling%20in%20the%20Blanks.pdf

Efficient Inputs Part 1

Form Fixing Strategies

• Prefill the inputs if you have existing data for your user
• Enable "Autofill"

Death to Dropdowns

• Be careful using the dropdowns !
• The alternative to select for big lists is datalist 👍

<input list="fruits" />
<datalist id="fruits">
  <option value="1">Orange</option>
  <option value="2">Strawberry</option>
  <option value="3">Kiwi</option>
  <option value="4">Apple</option>
</datalist>

Efficient Inputs Part 2

Using label

• Use the label to improve
  • the semantics
  • the UX

<div class="form-group">
  <label for="email" class="user-email">Your e-mail</label>
  <input type="email" id="email" />
</div>

• Label is position on the left or on top of the input.
• To enrich the label, you can use placeholder in the inputs to help the user know what he needs to input.

Calendar input

• Using a calendar widget.
  • The simplest solution is using the input type datetime-local
  • Or Google date picker

Autocomplete

• By setting up the autocomplete attribute with a value listed here, you will help the user to select the previously typed inputs for the same autocomplete attribute.
• The browser support is great (see on Can I Use) even though all browser ignore the off value in the login scenarios.

Autofocus

• Set the autofocus attribute to set the focus to the starting input as the DOM is rendered

*NB: * Mobile browsers ignore the attribute so the keyboard doesn't pop up!
*NB: * Always set the attribute on an input above the fold (on screen) as it is bad practice to do otherwise (e.g. it will scroll automatically to the input off screen).

Reuse user information

• In e-commerce sites, use previously saved data to help the user complete the form faster.

Validation

See MDN

• Client-side validation puts a smile on user's faces.
• BUT don't forget to validate the data on server-side as well.

Numeric validation

Numeric Inputs

Numbers are even easier to validate than text. For number input types, the HTML5 spec gives you attributes like min, max, and step. Each of these do pretty much what you would expect.

min and max set the minimum and maximum values that the arrows in the input will allow. step sets the increments for between possible values. There’s also value, which sets the starting value of the input.

Of course, you’ll probably notice that users can still type whatever number they want into numeric inputs. If you want to really limit possible values, consider a range instead.

Range Inputs

The range input type creates a slider on the page. It also has min, max, step and value attributes. If you want to display the current value of the range when it changes, you’ll need to use some JavaScript to pull the value from the range. Here's an example:

    // grab <input id="range-example" type="range" min="0" max="5" step="1"> from the page
    var rangeInput = document.querySelector('input#range-example');

    // grab <p id="output"></p> to display the output
    var output = document.querySelector('p#output');

    // update the display when the range changes
    rangeInput.onchange = function() {
        output.innerHTML = this.value;
    };

Using setCustomValidity API

See the attached example for a password.
setCustomValidity.example.zip

Fast and better forms

1. Make forms short and pretty
2. Use a set of small forms with a progress bar if the form is big.
3. Avoid redundant inputs
4. Enable autocomplete
5. Provide helpful prompts
6. Use labels
7. Display validation messages
8. Provide immediate feedback

Improve user experience

• Be careful with registration gates: just use the minimal amount of data (usually an e-mail address) to let the use continue on with a checkout.
• Let a user start an order on his smartphone but finish on his laptop (using social media or saving the cart for later)

What data is required in a form?

• Keep: what is absolutely necessary to move on to the next step
• Cut: what is not necessary and should be removed
• Postpone: what can be asked later that will be applicable later on
• Explain:
  • Tell users why we need a certain input with text
  • Use the right kind of inputs to convey the intent of the input

Mobile first

With mobile phones, we are forced to prioritize the inputs because we have 80% less screen space. Then the same apply to larger screens.

Touch support

Touch is not click. Why? Because the event cycle is not same.

Too much touch

To prevent a user selecting text when he doesn't mean it, use the following CSS:

-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;

.focus vs .hover vs .active

Checkout this video

Touch events

Check out MDN
Example of touch slider with starter files.