{"id":23225,"date":"2024-02-22T08:30:48","date_gmt":"2024-02-21T23:30:48","guid":{"rendered":"https:\/\/designcompass.org\/?p=23225"},"modified":"2024-02-22T08:32:09","modified_gmt":"2024-02-21T23:32:09","slug":"google-login-ui-update","status":"publish","type":"post","link":"https:\/\/designcompass.org\/en\/2024\/02\/22\/google-login-ui-update\/","title":{"rendered":"Google Login: New UI and strange notification method"},"content":{"rendered":"<p>Google has announced that it will update the visual look and feel of its login page to give it a modern look. All elements are the same and give a similar impression to Material Design applied to other products. It will be applied equally across web and mobile devices. Mobile-optimized vertical cards will appear as horizontal cards on Fold or tablet devices. We predict that it will have a similar impression to the recently visually updated Gmail. It will be rolled out gradually starting February 21, 2024, and is scheduled to be completed by March 4, 2024.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"1024\" src=\"https:\/\/designcompass.org\/wp-content\/uploads\/2024\/02\/google-login-03-1024x1024.png\" alt=\"\" class=\"wp-image-23228\" srcset=\"https:\/\/designcompass.org\/wp-content\/uploads\/2024\/02\/google-login-03-1024x1024.png 1024w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/02\/google-login-03-300x300.png 300w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/02\/google-login-03-150x150.png 150w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/02\/google-login-03-768x768.png 768w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/02\/google-login-03-1536x1536.png 1536w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/02\/google-login-03-12x12.png 12w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/02\/google-login-03-924x924.png 924w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/02\/google-login-03-671x671.png 671w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/02\/google-login-03-1320x1320.png 1320w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/02\/google-login-03-600x600.png 600w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/02\/google-login-03-100x100.png 100w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/02\/google-login-03.png 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Material Design, a design language created by Google for the Android platform in 2014, has been continuously updated for over 10 years. It served as a standard for digital products used in Android-based smartphones. Since the recent release of the third version, Material You, it has been gradually applied to Google&#039;s services. You can get an approximate impression of the service that recently applied Material U.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"1024\" src=\"https:\/\/designcompass.org\/wp-content\/uploads\/2024\/02\/google-login-04-1024x1024.png\" alt=\"\" class=\"wp-image-23229\" srcset=\"https:\/\/designcompass.org\/wp-content\/uploads\/2024\/02\/google-login-04-1024x1024.png 1024w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/02\/google-login-04-300x300.png 300w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/02\/google-login-04-150x150.png 150w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/02\/google-login-04-768x768.png 768w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/02\/google-login-04-1536x1536.png 1536w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/02\/google-login-04-12x12.png 12w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/02\/google-login-04-924x924.png 924w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/02\/google-login-04-671x671.png 671w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/02\/google-login-04-1320x1320.png 1320w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/02\/google-login-04-600x600.png 600w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/02\/google-login-04-100x100.png 100w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/02\/google-login-04.png 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Existing login \u00a9Google<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"1024\" src=\"https:\/\/designcompass.org\/wp-content\/uploads\/2024\/02\/google-login-06-1024x1024.png\" alt=\"\" class=\"wp-image-23231\" srcset=\"https:\/\/designcompass.org\/wp-content\/uploads\/2024\/02\/google-login-06-1024x1024.png 1024w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/02\/google-login-06-300x300.png 300w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/02\/google-login-06-150x150.png 150w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/02\/google-login-06-768x768.png 768w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/02\/google-login-06-1536x1536.png 1536w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/02\/google-login-06-12x12.png 12w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/02\/google-login-06-924x924.png 924w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/02\/google-login-06-671x671.png 671w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/02\/google-login-06-1320x1320.png 1320w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/02\/google-login-06-600x600.png 600w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/02\/google-login-06-100x100.png 100w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/02\/google-login-06.png 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Material-Used Account Management \u00a9Google<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"1024\" src=\"https:\/\/designcompass.org\/wp-content\/uploads\/2024\/02\/google-login-07-1024x1024.png\" alt=\"\" class=\"wp-image-23232\" srcset=\"https:\/\/designcompass.org\/wp-content\/uploads\/2024\/02\/google-login-07-1024x1024.png 1024w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/02\/google-login-07-300x300.png 300w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/02\/google-login-07-150x150.png 150w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/02\/google-login-07-768x768.png 768w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/02\/google-login-07-1536x1536.png 1536w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/02\/google-login-07-12x12.png 12w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/02\/google-login-07-924x924.png 924w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/02\/google-login-07-671x671.png 671w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/02\/google-login-07-1320x1320.png 1320w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/02\/google-login-07-600x600.png 600w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/02\/google-login-07-100x100.png 100w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/02\/google-login-07.png 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">List with Material Price applied \u00a9Google<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"1024\" src=\"https:\/\/designcompass.org\/wp-content\/uploads\/2024\/02\/google-login-08-1024x1024.png\" alt=\"\" class=\"wp-image-23233\" srcset=\"https:\/\/designcompass.org\/wp-content\/uploads\/2024\/02\/google-login-08-1024x1024.png 1024w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/02\/google-login-08-300x300.png 300w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/02\/google-login-08-150x150.png 150w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/02\/google-login-08-768x768.png 768w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/02\/google-login-08-1536x1536.png 1536w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/02\/google-login-08-12x12.png 12w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/02\/google-login-08-924x924.png 924w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/02\/google-login-08-671x671.png 671w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/02\/google-login-08-1320x1320.png 1320w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/02\/google-login-08-600x600.png 600w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/02\/google-login-08-100x100.png 100w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/02\/google-login-08.png 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Filter with Material Oil applied \u00a9Google<\/figcaption><\/figure>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>We&#039;ve been keeping a pinned notification at the top of the existing login web page for quite some time to notify you of updates. It is not information needed to perform the current task, nor does it prepare for future tasks. Login is a page you must go through to use the numerous products and services provided by Google. Why are you trying to inform people in advance rather than letting people use the product naturally? <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"1024\" src=\"https:\/\/designcompass.org\/wp-content\/uploads\/2024\/02\/google-login-05-1-1024x1024.png\" alt=\"\" class=\"wp-image-23234\" srcset=\"https:\/\/designcompass.org\/wp-content\/uploads\/2024\/02\/google-login-05-1-1024x1024.png 1024w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/02\/google-login-05-1-300x300.png 300w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/02\/google-login-05-1-150x150.png 150w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/02\/google-login-05-1-768x768.png 768w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/02\/google-login-05-1-1536x1536.png 1536w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/02\/google-login-05-1-12x12.png 12w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/02\/google-login-05-1-924x924.png 924w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/02\/google-login-05-1-671x671.png 671w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/02\/google-login-05-1-1320x1320.png 1320w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/02\/google-login-05-1-600x600.png 600w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/02\/google-login-05-1-100x100.png 100w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/02\/google-login-05-1.png 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Top toast displayed on login page \u00a9Google<\/figcaption><\/figure>\n\n\n\n<p>Google received a lot of love for its UX that solves problems with minimal design. We have created a UI that focuses on the task itself with a smooth interface without unnecessary cognition. With its overwhelming usefulness, it still dominates productivity products around the world. When changing a function that users used well, we designed a UX that kindly informed users of the change and received favorable reviews. This update process somehow feels un-Google-like. <\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">More and Sources<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/workspaceupdates.googleblog.com\/2024\/02\/new-google-sign-in-page.html\">https:\/\/workspaceupdates.googleblog.com\/2024\/02\/new-google-sign-in-page.html<\/a><\/li>\n<\/ul>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>","protected":false},"excerpt":{"rendered":"<p>\uad6c\uae00\uc774 \ub85c\uadf8\uc778 \ud398\uc774\uc9c0\uc758 \uc2dc\uac01\uc801\uc778 \ubaa8\uc591\uacfc \ub290\ub08c\uc744 \ud604\ub300\uc801\uc73c\ub85c \uc5c5\ub370\uc774\ud2b8\ud560 \uac83\uc774\ub77c \ubc1d\ud614\uc2b5\ub2c8\ub2e4. \ubaa8\ub4e0 \uc694\uc18c\uac00 \ub3d9\uc77c\ud558\uba70 \ub2e4\ub978 \uc81c\ud488\uc5d0 \uc801\uc6a9\ub41c \uba38\ud2f0\ub9ac\uc5bc \ub514\uc790\uc778\uacfc \ube44\uc2b7\ud55c \uc778\uc0c1\uc774 \ub429\ub2c8\ub2e4. \uc6f9\uacfc \ubaa8\ubc14\uc77c \uc7a5\uce58 \uc804\uccb4\uc5d0 \ub3d9\uc77c\ud558\uac8c \uc801\uc6a9\ub420 \uc608\uc815\uc785\ub2c8\ub2e4. \ubaa8\ubc14\uc77c\uc5d0 \ucd5c\uc801\ud654\ub41c \uc218\uc9c1\ud615 \uce74\ub4dc\uac00 \ud3f4\ub4dc\ub098 \ud0dc\ube14\ub9bf \uc7a5\uce58\uc5d0\uc11c \uc218\ud3c9\ud615 \uce74\ub4dc\ub85c \ud45c\uc2dc\ub429\ub2c8\ub2e4. \ucd5c\uadfc \uc2dc\uac01\uc801\uc73c\ub85c \uc5c5\ub370\uc774\ud2b8\ud55c Gmail\uacfc \ube44\uc2b7\ud55c \uc778\uc0c1\uc774 \ub420 \uac83\uc73c\ub85c \uc608\uce21\ud569\ub2c8\ub2e4. 2024\ub144 2\uc6d4 21\uc77c\ubd80\ud130 \uc810\uc9c4\uc801\uc73c\ub85c \ucd9c\uc2dc\ub418\uba70 2024\ub144 3\uc6d4 4\uc77c [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":23227,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[4,621],"tags":[69,185,370,377,467,596,597,717,758,763],"class_list":["post-23225","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-news","category-service","tag-69","tag-185","tag-ui","tag-ux","tag-ui-ux","tag-interaction","tag-597","tag-717","tag-758","tag-763"],"acf":[],"jetpack_featured_media_url":"https:\/\/designcompass.org\/wp-content\/uploads\/2024\/02\/google-login-01.png","publishpress_future_action":{"enabled":false,"date":"2026-05-11 21:55:08","action":"change-status","newStatus":"draft","terms":[],"taxonomy":"category","extraData":[]},"publishpress_future_workflow_manual_trigger":{"enabledWorkflows":[]},"_links":{"self":[{"href":"https:\/\/designcompass.org\/en\/wp-json\/wp\/v2\/posts\/23225","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/designcompass.org\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/designcompass.org\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/designcompass.org\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/designcompass.org\/en\/wp-json\/wp\/v2\/comments?post=23225"}],"version-history":[{"count":0,"href":"https:\/\/designcompass.org\/en\/wp-json\/wp\/v2\/posts\/23225\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/designcompass.org\/en\/wp-json\/wp\/v2\/media\/23227"}],"wp:attachment":[{"href":"https:\/\/designcompass.org\/en\/wp-json\/wp\/v2\/media?parent=23225"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/designcompass.org\/en\/wp-json\/wp\/v2\/categories?post=23225"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/designcompass.org\/en\/wp-json\/wp\/v2\/tags?post=23225"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}