{"id":3359,"date":"2012-10-11T15:47:32","date_gmt":"2012-10-11T15:47:32","guid":{"rendered":"https:\/\/www.gosquared.com\/blog\/?p=3359"},"modified":"2019-11-28T12:38:53","modified_gmt":"2019-11-28T12:38:53","slug":"login-screen-design","status":"publish","type":"post","link":"https:\/\/www.gosquared.com\/blog\/login-screen-design","title":{"rendered":"Login Screen Design – behind the scenes"},"content":{"rendered":"

Note:<\/strong> Since this post was written, we’ve made the GoSquared login process even better! Check out our new post on designing a better login screen<\/a>, and how we implemented two-factor authentication<\/a>.<\/em><\/p>\n

\"GoSquared<\/p>\n

Here at GoSquared, we love to obsess over the little details that make the real difference in your experience of the site and Dashboard. The new login screen design and experience was no exception.<\/p>\n

\"GoSquared<\/p>\n

We wanted the login screen to feel personal and for our customers to feel comfortable and familar with signing in. It’s something that our most loyal customers see very regularly too, so it had to be streamlined and quick to understand and submit. At the end of the day, people don’t want to stay staring at a login form – they want to use GoSquared – they want to find out more about their website.<\/p>\n

Getting personal.<\/h3>\n

\"GoSquared<\/p>\n

We decided to use Gravatar<\/a> to show an image relating to the users email – which updates every time the email changes. The initial design was already cleaner and had a nicer feel than the old form.<\/p>\n

Quick fades between the GoSquared logo and the Gravatar, depending on whether a Gravatar is found or not, make the transition natural. Users without a Gravatar can’t tell that one should be there – there’s no lost usability.<\/p>\n

BREAKING! People forget their passwords. A lot.<\/h3>\n

\"GoSquared<\/p>\n

When have you ever gone to “Forgot your password” without entering an email first, or having guessed a password? Clicking on this autofills the email you had in the login form, again with your Gravatar, so you can reset your password in just two quick clicks.<\/p>\n

25+% of customers use Gmail. Not Gmaol. Or Gkail. Or Gmaik…<\/h3>\n

\"GoSquared<\/p>\n

Mistyping your email address is easy, and infuriating. We don’t like our customers getting infuriated. The new login screen uses Kicksend’s Mailcheck<\/a> jQuery plugin which is a fantastic tool for suggesting email addresses – reducing the number of misspellings and annoyed customers.<\/p>\n

And then there’s the final touch, as soon as you submit the form, the box shrinks away into the background, leaving a loading spinner. The same spinner is then shown while the GoSquared Home area loads, making the login feel quick, easy and seamless.<\/p>\n

Check out the real login screen design now<\/h2>\n

Check it out for real now! \u2192<\/strong><\/a><\/p>\n

Disclaimer<\/strong>: Unfortunately, to our knowledge, Keira Knightley is not yet a customer of GoSquared.<\/em><\/p>\n

Updates<\/strong>: After all the great feedback, we’ve now improved the dismissal of the email suggestion tooltip – it has a subtle close button and will close as soon as you start typing a password. It also won’t show if a valid Gravatar is found, as it’s likely that the email is correct.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"

\"GoSquared<\/p>\n

Here at GoSquared, we love to obsess over the little details that make the real difference in your experience of the site and Dashboard. The new login screen was no exception.<\/p>\n

Read on to learn more about how (and why) we redesigned our login screen.<\/p>\n","protected":false},"author":10,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1587],"tags":[96,844],"class_list":["post-3359","post","type-post","status-publish","format-standard","hentry","category-product-design","tag-analytics","tag-stats"],"yoast_head":"\nLogin Screen Design and UX \u2013 GoSquared Blog<\/title>\n<meta name=\"description\" content=\"Login screen design at GoSquared. A behind the scenes look at how we designed the new login screen and login experience of GoSquared.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.gosquared.com\/blog\/login-screen-design\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Login Screen Design - behind the scenes\" \/>\n<meta property=\"og:description\" content=\"Login screen design at GoSquared. A behind the scenes look at how we designed the new login screen and login experience of GoSquared.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.gosquared.com\/blog\/login-screen-design\" \/>\n<meta property=\"og:site_name\" content=\"GoSquared Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/GoSquared\" \/>\n<meta property=\"article:published_time\" content=\"2012-10-11T15:47:32+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-11-28T12:38:53+00:00\" \/>\n<meta property=\"og:image\" content=\"\/\/static.gosquared.com\/images\/liquidicity\/12_10_11_loginexplode_01.jpg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@simon_tabor\" \/>\n<meta name=\"twitter:site\" content=\"@GoSquared\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Simon Tabor\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.gosquared.com\/blog\/#organization\",\"name\":\"GoSquared\",\"url\":\"https:\/\/www.gosquared.com\/blog\/\",\"sameAs\":[\"https:\/\/instagram.com\/gosquaredteam\",\"https:\/\/www.linkedin.com\/company\/go-squared-ltd.\",\"https:\/\/www.facebook.com\/GoSquared\",\"https:\/\/twitter.com\/GoSquared\"],\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.gosquared.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.gosquared.com\/blog\/wp-content\/uploads\/2015\/07\/gosquared.png\",\"contentUrl\":\"https:\/\/www.gosquared.com\/blog\/wp-content\/uploads\/2015\/07\/gosquared.png\",\"width\":1270,\"height\":250,\"caption\":\"GoSquared\"},\"image\":{\"@id\":\"https:\/\/www.gosquared.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.gosquared.com\/blog\/#website\",\"url\":\"https:\/\/www.gosquared.com\/blog\/\",\"name\":\"GoSquared Blog\",\"description\":\"Turn visitors into customers.\",\"publisher\":{\"@id\":\"https:\/\/www.gosquared.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.gosquared.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.gosquared.com\/blog\/login-screen-design#webpage\",\"url\":\"https:\/\/www.gosquared.com\/blog\/login-screen-design\",\"name\":\"Login Screen Design and UX \u2013 GoSquared Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.gosquared.com\/blog\/#website\"},\"datePublished\":\"2012-10-11T15:47:32+00:00\",\"dateModified\":\"2019-11-28T12:38:53+00:00\",\"description\":\"Login screen design at GoSquared. A behind the scenes look at how we designed the new login screen and login experience of GoSquared.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.gosquared.com\/blog\/login-screen-design#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.gosquared.com\/blog\/login-screen-design\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.gosquared.com\/blog\/login-screen-design#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.gosquared.com\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Login Screen Design – behind the scenes\"}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/www.gosquared.com\/blog\/login-screen-design#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.gosquared.com\/blog\/login-screen-design#webpage\"},\"author\":{\"@id\":\"https:\/\/www.gosquared.com\/blog\/#\/schema\/person\/71fad71f60ad33cf9356687b37aed3d0\"},\"headline\":\"Login Screen Design – behind the scenes\",\"datePublished\":\"2012-10-11T15:47:32+00:00\",\"dateModified\":\"2019-11-28T12:38:53+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.gosquared.com\/blog\/login-screen-design#webpage\"},\"wordCount\":453,\"publisher\":{\"@id\":\"https:\/\/www.gosquared.com\/blog\/#organization\"},\"keywords\":[\"Analytics\",\"Stats\"],\"articleSection\":[\"Product Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.gosquared.com\/blog\/#\/schema\/person\/71fad71f60ad33cf9356687b37aed3d0\",\"name\":\"Simon Tabor\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.gosquared.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/dc920e48608646bda51d2e6e2595e8ad926cff52eba534c1d25fb1618f15b59f?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/dc920e48608646bda51d2e6e2595e8ad926cff52eba534c1d25fb1618f15b59f?s=96&d=mm&r=g\",\"caption\":\"Simon Tabor\"},\"description\":\"Lead developer at GoSquared for integrations, partnerships and the API. Works on pretty much everything.\",\"sameAs\":[\"http:\/\/simontabor.com\",\"https:\/\/twitter.com\/simon_tabor\"],\"url\":\"https:\/\/www.gosquared.com\/blog\/author\/simontabor\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Login Screen Design and UX \u2013 GoSquared Blog","description":"Login screen design at GoSquared. A behind the scenes look at how we designed the new login screen and login experience of GoSquared.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.gosquared.com\/blog\/login-screen-design","og_locale":"en_US","og_type":"article","og_title":"Login Screen Design - behind the scenes","og_description":"Login screen design at GoSquared. A behind the scenes look at how we designed the new login screen and login experience of GoSquared.","og_url":"https:\/\/www.gosquared.com\/blog\/login-screen-design","og_site_name":"GoSquared Blog","article_publisher":"https:\/\/www.facebook.com\/GoSquared","article_published_time":"2012-10-11T15:47:32+00:00","article_modified_time":"2019-11-28T12:38:53+00:00","og_image":[{"url":"\/\/static.gosquared.com\/images\/liquidicity\/12_10_11_loginexplode_01.jpg"}],"twitter_card":"summary_large_image","twitter_creator":"@simon_tabor","twitter_site":"@GoSquared","twitter_misc":{"Written by":"Simon Tabor","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Organization","@id":"https:\/\/www.gosquared.com\/blog\/#organization","name":"GoSquared","url":"https:\/\/www.gosquared.com\/blog\/","sameAs":["https:\/\/instagram.com\/gosquaredteam","https:\/\/www.linkedin.com\/company\/go-squared-ltd.","https:\/\/www.facebook.com\/GoSquared","https:\/\/twitter.com\/GoSquared"],"logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.gosquared.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.gosquared.com\/blog\/wp-content\/uploads\/2015\/07\/gosquared.png","contentUrl":"https:\/\/www.gosquared.com\/blog\/wp-content\/uploads\/2015\/07\/gosquared.png","width":1270,"height":250,"caption":"GoSquared"},"image":{"@id":"https:\/\/www.gosquared.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"WebSite","@id":"https:\/\/www.gosquared.com\/blog\/#website","url":"https:\/\/www.gosquared.com\/blog\/","name":"GoSquared Blog","description":"Turn visitors into customers.","publisher":{"@id":"https:\/\/www.gosquared.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.gosquared.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.gosquared.com\/blog\/login-screen-design#webpage","url":"https:\/\/www.gosquared.com\/blog\/login-screen-design","name":"Login Screen Design and UX \u2013 GoSquared Blog","isPartOf":{"@id":"https:\/\/www.gosquared.com\/blog\/#website"},"datePublished":"2012-10-11T15:47:32+00:00","dateModified":"2019-11-28T12:38:53+00:00","description":"Login screen design at GoSquared. A behind the scenes look at how we designed the new login screen and login experience of GoSquared.","breadcrumb":{"@id":"https:\/\/www.gosquared.com\/blog\/login-screen-design#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.gosquared.com\/blog\/login-screen-design"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.gosquared.com\/blog\/login-screen-design#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.gosquared.com\/blog"},{"@type":"ListItem","position":2,"name":"Login Screen Design – behind the scenes"}]},{"@type":"Article","@id":"https:\/\/www.gosquared.com\/blog\/login-screen-design#article","isPartOf":{"@id":"https:\/\/www.gosquared.com\/blog\/login-screen-design#webpage"},"author":{"@id":"https:\/\/www.gosquared.com\/blog\/#\/schema\/person\/71fad71f60ad33cf9356687b37aed3d0"},"headline":"Login Screen Design – behind the scenes","datePublished":"2012-10-11T15:47:32+00:00","dateModified":"2019-11-28T12:38:53+00:00","mainEntityOfPage":{"@id":"https:\/\/www.gosquared.com\/blog\/login-screen-design#webpage"},"wordCount":453,"publisher":{"@id":"https:\/\/www.gosquared.com\/blog\/#organization"},"keywords":["Analytics","Stats"],"articleSection":["Product Design"],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.gosquared.com\/blog\/#\/schema\/person\/71fad71f60ad33cf9356687b37aed3d0","name":"Simon Tabor","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.gosquared.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/dc920e48608646bda51d2e6e2595e8ad926cff52eba534c1d25fb1618f15b59f?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/dc920e48608646bda51d2e6e2595e8ad926cff52eba534c1d25fb1618f15b59f?s=96&d=mm&r=g","caption":"Simon Tabor"},"description":"Lead developer at GoSquared for integrations, partnerships and the API. Works on pretty much everything.","sameAs":["http:\/\/simontabor.com","https:\/\/twitter.com\/simon_tabor"],"url":"https:\/\/www.gosquared.com\/blog\/author\/simontabor"}]}},"wps_subtitle":"Designing a login screen that welcomes users","_links":{"self":[{"href":"https:\/\/www.gosquared.com\/blog\/wp-json\/wp\/v2\/posts\/3359","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gosquared.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gosquared.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gosquared.com\/blog\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gosquared.com\/blog\/wp-json\/wp\/v2\/comments?post=3359"}],"version-history":[{"count":0,"href":"https:\/\/www.gosquared.com\/blog\/wp-json\/wp\/v2\/posts\/3359\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.gosquared.com\/blog\/wp-json\/wp\/v2\/media?parent=3359"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gosquared.com\/blog\/wp-json\/wp\/v2\/categories?post=3359"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gosquared.com\/blog\/wp-json\/wp\/v2\/tags?post=3359"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}