For the first time in a while (or perhaps ever), my husband asked me for some ideas for a Web site. Excited to offer my professional advice, I started spouting ideas. “And then, to top it all off,” I said with a gleam in my eye, “you can make a widget.”

“A what?” he said?

“You know, “ I said, “A widget.”

But he didn’t know. I had ventured into that underworld of web jargon.

Most of us were introduced to the widget in our fourth grade math class: If one person at a factory can make 30 widgets in an hour, how many widgets can a factory that employs 3 people make in the course of a standard work day.

To those of us in the web business, a widget is a kind of mini-web application that can be easily distributed to any Web site. If you’ve got a petition campaign, and you can give your blog some code so that the campaign appears on their Web site, then you’ve got a widget.

But if our fourth grade widget factory can make 720 widgets in a day, it takes just a little bit longer for web developers to make just one. One mistake common mistake when it comes to widget design and development it to toss the widget aside as I kind of “mini-me” to the Web site, and assume it does not need much more in the way of design or development than the original application. But its tiny size can sometimes be a huge hurdle. Here are some things to consider when making a widget:

• Widgets come in all shapes and sizes. Make sure actions can fit in the space that a widget allows.
• Since your widget is a minified version of your larger web application, make sure you shrink any necessary elements (such as your logo).
• Put tracking in place so you can tell who your best promoters are.
• Widgets aren’t magical – if you want people to use your widget, you have to promote it.

Don’t treat your widget like an afterthought. If you put the time and effort into its layout, design, and functionality, you’ll have increased your reach faster than it takes three employees to make 500 widgets!

If you’ve worked with site accessibility before you’re probably familiar with skip navigation. Skip navigation helps visitors ’skip’ to different parts of the HTML page to quickly get to the content they need. The most frequent use of skip nav involves jumping a page’s primary content, so users don’t have to revisit repetitive header, navigation, and other global content on recurring pages. Typical HTML markup looks something like this:

HTML Code

<div id=”skip-nav”>
<strong>Shortcut Navigation:</strong>
<ul>
<li><a href=”#content” accesskey=”p” title=”Skip to page content”>Page Content</a></li>
<li><a href=”#nav” accesskey=”n” title=”Skip to main navigation menu”>Site Navigation</a></li>
<li><a href=”#search” accesskey=”s” title=”Skip to search”>Search</a></li>
<li><a href=”#footer” accesskey=”f” title=”Skip to footer (ctrl/alt + f)”>Footer</a></li>
</ul>
</div> <!– end skip-nav –>

Most often, skip nav is hidden from visual users by shifting the content outside of the page viewing area (be sure to use a positioning property as display:none can render your content invisible to some devices). In this way traditional users who can scroll to what they’re after aren’t burdened with extra visual cruft while visually impaired users can jump around to the content they want.

Unfortunately, this approach ignores a number of different users. For example, skip nav could also be useful to sighted users who are unable, or simply choose not, to browse with a mouse and opt for a keyboard or other assistive device. Unfortunately, hiding this content off of the viewing area can create confusion.

One way we can improve this implementation is by using JavaScript/jQuery to display the content when it receives focus. This way we’re being accommodating to non-traditional users while still preserving the aesthetic integrity of the site.

The Plan

To do this we’ll test if any of the skip nav links have focus, and if so, show the container. We’ll set a timer that checks every 100ms to confirm a skip nav link still has focus, and if not we’ll run a function to hide it.

The JavaScript

Because only the links in the container can receive focus (at least without tweaks like tabindex) we’ll use their status to control when to open the container. So:

1. If a link receives focus add class nav-focus to the link, animate the container and give it class active.
2. Use setTimout to test if nav-focused no longer exists, and if so, close the container(use this instead of focusout to keep the container from closing when switching between links)

That’s the logic, here’s the demo beaconfire.com/blog/demo/skip-nav/.

To add it to your site add the HTML to your page and skipNavigation('name-of-container-id'); to your jQuery documenty read function

One last issue concerns the possiblity that JavaScirpt is turned off. A good habit is to use JavaScript to initialize elements rather than having default behaviors baked into the CSS. We’ll remove the CSSthat hides the skip nav, and do it with JavaScript.

