All About Birds Blog

Sneak Peek: New All About Birds “Wireframes”

By on Wednesday, January 7th, 2009 - 20 Comments
Click for full-size view of entire wireframe

Click for full-size view of entire wireframe

Happy 2009! Here at Sapsucker Woods, we’re starting the new year deep in thought about our redesigned All About Birds website, set to debut in the spring. Here’s a little something called a “wireframe” to give you an idea of what we’re cooking. We’d love to know what you think.

For anyone not fluent in web lingo, a wireframe is a schematic of a page that’s used to focus on organization and layout, before we spend time designing pleasing colors, graphics, and fonts. (It’s sort of the same idea as drawing up a dinner party seating chart before choosing details like tablecloths, flower arrangements, and flatware.)

So, bear in mind that the final product will look a bit nicer than this wireframe. A few examples:

  • we will be using more colors than just gray
  • we will be using more fonts than just Myriad Pro
  • the blank “placeholder” boxes will contain pretty graphics (including Birdshare photos)
  • the buttons and tabs will actually work

The wireframe we’re showing you here is one page in the All About Birds online bird guide, which is redesign priority No. 1. These species profiles get a huge portion of our site’s traffic, so we know it’s critical we get them right. We want to make them more comprehensive, use more pictures, sound, and video, and give you more help in identifying and learning about the species.

Now, here’s lead web designer Alex to walk you through some of the features of the wireframe:

acThe first thing you’ll notice is that we’re adding an identification section to help you figure out if you’re looking at the right bird. We’re taking a slightly different approach from a typical field guide that focuses on field marks straightaway. We start by briefly covering four keys of identification – size/shape, color, behavior, and habitat – to help you make sure you’re in the right ballpark. Then when you look at field marks they serve as a way to fine tune your identification.

We’ll also provide photos of similar species so you may compare them against the species you’re currently looking at. The working version of the page will let you click on the photos to zoom in to a larger version and then flip through other photos. Clicking on a similar-species photo will place enlarged versions of the primary species and similar-species photos side by side for easier comparison.

The “Life History,” “Sounds,” and “Video” tabs above the ID section will display cool facts, species details, and multimedia players for you to learn more about the species. We’re finishing up those wireframes, too, but we haven’t posted them yet for fear of overwhelming you.

Please have a look at the large version and let us know if we’ve got it, what might be missing, and any other thoughts you may have. If you’d like to see wireframes for the rest of the species account tabs, just let us know and we’ll post them. Have fun!

This entry was posted in Redesign. Bookmark the permalink.

20 Comments

  1. Looks basically very sound. Putting a field guide on the web makes a lot of sense, particularly because of the comparative ease with which it can be updated. I’ve been studying birds for 50 years and every field guide published in that time has been obsolete the day it hit the bookstores.

    Hopefully, the format will allow for enough flexibility to adapt to the peculiarities of each species or group of species. Sorting out peep is a much different proposition from identifying an empid, for example.

    Hopefully, there will be room eventually for including video. I think it would be very helpful in identifying many species to show it going about its business: displaying, foraging, flight patterns, etc. Some diagnostic field marks are best viewed when the bird is in flight.

    I want to leave you guys with a sense of my appreciation. You are breaking new ground here and I can’t wait to see the result.

  2. Joan says:

    If you can help me master identification of the little brown birds (unremarkable finches and sparrows), I would greatly appreciate it!

  3. Looks great! I can’t wait to see it in action.

    A few comments:

    1. I love that you’ve got a search function in the top right. I reference the site often, and always have to go back to google to find another bird. This will keep users inside, especially if the ‘similar bird’ list links directly to the similar bird page.

    2. I noticed the ‘cool facts’ section is missing from the opening page. While it doesn’t have to exist on that page, birders and non-birders seem to gravitate towards this section. It’s always interesting.

    3. More focus on photos/video/sound is great. I enjoy the photos/videos/sounds, they help with the identification and learning process.

  4. Will says:

    Is that a new logo in the upper left?

  5. Patrick says:

    I love it. I’m assuming you’re getting rid of the “Summary Page” vs. “Detailed Page”. I really dig the scrolling bars used to see other pictures. I assume those will pop up bigger pictures in a new window when I click on them. What will the “Hold” button do? Will the sounds section have text/mnemonics of the sounds?

    I’d be interested in helping out with testing if you need someone. I’ve done it for a living before.

  6. Amy says:

    Looks very user-friendly. I agree with Matt that I hope the “cool facts” get moved somewhere within the wireframe. These are the tidbits I tell people to get them interested in birds. (I’ve also found that many birdwatchers don’t actually know a lot about the bird other than its field marks.)

  7. Hugh says:

    Thanks to everyone for the encouraging comments so far. Quick answers:

    @VetNat, @Joan: we’ll eventually have pages that tell you how to identify tricky groups of species, like empids and peeps. Those will be additional to these species profiles. The Video tab on the species pages will let you see clips of the birds in action.

    @Matt, @Amy: Cool facts will be the first thing you see when you click on the Life History tab. We know people love these tidbits and we won’t take them away from you!

    @Will: That’s not an official new logo in the upper left, but you’re very observant

    @Patrick: Yes, you’ll be able to scroll through multiple pictures of the bird in question as well as similar species. The “Hold” button will let you select a photo and keep it on the screen while you continue to scroll through the remaining photos.

  8. John says:

    The wireframe looks very good. I especially like the inclusion of a search box in the upper right and the expanded photo section. The small number of photographs is a weakness of the current guide. I also like that you seem to be ending the summary/detailed division.

    This has less to do with design than content, but one change I would like to see is the inclusion of more call notes in the “Sounds” section. It is often easy enough to find online recordings of territorial songs, but difficult to find calls.

  9. Birdfreak says:

    Superb job thus far! I love all the information and how there are “layers” of data to view exactly what you are looking for.

    I second John’s comment about adding call notes and more sounds.

    Funny, the longer I look at the gray color scheme I actually like how it looks. Although, if it has coloring like the Living Bird page, that would be awesome.

    I like that there is a link to report sightings to ebird.

    I would really like to see some sort of “recent” sightings type thing in addition to the range map. This would be a plotted map of where the birds are being sighted, a sort of “real-time” range map. I don’t even know if that would be possible.

    Great job!!

  10. Birdfreak says:

    One thing I forgot: are the page links going to remain the same? I have lots of links leading to individual birds in the All About Birds section (and so do many other websites) and it would be a shame for all of them to be broken.

  11. msc says:

    The wireframe looks great! I especially what looks like a new option to browse birds by group. One of my frustrations with the current bird guide is trying to figure out which sparrow I saw and having to click back and forth between the Bird Guide page and the species accounts to see each one.

  12. Pingback: Cornell Lab of Ornithology Website Changes | Birdfreak: The Bird Conservation Blog

  13. John says:

    I second Birdfreak’s praise for the link to eBird, though I think it could be more prominent. I missed it the first time I looked at the wireframe and only found it after seeing Birdfreak’s comment.

    Not sure I like the idea of including a real time map on the All About Birds page. One disadvantage of database-driven features is that each one slows the page loading time. I find that on my seven-year-old computer that Jack Siler’s eBird map loads very slowly. I would worry about a feature like that getting in the way of disseminating more basic information.

  14. I’ll echo Patrick’s comment about the scrolling frame for the field marks and similar species – great idea! The hold button sounds like it will greatly help as well.

    Very promising!

  15. Patrick says:

    I echo the comments about the links to the pages that I already have on my site. That’d be a bear to change on my end.

  16. Hugh says:

    Just to reassure you all… We definitely will redirect all the old species page links to the new species pages rather than breaking them!

    @birdfreak, @John. We have plans to include a live eBird sightings map down the road, we just don’t have time to add it in this iteration. It would be in addition to, rather than in place of, a standard range map, since those are really two different pieces of information: where does a bird occur vs. where is it being seen right now.

    About the lag incurred by database functions – we’ll certainly try to minimize that. Some eBird queries take a long time on the server end, so the lag on the map you reference might not be the fault of your seven-year-old computer :)

  17. Judy says:

    Looks really nice and easy to navigate. Two questions though. Any possibility for having a ‘Further Reading’ or similar tab or area? Also any thought about hand-held devices?

  18. Hugh says:

    Hi Judy – We will have what we call “contextual links” at the bottom of each page. These are tips on how to attract this species, where to go to see it, as well as further reading (both on and off our site) and ways to get involved in studying or helping conserve the species.

    We are definitely aware of how useful All About Birds would be on a handheld device, but first we have to get the site built on normal computers. Stay tuned!

  19. Pingback: Calling Birdsharers: We’ve Got a Wish List (Part One) « Round Robin

  20. Sam Wilson says:

    Looking forward to all this cool new stuff!!! Sam

Post A Comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>