Best way to register and login within the same form

I have an app in which users add items to a database that is synced across all devices. I need users to login in order to attach an author to each item and to record how many "points" each user has accumulated. Right now my login form looks like this:

When they press the "Off" toggle button, the "Register" button becomes clickable, but this system is confusing to my users.

Given the way the system works, my users only need a unique username, they don't need a password or anything else. The username is checked against a cloud database to make sure it is unique, and I want users to be able to use the app without picking a name.So having separate "Login" and "Register" forms seems ridiculous, I have already read this question, but the thing is, in this case, registration doesn't require extra information, it just requires a different script to run. Is there a clean, easy to understand way to do this?

Answer

Wow, what a pleasantly different experience. Unfortunately, this user scenario puts you at odds with just about every login/register experience on the web.

This means you'll be fighting a unique UX battle if you don't go with the industry-standard process, which separates login and registering. As is always said, don't reinvent the wheel.

I would recommend giving the user the choice at the start of the process:

LOGIN || REGISTER

Clicking one or the other would display the form field, the "off" option and a Submit button.

This makes the journey very logical and clear for the user:

1. User decides whether they are logging in or registering. You could start with the Login selection opened by default and the register option as a second tab option


2. User enters related registration information


3. User chooses the state of the item



4. User confirms choice

With your screenshot above, the journey could be:

1. User sees form field, but is unclear what to put. If they are new, they do not realise they can enter a username without a separate registration.


2. User sees the off button.


3. User sees the "Register" button. Now they realise they can register on this page and move back to Step 1.


4. User is at Step 1. and enter their information


5. User moves to click register button

EDIT: I'm working on the assumption that once logged in, you will no longer see this option on future actions.