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!
My name is Hidde, in Chinese it is 喜德.
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.
I work as a contract front-end developer in the Open Innovation team at Mozilla. I guess Mozilla needs no introduction here…
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.
The Identity and Access Management (IAM) Project is a joint effort of Open Innovation and IT.
It focuses on managing two things that are super related: identity and access.
Identity is all about making sure you can prove who you are and we/the system can be sure you say who you are.
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.
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.
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.
This is the login screen.
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.
If you have already logged in, we'll try to automatically log you back in.
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.
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.
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.
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.
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.
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.
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.
Something else we've given priority to, is support for password managers.
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.
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.
On first time use, we'd like password managers to offer the user to save the login method.
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.
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.
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.
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!
Made with Keynote Extractor.