Common or Best Practice for login form?


Status
Not open for further replies.

JJasonClark

Well-known member
Jul 1, 2019
56
11
github.com
Has anyone thought about a common layout for the SQRL login or sign up forms? Something that is easily recognizable by the user? Such as where and how big to show the qr code, or the polling timeout text, or the placement of the icon, etc. I know there is a common icon image set. What about font and colors?
 
  • Like
Reactions: rxp

shanedk

Well-known member
May 20, 2018
421
113
I think the only specification is the font and blue color for the SQRL link itself. A lot of what you're talking about should probably be left to the designer to work into their own pages. But a list of Best Practices might be good.
 
  • Like
Reactions: rxp

rxp

Member
Oct 15, 2019
14
1
I like the idea of developing a Best Practice example for a login form.

Where possible, I would prefer it the way it is done now on this forum's login window, i.e. with QR code already displayed, ready for scanning, next to the SQRL logo and text:
Log_In_at_sqrl_grc_com.png


Where showing the QR code already on the initial login window is not feasible, second best may be a "link with logo" similar to the ones shown in the following example (no SQRL option yet) for FB, G, GH etc:

Log_in_at_nextcloud.png


At twit.community, for example, where it is already possible to use SQRL to log in, there is no SQRL Logo on the login page yet:

Log_In_at_TWiT_community.png
 

Dave

Well-known member
May 19, 2018
487
99
Gardner, MA
Where possible, I would prefer it the way it is done now on this forum's login window, i.e. with QR code already displayed, ready for scanning, next to the SQRL logo and text:
This has been the topic of much discussion over the past half-decade. Scanning the QR code is cool and demos quite well. And, as you may well know, it was, in fact, the genesis of SQRL with the QR in SQRL originally being from the QR code. But, many people believe that its use is, or will be, a fringe case that will almost never be used. A notion supported by the fact that the QR in SQRL has evolved to now stand for "Quick Reliable". As such, many people are of the opinion that the QR code should NOT be front and center by default where it takes up valuable screen space, but rather should be "just a click/tap away". (Perhaps its visibility could be remembered in a cookie?)

Your opinion is as welcome as any so, feel free to make it known. But I suspect having a larger and more prominent instance of the iconic (pun intended) :sqrl: would be a better use of screen space. It is cute, memorable, and far less daunting for the... shall we say... non-technical... folk. (We like to tread lightly on the references to people of a certain age...especially having just turned the big 0x3C, myself.)
 
  • Like
Reactions: Carl and Sithmagic

JJasonClark

Well-known member
Jul 1, 2019
56
11
github.com
How does this look for the login button?
1583029089074.png

This was made with this

HTML:
<a id="sqrlLink"><img src="/SQRL_icon_vector_outline.svg"><span>Sign in with SQRL</span></a>
CSS:
#sqrlLink {
    display: flex;
    margin: 0.8rem;
    padding: 0.1rem;
    background-color: #007CC3;
    border: 2px solid black;
    text-decoration: none;
    align-items: center;
    border-radius: 0.3rem;
    width: fit-content;
}

#sqrlLink > img {
    width: 2rem;
    margin-right: 0.3rem
}

#sqrlLink > span {
    color: white;
    margin-right: 0.1rem;
    font-weight: 600;
    font-family: serif;
}
 

Dave

Well-known member
May 19, 2018
487
99
Gardner, MA
How does this look for the login button?
View attachment 648

This was made with this

HTML:
<a id="sqrlLink"><img src="/SQRL_icon_vector_outline.svg"><span>Sign in with SQRL</span></a>
CSS:
#sqrlLink {
    display: flex;
    margin: 0.8rem;
    padding: 0.1rem;
    background-color: #007CC3;
    border: 2px solid black;
    text-decoration: none;
    align-items: center;
    border-radius: 0.3rem;
    width: fit-content;
}

#sqrlLink > img {
    width: 2rem;
    margin-right: 0.3rem
}

#sqrlLink > span {
    color: white;
    margin-right: 0.1rem;
    font-weight: 600;
    font-family: serif;
}
Looks good to me. (But they don't let me do design.)
 

Sithmagic

Well-known member
Oct 12, 2019
76
21
Looks good. Wording ok, but what about when signing in with SQRL via OAuth? Would the wording change to "sign in with sqrl over oath" to differentiate, or something else?
 

Sithmagic

Well-known member
Oct 12, 2019
76
21
Just thinking, about words and symbology. This looks good in English, what about other languages? Twit's button uses the symbol for login, so perhaps sqrl -> □ (cant do symbols). Then sqrl via oath would have a third symbol for oath between SQRL and login icon. All in blue.
Random thought over.
 
Status
Not open for further replies.