If you’re like me, then you’ve tried to log into a website and got confused with which button to click. The placement, terminology and styling often throws me off. For authentication we often see log in, sign in and for registration words like sign up or create account.

In this case study, I want to determine which terminology should be used as default for authentication and registration buttons. Then, identity common patterns of placement for these buttons when viewed on a personal computer (monitor) not a mobile device. We will look at 10 common social media websites and 10 web developer websites and see what they do.

Social Media Sites

UrlAuthRegistrationPlacement
facebook.comLog InCreate New AccountLanding page right
twitter.comSign InSign Up With …Landing page right
linkedin.comSign inJoin NowLanding page left; Nav top right
youtube.comSIGN INCreate AccountNav top right; Registration is hidden behind Auth form
pinterest.comLog inSign upNav top right
instagram.comLog InSign upLanding page right
tumblr.comLog in / Log InSign upLanding page center; Nav top right
twitch.tvLog InSign UpNav top right
flickr.comLog InSign Up / Start for freeNav top right
reddit.comLog InSign UpNav top right

Developer Sites

UrlAuthRegistrationPlacement
github.comSign inSign upNav top right
about.gitlab.comLoginGet free trialNav top right
developers.google.comSign inn/aNav top right
aws.amazon.comMy AccountCreate an AWS AccountNav top right
azure.microsoft.comSign inFree account / Try Azure for freeNav top right
cloudflare.comLog InSign UpNav top right
digitalocean.comLog InSign UpNav top right
godaddy.comSign Inn/aNav top right
npmjs.comSign InSign UpNav top right
codepen.ioLog InSign UpNav top right

Conclusion

Authentication

  • Log in or variations - 11
  • Sign in or variations - 8

Registration

  • Sign up or variation - 12
  • Create ... or similar - 3
  • remaining terms are all unique

It appears that the results for authentication lean slightly towards the wording Log in while Sign in is a very close second option. For registration, Sign up is the clear winner. Other options vary, but Create ... seems to be the next most viable.

If Sign up is chosen for registration, then it would be logical to avoid Sign in because they are so similar. Although styling the buttons differently may help distinguish Sign in & Sign up, they only differ by one letter so it is easy to mistake.

As for registration, most occurences of Create ... happen when the action is displayed in the Landing page, not the nav. Since the nav often contains many items, using Create ... may take up too much horizontal space. Having succinct terms for the nav would reduce visual clutter.

Rules

  • use Sign Up for registration by default.
  • use Log In for authentication by default.
  • accent the registration button Sign Up with a border or background color.
  • position Log In and Sign Up buttons on the top right of the page. Preferably on the top nav bar.
  • position Log In before Sign Up.
  • using Create Account or a variation is permitted for registration if there is enough horizontal space. Preferably on a landing page form.
  • using Sign In is only permitted for authentication if Sign Up is not used for registration.

Screenshots

Facebook

facebook

Twitter

twitter

LinkedIn

linkedin

Youtube

youtube

Pinterest

pinterest

Instagram

instagram

Tumblr

instagram

Twitch

twitch

Flickr

flickr

Reddit

reddit

Developer Sites

Github

github

Gitlab

gitlab

Google Developers

google-devs

Amazon Web Services (AWS)

aws

Microsoft Azure

azure

Cloudflare

cloudflare

Digital Ocean

digital-ocean

Go Daddy

godaddy

NPM

npmjs

Codepen

codepen