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

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

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

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

 

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.

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

 

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

Please review Password visibility toggle

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

 

4. Login page should be informal

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

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

 

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.

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

 

6. Input fields validation

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

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

 

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: