Optimize ORCiD button placement for all devices

[pablothedude]

The login button doesn't fit on small screens even if they aren't that
small. Now the button is placed above the connection so it will fit.

[MKodde]

As reported on: https://www.pivotaltracker.com/story/show/167167954

[MKodde]

Nice work! Two feedback points:

1. The connected connections will still be rendered in the three-column layout. I don't think that's correct. During my previous changes to this feature, I usually stuffed the connections template variables with a couple of connected and available connections. Even though the 'disconnect' button would probably fit on the third column without issue. I think, from a UX perspective it's best to place interactable buttons on a predictable position. I'm also curious why the buttons are placed above the logo and text. Isn't the point to first inform yourself about the service your connecting to, and then clicking the button. But if PM's are happy so am I :) Just curious.
2. On smaller screens, the text-overflow on the buttons is still an issue. Not something that's easily fixed. But good to discuss with the PM's nonetheless.

[MKodde]

[pablothedude]

1. The connected connections will still be rendered in the three-column layout. I don't think that's correct. During my previous changes to this feature, I usually stuffed the connections template variables with a couple of connected and available connections. Even though the 'disconnect' button would probably fit on the third column without issue. I think, from a UX perspective it's best to place interactable buttons on a predictable position. I'm also curious why the buttons are placed above the logo and text. Isn't the point to first inform yourself about the service your connecting to, and then clicking the button. But if PM's are happy so am I :) Just curious.

I did already test the active connections and found the four columns acceptable because the content is not the same. Because it was a requirement to keep the full text on the button it was the best option to put the button above the text also from an UX point of view it's good to place the buttons on the top left because you also read LTR.

2. On smaller screens, the text-overflow on the buttons is still an issue. Not something that's easily fixed. But good to discuss with the PM's nonetheless.

Good catch, I've shrunk the button text on small view ports.

[MKodde]

Re 1: LTR is better, roger that. But starting a form with a call to action, without informing what you are clicking might not be terribly user friendly? I'm by no means a UX guru, but this raised a smell alarm with me. Also I still think both form variants should look similar.

Re 2: 👍

[pablothedude]

Consulted the PO with this UX choice but haven't heard anything bavk yet. It wasn't shocking enough though to prevent building a release so I'll do nothing with this until a new story is filed.