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.
Use Google+ to Improve Your UI
11–20 of 46 posts
Re: Use Google+ to Improve Your UI
#12No, 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.
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.
Re: Use Google+ to Improve Your UI
#13One 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.
Yes, changing the cursor to indicate the element can be clicked is the easiest method to communicate this and for the user to understand it.
But it is not unheard of since desktop applications most likely do not change the cursor hovering on a button. It is mostly a web browser feature.
Re: Use Google+ to Improve Your UI
#14No, 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 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.
Re: Use Google+ to Improve Your UI
#15It 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.
Nice catch. Know of an easy workaround to this?
Re: Use Google+ to Improve Your UI
#16One 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.
It's always been my belief that one should try to stick to the browser's native behavior when possible. Web browsers (on personal computers) have pretty consistent pointer states for links (which take you to another page) and form elements (which activate an ability on the current page [with the exception of 'submit' buttons]).
In this regard it seems like Google is doing the right thing. Only run against the user's previously acquired assumptions if there is a very good reason.
Re: Use Google+ to Improve Your UI
#17It 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.
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).
Re: Use Google+ to Improve Your UI
#18One 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.
Re: Use Google+ to Improve Your UI
#19One 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 effects. Pre-AJAX, the web had a history of tarting links up to look like buttons so they would seem more "clickable". Those kinds of "buttons" should get cursor:pointer, but not any other hover effects.
Re: Use Google+ to Improve Your UI
#20Is it me, or does this theme look similar to jQueryUI?