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 Желаю вам удачу!