7 ms·

Use Google+ to Improve Your UI

183 points by blakeperdue 15y ago

yellowbkpk 15y ago
No, no, no! Please don't let GMail and G+'s new look become a new fad. The white space around every element is very wasteful and obnoxious. Not everyone has huge resolutions and those that do don't appreciate having to scroll several times just to see past the first 4 or 5 entries in a list view.
- bretthopper 15y ago
  This has nothing to do with whitespace. It's just a CSS library for Google+ style buttons.
  - Groxx 15y ago
    But it does have something (ie, everything) to do with spreading the Google+ style, which includes the whitespace.
- enjo 15y ago
  I'm using the new gmail theme, and I don't have any of those complaints. I'm on a medium resolution screen (1400x1050 I think) and I currently have 18 mail entries visible. It definitely took me a bit to get used to a typography-centric layout. I really do like it now, however.
  - Groxx 15y ago
    Between the dense new theme and the original, I go between 18 entries and 26 entries. The original also has noticeably more preview text. The "normal" new theme gives me only 14 - nearly half the number. Were my window a bit shorter, it would be half, because the header area and priority-inbox-label lines are larger. The increased whitespace makes it massively less dense.
- Groxx 15y ago
  I like the "flatter" UI design overall, but I agree on the whitespace. Especially in Gmail. I wouldn't mind a flatter phase going through The Internets, as I think it's less distracting, but I entirely agree. Less wasteful display of data, please. I would be interested in any info people may have as to whether such a large amount of whitespace does or does not improve user's understanding/use of sites. I like dense displays, but I'm also willing to learn how to use more powerful tools, as I value the efficiency.
  - samdelagarza 15y ago
    Yes the extra whitespace in gmail is good. Just read TuFte's book on ink-to-information ratio. Good stuff
- dpcan 15y ago
  I think you're going to lose this battle :) I like the new layout and white space, it's much easier for me to read, but I've always liked this style. In fact, I have a tendency to double space much of my code and other coders hate that I do this. The only think I REALLY don't like is the giant red COMPOSE button. Uhg. I just want to change it to another color. I REPLY all the time but don't compose often, and having this giant red eye-sore there all the time is very uncomfortable.
- yaix 15y ago
  Okay, thanks. I was just about to write the exact same thing (although I may have been more dramatic complaining about the huge amount of unnecessary white space that fills my small netbook screen). The new buttons however are quite nice and simple. There should be a hint of 3D though, to make them feel more "press-able". Other than that, I am okay with them becoming wide spread on the web, just don't surround them with so much wasted space.
  - pizzaburger 15y ago
    I wrote a userscript that dials down the whitespace, if anyone's interested: http://userscripts.org/scripts/show/105891 http://userscripts.org/scripts/show/105891
bonch 15y ago
This isn't using Google+ to improve your UI. It's just a tutorial on making so-called "Google-styled" buttons in CSS, which are really just knock-offs of the standard iOS button.
bretthopper 15y ago
One interesting difference: Google just uses <div> for their buttons instead of <a> tags or even <button>. They also don't set cursor: pointer (the hand) for them. Any UI people want to comment on the best practice for cursor styles? I always figured pointer should be used for all buttons or links that have an action attached.
- cleer 15y ago
  FWIW, I asked also this here: http://www.quora.com/Whats-best-practice-for-buttons-on-single-page-apps http://www.quora.com/Whats-best-practice-for-buttons-on-sing... Would be cool to get more opinions on it. Also note that the buttons in the header area of Google+ are <a> tags, probably since they actually link to separate pages. I guess that's Google's practice.
- Groxx 15y ago
  I, personally, hate buttons without cursor:pointer. Hover effects are nice and all, but they're often rather subtle, and your eyes are attuned to the cursor already. Changing it is extremely visible, and gives you immediate feedback that you're hovering something actionable. Anecdotal, but I find I "see" when my cursor enters a clickable region much more quickly if the cursor changes - I click sooner, rather than making sure it's positioned inside the element.
  - derefr 15y ago
    I find that I subconsciously interpret cursor:pointer as "clicking here will do something with GET semantics" vs. cursor:default as "clicking will do something with POST semantics". I feel about the same way about cursor:pointer-styled buttons as I do about plain blue-underlined "Delete" links.
    - Groxx 15y ago
      I wonder if that's born from OS UI semantics... interesting. I wonder what pushed us in opposite directions.
