![\"Search](\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/GoogleUIisBad.png\")
<\/a>Google is a trademark or registered trademark of Google Inc. in the US and\/or other countries.<\/p><\/div>\n
<\/p>\n
As a visual designer and a perfectionist I like to get aesthetic enjoyment out of the products I use. But Google never delights us with eye candies, wow-effects or anything like that. Maybe because they deliberately decided to put content first. The Google search UI looks now much better than six years ago, but the only word which comes to my mind when I look at it is \u201csterile\u201d.<\/p>\n
<\/a>Google is a trademark or registered trademark of Google Inc. in the US and\/or other countries.<\/p><\/div>\n
You may say therefore that Google\u2019s UI is clean, clear and usable, but is it really? At Centigrade<\/a> designers do reviews with colleagues to find things that could be improved in their work. So I would like to bring to your attention a small review of Google\u2019s UI. I\u2019ve chosen Google search as a well-known and simple product to find out whether something can be done better.<\/p>\n 1. Is it material? <\/strong>I\u2019m a big fan of Google material design and try to apply it in my work wherever it\u2019s possible. But why Google doesn\u2019t use its own guidelines?<\/a> For example I\u2019m pretty sure these buttons could be \u201cRaised buttons\u201d.<\/p>\n Google is a trademark or registered trademark of Google Inc. in the US and\/or other countries.<\/p><\/div>\n 2. Accessibility.<\/strong> Obviously those buttons don\u2019t have enough contrast and readability could be better. But let\u2019s check them with WebAIM<\/a> \u2013 a great, well-known tool which allows us to check color contrast text\/background according to Web Content Accessibility Guidelines (WCAG) 2.0.<\/a><\/p>\n Google is a trademark or registered trademark of Google Inc. in the US and\/or other countries.<\/p><\/div>\n No comments.<\/p>\n To return to the buttons again: they really raise a lot of questions. It\u2019s the first thing you see on the start page, but why were they placed there? The user is never able to click them. No, really! Try it! \u00a0You can click on the \u201cGoogle search\u201d and \u201cI\u2019m feeling lucky\u201d buttons when the search field is empty, but for the first button it\u2019s useless as it doesn\u2019t produce any results. The second button will lead you to something very different (the doodles page). But once you start typing something in the search field you will be brought to a search results page and the buttons are not there anymore.<\/p>\n Google is a trademark or registered trademark of Google Inc. in the US and\/or other countries.<\/p><\/div>\n Oh, and while we\u2019re at it: Why not use some of those fancy animations mentioned in your style guide, Google?<\/p>\n memegenerator.net<\/p><\/div>\n Moreover if you checked \u201cNever show Instant results\u201d on the settings page and start typing search query on the main page you won\u2019t be able to click those buttons anyway because they will be substituted with other buttons:<\/p>\n Google is a trademark or registered trademark of Google Inc. in the US and\/or other countries.<\/p><\/div>\n So why are they there?!<\/p>\n 1. Search field.<\/strong> You can\u2019t clear your query in one click. I\u2019m not kidding. A \u201cclear\u201d button in a search field is a standard de-facto in UI design now, but not for Google search. There is no such button. But if you enter Search help you find yourself in a totally different world where everything looks Material, the search fields have \u201cClear\u201d buttons and people have hope.<\/p>\n Google is a trademark or registered trademark of Google Inc. in the US and\/or other countries.<\/p><\/div>\n 2. Mysterious controls.<\/strong> When you are logged in you can see three buttons in the right top corner \u2013 a person, a globe and a gear (only if \u201cUse private results\u201d is checked on the settings page). It took me quite a while to understand their meaning. I\u2019m not an advanced Google user, but I\u2019m a UI designer, so I have some experience with buttons. For a few minutes I have been trying to understand which one is disabled, which one is checked and which one is just in normal state. There is a difference between them, but it\u2019s really subtle. Let\u2019s take a look together.<\/p>\n Google is a trademark or registered trademark of Google Inc. in the US and\/or other countries.<\/p><\/div>\n The interaction of the \u201cSettings\u201d button is clear \u2013 it provides us with a drop down menu. But the couple of two others looks strange. The first one, \u201cShow all results\u201d, seems to be disabled. But it has a hover effect and you can click it to reload the result list. So the question is: if the button is disabled, why is it clickable? And if it is active and contains some interaction, why does it have a different style (the icon has lighter color) from the \u201cSettings\u201d button? The \u201cCurrently hiding private results\u201d seems to be selected, but you also can click on it and it reloads the result list again. To be totally honest, I still don\u2019t understand those two buttons.<\/p>\n 3. The company card<\/strong> is my favorite part. You get it when you type a company name in the search field. Let\u2019s try \u201cGoogle\u201d for example:<\/p>\nGeneral issues<\/h3>\n
<\/a><\/a>\u00a0\u201cGoogle search\u201d and \u201cI\u2019m feeling lucky\u201d buttons<\/h3>\n
<\/a><\/a><\/a>Search results page<\/h3>\n
<\/a><\/a>