Page 1
@webinterface
HASSLIEBE ONLINE FORMULAREENHANCE YOUR FORM FOR BETTER UXWEBTECHCON 2016, MÜNCHEN
@webinterface
Page 2
PETER ROZEK
@webinterface
Page 3
@webinterface
@webinterface
Page 4
WORK @ ecx.io (DIGITAL AGENCY)
@webinterface
Page 6
UX, USABILITY, ACCESSIBILITY, FRONTEND
@webinterface
Page 7
@webinterface
THE WEB FORM IS THE PRIMARY MECHANISM FOR COLLECTING PERSONAL INFORMATION.
Page 8
@webinterface
CONTACT FORM FEEDBACK FORM REGISTRATION LOGIN COMMUNICATION …
Page 9
EVERY USER INTERFACE IS A CONVERSATION.
Page 10
@webinterface
WE HAVE THE SAME PROBLEM WITH FORM.
Page 11
@webinterface
UNBEARABLE
Page 16
NOT USABLE
@webinterface
Page 17
@webinterface
NOT UNDERSTANDABLE
Page 18
@webinterface@webinterface
FRUSTRATING
Page 19
@webinterface
SMART AND LESS UI
Page 23
@webinterface
USER RESEARCH:INVESTIGATING HOW AND WHY HUMANS DO WHAT THEY DO.
Page 24
@webinterface
CREATING PERSONASCHARACTERISTICS OF A GOOD PERSONABUSINESS CASES FOR PERSONASTHE VALUE OF PERSONASUSING PERSONAS THOUGHOUT THE DESIGN PROCESS
Page 25
@webinterface
USER JOURNEY MAP
Page 26
@webinterface
MULTISCREEN DAYFLOW
Page 27
@webinterface
WE CAN EASILY PROGRESSIVELY ENHANCE OUR FORM WITH HTML 5.
Page 28
@webinterface
VISUAL DESIGN: STRUCTURING VISUAL ELEMENTS.
Page 29
@webinterface
VERTICAL NOT HORIZONTAL
LABEL
LABEL
Page 30
@webinterface
PRINCIPLES OF PERCEPTION:
PROXIMITY SIMILARITY CLOSURE
Page 31
@webinterface Source: http://www.lukew.com/ff/entry.asp?1502
Page 32
@webinterface Source: http://www.lukew.com/ff/entry.asp?1502
Page 33
@webinterface Source: http://www.lukew.com/ff/entry.asp?1502
Page 34
@webinterface
PORTRAIT VS LANDSCAPE
Page 35
@webinterface
INTERACTION DESIGN: OPTIMIZING THE INTERPLAY BETWEEN HUMANS AND INTERFACES.
Page 36
@webinterface
DONT´T USE ASTERIKS, MAKE CLEAR OPTIONAL FIELDS.
Page 37
@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
Page 38
@webinterface
LABEL WHAT´S OPTIONAL, GET MORE INPUT.
Source: http://research.microsoft.com/en-us/projects/webforms/
Page 39
@webinterface
IT´S MORE ACCESSIBILITY.
Page 40
@webinterface
USE MAGIC
Page 41
@webinterface
PHONE NUMBER (OPTIONAL)
Example: 0151 111222333 <input type="tel" placeholder=„Example..“>
PHONE NUMBER (OPTIONAL)
<input type="text">
Page 42
@webinterface Source: http://caniuse.com/#feat=input-placeholder
INPUT PLACEHOLDER ATTRIBUTE
Page 43
@webinterface
USE SINGLE FIELD FOR NUMBERS OR POSTCODE.
Page 46
@webinterface
ALLOW INPUT IN VARIOUS FORMS.
Page 47
@webinterface
USE A GOOD SYSTEM VALIDATION AND PROVIDE CLEAR ERROR MESSAGES.
Page 48
@webinterface
USE MAGIC
Page 49
@webinterface
<input type=“tel“>
PHONE NUMBER
039
Page 50
TELEPHONE INPUT TYPES
@webinterface Source: http://caniuse.com/#feat=input-email-tel-url
Page 51
@webinterface Source: http://quirksmode.org/html5/inputs/mobile.html
type=“tel“
Page 52
@webinterface
TO OFFER INPUT ASSISTANCE.
Page 53
@webinterface
<input type=“email“>
E-MAIL
peter.rozek@ecx.io
<input type=“url“>
URL
www.
Page 54
EMAIL. TELEPHONE AND URL INPUT TYPES
@webinterface Source: http://caniuse.com/#feat=input-email-tel-url
Page 55
@webinterface
REAL TIME FEEDBACK
Page 56
@webinterface Source: http://alistapart.com/article/inline-validation-in-web-forms
Page 57
@webinterface Source: http://alistapart.com/article/inline-validation-in-web-forms
Page 58
@webinterface
REAL TIME FEEDBACK IS USEFUL TO PRESENT INFORMATION THAT NEEDS TO BE CONVEYEND URGENTLY AND REUIRES USER´S INSTANT ATTENTION.
Page 59
@webinterface
USABILITY: INVESTIGATING HOW HUMANS USE THE THINKS WE BUILD.
Page 60
@webinterface
HTML 5 FORM VALIDATION WITH REGEX
Page 61
@webinterface
EMAIL
peter.rozek@ecx.io
<input type=“email“><input type="email" pattern="[^ @]*@[^ @]*" required>
Page 62
@webinterface
PASSWORD
<input type="password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" required>
Page 63
@webinterface
PHONE NUMBER
<input type="phone" pattern="(\+?\d[- .]*){7,13}" required>
Page 64
PATTERN ATTRIBUTE FOR INPUT FIELDS
@webinterface Source: http://caniuse.com/#feat=input-pattern
Page 65
@webinterface
COMBINE REQUIRED, PATTERN AND CSS PSEUDO-CLASSES.
Page 66
@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;
}
Page 67
:invalid, :valid, and :required CSS PSEUDO-CLASSES
@webinterface Source: http://caniuse.com/#feat=form-validation
Page 68
@webinterface
PLACE TIPS AT THE SIDE OF THE RELEVANT FIELDS.
Page 70
@webinterface
CONFIRM PASSWORD FIELD MUST DIE.EXCLUDING IT IS NOT ENOUGH
SHOW PASSWORD TOGGLE
Page 71
@webinterface Source: http://uxmovement.com/
Page 73
@webinterface Source: http://uxmovement.com/
Page 74
@webinterface
Password:
<input type="password" id="test1" value="a" />
<input id="test2" type="checkbox" /> Show password
PASSWORD
SHOW PASSWORD
Page 75
@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'});
Page 76
@webinterface
WHAT ABOUT OLDER BROWSERS?
Page 77
@webinterface
THE H5F LIBRARY, EMULATE THE HTML5 FORMS CHAPTER.https://github.com/ryanseddon/H5F
Page 78
@webinterface
CONCLUSION
Page 79
@webinterface
UNDERSTANDING THE CONTEXT.
Page 80
@webinterface
YOUR COMMUNICATION HAPPENS BETWEEN
DEVICES.
Page 81
@webinterface
DESIGNING FOR DEVICE ORIENTATION.
Page 82
@webinterface
INCLUDE ONLY THE IMPORTANT DETAILS IN
YOUR FORM.
Page 83
@webinterface
LESS USER INTERFACE
Page 84
@webinterface
SMART FORM
Page 85
@webinterface
SMART FORM INCREASE YOUR CONVERSION RATE.
Page 86
@webinterface
DONT´T UNDERESTIMATE THE
POWER OF HTML.
Page 87
THANKS
…dear Ellen
@webinterface
Page 88
@webinterface peter.rozek@ecx.io