A writeup appeared today on Drupal’s website reporting that the Indianapolis Museum or Art’s new website was built using mostly unmodified Drupal 5, development by “Palantir” of Evanston, IL and “Studio Blue” of Chicago, IL.
The website is chock-full of “Web 2.0″ goodness – if you can find your way around it.
Web 2.0
We collaborated with design partner Studio Blue and the IMA’s marketing and technical staff to develop a highly functional and visually engaging site that incorporates many of the hottest “Web 2.0” technologies like folksonomic tagging, blogs, podcasts, YouTube integration, and AJAX-style visual effects. The use of Drupal 5 was instrumental to the success of this highly ambitious project.
They’ve got Webisodes, folksonomic tagging, blogs, podcasts, mash-ups. It’s like two web 2.0 buzzword-laden semi trucks collided on the way to Indianapolis. Apparently the valid XHTML truck was nowhere to be seen, however:
Layout
First and foremost, I’m a designer- paid to make sites usable, paid to make information clear and presentable, paid to make things better and clearer for the audience. Before I look any further under the hood, let me just say as a usability proponent, this site is a tough one to grasp. I felt like a mentally-challenged monkey on crack with an attention-span of 0.039 seconds trying to make sense of the home page. The barrage of squares is an assault on my senses. Then I started rolling over stuff – things start changing… things away from my mouse. My eye bounces around in a random, confused headache-inducing manner, due to the lack of visual hierarchy.
Navigation
31 requests and 347 K gets you three, no, make that four or five areas of navigation. The header (in two parts,) broken by a large roman head , A “blue boxes” navigation in the upper-left, and a prominent “red boxes section” to the right and slightly lower; and a footer. The navigation is all rectangles and squares – but look out, all rectangles and squares are not navigation. No, there are many more rectangles and squares that do things, flash, blink, hover, animate, twitch. They look like close-up shots of TV static- and static is something you’d not expect to see on the website of an art museum.
Image Compression
Then we have this green calendar. the first thing I notice is that it’s very poorly compressed, and looks terrible. I run super-high 2560×1600 resolution so things really tighten up on my monitor, but it’s still pretty glaring. The compression issue lives in other places too: in the little “static” boxes as well… all over the page. This poor compression would be even more obvious on a lower resolution. Why the poor compression? According to the writeup at Drupal, they had so much javascript (Thanks, Web 2.0) that they had to install a backend javascript compressor. I think that all of this javascript, combined with an overall bloated design, left them with little choice but to compress the heck out of their static images. Funny how they never looked at this from the top down- there are many ways to skin a cats and I guarantee there’s a way that didn’t involve javascript bloat.
But wait- why are those solid color blocks jpg files? Didn’t the intern who generated the design realize that the basic stuff web developers were learning since 1995 is true – that indexed image formats are way better for non-photo images? Why not use 8-bit PNG files? They could have cut those image sizes in half- or more, and it would have looked perfect in comparison. After seeing that the largest image on the page is one of those “TV-static” animated gifs at 40K, I have to throw my hands up and end my compression rant. The page is just simply not built well at all, in terms of compression.
Legibility
You may have noticed from my screenshots that the text seems “clogged,” primarily in the calendar and headers. At first I thought that I may have had my browser text-size turned down a notch. This was not the problem, however. I visited a few of the interior ages and was glad to see that this problem did not transfer to the body copy. Digging deeper, I see that this is because they spec Helvetica as the first choice for these areas, bolded, and shrunk to 85%. Having used Helvetica online myself, Helvetica is not a web-friendly font and shouldn’t be shrunk too much. The anti-aliasing of this font at small/bold is just terrible. It looked bad in FF2 and IE7.
IMA, why did you have to go out of town for this sub-standard work? Indianapolis is full of her own talented designers and web developers.
Technorati Tags: art_museum, bad_web_design, ima, Indianapolis, museum, usability, web_design
November 2nd, 2007 at 9:51 am
Nice review, and I couldn’t agree more. All that flashing and page bouncing makes my head hurt. No wonder the average stay on the site is only a couple minutes.
Thing is, it looks like most of this layout (which has promise, except for the pixelated image things) probably could have been done with straight html. Heck, even the calendar could be hex code instead of a graphic.
Regardless, they went WAY overboard on the 2.0/geek stuff. While I appreciate the “highly ambitious project” attempt, the whole thing to me seems to me to come off as a little amateurish, not sophisticated, as I consider the IMA brand to be.
November 2nd, 2007 at 10:04 am
Hey Chris-
I was thinking the same thing… it “smacks of effort” as the saying goes. It’s a shame because we know it’s possible to get great-looking site with clear information presentation without the WHOLE bucket of web 2.0 whiz-bang.
November 2nd, 2007 at 2:36 pm
Hi –
I’m one of the developers who worked on this Web site. While I can’t comment on your criticisms of the site’s art direction or its use of “Web 2.0″ features, I did want to make one clarifation regarding the use of a JPEG image for the home page calendar background.
As I mentioned in the comment thread for the article on drupal.org, the heavily compressed “pixelated” appearance of this image was an intentional part of the design, not a decision dictated by the site’s use of Javascript or any other technical consideration.
Regarding the legibility of fonts on the site, it sounds like you’re running Windows with Helvetica installed, which is a fairly uncommon font/OS combination. Do you have ClearType enabled on your system? If not, that could account for some of the anti-aliasing problems you’re experiencing.
November 2nd, 2007 at 4:24 pm
George,
Thanks for weighing in. As a designer I understand the overall pixellated, “squares” look that was achieved, but to take it so far as to crap up the images with super-low compression just looks like an amateur’s mistake. I don’t fault you for that :)
November 5th, 2007 at 1:47 pm
An assault on the senses is right. I’ve noticed that art-related sites are often among the worst offenders. I work in a building surrounded by talented painters, sculptors, photographers etc. who give out business cards immediately recognizable as MS Word templates. Yikes. I can’t comment on IMA’s situation, not having worked with them, but there’s definitely a “something-for-nothing” mentality prevalent in the art community.
November 7th, 2007 at 11:34 am
I’m going to guess that what George is talking about regarding the pixelated design element is the big boxy graphics under the main navigation and the roll-over blue sidebar things, and not the calendar of events. Because the other way around would be, well, just too dumb to comprehend.
And, if you take a look at the site now, it looks like Blue Studio has actually softened up the pixlation animations since the original post. (OMG – has this blog actually effected change?)
I still don’t like the anchor link effect when you make a selection. There’s simply no navigational/interaction or design reason to make that kind of visual jump. I’d much rather have to scroll down to get info rather than to have to scroll up to use the navigation. After all, I use the navigation on every page, but may only scan the content and want to scroll down once in a while. But, call me old fashion…
November 7th, 2007 at 12:14 pm
Well, replacing animated gifs with flash sure helps load size, but nothing can save that navigation style :)
Where is a semantically correct menu list when you need it.
The three static images are now three instances of the same 4K flash movie. On rollover, these load in three different images – which total 50K combined. So, no real overall filesize savings.