- This is a first pass at the sign-in window. The sign-in widow is the first thing the user sees – their very first impression of the app. If it doesn’t work perfectly and guide them into the app, then the rest of the app design will never even get seen. So, I suspect this will go through at least a few revisions.
- Although I have some suspicions that the authentication system will change someday, it currently does the Slack-like email auth sans-password. The primary flow is:
- Get the user’s email address
- Request a sign-in email from Micro.blog
- Encourage the user to check their mail and click the link
- The URL-scheme link opens the app with the auth token
- The UI should also provide a really noticeable sign-up link for new users – and (I think) a way to directly enter a token in for the nerds (like me).
- I suspect this entire flow is somewhat “beta mode” – so I don’t want to invest too much time in to smoothing the rough edges (like the token flow), but do want to make sure the primary 1-2-3-4 is really really great.
- The most difficult bit is telling a user they’ll need to leave the app, find an email, and click something. It’s a scary proposition to tell a brand new user that they should look away from your app before they’ve seen it do anything useful at all.
- To smooth this rough edge I added a tiny bit of simple animation. It’s both to visualize what the user needs to do – but also is a way to show that the app is now in a holding pattern until the user does something. It’s basically a really fancy waiting spinner, just in reverse: the spinner is waiting for you (insert Soviet Russia meme joke here).
More View Work
- The sign-in window has a few controls that need to dynamically update and respond both to the user and each other. It would be a great place for systems like React that do automatic control binding to really shine. ((snark on))But, sorry, I refuse to pay 100MB of RAM for that.((snark off)) Snark aside, storing a complete shadow DOM does take a huge chunk of RAM and weirdly, SRAM got a lot more expensive in the past couple years. So, no joke — I’m not doing React until I see real advantages — the real costs are just too high.
- Anyway, I finished (for now) the Outlets and Actions for Handlebar template/views/nibs. Now with a few simple HTML properties with JSON values my views automatically connect controls (any DOM element actually) to class methods and properties. These aren’t two-way bindings — but if iOS can live without bindings for ten years, so can my little app.
Late Update: After a chat showing @manton about the window he says the token-flow is mostly for developers and probably not needed here – so… boom… consider it gone. This gif will probably be the last time it’s seen.
Update 2: The token flow was granted a stay of execution. It’s been a few days since I wrote this post and I’ve noticed that the token flow comes in handy when testing sign-in and swapping between accounts. So I’ll keep it at least until I’m done with testing.
Today’s gif: Shows the progress through a normal sign in. Sorry about the crude covering of the email address. I’m trying to keep these posts simple — so no fancy pants video edits. BTW: I use Gifox to make the gifs. It’s cheap and easy and works perfectly for this sort of thing. 👍👍 (I don’t even know the developer, just like the app a lot.)
Cool stuff to look for: * The error text pops out in red. And disappears as soon as it’s not pertinent. * The color of the Sign-Up button matches the Micro.blog icon — it gives the window some balance — but it’s also nice and bright too: if the user gets here and thinks “Now what do I do???” I’m hoping the brightest button says, “Click me!!!” * As the user progresses through the sign-in the window mode changes — but the layout stays fixed: * top: the info about the current mode * bottom: buttons to help the user break out of the current mode * I know the is a lot of words for a two step wizard. But I honestly don’t think that you can overthink or overdosing or oversimplify a sign-in sign-up window.
/You are correct, I did not once use the word the non-word “onboarding.” This is because i refuse to acknowledge insipid marketing speak. Don’t @ me./
What is this: these are random snippets from my dev journal working on a simple client app for fun. This is a non-serious side project, progresses very slowly, and will probably never see the light of day. The images may not perfectly correspond to the journal entry. In most cases I’ve added them later based on the relative time of git checkins.