Hassliebe Onlineformulare, Enhance your Form for better UX

@webinterface
HASSLIEBE ONLINE FORMULARE
ENHANCE YOUR FORM
FOR BETTER UX
WEBTECHCON 2016, MÜNCHEN
@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
NOT UNDERSTANDABLE

@webinterface@webinterface
FRUSTRATING

@webinterface
SMART AND LESS UI

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

@webinterface
CREATING PERSONAS
CHARACTERISTICS OF A GOOD PERSONA
BUSINESS CASES FOR PERSONAS
THE VALUE OF PERSONAS
USING 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
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
Example: 0151 111222333 <input type="tel" placeholder=„Example..“>
<input type="text">

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

@webinterface
USE SINGLE FIELD FOR
NUMBERS OR POSTCODE.

@webinterface
ALLOW INPUT IN VARIOUS FORMS.

@webinterface
USE A GOOD SYSTEM VALIDATION
AND PROVIDE CLEAR ERROR
MESSAGES.

@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
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
CONFIRM PASSWORD
FIELD MUST DIE.
EXCLUDING IT IS NOT ENOUGH
SHOW PASSWORD TOGGLE

@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
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 INCREASE
YOUR CONVERSION RATE.

@webinterface
DONT´T
UNDERESTIMATE THE
POWER OF HTML.

THANKS
…dear Ellen
@webinterface

@webinterface
peter.rozek@ecx.io

Hassliebe Onlineformulare, Enhance your Form for better UX

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Hassliebe Onlineformulare, Enhance your Form for better UX

Similar to Hassliebe Onlineformulare, Enhance your Form for better UX (20)

More from Peter Rozek

More from Peter Rozek (20)

Recently uploaded

Recently uploaded (20)

Hassliebe Onlineformulare, Enhance your Form for better UX