Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
@webinterface
HASSLIEBE ONLINE FORMULARE
ENHANCE YOUR FORM
FOR BETTER UX
WEBTECHCON 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 PERSONAS
CHARACTERISTICS OF A GOOD PERSONA
BUSINESS CASES FOR PERSONAS
THE VALUE OF PERSONAS
USING ...
@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...
@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 (OPT...
@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 I...
@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 {
b...
: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
...
@webinterface
//Place this plugin snippet into another file in your applicationb
(function ($) {
$.toggleShowPassword = fu...
@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
Hassliebe Onlineformulare, Enhance your Form for better UX
Hassliebe Onlineformulare, Enhance your Form for better UX
Hassliebe Onlineformulare, Enhance your Form for better UX
Upcoming SlideShare
Loading in …5
×

Hassliebe Onlineformulare, Enhance your Form for better UX

622 views

Published on

Formulare und das Internet verbindet eine ewige Hassliebe. Zum einen sind sie notwendig und zum anderen scheitert die Conversion Rate nicht selten an einer schlechten Usability. Responsive Webdesign hat die Situation nicht einfacher gemacht. Verschiedene Formfaktoren und Interaktionsmechaniken sind zu berücksichtigen. Einzelne Formulare oder Formularstrecken müssen für den Nutzer verständlich bleiben und bei falschen Eingaben muss das System eine gewisse Fehlertoleranz erkenn und Kontextbezogene Hilfen anbieten. Zusätzlich gilt für unterschiedliche Touchpoints das Formulare scalable und usable sind. Der Vortrag zeigt mit welchen HTML5 und CSS3 Elementen Formulare technisch Robust werden und eine positive User Experience adressieren. Neben grundlegenden Usability Guidelines wird auch ein besonderes Augenmerk auf den Anwendungsfall gelegt. Zielgruppenorientierte Formulargestaltung braucht mehr als die Einbeziehung grundlegender Usability Richtlinien. Valide Use Cases auf Basis von Customer Journey Maps oder Touchpoint Matrix helfen den Fokus auf wesentliche Aspekte zu lenken.

Published in: Design
  • Be the first to comment

  • Be the first to like this

Hassliebe Onlineformulare, Enhance your Form for better UX

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

×