$('body').addClass('js');

Now the following code hides the skip nav only if JavaScript is available:

.js #skip-nav {position:absolute; margin-left:-9999px;}

Note: This concept is based on a CSS based promoted by jimthatcher.com/skipnav.htm

When it comes to slideshows on Web sites, you’re pretty much got two choices: Adobe Flash, or JavaScript (which for the purposes of this post we are no going to call jQuery*).  Up until the last year or so, the only way to deliver the level of sophistication required for slideshows, has been with Flash.  Increasingly though, we are recommending the use of jQuery over Flash for the majority of the slideshows that we make as  part of our site designs, and are even being asked to convert existing Flash slideshows to jQuery .  First things first, though, what is Flash and what is jQuery?

Flash

The best way to think about Flash – for the purposes of this discussion – is as a bit of magic, included on a Web page just like an image, that can do all kinds of really cool animations, transitions, play sound and movies, and nearly display nearly identically on nearly all browsers that have the flash plug-in installed.

Flash has been around for quite a while and has a very robust set of tools (made by Adobe, and formerly by Macromedia).  It has been used to create the sites, movies, slideshows, or multimedia players, that you see on millions of Web sites.  For the sake of this comparison, I am going to talk specifically about slideshows that are created in Flash compared to those using  jQuery because that is the vast majority of the Flash that we have traditionally used in our projects.  And ’cause that’s what this post is titled.

Flash Advantages

• Great looking fonts
• Smooth, complex animations
• Robust development tools

jQuery

You may have noticed that I have referred to “slideshows created in Flash” and “slideshows using jQuery.”  This is a fundamental difference between the two.  While Flash is an embeddable object created in a specific application, jQuery is a JavaScript library that can add a bunch of really neat-o functionality and effects to elements that already exist on the page. This means that you have HTML, and then on top of that, you have jQuery making that HTML jump through all kinds of hoops, sit, roll over, and even sometimes, though hopefully not often: play dead.  jQuery is JavaScript, which means that some experience with the ubiquitous scripting language is going to make things much easier.  There are hundreds of plugins which exist as additional JavaScript files along with the HTML they need to act on that you can simply copy and paste in to your web page to add whatever slideshow you want.  Many of these existing plugins slideshows have comprehensive documentation that even those without lots of experience with JavaScript can follow.  Basically, if you know your way around HTML and CSS, you can figure out how to at least use jQuery.

The jQuery library can either be downloaded from the jQuery Web site, or you can link to hosted versions from jQuery, Google, or Microsoft. I tend to use the Google-hosted version because it is very popular and likely in use on many other sites. Because of that, if your visitors have previously visited a site using the same linked library that you do, their browser will not have to download it again and you’ll save the 150-ish KB of download that the library requires.

jQuery Advantages

• Generally smaller, and quicker (150KB+ though, for the main library)
• Less time to create, very simple to manage
• Superior accessibility and findability
• Works on iPhones
• Free

Picking One

There are many questions to consider before you when even decide to use a slideshow (see “Parting Shot” below).  I’d say that, if you do decide to add a slideshow to your page  jQuery will be the best choice in 98% of cases.  It offers most of the abilities of Flash (depending on how adept you are at JavaScript) and has the added advantage that it is used to animate images and text that already exist in the page.  This is of monumental importance to search engine optimization, accessibility, and cross-browser/cross-platform support.  That your images and text already exist in the page means that it is basic content that you manage in your authoring system.

Even if a visitor has all styles and JavaScript disabled in their browser** the content contained in your slideshow will be present for them to see (albeit in a way that may break the beautiful layout of your page which is already the case if they have styles turned off).  This is the essence of accessibility: that all content on your page is available to all visitors regardless of how they access your page.

There is no cut-and-dried answer to the question “Flash or jQuery,” though I’d argue that in the limited scope of slideshows jQuery has a decided advantage.  In the end it really depends on what you are trying to communicate, to whom you are trying to communicate it, and how you want it to look.  If you want to be able to use any beautiful font available to your designer, utilize sophisticated transitions (though jQuery can match much of Flash’s capabilities in this regard), ensure that your slideshow works on all browsers with the Flash plug-in installed, and don’t need to support iPhone users, then Flash may be your best bet.  If you are, however, willing to limit your font options, want to be sure that your content is available to all users, on all browsers, regardless of platform, and are willing to limit slightly the sophistication of transitions and animations, then jQuery is the clear winner.

Parting Shot

And that brings us to the end, but I simply cannot leave without a final parting shot regarding putting  a lot of time and money in to designing and developing a slideshow.  I, and others in the office are looking with an increasingly critical eye toward the effectiveness of using slideshows at all to highlight important information.  A too-cursory review of too-few site analytics begins to suggest that very, very (very!) few visitors see more than the first slide of any slideshow; Even fewer engage with the sideshow controls (if present, to move forward, back, or pause);  And fewer still click on any links found on slides beyond the first.  Do not assume that the third, or even second, slide will get any attention at all.

One of the drawbacks of many new interface options presented by Flash or jQuery (or any of the other JavaScript libraries out there) is that they have offered an easy solution to a very old problem: gigantic homepages where every department in an organization demands a presence.  Similarly to simply adding more and more content to a homepage until visitors have to scroll tens of screens down to read it all, we are now asking visitors to engage more and more frequently with tabs, slideshows, accordion widgets, and more to access the same “too much content.”  Have we just shorted the all-too-important conversation about focusing an organization’s message and simply allowing “all of it” to go on the homepage?  And what about people who don’t or can’t use these new widgets? Perhaps another blog post?  I nominate Jo!

** Chances are pretty good that if styles and JavaScript are disabled in a browser, so is Flash.  If your slideshow reads its content from an XML feed, the path to which you define in the JavaScript call to the Flash object, your slideshow will not work even if Flash is enabled but JavaScript is not.

While the ability to innovate with technology and create interesting and interactive elements on a site has progressed, a recent post on UseIt.com shows the amount of time we have to capture a user’s interest has not.

One site, which was tested using an eye-tracking study, demonstrates how a slow-loading promotional banner plus a large number of widgets on the site, create confusion for the user rather than the engagement opportunities that were intended.

Long page load times can cause user drop-off

When you think about your own site, what do you know about the load times — and the corresponding distractions that might result from slow-load times? The UseIt article gives some helpful guidance on how to get at those questions.

If you don’t read the full article, here’s a helpful tidbit:

…  From UseIt.com ….

The 3 response-time limits are the same today as when [Jakob Nielsen] wrote about them in 1993 (based on 40-year-old research by human factors pioneers):

0.1 seconds gives the feeling of instantaneous response — that is, the outcome feels like it was caused by the user, not the computer. This level of responsiveness is essential to support the feeling of direct manipulation (direct manipulation is one of the key GUI techniques to increase user engagement and control).

1 second keeps the user’s flow of thought seamless. Users can sense a delay, and thus know the computer is generating the outcome, but they still feel in control of the overall experience and that they’re moving freely rather than waiting on the computer. This degree of responsiveness is needed for good navigation.

10 seconds keeps the user’s attention. From 1–10 seconds, users definitely feel at the mercy of the computer and wish it was faster, but they can handle it. After 10 seconds, they start thinking about other things, making it harder to get their brains back on track once the computer finally does respond.

A 10-second delay will often make users leave a site immediately. And even if they stay, it’s harder for them to understand what’s going on, making it less likely that they’ll succeed in any difficult tasks.

Interesting stuff.  Check out the full article here: http://www.useit.com/alertbox/response-times.html

It’s spring, and that means it’s time for spring cleaning.  You’ve already cleaned your house top-to-bottom, right?  (I haven’t, but I assume you’re much more organized and motivated than me, so you’re probably already done!)

Just like your house, your website needs a little special attention sometimes.  There are things you need to do once in a while to keep it performing its best.  Depending on your needs, you might want to do these quarterly or yearly, but you should check up on them at least once a year and make sure everything looks good. It’s not sexy or exciting, but it will help keep your website running smoothly. And now is the perfect time to get started.

