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

A YouTube Experiment Resizes the Player Dynamically

Donal Trung 2:32 AM Add Comment
There's a new YouTube experiment that changes the video player's size, depending on the browser window's size. When resizing Chrome's window, YouTube switches from 360p to 480p and to 720p, while the player gets bigger.

Here's the same video in a larger player (480p) and an almost fullscreen player (720p) on a 1080p display:



Here's the regular YouTube interface. The screenshot shows a maximized Chrome window on a 1080p display, just like the previous screenshot:


YouTube's "stats for nerds" show the size of the player ("dimensions") and the video resolution:


The nice thing is that the player resizes automatically and you don't have to click a button. It's the power of responsive design. The YouTube player still has a "large player" button, but it only moves the right sidebar and centers the player.

How to try the new 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=E_OLzg3yeLw; 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, Maurice Wahba. }

Personalize Google's App Launcher

Donal Trung 3:41 AM Add Comment
Last week, I mentioned that you can customize Google's app launcher, but the feature didn't work well: changes weren't saved. Now it works well and you can reorder the apps using drag and drop, but only if you're signed in to your Google Account. You can also add new shortcuts: go to Google Keep, Google Sites, Play Music, Webmaster Central, Google Voice, Google Patents, Google Groups, click the app launcher icon and then click "Add a shortcut".



There's no way to remove shortcuts, but you can always drag them to the second page, so they're out of the way.

Here are the default apps in the US:


I also found a strange issue: some of the shortcuts are greyed out and nothing happens when you click them. It may have something to do with using the US interface outside the US.

Rearrange Apps in Google's Navigation Menu

Donal Trung 12:40 PM Add Comment
Google's navigation menu now lets you rearrange apps using drag and drop. You can now personalize the app launcher, just like you can drag and drop apps in Chrome's app launcher. You can also add other Google services.


You can drag apps from the second page of the launcher to the first one, drag apps from the first page of the launcher to the second one, increase or decrease the number of apps from the first page.

Here's an example:


And another one:


You can even drag all the apps to the second page:


Google now lets you add other Google services: just visit Google Keep, Google Sites, Google Groups, Google Play Music, Webmaster Tools, Patent Search, Google Voice, click the launcher icon and add shortcuts for those services.



For some reason, the changes aren't preserved. It's probably a bug.

Rounded Google+ Notification Badge

Donal Trung 11:21 AM Add Comment
After making profile pictures from the navigation bar round, Google+ tweaked the badge number displayed next to the bell icon. The counter is now in a red circle like in iOS, instead of a red square.


Here's a similar screenshot from July 2013:


As you can see there are many subtle changes: there's a "+" next to the name, the bell icon has a different color, the "share" button is smaller, the profile picture is circular, borders and the arrow icon are missing.

{ via Moritz }

Google's Truncated Titles

Donal Trung 1:37 PM Add Comment
The Google Search experiment that increased titles and removed underlines from links was quickly added to the regular search interface last week. Now it's no longer an experiment.

While I don't miss underlines, making titles bigger removes a few words from long titles and that's not a good thing. Here are some search results for [google maps api]:

* "Google Street View hack turns your city into a post-apocalypt..." (full title: "Google Street View hack turns your city into a post-apocalyptic jungle")

* "Google puts a limit on free Google Maps API: over 25,000 da..." (full title: "Google puts a limit on free Google Maps API: over 25,000 daily and you pay")


As you can see from these examples, only a few words are removed, but the truncated titles are difficult to understand.

Here's a side-by-side comparison between the new layout and the old one:


From what I know, Google has never displayed a few characters from a word in search results titles. Now it has to do this.


Scanning a list of search results has turned into a game: "guess the title". "Department of Computer S..."? It must be "science". "Combinatorial optimization problems in wireless switch de..."? Hard to say.

A Google Experiment Makes Page Titles Bigger

Donal Trung 11:56 AM Add Comment
Google tests a new search interface for desktop that removes underlines from links and increases text size for page titles.


Here's a screenshot that shows both the experimental UI for search results and the standard interface:


{ Thanks, Matt Cleinman. }

The New Google Maps Replaces the Classic Interface

Donal Trung 1:53 PM Add Comment
Last year, Google released a completely new Google Maps interface for desktop, but made it opt-in. Since then, the Google Maps team fixed bugs, improved performance and added some of the missing features (Pegman, My Location, short URLs, multi-point directions). The next step is obvious: the new Google Maps will become the default version.

"Over the coming weeks, the new Google Maps will make its way onto desktops around the world. Many of you have been previewing it since its debut last May, and thanks to your helpful feedback we're ready to make the new Maps even more widely available," informs Google.

The new Google Maps promised to bring an immersive experience, a personalized map that shows what's relevant and helps you make smarter decisions using recommendations from your Google+ circles. It's a simplified interface that's closer to the mobile UI. Google removed some of the features from the classic interface and focused on the basics: a map you're encouraged to explore, unified directions that show the best options, instant search, permalinks, panoramic images, Google Earth and Street View without plugins.


Classic Google Maps is still available: you can switch by clicking the "?" icon at the bottom of the page and selecting "Return to classic Google Maps". You'll see this message: "You have switched back to classic Google Maps for this session. Remember this choice for next time?". Click "Yes" to always go to the old interface when visiting Google Maps.

YouTube Has a New Interface

Donal Trung 1:25 PM Add Comment
After many months of experiments, YouTube's new interface is finally available to everyone. The layout is center aligned, the header is sticky, the guide sidebar is now a "hamburger"-style menu that includes your playlists, subscriptions and more.

"YouTube now has a center-aligned look, fitting neatly on any screen size, and feeling similar to the mobile apps you're spending almost half your YouTube time with. You can quickly flip between what's recommended and popular in 'What to Watch' like Postmodern Jukebox's Timber, and the latest from your subscribed channels like iamOTHER in 'My Subscriptions,' with both options now front and center. Click the guide icon to the right of the YouTube logo at any time to see your playlists, subscriptions and more."






You can also check some screenshots from YouTube's experiments: July, September, October, November.

YouTube Tests New Mobile Site UI

Donal Trung 4:18 PM Add Comment
YouTube tests a new interface of the mobile site. It's closer to the mobile app UI, it shows the description and the number of likes and dislikes, a red "subscribe" button and action buttons are placed below the video.


There are other changes: the new YouTube logo, the "hamburger" menu, bigger thumbnails, new font, gray background.


{ Thanks, Nedas. }

YouTube's Center-Aligned UI, Ready For Launch

Donal Trung 4:57 PM Add Comment
YouTube continues to refine its center-aligned experimental interface, first spotted in July. The latest tweaks include a menu button placed next to the YouTube logo, a gear button placed next to the "upload" button and a sidebar that remembers the latest display state.


Just like in the previous iterations, the header is sticky and the layout is center-aligned.



The homepage uses carousels and shows contextual menus that let you customize the sections.


YouTube also shows a tour guide, which means that the updated interface is almost ready to be released for everyone.




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=LlWIQlLwL_Y; 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. }

Circular Profile Pictures in Google's Navigation Bar

Donal Trung 1:56 PM Add Comment
Google no longer shows the square profile image in the navigation bar. Now it shows a round image, just like in Google+.


The new version looks nice and makes the Google bar more consistent. Some Google services still use the old version: YouTube, Blogger.



{ Thanks, Florian K. }

Updated Google Settings Page

Donal Trung 11:27 AM Add Comment
The Google Settings page has received a major makeover and switched to the card interface that's used in many Google services and apps. The page is more compact, better optimized for mobile devices and only focuses on the most important features. Advanced features like Google Dashboard or Takeout are linked from the "data tools" section. Google+ settings are available if you click "edit notification settings" and this page also has a new interface.


The security section lets you change your password and recovery options.


The language section lets you skip translations for one or more languages and also enable input tools.



While the new interface looks nice, I feel that there are too many links that send you to separate pages and the transition is not smooth. Here's an example for Google Takeout, which shows a "Data Tools" link that sends you back to the Google Settings page:


{ Thanks, Emanuele, JD, Jérôme. }

YouTube Tweaks Experimental Center-Aligned UI

Donal Trung 1:39 PM Add Comment
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?

Donal Trung 12:58 PM Add Comment
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: