{"id":1229,"date":"2011-11-28T19:36:16","date_gmt":"2011-11-28T09:36:16","guid":{"rendered":"http:\/\/www.natashabarr.com\/blog\/?p=1229"},"modified":"2019-05-08T22:43:20","modified_gmt":"2019-05-08T12:43:20","slug":"googles-products-and-services-design-refresh-for-better-or-for-worse","status":"publish","type":"post","link":"https:\/\/natashabarr.com\/blog\/design\/googles-products-and-services-design-refresh-for-better-or-for-worse\/","title":{"rendered":"Google’s design refresh – for better or worse?"},"content":{"rendered":"\n
\"Google<\/a>
Google Product Review<\/figcaption><\/figure><\/div>\n\n\n\n

Most people I know (think that I’m crazzaeeeey!) use Google products or services at some capacity and since the launch of Google+, they’ve been slowly updating their UI and designs to give them a much needed face lift. Recently the new Gmail and Google Reader layouts were unveiled and it’s been interesting to see how the changes have affected my experience with them.<\/p>\n\n\n\n\n\n\n\n

Overall Changes<\/h3>\n\n\n\n

Before I jump into specifics, I thought I’d quickly go over updates that have been implemented across most Google services in an effort to make them more seamless and coherent. One of the main differences is the top display bar which more clearly anchors the navigation, a lot better than the links just hovering around the top like before.<\/p>\n\n\n\n

\"Google<\/a>
Main search page with the top nav bar<\/figcaption><\/figure><\/div>\n\n\n\n

The blue and white colour schemes have now been replaced with more subtle greys and important function buttons (e.g ‘Compose’ in Gmail) are now consistently placed and more obvious in red. Most other elements have also been padded out to give them more room to breathe.<\/p>\n\n\n\n

All the hover states for buttons are now subtle gradients with a slight drop shadow instead of a small grey outline. Despite being barely noticeable I think its a good upgrade from the previous design.<\/p>\n\n\n\n

\"Google<\/a>
Static and hover states of buttons<\/figcaption><\/figure><\/div>\n\n\n\n

Gmail<\/h3>\n\n\n\n
\"Gmail<\/a>
Comparison of old and new gmail<\/figcaption><\/figure><\/div>\n\n\n\n

If you use Gmail, you’ll have noticed a little button at the bottom suggesting you to “Switch to the New Look”. I’ve changed over my business gmail accounts but I’ve been reluctant to on my personal emails. This has given me the chance to compare their functionality over the last couple of weeks.<\/p>\n\n\n\n

The most interesting change is the option of Display Density which would be better named ‘how much do you want to pad out your page’. When changing over to the new version, the density is defaulted to ‘Comfortable’ with options for ‘Cosy’ and ‘Compact’ on the settings. Ironically, I personally found the Comfortable setting actually makes checking emails more uncomfortable for me. Because of the padding between each individual email, lines takes up more space and therefore there are less emails on display. On my small screen size (1280 x 800) this means a lot of emails are hidden below the fold. I also find the Comfortable display harder to read and it now takes me longer to search through older emails due to having to scroll further.<\/p>\n\n\n\n

\"Gmail<\/a>
Display densities in Gmail – Comfortable (14 emails can be seen above the fold), Cozy (17) and Compact (24)<\/figcaption><\/figure><\/div>\n\n\n\n

This is even worse if you have your Inbox type set to something other than Classic because it pushes them down further.<\/p>\n\n\n\n

\"Gmail<\/a>
With the unread first inbox type, only 10 emails can be seen on screen<\/figcaption><\/figure><\/div>\n\n\n\n

I’ve keep mine set on the Compact which pretty much resembles the old Gmail display. I think Cozy would be fine to use if you use the Classic Inbox Type or if you a much larger screen. What do you think about the display densities?<\/p>\n\n\n\n

Other changes worth noting are in the details, such an update of the icons for stars and priority emails. The labels are now larger and in an easy to read font while they have removed the rounded corners to keep them simple.<\/p>\n\n\n\n

\"Updated<\/a>
Updated Icons and labels<\/figcaption><\/figure><\/div>\n\n\n\n

The side bar now moves up and down if you’ve dragged your chat box over the other Inbox folders, sliding down to reveal them when you hover in the area. It’s a nifty idea how I’ve found it can be a little distracting if done accidentally in a “What just moved?! Oh, the sidebar” kind of way. However, you can hide the chat area completely by clicking at the speech bubble icon at the bottom of the sidebar if it becomes too bothersome. Do you guys find it annoying?<\/p>\n\n\n\n

\"Gmail<\/a>
New sidebar slides up and down<\/figcaption><\/figure><\/div>\n\n\n\n

I do like the extra options that only appear when you select something, making less confusion if you’re prone to pressing delete with nothing selected (like me ^^;).<\/p>\n\n\n\n

\"Gmail<\/a>
Options that appear when an email is highlighted<\/figcaption><\/figure><\/div>\n\n\n\n

Google Calendar<\/h3>\n\n\n\n
\"Google<\/a>
Comparison of old and new<\/figcaption><\/figure><\/div>\n\n\n\n

We do lot of scheduling meetings and noting vacation days in our Google calendars at work. I’ve always liked the the colour coding of peoples individual calendars and being able to clearly see everything that’s going on in the week.<\/p>\n\n\n\n

It’s been interesting to see how this has changed. One thing I’ve noticed is the fading out of previous day’s events. Originally I thought all of the events were faded and I was kinda annoyed by this before realising what was going on. Only present and future events are in full colour while the others are faded. Pretty clever. I have noticed that other’s calendars appear with diagonal stripes but I’m not sure why, it seems a little unnecessary. Thoughts?<\/p>\n\n\n\n

\"Google<\/a>
Active and Inactive events<\/figcaption><\/figure><\/div>\n\n\n\n

The Create Event page is pretty much the same as before with a few elements moved around and updated.<\/p>\n\n\n\n

\"Google<\/a>
Edit event pages<\/figcaption><\/figure><\/div>\n\n\n\n

Google Docs<\/h3>\n\n\n\n
\"Google<\/a>
Old and new comparison<\/figcaption><\/figure><\/div>\n\n\n\n

I rarely use Google docs but I know others do so I thought I’d compare it’s update even if only based on aesthetics. Noticeably, the right hand summery that appeared in the old design has now been removed and the focus is on the articles making it appear a lot cleaner.<\/p>\n\n\n\n

Similarly to Gmail, there’s are the Display Density options and I have the same opinion on this as before. Comfortable just seems to waste too much space.<\/p>\n\n\n\n

\"Google<\/a>
Display density comparison<\/figcaption><\/figure><\/div>\n\n\n\n

I don’t have a screenshot of what document view looked like before to compare but I like the simplicity of new design. I’m not sure how this affects editing and working with the document though. Let me know in the comments!.<\/p>\n\n\n\n

\"Google<\/a>
Document view<\/figcaption><\/figure><\/div>\n\n\n\n

Google Reader<\/h3>\n\n\n\n
\"Google<\/a>
New look<\/figcaption><\/figure><\/div>\n\n\n\n

Google Reader is the product I probably have the most gripes about. I’m surprised that the some of the functions available in other services are not in Reader.<\/del> When I first started writing this I was annoyed by lack of some features but it seems these have been recently corrected! While I still can’t change back to the old version like Gmail and Docs (which was going to be inevitable), the Display Density options that were missing before have now been implemented so I no longer am frustrated about using Reader anymore ^^;;.
\n<\/del><\/p>\n\n\n\n

One thing that still bugs me, and this is purely aesthetic, is that in expanded view the selected article only has a border on 3 sides! I don’t even understand the logic of this unless it’s a browser\/screen size issue in which case I might forgive it but I have my doubts this is the issue.<\/p>\n\n\n\n

\"Google<\/a>
Expanded view of articles, why is the border missing on the right hand side?<\/figcaption><\/figure><\/div>\n\n\n\n

Conclusion<\/h3>\n\n\n\n

While Google now looks up-to-date with the rest of the web, I find myself a little confused with some of the new functional changes and options. Or maybe I just don’t like change. I have to admit that it’s good to see a more uniform theme across the Google product range (except Analytics, what’s with that orange?) and I welcome the updates.<\/p>\n\n\n\n

These are only my thoughts though and only a small part of Google’s full list of products and services. What are your thoughts on the changes? Let me know!<\/p>\n","protected":false},"excerpt":{"rendered":"

Most people I know (think that I’m crazzaeeeey!) use Google products or services at some capacity and since the launch of Google+, they’ve been slowly updating their UI and designs to give them a much needed face lift. Recently the new Gmail and Google Reader layouts were unveiled and it’s been interesting to see how […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[23],"tags":[113,115],"class_list":["post-1229","post","type-post","status-publish","format-standard","hentry","category-design","tag-review","tag-web-design"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/natashabarr.com\/blog\/wp-json\/wp\/v2\/posts\/1229","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/natashabarr.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/natashabarr.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/natashabarr.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/natashabarr.com\/blog\/wp-json\/wp\/v2\/comments?post=1229"}],"version-history":[{"count":42,"href":"https:\/\/natashabarr.com\/blog\/wp-json\/wp\/v2\/posts\/1229\/revisions"}],"predecessor-version":[{"id":6648,"href":"https:\/\/natashabarr.com\/blog\/wp-json\/wp\/v2\/posts\/1229\/revisions\/6648"}],"wp:attachment":[{"href":"https:\/\/natashabarr.com\/blog\/wp-json\/wp\/v2\/media?parent=1229"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/natashabarr.com\/blog\/wp-json\/wp\/v2\/categories?post=1229"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/natashabarr.com\/blog\/wp-json\/wp\/v2\/tags?post=1229"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}