Improve readability of wp login dialog


Oct 30, 2020
7
2
Here's one of my designs that works well on desktop and mobile. I omitted a lot of the text and instructions because it's just too overwhelming and visually distracting. I also made the entire button clickable/tapable, so you can press on the logo, text, or QR code and it "just works." The "what is SQRL" at the bottom is really where newbies should go because they need a little education on what this is and how it works.

EC7931F6-D2ED-4317-B50C-3FCBBC1BAC84.jpeg

feedback welcome!
 

Dror Harari

Active member
Aug 10, 2019
26
6
Nice Harrison but not too economic space-wise. I am horrible at painting but I think that maybe some conceptually like this will be much better (without repeating the "Sign in with" (maybe the icons should come with the text like 'Google' for the Google icon).

1604191980012.png

Then when you just hover over SQRL you get:
1604192005312.png
Alternatively show the bar for SQRL as:

1604192268951.png
and then show the QR on mouse over
 
  • Like
Reactions: harrisonthesericin
Oct 30, 2020
7
2
here's a quick snapshot of icons only. I Decided it's best to always show the SQRL QR code so that zero action is required by the user. Since touch-only devices don't have "hover on" mouse over events, this will be fewer steps at the cost of real estate.

CCF890FC-EBC2-498B-90EB-F53BE3209FC4.jpeg
 

Dror Harari

Active member
Aug 10, 2019
26
6
Harrison - my first reaction was mainly in order to get a more compact design than the original one.

Regarding the lack of hover for most mobile devices, I think that is not really a concern for the following reasons:
  1. If a QR code handler is installed, just the SQRL icon is needed and pressing it would start the dance within the browser
  2. If no QR code handler is installed, pressing the SQRL icon would pop up this icon so it can be scanned.
Overall, very natural and space friendly - recall that SQRL is not yet the main choice, not even close. Thus, if we can offer a friendly and non-intimidating appearance, we'll be much better off.
 

PHolder

Well-known member
May 19, 2018
1,225
205
IMHO the ideal approach would be for SQRL to be on it's own page, with helpful links and explanations (and thus moving the "pinging" Javascript off the main landing page.) Since you only ever register for a site once, it's silly to have more than a link to a register page IMHO. What would be ideal would be for the client to remember you created an account (used your ID) at a site and then "bookmark" it for you. When you wanted to log in again later, you client could fully automate the whole process without you even needing to see a login page.
 

silversword

Well-known member
Mar 21, 2019
49
9
The first one was definitely the cleanest (not the most compact but I don't think that's much of an issue to consider) and it falls in line with other big website login pages that use OAUTH/alternate authentication sources (stackoverflow as an example).

2020-11-02 15_53_20-stackoverflow login example.png
 
  • Like
Reactions: harrisonthesericin