An unofficial blog that watches Google's attempts to move your operating system online since 2005. Not affiliated with Google.

Send your tips to [email protected].
Showing posts with label User interface. Show all posts
Showing posts with label User interface. Show all posts

December 29, 2016

YouTube Notifications in the Navigation Bar

YouTube has recently started to experiment with replacing Google+ notifications in the navigation bar with YouTube notifications. You get notifications for recently uploaded videos from your subscribed channels, but only if you've enabled notifications for those channels. For example, you can go to the subscription manager and click the bell icon next to a channel to enable or disable notifications.

The settings button sends you to the Notifications section from YouTube's Settings page and the 3-dot icon next to each notification lets you turn off notifications from the corresponding channel.


If you don't like this experiment, you can always clear cookies for youtube.com in your browser's settings and opt out.

Google's New Mobile UI for Recipe Search

Just in time for New Year's dinner, Google has a new mobile interface for recipe search. I searched for [avocado mayo] and noticed a long list of keywords below the search box and ads: salad, chicken, shrimp, vegan, bacon and more. You can select more than one keyword and this helps you refine the results.


When selecting a related search, you get a completely different interface that only shows recipes: bigger expandable cards, bigger thumbnails, infinite scrolling.



December 6, 2016

New Interface for Google Search

Google's desktop search pages have a new interface for navigating between search results. The search box is bigger, there's a new search icon and Google now only shows 2 or 3 specialized search engines next to "all", down from 4. Apps and shopping seem to be missing from the list of search engines, so you can only pick from image search, video search, Google News, Google Maps, Google Flights and Google Books.


The settings dropdown is now placed below the search box and it includes the option that lets you hide private results. You can still change search settings, languages, turn on or turn off SafeSearch, use advanced search options, open Web History or go to the help center.


Search tools are now simply called tools and they include the same options: search by date and verbatim.


Image search lets you quickly go to the saved images page and change SafeSearch setting.


Google Shopping is broken. While the homepage still loads, when you click a product image or search for something, Google shows an empty page.



Here's the old Google Search interface, via Wikipedia:

May 20, 2016

Google Tests Card-Style Search Interface for Desktop

Google experiments with a desktop search UI that looks more like the mobile interface. The experiment uses the same white cards on a gray background for both search results and ads.


When the card-style layout was launched for the mobile site back in 2013, Google mentioned that the new look was "cleaner and simpler, optimized for touch, with results clustered on cards so you can focus on the answers you're looking for".

April 25, 2016

Bolder YouTube Player

YouTube's HTML5 player looks different. There are new icons, text is bolder, menus are much bigger and the settings menu no longer closes when you pick an option, unless you change video quality.


When you click "copy video URL", "copy video URL at current time" or "copy embed code", the player copies the text to the clipboard and no longer displays it.


Here's a screenshot of the old UI for the contextual menu:

April 14, 2016

Google Brings Back the Old Weather Cards

Back in January, Google redesigned the weather card for mobile. Now the old interface is back, but it's not clear if this is a bug or Googlers realized that the redesigned card wasn't good enough.


Google's attempt to build an even more powerful web application for weather brought some new information (air quality, UV index, sunrise and sunset times), but also a few extra taps. For example, you had to tap the "10 days" tab to see the forecast for the next 10 days.

Here's a screenshot of the ill-fated redesign:

February 11, 2016

Google Tweaks Mobile Search UI

Google tweaked the mobile search interface. There's now a menu that lets you view the original image, open the list of saved images, search by image and send feedback. There's also a redundant "visit page" link below the image.


Google brought back the title of the page and that's a good thing because you can find more details about the image. Hopefully, Google will also bring back the snippets.



You can find some screenshots for the old interface in this post.

January 24, 2016

New UI for Google's Weather Card

Google redesigned the weather card to include more information and images. The new weather card is only available in the Google Search app for Android, at least for now. "When you search for 'weather' or ask Google, 'will it rain today?' in the Google app on your Android phone, you'll get a wealth of new information, including: hourly sky conditions and chance of rain, severe weather alerts, a detailed 10-day forecast, air quality, UV index, sunrise and sunset times, and more," informs Google.

Google's new UI has 3 tabs for "today", "tomorrow" and "10 days". There's also a "humidity, wind, sunrise, and more details" link at the bottom of the card which allows you to expand it. You can also tap anywhere inside the card.



Google added an option to add a location to the weather list. This way, you can search for "weather" and see a list of all the locations you've added and the corresponding weather information. The search bar is now optimized for finding locations, so it's easier and faster to switch to a different city.


The "today" tab now includes information about sunrise, sunset, solar noon, length of the day, remaining daylight, dawn, dusk, dew point, pressure, UV index and visibility.


For some cities in the US, Japan, South Korea, India and other countries, you can find air quality information and health messages like "it's a great today to be active outside" or "avoid prolonged or heavy exertion". The source is EPA AirNow.




The "10 day" shows weather forecast for today and the following 9 days. Tap a day to find more details, including hourly weather forecast, wind, humidity, UV index, sunrise and sunset.


November 5, 2015

Google Updates Search Interface For Tablets

