CSS scrollbars; graphics rendering and usability issues

Get Started
1

Greetings women and men of Sitepointland.

I have a few questions and would be grateful for any feedback.

Question 1
Is it possible to position a horizontal OS scrollbar at anything other than its default position?

Let me explain, when scrollbars pop up, the actual scroller-thingy seems always to appear either at the top (ie, in the case of vertical overflows) or at the left (ie, in the case of horizontal overflows).

Can this default be changed?

My question pertains to this, http://www.andrew-brundle.com/buy-domain/. It’s a site I’m working on for a UK client. With JS enabled, the alphabet is kind of centralized. It’s easy to navigate. But with JS switched off, a scrollbar kicks in and the alphabet starts with the usual “a b c”. Sure, I can center the alphabet in non-JS mode, but can I center the scrollbar?

Question 2
The letters in the above referenced site have been made using a sprite. The sprite is a GIF. If I save this sprite as a PNG, I can make big savings. Problem is, the PNG looks wrong (horribly wrong) in Safari. I’ve Googled this but can’t find a decent answer. What should I do?

Question 3
I’m left-handed. And I guess most of you are, too. It’s us funky dudes who are supposedly creative; and it’s our right-handed brethren who are supposedly dull and boring.

However, despite being left-handed, I use my right hand to control the mouse and, when confronted with a scroller, will always scroll to the right rather than to the left.

Does anyone have any data (whether empirical or gleaned from personal experience) to suggest that users are more likely to scroll in one direction than the other?

2

Thanks for the Shea link… luckily for me, I don’t do anything that level of fancy with my graphics… they either have Plain Old Transparency (1bit) or alpha because I have a transparent background and smooth edges. None of that “multiple levels of transparency” Dave was talking about.

It’s simple: save the PSD graphic as a JPG or GIF; open it with Fireworks; and then export it as a PNG. On the basis of my initial testing, Fireworks seems to strip out any PSD-embedded color profiles, and things now display properly on my PC version of Safari. Obviously, though, I still need to test this in an authentic MAC environment.

Basically what I do too, except pngcrush I just open a terminal, hit the up arrow until I get to the last time I used pngcrush, and change the names. Pretty much just use it to remove profiles and header chunks. Cures FF completely. Safari on a non-Apple monitor, I still kinda see the edges of the PNG.

If I focus purely on usability as per that Jakob Nielsen guy, I will succeed only in pissing off my current client AND ensuring that I never get another client.

So long as you’re aware of his data. He’s a usability researcher. He does testing on humans. if the human rats show they’re mostly too dumb to figure out a scrollbar, then it’s something you have to keep in mind when you’re making the scrollbar. Your client may want those human rats’ money. Or not. Depends on the audience as well.

Likely you’ve discovered that the more your target group includes managers and CEOs, the more shiny you have to make stuff… and the more child-friendly it has to be as well. People like intuitive stuff because it makes them feel smart. Which for some reason seems to make them buy stuff, or something. Weird.

As far as I’m concerned, so long as you’re aware of any data about the topic you’re building, and of course do some testing of your own, you’re the designer and are free to make your design decisions. Studies may influence them… but they don’t have to set all your design rules.

3

Greetings from my tropical villa here in the suburbs of northern Bangkok.

To Stephen Felgall
Yep, the easiest thing in the world would be to replace my scrolling letters with a row of links.

But … actually it wouldn’t be that easy.

If each link/button had a width of 20px and there was a 20px margin between each button, we would need an unacceptably wide horizontal navigation bar. Sure, we could break things down into two-row tables or three-row tables, but at that point the design would begin to suffer.

At this moment in time, the client is happy with the layout.

There’s also another issue here, too. When I make websites, I need to think not only about the present client, but also about future clients. If I focus purely on usability as per that Jakob Nielsen guy, I will succeed only in pissing off my current client AND ensuring that I never get another client.

Sometimes it’s prudent to let style triumph over content.

It’s called commercial awareness. It’s called … money.

To Stomme Poes
Excellent post. Thanks for that.

I think I may have a solution re: Safari’s inability to properly render PSD-created PNGs.

It’s simple: save the PSD graphic as a JPG or GIF; open it with Fireworks; and then export it as a PNG. On the basis of my initial testing, Fireworks seems to strip out any PSD-embedded color profiles, and things now display properly on my PC version of Safari. Obviously, though, I still need to test this in an authentic MAC environment.

If it helps, here again is the link to current work in progress, www.andrew-brundle.com/buy-domain

If this solution seems odd or dumb or strange or bizarre … it’s not. And it’s actually not my idea at all: it’s based on a recent blog post by David Shea (ie, Mr Zen Garden) over at www.mezzoblue.com

Thanks for the praise re: that financial site. Much appreciated!

4

I type [quote] because I’m too lazy to figure out how the goofy forum buttons work.

I dunno, maybe I’m thinking too logically but if I see arrows on each side pointing in different directions and have the additional feedback of a scrollthingie sitting in the middle, I’m pretty sure I’d figure out how to either hit one of the arrows or grab the scroller. Using the alphabet increases the chances that someone would figure out the beginning was A and the end was Z.

I’m not sure if it helps starting in the middle though, unless the majority of names started with letters there (that would be a great help, instead of having to start at A every page refresh). I’d do user testing to be sure, but I wouldn’t stay awake at nights thinking users would never figure out how to find stuff that starts with A.
Though I would really miss the ability to just type my letter and be brought there… I do that in long (usually country-name) selects in forms. I didn’t turn on JS to see, but if you could have that keyboard function in there, that would be very cool.

Can you open this? If not, I can send you the 8-bit and 24-bit PNGs.

I could open it in the GIMP, but the problem is indeed a colour profile one, and so the problem appears when viewed as a PNG in a browser (and if I save-as-PNG I won’t be saving with whatever settings you save-as). So however you’re making your png’s is where I’m thinking the issue is.
Gimp specifically adds an empty RGB-labeled header chunk, which is Gimp’s way of saying “no colour profile”. However, simply the existence of such a header chunk makes Firefox think there really is an RGB colour profile. I have to strip it out just for Firefox*:


pngcrush -rem sRGB origfilename.png newfilename.png

*I noticed Safari has the same issues but in different circumstances. People I asked who used a Mac saw no problems, and Safari-for-Windows had no problems. Safari viewed on a Mac with a non-Apple monitor, though, looked like a toddler on LSD coloured the pages.

If you strip ALL profiles, assuming the background colours were set to the same #colour as the CSS backgrounds, does this fix it?

You might be deliberately using colour profiles, but since all monitors are different etc. I don’t see how they can help. http://hsivonen.iki.fi/png-gamma/

Now, those Financial Times graphics that “popup” on mouseover are clean in Safari; previously they were muddy, horrible, and had a distinctive green tint.

No green tint here, so you seem to have fixed it. I did leave the colour “correction” on in my Firefox (Mozilla ships it out as “on” be default) simply to catch myself whenever I forget, or to see the problem on other sites.
When I view sites like this one the whole effect of the Post-It note is gone, seeing’s how Firefox makes the background a bright neon green instead of the header green. Because it’s a PNG. Strip it of profiles or anything mentioning profiles and it would match like it does everywhere else. (Do you see the green mismatch in your Safari where you’re seeing issues with your site?)

PS I love the design of the financial site main page. Looks… architectural and East-Coast and all that. Very cool.

5

So why not add a row of links for the letters of the alphabet that will jump the page to the appropriate letter for them. That way if they want ‘z’ then a single mouse click gets them there without scrolling.

6

Okay, here we go, www.andrew-brundle.com/master.psd. This the PSD master for work in progress. It’s a 1.4 mb download. As you will see, I’ve used a photo filter to re-color the gradient in the scroll panel.

Can you open this? If not, I can send you the 8-bit and 24-bit PNGs.

I had this problem before, but last time the issue was with ICC profiles when images were saved as JPGs. The site in question was this, http://www.georgefisheradvisors.com/. Now, those Financial Times graphics that “popup” on mouseover are clean in Safari; previously they were muddy, horrible, and had a distinctive green tint.

What do you think? Why am I now having a problem with straightforward, 8-bit PNGs?

7

Thanks for that. There are a couple of replies here: I don’t know how to quote from each, so I’ll answer things one by one.

If you ever see a horizontal OS scrollbar (ie, overflow: auto), the draggable scrollbar-thingy is invariably positioned to the left. Users know that attempting to drag the scollbar-thingy to the left is impossible; they will always attempt to pull it to to the right.

So when users see a Javascript-enabled scroller (ie, a scroller with the predictable left and right arrows), might they not think that scrolling to the left is a no-go?

If I positioned the alphabet so that it started at “a,b,c,” (assuming JS is enabled), my guess is that most users would scroll to the right in order to find letters such as “r” or “s” or “t”.

However, if I position the alphabet so that by default it shows the letters “k,l,m,n,o”, my guess is that users will know intuitively that both left scrolling and right scrolling are possible.

Ultimately, it’s all about usability. If I position the alphabet to start at letter “a”, users need to click a good few times to get to the letter “z”. If I center the alphabet so that it starts at “k,l,m,n,o”, hopefully things become a bit more usable.

But, as I say … “hopefully”.

8

I wouldn’t do it for this case, but using url fragments, you could have users end up in the middle of the page rather than the beginning. As StevieD mentioned, this might be such a great thing usability-wise. Some good usability testing would tell you if users found it most sensible as you’re doing it now with JS or not.
Hm, for a scroller, best I can think of is putting some class/id on the k and pulling it to a negative left margin… or start the whole inner box out with a negative left margin. I’d have to actually try it to even know if something like that were feasible. You do have the advantage of having a set-width container and a set number of letters. I want to implement something like you’ve got with Javascript but I have a flexible container with unknown number of items inside : (

Re the png in Safari: is it that the colours suddenly look like total crap and don’t match the CSS background colours? If so, I know what the problem is, and I’ll tell you that Firefox is doing the same, but like Safari this depends on the monitor and the OS’ colour settings. I’ve been fighting this for a while and am quite pissed at Mozilla.
If you post your PNG I’ll know right away, because my Mozilla still does this and your blue will look kinda purple for me.

Does anyone have any data (whether empirical or gleaned from personal experience) to suggest that users are more likely to scroll in one direction than the other?

Besides possibly right-to-left users, who may scroll from right to left automatically, there are likely user studies done by Jakob Nielsen at useit.com. His studies cost money but he also has alertboxes which are free. In general, most of his studies conclude that people tend to expect most sites to act the same, so whatever most sites do, most people expect.

9

If you were to start with the scrollbar anywhere other than the top or the left then there’s a good chance that some people will miss the content above or to the left of the default start position.

As a general rule, people scroll down, and then maybe back up again. They don’t start by scrolling up. In some cases, they might scroll to the right, but equally many people will never do this. That’s partly because the default behaviour of a scroll-wheel mouse is up and down.

In the website you’ve given, why do you want to start the alphabet in the middle? I would have thought that starting it at ‘A’ would be more intuitive for people … but maybe that’s just me being a dull and boring right-hander :slight_smile: