This IGN Entertainment brochure site might just be a virtuoso piece.  Anchor links that autoscroll the page to their destinations, a navbar that becomes pinned to the top of the browser window as the user scrolls down, hard-edge geometric design, clear content segmentation…  Just lovely.

IGN Entertainment

Rob Keller writes about the development of his font face called Vesper.

The Whitney Museum of American Art has needed a new website for years.  Information was increasingly hard to find, navigation was inconsistent, and the site’s design was of variable quality.  Some sections were outstanding but many more areas were confusing and poorly laid out.  Overall, the site struggled to clearly present the museum’s wide range of programs.  It also wasn’t suited to showcasing multimedia and integrating with social media services like Facebook, YouTube, and Twitter which are increasingly driving museum visits.

Fixing all this required a redesign and after a long incubation the Whitney has relaunched their new site.

They enter a highly innovative field.  The past three years have seen growing recognition among museum management that mission is enhanced by a robust online program.  The Indianapolis Museum of Art, Brooklyn Museum, Walker, MoMA, and SFMOMA have upgraded their sites to enterprise-level content management systems delivering gigabytes of audio, video, and text to millions of viewers annually.  As museums have increased their digital output and come to recognize that “audience” includes a vast online public, directors are coming to realize that an intuitive, attractive website is a worthwhile, mission-critical investment.

2008 saw many museums of the Whitney’s caliber relaunch their websites including the Hammer Museum, Guggenheim, MoMA, SFMOMA, and Museum of Art and Design.  These organizations produced polished, professional sites to serve as content delivery platforms for a swiftly expanding online audience hungry for museum content.  It’s against this backdrop that the museum community has been eagerly awaiting the Whitney’s entry into the field.

It’s a shock, then, that the new Whitney website not only fails to improve upon its old website but actually ends up being worse.  Visual confusion, counterintuitive navigation, and illogical organization put it on par with its predecessor but setting it a step backwards is an absence of a compelling design that knits the site together into a coherent whole.  The lack of color, proper division of page elements, and clear information hierarchy leaves the viewer with pages where content floats without clear order or priority.  Perhaps more dispiriting is how generic the site feels.  It’s lifeless.  More a wireframe suitable for preliminary development than a digital platform to project Whitney mission and programs.

If this was a lesser organization such a website would be a shame.  But for the Whitney it’s a liability.  In a highly competitive culture industry, the Whitney needs to continue to assert itself as the dynamic, relevant, and high-quality organization it is.  When its website declares the opposite – that it’s pedestrian, unsophisticated, and banal – the brand takes a beating and its reputation is called into question.

Breaking It Down

12 RSS feeds are available for fine-grained subscription to specific site content and 9 iCal feeds allow for users to keep tabs on the museum’s date-based programs.  A “Your Collection” feature allows users to select and save images, video, and web pages from the site.  Internet art projects will be integrated into the site which – while at first blush appearing little more than gimmickry – will likely be worthwhile given the Whitney’s strong track record of supporting digital art through its ARTPORT.

The site features a completely new design and re-ordered information architecture.  And this is where the site’s problems begin to appear.  7 main categories on the old site have ballooned to 17 main categories on the new site.  Redesigns usually reduce and simplify than expand and complicate.  The new site obfuscates a clear visual flow of hierarchical information.  Little is grounded by bordering, shading, or sectioning (the common methods in web design).  Instead, content blocks float in white space without adhering to a consistent grid.  And within that white space, text leading is used to differentiate sections but that type is of inconsistent style and positioning across the site.

I counted over 12 different link styles:  blue underline, bold black, bold grey, bold blue, bordered black, green background, light blue background, yellow background, grey background, white text on black background, white text on red background, bold black with grey underline, and orange.  It’s such an overwhelming array, it suggests that anything could be a link – a paralyzing position to put a user in.

Since the site is designed exclusively with text and that text is styled in no consistent way, the site’s color palette is hard to define but if pressed I’d say it’s black, white, and forest green.  When I think of the Whitney I think of slate grey – the color of the building.  A proper design should build off of this color and incorporate complementary hues that draw connections between the website and the museum location.

Navigation Problems

The main vertical navigation bar breaks basic user interface design rules over and over again.  First, its 17 top-level options need to be reduced.  Even the old Whitney nav bar was better than the new one.

The priority of information within the bar is also questionable.  Is “Support” and “Membership” – the first two links – more important to a visitor than “Visitor Information” or “Exhibitions?”  Certainly not.  Is “Support” and “Membership” of greater importance to the museum than its exhibitions and events?  I hope not.  The “About” section features fascinating information about the organization’s past and promising future but isn’t even a link on the nav bar.  It’s sunk to the bottom of every page, relegated to what is effectively a website’s graveyard.  Is the museum’s history that irrelevant?  I doubt it, but it’s sending a disconcerting message.  Social media platforms like Facebook and Twitter that increasingly drive word-of-mouth traffic are hidden in the “Feeds and Email Notifications” section.  They’re doing great things on these sites and should elevate them to the top-level or at least group them in a logical category.

The navigation bar violates the most fundamental rule of user interface design: persistence.  Instead of remaining in the same place when you click a top-level link, that link is pulled out and elevated to the top of the list.

Before clicking:

After clicking “Exhibitions”:

When you click into certain sections – “Education,” for example – links that were once in the nav bar disappear (“For Kids / For Teens”).

Sections two-levels deep make the higher-level parents disappear.

Inconsistency like this is considered unsound by professional web designers because it breaks the convention of a persistent navigation bar where high-level content sections stay put no matter what.  A nav bar with sections that move or even disappear makes a site feel unpredictable, leading to visitor exasperation.

Other oddities include subsection links that because of their green color appear visually to be of higher priority than their desaturated parent and horizontal navigation links within a vertical link structure.  “Film / Performance” are actually two separate sections masquerading as one.  When you click “Film” it’s pulled to the top leaving “Performance” behind even though it’s on the same line.

Visual Design

Visually, the site’s elements are adrift as if they’ve been casually dropped onto the page.  The lack of a uniform grid and an absence of grounding makes viewing page content difficult because everything appears of nearly equal importance.

Let’s look at the “Exhibitions” page:

The top “Your Collection” strip should be sectioned off from the rest of the site content because it’s part of the website and does not specifically refer to the page.  The Whitney logo should be flush with the vertical nav bar’s left margin.  The nav bar should be drawn up to match the horizontal alignment of the page title.  Images should be equally sized and in horizontal alignment with one another.  The border around “more info” should be removed to indicate its lesser importance in the order of title and date.

Problems like these abound on nearly every page but a redesigned template could pretty easily fix them.

A harder fix is the “Education” section where a collection of ambiguous phrases in orange lettering appear on the top of that section’s landing page.

It’s unclear what one is supposed to do here or how one should choose where to click.  “Curiosity” may be an option they provide but “Confusion” is really what I’m thinking.  I don’t know where I’m going to go or what I’m going to get when I click one of these links (I assume they are links – but perhaps I shouldn’t since they aren’t underlined – another convention disregarded).  When I do finally decide that I’m “playful” I am presented with a page but no indication through a bread crumb or a nav bar entry where I am.  The navigation system here completely breaks down and a user is adrift in a sea of links without reference or bearing.

“Your Collection” vs. “The Collection”

The “Your Collection” feature allows users to collect pages, images, and video from across the site and store it in a personal user account for future access.  This would have been innovative had MoMA not already introduced an identical feature more elegantly implemented on its own site months ago.  I’m skeptical of the utility of such a tool.  I think a more effective approach is to design a site that enables visitors to easily export site content to whatever content aggregation service they’ve adopted (Delicious, Evernote, Facebook, Tumblr, bookmarking, etc.).  I suppose these “collections” features are supposed to increase site stickiness but I think they probably just go unused.

“Your Collection” is not to be confused with “The Collection” which is a growing online database of the museum’s permanent holdings and is the new website’s highlight.  Images are impressively sized, and navigation – though rudimentary – is at least functional.  This section holds great promise.

