How much labeling to use?

I used to have everything explicitly labelled in my portfolio, but I’ve gone to hiding it and instead using a JS rollover effect. What do you think? Is this fun to explore, or is it just hard to explore? (check the thumbnails at the bottom of the page, or go to the work page)

What do you do to accommodate those with JavaScript disabled? Are they missing out on useful information, or just missing out on a little enhancement?

I think that’s a good question, the site would still work just fine, but you wouldn’t see the labels. You’d have to explore based on the thumbnails alone. Would that be strange?

I’d say so, yes, especially as your “thumbnails” are pretty large. In my experience, small pictures often “do” something - link to another page, or a larger image or something. Big pictures tend to be static, so I’m not sure I’d even realise I’m meant to explore. That might just be me, though. (: Also, when I mouse-over an image of a company logo or something similar, and realise from the cursor that it is a link, I’d generally assume that the link is to the company’s site, rather than more information on your site. I know I can check the destination of the link in the status bar, but I doubt if it would occur to me to do that. How about adding title attributes to the images? “Find out about our work for Macy’s” or something?

Just my opinion. I would never claim to be a typical visitor. :slight_smile:

Just a note about my visitors too, which I think is relevant to how the nav is designed, they tend to be using safari, firefox or chrome. Less than 10% of my visitors use IE. I take that to mean that they are a little more tech savvy than most.

You’ve kinda left out keyboarders too. They’ll never see your labels.

Personally (meaning, this is my personal opinion) I’d have the labels “out” by default, and when Javascript is loaded in the user’s browser they get hidden, and then only popup on :hover or :focus (you can give normally-unfocusable things focus with Javascript if, in the HTML, you give the elements a tabindex of 0. Won’t interrupt the page tabbing index, but will let you set focus() events on it).

That still wouldn’t solve the majority of sighted keyboarders, who like most people will have Javascript on, but I still like that the information is really always there.

But again, I dunno, depends on how important you think it is that people see the labels. You could user-test this by having some moms or whoever view the site. See if most people swirl their mouse around or not.

I’ve got something on my site that only appears on mouseover, but it’s 100% not-important, just an easter eggish thing, so doesn’t matter if most people miss it.

If you want more feedback about the site you could also post this over in the Website Reviews section. It does require you review three sites yourself first but you’ll get more feedback where people really try to critique the site (if you want that).

Thanks, I think that’s a great solution, seems like it should be pretty simple to detect JS. Also, could be a good thing for touch screens.

seems like it should be pretty simple to detect JS.

Well, that’s the great thing: you don’t have to actually “detect” anything!

If the user has JS, then your script will run and do its thing! And if they don’t, it won’t, so they just get whatever you already had in your HTML/CSS anyway.

For touch screens, if you really want to do something special for them (since they don’t tend to :hover at all) is look at Touch events.
What seems to be really popular at the moment is Sencha Touch which uses Ext3 library I believe.