A transcript of Episode 182 of UX Podcast. James Royal-Lawson and Per Axbom. A linkshow featuring articles about semantic HTML5 and disabling paste for password fields.

Transcript

[Intro music]

Per Axbom: Welcome to UX Podcast recorded for you here in Stockholm Sweden; I’m Per Axbom

James Royal-Lawson: and I’m James Royal-Lawson

Per: …with listeners in 174 countries from Turkey to Bangladesh.

James: Today for you we have a link show and listeners familiar with our podcast and this particular type of show will know that is where Per and I we talk about a couple of articles that we found on our digital travels around the Interwebs.

Per: I love that you are still using that phrase. But there is one tiny change that happened since we started out and that is that we have gone down from 3 to 2 articles.

James: So to make things a little bit more concise and perhaps themed even.

So today we have two articles for you the first one is The secret of semantics HTML5 document structure — a guide this is by Jason Barnard on SEMrush blog. A very technical sounding article that one.

Per: And the second one is, Don’t let them paste passwords by Paul Moore on his blog, paul.reviews.

[Music]

James: It’s listener survey time. As long as you are not driving right now then do not forget to visit uxpodcast.com/survey and just spend a few minutes answering a few very tricky and complicated questions about the podcast — that is not true they are actually quite straightforward. We just want to know what you think about the show.

[Music]

James: This article… the story begins not with the article but with a question I received.

Per: Yes

James: A question that has followed us through 3 decades of web development and web design — Should you use a H1 heading for your logotype on a website?

Per: So we are talking about HTML code, H1 heading, we usually use h1, h2, h3.

James: Yes it’s the primary — it’s the the main heading of the page and it used to be the case, especially with HTML4, that you should have one heading on the page and it should be the main one. We have argued about this for 3 decades or more — over three decades — should the logotype be one of those big headings or not. Now you’d think by now we’d have worked out the answer to this but it is still something — you can use Google for that question — There is just article after article that debates one way or the other

Per: And you can’t buy a book that will tell you.

James: I don’t think there is a book about this one topic. There’s plenty of articles even these dev websites — not just devs actually this comes into the SEO side of things and accessibility — but we will get to that. The article though I have pulled out to have as our artifact to talk around is The Secrets of Semantic HTML5 for Document Structure. I got this question as I said about the logotype and H1. The question was actually not really about that it was something else. This website had noticed that the H1 heading didn’t come first on the page. There were other H-headings, so there were headings of lower importance that were sooner in the code. Now back in the day that used to be a problem.

Per: Uh-huh.

James: In my world anyway. You can agree with me or disagree but it used to be a problem because the semantic structure of a page was dictated by its headings.

Per: We used to say that there was only allowed one h1 heading per page.

James: And that was true was it not in HTML4?

Per: Maybe it was maybe it was not I do not know.

James: I don’t remember anymore. But it was definitely something that we all said and Google was encouraging if as well.

Per: Yes we used to have all these truthisms.

James: Yes and a lot of them — the coding used to be — there wasn’t a nice split between the structure of the code and the information structure of the page. That was maybe as much as Tim Berners Lee intended in the beginning when we get into the graphical side. I started to kind of answer this question about whether or not the logo should be.. because a logo being H1 was kind of put forward as a solution…to put a H1 heading at the start of a document would be put it around the logo.

Per: Solve the problem on H1 not being first.

James: Yes.

Per: Maybe that is the wrong problem to solve.

James: Exactly. And that was pretty much what I said. I think you should be concentrating maybe more on the semantic structure of the document. HTML5 offers this opportunity for us that we can say this is the header, this is the navigation, this is the article, this is a section in the article, this is a relative bit of content, and this is the footer. In the HTML5 specification you can have a H1 heading in every section, every semantic element of a page. So where the H1 comes does not matter as long as it’s section.

Per: Or as long as it is first in that section or as long it is the most important thing in that section.

James: Yeah. First in a section is what you’re going to say.

Per: Maybe.

James: Yes so I do not think it has to… Oh yeah it should really be first and it should be the most important heading in the section. Semantically I think you can get into all kinds of problems if you’re putting tiny…

Per: Because what happens and what I have seen is that people may be using h2 around the title of their page because they want the h1 to be the title of the blog post or the article because that has more keywords and people assume that if you have more keywords in the h1 that will be better for search engine optimization.

James: This is partly why I love this topic because this still hasn’t been answered and also we have mentioned programming, HTML5 and so on, and the SEO side of things the h1 title is rarely a factor anymore It is one of the 120 but it is not the big thing for the page. Especially if you look at start pages. Often there — or landing pages generally — There is a mix of different things. It’s leading you somewhere else. Like products descriptions or articles you’ve got a newspaper or something you have got all different titles and snippets of texts that lead you onto an article. They are all, in a certain level; they are all pretty equally important.

