UI/UX Wireframes for Sign in/up Forms: Do's and Don'ts

05 Apr 2017
UI/UX Wireframes for Sign in/up Forms: Do's and Don'ts

This is an attempt to summarize my observations of a good UX. Mostly I deal with UI. This covers screen audits that have been recently extended to UX design. From time to time I will publish essays regarding the topic of experience within app design. In this short writing Sign In & Sign Up will be covered.

1. Practice phone verification instead of password

Give an optional login, sign up via existing account from social app (as facebook or gmail) or use phone verification. The last one mentioned is the  most expensive one  in comparison to reusing social app account or even using a password

 

2. Step by step registration

The more important text fields are better to place on the first page. That way, pages will look more clear and easier to perceive.

 

3. Use Password visibility toggle instead of "Confirmation password"

Please review Password visibility toggle

 

4. Login page should be informal

Use the login title in a different way. For example, by using more inviting sounds such as “Welcome”

 

5. UI elements should stay in the same place during the interaction process. Though, on other hand permanent structure is less expensive.

Don't forget about keyboard in designing process. Avoid flexible structure as in general it causes to extend development time.

 
 

 

6. Input fields validation

  • Error message should help the User to resolve the problem
  • All mandatory fields should be marked in advance

 

Introduce sign in/sign up process as an additional option. Don’t set it as a blocker to use an app. For example, to keep data saved or to get full access to all features in the app. 

If you have some questions we're here to help you. Be sure to leave comments below.

SEE ALSO: