@webinterface

HASSLIEBE ONLINE FORMULAREENHANCE YOUR FORM FOR BETTER UXWEBTECHCON 2016, MÜNCHEN

@webinterface

PETER ROZEK

@webinterface

@webinterface

@webinterface

WORK @ ecx.io (DIGITAL AGENCY)

@webinterface

UX, USABILITY, ACCESSIBILITY, FRONTEND

@webinterface

@webinterface

THE WEB FORM IS THE PRIMARY MECHANISM FOR COLLECTING PERSONAL INFORMATION.

@webinterface

CONTACT FORM FEEDBACK FORM REGISTRATION LOGIN COMMUNICATION …

EVERY USER INTERFACE IS A CONVERSATION.

@webinterface

WE HAVE THE SAME PROBLEM WITH FORM.

@webinterface

UNBEARABLE

@webinterface

@webinterface

@webinterface

NOT USABLE

@webinterface

@webinterface

NOT UNDERSTANDABLE

@webinterface@webinterface

FRUSTRATING

@webinterface

SMART AND LESS UI

@webinterface

@webinterface

@webinterface

USER RESEARCH:INVESTIGATING HOW AND WHY HUMANS DO WHAT THEY DO.

@webinterface

CREATING PERSONASCHARACTERISTICS OF A GOOD PERSONABUSINESS CASES FOR PERSONASTHE VALUE OF PERSONASUSING PERSONAS THOUGHOUT THE DESIGN PROCESS

@webinterface

USER JOURNEY MAP

@webinterface

MULTISCREEN DAYFLOW

@webinterface

WE CAN EASILY PROGRESSIVELY ENHANCE OUR FORM WITH HTML 5.

@webinterface

VISUAL DESIGN: STRUCTURING VISUAL ELEMENTS.

@webinterface

VERTICAL NOT HORIZONTAL

LABEL

LABEL

@webinterface

PRINCIPLES OF PERCEPTION:

PROXIMITY SIMILARITY CLOSURE

@webinterface Source: http://www.lukew.com/ff/entry.asp?1502

@webinterface Source: http://www.lukew.com/ff/entry.asp?1502

@webinterface Source: http://www.lukew.com/ff/entry.asp?1502

@webinterface

PORTRAIT VS LANDSCAPE

@webinterface

INTERACTION DESIGN: OPTIMIZING THE INTERPLAY BETWEEN HUMANS AND INTERFACES.

@webinterface

DONT´T USE ASTERIKS, MAKE CLEAR OPTIONAL FIELDS.

@webinterface

E-MAIL *

NAME *

PHONE NUMBER

JOB TITLE *

MARKING FIEDS AS REQUIRED

?

MARKING FIEDS AS OPTIONAL

E-MAIL

NAME

PHONE NUMBER (OPTIONAL)

JOB TITLE

VS

@webinterface

LABEL WHAT´S OPTIONAL, GET MORE INPUT.

Source: http://research.microsoft.com/en-us/projects/webforms/

@webinterface

IT´S MORE ACCESSIBILITY.

@webinterface

USE MAGIC

@webinterface

PHONE NUMBER (OPTIONAL)

Example: 0151 111222333 <input type="tel" placeholder=„Example..“>

PHONE NUMBER (OPTIONAL)

<input type="text">

@webinterface Source: http://caniuse.com/#feat=input-placeholder

INPUT PLACEHOLDER ATTRIBUTE

@webinterface

USE SINGLE FIELD FOR NUMBERS OR POSTCODE.

@webinterface

@webinterface

@webinterface

ALLOW INPUT IN VARIOUS FORMS.

@webinterface

USE A GOOD SYSTEM VALIDATION AND PROVIDE CLEAR ERROR MESSAGES.

@webinterface

USE MAGIC

@webinterface

<input type=“tel“>

PHONE NUMBER

039

TELEPHONE INPUT TYPES

@webinterface Source: http://caniuse.com/#feat=input-email-tel-url

