Marty Spellerberg

Museum Information Architecture: Where Are Weddings?

February 22nd, 2010

Weddings and other private events are a major source of revenue for museums; I’ve heard it said they “keep the lights on.” But where on a museum’s website will you find information on this service?

We grappled with this question in 2008 at the Art Gallery of Ontario as part of an information architecture review. From the museum’s perspective it’s an important business — does that mean it warrants a “tab” in the top level navigation? Some museums have it there. But on the other hand, it’s irrelevant to the vast majority of the site’s users, who are looking for current exhibits and the hours of operation. Also, how is it referred to? “Special Events” seems common in the event industry, but it conflicts with other museum initiatives such as fund raising galas. “Private” indicates exclusivity.

Here’s what I found in a survey of 50 museum websites:

museum-facility-rental

“Facility Rental” came out as the clear winner, with 36%. While 22% made it a top-level priority, the majority put it within another section. Which section? “About” with 34%, or “Info” with 21%.

At the AGO we used these findings to inform the decision to call our section “Venue Rental” (which sounds nicer while still avoiding conflict) and link it under “About.”

The sites surveyed were: Skirball, Vancouver, Sfmoma, San Jose, LA MOCA, Phoenix, Colorado, New Orleans, Norton, High, Chrysler, Cincinnati, Indianapolis, Wexner, Baltimore, Chicago, Milwaukee, Albright-Knox, Guggenheim, Brooklyn, MoMA, Tate, Louvre, Canada, ROM, Philadelphia, Detroit, Met, Chicago, Bata, Kansas City, New Museum, Walker, Calgary, Kamloops, Nanaimo, Two Rivers, Victoria, Fredericton, Hamilton, McMichael, Nova Scotia, Mendel, MacKenzie, Anchorage, Birmingham, Boise, LA County, de Young, New Brit.

Art Gallery of Silly Walks

January 1st, 2010

Happy New Year everyone!

Museum Website Top-Level Navigation Items

December 17th, 2009

How many navigation items do museum websites have? How are they split? What are the most common terms? I looked at 35 museum websites and this is what I learned:

60% of sites split their persistent navigation into two groups (usually with different font sizes or visual treatment). In this case, the average number of buttons is 13, with 8 in one group and 5 in another.

For the 40% of sites presenting all their top-level items in one group the average number of buttons is 9.

The average number of buttons overall is 11.5.

The most common terms are as follows:

Museum Website Top-Level Navigation Common Terms

This research was conducted in March 2008 at the Art Gallery of Ontario. The 35 sites surveyed were: Glenbow, Skirball, Vancouver, Sfmoma, San Jose, LA MOCA, Phoenix, Colorado, Carter, Houston, New Orleans, Norton, High, Chrysler, Cincinnati, Indianapolis, Wexner, Baltimore, Chicago, Milwaukee, Albright-Knox, Montreal, Guggenheim, Brooklyn, Quebec, MoMA, Tate, Louvre, National Canada, ROM, Philidelphia, Detroit, Met, Chicago, National USA.

Simple jQuery Show/Hide Tabs

December 9th, 2009

I am learning jQuery and really loving it! Here’s a simple bit of code I wrote to achieve an interface element. It’s basically tabs — there’s a list of links and when you click one the corresponding content is shown. It assumes there’s an equal number of links and content blocks. And that they’re in the same order. The HTML is like so:

<ul id="slidecontrols">
	<li><a href="#one">One<>a><>li>
	<li><a href="#two">Two<>a><>li>
</ul>

<div id="slides">
	<div id="one">This is content block One</div>
	<div id="two">This is content block Two</div>
</div>

The # links / id’s on the content div’s are to give some functionality for people without JavaScript. Here’s the jQuery:

