GAMES UX

A UX Analysis of Xbox Passkey

Making account access easier for the user

Maria Meireles
Published in
8 min readNov 3, 2020

--

Xbox Passkey is a 6-digit code that users can utilise to access their Xbox Live account rather than using an email and password. In this piece, I’m going to explore how the Xbox Passkey service could be improved. Let’s dive in.

Image 1: Screenshot of the Passkey screen, courtesy of author.

This method is commonly used because it’s quicker to enter the code than the password — using a maximum of 6 digits instead of having to employ the on-screen keyboard to enter the password.

It also works as an additional layer of security that the users can enjoy on the Xbox to ensure no one without permission uses the console. Like my siblings…

I turn on my Xbox with the controller, enter the Passkey, and I’m ready to play. Microsoft can tell you more about Passkey in detail if you want to use it on your Xbox.

Conditions of play

To begin my analysis, I think it’s important to understand my context. I usually play sitting in a comfortable armchair in front of my 37" TV, two meters or less away from it. I play on an Xbox One S, with that beautiful and ergonomic controller.

What would I change and how?

1. Instruction image adapted to this task

One of the things I investigated was the input instructions image (yellow rectangle, image 2). As you can see in the blue rectangles in image 2, it has iconography associated with the typical media control buttons. I was curious about that, so I raised a couple of questions to understand those icons inside the blue rectangles.

Image 2: Screenshot of the Passkey screen, courtesy of author.

Does this mean the top controller buttons do the actions below them in the Passkey (example X is to jump to the left digit)?

No. I found out it did not influence the input of Passkey digits. Yes, I tried multiple “button” combinations, just like a good fighting game.

Does this mean there is a device without the top buttons and the media control buttons are the equivalent?

No. I went and investigated the devices used to input the Passkey. The Passkey is a feature for Xbox One consoles — users need an Xbox controller or a remote to use it. Xbox also has an Adaptive Controller but, as the name says, it’s an adaptation of the existing controller — the same buttons, just with a different design.

Image 3: All devices that can be used to enter the Passkey. From the left to the right: controller, remote, and adaptive controller.

Do these media icons have anything to do with the Passkey?

No, they don’t. Users don’t need them. I went to the internet and friends and asked them if they knew. It’s the representation of the controller buttons equivalent for controlling media: it tells the user which button to press when watching a video or using media.

Why does it need a change?
It’s not relevant information. In such a simple screen, it can confuse users to think they can use them to alter the digit inputs. They can’t.

What would I do?
Take them out.

Image 4: Redesign of the Passkey screen: bye media reproduction icons, courtesy of author.

2. Allow users to correct wrong inputs

The user who is entering the Passkey makes a slip and enters the wrong digit. What happens? The user needs to complete the 6 digits to try again. There is no “back” button or way to correct any mistake.

Image 5: Screenshot of the Passkey screen, courtesy of author.

And a user can only make three tries — after the third try, the user needs to enter the account’s password with the on-screen keyboard.

Why does it need a change?
It’s one of the most important things we should keep in mind when designing: humans make errors. It can be slips or mistakes, on purpose or not. Still, we make them, and our job as designers is to prevent them from happening by understanding how users perform a task and try to minimise the probability of human error. One of the ways to do that, because even with all the tips and help we still make errors, is to help people recover from errors. Allow them to go back and correct the mistake, to try again.

If you are interested in more information about error prevention check out this amazing article.

I work with critical systems, and I really need to have this on my mind all week:

“…prevent interaction problems from occurring in the first place: either eliminate error-prone conditions or check for them and present users with a confirmation dialog.”

This quote is from Jakob Nielsen as the #5 Heuristic for User Interface Design. You can check the other nine here.

What would I do?
Help users recover by having three extra buttons: to go left, to go right, and to delete.

Allow users to press the LB and RB buttons to go left and right respectively since they are the ones used on the Xbox virtual keyboard to perform the same movements. To make that work I rearranged the digit buttons and used all the “letter” buttons for the numbers. I have also used the menu (three dashes) button to perform the delete action.

Image 6: Redesign of the Passkey screen: the to the left, to the right, and delete buttons inside the yellow rectangle, courtesy of author.

3. Allow users to recover Passkey on the first screen

If the user already knows they have forgotten the Passkey, what can they do? They must enter the Passkey incorrectly three times, then enter the account password (image 7) to ask for help.

Image 7: Screenshot of the Passkey screen: enter the password step, courtesy of author.

Here the user can recover the account password. But what about the Passkey? The user needs to enter the password correctly and then can recover the Passkey on the next screen (image 8).

Image 8: Screenshot of the Passkey screen: ask to change the Passkey, courtesy of author.

Why does it need a change?
It demands three Passkey mistakes, a total of 18 inputs just to go to the account password screen! Once there, you need to correctly enter your password to then go to a screen that asks if you want a new Passkey.
Like I’ve said in the previous point: we should help users.

What would I do?
Create a button to directly recover the Passkey if forgotten (yellow rectangle, image 9). I’ve used the icon representative of the view (two rectangles) button on the controller to perform that action.

Image 9: Redesign of the Passkey screen: the button to recover the passkey on the yellow rectangle.

4. Users don’t know what’s going to happen next

All of this happens without the user knowing they only have three tries to get the Passkey correct or they will be forced to enter their account password.

Why does it need a change?
Users should know what is happening. You have feedback on what you did but not on what the system is doing or on which step of the task you are currently working.

Users should know they only have three Passkey tries just like they know if they have failed a passkey input.

What would I do?
Tell them it’s the x/3 try or they will need to enter the account password.

Image 10: Redesign of the Passkey screen, info below the digit inputs, courtesy of author.

5. Go Back button if the user has more than 1 account

If the user has more than one account connected to the Xbox One, it’s possible to have a Passkey for each account.

When selecting an account to log into, if the user accidentally selects the wrong account, the user can go back and change to another account by clicking on the home button. But the info about that possible (and very useful) action is not available on the screen.

Side note: A controller can be assigned to a specific account, so if the Xbox is turned on with that controller, the Xbox will always ask for the Passkey of that account. In that case, this will happen if the user wants to switch to another account.

Why does it need a change?
If a user selects the wrong account on which to enter the Passkey, they should be informed on the screen of the option to recover from that error. I talked a bit about errors in point 2.

What would I do?
Inform users that they can select another account by clicking on the menu button. If an Xbox has more than one account and the user did not log in to an account yet, or if they want to change accounts, a “Go Back” button should exist on the Passkey screen. This would let them know they can go back to switch accounts or to give up altogether on entering that account.

Image 11: Redesign of the Passkey screen if the user has more than one account on the Xbox — “Go Back” button on the bottom left of the screen.

Final thoughts

I usually say to my coworkers that if they need someone to test something, I’m really good at looking for the fastest and most obvious path without much focus. In doing that, though, I make a lot of slips.

This Passkey issue is something that happened to me multiple times. Especially when I was angry because some game turned my Xbox off or some bug forced me to turn it off, it was particularly frustrating when I was not at home. Someone not used to controllers or consoles wanted to use my console and had trouble entering the Passkey. The media control icons were confusing; the inability to recover from mistakes issue was very frustrating. Even if you’re not used to consoles, you are more than used to entering account information. It’s something that most sites have, BUT they also include the possibility of correcting mistakenly entered digits in helping to recover the password.

Source: Microsoft.

I have recently noticed some changes in the general Xbox user experience— on the main screen and on the store. I’m positive that more changes will come leading up to the launch of the Xbox Series X and I’m pleased about that. Hopefully, the Passkey is going to be one of the updated parts of the UX!

--

--