skip to main content
2020-03-10

Munich Foundation Login Page UX Changes

User workflow necessitates layout change for better UX

Intro

The Abstracts module has fairly rigid design and structure, and the output html is not accessible to edit so its not possible to change the DOM unless you run javascript to move elements around. Which we have done before.

But it gets really messy after that.

Especially if the software gets updated, a class or ID changes or a span appears and the selectors no longer match.
So we stick to using css as much as possible. This means sometimes less things are possible, but at least it feels less hacky?

So starting out we have the default layout after we apply a styling for the client (a.png).

initial login page

For this client, the the first action that a user needs to take isn’t them logging in, but them creating an account.

This action is hidden almost, tucked out of the way as the third item that you can see when scanning the page.

  1. Log in
  2. Forgot password
  3. New User?

Ideas

The first idea was to turn it into a button and leave it where it was (b.png). BUt this looked odd next to the floating ‘forgotten password’ link that wasn’t quite a button.

first idea

The second idea (c.png) was to seperate it out further and push it down the page, while making it bigger than the other text. This sort of worked but then it seems further away from the form again and now nothing seems linked or connected in any way.

second idea

The Final option I settled on was to combine both (d.png).

The ‘forgotten password’ link is tied with the form above so it makes sense that it sits nearer the submit button or the form itself. Then we turn the ‘new user’ secondary call to action into what would be a secondary button style or ghost button, and position it down and to the center.

final idea

Review

I’m not sure this pattern makes sense overall in general. But with the constraints we have where no structural changes can be made and the clients requirement that this secondary action be promoted to more visible I think we’ve reached the best conclusion.

Given greater resources or access to the platforms core code there are many alternatives that could be achived.
If creating a user is the primary action then it should be promoted to such.

It needs to be higher up on the page and more visible.

Or another approach could be to move the sign up form into the same page either below, or side by side the login form.

Even some form of detection to show that the user who clicjed the link is not yet a user so automatically takes them to the sign up form could be an option.