As a designer, I struggle sometimes with the fine line between aesthetics and usability. Every time I refresh my portfolio website, I search for that sweet spot: something that looks “wow” but is easy to use and navigate. Unfortunately, some of the “cooler” designs I’ve come up with, while interesting to look at, have confused folks familiar with “typical” websites.
In my site’s previous incarnation, jQuery animation became the battleground between aesthetics and usability. How much animation is good, and represents my creativity? At one point does a volume of objects in motion confuse the user, and over-shadow the site’s ability to communicate?
After viewing my previous design soon after launch, a friend opined, “it’s fun and all, but every time I click or move the mouse, something moves, and then the page fades, and I’m never sure if I clicked the right thing, or if broke something. I’m afraid to touch it.”
That’s when I realized I’d failed. The site was a jQuery playground: animation for the sake of animation. Coolness had won over usability.
When I began to redesign (again — I hate everything I do within months of launch anyway), I decided to focus the design toward usability, instead of “wow”, with a simple but refined aesthetic The goal of a designer’s portfolio site is to show off the work. Yes, the portfolio site itself becomes another work sample, but really its primary goal is to communicate the body of work, first and foremost.
My internal usability vs coolness battle this time became all about the scrollbars, which I wanted to match the site.
The problem is that Firefox STILL doesn’t support CSS-only customized scrollbars.
I considered rolling my own in JavaScript or jQuery, or downloading someone else’s scripted solution. But after making seeing the results of some very superficial color-only CSS tweaks I made for IE, Chrome and Safari, I wondered: is it really worth utilizing a custom scrollbar script JUST for Firefox users?
The style of the site’s design revolves around simple blocks of solid colors, dictating a similar scrollbar style. In customizing IE, Chrome and Safari, I didn’t see a need to do anything too unique that might distract from the user’s attention on the content. So I decided to lightly style them with CSS color values only, leaving their square-edged default size and shapes intact.
IE, Chrome and Safari look great. And from a usability perspective, the three browser’s toolbars look very similar to their default counterparts, which should be easy on visitors.
As far as Firefox: its users are familiar with the look of its scrollbars, and they function just fine. That’s a plus, when thinking about usability. The issue is more the color.
Adding scripts just to change their default appearance would also add to my site’s script overhead, which is already high as it utilizes jQuery. Additionally, scripts that offer browser-specific work-arounds are prone to break when new browser versions are released. And if (when) I redesign the site again, I’ll have to strip it out later.
My site’s colors include a few shades of gray, so the default Firefox scrollbars don’t appear strikingly out-of-place with the rest of the design. Which is a good thing.
The question is, can I live with them?