Hassliebe Onlineformulare, Enhance your Form for better UX
-
Upload
peter-rozek -
Category
Design
-
view
489 -
download
0
Transcript of Hassliebe Onlineformulare, Enhance your Form for better UX
@webinterface
HASSLIEBE ONLINE FORMULAREENHANCE YOUR FORM FOR BETTER UXWEBTECHCON 2016, MÜNCHEN
@webinterface
@webinterface
CREATING PERSONASCHARACTERISTICS OF A GOOD PERSONABUSINESS CASES FOR PERSONASTHE VALUE OF PERSONASUSING PERSONAS THOUGHOUT THE DESIGN PROCESS
@webinterface
E-MAIL *
NAME *
PHONE NUMBER
JOB TITLE *
MARKING FIEDS AS REQUIRED
?
MARKING FIEDS AS OPTIONAL
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
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
TELEPHONE INPUT TYPES
@webinterface Source: http://caniuse.com/#feat=input-email-tel-url
@webinterface Source: http://quirksmode.org/html5/inputs/mobile.html
type=“tel“
EMAIL. TELEPHONE AND URL INPUT TYPES
@webinterface Source: http://caniuse.com/#feat=input-email-tel-url
@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
<input type=“email“><input type="email" pattern="[^ @]*@[^ @]*" required>
@webinterface
PASSWORD
<input type="password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" required>
PATTERN ATTRIBUTE FOR INPUT FIELDS
@webinterface Source: http://caniuse.com/#feat=input-pattern
@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 Source: http://uxmovement.com/
@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'});