Usability

Designing for the Mobile Web

I have a little secret to share about designing a mobile website... it's easy! As you may have heard, more and more folks are accessing nonprofit sites, taking action and even donating from mobile devices. With rushed end-of-year giving season coming up, it's more important than ever to stake your claim on the mobile frontier.

At Convio Summit, our Art Director, Michael Chang, and I led the Mobile Homepage Design Slam session where we developed some mobile homepage layouts on the fly for audience volunteers. We outlined and demonstrated a simple 5-step process for mobile design:

It's obvious that we need to be even more succinct and direct with a mobile website due to the lack of screen space and the on-the-go nature of most visits. To achieve this, we recommend focusing your mobile web presence on one key message that you want users to take away from your site. This message is likely the same one you want to communicate on your regular website so a simple conversation with your organization's key stakeholders should get you where you need to be with this one. A great starting point for that conversation is filling in this mad-lib: "At [org name] we [verb phrase] so that [constituent group] can [verb phrase]."

2. Identify desired actions

In that same stakeholder conversation, you'll want to discuss the key things you want people to do on your mobile website. We've found it's best to limit the number of actions to 5 and to prioritize your list so that 1 action can take center stage. Think about what people are most likely to do when they're out and about such as donating, searching for something nearby that's relevant to your cause or responding to an action alert.

3. Develop sitemap and allocate real estate

Armed with your key message and list of key actions, it should be a no-brainer to develop a sitemap. Your mobile sitemap needs to be simple with few tiers to navigate through. For nonprofits that may have a news-heavy or information-heavy website, it may also be important to provide a Search feature so users can access news items or other content that isn't part of your main mobile sitemap.

Your key message and key actions should also feed naturally into wireframes for your mobile site. As with everything else mobile, simplicity is key here - less is more! Some dimensions to remember for wireframes are the standard screen size of 320px X 480px and a standard button size of 44px X 44px.

4. Create design

When your wireframes are complete, overlaying a design on top of those should be a piece of cake. Your mobile website should share the same look and feel as your regular site so be sure to pull design elements from the main site to tie the two together. Your color scheme, logo and much of your imagery should stay the same.

5. Build and test

As you build the site, you'll want to be sure to include a browser detect script that can direct mobile visitors to your mobile site without having to click or type a distinct URL. Also, if it's possible with your hosting platform, you'll want to utilize the same content for your regular website as your mobile site so you won't have to make updates in two places. Many Content Management Systems, including Convio CMS, will allow you to create mobile-friendly displays for the same content so you don't have to duplicate things like news items throughout your site. Finally, be sure to check out your analytics data to see what the most common mobile platforms are for your visitors and test on those. There are a variety of online simulators out there that you can use to test it out so you don't have to have one of each device.

Well, that's it! Now there's no excuse not to start thinking about a mobile presence. If you'd like some more detail on how to get started with mobile, check out our Mobile Guide for Nonprofits. Also, feel free to share your own experiences with mobile design in the comments.

Bringing home the bacn

For years, the bane of every email marketer's existence has been staying off of the dreaded spam filter and staying in good graces with readers. But now, it seems there is another challenge facing email marketers, and it's worth your time to keep it in mind. Call it bacn, bacon, or graymail, it's that "other" kind of email - not personal, not spam - that's making it harder and harder to get noticed in an overflowing inbox.

Microsoft has recently announced that they are increasing their efforts to help filter out the cacophony in Hotmail. Not too long ago, Google also introduced a feature in Gmail called Priority Inbox, which has automatic classification of the importance of an email based on their criteria, but also allows users of the service to train the Gmail filter what is and is not "important", and higher prioritized, email. From Apple Mail to a half a dozen inbox monitoring services, there are all kinds of hurdles out there for email marketers to jump in order to stay not only off of the spam list but also on the radar.

The Only Constant is Change

There's not much any of us can do to stop the filtering systems and bacn overload that plagues email inboxes. Unlike spam filters, which seemed to have more specific rules to protect against malicious behavior, this is really about helping readers from being overloaded by the noise and missing the signals. Usable, consumable emails are more important now than ever. So what is an email marketer to do - especially one who is busy and stretched too thin already? To help facilitate the conversation about what you can do to get your email noticed, I've compiled a short list here of suggestions we offer all of our clients (with a few brief explanations of each), but would love to hear from you what you've found to be successful for your organization.

Mobile Matters

In the U.S alone, it's estimated that 35% of American adults use a smartphone. And, 87% of them are accessing the internet and email with these phones. If you look at your email on a smart phone, and there is any moment that you need to pinch, zoom, re-orient, or squint, it'd be wise to do a little tweaking to make it more consumable on the go.

Segment

It's not polite to categorize people based on just a little information that you know about them in person. But when it comes to email, there's nothing wrong with boxing people up. Segmenting your audience by using data you already have (or data that they likely will volunteer to you) is a great way to make sure you're sending the right information to the right people. You would never solicit major gifts from the $15 donor. Yet with email, it seems there's often a lack of clarity on the audience that results in blanket emails. This can be a turn-off to the over-emailed masses who don't want to guess whether the content in your email will have anything to do with their interests.

Increase your subscription options

Obfuscating unsubscribe opportunities won't get you in anyone's good graces. But, adding options for contact frequency can be a great way to help get readers to stay on your list and get the information that they want. Not everyone wants every alert that you send out, but giving readers an option to only receive one email a month, or only receive important action alerts, helps to encourage subscribers that you're listening, and you want to do something that's convenient for both of you.

Cut to the chase

The time users spend looking at email is getting shorter all of the time. Studies show that users are spending less than a minute on average glancing at newsletters, and that's assuming they open them to begin with. I don't expect everyone to pour through the 586 page study on email newsletter usability, but understanding a very small time frame for capturing a reader's attention is worth a thought. If you have an action you want users to take, make it clear. If you want to inform your constituency about an event, a disaster, or an injustice, it's best to get to it, and quickly. Sometimes you only have the 3 minutes before the waitress gets to the table.

These are a just a few things to consider. What else are you doing to help ensure that your email gets seen?

To App, or Not to App? That's the (Mobile) Question.

Last week at the Convio Summit, discussions of how to get started with mobile abounded. Mobile-savvy nonprofits inspired many of us with their interesting apps, from PETA’s mobile advocacy center to the Lance Armstrong Foundation’s collaborative BOOM app (in concert with Nike) to the Central Park Conservancy’s Insider’s Guide to the Park.

Sure, I’m as much of an app-aholic as the next smartphoner – even willing to pay for apps that deliver great charity content or interesting ways to get involved, particularly for causes I’m passionate about. Having just written a guide for nonprofits on getting started with mobile (co-authored with fellow Convian Lacey Kruger), I am also a realist with an argument to make, which is this:

Until your org has a strong, successful mobile-friendly version of your site available, offering a downloadable app shouldn’t even be on your radar screen.

To be even a bit more (kindly) cantankerous, I’d also say that any time you have a great new idea for an app, it’s worth contemplating first whether this service, or feature, or program could instead be delivered as a (non-app) mobile site.

Here’s the thing: Mobile strategy is, of course, tightly tied to your overarching engagement strategy, and it’s certainly a critical online channel (and as smartphone usage skyrockets around the globe, some are even predicting that mobile will become the online channel, surpassing desktop Web browsing). Despite this, an NTEN survey last year revealed that only 16% of orgs will have invested in a mobile version of their website in 2011, whereas 90% will have an email and social media strategy, and 19% will develop apps.

This means that nonprofits across the board are actively planning to drive traffic to their websites, their campaigns, their social media presences – without, in most cases, accounting for the fact that anywhere between 2% and 40% of constituents could be accessing their content and taking action on a handheld device. (For nonprofits with international constituencies, expect those numbers to be far higher in many countries.)

While mobile websites may not be as sexy as apps or sophisticated mobile engagement tactics like text-to-give, we consider having a mobile-optimized version of your Web presence and major campaigns or programs to be the foundation for effective campaigning – even effective email marketing.

My friend Lara Koch, whose full-time job at Humane Society of the United States is to own the organization’s mobile presence, has a policy on this: “If we direct people anywhere in a way they may use their mobile device, where we send them must be mobile-optimized. No exceptions.”

Bottom line: If your organization hasn’t invested in creating a mobile presence, but you’re thinking about campaign strategy for 2012, consider putting a mobile website foray at the top of your list. In many cases, you can develop a basic mobile site and optimize much of your content for mobile displays for $10,000 - $15,000, and then evolve your mobile presence iteratively over time, as you see how it performs and hear from your constituents. (For some contrast, developing a mobile app can run you $20,000 - $30,000 or more, considering the need to develop for multiple smartphone operating systems and browsers – and that doesn’t count paying for updates and iterations, provided that like most nonprofits, you don’t have an app developer on staff. And for mobile donations via iPhones and iPads, expect that Apple will take a 30% cut of your transactions.)

Wondering how to get started with mobilizing your main site, or a campaign or program? Or how to convince an app-happy exec to first pursue a mobile presence? Or how to even know if the investment will be worth it for your org?

Check out our Guide to the Mobile Web. If you’ve got an hour to spare next Thursday, October 20, I’d love to have you at a webinar on this very topic: Mobile Touches Everything. Or if you’re a mobile-ophile who just wants to talk shop, drop me a line!

Google Analytics - Site Search

This post is the fifth in an ongoing series about Google Analytics. As we proceed, I’ll share tips on how you can use this tool to gain more insight into your online marketing. I’ll start off with the basics, but then we’ll get into some advanced techniques.

If you’re not yet familiar with Google Analytics, it’s a free tool from Google that you can add to your site to give you information about how people are coming to your website and how they behave when they get there. Read the first post for an overview of the Dashboard and the second and third posts for a tour through some of the most useful reports around visitors & even more exciting reports about visitors and the fourth post on excluding internal traffic from Google Analytics reports

When you think of search engines, you probably think of Google, but maybe not Google Analytics. Your site probably has search functionality, so use Google analytics to track it.

Why should be interested? If you find things that people are searching for, maybe they need to be promoted more heavily on your site. People often browse individual websites and only search as a last resort (ecommerce sites are notable exceptions to this rule). Or maybe you use a different term for something than users do. If your site talked about a "put yourself on the pathway towards victory" program, but users often search for "buy a brick", then you maybe you need to add user-centered language to your promotions.

Most popular website search widgets are pretty easy to track through Google Analytics. To set up site search tracking, first, find your search parameters:

• Do a search on your site
• Look at the URL of the search results page. It will include something like ?query=stuff
• Query would be your search parameter
• Do a new search from the search results page
• The URL may now include something like ?q=things
• Q would be another search parameter

Next, go to your profile and click "Edit". In the top area, turn on site search, and enter your search parameters.

Now your profile will start collecting data on searches. Wait a few days or a few weeks, and then look at the site search report under the content heading. You'll now be able to see what percentage of visitors use search. Depending on the nature of your site, that might be a high or low number, but pay attention if it changes significantly over time.

Results page views per search is the number of pages people sort through before finding an appropriate link. The example below shows people view 2.65 pages before finding the right link. How many pages to you sort through on Google or Bing before you get frustrated? This report also tells you that 30% of people exit after searching and 9% refine their searches. A search refinement is when someone does a second search from the search page, as you tested when discovering your search parameters.

This data below shows that visitors might not be having a good experience with the search functionality. To see where the problem lies, look at what search terms visitors used on your site by clicking on "which search terms did visitors use" on the right of this page.

When you get to the report on individual search terms, you can see that some search terms seem to give more successful results than others. Item 4 in the list below has only a 7% search exit rate, while item #5 has a 67% search exit rate. Look at the search results for keywords like item 5 and try to figure out what they were looking for. This might be a case where people are searching for "buy a brick" and your page only refers to the program in other terms. Just adding a sentence with the words "buy a brick" to your program page could make those search results instantly more relevant.

Also pay attention to items like search term #1. What might those visitors be looking for and finding on page 4 or 5? If you use Google's enterprise search tool, you can manually adjust results for your most popular keywords. If not, try guessing at what pages would be relevant and adding the keyword to that page and perhaps even page title.

Yes, that's a lot of work, but doing that for the top 10 search terms with poor results might create enough benefit to be worthwhile, especially if some of the failed searches are around donation programs

Post a reply if you have seen anything interested through looking at your website's site search data! I'll be back next month with more exciting tips on Google Analytics!

In With the QR In Crowd

Earlier this summer, I attended the National Partnership for Women and Families (NPWF) annual gala lunch.  The organization was celebrating its 40 year anniversary and several very fabulous accomplishments, too.  The RSVP list was HUGE (I’ve never seen Washington, DC’s Hilton as crowded as it was that day), the menu was set (grilled chicken salad served on a bed of micro greens), and the speakers were confirmed (including First Lady Michelle Obama)!  There was just one problem:

The First Lady’s presence required all guests to be screened through a metal detector which meant long lines of event goers waiting around with nothing to do.

Have no fear! In the weeks leading up to the event, the smart minds of the NPWF staff were hard at work with a plan to not only entertain guests while in line, BUT add value to their luncheon experience with the use of a little technology. 

Here’s how it went down:

When I arrived at the event, I was presented with a ticket with my table number on it. There was a QR code printed on the ticket which, when scanned by my QR code reader on my smartphone, took me to a fabulous little site which included the seating plan for luncheon, the luncheon program, the video that was shown at the beginning of the lunch, and links to the NPWF twitter feed and Facebook profile.

I know what you’re thinking: I have no idea what a QR code is and that link to the Wikipedia article isn’t going to cut it.  So, allow me to take a moment to explain what I’m talking about.

QR codes, short for “Quick Response” codes, are similar to barcodes, but with more web savvy pizzazz. When scanned using an app for your smartphone, they automatically take you to a website, image hosted on the web, calendar invite, series of text, or other types of content. They make copying and pasting URLs unnecessary and the Convio team is all about ‘em!  In fact, my colleague Jonathan just posted something yesterday on this here blog about this fancy pants topic.  Check it!  I told you, we’re ALL about ‘em. And QR codes can be created really easily (and free of cost). There are a bunch of websites and mobile apps that’ll whip one up for you in seconds (check out this list for a few of the best).

So, back to my lunch date with the First Lady. The fun times I had on the NPWF mobile site kept me entertained while in line and enhanced my experience at the luncheon itself.  I knew exactly how to find my table in the sea of the ballroom, previewed the video so I could turn my attention to live tweeting when it was shown to the whole luncheon crowd, and connected me with two great social media outlets so I could share the experience with my 2,500 Facebook friends (yes, that’s right, I love Facebook). 

In addition to the QR code and mobile site, NPWF also had tons and tons of helpful and friendly volunteers greeting folks in line, answering questions, and keeping things moving while we waited.  This was another very smart tactic since it added a little human connection and positive energy to a situation that would otherwise feature masses of cranky, hungry event participants. 

I applaud the NPWF for their very savvy use of a QR code and a mobile site! 

So now that you have a good feel for how much I enjoyed the NPWF luncheon QR code, I thought it would be useful to discuss a few other tips to make use of these funky black and white squares.

Direct Mail: Consider putting a QR code on a direct mail piece!  USPS will even give you a 3% discount if you do so before August 31.

Membership Cards: Another great idea for QR codes is what Convio client WQED is doing -- they've put a QR code on their membership card so members can scan the code and go directly to a smartphone enabled site that has a listing of all the member benefits. So when folks are out and about, they can quickly and easily access that information.

Mix It Up: Get creative with where you put QR codes!  Here is an extensive list that was featured on the Nonprofit Tech 2.0 blog earlier this year.

Beware: Before you plaster your office with QR codes directing folks to a mobile optimized donation form, check out this helpful article on QR codes gone bad.  HINT: remember to test the code and link to sites that look good on smartphones.

To the Beltway, and Beyond: Advocacy friends, don’t think QR codes are just about the dollars. Epolitics has a whiole bunch of exciting ideas about ways you can incorporate QR code fun into political campaigns.

Form AND Function: Remember that QR codes can be stylish too!  Here are 15 examples of well accessorized QRs.

And in the category of the most juicy Connection Café cliffhanger ever, consider this: we’ll be doing some very fancy things with QR codes at the Convio Summit in October.  Join us there and experience the QR fun for yourself!

PS—One thing that is really important with QR codes is to make sure the place you’re sending people that use them is going to look good on a mobile device.  If you’re using Convio CMS, don’t forget to check out the Summer 2011 release goodness all about mobile detection and sites that play well with smartphones.  Just saying…