Galaxy Zoo: Behind the scenes

For the past few months on this blog, we’ve been talking about the science of Galaxy Zoo – what your millions of classifications have revealed to us about the way the universe works. Right now, as Steven and I described Friday and Monday, the members of the Galaxy Zoo team are writing papers announcing our science results, and offering feedback on each other’s papers.

But of course, Galaxy Zoo has become much more than just a science project. The site has become an Internet phenomenon, and for the next few posts, we’d like to focus on some other aspects of the Galaxy Zoo phenomenon. Today, we wanted to talk about the thing that makes everything else work – the site itself.

Without a good-looking and well-functioning website, we could have never invited all of you to participate in this project, and you could not have generated the excellent scientific dataset that you have generated. The site was designed by two professional web designers: Phil Murray and Dan Andreescu. Galaxy Zoo is now proudly listed as a featured project on Phil’s web site.

Phil designed the look and feel of the site, and Dan wrote the code that allowed the website to take your input and write it into a database of classifications. Dan left the project in late 2007, and Danny Locksmith has taken over the coding.

The best way to tell the story of Galaxy Zoo’s design is to let Phil and Danny tell the story themselves. So here is Phil, talking about how he designed the layout of Galaxy Zoo:

GZ1.0 Visual Design

I was asked by Chris Lintott to design the Galaxy Zoo logo and web site in March 2007, and I realised early on that this had the potential to be a hugely successful project — little did we know just how successful it would be! I was given a completely free rein to handle the visual design of both the logo and the web site.

The Galaxy Zoo Logo

I wanted to create a visually appealing logo that would work in several formats – web and print. It had to be flexible enough to work as a standalone logo or to be incorporated into an overall page design – as is the case with the web site. The graphic part of the logo is in fact based on a Hubble image of Supernova 1987A Rings, which seemed to fit very neatly into the text of ‘GALAXY ZOO’ to form an official logo. A variation was developed for both web and print use.

The Galaxy Zoo Web Site

It seemed obvious that part of the attraction of the GZ1.0 project to non-astronomers was the sheer beauty of the galaxy images, plus the fact that many of these images had never previously been seen by human eyes. So I wanted to maximise impact right up front on the Home Page of the site by using a large galaxy image as a main background to the page and to carry this theme through into the inner pages. I wanted all text to sit on a semi transparent screened background to give the impression of depth on the page.

Choosing a colour palette was relatively straightforward given the colours within the logo, hence the basic black, grey, orange and gold colour scheme. It was decided to go with a slightly shallower header graphic for inner pages with all top navigation shown horizontally and any secondary navigation to be contained in a left column (as is the case in the Analysis Page). I decided on a fixed width solution catering for a minimum screen resolution of 1024×768 pixels.

When it came to the buttons for the Galaxy Analysis page, I spent some time designing what I hoped would be generic buttons for the various options on offer (Spiral Galaxy – Anticlockwise, Clockwise and so on). The intention was to try to design buttons that would not influence the decision making of the Galaxy Zoo visitor but also that they would be intuitive to use. In fact it quickly became apparent that having designed the buttons to look like they were part of an ‘online  game’, was a feature which also helped with the appeal and overall usability of the site. The feedback and data received as part of GZ1.0 has given us some valuable information about how to present these and other buttons for GZ2.0.

As for building the site, I constructed all the pages as HTML templates, which were then integrated into the ASP.Net web programming environment by the excellent Dan Andreescu. Danny Locksmith has taken over the ASP.Net duties since late 2007.

I think you’ll agree that the site that Phil did a great job – he created a really beautiful site that was easy to navigate. Now here is Danny, talking about how he took over the coding from Dan:

Most of the ASP programming was decided on before I got involved. My task so far has been to try to understand how someone else thought it should work!


In effect this is how it works:

Your login to the site, your user preferences, etc. are all controlled by the .NET 2.0 framework. The site uses a template that provides the basic logic involved in recording your clicks and ensuring that the right person is credited with each classification. The persistant data is stored in a database.

When you load the Galaxy Analysis page, a galaxy is selected randomly and displayed on the page. Next to the galaxy’s image is a the Galaxy ID, which is a hotlink to an SDSS page where you can view details of the galaxy – its spectrum and a zoomable picture, etc. Watch for changes to this in GZ2!

Next to the galaxy image is a custom control which has the various buttons you can click to classify the galaxy. Since we learned about the anticlockwise bias, various theories have been put forward about to explain it – one of them is the design and layout of these buttons. Another problem here was that people tended to click the button several times, recording several results. This was worked around by only allowing one classification per galaxy. Yet another potential problem was that you could easily make an error, but you could not go back and fix it. Look for changes in GZ2!

Once you click a button, your classification, your user ID, the date and time, etc. are recorded in a database. The data that is stored was designed to answer specific questions, and the scientific papers which are to be published soon. With the advent of the bias testing phase, additional information was stored in the same database – the way the image displayed had been transformed.

In GZ2, the data collected will be more generic, and will create a very comprehensive catalog of galaxy information, almost certainly the biggest ever. To a great extent, the inner workings of the site are defined by the various scientists involved in the project. It is very much designed by the entire team, and as such my task is to ensure that the finished site meets all the goals of the team, and at the same time is pleasureable to navigate and to use.

You will be able to decide if I was successful when GZ 2 is launched!

I’ll add just two things to what Phil and Danny said:

1) The servers that run Galaxy Zoo are in the Physics and Astronomy building at Johns Hopkins University in Baltimore, Maryland, USA. (Here is the building in Google Maps – the Johns Hopkins lacrosse stadium is just to the north, and the building across the winding street is the Space Telescope Science Institute).

2) One of the things I find amazing about Galaxy Zoo is that no member of the team has ever met all the other members face-to-face. Chris has come closest – he has met everyone except Jan and Alainna, who do IT support for the servers at JHU. In addition, 8,549 km separates Anze in Berkeley, California from Chris, Kate, and Kevin in Oxford. The Galaxy Zoo team could not have existed without the Internet, and communication tools that allow us to work together productively on different continents.

About The Zooniverse

Online citizen science projects. The Zooniverse is doing real science online,.

8 responses to “Galaxy Zoo: Behind the scenes”

  1. Joseph K. H. Cheng says :

    Very informative and detailed explanation. As users of the GZ we can now all rest assured that our efforts have been beneficially spent on one of the most meticulously planned scientific projects.

  2. Scary says :

    Thank you very much – for the insight on the “inner workings” of the project, and your dedication.

  3. Daniel Cornwall says :

    Thank you for the inside look at the website. It eases my chomping at the bit for GZ2. Thanks to all of you for opening up participation in astronomy projects to so many. I really hope your approach gets wide adoption in the astronomical community. Good luck and Godspeed in getting the next phase ready!

  4. Thomas Jennings says :

    Many thanks for your suberb website. As an amateur astronomer I feel that I can now make as small difference to the big picture. I look forward to the launch of GZ2. May I suggest, by way of positive feedback, the inclusion of some more detailed controls with perhaps a ‘further study’ button for some of the more difficult galaxies to classify. More experienced users could then go to this database to make further observations thus giving more accurate results.
    Thanks again.
    Thomas Jennings

  5. Luis Aldamiz says :

    I wholeheartedly agree that the interface job is superb. The only thing I really missed was shortcut keys, as using the mouse for long can be somewhat alienating (at least for me). Anyhow this has been already talked at the forum, along other minor issues and I KNOW that, if this was great, GZ2 will be even much better.

    Interesting also to know that not even you, the scientific team, know each other and how deeply Internet has allowed this original research to happen.

    Enjoy.

  6. Steven says :

    Shortcut keys are a very good idea, and something we should definitely consider for GZ2. Thanks for the suggestion.

  7. Shanita says :

    Thanks for the info! It’s been really great getting to work with GZ and I’m really looking forward to GZ2.
    BTW, I live five minutes from the Hopkins facility! And I work at the East Baltimore campus! How do you feel about visitors?! 😉
    Anyway, keep up the great work!

  8. Goldstar Locksmith says :

    I completely agree with Luis Aldamiz about using shortcut keys. Thanks Phil Murray and Dan Andreescu for excellent web-design and qualitative usability.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: