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

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a Hassliebe Onlineformulare, Enhance your Form for better UX

Semelhante a Hassliebe Onlineformulare, Enhance your Form for better UX (20)

Mais de Peter Rozek

Mais de Peter Rozek (20)

Último

Último (20)

Hassliebe Onlineformulare, Enhance your Form for better UX