Millions of insanely creative people draw up user interfaces and interactions screens and put it on communities like dribble. We can instantly spot a few patterns between a clunky design and one that just ‘clicks’ for the end user. Read on and check them out, you definitely don’t want to miss these!
For starters, we aim to keep the number of steps the user has to take to go from start to the intended goal at a minimum. CTA buttons should be well placed and colour contrasted to simplify the user’s choice. We can ask for more details later, our first and foremost goal is to sign up the user quickly before they hit the “wall of irritation”.
The touch interactions here are real smooth and the transitions are clear. Although I would have liked to not have the ‘Swipe up to Start’ (reduce number of user jump points vs vanity coolness), the animation works well and leads to a good one time experience.
The slow colour transition between Login and Sign Up adds visual clarity to the entire process while the number of input fields is practical and low.
This is a definite wow experience for app users.
Source: https://dribbble.com/shots/5580777-Login-Interaction
This is a well done minimal UI with the cute tiny trees and olive green background colour denoting the forest. This sticks to the theme, has clear Sign Up messaging “Protect our Forests”.
The ‘Your Donation’ page has a vertical slider with lots of well thought of space, dollar amount associated with the consequence i.e. the number of trees that the donation can help. The annual impact of the donation is show on a single page while the app thanks the user (positive reinforcement) for their contribution as a post sign up reward.
Text contrast has been used correctly with headings in white with varying shades of olive green used for context.
Has a very classy feel to it all.
Source: https://dribbble.com/shots/13910882-XD-Competition-Forest-Conservation-App
The icons popping out here are the largest CTA on the screen and selecting one is clearly the most important action needed to sign up. The illustrations are clear indicators of what the choices are, the well groomed, bearded guy in the suit on the sofa for employer and the coder sitting on a bean bag with his laptop for a freelancer. The selected option transitions to a larger size and is coloured while the other choice reduces in size and shifts to monochrome.
It’s very clear what the sign up is for and the checkbox at the end has a well thought out description for a newsletter sign up.
All in all, a memorable signup experience for the user.
Source: https://dribbble.com/shots/7158076-Sign-up-screen-for-a-global-writing-freelancing-platform
This is a slick way of signing up or logging in, similar to mobile number and otp. A user enters their email address, a unique “magic link” (whoever coined the term is a frickin genius), is emailed to the user, they click on it and voila! The user has signed up / logged in without entering a password. The ease of use has to be seen to be believed, some of the most popular apps like slack support the magic link authentication.
One of the best ways to sign up in my opinion if you are going to ask for an email address.
Source: https://dribbble.com/shots/8170687–Updated-magic-link-journey
Leave a Reply