Bridges of Understanding: Web-site Usability Critique


Published on

  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Bridges of Understanding: Web-site Usability Critique

  1. 1. Bridges Web-site Critique ©2008 Praxis Communication’ story is barely described on the index (opening) page—just the“Engaging students worldwide in direct, interactive learning and story-telling…”mission statement. You need to have more about what Bridges is and what itdoes featured more prominently. That info presently is only found if someonecares enough to click thru to “About us.” The copy on the About Us/JoinUs/Workshops page is the single most important page on the site, but it’s buried.This content needs to be on the index page, because it’s the core description ofwhat Bridges is all about. Move the content below to the index page andcondense: “Changing the world one story at a time: Bridges to Understanding provides the tools and training that enable kids around the world to create and tell stories from their own lives and cultures. These stories are shared through the BRIDGES website where students can engage each other, ask questions about each others’ lives and explore each others’ cultures, and through our annual face-to-face exchange, in which Bridges sponsors international students here in Seattle. Bridges enables middle- and high-school students in the developed world to connect with their contemporaries in indigenous communities in Peru, South Africa, India and Guatemala. New communities across the globe are coming online regularly as Bridges continues to expand. Our Seattle-area teachers are directly supported by Bridges staff and local volunteers in their classrooms, receive training in our Seattle workshops, and find community and support in regular meetings with the other local Bridges teachers. Our on-site workshops at schools in Peru, S. Africa, India and Guatemala, provide training to teachers and students there, and to volunteer mentors who travel with us. Our Seattle and international teachers work together through their classroom collaborative projects. Everything comes together in the Bridges Web site, showcasing our shared learning and knowledge, the digital stories created by the Bridges students.” “The question that Bridges asks and attempts to address is: What would happen if we gave indigenous children a voice and connected them to American children on a platform that allowed an equal exchange? What would happen if we gave children a platform where they can learn directly from and with each other, not just about each other? And what if that platform allowed them to share and discuss the daunting issues that face us all: environmental degradation, physical and spiritual poverty and the intolerance that results from not sharing understanding and not being understood? That is why I started Bridges. Today, seven years after we began, thousands of youth across six countries are connecting with each other through school-based online forums, sharing digital stories and meeting face to face through exchanges throughout the year. I believe we are changing the future of the world child-by-child, community-by- community.”1. Index page: the central foto’s perspective is appealing, but it fails to show what Bridges is really all about.2. Web surfers expect links to be blue, and your light green links are almost hidden against the white page background. By not using standard Web color schemes, you’re losing out on opportunities for click-thru. People won’t visit interior pages if they miss seeing the links.3. You only get a few seconds to impress/intrigue/interest the first-time visitor into staying and exploring further. Right now, you’re wasting that opportunity.
  2. 2. 4. Audiences for the index page: students & teachers; workshop customers and potential customers; donors and potential donors; journalists. Very little content directed toward these audiences is evident on the index page.5. Index page: “What’s New” should be presented in the right- or bottom- panel, leaving more prime real estate available for explaining what Bridges is.6. The index page has an insufficient call to action (CtA), a mere “View latest digital stories.” Once the index page is reworked to include sufficient explanatory text, one or more CtA needs to be featured prominently7. Some will need only links to support features (“Log in,” “Press Center”) while others should have targeted CtA (“Become a Bridges storyteller,”)8. Index page: That black bar at the top is the principal design element to stand out. It’s distracting.9. Index page: Using light-green type in the “What’s New” bullets makes for poor visual scan-ability. Replace with standard black font color.10. Index: Why isn’t this page longer/deeper/wider? The largest block of text on the page is the “What’s New” column and what’s under it. You’re missing the single greatest opportunity to engage visitors with Bridges because you’re only presenting a small amount of descriptive copy.11. Index: “What’s New”—This shouldn’t look like a blog or an update to a shareware product. This is an important nonprofit making a critical difference in the lives of kids around the world. A “What’s New” section given such prominence suggests you think of yourselves as small-time. If you use more of the available space on a wider index page, this material can be put in a margin table.12. Index: “What’s New”—Don’t use bullets. Bullets suggest text only. These are links. Use standard blue link color to identify them as links.13. Index: You need to add a site index.14. Index: “The Workshop Experience” doesn’t do enough to communicate what is behind the link. I had no idea it opened a video documentary. Add a CtA: “View our video documentary about a workshop in India.”15. Index: “Adobe Partnership” link opens at bottom of Gallery page. Since Adobe is so important, let’s keep it happy and give Adobe its own page. Instead of simply the images and their captions, the expanded Adobe page could include greater detail of how Adobe supported it. (Or, at least, greater detail about the individual stories if that Adobe support is a meager plot- line.) Inquiring minds want to know: How does/did Adobe support these stories. Was it only cash? More? Be specific. Nonprofits, like artists, always need to sing the praises of their patrons. You’ve got an entire page detail- ing “Our partnership with Getty Images.” You use the same word— partnership—to describe your relationship with Adobe, and yet the Adobe Partnership doesn’t have *any* text! If I were Adobe, I’d conclude we
  3. 3. weren’t as important to you as Getty. Oh, wait—I found the explanatory text —but it’s buried on About Us/Partners/Funders!16. Index: What’s New—“Bridges digital story, Single Mothers, selected from 250 entries” leads not to the story, but to the press center page. Hunh? What gives? Where’s the story I clicked on? Don’t make visitors jump thru hoops to find what they think they’re getting. Instead of this bait- and-switch, you need to fulfill the basic contract of a link: It’s supposed to take you straight there.17. Index: What’s New--August 6, 2008 - Johannesburg, South Africa: National Womens Day Commemoration, does NOT lead, as one might expect, to a news story about the commemoration. Instead, it takes me to an invitation. Did Phil make a speech? If so, where is the text of his remarks? If he presented an exhibition, where are the gallery pictures of it?18. And why is this outdated material still up? This needs to be moved to a new page titled “Announcements”19. Index: View latest Digital Stories—You should specify that QuickTime is required to view them, and include a link for downloading QT. Additionally, for those visitors who don’t use Macs or QT, consider having every video on the site available in Windows Media Player format as well.20. Index: Get rid of the upper-case hedlines (WHAT’S NEW @ BRIDGES). Upper case is not only harder to scan through visually, but it connotes screaming. If upper case is inappropriate in e-mails or online fora, then it’s inappropriate here. Upper-case is an amateurish method of conveying textual emphasis. Use sentence case, color and boldface instead.21. Index: You need a Contact Us link on the opening page.22. About Us: The fotos on these pages are great. However, by not providing captions for them, you’re losing a wonderful opportunity to provide more information about Bridges. People look at fotos before they read text. Use captions to pull people into other parts of the site, or to reinforce the messages on particular pages. Don’t leave site visitors wondering about what the fotos represent. They may seem clear to you, but I can assure you they won’t be clear to everyone!23. About Us: Who are the students in the foto? Need to provide a caption— perhaps even a link to their school or their digital story.24. About Us/Our Program/Mission: This is the info that I expected to find when I clicked on About Us. Instead, I had to wait to find it from the drop- down menu. Don’t make visitors jump thru a hoop to get here. Everything should be at the end of its own link. Redesign the About Us to feature this page’s info at the end of the About Us link.25. About Us/Our Program/Mission: “Whom do we serve?” The copy refers to a page that does not seem to be on the site—and doesn’t have a link to it anyway. Don’t make visitors hunt! (“See our communities page for a map of
  4. 4. our sites around the world, and the schools with which we currently work.”) A map would be a wonderful visual aid.26. About Us/Our Program/Model: Who are the kids in the foto? Add a caption and/or link.27. Join Us—Donate: This page has too many conflicting elements. You need to break off the Workshop Registration onto its own separate page.28. About Us/FAQ: This needs to be reworked. A five-question FAQ is pretty meager—and the location of your head office shouldn’t even be included!29. About Us/Team: Phil is listed twice—on Staff/Bridges Legacy and Board of Directors. If you’re going to include the founder, then burying him at the bottom of a page most people never look at anyway is not the right way to emphasize his continuing contributions.30. About Us/Team: Contact info shouldn’t be here—it should be on the contact page.31. About Us/Team: Again, get rid of upper case heds, and change the link colors to blue—that light green barely stands out at all.32. About Us/Team: How are the kids in the foto? Provide a caption and a link!33. About Us/Team/Board: Aha! Captions on a foto!34. About Us/Team/Advisory Board: You provided bios of the board members, but only list the members of the advisory board. If I were any of them, I’d feel slighted. If you’re not going to explain what the advisory board does and provide at least some details about each member, then having them on their own separate page is pointless.35. About Us/Team/Advisory Board: The foto on the Board page (see #30) showed someone on the board. Are we to infer that the foto on this page similarly shows someone on the Advisory Board? Who are the people in the foto?36. About Us/Team/International Leadership: I have no clue what the page is about. Who are these people? What do they do in connection with Bridges? What is the point of listing them if you don’t explain their significance? And who are the people in the foto?37. About Us/Partners/Funders: Get rid of the upper case, and change the link color from light green to standard blue.38. About Us/Partners/Funders: Is it “Founders” or “Funders”? Did these organizations and companies have something to do with founding Bridges?39. About Us/Partners/Funders: “HOPE TO OTHERS & TOM SHADYAC”— What the heck does this fragment mean? Is this an organization? If so, where’s the link for it? Does it have something to do with The Kirlin Foundation?40. About Us/Partners/Funders: You provide copy outlining what Adobe, Getty et. al do for Bridges, but the Ambassador companies are merely listed without any further description. If Microsoft is involved—and you want to keep it happy—then you should, at a minimum, provide as much copy
  5. 5. about what Microsoft does for Bridges as you do for Adobe and Getty. And what does “Ambassadors” mean, anyway? Is it some sort of special level? Explain the significance of Ambassadors.41. About Us/Partners/Funders: If “Other Key Supporters” are so key, then why don’t they get even a sentence describing how key they are?42. About Us/Partners/Funders: Top foto—Where’s the link in the caption to the digital story?43. About Us/Partners/Schools: You need to identify the cities for each of these schools, and add links. Stop using upper case.44. About Us/Partners/Nonprofits: You have only ONE nonprofit supporter? That appears lame. Until such time as you get more, I’d remove this page. Besides, you don’t explain at all how the Purpose Prize is involved in supporting Bridges, and nothing on their own opening page does either.45. About Us/Join us: If I were the mentor in the foto, I’d feel slighted that I’m not mentioned by name. Do you mean to suggest that mentors are so unimportant that they’re interchangeable? Seen one, seen them all? Mentors are critical components, and they need to receive appropriate recognition. If he isn’t identified because no one remembers his name, then don’t use fotos in such situations.46. About Us/Join us/Volunteer: Finally—firm calls to action! (“Become a Seattle Area Classroom Mentor,” “Become an International Site Mentor,” “Learn More at our Monthly Open House”) These CtA should be on the index page as links because they are some of the most critical things you want site visitors to do.47. About Us/Join Us/Workshops: This page duplicates what exists under the Workshop tab. Get rid of it.48. About Us/Join Us/Workshops: The FAQ at the bottom contains questions that aren’t in the Program FAQ. Don’t have individual FAQ pages; combine them all into one, broken into sections if need be. BTW, the Q in FAQ is for “questions” (plural), so writing “FAQs” is redundant.49. About Us/Press Center: Phil’s comments in “Why Bridges?” are significant and deserve higher prominence with a better link. “Why Bridges” is a weak link title and doesn’t excite curiosity.50. About Us/Press Center: FIVE press contacts? If I were a journalist, I’d wonder which one I should contact. Pick and display a single point of contact.51. About Us/Press Center: This section needs separate links for an FAQ and a backgrounder about Bridges, as well as separate links to bios. Also fotos, images.52. About Us/Press Center: “Latest Press Releases” (lose the upper case!) suggests you have more than one press release—but you only have one. The other is a media alert. Press releases represent key sources of info for journalists prowling a site’s press center. If you irritate them by not
  6. 6. providing what the subject hed promises, they may just leave instead of persevering to continue searching. You should never make journalists hunt for what they want.53. About Us/Press Center: “01 April 2008: International Bridges students explore Pike Place Market on April 4 as they create multimedia digital stories”—this link goes to the Garfield media advisory immediately above.54. About Us/Press Center: The text of the link to the 10 MAR 2008 press release should be the release’s title. This is standard in Press Rooms.55. About Us/Press Center: “Bridges in the News” needs to have the dates of each publicity clip, just as you do with the press releases.56. About Us/Press Center: “Bridges in the News” –“Bridges on Peace Talks Radio” should indicate that the link goes to a text excerpt and not, as one might assume, to an audio file of the interview. People might be more inclined to click thru to read the excerpt than to listen thru an entire interview.57. About Us/Press Center: “Bridges Events/Coming Soon” features expired events. Remove them. If you want to archive them, create an Announce- ments section for historical review of such things.58. About Us/Press Center: “Coming Soon” features three links to the Human Rights Watch International Film Festival. However, those links go to placeholder pages on HRWI’s site. Clicking these links is a waste of time and the links should be removed.59. …Besides, I’m more interested in which Bridges stories will be displayed. Were they “selected by a panel of judges”? Then use that fact to create third-party validation. Which stories were they? Are they already up on the site? Why aren’t there links to them here?60. About Us/Press Center: “Bridges Events/Recent Events”—Both links in the first item, June 20-21, 2008 - New York, NY, USA: take me to placeholder pages with no content. This is irritating.61. About Us/Press Center: “Bridges Events/Recent Events”—The link to Seeds of Compassion contains no indication of what Seeds of Compassion has to do with Bridges, and neither does the opening page of the SOC site. Either provide an explanation of its relevance and why it’s here, or remove this item.62. Schools: This section lists Canadian and Israeli schools, but those count- ries are not listed in the Donate text, which only lists Peru, South Africa, India and Guatemala. Need to be consistent throughout.63. Schools/pick any—I clicked on the schools at the bottom of a few pages expecting to see a digital story or the schools’ own sites. Instead, I discover that it’s really a login for the school. I wasted my time because the link wasn’t properly labeled.64. Schools: Not every school page shows a link to the school. Does that
  7. 7. mean the schools don’t have them? However, if they do have sites, this is a HUGE oversight!65. Schools/Canada/Linnea: “Stay tuned…”? If you don’t have the content, then don’t indicate that you don’t have the content. Remove all such placeholders.66. Schools/Guatemala: the attribution in the foto caption is incomplete. Holy who?67. Schools/Guatemala: The copy describing Colegio San Pedro is almost nonexistent. Anyone from that school who also reads the larger content of Fotokids will think Bridges doesn’t really care about Colegio San Pedro. You need to be consistent and have as much descriptive text about every school as possible.68. Schools/Israel/Israel School: This link text should reflect the school’s name, not its category. Change to “Kesem School.”69. Schools/Israel/Israel School: Get rid of the coming soon!70. Schools/Israel/Israel School: The bottom of the page has a purple square with “Orly Yagodorsky.” This looks amateurish. If this happens to be the first Schools page a potential donor, workshop customer, teacher or journalist sees, then you’ve lost an opportunity to impress them.71. Schools/South Africa: The top graf contains two links to the same further- info page: “You can work with our amazing Bridges students in South Africa by joining us this summer on our digital storytelling workshop in Cape Town. Learn more here.” One is sufficient.72. Schools/West Bank: Remove the “check back here soon” text.73. Schools/USA: Some of the schools are partnered with overseas schools. Aren’t they all? If so, specify which partners on each U.S. school’s page.74. Schools/USA: Not all these schools’ pages indicate the location of the school.75. Schools/USA: For the benefit of international students, specify “the state of Washington” instead of using the postal code WA. Do the same for all the rest of the USA schools.76. Schools/USA/Alderwood: Mousing over the large white space in the middle, I discovered four invisible squares that have links I can’t open. What gives?77. Schools/USA/Coe Elementary: If it’s not ready, then don’t display an empty page! Take down this page until you actually have content.78. Schools/USA/Garfield: Remove the “Stay tuned…” copy.79. Schools/USA/Lakeside: For some reason, the link to the school’s site is nowhere in evidence. Use Schools/USA/Nathan Hale: This refers to Nathan Hale’s partner school— but not by name! If I were a student at the partner school, I’d feel slighted.81. Schools/USA/Salmon Bay: If they created 18 stories, how come this page only shows four?82. Schools/USA/Seattle Girls’ School: Doesn’t list their Web site:
  8. 8. …also, where is the descriptive copy at the top of the page about what projects they’re working on?84. Schools/USA/Stevenson: Remove the “Check back soon…” text. If you don’t have anything to show, at least put up a sentence describing what they’ve begun to work on, or mention their teacher…anything is better than nothing!85. Schools/USA/WA middle School: Get rid of the “Check back in the spring…”86. Projects: This is a lame title for a tab. Better: “Bridges Initiatives”87. Projects: This is the section that’s most unsupported, and doesn’t seem to relate smoothly to the core of your mission. Find a better way to integrate it.88. Projects/Climate Change: I don’t like having to hunt thru multiple links to find the entirety of this project. While keeping everything to one screen so that nothing appears below the fold, as it were, is admirable, in this case you have lots of info to convey and I have to jump thru multiple hoops (links) to get a sense of the entire thing. Put it all on one page and keep the section links above the fold on the first screen.89. Projects/Face to Face: This is a really interesting aspect of Bridges, but it’s buried so deeply that most people will miss it. Break it out to its own tab, and refer to its existence in the body copy of the index page.90. Projects/Face to Face: Why aren’t there fotos on the site of the visits? You should show the foreign students interacting with Seattle kids! Oh, wait: They exist—but on the blog! ?? I don’t want to have to leave the site to see this sort of stuff. The fotos on the blog are great stuff, and they show real kids—much better than the more stock-foto-style, generic images you show to the left of each page on the Bridges site.91. Projects/Face to Face: You need to identify the subjects in the fotos on all three pages (2008, 2007, 2006)92. Projects/Face to Face 2007: “FACE TO FACE 2007 (previousily--should be “previously”93. Projects/Face to Face 2007: Many blocks of text here, and not enough white space breaking them up. OTOH, some widow sentences need to be reattached to the grafs above them. The 2nd and 3rd grafs look like they contain hard returns that have broken up the integrity of the paragraph. The final graf contains three such instances. If they’re meant to be separate grafs, then separate them with white space. Otherwise, do some backspacing and get rid of the interior white space in the grafs.94. Projects/Past Projects/Cultural Portraits: Is this page titled “Cultural Portraits” or “Our Communities”? One is used in the navigation link, the other on the page itself.95. Projects/Past Projects/Cultural Portraits: “Our Communities”—Content is referred to, and its sections are listed but they aren’t links—so why does
  9. 9. this page even exist? If this project was significant enough to be listed on the site, why isn’t there more about it? Let’s see the finished product!96. Projects/Past Projects/Cultural Portraits: “Our Communities” -- Note the incomplete text: “Our goal is to give our students a voice to tell their own stories and to document their lives and their cultures. [sic] is an ongoing project in which students from all of the Bridges sites create a vivid picture of their communities through digital stories.”97. Projects/Past Projects/Water Made Visible: As with “Our Communities,” content is referred to by title, but without links visitors can’t get a sense of what was done.98. Projects/Past Projects/Games of the World: Although the first two items on the page have links, “Final Projects” does not.99. Projects/Past Projects/Games of the World/Curriculum Resources: “Our students have already created some interesting stories about the games that they play. Take a look: …” I’d love to, but I can’t—because no links exist! Five stories seem to be listed, but they’re jumbled together. Use white space to separate them—and add the links!100. Gallery: Each image should identify the school and the date created. Lose the upper case and you’ll have more room for captioning.101. Workshops/FAQ: Don’t write out “frequently asked questions” in the title above the body copy—it takes up too much space. FAQ is not so new a concept that it needs to be spelled out to your visitors. Just use: “Workshop FAQ”.102. Workshops/Testimonials: An incredibly important page of wonderful content, but it’s buried too deep in the site. You should have a sampling of the best comments on the index page (perhaps even in a scrolling crawlbox, or replaced with fresh ones on each subsequent return to the page from interior pages).103. Workshops/Testimonials: Italics are MUCH too hard to read as regular body-copy style, and you have way too much of it on this page. Replace all italics with non-italics.104. Workshops/Testimonials: You can make this page even stronger by adding selected fotos of some of the persons providing the testimony—not standard hed shots, but actual candids showing them on site & at work. Or you could add a link to a foto next to each person’s comment. Also consider adding a Gallery link to the digital story that person was involved with.105. Workshops/Blogs: People really dig blogs nowadays, but these are buried. Move them to their own tab, along with the Student Perspective blog. In contrast to most of your pages’ content, which describe things without showing them, these blogs are important elements showing real people doing real stuff.
  10. 10. 106. Workshops/Guatemala: The foto is dull. Use fotos that show actual faces. Remember, you’re in the business of selling services that help children.107. Workshops/Guatemala/Photographs: Remove the “Check back soon for a slideshow.”108. Workshops/Peru/Photographs: Remove the “Check back soon for a slideshow.”109. Workshops/South Africa/Photographs: Refers to a slideshow that does not seem to exist because it is not on the page.110. Workshops/Workshop Graduates Gallery: I don’t think showing one foto constitutes an actual “gallery.” The foto is a good one, however, and you should use more like it elsewhere. Too many of the fotos on the left of the pages fail to show workshop participants, whether adults or kids.111. For a model of effective navigation tabs, check out the tabs at the top of They keep it simple: “Who we are,” “How we change lives,” “What we do,” “How you can help,” “Contact us,” “News and events.”112. Notice also that Treehouse’s interior pages are shown as links in a nav table along the left margin, which is the classic Web-site design that most people expect. Your design of top-down, scrolling left to right and down again, is cumbersome by comparison.113. Your Schools and Workshops tabs contain duplication. Why not just combine each workshop with each school and only list them once?114: Here are two organizations doing similar things, which you may want to work with or link to: Children’s Technology Workshop and Seattle’s Youth Media Institute