Use Google+ to Improve Your UI • Hacker News Board

Re: Use Google+ to Improve Your UI

#31

Post by ars » Mon, Jul 18, 2011, 9:18 PM UTC

ender7 wrote: post #19

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.

Well, the old technical limitations of the web have muddied the affordances somewhat, but my rules is generally "add cursor:pointer if the button behaves like a link, leave it unchanged if the button behaves like a button". Most of the G+ buttons actually behave like buttons , i.e. you click on them and something happens on the current page. They don't have cursor:pointer, but they have other standard button hover ef…

My rule is add cursor: pointer if you can click on it.

Just because browsers didn't do that in the past for form buttons doesn't mean they did the right thing.

Re: Use Google+ to Improve Your UI

#32

Post by scooter53080 » Mon, Jul 18, 2011, 10:07 PM UTC

shawncplus wrote: post #21

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

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/b...

Re: Use Google+ to Improve Your UI

#33

Post by alanh » Mon, Jul 18, 2011, 11:46 PM UTC

ars wrote: post #31

ender7 wrote: post #19

Earlier quoted context omitted.

Well, the old technical limitations of the web have muddied the affordances somewhat, but my rules is generally "add cursor:pointer if the button behaves like a link, leave it unchanged if the button behaves like a button". Most of the G+ buttons actually behave like buttons , i.e. you click on them and something happens on the current page. They don't have cursor:pointer, but they have other standard button hover ef…

My rule is add cursor: pointer if you can click on it. Just because browsers didn't do that in the past for form buttons doesn't mean they did the right thing.

Agreed completely. At minimum, and this should be obvious, but you should never leave the text/I-beam cursor on something that can be interacted with (e.g. buttons, sliders, tabs). (I would have only upvoted you, but with hidden scores, who does that help?)

Re: Use Google+ to Improve Your UI

#34

Post by alanh » Mon, Jul 18, 2011, 11:49 PM UTC

bretthopper wrote: post #17

blakeperdue wrote: post #15

Earlier quoted context omitted.

Nice catch. Know of an easy workaround to this?

You can use multiple backgrounds in CSS3: 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).

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).

Re: Use Google+ to Improve Your UI

#35

Post by icebraining » Tue, Jul 19, 2011, 12:08 AM UTC

flyosity wrote: post #18

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.

This is absolutely terrible for accessibility. Screen readers will not handle these buttons properly leading to a significantly more difficult experience. James Edwards actually talked about this at The Highland Fling conference a few weeks back.

Or for people using Vimperator/Pentadactyl :|

Re: Use Google+ to Improve Your UI

#36

Post by samdelagarza » Tue, Jul 19, 2011, 12:17 AM UTC

Groxx wrote: post #7

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 d…

Yes the extra whitespace in gmail is good. Just read TuFte's book on ink-to-information ratio. Good stuff

Re: Use Google+ to Improve Your UI

#37

Post by robflynn » Tue, Jul 19, 2011, 12:26 AM 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.

Is there some downside that I am not seeing with relation to using instead of a ?

I have always used tags (occasionally tags as well). Along with a css reset and some custom changes I can make the button look like anything I want.

Re: Use Google+ to Improve Your UI

#38

Post by mdwrigh2 » Tue, Jul 19, 2011, 2:51 AM UTC

blakeperdue wrote: post #22

flyosity wrote: post #18

Earlier quoted context omitted.

This is absolutely terrible for accessibility. Screen readers will not handle these buttons properly leading to a significantly more difficult experience. James Edwards actually talked about this at The Highland Fling conference a few weeks back.

Good point on accessibility. Anyone have links to making your UI accessible (including buttons)?

Here's a pretty good introduction on ARIA which is what Google uses to make their web sites accessible: http://msdn.microsoft.com/en-us/scriptjunkie/ff743762

Re: Use Google+ to Improve Your UI

#39

Post by solarlion » Tue, Jul 19, 2011, 4:15 AM UTC

r00fus wrote: post #20

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

Reminded me of the aristo theme which I quite like https://github.com/banzor/Aristo-jQuery-UI-Theme

Re: Use Google+ to Improve Your UI

#40

Post by derefr » Tue, Jul 19, 2011, 6:05 AM UTC

Groxx wrote: post #9

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 mak…

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.