Best way to register and login within the same form

Question

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 1

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.

Answer 2

Since there is no actual authentication of credentials to access the system, you don't need to have a "login" form and a "registration" form (quotes because you're saying there are no user accounts).

If users submit content only occasionally, you can do away with the separate screen altogether and just prompt them for their name/username/e-mail in the content submission form.

If users submit content fairly often, asking them for their name/username/e-mail will be an annoying, repetitive step. Then you can create a simple welcome screen for first-time user experience like below and move the editing feature of the field into app settings (add a property called Username).

Edit

Since the comments revealed that users should be able to use the app anonymously, I added the anonymous access button. The copy of the welcome message and button labels should be tested with actual users for clarity and ease of use.

^{download bmml source – Wireframes created with Balsamiq Mockups}