• Clean up your email database. Most eCRMs give you tools for cleaning and de-duping your email list. No matter how you import supporters to your database, over time, you’ll end up with some bad data as people move, change their email addresses, or accidentally create duplicate records when they take actions on your site. Get rid of bad data, and consolidate your duplicates as much as possible. This is a big task, but it’ll give you more accurate metrics, improve your spam reputation, and reduce the chances that you’re bugging people with multiple copies of your messages.
• Update outdated content/actions. Take an hour and browse your site with fresh eyes. Are your news stories recent? Do you still have a promo, buried on your subpages, for a campaign that finished a year ago?  Is the contact information up to date? What about that little typo that bugs you every time you visit the site? Set aside time to find and fix these little errors – over time, they can really pile up.
• Fix broken links. Link-checking can be fast and easy.  There are many tools to scan your site and identify bad links, both within your site and to external sites.
• Look at your 404 pages. While you’re at it, take a look at your 404 (Page Not Found) errors. Your analytics tool can tell you what missing pages people are trying to visit, and where they found them.  Maybe Google is still indexing old content, or another site has a link with a typo. Some of them, you may be able to fix.  This is also a good time to look at the content on your 404 page itself. Are you providing useful information to help visitors get where they wanted to be?
• Check your “hidden” content. Welcome messages, autoresponders, donation forms, error text… all this content is “out of sight, out of mind” when you’re running a website day-to-day, but it’s very present for many of your visitors.  You know that good Thank You messages are critical for engaging new subscribers and first-time donors, but when was the last time you took a critical look at your default messaging?
• View your site in new browsers. Unless you just redesigned your website, there have probably been new versions of some major browsers since it was developed.  Look in your analytics to see what browsers and versions most of your visitors are using.  If some of the new ones are on the rise, download them (or find a friend who has them installed) and spend a few minutes browsing the site to make sure everything looks okay.
• Test your SEO. Type the name of your organization into a search engine. Where do you rank? What does your listing look like? Do the same for a few non-branded keywords that describe your org. Do the most relevant pages show up first?  Where do they rank?
• Review your site search. If visitors are having trouble finding something on your site, chances are they’ll search for it.  So reviewing your site search analytics is a great way to see what stumbling blocks users are finding on your site.  Not every search term that’s used will indicate a problem – but site search is the one part of your site where users tell you exactly what they’re looking for, and it’s worth paying attention.
• Long term reporting. Chances are there is some data you’ve been meaning to sift through.  How have your emails performed over the long term? What’s the churn rate on your email list? How are you doing on those important goals you set way-back-when?  Now is a good time to look into some of those questions you never got around to answering, or just to spend some time with your analytics tool and see what you find.

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

Beautiful fonts are one of the holy grails of Web Design.  Along with CSS-based equal height columns, better support for image transparency, browsers that all display pages the same (or at the very least the death of IE6), and a vending machine stocking drinks with higher caffeine content than Mountain Dew, the ability to use any font we want in a page design would make us (mostly) very happy indeed.

There is something to be said for sticking with a fairly limited set of fonts for the main content of your site.  After all, people actually have to read what we write and our usual set of fonts are nicely readable for the most part.  But when it comes to headlines we may want to use something a bit more elegant than Arial, Verdana, Helvetica, Times New Roman, or Georgia.

(more…)

Testing a Web site is a pretty big, and not often inexpensive, task. Cara already posted about some inexpensive tools for user-testing wireframes. But for your design, there’s an opportunity to go even lower-budget than that.

To do testing truly on the cheap, there is a new tool called fivesecondtest.com. It’s a way to test designs in five seconds or less. You upload your design, and then you can either invite specific users to test it, or you can open your test to the entire 5 second community. You have the option of creating memory tests or click tests. And as the name suggests, a tester looks at the design for five seconds, letting you know what items stand out on the page.

Of course, this is a very simplified approach. There is no task-based testing. As the site states, the tool is meant to “help you easily identify the most prominent elements of your user interfaces.” Nothing more, nothing less. And if you open up your design to the entire five second community, you’re likely not getting results from an average-joe user, but usability and design experts.

There are some paid plans that allow you to do some more sophisticated testing. But if you’re budget is beyond tight, it may be worthwhile to just upload an image and see what the testers say.

We all know that testing your wireframes to make sure your priority audiences can complete key tasks on your website-in-progress is a good idea – but is there an inexpensive way to do it? I was alerted to an online tool yesterday that can help you conduct tests quickly, easily and inexpensively, too.

Optimal Workshop’s Chalkmark (http://www.optimalworkshop.com/chalkmark_alt.htm) makes usability testing a snap. First identify the tasks you would like your audience to complete. Next, upload the image of your wireframe. Invite your audience(s) to participate and then wait for the results to roll in. The test results are returned in the form of a heat map (see image). You can immediately see where people chose to click on your wireframe to complete the task you put forward. Of course Chalkmark can’t give you all of the information you would get from true wireframe prototype testing, but if budget is a concern, some information is better than no information. And feedback directly from the audience your site is trying to reach? Priceless.

chalkmark heat map

A couple of months ago, I was frustrated with several academic journal websites which did not have the necessities of web 2.0 sharing features which can make their site useful to the new generation of scholars.  The suggestions I gave centered around adding “share this” or “add this” functionality that would allow site visitors to add a link to their delicious bookmarks, share it with their friends on facebook or twitter, or possibly send to a friend via email.

These changes are institutional and my message mostly fell on deaf ears. One did get back to me and asked if I could help them as part of their student volunteer staff. We’ll cover that in another article.

The problem of adding such functionality is that it can be a chore if the content itself is not ready for sharing. For example, PDFs are never good material to link to on facebook, because they won’t create a nice looking story feed item. Pages that don’t have images won’t look nice either. Apart from cosmetic errors which can be a hurdle to success in implementing these simple tools, time and effort are always a problem for busy organizations.

There is an easy solution provided by wibiya. They offer a way for anyone that publishes content to add an interactive web 2.0 toolbar which sits at the bottom of your webpage no matter where a user is on your site. Similar to the “Start” bar in Windows and the “Apple” bar in Mac OS, this utility is very useful.
Although it integrates with Blogger, Wordpress, Typepad, and any website well, the best feature I believe is in it’s ability to create a Facebook community.

What does Wibiya say about itself?

“Wibiya enables blogs to integrate the most exciting services, applications and widgets of their choice into their blog through customized web-based toolbars.
Our platform offers a one-stop solution for integrating, managing and tracking third-party applications.

Currently we offer a fixed set of tools such as creating a blog community via facebook connect,
enabling twitter alerts on your blog and enabling post navigation but there is a lot to wait for as we will be adding more and more application through time.”

I hope you have time to evaluate if this is a useful tool for your organization. It could save you more time and money than you expect.

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…)

The iPhone is arguably the most advanced piece of technology commonly found in people’s hands these days. It has a GPS to tell you where you are. It has a phone to let you communicate with people. It has a multi-touch LCD screen that lets the user use the device with no more and no less than one button. The iPhone is a computer … with the Internet. Ten years ago, try to imagine describing to someone what an iPhone does and they’d think that you were talking Sci-Fi. Well, folks, as much as people like to deny it, Science Fiction becomes reality every day in our world.

Jules Verne could see us going to the moon, and John F. Kennedy  actually pushed our country to do it. Star Trek could see us using tri-corders, and Motorola created it as the first cell phone. In my opinion, the iPhone, it’s market of applications, and growing user base is the best way to gain access to and interact with information. It also helps you get in touch with people, but I think face to face is the best way to interface with other humans.

Over the course of my trip to New York City this weekend, I realized exactly how valuable my iPhone is. When I got off my bus at 31st Street and 7th Avenue, I wanted to use my gym membership at the sports club. I went online on my iPhone, looked up the nearest 24 hour gym in their network, and copied and pasted the address into the Google Maps application. In about 2 minutes, I was on my way. After I arrived and couldn’t get into the side of the building which was advertised, I looked up the phone number online, gave them a call and got in. That’s convenience.

The sports club’s web site is not optimized for the iPhone, but since the built-in Safari Browser is a full-fledged browser, I was able to navigate with some effort and get what I needed. If the web site was actually created for the iPhone, it would have saved me some time from zooming in and out, panning left and right to get around. If they had an "app" for that, I might have been able to log into it with my account and it would have been geo-location aware of where I was and tell me the nearest branches of the club. Why don’t they create an "app for that"?

This is all possible and contradictory to popular belief, the functionality that I just described doesn’t have to be developed as an iPhone Application. Much of the functionality can be created in HTML as a web application and placed on the Internet. Google has done a great job by making all of their applications as iPhone friendly "webapps" which behave like iPhone applications.

Recently, some plugins have been released to make your WordPress blog iPhone friendly. Available at Brave New Code, the WPTouch Mobile Theme and Plugin for WordPress takes your standard WordPress blog and makes it look, feel, and behave as an iPhone application with nice transitions.

Static Content Sites

Many organizations have also released informational web sites in a handy, iPhone friendly format. Their sole purpose is to disseminate information. Web Apps such as the Athens Tourist Guide :  and Pocket Cambridge : are basically lists and tables of static HTML that look nice on an iPhone or an iTouch. Do you have information that can be useful to iPhone users? There are some really easy ways to get it out there.

1. iWebKit – “Iwebkit is the revolutionnairy kit used to create high quality iPhone and iPod  touch websites in a few minutes and is based on an LGPL license. In the first 4 months of it’s existance the pack has greatly evolved from a basic idea to a project that has reached worldwide fame!”

2. iUI – It has the following

1. Create Navigational Menus and iPhone interfaces from standard HTML
2. Use or knowledge of JavaScript is not required to create basic iPhone pages
3. Ability to handle phone orientation changes
4. Provide a more "iPhone-like" experience to Web apps (on or off the iPhone)

Dynamic Content Sites

Do you have programming ability or resources which you can utilize to push out your content from your organizational and institutional databases? You can probably use the aforementioned tools in conjunction with dynamic server side languages, but you might want to look into the following options to make your life easy.

1. ComponentOne iPhone Studio – ComponentOne’s studio is a rich set of ASP.NET Server Controls which is beyond compare when it comes to giving you a competitive advantage in creating dynamic applications fast. Some of the included server controls are : Calendar, ViewPort, CoverFlow ( Like the iTunes record browser ), and MultiView ( like the Photo explorer in the iPhone Camera application ).

2. iWebKit for Grails – This plugin provides integration with iWebkit, a powerful User Interface Library for Safari development on iPhone. By using this plugin, the grail developer will have an iphone web app skeleton (CSS and javascript) but also a extended tag library helping in creating iphone web pages in an easy,clean and fast way. If you are a Java developer or your company has them, and have gotten the hang of Groovy, this might be the path for you.

3. iUI with Asp.NET – iUI is very simple and some people have taken some steps to create their own integration for ASP.NET and iUI. This page points you to some third party resources which may be helpful for you in creating dynamic iUI applications.

Possible Scenarios and Tips

How can you capitalize on the iPhone and iTouch user? Here are some ideas which may work out for you.

1. If you have a Calendar of events, you can add iCalendar format links which can let users download the event data and add it to their iPhone Calendar.

2. If you have a location or event search which requires an address or a zip code, you can use W3C’s Geolocation API which is supported by the built-in Safari browser on iPhones.

3. If you have a member’s only directory, you can create an interface which can list people’s information as well as publish their contact info in the vCard format so that they can add it to their contact lists.

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…)

I’m very pleased to announce the release of Beaconfire’s new white paper – Is Multivariate Testing Right for You? A Guide for Nonprofits.

We’ve become big fans of multivariate testing (MVT) as a powerful, flexible, and often under-utilized way to optimize websites based on real users’ behavior.  We’ve also seen nonprofits gain insights through MVT that would have otherwise been difficult or impossible to learn.  It’s a great way to learn what drives your visitors to get involved or donate through your website, and can be applied to support almost any of your online goals.

This white paper is a guide to understanding just what MVT is all about, what’s required to take advantage of it, and whether it’s a good fit for your nonprofit.  You’ll also learn how the optimization process works, from planning to analysis, and how to get started with an MVT program that meets your needs.

The paper is available for download now at http://www.beaconfire.com/mvt.

This is the second article in a series on usability. Read the first article.

It was inevitable – my bracket has been decimated. But managing brackets in four different applications, I’ve learned that not only do I have no knowledge of college basketball, but also how to take Bracketology to a whole new level.

An NCAA tournament bracket needs tells you a lot in just a little bit of space. It needs to convey information about teams, regions, game details, and other news. And it needs to do it 64 times (65 if you count the play-in game).

So let’s set our monitors to 1024×768, and see how the final four perform.

(more…)

It’s the most wonderful time of the year…if you’ve ever painted your face your school colors, or stuck a pom-pom in your hair, you know what I’m talking about. It’s March Madness, baby! (Otherwise known NCAA Division I Basketball Chapmionship). And that means it’s bracket time.

This year my team (GW) did not make it into the tournament. Still, I’ve got my bracket ready, and the pools are awaiting my dominance. I have created and/or have been invited to participate in pools by enough people that I’m actually using four different systems. And putting together my bracket of winners turned out to be more frustrating than I thought. Some of the companies that put together these brackets are multi-million dollar conglomerate corporations. You’d think they should be able to get usability, right?

And thus was born…THE MARCH MADNESS OF USABILITY. I’ll compare some of the top tournament sites to see what usability lessons we can glean. The sites I’m using this year include Yahoo Sports, CBS Sports, Facebook, and ESPN.

Today’s topic: Registering

(more…)

Does your site scream out, “I haven’t changed my image since 1995!” Or maybe, your pages are plagued by lengthy copy that just keeps going and going… Perhaps your web presence just doesn’t really reflect all the great work your organization does.

If you happen to be in Portland, Oregon next Tuesday night, Feb 24th, and have a website in need of some TLC, come to the NTEN 501Tech Club and Net Squared MeetUp to problem-solve cures for the “common” website. Yours truly, Beaconfire Creative Director Eve Simon, will be leading the discussion. See you there!

Answer:  Multivariate Testing (or MVT)

So what is it?  According to Wikipedia:

…multivariate testing is a process by which more than one component of a website may be tested in a live environment. It can be thought of in simple terms as numerous split tests or A/B tests performed on one page at the same time. Split tests and A/B tests are usually performed to determine the better of two content variations, multivariate testing can theoretically test the effectiveness of limitless combinations…In a nutshell, multivariate testing can be seen as allowing website visitors to vote with their clicks for which content they prefer and will stand the most chance of them proceeding to a defined goal.

Two Beaconfire staffers, Shiloh and Jo, recently won our Leadership & Innovation Award for their work on MVT, and I had the opportunity to sit down with them and find out more about it.

(more…)

A group of association executives from a variety of organizations joined Jeff, Amy, and me last Friday, November 14 at the Greater Washington Board of Trade to talk about web usability testing and how it can improve the online member experience.

After a short networking reception and introductions, Amy, one of Beaconfire’s information architecture and usability consultants, led us through a brief discussion of what usability testing is and why it’s used.  Often, when organizations are designing or redesigning their Web sites, the focus can end up being primarily internal.  That can result in a site that makes sense to association staff but is incomprehensible to members and other constituents.  Usability testing shifts the focus to the user to ensure that your audiences can find what they’re looking for and accomplish what they want to do online.

Amy recommended that usability testing should be a continuing process throughout the entire development and design project to keep the new Web site on track.  Organizations sometimes skip usability testing because they fear it will be too costly.  Amy dispelled that myth by sharing a general rule that, while well known among information architects, came as a bit of a surprise to the session participants:  you can find 90% of the problems on a page with only five testers.

That said, there are a number of factors to consider when engaging in usability testing:

• Where are you in your process?
• What’s your budget, not only in terms of money but also of time and staff resources?
• Who are your audiences?

Amy and Jeff then walked through the various types of usability testing Beaconfire recommends, ranging from heuristic analysis, in which a small number of experts evaluate the Web site against a pre-determined set of usability criteria, through card sorting, which can be done face to face or online, into wireframe prototype testing and even post-launch function testing on the live site.

Amy then led two volunteers through a live wireframe prototype testing exercise both to demonstrate to the participants how usability testing works and to show how much can be learned just from asking two different people to try to accomplish the same task on a wireframe site.

For more information about usability testing, check out the presentation from Friday, read the BFWire interview on usability testing with Amy and Brad, another member of Beaconfire’s functional analysis team, or feel free to contact us to discuss your needs.