Content is an oft-neglected part of the redesign process, and it shouldn’t be.  Why?  Tell me if any of these situations sound familiar:

• Your redesign went great – until you were running around the day before launch, trying to get content from your program staff and stuff it into your new CMS.
• Two months after your new site launched, you find a headline that says “Lorem ipsum…”  Oops.
• You leave the default autoresponders for all your most important actions, thinking “we’ll fix it later.”
• Your landing pages are ranking low in search, and have high bounce rates. You suspect your audiences just aren’t engaging with them, but haven’t figured out why.
• Your program staff are responsible for your web content, and they really know their stuff… but they don’t know much about writing for the web.
• Your design is beautiful, but once you start entering content, it’s just not fitting in the boxes that looked so perfect in the design phase.

These things could happen to you, if they haven’t already. Planning for content during a redesign often just means mapping the old content to the new, and then migrating it. But it should get more attention than that, because content is the most important part of your site.

I repeat: content is the most important part of your site.

Content — be it text, images, or video — is what people visit your site to find. Content — headlines, buttons, auto-responders, images — is what motivates people to become supporters or donors.  Content — page structure, metadata, alt tags — determines how your site will rank in search engines.  Content is important stuff.

That’s why Content Strategy, though an emerging field, is growing at lightning speed as people in the web community say, “yes, this is something we need.”  It’s been pioneered by folks like Kristina Halvorson, whose thoughts you can check out on the Brain Traffic Blog.

Content Strategy means deeply analyzing and revisiting your content throughout the redesign process, starting with a messaging strategy and letting that inform your content throughout the site.  It also means planning for content creation, curating good content, and actively improving your existing content before you migrate it.

The most natural time to do a content strategy project is during a redesign, but it can be a stand-alone effort as well. If it’s something you know your site needs, it doesn’t have to wait. Content isn’t always the first thing that’s looked at to improve a site’s performance, at least not holistically.  But in one way or another, content is often the solution, whether you need better SEO, a more emotional image for a landing page, or a more concise introduction to an important form. A content strategy project is your opportunity to look holistically at all these elements, and make sure they’re working together.

Have you done any content strategy for your organization’s site?  If so, what was your experience with it?

One of the key responsibilities of information architects (IAs) at Beaconfire during a site redesign is creating navigation labels that make sense for the sites’ priority audiences.  Recently, we’ve started using tree testing to check our work and make sure the navigation labels make sense to those priority audiences.

Through the IA process, we focus on two parallel inputs – our client’s needs and the needs of their priority audiences.  We identify the key information audiences want from the site and frequently get their input on how they’d categorize that content via open card sorts.  The card sort gives us an opportunity to learn how the priority audiences think about and group information on a site and what language they use to describe it.  In an open sort, participants are presented a list of content items and asked to group those items into whatever categories make sense to them.  Rebecca wrote a great post that explains more about card sorting last summer.

After the card sort, we bring that input back to the client in the form of a draft a sitemap and continue to refine the site structure to ensure all the content has a home.  Before we sign-off on the sitemap, we like to present the “new & improved” navigation to users and see if it is going to work for them.   In the past, we have tested the new navigation with a ‘closed card sort.’   Like an open sort, users are presented a list of content items but in a closed card sort, they are asked to sort those items into the pre-determined category (navigation element) that makes the most sense.  Closed sorting has worked well for our navigation validation – we’ve seen good results with the testing and solid performance on the navigation.

However, we recently discovered OptimalWorkshop’s TreeJack, a “tree testing” tool that allows us to test the navigation from a much more authentic starting point.  In a tree test, participants are asked to click through the site tree (navigation structure) to complete a series of tasks.  This type of process closely mirrors website users mental model “Where will I find X” when they come to a site.

In tree testing, we develop tasks that align with the priority content and features of the site or, if a particular navigation element is in question, we can create a task to test that. The testing results give us a quick overview of how many participants succeeded (got the page we identified as an answer for the task); whether they got there directly or wandered through the navigation; and how long it took.  In addition, the testing results show us the path that each participant took for each task which gives us good insight into the ‘why’s’ behind unsuccessful tasks. 

We’ve been impressed with the TreeJack tool.  Tests are easy to set-up and the test results are easy to understand and actionable.  It’s also nice that the tool is online, so it ready whenever your participants are, and no special software is needed.

Sounds fun, doesn’t it? Try it out here and let us know what you think: https://beaconfire.optimalworkshop.com/treejack/survey/BeaconfireWire

Much has changed since humanity acknowledged the word knowledge and started to classify the various subject matters into categories and taxonomies of learned disciplines.
The definition of knowledge is outside the scope of this article because of simple reasons. I am not as qualified as the university professors, or librarians who pour their blood, toil, trouble, and tears into the understanding of knowledge and wisdom.

What I do know about is what knowledge is online. Since Sir Tim Berners-Lee (Yes. He was knighted.) created the World Wide Web to link documents together on the then nascent Internet, knowledge became more than monolithic documents or books that were linked loosely via citations and references. Instead of specifying in APA, MLA, Chicago, or Turabian style where the source of a particular knowledge was, one could directly link it using something called “HyperText”, or what some know as “Hyper Text Markup Language”. Today, all websites that you see online are built with a combination of HTML, some JavaScript, and possibly some Flash or Java.
(more…)

