Showing posts with label User interface. Show all posts
Showing posts with label User interface. Show all posts

Wednesday, November 27, 2013

YouTube Tweaks Experimental Center-Aligned UI

YouTube continues to tweak the center-aligned UI experiment. The latest version includes a new upload button, a refined guide sidebar with new icons and "more" drop-downs for playlists and subscriptions, a list of recommended channels and probably other features.


The "guide" sidebar is displayed by default only if there's enough room. If there isn't, the sidebar is hidden and you need to click "guide" to see your playlists, subscriptions, video history and more.


The layout still uses cards and it's center-aligned.


Here's how you can enable the experimental interface. If you use Chrome, Firefox, Opera, Safari or Internet Explorer 8+:

1. open youtube.com in a new tab

2. load your browser's developer console:

* Chrome or Opera 15+ - press Ctrl+Shift+J for Windows/Linux/ChromeOS or Command-Option-J for Mac

* Firefox - press Ctrl+Shift+K for Windows/Linux or Command-Option-K for Mac

* Internet Explorer 8+ - press F12 and select the "Console" tab

* Safari 6 - if you haven't enabled the Develop menu, open Preferences from the Safari menu, go to the Advanced tab and check "Show Develop menu in menu bar". Close Preferences and then press Command-Option-C to show the console.

* Opera 12 - press Ctrl+Shift+I for Windows/Linux or Command-Option-I for Mac, then click "Console".

3. paste the following code which changes a YouTube cookie:

document.cookie="VISITOR_INFO1_LIVE=rkZGzYxfbLQ; path=/; domain=.youtube.com";window.location.reload();

4. press Enter and close the console.

To go back to the regular interface, use the same instructions, but replace the code from step 3 with this one:

document.cookie="VISITOR_INFO1_LIVE=; path=/; domain=.youtube.com";window.location.reload();

{ Thanks, Florian K. }

YouTube's Player, Back to Simple Buttons?

Back in September, YouTube's player grouped controls for annotations, player size and video quality. A few weeks ago, the "large player" button has been removed from the drop-down and brought back to its original position, next to the "full screen" button.


If the video doesn't have annotations and you use the Flash player, you'll even see the video quality drop-down without an additional click:

New Interface for Google's Account Permissions Page

Google's account permissions page has a new interface which does a better job at listing the permissions, shows bigger thumbnails and the date when you authorized a service.

"On the Account Permissions tab of your Google Account, you can see a list of third-party sites and applications. These are sites and applications to which you've granted permission to access your Google Account, and you can see on this list to what parts of your account they have access. For example, you might have downloaded an app that helps you schedule workouts with friends. This application might have requested access to your Google Calendar and Contacts to suggest times and friends for you to meet up with," informs Google's help center.

Google shows your Android and iOS devices at the top of the page. My Nexus 7 tablet was listed 3 times, so I clicked "Revoke access" next to the entries that include: "Inactive - We haven't seen activity from this device for at least 60 days."


If you see some services you no longer use, click "Revoke access". You'll be asked for permission the next time you use them.

{ Thanks, Florian K. }

Wednesday, November 20, 2013

New Interface for Google+ Notifications

Google+ notifications have a new interface: there's a "previously read" section, just like in the Google+ app for Android, and there are some new transitions that mimic scrolling down.

The previously read notifications are no longer displayed below the Jingles icon, so you need to click "previously read" to see them. The notifications box is less cluttered and you can still read all your notifications.



Here's a GIF that shows some of the new animations:


{ Thanks, Mukil. }

Sunday, November 17, 2013

YouTube Tests Channel Cards

After adding music cards and testing cards for shows, YouTube experiments with cards for channels. They're displayed in the right sidebar of the search results page and show the latest videos from the channel and some of its playlists.

Here's an example for Google Chrome. The channel is still included in the list of search results.


Here's how you can enable the experimental feature. If you use Chrome, Firefox, Opera, Safari or Internet Explorer 8+:

1. open youtube.com in a new tab

2. load your browser's developer console:

* Chrome or Opera 15+ - press Ctrl+Shift+J for Windows/Linux/ChromeOS or Command-Option-J for Mac

* Firefox - press Ctrl+Shift+K for Windows/Linux or Command-Option-K for Mac

* Internet Explorer 8+ - press F12 and select the "Console" tab

* Safari 6 - if you haven't enabled the Develop menu, open Preferences from the Safari menu, go to the Advanced tab and check "Show Develop menu in menu bar". Close Preferences and then press Command-Option-C to show the console.

* Opera 12 - press Ctrl+Shift+I for Windows/Linux or Command-Option-I for Mac, then click "Console".

3. paste the following code which changes a YouTube cookie:

document.cookie="VISITOR_INFO1_LIVE=2IS0PWox26Q; path=/; domain=.youtube.com";window.location.reload();

4. press Enter and close the console.

Some examples of searches: [google], [apple], [comedy central].

To go back to the regular interface, use the same instructions, but replace the code from step 3 with this one:

document.cookie="VISITOR_INFO1_LIVE=; path=/; domain=.youtube.com";window.location.reload();

{ via Rubén. }

Friday, November 15, 2013

Blue YouTube

I like blue, so I was pleasantly surprised to see that YouTube made some UI elements blue (#2793e6): the like button and the line below the number of views. Maybe someone was unhappy that Android KitKat removed all the blue icons and decided to compensate in other ways or maybe it's an attempt to calm YouTube users and make them stop posting silly comments.


Mobile First

A few years ago, many people complained that mobile sites and mobile apps are too limited. They couldn't include all the features from their desktop counterparts and some thought that was a bad thing.

Fast forward today and you'll notice that Google's desktop sites look more and more like Google's mobile apps. Most Google redesigns are all about taking mobile interfaces and adding them to the desktop. That's one of the reasons why many Google services drop advanced features and opt for simplified interfaces. This way, everything looks consistent and users can quickly switch from the mobile apps to the desktop apps.

Here are some examples:

1. The Google Maps redesign started with the iPhone app, continued with the desktop site and then the Android app.


2. The app launcher from the Google navigation bar was first available in the Google Search app for iOS.


3. Google Play's desktop interface had a lot of advanced features that were removed when Google updated the site to make it look more like the Android app.

4. The Google+ photo editor and Chrome Office editor are based on mobile apps that were ported to Native Client. You're now using the desktop to run mobile apps (only in Chrome).


5. Google Keep for Android has a lot more features than Google Keep for desktop. For example, you can't reorder notes or add more than one image in Google Keep for desktop.


Somehow, the most innovative and most interesting apps are now in the mobile space. That's where the users are moving and where things are constantly changing. Mobile is a flourishing testbed for new ideas.

Tuesday, November 12, 2013

Background Color Experiment in Google Mobile Search

Google experiments with a slightly different mobile search interface that has a different background color to emphasize the cards. "In this experiment, they've made the background darker in colour to add more contrast and make the cards stand out more," says Lee Jarratt, who noticed the new interface.


Here's the regular interface:


{ Thanks, Lee. }

Gmail Tests a New Interface for Attachments

Google tests a new interface for attachments internally. A screenshot from a Google employee reveals a Gmail attachment, followed by "Dogfood confidential - submit feedback on the new attachments experience".


The attachment from the screenshot appears to be an Excel spreadsheet and Gmail shows a thumbnail, the title of the file and an icon that's also used in Google Drive for Excel files. Here's the standard interface:

As you can see, the new Gmail UI uses a different icon and no longer displays options like "View", "Open as a Google spreadsheet" or "Download". It's not clear what happens when you click the attachment, but I assume it sends you to Google Drive, where you can preview the file or download it.

It's likely that Google wants to move Gmail attachments to Google Drive. Now Gmail and Google Drive use shared storage and Google Drive provides better ways to manage, search and share files.

Here's some Google Drive code which suggests that Drive could include some system folders for Gmail attachments and Google Keep notes.


{ Thanks, Florian K. }

Thursday, November 7, 2013

A Google Parameter Brings Back the Black Bar

If you're missing Google's black navigation bar, there's a parameter that brings it back. If you add "?noj=1" or "?noj=0" to a Google search URL, you'll temporarily replace the app launcher with the black bar. Here's the "black bar" version of the Google homepage: http://www.google.com/?noj=1.


This doesn't change the interface permanently and it's not clear for how long it will work. The parameter also disables Google Instant and replaces it with the old Google Suggest.

{ Thanks, Rubén. }

Tuesday, October 22, 2013

More Google Experiments That Hide Results URLs

There are at least two other versions of the Google experiment that removes search results URLs. The first alternate version places site names or domain names above the page title. For some results Google shows the site name, for other results Google displays the hostname.


The second alternate version shows both the site name and the hostname.


Which one do you like?

(As a side note, if you want to learn more about URLs, check this article written by Matt Cutts.)

{ Thanks, Rubén. }

Monday, October 21, 2013

YouTube Cards for Shows

YouTube tests a new interface for the shows card that looks just like the music card. It displays a large thumbnail, a list of seasons and episodes when you search for the name of the show.

"A YouTube show is an episodic or consistently themed web series consisting of a cast along with one or various topics, styles, and/or storylines. A viewer can subscribe directly to a show as opposed to an entire channel. All episodes in a show are created by a single partner, organized into seasons and delivered consistently. Episodes may be ad-supported, purchased by rental or not monetized at all," explains YouTube.



Here's the existing interface:


Here's how you can enable the experimental feature. If you use Chrome, Firefox, Opera, Safari or Internet Explorer 8+:

1. open youtube.com in a new tab

2. load your browser's developer console:

* Chrome or Opera 15+ - press Ctrl+Shift+J for Windows/Linux/ChromeOS or Command-Option-J for Mac

* Firefox - press Ctrl+Shift+K for Windows/Linux or Command-Option-K for Mac

* Internet Explorer 8+ - press F12 and select the "Console" tab

* Safari 6 - if you haven't enabled the Develop menu, open Preferences from the Safari menu, go to the Advanced tab and check "Show Develop menu in menu bar". Close Preferences and then press Command-Option-C to show the console.

* Opera 12 - press Ctrl+Shift+I for Windows/Linux or Command-Option-I for Mac, then click "Console".

3. paste the following code which changes a YouTube cookie:

document.cookie="VISITOR_INFO1_LIVE=c1OXNGmJ090; path=/; domain=.youtube.com";window.location.reload();

4. press Enter and close the console.

To go back to the regular interface, use the same instructions, but replace the code from step 3 with this one:

document.cookie="VISITOR_INFO1_LIVE=; path=/; domain=.youtube.com";window.location.reload();

Some examples of searches: [lifehacker], [designers at work], [classical music], [gta].

{ Thanks, Rubén. }

Saturday, October 19, 2013

A New Google Experiment Hides Search Results URLs

There's a war against URLs. Browsers start to hide them from the address bar: some remove "http" from the URL (Chrome, Firefox), Opera removes parameters, Safari for iOS only shows the domain name, Chrome and Safari show queries instead of Google's search URLs. All in the name of simplifying the interface.

A new Google search experiment replaces search results URLs with site names or domain names, depending on their popularity. Google tested a similar feature in 2011.


Most people don't understand URLs and find them too complicated. That's why many of them use search engines instead of typing URLs in the address bar, even for sites they visit frequently.

Still, web addresses are helpful because they provide useful information and they can be easily shared. If you only display "New York Times" instead of any New York Times URL, it's not obvious if you're linking to the homepage, to a section of the site, to a NYTimes blog or a blog post. URLs sometimes include useful information like the date when an article was published, the topic of the article or categories for shopping sites.

Here's an examples which shows that hiding URLs makes it difficult to distinguish between search results:


And here's the regular interface:


Google already shows incomplete URLs for search results, only displays site names for news results and replaces some URL elements with linked breadcrumbs.


{ Thanks, Rubén. }

Friday, October 18, 2013

Google Tests New Desktop Sign-in Page

Back in August, Google changed the sign-in page for mobile devices. A few readers report that they see the updated sign-in page in the desktop Chrome when opening Gmail.


It's strange to see a mobile page in a desktop browser, but it wouldn't be the first time when Google ported mobile sites or apps to the desktop. Most of the new features are added to the mobile sites first.


I haven't seen the new interface in a desktop browser, but the mobile sign-in page has an important issue: it doesn't allow browsers to autofill your password if you've previously signed in to a Google account. The sign-in page remembers all the accounts you've used to sign in, so you can quickly sign out and sign in to a different account just by choosing one of them.



{ Thanks, KH Subscribe and Arunraja. }

Thursday, October 17, 2013

New Google Translate Interface

Google Translate has a new compact interface that combines the drop-downs that allow you to select the language pairs with the tabs that show the last 3 languages you've selected.


Here's the old interface:


Usually Google does a good job at detecting the language of the original text, so it's a good idea to click "Detect language", unless your text is very short.

{ Thanks, Zachary. }

Saturday, October 12, 2013

A Cluttered Google Homepage

Here's a screenshot of the Google UK homepage in Internet Explorer. I used the private browsing feature to get a fresh cookie. This is what you would see as a new Google user:

* a blue bar at the top of the page that informs you about the new terms of service
* a message that introduces the new app launcher
* a link that asks you to make Google your homepage (IE-only)
* a cookie disclaimer required in the European Union (EU-only).


Click "Got it", "x" and "OK" and you'll dismiss 3 of the messages. You'll no longer see them unless you clear your Google cookies.

What happens if you ignore the messages?

Sunday, October 6, 2013

Enable the Updated New Tab Page in Chrome for Android

If you like Chrome's updated new tab page for the desktop and you have an Android device, you can enable a similar new tab page in Chrome Beta for Android.


You first need to install Chrome Beta for Android if you don't have it already, then open a new tab and type this in the address bar:

chrome://flags/#enable-new-ntp

Then press Enter, pick "Enabled" from the drop-down below "Enable the new NTP" and tap "Relaunch Now" at the bottom of the window to restart the browser.


The updated new tab page no longer shows 3 sections. You only get a big Google logo, a search box that points you to the browser's omnibox, a list of the most visited pages and 2 buttons for bookmarks and tabs from other devices. Both buttons open new pages: the bookmarks page has a different interface (it's now a list instead of a grid), while the "other devices" page looks the same.



Chrome's blog informs that some Chrome Beta users might see the new interface automatically. "We've tested this New Tab page with a search bar on desktop and now want to bring the benefits, including a faster load time, to mobile as well. While you can search straight from the Omnibox in Chrome, we realized many users continue to visit their search engine's homepage before searching, so we wanted to make it faster for those users to search. We're always thinking about how to save milliseconds from every search you perform, and we hope this new feature will save you time on-the-go."

If the new interface has been enabled automatically, you can use the same instructions to disable it. Just pick "disabled" instead of "enabled".

The updated new tab page has some advantages: it loads quickly, it's consistent and it looks nice. Unfortunately, bookmarks and the list of tabs from other devices load in separate pages and you can no longer see them automatically when you open a new tab. I created a folder with mobile apps I frequently use and this folder used to be displayed when opening a new tab. This feature is no longer available in the new interface. Unlike the desktop Chrome, the mobile Chrome doesn't support extensions and you can't customize the new tab page.

This "baby" new tab page could be useful to help users discover the omnibox and use it to search the web, but what happens when they realize that the big search box is redundant? And what about the people who already used the omnibox?

New Google Image Search for Mobile

Google's image search engine has a new interface for smartphones and tablets. The new UI looks just like the desktop UI, but you can use swipes to navigate between the image results.