- 15y ago
gizmo 15y ago
It looks pretty nice but the use of background gradients is inconsistent. The buttons with a background image have no gradient but the other buttons do.
- blakeperdue 15y ago
  Nice catch. Know of an easy workaround to this?
  - bretthopper 15y ago
    You can use multiple backgrounds in CSS3: http://snook.ca/archives/html_and_css/multiple-bg-css-gradients http://snook.ca/archives/html_and_css/multiple-bg-css-gradie... Lots of details here and some catches to look out for (mostly browser support).
    - alanh 15y ago
      Warning: Multiple backgrounds can lead to LOTS of waste in the CSS (defining gradients over and over) if you aren’t using sprites for those icons (and setting all of them at once).
  - gizmo 15y ago
    Nope, I don't think there are any (the CSS3 workarounds can be tricky with custom padding/margin). Google consistently uses nested elements and I think for the next few years that's the only solution that's going to work well cross-browser.
r00fus 15y ago
Is it me, or does this theme look similar to jQueryUI?
- dangrossman 15y ago
  In what way? The sites don't look similar, and neither do their buttons.
- solarlion 15y ago
  Reminded me of the aristo theme which I quite like https://github.com/banzor/Aristo-jQuery-UI-Theme https://github.com/banzor/Aristo-jQuery-UI-Theme
  - taitems 15y ago
    C'mon, at least link back to the original ;) https://github.com/taitems/Aristo-jQuery-UI-Theme https://github.com/taitems/Aristo-jQuery-UI-Theme
- tbh2347 15y ago
  Unless we're talking about different things (I'm thinking http://jqueryui.com/themeroller/ http://jqueryui.com/themeroller/), it feels completely different from jQueryUI. jQueryUI is much glossier and not as muted.
shawncplus 15y ago
almost identical to the particletree buttons from almost 4(!) years ago http://particletree.com/features/rediscovering-the-button-element/ http://particletree.com/features/rediscovering-the-button-el...
- scooter53080 15y ago
  I like the buttons described there. They were also rolled into blueprint css as the 'buttons' plugin. https://github.com/joshuaclayton/blueprint-css/tree/master/blueprint/plugins/buttons https://github.com/joshuaclayton/blueprint-css/tree/master/b...
JoshTriplett 15y ago
These look good to me (apart from the previously mentioned issue of not actually using <a> tags or similar), but where's the license on these? Neither the site nor the download includes any license information.
netmau5 15y ago
Well done. Backpacking an existing fad to get visibility from early adopters on your project. Case study in excellent blog-marketing. Thanks for the buttons too~
taitems 15y ago
For the love of god people, please stop using the Silk icon set. It's had a good run and it's time to retire it.
ajessup 15y ago
Just wanted to say thanks for providing this - it's already been helpful

183 points by blakeperdue 15y ago

No, no, no! Please don't let GMail and G+'s new look become a new fad. The white space around every element is very wasteful and obnoxious. Not everyone has huge resolutions and those that do don't appreciate having to scroll several times just to see past the first 4 or 5 entries in a list view.

bretthopper 15y ago
This has nothing to do with whitespace. It's just a CSS library for Google+ style buttons.
- Groxx 15y ago
  But it does have something (ie, everything) to do with spreading the Google+ style, which includes the whitespace.
enjo 15y ago
I'm using the new gmail theme, and I don't have any of those complaints. I'm on a medium resolution screen (1400x1050 I think) and I currently have 18 mail entries visible. It definitely took me a bit to get used to a typography-centric layout. I really do like it now, however.
- Groxx 15y ago
  Between the dense new theme and the original, I go between 18 entries and 26 entries. The original also has noticeably more preview text. The "normal" new theme gives me only 14 - nearly half the number. Were my window a bit shorter, it would be half, because the header area and priority-inbox-label lines are larger. The increased whitespace makes it massively less dense.
Groxx 15y ago
I like the "flatter" UI design overall, but I agree on the whitespace. Especially in Gmail. I wouldn't mind a flatter phase going through The Internets, as I think it's less distracting, but I entirely agree. Less wasteful display of data, please. I would be interested in any info people may have as to whether such a large amount of whitespace does or does not improve user's understanding/use of sites. I like dense displays, but I'm also willing to learn how to use more powerful tools, as I value the efficiency.
- samdelagarza 15y ago
  Yes the extra whitespace in gmail is good. Just read TuFte's book on ink-to-information ratio. Good stuff
dpcan 15y ago
I think you're going to lose this battle :) I like the new layout and white space, it's much easier for me to read, but I've always liked this style. In fact, I have a tendency to double space much of my code and other coders hate that I do this. The only think I REALLY don't like is the giant red COMPOSE button. Uhg. I just want to change it to another color. I REPLY all the time but don't compose often, and having this giant red eye-sore there all the time is very uncomfortable.
yaix 15y ago
Okay, thanks. I was just about to write the exact same thing (although I may have been more dramatic complaining about the huge amount of unnecessary white space that fills my small netbook screen). The new buttons however are quite nice and simple. There should be a hint of 3D though, to make them feel more "press-able". Other than that, I am okay with them becoming wide spread on the web, just don't surround them with so much wasted space.
- pizzaburger 15y ago
  I wrote a userscript that dials down the whitespace, if anyone's interested: http://userscripts.org/scripts/show/105891 http://userscripts.org/scripts/show/105891