This is the second in our NTEN series. Check out Part 1: Card Sorting for NTEN – Behind the Scenes.

After completing card sorting exercises and drafting a new information architecture with NTEN, we moved on to the next step: usability testing with wireframe prototypes!

Testing with Wireframes

We most often use usability testing in two ways:

1. To evaluate an existing site and identify areas of improvement
2. To evaluate a new enhancement, redesign, or information architecture — something that doesn’t actually exist yet

Our project with NTEN falls into the second category. So, how do you test something that doesn’t yet exist? We used wireframes:

By quickly sketching out the new navigation and some key content pages, we were able to produce an interactive prototype. (more…)

We’re excited to be working with the Nonprofit Technology Network to re-architect their website, NTEN.org. As each stage of the project is completed, we’ll share a behind-the-scenes recap about the process. First up: Card Sorting!

Card sorting is a common technique used to gather input from representative audiences about how they think about your information. Traditionally, participants are given cards representing pieces of content (or sections of your website) and asked to organize those cards in a way that makes sense to them. The process can also take place remotely, using online tools, as we’ve detailed below. When re-structuring any website, card sorting is an important step to ensure that the new site structure is as intuitive as possible for visitors.

Preparation

To create the list of items (or “cards”) to be sorted, we used two inputs:

• A content inventory, which is a list of all content/pages on the site. The list is created in a spreadsheet which clearly shows the current structure of the site and which main section each item is currently categorized into.
• A list of the website’s audiences and their primary goals or tasks. This helps to ensure that every key task is represented by a content item in the card sort, and it is crucial for usability testing (which will be a later step in our process).

We ended up with a list of 47 items that represented key content from NTEN’s website. The list was then loaded into Websort. Websort provides virtual card sorting, allowing participants to drag and drop cards into categories, then label those categories.

(more…)

Web analytics is usually left to marketers looking to fine-tune shopping carts, hone in on AdWords, track campaigns, and conduct a whole bevy of marketing tasks. Creative-types and IA folks don’t always dive into this kind of data. But when a site is undergoing a creative or architectural facelift, it is the perfect time to dive into analytics and make the right decisions.

Creative Decisions:

Analytics packages can tell you a lot about the technology your audience uses. Some stats worth looking at include:

• Resolution;
• Browser;
• Flash Version;
• Java.

Are 75% of your users at 1024×768? Then maybe it’s time to break out of that limiting 800×600 design. Do 30% of your users still in IE6? Avoid transparent images. 5% of your users don’t have Flash or Java? Make sure you offer alternatives to that nifty Slideshow on the homepage (which you should do anyway, but that is another post for another day).

(more…)

Recently, there’s been a proliferation of url shortening services, driven largely by Twitter’s 140 character limit and the need to keep links as short as possible to fit in your tweets.  They are run on websites with names like bit.ly and tr.im, as well as the classic tinyurl.com.  As a user of the internet, I have a serious dislike of these cryptic little URLs, and I went searching to find out if they came with other problems I hadn’t thought of, especially problems for SEO.  It turns out that they’re not as bad as I suspected, but they do have some serious downsides (some even say they’re evil).  If you’re trying to make a name for your nonprofit in social media, these are issues you’ll want to watch out for.

Shortening urls provides some important benefits to the person sharing the link, which is why they’ve become so popular.  Aside from taking up less space (thus making them more tweetable), many of the services provide tracking data, giving you details about how your content is being used.  That can be really fun for the casual user, and valuable for organizations.  Some people think they look tidier than long urls.

But there are two (or maybe three) other parties affected by the shortened url, and they aren’t so well served by it. (more…)

Step 1: Take 6 interesting blogs about technology and non-profits

• NTEN Blog
• Gavin’s Digital Diner
• Confessions of a Non-Profit Executive Director
• Wild Apricot
• Michael Stein’s NON-PROFIT TECHNOLOGY BLOG
• Zen and the Art of Nonprofit Technology

Step 2: Aggregate them all via a Yahoo! Pipe

• The Pipe (feel free to clone)
• The Pipe’s RSS Output

Step 3: Consume the feed with Wordle

Step 4: Mess around with screenshots in Photoshop for 15 minutes because people still hate Java Applets

I visited Barack Obama’s website yesterday looking to find his “Blueprint for Change” to convince an undecided voter (yes, they really do exist!) to vote for him. I guess I haven’t been on his site much in the last few months, though, because the clean, crisp design I remember seems to have been replaced by a Christmas tree that’s staggering from the weight of too many departmental ornaments. Not only has the homepage height been slowly increasing, with inclusion of more widgets along the righthand side, but top of the homepage has been crowded with so many calls to action, some are literally on top of each other.

Here’s a screenshot of his homepage above the fold a few months back (via nowitis):

And here’s a screenshot of the same from today:

Notice the difference? Analysis of how the space is used, and lessons for your nonprofit, below the fold…

(more…)

