Daily UI —1st Challenge: Sign Up
I’m starting this series where i go through each challenge listed on the Daily UI Challenge, describe my desision-making while designing an interface, interaction or experience. This will serve as a motivation for practicing my design skills, getting feedback, and sharpening my english writing. I hope i become more aware about my design decisions, learn more about UI design and hopefuly make new designers learn something from this experience. I’ll be focusing almost exclusively on the mobile design fot this series. I won’t be able to make this daily, but i’ll try to be fast between posts. For the deisgn process itself, i’ll be using Figma and the width of the frame will be 360px — Android default.
Okay, done with the boring text. Let’s see some UI !
The first UI to be made is a Sign Up Page.
I wanted to be away from “Dribbble Design” by putting and asking for real world information. The ficticious app is a sports betting one, so it is necessary to input more information than usual, since it envolves payment transactions. As you can see, i added a sign up confirmation page so the user gets a clear feedback and knows what to do from now on.
The top part gives context and state, showing the brand and the options of sign up and login. It also shows clearly the X icon so the user can easily get out of this flow.
The form itself. I understand that the most usable layout of forms is the “one input above the other” layout. The choice of making a grid in which some inputs are side by side is so the form decreases in height and becomes less scary for the user filling it. Some inputs are already so small that doesn’t make sense to take the entire width of the form.
In western society we read from left to right, top to down. So the form has to follow that same rule. I was toke care to make the horizontal distance from inputs smaller than the vertical one. This way our eyes are even more inclined to see sequence on inputs side-by-side.
On all required fields, i put the * indicator, which has become the default indicator for it. This choice came from reading this article on NN Group: https://www.nngroup.com/articles/required-fields/.
When designing these inputs, i made sure to also display various input states:
The first two inputs are in a “filled” state, the date input is visually indicating that it has an error and the ID input is focused and being filled. borders and input text opacity are the best ways to give visual clues on input states. I usually make a scale of input text opacity going from: disabled — 32%, placeholder — 48%, filled- 80%, focused- 96%.
Puting the error message below the input that the error belongs to, is the best approach since it indicates the data to be corrected, reducing user cognitive load.
For the password layout i chose to put the two inputs side-by-side and the “see password” switcher on the side, in a way that conveys that it controls both fileds. All the password rules are shown bellow them so the user clearly knows what is an acceptable password combination before submiting the form. Since this app requires many rules to make an acceptable password, i divided them in indicators that change as the user types, instead of a not interactive text explanation about the rules.
The final options are checkboxes and are put far away from each other so the user won’t press one of them by accident. The icon besides the Terms and Conditions link reforces the idea that it will open a new tab with its content. The “Create my account” button is far down so it also isn’t pressed by accident.
For the confirmation modal, i went for a success message and e-mail confirmation request. It communicates to the user that everything went well and he only needs to check his e-mail and confirm his account creation.
That’s it ! I’m trying to keep it simple but also insightful and reflexive. Now i want your feedbacks on my design decisions and how would you change some aspect of this design. Thanks for reading!
