Having fun with login forms

Image of slide number 1

Hello all! Thanks for having me! I am on holiday here in Taiwan so I thought it would be fun to join this meetup and talk to y'all about login forms!

Image of slide number 2

My name is Hidde, in Chinese it is 喜德.

Image of slide number 3

This is where I live, Rotterdam in The Netherlands. It has lots of modern architecture, because most of the city centre had to be rebuilt after it was bombed in the Second World War.

Image of slide number 4

I work as a contract front-end developer in the Open Innovation team at Mozilla. I guess Mozilla needs no introduction here…

Image of slide number 5

My subteam is called Participation Systems. We work on making it easier for people to collaborate and participate in open source products. One way to do this is to improve the way identifying yourself works.

Image of slide number 6

The Identity and Access Management (IAM) Project is a joint effort of Open Innovation and IT.

Image of slide number 7

It focuses on managing two things that are super related: identity and access.

Image of slide number 8

Identity is all about making sure you can prove who you are and we/the system can be sure you say who you are.

Image of slide number 9

Access is all about seeing the things you should see, after you are identified.

IAM also allows for curating access groups: it lets us give access to things to a group of people.

Image of slide number 10

Mozilla IAM is used by staff and some contributors. They often have more than one identity, and different identities often offer different access rights. Some people have preferences towards which identities they'd like to use where.

Image of slide number 11

The part I worked on is called the Lock. It is a login interface for our Auth0 tenant. They offer a default one, but we've decided to built our own.

Image of slide number 12

This is the login screen.

Image of slide number 13

It allows for login with GitHub and Google, but can also be used with an email address. This uses LDAP if you have a Mozilla LDAP account, or Passwordless if you don't.

Image of slide number 14

If you have already logged in, we'll try to automatically log you back in.

Image of slide number 15

Mozilla IAM is in front of 80 plus websites. When you'd like to login to one of those sites, you're shown this login screen, and your identity is then verified by Auth0.

Image of slide number 16

The most important reason for building our own login screen, is that it allows us to try and make people's experience as great as we possibly can. Today I'll share a couple of considerations.

Image of slide number 17

In what we call “Smart Lock” or NLX, which stands for New Login Experience, or Nice Login Experience, we make sure that the interface is as simple as it can be, and that when use whatever we can figure out, to save users time.

Image of slide number 18

We also try to keep business logic away from the users: their form needs to be as sensible and simple as possible. If that requires us to connect data from multiple APIs together in the back-end, we prefer that over letting the user click extra buttons.

Image of slide number 19

We also try and avoid jargon. The previous login screen had a ‘Login with LDAP’ button, but LDAP isn't clear for everyone who uses this screen. People who don't have a Mozilla LDAP account might not have heard of the term, but even those who do may not be aware that it is called that. “Login with email” as a label avoids jargon.

Image of slide number 20

We've made NLX so that we can tweak according to user feedback. We've conducted some user tests and plan to continue doing them.

Image of slide number 21

We've also made sure the login form is very accessible and verified our work with screen reader users. That might be a topic for a different talk, if you'd like to know more ask me afterwards.

Image of slide number 22

Something else we've given priority to, is support for password managers.

Image of slide number 23

The most secure passwords are long, unique and therefore hard to remember. Therefore password managers exist: they let us have long passwords. We like users to use password managers. So we wanted to make sure they work well with our login page.

So there's a couple of things that fall under this “making it work in password managers” umbrella.

Image of slide number 24

The first thing that is important is that password managers recognise the login screen. That also means that they can find the username and password fields.

Image of slide number 25

On first time use, we'd like password managers to offer the user to save the login method.

Image of slide number 26

Thirdly, we'd like the password manager to fill in fields for users. This can be done automatically, but that has security implications. It can also be done by a click, i.e. the user goes to the password manager and clicks a button that fills in the details in the right place.

Image of slide number 27

Last but not least: there are three things I've learned while building this login screen. They are: use web standards, avoid clever tricks and that multi page is not trivial to implement.

Image of slide number 28

One last thing: our login screen is open source, so if you happen to run an Auth0 tenant yourself, feel free to reuse. We are still working on making it easier to config all the things, but for know, replacing the logo should be fairly straightforward, we already have seen others make use of it.

Image of slide number 29

One more thing… I'd like to mention this conference a friend of mine is organising. It is non profit and about designing and building websites. It takes place in Hong Kong, and I've arranged a discount for us!

Image of slide number 30

Made with Keynote Extractor.