In Conclusion

I’m not sure what went wrong here.  How could a museum as first-rate as the Whitney have produced a site so inferior?  Linked by Air – the development company the museum hired – should shoulder much of the responsibility.  Apparently the backend is robust and well designed for the staff but this must not come at an expense to the end user.  The failure to successfully integrate a strong back end and an elegant front end throws the firm’s credibility into serious doubt.  I would also venture to guess that the museum had no dedicated project manager familiar with the web to help guide the museum through the thicket of options.  There may also not have been the will to redirect a project going down the wrong path.

I have great confidence in the Whitney.  The staff is enthusiastic and recent hires indicate an institutional understanding of the importance of the web.  Although this particular site is stillborn, I’m certain that with a new developer and a strong project manager the Whitney will retool their site into something they – and the museum community – can be proud of.

–

Update 11/13/09: In the interest of full disclosure, I’m the Digital Projects Manager at the New Museum of Contemporary Art.

I’m very pleased to announce the launch of the new website I designed for Friends of the High Line.

For those living outside of New York, the High Line is a former elevated train track soon to be an elevated park on the west side of Manhattan.  Friends of the High Line contacted me to redesign their site in February 2008 and thanks to a great partnership and fine clients as collaborators I made a site for them that was more graphically rich, intuitive, and flexible.  Tip o’ the cap to Greenhood and Company who developed my designs into the functioning site you see today.

I’m pleased to announce the launch of the “Younger Than Jesus” blog which I designed.

The New Museum’s first triennial exhibition, The Generational: Younger Than Jesus, presents work by fifty artists under the age of thirty-three. On view April 8 – July 5, 2009. 

This blog features related articles, multimedia, and interviews about this Millennial generation.

Enjoy.

Hot on the heels of the SFMOMA website redesign comes the Hammer Museum’s new site.

It’s a knockout that weaves together many threads of programming – events, exhibitions, and the crucial multimedia that bind users to a site – into a cohesive experience that satisfys the needs of many kinds of visitors.  Even better, they’ve embraced an openness to multimedia distribution and sharing so unusual among organizations of this type.  A user can subscribe to the museum’s offerings through podcasts or RSS, embed video or audio into their own website, or post content to content sharing sites like Facebook.  These are fundamentals in 2008 which a lot of museum sites still aren’t embracing.

The design team also came up with a minimal and elegant design that frames the museum’s programming transparently, throwing emphasis onto the many visuals the museum naturally generates through its events and exhibitions.

The Hammer also has crack crew making sure their site runs smoothly.  Audio and video and images are everywhere and that’s a testament to all the little monkeys behind the scenes who are producing, cropping, editing, formatting, and posting this material.

Tip o’ the hat, folks.

I confess that when I first went to their site I was nervous it was going to be an all-Flash hell hole on the order of the epic disaster that is The Kitchen’s website: a nightmare of an interface, a buggy, error-filled disaster that probably halves attendance figures because content is so freakishly hard to find and so garishly designed.  The Kitchen’s website is made even more painful because of how it stands in such stark contrast to their outstanding programming.  Although I have many friends that work at that august institution, I have no idea what happened behind the scenes that led to their digital debacle.  I’ll assume it has something to do with an overworked staff entrusting the project to developers who had absolutely no business making websites.  It’s a total heap and needs to be redesigned completely and immediately for institutional solvency.

Anyway.  Back to The Hammer.

It turns out that Flash is limited to the homepage and discreetly around the site in audio and video modules and an effective (if random) interactive Membership matrix.

Featured programs are listed on the homepage (although I wish it would say “Featured” since I thought that all I saw on the homepage was all that was at the museum (wrong)).  They’ve nicely integrated video into the homepage (but didn’t allow it to go fullscreen).  The full bleed background images switch as the user selects different featured programs – cute.  Upcoming events are conveniently listed on the bottom.  It works.  It’s full of stuff but is coherent and offers a lot of info in a compressed way.

The real killer feature – and it’s simple – is the section that drops down from the main horizontal navigation bar when you roll over major section headers.  Mouse over “Exhibitions” and before you click into the unknown, a helpful menu drops down to show you what to expect: exhibitions on view, etc.  For each section the dropdown area shows you the most important stuff.  It’s so good.  They’ve really done a nice job of not forcing people to click, instead enabling users to find things simply by hovering.

I like how they list their current and upcoming exhibitions together on the Exhibtions landing page but it’s a bit obnoxious that in order to see more current exhibitions one has to click a tiny right arrow for the other thumbnails to slide in.  Hammer: just have it drop to the next level.  This type of hard-to-find-button-to-push-to-see-more-stuff won’t pass the mom test.  Also I’m not sure if segregating the past exhibitions into its own area is necessary but it works well nonetheless.

The Programs section does what SFMOMA’s didn’t do: tag lots and lots of images to every single event.  I know from firsthand experience that it’s annoying and it’s grunt work but it makes the section look visually delectable and encourages visitors to click on things they otherwise wouldn’t.

The Collections sections provides an overview but doesn’t even attempt to put anything online.  Bummer, but they’ll have time to fundraise for that functionality in the future.  In that case they can look to SFMOMA who did a great job.  And the Met, of course, who does an even greater job (and from what I’ve heard will be launching some exciting new online collections soon).

The best part of the site is the “Watch and Listen” section which does what every museum should be doing: have a whole section fully and totally devoted to the gobs of audio and video that they are producing.  The Hammer nails this section.  First off, you can watch things right there on the website but you can also embed it into your site or subscribe to the podcast feed.  SO BASIC BUT SO GOOD.  Why can’t most every other place get this so right?  Filtering works well but Search doesn’t.  Just to see if search functionality actually functioned, I searched for words that I saw in the titles: “Lopate” and “Arbus” in my case.  It said nothing could be found.  Uh.  Tsk tsk.  Fix this.  I also wish there was a browsable list of all the multimedia participants so I could just skim and see if my favorite artist was there.

I’m not sure why the section is called “News and Blogs.”  How many blogs do they have?  As far as I can tell it’s just one.  And just call it “News.”  I don’t think you have to drop the “B” word.

The user interface is really elegant and smartly prepared.  Content flows intuitively and key information is presented immediately with secondary or extra information accessible through a mouse click.  I would boost the overall site font size.  Small looks sexy but it’s hard to read for a lot of (older) visitors.

All in all – this site is a real triumph and the team behind it should be complimented on an outstanding offering.

The San Francisco Museum of Modern art (SFMOMA) has redesigned their website, sfmoma.org, after more than 8 years.  The new site takes few risks, adhering to conservative and time-tested user interface and design standards.  As a result, it’s a success – head and shoulders above most of the museum websites in its class.

Of course, it’s not perfect but first with the good and then with the bad:

Simple, clear, consistent user interface
The navigation interface is in the time-tested, user-approved tradition of horizontal navigation bars.  Sure, it’s conventional but it works.  Things stay put as you go from section to section and as a result, the site coheres.  Some museums try to go experimental and end up user interface nightmares.  Take, for example, the Indianapolis Museum of Art.  Look at the IMA’s frightfully confusing homepage.  There are literally three separate content sections with their own horizontal tabbed-interface bars instead of one unifying interface.  How do I know where to click?  Inundated in a deluge of information, I’d rather leave than “explore” which is what most of these bad websites expect visitors to do.  That assumption is wrong.  90% of visitors want to get in and get out.  10% are ready for some exploration.  The Metropolitan Museum is a user interface disaster of another order.  Many times its navigation bar COMPLETELY DISAPPEARS after a mouse click leaving a visitor with no navigation reference.  That’s one site in need of a serious overhaul.  There are others that need redesigns too.

SFMOMA has one of the most logical, organized, and consistent navigation structures among museum sites making it stand tall amongst its peers.  Thoughtful and smart copy, too.