Per: Which brings us to the point how much of the design problem, how much of a UX problem is this? Do we design artifacts and pages and designs and give it to the interaction designer who gives it to the developer and we trust the developer to make the call?

James: What I love about the semantic element of HTML5 is its information architecture.

Per: Yes it really is.

James: And that is an UX thing.

Per: It should be.

James: Well it is one of the things we’ve all… we’ve talked about this, it is kind of one of our related disciplines but at the same time it is programming, it is code. And Alan Cooper will be telling us at this point “well designers do not need to code” but do we need to know information architecture? And from a design point of view will still have to…

Per: Well you need to know the structure of the page that is presented to users.

James: Yes so in order to communicate to the developer then it would be really good to give them that design, that information architecture design of the page which is the semantic outline of your document.

Per: So there really is an opportunity here — if more designers understood the HTML5 semantic outline of a page they would be able to communicate better to different components of a page and how those can be reused to cross the website.

James: Yes — Atomic design thinking.

Per: Yes like Brad Frost’s atomic design.

James: Yeah. Like a section is a little component of the page. The section often will be part of an article. Which might be your main article which is part of your page. But I also love how — I mean this is a big win for — The whole background of this from this comes from accessibility.

Per: Yes.

James: I haven’t checked the actual background of why we came to the semantic document structure in HTML5 but I know that accessibility is a huge benefit.

Per: Because I mean when you enter a page with the screen reader and you have the page read to you by a machine, the machine needs to understand what is a heading and sometimes that is how you get an overview of a page. Just read me all the h2 headings on a page to quickly find your way across the document so it really helps you in that way.

James: It is also the case that the semantic element automatically turned into bookmarks, AIRA bookmarks?

Per: Yes so you can jump to them straight away I mean if we are talking about back in the day we had these quick links, hidden links in the header that were invisible to most users but could be accessed by your web browser. So you could click on it. “jump to content“ was a common one. Now you can just jump to the navigation, jump to the footer, jump to the article because they are defined by roles — as they are called. And so the role of the main content is usually article and you can jump to that straight away with the screen reader and just jump over it. You do not have to have the whole menu read to you by the screen browser.

James: So the well-structured document is nicely programmed, it’s probably nicely designed, or more responsive, because you thought about the structure of the information as well as part of the design. And also it makes it more, like, get up and go for accessibility in screen readers.

Per: Exactly and also it makes it more compatible with other types of tools so if you want another tool to be scrape the content from that website it is well structured. You could just write a script that could do that quite easily, it would reuse and repurpose content in some other areas and some other tool. So the portability of content becomes much better if you have tagged it so that machines can understand it as well.

James: Machines understanding it — that gets us back to Google aspect by constructing the page better it gives a stronger signal to search engines about what you intended — an aside — this is not the main focus of this content, this page. So you do not need to worry about all the keywords in that one or you don’t need to muddy the search by including that information — just focus on the main article, this is what I am talking about.

Per: So given everything that it is good for it is quite worrying that we are not spending more and more time on this and having more discussions across the different competencies, across developers, interaction designers, even the business and designers about how do we structure a page both visually but also programmatically.

James: I think the semantic elements is a real significant and important central theme for our work in producing great websites or web products.

Per: Definitely.

James: To go back to the article I pulled out for this. I like this article on search on SEMrush which is the secrets of… You’ve scrolled away from the title so I can’t read it, The secret of semantic HTML5 for document structure. The reason why I like it is because it is visual. It has got a lot of nice images showing you how you can structure up a page, how a page can be broken down into different sections. As well as images there are also texts that do a good job describing it too.

Per: Exactly so if you are an UX designer and you have no idea what we are talking about this article gives you a great overview and a quick introduction to how a page is structured to make HTML5.

James: And going back to Alan Cooper saying designers don’t need to code. I think you could argue that the semantic structure of a page isn’t coding.

Per: And that is what I am thinking as well it’s not coding.

James: I think a designer of any flavour can learn things like header, main, section, article, body, footer and so on because these are things we are designing anyway. Interaction designers are designing navigation. If you are an information architect you are really going to love this because this is informational architecture.

Per: and I mean you need to understand the material that you are working with to be able to make good solutions.

James: I see this as a communication tool.

Per: The big question is what is your answer? Do we make the logo H1 or not?

