Social signup

36
Pierre Valade (@pierrevalade ) http://pierrevalade.com User Experience Reviews Social Sign Up http://pierrevalade.com

Transcript of Social signup

Page 1: Social signup

Pierre Valade (@pierrevalade)http://pierrevalade.com

User Experience Reviews

Social Sign Uphttp://pierrevalade.com

Page 2: Social signup

Pierre Valade (@pierrevalade)http://pierrevalade.com

Case Study

Page 3: Social signup

Pierre Valade (@pierrevalade)http://pierrevalade.com

homepage

Page 4: Social signup

Pierre Valade (@pierrevalade)http://pierrevalade.com

about Sign In

Page 5: Social signup

Pierre Valade (@pierrevalade)http://pierrevalade.com

focus on username field

users can start typing right away

Page 6: Social signup

Pierre Valade (@pierrevalade)http://pierrevalade.com

“Keep me signed in” = YES

Page 7: Social signup

Pierre Valade (@pierrevalade)http://pierrevalade.com

about Sign Up

Page 8: Social signup

Pierre Valade (@pierrevalade)http://pierrevalade.com

#1 “Basic” Sign Up

Page 9: Social signup

Pierre Valade (@pierrevalade)http://pierrevalade.com

“Basic” Sign Up

Page 10: Social signup

Pierre Valade (@pierrevalade)http://pierrevalade.com

small linkPlancast want to “push” Social Sign Up

Page 11: Social signup

Pierre Valade (@pierrevalade)http://pierrevalade.com

“Basic” Sign Up form

focus

Page 12: Social signup

Pierre Valade (@pierrevalade)http://pierrevalade.com

explicite title = “Sign Up”

Page 13: Social signup

Pierre Valade (@pierrevalade)http://pierrevalade.com

real-time username availability and preview

Page 14: Social signup

Pierre Valade (@pierrevalade)http://pierrevalade.com

and javascript validation

Page 15: Social signup

Pierre Valade (@pierrevalade)http://pierrevalade.com

completed form

Page 16: Social signup

Pierre Valade (@pierrevalade)http://pierrevalade.com

then social connections

Page 18: Social signup

Pierre Valade (@pierrevalade)http://pierrevalade.com

open ina popup

Page 19: Social signup

Pierre Valade (@pierrevalade)http://pierrevalade.com

#2 “Social” Sign Up

Page 20: Social signup

Pierre Valade (@pierrevalade)http://pierrevalade.com

Facebook and Twitter

they are used both for creating a new account and signing-in

Page 21: Social signup

Pierre Valade (@pierrevalade)http://pierrevalade.com

privacy note

important because users can be confused to use Facebook Connect because of privacy issues

Page 22: Social signup

Pierre Valade (@pierrevalade)http://pierrevalade.com

Facebook Connect

Page 24: Social signup

Pierre Valade (@pierrevalade)http://pierrevalade.com

remarquable Facebook permissions

✓ email (yes, it’s possible now!)

✓ post to wall

✓ access data anytime

✓ sms!

Page 25: Social signup

Pierre Valade (@pierrevalade)http://pierrevalade.com

profil completion

Facebookdata

Page 26: Social signup

Pierre Valade (@pierrevalade)http://pierrevalade.com

explicite title

Page 27: Social signup

Pierre Valade (@pierrevalade)http://pierrevalade.com

same fields than “Basic” Sign Up

Page 28: Social signup

Pierre Valade (@pierrevalade)http://pierrevalade.com

real-time username availability and preview

Page 29: Social signup

context added info“Basic” Signup Up “Social” Signup Up

Page 30: Social signup

Pierre Valade (@pierrevalade)http://pierrevalade.com

context added info make it very clear what

user is doing

Page 31: Social signup
Page 32: Social signup

Pierre Valade (@pierrevalade)http://pierrevalade.com

Facebook Friends matching

Page 33: Social signup

Pierre Valade (@pierrevalade)http://pierrevalade.com

Very easyto subscribe

NiceAjax

Page 34: Social signup

Pierre Valade (@pierrevalade)http://pierrevalade.com

Interesting choicePlancast redirect the user that haven’t completed their profil on the page to do it when they want to have access to the homepage.

Page 36: Social signup

Pierre Valade (@pierrevalade)http://pierrevalade.com

Follow me for more UI reviews!http://pierrevalade.com