@webinterface Source: http://quirksmode.org/html5/inputs/mobile.html

type=“tel“

@webinterface

TO OFFER INPUT ASSISTANCE.

@webinterface

<input type=“email“>

E-MAIL

peter.rozek@ecx.io

<input type=“url“>

URL

www.

EMAIL. TELEPHONE AND URL INPUT TYPES

@webinterface Source: http://caniuse.com/#feat=input-email-tel-url

@webinterface

REAL TIME FEEDBACK

@webinterface Source: http://alistapart.com/article/inline-validation-in-web-forms

@webinterface Source: http://alistapart.com/article/inline-validation-in-web-forms

@webinterface

REAL TIME FEEDBACK IS USEFUL TO PRESENT INFORMATION THAT NEEDS TO BE CONVEYEND URGENTLY AND REUIRES USER´S INSTANT ATTENTION.

@webinterface

USABILITY: INVESTIGATING HOW HUMANS USE THE THINKS WE BUILD.

@webinterface

HTML 5 FORM VALIDATION WITH REGEX

@webinterface

EMAIL

peter.rozek@ecx.io

<input type=“email“><input type="email" pattern="[^ @]*@[^ @]*" required>

@webinterface

PASSWORD

<input type="password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" required>

@webinterface

PHONE NUMBER

<input type="phone" pattern="(\+?\d[- .]*){7,13}" required>

PATTERN ATTRIBUTE FOR INPUT FIELDS

@webinterface Source: http://caniuse.com/#feat=input-pattern

@webinterface

COMBINE REQUIRED, PATTERN AND CSS PSEUDO-CLASSES.

@webinterface

LABEL (:valid)

LABEL (:required)

LABEL (:invalid)

input:required {border: 1px solid blue;

}

input:valid {border: 1px solid green;

}

input:invalid {border: 1px solid red;

}

:invalid, :valid, and :required CSS PSEUDO-CLASSES

@webinterface Source: http://caniuse.com/#feat=form-validation

@webinterface

PLACE TIPS AT THE SIDE OF THE RELEVANT FIELDS.

@webinterface

@webinterface

CONFIRM PASSWORD FIELD MUST DIE.EXCLUDING IT IS NOT ENOUGH

SHOW PASSWORD TOGGLE

@webinterface Source: http://uxmovement.com/

@webinterface

@webinterface Source: http://uxmovement.com/

@webinterface

Password:

<input type="password" id="test1" value="a" />

<input id="test2" type="checkbox" /> Show password

PASSWORD

SHOW PASSWORD

@webinterface

//Place this plugin snippet into another file in your applicationb(function ($) { $.toggleShowPassword = function (options) { var settings = $.extend({ field: "#password", control: "#toggle_show_password", }, options);

var control = $(settings.control); var field = $(settings.field)

control.bind('click', function () { if (control.is(':checked')) { field.attr('type', 'text'); } else { field.attr('type', 'password'); } }) };}(jQuery));

//Here how to call above plugin from everywhere in your application document body$.toggleShowPassword({ field: '#test1', control: '#test2'});

@webinterface

WHAT ABOUT OLDER BROWSERS?

@webinterface

THE H5F LIBRARY, EMULATE THE HTML5 FORMS CHAPTER.https://github.com/ryanseddon/H5F

@webinterface

CONCLUSION

@webinterface

UNDERSTANDING THE CONTEXT.

@webinterface

YOUR COMMUNICATION HAPPENS BETWEEN

DEVICES.

@webinterface

DESIGNING FOR DEVICE ORIENTATION.

@webinterface

INCLUDE ONLY THE IMPORTANT DETAILS IN

YOUR FORM.

@webinterface

LESS USER INTERFACE

@webinterface

SMART FORM

@webinterface

SMART FORM INCREASE YOUR CONVERSION RATE.

@webinterface

DONT´T UNDERESTIMATE THE

POWER OF HTML.

THANKS

…dear Ellen

@webinterface

@webinterface peter.rozek@ecx.io