Use Google+ to Improve Your UI

#1

Post by blakeperdue » Mon, Jul 18, 2011, 3:09 PM UTC

Use Google+ to Improve Your UI
pixify.com

Re: Use Google+ to Improve Your UI

#2

Post by yellowbkpk » Mon, Jul 18, 2011, 4:29 PM UTC

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.

Re: Use Google+ to Improve Your UI

#3

Post by bonch » Mon, Jul 18, 2011, 4:37 PM UTC

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.

Re: Use Google+ to Improve Your UI

#4

Post by bretthopper » Mon, Jul 18, 2011, 4:40 PM UTC

yellowbkpk wrote: post #2

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.

This has nothing to do with whitespace. It's just a CSS library for Google+ style buttons.

Re: Use Google+ to Improve Your UI

#5

Post by enjo » Mon, Jul 18, 2011, 4:42 PM UTC

yellowbkpk wrote: post #2

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.

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.

Re: Use Google+ to Improve Your UI

#6

Post by bretthopper » Mon, Jul 18, 2011, 4:44 PM UTC

One interesting difference: Google just uses for their buttons instead of tags or even . 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.

Re: Use Google+ to Improve Your UI

#7

Post by Groxx » Mon, Jul 18, 2011, 4:52 PM UTC

yellowbkpk wrote: post #2

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.

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.

Re: Use Google+ to Improve Your UI

#8

Post by cleer » Mon, Jul 18, 2011, 4:52 PM UTC

bretthopper wrote: post #6

One interesting difference: Google just uses for their buttons instead of tags or even . 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.

FWIW, I asked also this here: 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 tags, probably since they actually link to separate pages. I guess that's Google's practice.

Re: Use Google+ to Improve Your UI

#9

Post by Groxx » Mon, Jul 18, 2011, 4:57 PM UTC

bretthopper wrote: post #6

One interesting difference: Google just uses for their buttons instead of tags or even . 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.

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.

Re: Use Google+ to Improve Your UI

#10

Post by Groxx » Mon, Jul 18, 2011, 4:59 PM UTC

bretthopper wrote: post #4

yellowbkpk wrote: post #2

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.

This has nothing to do with whitespace. It's just a CSS library for Google+ style buttons.

But it does have something (ie, everything) to do with spreading the Google+ style, which includes the whitespace.