It looks like Google updated the search interface for tablets and switched to the mobile UI. The previous tablet interface was an interesting combination between the desktop and mobile UIs.

Here's a screenshot from Safari for iPad:


And here's a screenshot from Nexus 7:


It's strange to see that Google still shows the "mobile-friendly" label, even though it's not that important for tablets. It's also weird that Google abbreviates long URLs, while there's enough space to display the entire URLs. Google switched to the mobile UI and forgot to optimize it for tablets.

September 4, 2015

More About Google's New Visual Identity

Google Design's site has an interesting article about Google's new identity. Google's designers started by "distilling the essence of the brand down to its core" and built 3 elements that work on any platform: a sans serif logotype, the dynamic dots that respond to users and a compact version of the Google logo.



Some people said that Google's new logo is childish and it really is. "The Google logo has always had a simple, friendly, and approachable style. We wanted to retain these qualities by combining the mathematical purity of geometric forms with the childlike simplicity of schoolbook letter printing. Our new logotype is set in a custom, geometric sans-serif typeface and maintains the multi-colored playfulness and rotated ‘e’ of our previous mark—a reminder that we’ll always be a bit unconventional," mention Google's designers.

The dots are a brilliant way to convey the full Google logo in a Material Design approach. "The Google dots are a dynamic and perpetually moving state of the logo. They represent Google's intelligence at work and indicate when Google is working for you. We consider these unique, magic moments. A full range of expressions were developed including listening, thinking, replying, incomprehension, and confirmation."


Google now uses pixel-perfect SVGs for base assets and generates thousands of vector-based variants. For example, there's a version of the logo that's optimized for low-bandwidth connections and is only 305 bytes. Google's old approach was to serve a text-based approximation of the logo.

All in all, the new logo is more flexible, works better for devices with small screens and there's an animated abstract version. For the first time, Google's logo becomes a user interface control that communicates information and connects users to Google.

{ Thanks, Brendan Early. }

September 2, 2015

Updated Mobile UI for Google's Related Searches

Google Mobile Search has a new interface for related searches. Google usually shows up to 8 related searches at the bottom of the search results pages, but now the list looks different: there's a table with white rows and small arrows next to each related query.


Click a related search and you can see the search results for that query and even more related searches. You can start with a generic query like [nightingale] and create a more specific query by only clicking on related searches. For example, you can find searches like [sound of a nightingale singing], [Yanni nightingale live] or [how do you become a nightingale in Skyrim?].

September 1, 2015

Google's New Colorful Favicon

Google has a new logo, but it also has a new favicon. It's now a capital G that uses the four Google colors: blue, red, yellow and green.

Here's a screenshot that shows the old favicon launched in 2012 and the new one:

This is the new favicon, which is also used as an icon for Google Search:

You can find it in Google's app launcher and soon in Chrome's app launcher and in Android, as an icon for the Google Search app.

New Mobile Google Homepage

Google's mobile homepage looks different. The tabs for web search and image search are now blue and you can finally use the app launcher. Just click the grid icon to see the same app launcher from the desktop site. Many shortcuts will open the corresponding mobile apps instead of the mobile sites.


For now, the app launcher is only available from the Google homepage and from Google Image Search's homepage.


Google has recently changed the color of the tabs from red to blue for both the desktop site and the mobile site. There's now a bigger Google logo at the top of the page and the header uses more space.

Smaller Google Search Button

Google has recently changed the search button from the desktop site. It's now much smaller, just like the search button from the mobile UI.


You don't have to click the search button: it's much faster to press Enter, since you're already using the keyboard.

Here's a recent screenshot that shows the bigger button:


A New Google Logo

Google's homepage has a clever animation that announces a new Google logo. "These days, people interact with Google products across many different platforms, apps and devices — sometimes all in a single day. (...) Today we're introducing a new logo and identity family that reflects this reality and shows you when the Google magic is working for you, even on the tiniest screens," informs Google.

It's not just about the Google logo: many other Google icons will change. "New elements like a colorful Google mic help you identify and interact with Google whether you're talking, tapping or typing. Meanwhile, we're bidding adieu to the little blue 'g' icon and replacing it with a four-color 'G' that matches the logo."


Google's app launcher already has new icons for Google Search, Google Maps, Google Translate, Google News and Google+:


The new icons are better suited for small screens and manage to convey the Google identity using colors and playful cues. Google's logo hasn't changed a lot since 1998: it's still simple, colorful, playful and unintimidating.


{ Thanks, Gopinath. }

August 24, 2015

YouTube's Red Settings

To make it more obvious that a certain option is enabled, YouTube player's settings menu changes the color of the menu item to red. For example, if annotations are enabled, the "annotations" menu item is red.


Mouse over a red setting and it temporarily becomes black. Disable the setting and it switches to black. Previously, only the radio box was red and I think it looked better.

August 19, 2015

Google's Blue Tabs

Google lets you switch between its specialized search engines and check image results, video results, news articles, books, Google Maps results and more. The active tab was red, but now it switched to blue.

Here's a screenshot that shows the blue tab:


... and a screenshot that shows the old red tab:


Back in June, I posted about a Google Mobile Search experiment that tested an oversized header and the active tab's color was blue.