So over the course of the past few months, we have seen several people use the toolbar and also experienced the use a lot ourselves. Even with the overlay now in place, I am often finding myself looking how to easily go back to the homepage of my site.

Part of this is shown in the Belfast ( http://vimeo.com/groups/drupalux/album/217 ) usability testing videos, where a participant is confused for a bit where to get back to home.

Where as the overlay puts one above the original site, it still lacks the direct link to the homepage - which tools such as admin_menu showed us to be a primary target in administrative duties.

I think its worth showing an exploration that yoroy did :

homebuttonintoolbar.jpg

Comments

bleen’s picture

I like this idea a lot ... what is the argument against this?

dave reid’s picture

Yes please! I like this idea a lot as well! This is one of the few reasons I really prefer using admin_menu over core toolbar in D7 right now.

yoroy’s picture

Thanks for opening this issue. I came up with this because I do find myself scrolling back up on an admin page to click the 'home' link in the breadcrumb. Relying on breadcrumbs for this is not a good thing me thinks.

bleen’s picture

Status: Active » Needs review
StatusFileSize
new304 bytes
new3.21 KB

here is a first go at it... note that you need the attached home_icon.png image in your toolbar module directory

screenshot: http://img.skitch.com/20091215-f46nwbc1utegddktriapqbkhp.jpg

dries’s picture

Priority: Critical » Normal

Instead of introducing a new home_icon.png, we should try to put this in the existing sprite (i.e. modules/toolbar/toolbar.png). Let's try to get it in, but it is not critical. Critical bugs prevent Drupal from working.

bleen’s picture

@Dries: I tried that... problem is that the current behavior of the toolbar uses the existing sprite image to show the gray bg on rollover. That means that when you roll over the "home" link, the house is replaced by the gray bg. Make sense?

bleen’s picture

StatusFileSize
new3.25 KB
new746 bytes

Sooooo remember when I just said I couldn't figure out how to reuse toolbar.png instead of introducing a new img ... I lied. Here we go.

EDIT: see #9 for the correct toolbar.png

dries’s picture

The toolbar.png that you attached in#7 does not seem to add a home icon?

bleen’s picture

StatusFileSize
new746 bytes

Ooops ... thanks Dries. Please use the png attached to this comment instead

moshe weitzman’s picture

Doh! You attached the same toolbar.png

yoroy’s picture

No he didn't :)
Only local images are allowed. It's hard to see but it's there now.

Noyz’s picture

+1 on this. relying on the breadcrumb is ridiculous.

Noyz’s picture

+1 on this. relying on the breadcrumb is ridiculous.

dries’s picture

Status: Needs review » Fixed

Committed to CVS HEAD. Thanks!

carlos8f’s picture

Ooh, had to refresh my browser cache on toolbar.png to see the icon.

Bojhan’s picture

Status: Fixed » Needs work

Ohh, yee - this was supposed to get some extra work on the icon? Its too intrusive - removing the bottom line and moving it a bit more centerd. And we didn't really work on the hover?

yoroy’s picture

This was committed way too soon yeah. Guess we continue here with follow ups…

seutje’s picture

subscribe, I was happily surprised when I saw this! :)

yoroy’s picture

Status: Needs work » Needs review
StatusFileSize
new753 bytes

Critical bugs prevent Drupal from working.

Dries: bugs that prevent *People* from working should be regarded as critical too. I'd consider this a small but critical flaw in the default IA.

Only local images are allowed.
We could do it like this.

yoroy’s picture

StatusFileSize
new632 bytes

And the updated toolbar.png…

bleen’s picture

fancy-schmancy. I like it!

yoroy’s picture

For the overall impression of visual weight of this approach:
active: http://skitch.com/yoroy/nm9mg/d7
not active: http://skitch.com/yoroy/nm9mq/hello-world-etc-d7

mcrittenden’s picture

+1 on yoroy's #19.

dries’s picture

I don't think it was committed too soon -- it is OK to follow-up with refinements. :)

The new icon in #20 is much better than the old one so I committed that one.

Feel free to mark this 'fixed' if we're all happy with it. If not, I'll check in in a couple of days.

Keep up the great work. Love the new icon!

dries’s picture

By the way, I think the home button (the background, not the house itself) could be a few pixels less wide. That might be personal taste though.

yoroy’s picture

StatusFileSize
new93.43 KB

And I agree. I tried, but:

If somebody knows how to make the rounded corners slide in *below* the icon I'm all ears.

psicomante’s picture

#toolbar div.toolbar-menu ul#toolbar-home li a {
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
padding:0 4px;
}

i tried this.

psicomante’s picture

StatusFileSize
new898 bytes

coming patch to the last sprite png

yoroy’s picture

StatusFileSize
new439 bytes

Fancy-smanchy sounds nice but doesn't match the overall basic esthetic of Seven. Must. practise. restraint.

Only local images are allowed.

Sprite for this iteration attached.

yoroy’s picture

StatusFileSize
new433 bytes

I mean this one of course…

bleen’s picture

StatusFileSize
new630 bytes

this patch addresses #26

psicomante’s picture

StatusFileSize
new621 bytes

patch for #31

yoroy’s picture

Awesome. Thank you both!
Lets get some reviews :)

merlinofchaos’s picture

I'm not sure about #19. The icon for when you're not at home does NOT look like a button you can click on, but the button for when you are at home DOES look like a button you can click on. That seems backward to me. i.e, the highlight does not say "You are here" to me, it says "I am a button, click on me".

bleen’s picture

@merlinofchaos ... #19 does match the convention for the rest of the toolbar options though

Bojhan’s picture

@merlin I am somewhat confused, you mean the indicator for active state implies a button? Because if so, I think thats because you see this in isolation - if you look at the bigger picture in using the toolbar it will be a consistent element in implying active state.

I like the toning down of the icon by yoroy, much better

merlinofchaos’s picture

I only have the skitches that yoroy linked to go on, but the feeling I get about that is pretty strong. In the actual linked images, where it IS in isolation, I didn't really think about it. When I clicked through the skitch links yoroy did, I did a doubletake because I thought the images were reversed at first. Maybe it won't ultimately be confusing but it certainly confused me initially.

merlinofchaos’s picture

By way of example, look at http://skitch.com/yoroy/nm9mg/d7 and look at the home icon on the left and the arrow down icon on the right. The visual distinction between them is very small. Both look button-like to me. I know it doesn't seem that way when there is text there in the highlight, but with the icon it does seem button like.

yoroy’s picture

#663126: Active items in top level IA don't have the light gray background when overlay is enabled is the reason the active state for the icon looks like an exception.

Noyz’s picture

Disagreeing and agreeing with Merlin. I too think the design is a bit backwards, but that's the way it works across the entire toolbar. If there's a request to change this, I think that's a new issue. Regarding this issue, I think yoroy's design is a huge improvement. +50

Bojhan’s picture

I want to mark this RTBC, there might be a small followup on the icon - if we feel to do so (but not neccairly). Waiting for a last screenshot / green test.

merlinofchaos’s picture

If my concerns are an issue with the entire IA, that's definitely another issue and it shouldn't block the icon.

yoroy’s picture

StatusFileSize
new754 bytes

This patch should make it look like this:

Only local images are allowed.

Uses toolbar.png in http://drupal.org/node/658726#comment-2386346

dries’s picture

Let's see what Earl thinks?

merlinofchaos’s picture

I think my issue is with overall IA on the hilighting and should not block the icon from going in with yoroy's choices.

dries’s picture

@merlinofchaos, I'm slightly confused because your original feedback was very visual, and had nothing to do with the IA. Are you able to articulate your confusion relative to the IA? Would love to better understand the relation to the home icon.

yoroy’s picture

Well, as Noyz points out in #40 the visual styling of the hover and active states *for any link in the top level IA*, isn't optimal. Merlinofchaos rightfully points out that the current styling makes things look like a button. Using an icon just makes this a bit more obvious to see and I assume that's what triggered Earls comment.

The current styling is not the issue at hand here though. Nor can we afford another text link in there, it would take up too much space. So for now, we choose to live with it. Having a link to the front end in there at all is far more important than the styling.

yoroy’s picture

BTW, the former comment was written after talking about it with merlinofchaos. Patch in #43 and toolbar.png in #30 are RTBC, somebody mark it as such please.

Bojhan’s picture

Status: Needs review » Reviewed & tested by the community

RTBC, patch #43

dries’s picture

Status: Reviewed & tested by the community » Fixed

Committed to CVS HEAD. Thanks.

Status: Fixed » Closed (fixed)
Issue tags: -Usability, -D7UX

Automatically closed -- issue fixed for 2 weeks with no activity.