Here are some screenshots from my Nexus 7. When you tap an image result, a black box with a bigger version of the image will open. You can also find some additional information about the image.


Swipe left to see the next image result, swipe right to go to the previous result. Gestures work just like the left/right keyboard shortcuts in the desktop interface. Tap an image to open the page that includes it.


A similar interface is available for smartphones. Here's a screenshot from an iPhone running iOS7:


Google will probably say that it changed the interface to make it more consistent and provide an unified interface for both desktop and mobile devices. There are some other advantages: you can scroll down to see more results, you can scroll up and quickly change the query or switch to web search.

I find the old interface more intuitive and better suited for mobile devices. It made it more obvious that you can use gestures by showing the previous and the next image result, search results didn't move around and you could find more information about the images. The new smartphone interface only displays the domain name and it no longer shows the title of the page and the image size (the tablet interface still shows them). Here's a screenshot of the old UI:

Thursday, October 3, 2013

YouTube Updates Center-Aligned UI, Adds Carousel

YouTube's experimental interface now uses carousels on the homepage, so it can show more videos from a channel. Video thumbnails are also much bigger. The regular interface also uses carousels, but only when you are signed in.

It's another version of the center-aligned layout, which uses a persistent header, a guide sidebar that's visible only when you click "Guide" and a card-style interface.




Here's how you can enable the experimental feature. If you use Chrome, Firefox, Opera, Safari or Internet Explorer 8+:

1. open youtube.com in a new tab

2. load your browser's developer console:

* Chrome or Opera 15+ - press Ctrl+Shift+J for Windows/Linux/ChromeOS or Command-Option-J for Mac

* Firefox - press Ctrl+Shift+K for Windows/Linux or Command-Option-K for Mac

* Internet Explorer 8+ - press F12 and select the "Console" tab

* Safari 6 - if you haven't enabled the Develop menu, open Preferences from the Safari menu, go to the Advanced tab and check "Show Develop menu in menu bar". Close Preferences and then press Command-Option-C to show the console.

* Opera 12 - press Ctrl+Shift+I for Windows/Linux or Command-Option-I for Mac, then click "Console".

3. paste the following code which changes a YouTube cookie:

document.cookie="VISITOR_INFO1_LIVE=lnq3tYnrDNU; path=/; domain=.youtube.com";window.location.reload();

4. press Enter and close the console.

To go back to the regular interface, use the same instructions, but replace the code from step 3 with this one:

document.cookie="VISITOR_INFO1_LIVE=; path=/; domain=.youtube.com";window.location.reload();

{ Thanks, Rubén and Ramona Brown. }

Monday, September 30, 2013

Google Mobile Image Search Regression

Google has a great mobile interface for image search. It was launched in 2010 and improved multiple times since then. You can use swipes to go to the next image result or to the previous one. It looks like Google changed the image search UI for smartphones and tablets and now sends you to a landing page that shows the image and loads the corresponding page in the background. Intuitive gestures are gone and now you have to use the back button.


This seems to be limited to iPhones and iPads running iOS 7, so it's probably a bug. A lot of people complain about this in the Google Search Forum.

There are many reasons why the new interface is strange: loading the associated page uses more bandwidth and that's not a good idea for mobile devices, it's more difficult to check multiple search results, thumbnails are smaller and even the desktop interface shows a bigger image instead of sending users to a new page.

Blog Archive