Login
Readingful's
login process shall handle both teacher and student accounts.
Components
When
the "Login" button is clicked on the homepage,
both it, and the "Learn More & Try Free" button
shall fade out, and a "Username" field, along
with a submit button, with instructional text below it that
reads "Type your username." shall fade in, in
their place. In addition, an "X" button shall
appear to the direct left of the form field, to allow the
user to close the login module, as shown in the first mockup
above.
Username
Field
The
"username" field should be pre-populated with
that word and, when the user clicks or taps into it, said
placeholder text shall disappear so that the actual username
can be typed. The moment typing begins, the submit button,
which begins in an inactive state, shall become active,
as shown in the second mockup.
Submit
Button
When
this button is clicked, the platform should check for a
username match by displaying "Checking..." in
the login heading, as shown in the third mockup, above.
And, when found, the login process shall advance to the
second stage, which prompts the user to enter his or her
password.
Icon
Preloading
Important
to preload both icons used for the submit button, the right
arrow and the checkmark.
Processing
Animation
While
the platform checks for a username, let's briefly show an
animation on the button, holding it for a couple of beats,
to indicate that the process is working, as shown in the
third mockup, above. What I envision here is both the button
background, and the dot in the middle, changing opacity
(much like the 3 dot processing animation on Learningful),
in opposition to one another. In other words, when it begins,
one dot is at 80% opacity, the other at 20% opacity, and
they work up and down in opposite directions. This looks
good in my mind's eye, but may not, in practice. We'll see
how it feels in the end. While this animation is working,
let's also take the username field down to 80% opacity,
collectively, and lock it from editing.
Error
Handling
If
the typed username isn't found, let's display an error message
noting such directly below the login as instructional text,
as shown in the fourth mockup above, and return the submit
button to its inactive state. Also, username text should
highlight a more vibrant color, to indicate failure. When
the user once again types in this field, to make a correction,
the submit button should become active again.
Username
Check
On
Learningful, we limit the number of username checks to a
certain number within a specified time period until a timeout
error restricts function for a period. Not sure what it
is, but it might be 5 or 10 tries in a minute, per IP address
or session. Something like that. We do want to have some
kind of limit here, based on some factor, combined with
number of tries (simply to thwart bots), but its threshold
will need to be much higher than on Learningful. That's
because we'll potentially have hundreds of kids in one school
or district using the same IP address, simultaneously, many
of them erroring when typing the username. Maybe we'll cap
it at 25 errors every minute? Something like that. Regardless,
let's add a 30 second timeout here when the restriction
is eclipsed, as shown in the fifth mockup, above. During
the timeout, the subm,it button shall be inactive, and the
"username" field reduced to 80%, with a lockdown.
Password
Field
When
the username check is successful, Readingful shall fade
out the form field, and changing the login instructional
textto "Type your password." At this state, the
icon on the "Continue" button goes from being
a right arrow, to a checkmark, as shown in the sixth mockup
above. Just like with the "Username" field, the
"Password" field shall begin with its word pre-populated,
and disappear when user clicks or taps into the field. Then,
when user begins typing, the submit button once again becomes
active. Let's not obscure the password entry with dots.
Simply make it visible, by default. This is also to make
it easier for young children to sign in. Clicking the submit
button here should initiate the same processing animation
as outlined above.
Error
Handling
At
the password stage, how error handling occurs shall depend
on whether the username that was entered is correlated to
either a student account, or a teacher account. If the former,
the error should display as shown in the seventh mockup.
If the latter, the eighth mockup. Basically, teachers have
the option to reset via email. With students, there is no
email address on file. The teacher must help the student
directly. When "email login" is clicked by the
teacher, the result should be what is shown in the ninth
mockup, above. Hold that state for 10 seconds, before fading
out the error message and password field, to reset the homepage
to its beginning state.
Successful
Login
Upon
successful login, the message "Success! Signing you
in..." shall appear briefly below the login, as shown
in the tenth mockup, before fading out the elements on the
homepage, and replacing them with the correct elements for
the teacher dashboard, admin dashboard, or the student reading
selection panel.
Case
Sensitivity
On
Readingful, neither the username, or password, should be
case sensitive. This is so that students may more easily
login. However, even so, let's force lowercase entry in
terms of letters, so that the login always looks uniform.
Character
Limited
Limit
Readingful's "Username" field to 48 characters
and "Password" field to 16 characters.
Expanding
Fields
While
the username and password fields begin with a minimum width,
if the typing fills past said width, the form field itself
shall expand leftward to a maximum width, to accommodate
a greater number of characters. This way, no characters
are ever hidden, during login.
Third
Party Logins
Readingful
will not use any third party logins, such as relying on
a user's Google account, etc.
Login
Duration
The
master admin account and teacher accounts shall remain signed
in until 35 days of no activity has been reached. Student
accounts should sign out automatically after 1 hour of no
activity (of not clicking the "Read It" button
for any story or article.
Inactive
Account Notification
If
the student signs in successfully, but the teacher has let
the Readingful subscription expire, the login heading shall
read "Account Inactive. See Your Teacher." and
prevent the student from accessing or using Readingful,
as shown in the eleventh mockup, above.
Styling
Checklist:
1.
x
Images
1.
Login Button Right Arrow Icon: login_right_arrow.svg,
50 x 50, #FFFFFF
2.
Login Button Right Arrow Icon Hover: #FFFFFFBF
3.
Login Button Right Arrow Icon OnClick: #FFFFFF80
4.
Login Button Right Arrow Icon Disabled: #FFFFFF40
5.
Login Button Processing Icon: login_processing.svg,
50 x 50, #FFFFFF
6.
Login Button Checkmark Icon: login_checkmark.svg,
50 x 50, #FFFFFF
7.
Login Button Checkmark Icon Hover: #FFFFFFBF
8.
Login Button Checkmark Icon OnClick: #FFFFFF80
9.
Login Button Checkmark Icon Disabled: #FFFFFF40
10.
Login X Button: login_close.svg,
20 x 20, #FFFFFF40
11.
Login X Button Hover: 20 x 20, #FFFFFF80
12.
Login X Button OnClick: 20 x 20, #FFFFFFBF
Text:
MOCKUP
1:
1.
Login Form Field Default Text: 2.2
rem, #D5D3EA
2.
Login Infoline Text: 2.2
rem, #FFFFFF
MOCKUP
2:
1.
Login Form Field Text: 2.2
rem, #585793
MOCKUP
4:
1.
Login Form Field Text Error: 2.2
rem, #F75843
MOCKUP
8:
1.
Login Infoline Text Hyperlink: #FFFFFF
2.
Login Infoline Text Hyperlink Hover: #FFFFFFBF
3.
Login Infoline Text Hyperlink OnClick: #FFFFFF80
Objects
1.
Login Form Field Background:
294 x 50, #FFFFFF
2.
Login Submit Button Background: 50
x 50, #6C96FF
3.
Login Submit Button Background Hover: 50
x 50, #6C96FFBF
4.
Login Submit Button Background OnClick: 50
x 50, #6C96FF80
5.
Login Submit Button Background Disabled: 50
x 50, #6C96FF80
|