$(document).ready(function() {

	//Set the initial state: highlight the first button...
	$('#slidecontrols').find('li:eq(0)').addClass('selected');	

	//and hide all slides except the first one
	$('#slides').find('> div:eq(0)').nextAll().hide();	

	//actions that apply on click of any of the buttons
	$('#slidecontrols li').click( function(event) {

		//turn off the link so it doesn't try to jump down the page
		event.preventDefault();

		//un-highlight the buttons
		$('#slidecontrols li').removeClass();

		//hide all the slides
		$('#slides > div').hide();

		//highlight the current button
		$(this).addClass('selected');

		//get the index of the current button...
		var index = $('#slidecontrols li').index(this);

		//and use that index to show the corresponding slide
		$('#slides > div:eq('+index+')').show();

	});

});

Simple! Best wishes to you in your coding!

Updated Dec 12 to fix a issue with inheritance (div’s within div’s).

Creating the Grange Prize Online Vote

June 14th, 2009

The Grange Prize is an annual contemporary photography prize. The winner is chosen through a people’s-choice vote conducted in-gallery and online. When the AGO took over the site this year, our goal was to create an easy to use and reasonably secure voting mechanism. The rules of the vote were simple — one vote per email address. This meant the main thing we needed to do was verify email addresses. We realized we already had the capability to do this, in the form of the double-opt-in mechanism of our list manager.

What is Double-opt-in? A user submits an address using an online form – that’s the first opt-in. Addresses are stored in the system and marked “unconfirmed.” Then the user confirms the action by clicking a link in an email – that’s the second opt-in. It is not until the verification link is clicked that it is marked as “active” or “confirmed.”

The choice being voted on – in our case Artists – were “segments” of the list. Segments are simply a second column of data, typically holding some sort of preference or demographic data.

So mainly we used the system as designed, simply changing the language presented to the user so that “subscribe” became “vote.” Easy!

Details, Details

There are many, many list management options out there. The ideas outlined above probably apply to any system. We happen to use a system called Cakemail, which has its own peculiarities.

In Cakemail, if a previously confirmed address is re-submitted it is marked as unconfirmed until the verification link is clicked. To ensure votes were not invalidated in this way we needed to check that an address had not already been confirmed.

Luckily, Cakemail provides a way to do this. If you pass an email address to a certian URL, it will return either a “1″ or a “0″ in response. So when the user submits their address we used this PHP class to get the response from that URL and from there it’s a simple ‘if/else” to either submit the address to the system or redirect to a ‘Sorry, you’ve already voted’ message.

One last thing to mention is the CAPTCHA, which is used to verify that the from is being submitted by a human being rather than an automated bot. For this we used eForm, which is part of the ModX content management system upon which the site was built.

Trek Nerds Attend Screening

May 10th, 2009

This afternoon the Toronto chapter of the Riker Riker Worf fan club attended a screening of the new Star Trek.

Craig and Marty

Wednesday Cooper in Broken Pencil Magazine

May 10th, 2009

My comic Wednesday Cooper is excerpted in the latest issue of Broken Pencil, “the magazine of ‘zine culture and the independent arts.” Shout out to Nathaniel at BP — thanks man!

Broken Pencil magazine

Photos from Organ Sparks

May 10th, 2009

Here’s a couple of shots from my show back in February. Thanks mom! That’s Michael Capon, the organist, beside me on the left:

Organ Sparks
Organ Sparks

New Comic! About a guy with super powers!

April 27th, 2009

OK, last catch-up for tonight. I’ve started drawing a comic that’s about as non-Wednesday as it gets. I should keep quiet about it until it’s further along, but for now, an establishing shot…

Washington DC establishing shot

Jesse Holmes blogs about my approach to YouTube

April 27th, 2009

Another catch-up post. We had another ROM / OSC / AGO shin-dig. We (AGO) hosted this time. Jesse Holmes wrote a comprehensive post about the session where he described my “talking web page” approach to YouTube videos:

“On top of making the page content more accessible and interesting, I’m also really impressed by the thinking that has gone into the formatting of these spots. They’re essentially short, sweet vlog posts, comprised of a single shot, that introduce a character that you may encounter when you visit. Talk about leveraging some of your best assets.”

Thanks man! Here’s a recent one: