 Yes, I'm going to talk a bit about the first contact whoever thought of you thought it's about this first contact Has now the chance to leave the room. I'm not going to talk about this I'm going to talk about things like that Registration forms Why the first contact Well your registration form or your order form actually is the first contact a Possible customer has with your website Well, they're on the website before aren't they but to be honest everything else everything before that is just advertisement You have a nice shiny website and as soon as you get to the registration process That's the point where well where we actually talk business Yeah, who am I you already introduced me. I'm a Kind of regular speaker at conferences. I'm actually a software developer at a company called bit expert. I do co-organize a user group I Created peach p.u.g. I'm involved in calling all papers. I do maintain open source stuff and whatnot Before I start I want to give you a Short disclaimer. This is a rent. I'm not a UX person. I am a peach p developer. I'm a back-end developer actually I'm not a lawyer And I can't write obviously I'm just a user. I'm just a person that has to use these registration forms And this is most of the time just what I encountered and what just doesn't make sense And yes, high school of street knowledge and whatnot What am I going to talk about or what what do I want to show you some examples this for example is a registration form? I'm pretty sure a lot of you already have seen that and already have forgotten about it This is a Not so nice example This is a pretty cool example actually. I'm pretty sure every one of you has used that one and already forgotten about it and This is also a pretty cool one Also, I think most of you have used that one One that most of you probably haven't used is this one So which of these three would you which of these four would you like to actually use? I'm pretty sure this is not number one A short side note if I'm pretty sure there will be some questions The times I did this talk before It happened that from these questions there was a very great discussion evolving, but that would just kill the time limit we have here, so please Talk to me afterwards and then we have a great discussion about that so What is the for me the most or one of the annoying things here is They are calling for a first name and a second name. So let's start with names Who of you has ever thought about names? I'm pretty sure most of you do a name field or do something like this when they have to Require question name from a person. Give me a given name. Give you give me your family name Who hasn't? Well, okay So from my name that is pretty easy first Given name is Andrea's family name is Heigl perfect. Yeah, cool What about this person? This is professed dr. Dr. HC mine right Wolfgang first to ever first and all well This professor is actually part of the name But it's not the given name. So the given name would be well mine. Rad Wolfgang. Okay, that would fit and The family name would be yeah. Well actually it's just about first and all So this person would have to butcher his name just for your form Okay, but not really nice And what about this person or this person who of you knows the the upper one Björk Gutmunds dothier That is not it is a second name, but it's not a family name Gutmunds dot here is Father's name also been Osman been Osman means I am Issa the son of Osman The other the one above is I'm Björk the daughter of Gutmund So this good ones dot here and been Osman is not a family name It's a well Something else. Okay, so Let's do it a different way. Let's say first name last name. That's that's okay. That should work shouldn't it? Well, okay No, this is a common name in Sorry, Arabia and in Muslim countries. It's I'm Abu Father of Muhammad the beautiful Son of Abdul Aziz the Palestinian Okay, so which part do we fit where? Or what about this lady Madurai money here in this case Madurai is actually the village That woman comes from money is actually the name of the person the given name and Yeah, is the caste name That's a typical Indian name Doesn't fit and What about this one? Who of you knows that person? I'm pretty sure most of you know That's the writing this writing is pronounced Mao Zedong So in this case we have a first name which is Mao But actually Mao is the family name So if you put that into first name you don't get what you want Which brings me to exactly that What do we actually want? First one we take a take from that there might be no family name There might be no middle initial Looking at those American people and the main question is is it actually necessary to know how that name is split up? Do we need that and if so why? So instead Why do we not just use one field? please give me your name and Then you can put in whatever you want and yes, that might be longing put There is this wonderful sketch from from Monty Python with this Gumbo putty whatever Ban Wagen Farah of all Which is a name of I don't know a thousand characters or something like that. Yes, it is a sketch But still there might be long input and There might also be non-askai input whether that's just German umlauts or French axons or Well Mao Zedong Chinese names So if you have Chinese names, you might perhaps want to use a transcription field If you need to know how the name is pronounced or transcribed into our language or the language that you are using and Please also clearly label your fields, which means for example use something like previous name Instead of maiden name It's not only women that change their name And I'm not the only one thinking about that actually Worldwide web consortium thought about that and that's where I took all that stuff from so what's next? What usually comes if people want to split up the name field? Yeah Well, but we want to know how to address that person We want to write a letter to dear mr. Smith or dear mrs. Smith Which brings us to the next thing gender and Yep, there is male and there's female and By now we know there might be something else Gender is definitely not binary So also having a field in your database like male Yes, or no, no, which does not mean the male, but you know what I mean So the main question is do you actually need the gender and if you need it? What do you need it for is it marketing that want to address mr. Smith or ask for pronouns for example? That might be a possibility Or just add a field hey, how do you want to be addressed and Then the person can put in whatever they want and I'm pretty sure if they want to add They would want to put in Superman in here They will grin every time they get a newsletter to a high Superman and that's okay. You don't need that actually also Have a look here Okay, so we have a gender we have a name What do we need most of the time also we need emails? That is one of the points where I think this form is a bit weird because Do they think I'm stupid Do they actually think I'm stupid I'm so stupid that I can't write my email twice That I have to write my email twice that I can't get it right on the first try I mean in the password field, that's okay because I can't see what I type in usually but hey really There is no need to request the email address twice Because You don't ask them for their physical address twice. Do you if you want to ship something to them? But sometimes that would be helpful my wife just recently had that because they got a parcel back because she wrote the address wrongly but No one does that because you will send an opt-in email anyway. There is no other way around at least in Europe by now and People will notice whether they entered the wrong email address or not. Well now you might say All right, of course allow the people to change the email address now you might say Yeah, well, but what when during the registration process that doesn't work and that's far too complicated to have the Possibility to change the email address during that. Well actually no, it's not Just just a few days ago. I had to register for open-caged data and I of course I entered the email address and Clicked on the on the button and was like hey, that's cool. That's really nice Please check the link in the email. We've sent to yes the email address And you did not receive the email Well, then either resend it because whatever gray listing and stuff like that or change the email address because you suddenly realize One F too much or too less or whatever That's a cool way and you definitely don't Need to think or to give the customer the impression that you think they are stupid They will realize here and one of the things I notice That doesn't count for these things But when you have a contact form on your website and or you have an order and use Request an email address. Please always send a copy of what you are sending via email also to the user Nothing is worse than writing Well-crafted message into a contact form and hitting send and gone Yes, they the address he gets whatever you wanted, but you don't know what you wrote after a week. So Keep that in mind There is also some reference to that Whatever Okay, I think we've addressed almost all the important things, but then a few things creep up every very regularly One of these is dates. Yes. I'm very fond of dates. I'm not going to talk about that Don't worry There is an RFC and I'm going to leave it there if you request a date Try to make it RFC compatible or at least store it in that way If you order it from the least precise to the most precise it is very easy to understand So that means year month day our minute second you can For the date you can do it the other way around as well works also So that means date a day month and year Please do not mix up month day year, which is completely nonsense But if you request a date, please make sure that you tell me what you expect me to insert If you request it to be month day year, please tell me so in advance And the best thing is use input type equals date. There is a form field for that. So use it Or if you can't use that use a date shim or whatever date picker what not and Then we come to validation. Please. Please. Please validate fault tolerant Even though you told me to insert DD dot mm dot y y y y I might enter one dot twelve dot 2001 and That is not wrong. Just I just skip the initial zero I'm sorry about that But that still is a valid date and you know what I want what I meant So please do not give me that as an error. But the main question is What do you need a date for anyway? I Mean if you if you want a shipping date, I'm not the person telling you when you can ship my items usually not So something like ASAP is okay But most of the times it's about birth date People want your birthday my birthday What do they need it for? Do they want to send me a birthday email? Well interesting idea, but We come to that later But most of the time it's for age verification Well, who of you has in their whole life never ever faked birthday Thank you very much You get the picture. Yes So why not add something like this just a checkbox? Yes, I am legally entitled to buy beer because that is what you're talking about Otherwise you have to do the maths and This is a very very weird thing. I haven't seen that anywhere so far But I mean we are using checkboxes in yes, I've read the terms and conditions so why not this if That doesn't work as I said, I'm not a lawyer That doesn't work. There are enough other ways to to verify your an age by using personal ID card or bank accounts or whatever So if you want an age verification Do exactly that an age verification and don't ask me for a birthday There are also some references. I'll skip those you can Go through them if you want to go through the slides later on As I said birthday people want a birthday usually and that brings me to required fields which fields are required a Required field is a field that you need To actually provide your requested service So if you want the birthday for the marketing to send you an email address an email on your birthday That's usually not the service you are providing So Everything that you do not explicitly need Should not be a required field and if you have required fields clearly mark them as such an asterisk is by now De facto standard can do something else put in in Brackets required whatever you want, but please label them clearly. I'll show you later why References I didn't put up links Either legal regulations what you need or its GDPR, which means don't ask too much That is a very very low level explanation. I just don't want to get into deep into detail here because that is a never-ending story But as soon as we have this thing with the with the required fields we come to error messages Error messages nice funny thing an error message Tells me that something went wrong. It should tell me what went wrong And it should also tell me what I can do against it or whether I can do something against it In API design if you return a 500 error that means I'm quite sorry I fucked up, but you as a user can't do anything about it fine. I know what I'm what's going on I can't do anything Might not even be my problem I Get an example. I try to enter this talk for another conference Which one was it? Oh peach pizzerbia. I think And I enter my the stuff in there perfect everything's fine submit my talk. Yes, I'm ready to go No, I'm not the first thing was okay if you have an error message, please Please do it in a way that one can read it actually But I'm not going to into detail on that Okay, there was an error I corrected that error that it I was told here and then I hit submit again and I Got another error What the hell really? Please please Present all errors at once. I Don't want to fix one error just to be reminded. Oh, and you fucked up here as well Oh, and here as well. Oh there as well. You know what I'm going to buy somewhere else So please present all the errors at once and also please present them where they can be fixed makes it much easier for the user just Around a red border around the field here. This is the this is the problematic field please do this to fix that problem and Provide end user compatible messages The reg X slash blast of what not slash did not match. Yes, that's technically perfectly correct But as a user well, okay, I can understand it probably but most of the users can't So use end user compatible error messages And also provide actionable error messages. You fucked up. Yes. I know that what can I do against it? Like this is not the correct date format. Okay. I get that. What can I do? To fix that. Oh, I have to add a zero in front of it So tell me that and The interesting thing was I was looking for for references for for these error message things and I came over a Block from 2008 that is 10 years ago that mentioned all these things So nothing has changed. Please. Please start okay one thing I've actually forgotten when I register well, okay when I when I go to a shopping site, I'm doing my shopping everything's fine I'm I get through with that. But when I want to register for github git lab Twitter, whatever I Need another thing But which is a required field in a way, which is a password? Well, what can I say about passwords? the easiest thing about passwords is Try to avoid them Not from a user perspective, but from your perspective because what you don't have you can't lose as easy as that So if you are able to use external sources like for example or off or Sammel or LDAP or Kerberos or whatever Use them makes it easier for the users because they don't have to remember 15 different passwords And it makes it easier for you because you don't have to remember password at all because you don't need to store it You just request check with someone else. Is that correct? Yes, it is. Thank you If you do something like that, especially for all use different providers It's nice to have a Facebook login button, but there might be people that don't use Facebook I've heard that Well, there might be people that don't use Twitter I had that actually when I on on PHP dot UG where people could log in only with Twitter Yes, do as I say not as I do and Someone contacted me from China and they said yeah, that's nice, but we can't log in because we don't have Twitter here I was like oh interesting. Okay, so I should do something against that And then I introduced GitHub login as well. So use different Providers to make it easier for people and if you have to do passwords don't roll your own crypto and So far I didn't say a word about PHP Now I'm going to say something about PHP Because of course we always hash passwords and if so we use the password hashing API in PHP. Don't we? We do yes And of course avoid leaking passwords in clear text Yes, of course, we don't we can't leak passwords in clear text because we how we only store the hashed value That is correct But think about the user enters that the password and then the password gets transferred in clear text to your server well Encrypted by HTTPS, but still within that tunnel. It's in clear text so your scripts get the password in clear text and within your script It's still possible to actually leak that password by Weird mechanisms that I encountered in Magento where you can hook into any function you want And you can do anything with the input that comes into that function. Oh interesting I Write a plug-in that everyone needs like what was that? Left What was that? NPM package left pad exactly that everyone needs on their magento side and suddenly I have all the passwords awesome I think about stuff like that and if you have passwords don't force Passwords requirements apart from a minimum length what I give you something later If people put in their password show them some information about password quality there are enough libraries around there Encourage users to use a passphrase So not just the eight characters or nine characters Encourage them to use something longer, which is much easier to remember Allow them to use password managers Never ever limit the password link if you limit the password length I have to think that you are storing my password in clear text Because otherwise when you are hashing my password it has a fixed password length No matter whether I enter hundred characters or five So if you require just between eight and sixteen characters of a password Oh, you're storing that in voucher 16. Thank you. Um and also For company stuff There's always this nice thing like oh you have to renew your password every two months ditch that Because What's going to happen is either the passwords will be Well, they have a have a scheme so you can guess the password or the password will be able to post it somewhere Have a look at the monitor. Have a look under the Placement or have a look in the drawer So don't do that and I'm not the only one doing is saying that You'll see that and we probably all know this one this XK city This troubadour and three is extremely hard to remember at least for me If it's easy to remember for you, that's fine, but it's very easy to crack actually But the correct horse battery staple, which is rather long. It only has characters It only has under case a lower case characters But that's much much much harder to guess for a computer, but it's much easier to remember for me as a person Keep that in mind when you do some stuff with passwords Some resources the National Institute of Standards and Technology, which is the advisor to the NSA for example Says exactly the stuff I've told you the National Cyber Security Center, which is the other per the people advising the MI 6 Do say that have a look at have I been pawned? There are some Libraries some packages that you can even include in your password creation mechanism So if someone enters a new password you can verify whether the password is also already has already been pawned and can tell the user Are you probably should use something else? think about stuff like that and Having said people want to use a password manager. I have to tell you something about copy and paste I think it's only one thing. I have to tell you Though shall not disable copy and paste especially not on password fields Because I want to paste them in because I want to have secure passwords And everyone who says yeah, but when you can paste them in then there might be a tracker that might be able to grab them from that field Yeah, if you have a grab on that computer, you have a completely different problem and that is not yours Yeah Also the National Cyber Security Center has a nice article on exactly that Which I linked there So what people tend of course to forget their passwords happens So what do most people use they have a security question? well interesting thing try to avoid them and If you if you need them, I mean if it's a small company and you have one or two people per year doing that Hey, let them phone you it's cheaper than to develop all that stuff behind it And if you have to use them don't use predefined questions Make up your own set of questions or let the people get Think of questions because otherwise well One of those security questions is What car you learned to you learned to drive on People are happily answering these things on Facebook on Twitter on whatever or something like that What was the name of your first pet? So thanks social media. I know all the password. No, I don't know all the passwords, but you get the picture Security questions are a backup password That is easier to remember as a part than a password which is kind of Doesn't make sense well Cribson security wrote something about that have fun and then of course we don't want bots So we have to have a capture. Don't we? anything else and In in most of the captures as well at least when you use recapture We have to identify that we are a human person by knowing how a stop sign looks Does that make a Tesla a human person or any other automated driving car? So Captures are just ugly They are not really nice looking They are hard to read and They discriminate users with disabilities unless you have some Advanced technique behind that you can request them to listen to something and enter the stuff or whatever and They use the users as workforce we every time you Don't solve a capture by not clicking all the stop signs a Tesla will cause an accident Well kind of you know, you know what I get at But still we need some protection so what are the alternatives one of the alternatives is a honeypot who have you has heard of a honeypot Okay, so for the rest of us a honeypot is a trap. It is a field that is within your form and Usually the the spammers Grab your form and see how there is a field so I enter something but you require this field to be Empty So as soon as someone enters something, you know Got you that spam so just filter it out There are a lot of libraries around to use that something like that. There are simple math captures What is three plus five? They're easy to solve for most of the people. Well, you probably shouldn't ask for the square root of pi, but okay, and if it's about Accessing stuff use two-factor verification helps as well And then I stumbled upon uncapture who of you has heard of that. That's a pretty awesome project they actually automatically solve recapture by requesting the audible version of the capture Which comes from Google feeding that to the Google key Ki To solve that so they get the what get back from Google what they have to type in there awesome project I really like that Yes That's it any questions. Let's talk in the hallway short one Which brings it brings us to an interesting thing Yeah, sorry, there was no sign was there a sign the question was how to solve the problem that We don't remember which third-party authentication service be used for a certain website so I can log in via Twitter a GitHub what not Which one did I use here? Was it Twitter or was it GitHub? Oh damn it One of the things I've seen so far was pretty interesting Which required you to use the same username on Twitter and GitHub but the the idea is Use you distinguish between a login and a user account So you can have multiple logins for one user account And then it was like oh Could it be that we have that you have the login from Twitter? And then please verify that you logged in via Twitter and I okay. That's the same and then you can log in via GitHub or Twitter In future times so that would be a possibility No, if you if you have to log in via Twitter afterwards, it's not Of course, otherwise it would be yes. Oh, thank you. We got your name. Is it possible that you are this person at nope Probably not the best idea Yeah, if you don't have any question other questions now Thank you very much