bonch 15y ago

This isn't using Google+ to improve your UI. It's just a tutorial on making so-called "Google-styled" buttons in CSS, which are really just knock-offs of the standard iOS button.

bretthopper 15y ago

One interesting difference: Google just uses <div> for their buttons instead of <a> tags or even <button>. They also don't set cursor: pointer (the hand) for them. Any UI people want to comment on the best practice for cursor styles? I always figured pointer should be used for all buttons or links that have an action attached.

cleer 15y ago
FWIW, I asked also this here: http://www.quora.com/Whats-best-practice-for-buttons-on-single-page-apps http://www.quora.com/Whats-best-practice-for-buttons-on-sing... Would be cool to get more opinions on it. Also note that the buttons in the header area of Google+ are <a> tags, probably since they actually link to separate pages. I guess that's Google's practice.
Groxx 15y ago
I, personally, hate buttons without cursor:pointer. Hover effects are nice and all, but they're often rather subtle, and your eyes are attuned to the cursor already. Changing it is extremely visible, and gives you immediate feedback that you're hovering something actionable. Anecdotal, but I find I "see" when my cursor enters a clickable region much more quickly if the cursor changes - I click sooner, rather than making sure it's positioned inside the element.
- derefr 15y ago
  I find that I subconsciously interpret cursor:pointer as "clicking here will do something with GET semantics" vs. cursor:default as "clicking will do something with POST semantics". I feel about the same way about cursor:pointer-styled buttons as I do about plain blue-underlined "Delete" links.
  - Groxx 15y ago
    I wonder if that's born from OS UI semantics... interesting. I wonder what pushed us in opposite directions.
15y ago

gizmo 15y ago

It looks pretty nice but the use of background gradients is inconsistent. The buttons with a background image have no gradient but the other buttons do.

blakeperdue 15y ago
Nice catch. Know of an easy workaround to this?
- bretthopper 15y ago
  You can use multiple backgrounds in CSS3: http://snook.ca/archives/html_and_css/multiple-bg-css-gradients http://snook.ca/archives/html_and_css/multiple-bg-css-gradie... Lots of details here and some catches to look out for (mostly browser support).
  - alanh 15y ago
    Warning: Multiple backgrounds can lead to LOTS of waste in the CSS (defining gradients over and over) if you aren’t using sprites for those icons (and setting all of them at once).
- gizmo 15y ago
  Nope, I don't think there are any (the CSS3 workarounds can be tricky with custom padding/margin). Google consistently uses nested elements and I think for the next few years that's the only solution that's going to work well cross-browser.

r00fus 15y ago

Is it me, or does this theme look similar to jQueryUI?

dangrossman 15y ago
In what way? The sites don't look similar, and neither do their buttons.
solarlion 15y ago
Reminded me of the aristo theme which I quite like https://github.com/banzor/Aristo-jQuery-UI-Theme https://github.com/banzor/Aristo-jQuery-UI-Theme
- taitems 15y ago
  C'mon, at least link back to the original ;) https://github.com/taitems/Aristo-jQuery-UI-Theme https://github.com/taitems/Aristo-jQuery-UI-Theme
tbh2347 15y ago
Unless we're talking about different things (I'm thinking http://jqueryui.com/themeroller/ http://jqueryui.com/themeroller/), it feels completely different from jQueryUI. jQueryUI is much glossier and not as muted.

shawncplus 15y ago

almost identical to the particletree buttons from almost 4(!) years ago http://particletree.com/features/rediscovering-the-button-element/ http://particletree.com/features/rediscovering-the-button-el...

scooter53080 15y ago
I like the buttons described there. They were also rolled into blueprint css as the 'buttons' plugin. https://github.com/joshuaclayton/blueprint-css/tree/master/blueprint/plugins/buttons https://github.com/joshuaclayton/blueprint-css/tree/master/b...

JoshTriplett 15y ago

These look good to me (apart from the previously mentioned issue of not actually using <a> tags or similar), but where's the license on these? Neither the site nor the download includes any license information.

netmau5 15y ago

Well done. Backpacking an existing fad to get visibility from early adopters on your project. Case study in excellent blog-marketing. Thanks for the buttons too~

taitems 15y ago

For the love of god people, please stop using the Silk icon set. It's had a good run and it's time to retire it.

ajessup 15y ago

Just wanted to say thanks for providing this - it's already been helpful