James: Damn it! I actually think I don’t really mind. I mean I can have it…if it is the most important and relevant heading in the section it’s in, which is the header I guess, then I am fine with it being h1.

Per: I think 6/7 years ago if you would have asked me I would have said on the front page on the very start page, on the home page you can have the logo as the h1 but on pages below that you would want to have the title of the article or the title of the page as the h1 because that would be quick access for anyone using the screen reader.

James: I would agree with you. I am actually going to amend what I just said but on the start page I probably would have it as the h1 but on the other pages I would be tempted to have it as the h2. But have the h2 as the first — now we are getting really, now we are getting properly into the semantics.

Per: Yes it is semantics but it is also about structure and how relevant is the content to the person reading the page.

James: And also design because if you are looking at the design of the page. If I want a blog article then I’m going to visually expect the main title heading to be probably the biggest text on the page. That is normally what you do and it is deeply rooted in the design philosophy I guess of presenting information, and the logo it is secondary.

Per: Yes.

James: So h2 putting is a lower rank of heading then fine it is allowed to be h2 in the header as long as there is not anything outranking it there.

Per: I am glad we figured this out.

James: I am glad we did too after nearly 30 years there is an answer.

[Music]

Per: So before jumping into article 2 this is actually also based on a recent experience where I was on my iPad and I was going to buy something quite expensive and coming though the checkout I realized after I pushed next that I actually do have an account on this website but I had no idea what my password was.

But of course being the geek I am I do have a password manager. Remember I was on my iPad so what I tend to do was double tap on my home button, go into the other application which is my password manager, copy the password — which is really complex. I like to keep my passwords complex I have no idea what most of my passwords are. I find them in my password manager that’s how they stay secure. Copy it. Return to the other application which now is full screen on my iPad, tap on the field and paste. Nothing happens; I tap again because that is what you do when something does not work you try it again as if the computer has not worked.

Which it obviously had and somebody of course had disabled the functionality of being able to paste into a password field. And this isn’t something that is totally uncommon it does actually happen but it completely breaks my workflow and on the iPad and of course I have to back to my extremely complicated password to remember them four characters at a time and go back and forth to complete my password and log into the website to be able to but what I wanted to buy.

James: That is my experience as well with the credit card field, I use a password manager but it also has credit card details that you can use to fill in.

Per: Exactly.

James: But it can recognize these fields automatically and you fill them in and this website — it was a travel website — so I was buying tickets and I think it did two things. It disabled paste, and it also had incorrectly labeled the roles of the form fields. So the password manager did not know which field to paste into and I couldn’t then go in and manually copy the credit card details and paste them because that was disabled. So it was broken on two levels.

Per: Oh there is so much broken.

James: Yeah.

Per: Which brings us to the article by Paul Moore “Don’t let them paste passwords…” in which luckily for us actually he argues that you should disable password fields and the reason for this is quite complex. He deems that it’s actually safer to ascertain if a person is a robot or a human by looking at how the person types the passwords. So you can actually determine if it is a human maybe even down to who it is by looking at how you enter keys or characters into a field.

James: This is basically the same as Google’s I am not a robot?

Per: Oh yeah, that is similar.

James: Because that’s based on the way that you move the mouse and so on there is a way humans are doing it and there is a computerised way of doing it.

Per: It must be very much like a robot when I do it because it always gets double checked when I do it.

James: So he’s saying that by forcing people to type in a password you can analyze their typing style and check with the history of typing style and then you know it is that person, or you know it’s human.

Per: Exactly and if I remember correctly he also makes the case this is I think what many people have argued in the past that if people have to type it then you are quite sure that they are remembering it but he correlates this with if you can type it quite quickly then you are remembering it. But in my case what I do is I do not remember passwords and that is how I stay secure.

James: Exactly I can buy this that you can tell if someone is human even tell if they are an individual because of their typing patterns but this is kind of almost encouraging the behavior of one password all sites.

Per: Yes exactly.

James: Because for you to remember it stays in your fingers you and actually produce it on demand which we know is an awfully insecure way of going about passwords.

Per: Yes it is terrible I am worried by the way that he recommends this but also because he is now saying that we should break the standard default behavior of the web. Which allows…

James: Computing in general because pasting…

Per: Yes exactly.

James: Is not just a web thing that is something that we are expecting.

Per: For many people it is probably the most used command on a keyboard, Ctrl C, Ctrl V.

James: And also it is integrated in a lot of different ways between accessibility and how you use things this is not just kind of an add-on feature.

Per: Exactly. So when it works for me like 70/80% of the time and then it does not 20% of the time that has nothing to do with security at all. It just makes more hard for users to — and in my case I was buying something. If I had not just had the intent it is actually continue going I would not have bought that product because I did not want to enter all my details again once I knew I already have an account.

James: There are at least two aspects of this; one of them usability or even accessibility but usability you don’t mess things up that are standard and you don’t make things awkward so breaking password managers or breaking paste isn’t something that you do and I do not buy that doing it for security is a good enough reason. Then the second aspect is implementing what they he call it — behavioral biometrics which is a phrase that is scary in itself. Recommending that you implement behavioral biometrics on your website rather than, for example, get rid of your passwords.

Per: Yes which would be a much nicer route to go down actually.

James: It’s one that I prefer. I don’t believe in passwords at all anymore and I think this for me it just backs up my arguments on why passwords are really really bad ideas. It results in this kind of creepiness.

Per: Just in case you are wondering what we are saying you remove passwords altogether it is not something that we just made up it is something that is happening across the web. I got into more websites and email and a unique password is sent to you then you have to log in using that or even two step verification you can get a text message and that is one way of getting rid of passwords. So we are moving in that direction already. I just want to revisit the point about… that he is making, so he has heard about this that it breaks password managers.

James: This one of the myths or excuses why you would disable.

Per: So he has even made a video showing that no they do not because in his case he was able to use a password manager regardless of whether the password field was disabled or not programmatically. Now there is not a single way to programmatically disable a password field so that is one use case that he has probably not tested enough. This is also a specific password manager and specific browser that he is using to show us that no, they don’t disable password managers. So I think we need to do a lot more testing. Also of course it is not an iPad; I was on an iPad you have to remember that you cannot keep track of all of the different use cases and all the different devices that are coming out. If you start going away from the default start to standard behavior you better keep track of that for all the future devices coming out.

James: Of course you know as well as I the best way of winning an argument is taking a very, very specific use case and pushing it in your face of people that disagree with you.

[Laughter]

Per: That is very true so yes big message there to a lot of designers out there is remember if you are using passwords do not disable the password field.

James: Encourage your developers to label them correctly and do not disable paste.

Per: But having said all that I still think you should go and visit this website and read Paul Moore’s article because there are some very interesting stuff out there regardless of whether we agree with his premise or not there are some really interesting stuff around the biometric stuff that I was not even aware of that people were doing.

James: And what you can do with it I think it is absolutely fascinating I said I maybe don’t agree with the application to do with security and passwords but very interesting that behavioral biometrics is a thing and was it keystroke dynamics was another phrase… yes keystroke dynamics was another phrase, systems monitoring how you type and the path you type. Like the signature is unique for checkbooks and so on now the typing style is also unique like a fingerprint.

Per: Right and do not get me into how that could be misused when related to GDPR.

[Music]

James: I do like the way that we have linked together the design with code and usability and going back to our original little intro text we used to have before we started the podcast.

Per: Yes that is right.

James: We were still using it last year to bring together people; technology and business hope I have not said the wrong thing now haven’t I?

Per: No people, technology and business. We maybe have used the word users before many years ago.

James: We did use users before. We are at that epicenter of these different technologies and I love the fact that these article do talk about how usability is impacted by the way things are coded.

Per: And such a good reminder that we can never forget about the technology. We always say well the technology comes last, users come first. But no it all works together it’s like a mix of up stuff that has to come together and fit perfectly within each other. Nothing is more important than the other because if it is then the other suffers. So we need to think about it all, we need to be better at communicating with each other because developers do not know the structure, they do not think about the structure that way. They are aware of what code is available but we need to also agree with them where the different content bits go.

James: Yes just as maybe the coders themselves are not designers or information architects then we’re not coders so we all just have to get along.

Per: Have conversations.

James: And that’s ended up being a little bit shorter episode than normal I can imagine I just have these mental images now of the people kind of standing still halfway through their parkrun or whatever and wondering what do they do now. There is no more podcast or they are getting out of the bath and the water is still lukewarm.

Per: Well all the people doing the dishes you have not finished the dishes. So it is all stacked up there!

James: 3 plates left! Oh god see what we’ve done. We’ve broken peoples worlds. I promise we will be back up to half an hour next time. Thank you for spending your time with us. As always links and notes from this episode or at least the links to these two articles can be found on uxpodcast.com remember to keep moving.

Per: See you on the other side.

[Music]

James: Knock, knock.

Per: Who is there?

James: Alien.

Per: Alien who?

James: How many aliens do you know?

This is a transcript of a conversation between James Royal-Lawson and Per Axbom originally published as Episode 182 of UX Podcast.

Header image by Holger Zscheyge, slightly cropped (CC BY 2.0)