I’m the guy here at Beaconfire that, more often than not, codes the HTML pages that turn your elegant, professional, or enticing new site design into dynamic, active, enticing Web pages. It’s what happens between the designer working in Photoshop, and our crack development team building the site in whatever CMS you’ve decided to go with.

I love coding pages. Each design brings with it new challenges and figuring out how to bring the collaboration between the client and design team to glorious click-able life is always fun for me. As Web design continues to become more mature and sophisticated and the technologies available to us become more dynamic and interactive, this job just gets more and more interesting.

Lately, most sites that we’ve designed, built, or both, have called for some sort of “flyout” navigation (American Legacy, Bronx Zoo, Bread for the World, AFSCME). An aside: some people call this kind of navigation “dropdowns,” but I feel that suggests that a click might be involved (as in dropdowns in online forms), whereas the the word “flyout” more specifically describes something that appears when you simply move your mouse over an object. So for the purposes of this post, I will now dispense with the quotes around the word and just refer to flyouts.

(more…)

It’s easy to take web conventions for granted, like the fact that the logo links to the homepage, and is featured at the top left. Often, when we put our recommendations together, we put some basic information in about what should be where. Because our suggestions often reflect well-worn conventions, our clients accept them.

But once in a while, a client will ask the unthinkable: “How do you know that is the right thing to do?”

When this happens, you need to be ready to explain yourself, or you look like you are Just Making Stuff Up. Recently, one of our clients asked us about the search box – “Where should the search really be placed?”

In addition to our experience doing user testing (where we get to see people responding to various designs in real time), we look to studies like this one from SURL, and then look to build on our knowledge through documented experience where possible.

The SURL study shows the areas that the user looked to find internal search on a site, both for new and experienced users (the darker the area, the more likely a user looked in that area of the page).

Additionally, we can find case studies like this one (pdf), which walks through one site’s search change and the results. It shouldn’t be surprising that their efforts, moving the search box to one of the key locations identified in the SURL study, produced results.

So there you have it, for the search box anyway. Next up… well, what do you want to know about?

It’s no small task to wrangle a website and its resources in one language – let alone multiples.  If you’re taking the time and making the effort to post multilingual content, you’re creating potentially valuable assets for your users around the globe.  You want to make sure that the content is represented accurately and is accessible. 

Recently one of  our clients asked us to weigh in on the presentation of multi-lingual content on their site – an organization with members around the world that produces publications, trainings and other web-specific content in a number of languages. The client wondered how to present the information in an accessible and useful way to their users.

While not an exhaustive list, these points can serve as a backbone for your multilingual content presentation.  The first distinction to make is whether the site is fully mirrored in multiple languages or if it is presenting a limited number of pages.

If the full content exists in multiple languages, providing tabbed navigation to each language (with the full built-out resources under each) is an effective presentation. The International Center for Journalists’ IJNet site does a good job of this. When you click a language tab, the entire page content and all navigation swap out to the language you’ve selected. You don’t want to promise more content than you can deliver, though, so be careful of setting up a parallel nav structure and re-directing users back to English content for non-translated content.  The effect is jarring and, frankly, inconsiderate.   

If your multi-lingual content is limited, you want to make sure you don’t portray the fact that when you click on a language, you’re getting the same content in another language. Presenting a limited number of resources is best handled by directing users to “Resources in…” (or Pages in or Materials in – whatever works best for the audience). A user can then click through to a landing page that aggregates the non-English content by type.

Link placement on the page is critical. Links to multilingual content (even if it’s not a full parallel site) should be displayed prominently and placed above the fold. Providing content in multiple languages takes a significant investment of time and resources. And if you are making the investment, you most likely want to showcase the international consideration and reach of your organization. What you don’t want to do is force users looking for non-English content to hunt around the homepage to find the link, effectively negating the time and energy you’ve put behind developing these resources.

The visual and functional treatment of links is vital as well. The easy one first, you don’t want to use as the visual representation of languages. While they may provide a dash of color, flags represent countries, not languages. What flag would you use to represent Portuguese language content – Portugal or Brazil? Don’t even get me started on the options for Spanish language content.

Another bad idea… including a drop-down menu with language choices. This treatment does save space within your page layout but it creates a challenge for languages that are character-based such as Chinese, Japanese and Korean.

While listing out each of the language options in their “native” spelling may take more space, it allows non-English reading users to identify their preferred language easily. Also, displaying each content language also serves to showcase your organization’s commitment to international audiences.  InfoComm currently does this on their site.    In addition, to ensure they appear correctly you should use images for the nav items, as opposed to text based labels, to ensure that the labels display as intended. Most computers can handle all language characters but some cannot.

Where should limited multi-lingual resources live on the back-end? I’d suggest they live in the file structure with the parallel English pages. That way, the file structure makes sense in terms of linking and, if (when!) the content grows to a level where a parallel or sub-site can exist, it will be easy to find & identify the resources.

If you are presenting multilingual content, Kudos!  If you’re considering it, bahati njema, Bonne chance,  Buena suerte, Danke, Good luck, Lykke til, Sretno and Желаю вам удачу!