Good use of Flash
There’s been some griping about the Flash introduction SFMOMA uses on their homepage: too fast! too much stimulation!  As the guy that runs the New Museum website I can tell you that since the average site visitor will give you about 1 minute of their precious time, you better offer as many visuals as possible in the hopes of stimulating a longer visit.  SFMOMA understands this imperative and their Flash intro is smart.  It will show visitors with extraordinarily short attention spans (most) what’s on view in an engaging way and encourage them to learn about those exhibitions.  It’s also nicely designed; if you roll over one of the items it pauses so you can carefully look at the picture or read the text.  That’s considerate.  Compare this to MoMA’s lumbering Flash show which is too boring, too slow, and keeps rolling on irrespective of user attempts to pause it.  Also, SFMOMA is using sIFR to render non-websafe fonts.  It’s done really well and it’s nice to see such a good implementation.

Good design
This is completely subjective but I like the boxy, flat design of the site.  No faddish gradients, rounded corners, or pinstripes.  It’s a simple and elegant container to house the text and images that make a museum site so strong.

Information rich
SFMOMA has a massive amount of content – events, exhibitions, collections, education initiatives – on and on.  Their calendar tool is very powerful and well organized: clearly showing information and allowing for fine-grained filtering.  The search tool is surprisingly good.  The collection highlights encourage exploration without resorting to visual tricks.

But with the good comes the bad.

No RSS or iCal
I’m very unlikely to visit the site repeatedly but if updates were to drift into my RSS feed or into my calendar – then I’m far more likely to stay connected to the museum.  This omission is completely unforgivable in a modern website.
SFMOMA: add RSS and iCal right now.

Hidden email signup form
A site, heck, a museum, thrives on email outreach.  Why bury the email signup form in the Exhibitions and Events section?  It’s illogical.  More emails means more contact which means more members and more visits.
SFMOMA: put your email subscription form on every single page.

Confusing Events and Exhibitions section
This is going to be SFMOMA’s most frequently visited section and its contents are surprisingly unclear.  The Exhibitions column is broken into two sections – what appear to be Featured Exhibitions and Other Current Exhibitions.  The necessity of a horizontal division is questionable (isn’t the difference in size enough?).  But if they insist on a horizontal break, each should be titled.  As it currently stands it interrupts the understanding that all of these exhibitions are happening at once.  Also, Events should have pictures associated with them.  I happen to know who RoseLee Goldberg is and I also happen to know who Tom Marioni is but the majority of site visitors will not be art geeks and would rather click on a picture of a woman with a bob or a photograph of a bottle of beer.  People don’t click on words; they click on pictures. SFMOMA: don’t do it for all events – far too big a task – but add pictures to Featured events.

Confusing Exhibitions detail page

Take this page as a sample of their Exhibition page template: http://www.sfmoma.org/exhibitions/306
Their design is based on keeping things “above the fold” – the 600 pixel height that content can appear in safely without the user having to scroll down to see it.  To keep things above the fold they are making people click.  But they’ve gotten it all wrong.  People aren’t afraid to scroll, they are afraid to click. When you scroll, you know where you are and you know where you’re going.  When you click, you have no idea what’s going to happen or what’s going to change.  Amazon.com and their millions in user testing is proof of the power of the scroll.  Their product pages are incredibly long but Amazon knows that’s preferable to a user than a click-intensive option.

The way that subsection content relates to the overall exhibition detail page is not intuitive.  If you click “Participating Artists” under “Related Links” you are shown the list of artists and the other related links but the main exhibition information is gone and you have to click “Back to Exhibition Page” to get there.  That’s just bad design, folks.  Since these “Related Links” well, relate, directly to the exhibition at hand, it’s important to keep that Exhibition overview information on the same page.
SFMOMA: put all the exhibition content on one, long page.

I’ll leave it there.  I know that the web team has a list longer than mine of bugs, design issues, and problems they need to fix.  Also, they’ve likely got close to zero budget for user testing so this is effectively their beta release.  Keep going SFMOMA!  You’re doing alright.

I’m pleased to announce the launch of a minisite I designed for the New Museum exhibition, “After Nature.”

Visit the minisite here.