Think + Do » an exploration of nonprofit marketing and design

Adaptation

Over 170 years ago on the Galapagos Islands, Charles Darwin made an interesting observation. The animals he saw on this remote outpost were not quite like the ones he had seen throughout South America during the survey expedition of the HMS Beagle. In fact, and more importantly, he noticed a tortoise or finch on one island was not quite like a tortoise or a finch on another island. They had adapted to their environment.

We all have seminal moments in our lives – events that prove to be major influences and shift our perspective or open our minds to new ways of thinking. Some moments become shared touchstones. Where were you when Neil Armstrong set foot on the moon? What were you doing when you heard about the airplanes crashing into the World Trade Center? Others – like the teenager who hears Nirvana playing on the radio and ditches his trombone in favor of an electric guitar – are more personal.

Everything is relative
Seemingly everyone I talk to these days is in transition, trying to reconcile past experiences and skills with current and future market needs. Few planned on careers where it seems the most important skill is the ability to acquire new skills.

In a networked, cloud-based world where nothing is fixed or permanent, how do communicators and marketers determine what will endure? How do our skills apply? Perhaps we should be asking: How will we adapt?

Everything is measured in terms of individual perception. To me, that little puppy is cute and cuddly; to you, it’s smelly and sheds all over the furniture; to another, it may look like dinner. If we accept that premise, then our real value is an ability to make ideas and information accessible to each individual in our audience. Fortunately, we have more and better tools to do this than ever before.

Theory meets possibility
The theory of evolution was not new when Darwin published The Origin of Species. He was recognized for synthesizing his experiences and insights with existing thought and making the principle of natural selection accessible to the public.

Similarly, the concept of creating adaptive or fluid websites is not new. With the explosion of mobile devices, web designers and developers debated the merits of various screen resolutions and wrestled with the lack of standards across multiple web browsers. The response has ranged from building a dizzying array of mobile apps to creating and maintaining separate mobile-friendly websites to doing nothing at all.

In the article Responsive Web Design, and subsequent book, Ethan Marcotte gives name to a better way forward. Responsive designs automatically deliver the best site for your users based on what you know about them – one site serving all audiences better.

Responsive web design
The prevalent model for displaying web content concedes that the user experience will suffer on some devices. Simply put, most websites are not user-friendly on mobile devices, and most non-profit organizations can’t afford to create and maintain multiple sites and apps. Responsive web design is a more flexible approach. As Marcotte writes:

Rather than quarantining our content into disparate, device-specific experiences, we can use [technology] to progressively enhance our work within different viewing contexts.

Responsive websites use new technologies and better browser support to rearrange, resize, add or subtract content to fit the device. Additionally, it forces the web team – designers, writers and developers – to rethink how that content is edited, organized and delivered.

Some early adopters of this approach include (drag your browser window larger and smaller to see how the page responds):

Serving the audience
Successful marketers have always aimed to serve an audience’s needs – to quickly respond with interest and enthusiasm. Responsive web designs not only meet your users’ need for relevant information any time, anywhere, on any device, but essentially eliminate the need to create and maintain separate apps and sites.

I believe this represents a seminal moment. If simplicity is the ultimate sophistication, as Leonardo da Vinci once wrote, then the tools we use are finally getting sophisticated enough to make our lives simpler – and that’s an adaptation we can all embrace.

Related content:
Responsive Web Design

Generation Flux

When Design Leaves the Box

Don’t Wait for Perfection

The web is an amazingly flexible medium that can be updated at a second’s notice, yet many people seem to forget this when launching a site. A website needs to be functional and well designed when it is unveiled, but waiting for perfection is a trap that can delay a launch indefinitely. Here is how to avoid that trap.

Set realistic goals
Websites often get delayed because the scope of the site is too big to execute given the manpower. Don’t plan for content that no one has time to write or interactive features no one has time to build. Distinguish between functionality and features that are necessary and those that are simply nice to have.

For example, many organizations struggle with how to integrate social media into their website. While social media is an attractive feature, it adds little value if no one has the time to sustain it. Instead of setting up blogs, a YouTube channel, and an account on every networking site, determine how many channels you realistically have the time and passion to maintain. One well-maintained social media channel will be more effective than half a dozen that are not.

Not all problems can be avoided
Sites can be delayed by endless hypothetical questions. A common one I hear is: What if members of my audience are using a dial-up connection or an outdated browser? Yes, it’s possible that someone will want to access your site on Netscape, but frankly the number of people fitting this profile is statistically insignificant.

Be as thorough as possible when planning for the ways different people will be accessing your site. Make sure it is easily accessible from multiple browsers, screen readers for the visually impaired, and for smart phone users. However, it is impossible to prepare for every scenario. Inevitably, some people will encounter a few bugs.

Encourage people to report problems by including a link to your webmaster in the footer of your site. If enough people have the same problem, they will identify where the site needs improvements. Don’t waste time worrying about hypothetical scenarios. Wait and troubleshoot the real ones.

Embrace the web’s flexible nature
You may think your site won’t be perfect until that interactive slideshow is finished, or until you have time to write a great blog. Get over it. Don’t delay releasing new content or a more user-friendly interface just because a few bells and whistles aren’t ready. In fact, adding features at a later date can be to your advantage. New features draw the attention of search engines and give users a reason to return to your site after the redesign.

A good website is always evolving. Regularly adding new features and content should be the goal, not a reason to delay launching. If your organization’s website is perfect when you launch it, you’ve waited too long.

– Claire Napier

Favorite Links: July 2010

We’re always in search of fresh thinking on issues that affect nonprofit marketing. Here’s some recent favorites:

The Art of Non-Conformity
by Chris Guillebeau

@Issue: The Online Journal of Business and Design
by Corporate Design Foundation

Web Teams Need Constant Feedback
by Gerry McGovern

Building a Solid Foundation

Website projects often start with a lot of enthusiasm. People are tempted to jump right to the “fun” parts of web design, getting excited about the potential new look, features and functionality. This is like picking out drapes and paint chips for a new house before a blueprint has been made.

People within an organization usually begin a website redesign with ideas for how to change the existing site. And while that’s a good place to start, the most valuable ideas should come from your site’s users. To improve your audience’s experience on the new site, consider the following:

Analyze your existing site

The first thing you need to know is what content your visitors are looking at. Your web host should be able to provide statistics on web page views and how people find your site. Google Analytics can also be installed on sites for free. Often, people are surprised to find which pages are being looked at and which are not. Ultimately, a thorough website content audit will answer two questions: What’s there? And, is it any good?

Gather insights, not just facts

Website statistics only provide information about existing content. Focus groups or one-on-one interviews can help identify needs that are currently unmet, or features that are difficult for your visitors to find or use. Focus on understanding your user’s needs rather than on current habits. Ask why they visit your site, what other sites they visit, and what needs are met there. What are they not finding on the web? Can you fill that need?

Users can also help you organize the site. Find out what categories they want to see in the main navigation, and what information they would expect to find in each category. While no two people will organize a website exactly the same way, look for patterns that will help you choose the best path to information.

Test your assumptions

Make time for usability testing. You don’t need video cameras, statistically valid samples, or white lab coats. Conducting a web usability test can be as simple as sitting with a test subject at a computer. Ask them to articulate their needs. Ask them to perform tasks. Then watch and listen.

It’s important to conduct usability tests early (and often) in your project. As web usability consultant Steve Krug says in his book Don’t Make Me Think, “Testing one user early is better than testing 50 near the end.” This allows for an iterative process in which your design continually moves closer and closer to the ideal solution.

By employing a process that includes data analysis, insights from your site’s users, and usability testing throughout, your new website will have a solid foundation. This provides the best chance of building a successful website, one which meets your audience’s needs.

Next, onto an even tougher problem: settling on a content strategy

– Claire Napier

I Still Haven’t Found What I’m Looking For

The shopping experience at my local “super” retailer often goes something likes this: I walk into the store hoping for a quick trip to pick up a roll of masking tape. After half an hour searching in “Office Supplies,” an employee finally takes me to find it in the hardware section.

When we’ve conducted web usability tests, we have seen a lot of people with experiences similar to my shopping trip. They enter a website with a specific task, then get frustrated when the information they seek is not in the expected section.

When web users get frustrated, they tend to give up. A recent report on university websites underscores the importance of easy site navigation:

  • 92% of prospective students will be disappointed or walk away if they can’t find what they’re looking for.
  • 65% said that they would be more interested in a college because of a good web experience.

In our research, we have found web users overwhelmingly prefer indexed navigation. The idea is similar to a sitemap, but instead of showing the whole site the navigation shows only the most relevant information. Indexed navigation eliminates much of the site users’ guessing by showing what kinds of things each category includes.

Image of indexed navigation.

Indexed navigation (highlighted) is organized by topic and provides users easy access to the information they seek.

When creating an indexed navigation it’s important to ask users what information is important to them, and where do they expect to find it. What kind of categories are they looking for in the main navigation? What kind of information do they expect to see under those headings? Does the wording in the navigation reflect what falls in those categories?

The answers to these questions may be surprising. External audiences often view your website differently. What seems obvious or interesting to you may not be important to someone who’s visiting your site for the first time.

When organizing a site, it’s important to show your users the big picture. The easier it is for people to find what they’re looking for, the better the website experience will be.

Examples of sites with indexed navigation

University of Minnesota

Boston University

 

– Claire Napier

 

Rethinking Online Publications

The online version of your publication is an increasingly important part of the communications mix. Because print and pixels are distinctly different, it’s vital to consider how each affects the way your audience consumes information.

Reality check

An online publication should be more than a way to reduce costs by saving money on printing and mailing. In fact, research published in the March 2010 issue of CASE’s Currents magazine found that nearly 75% of respondents did not look at the online edition of their alumni magazine, while 91% always or frequently read the printed version.

People have different expectations when they go online. Readers seek up-to-the-minute information in a media-rich environment that includes video, message boards, and opportunities to connect via social networks. Creating an online publication that delivers relevant content and draws repeat visits takes dedication and time.

Putting a publication on the web offers new opportunities to communicate with people beyond your core audience. The CASE research finds that external searches often spark more interest in your organization and the information and expertise you provide. Online publications must be optimized to help people find you.

Make the medium serve the message

Through animation, some online publications try to literally mimic the effect of a printed page being turned. This gimmick not only misses the point, but is not terribly helpful to the reader. Your web interface should focus on delivering content to your readers in a way that advances the story and increases understanding.

The success of your online efforts relies on your ability to adapt to the way people are viewing the written word. Devices like the iPhone and Amazon Kindle enable readers to interact with content in new ways. Recently, Wired magazine unveiled their vision for taking advantage of this new technology.

Each advance in technology requires an understanding of how people will interact with information — both what is possible and what is preferable. The question should not be: How do we make this more like a printed piece? But, how can we leverage the technology to create a more engaging experience for our readers?

Some examples of well-done online publications:

Bostonia (University of Boston Alumni Magazine)

Frieze

Pepperdine Magazine

Think (The Magazine of Case Western Reserve University)

Related Content:

What Alumni Read (or Ignore)

UMagazinology

Apple’s Bite: Publishers Should Beware the iPad

 

– Claire Napier and Dan Woychick

Don’t Bury the Information in the Experience

The web allows designers to create interactive experiences that are not possible in print. However, it is tempting to let the “experience” get in the way of providing people with information.

Recently, as part of a site redesign, we conducted usability testing on a number of university websites. Many of the home pages featured a large section devoted to creating an interactive experience, with beautiful slide shows or video and elegant navigation. However, none of our test subjects explored these features, skipping straight to the main navigation.

This reinforced our belief that most web users, even first-time visitors, have a goal in mind when they enter a site. Users are usually looking for the fastest way to obtain specific information.

In my own experience, MySpace is a site where my need for information trumps my design sensibilities. I frequently use the music section of MySpace to get information on my favorite artists. These pages are usually a cluttered mess, with distracting backgrounds and poor visual hierarchy. But despite these disadvantages, I find myself turning almost exclusively to MySpace for information rather than to the artists’ official .com websites.

Why? Even with the less-satisfying visual experience, actual content is fairly straightforward and easy to find on MySpace pages.

When using the web to find information about an artist, I am usually looking for one of two things – music to listen to or tour dates. On an artist’s .com site, I am never sure what to expect. Often these sites require waiting for Flash to load and have cumbersome animated menus. Also, custom music players necessitate a learning curve for each one.

MySpace Music pages, on the other hand, have a predictable and basic layout with a limited number of options. While the components of each page may vary somewhat, everything is on one page. Once you’ve seen a few MySpace pages, the consistency of the available options makes finding information easy.

While including animation and interactive features can supplement the web experience, it’s easy to get carried away. When designing a site, I always try to remember that the users’ primary need is information.

– Claire Napier

Designing for Accessibility Means Better Websites for Everyone

Because it appears to affect relatively few people, web accessibility isn’t often top-of-mind during the design and coding process. I’ve found, however, that considering accessibility earlier in the process can help improve the web experience for all users.

Earlier in my career, I was more focused on the way a site appeared than how the code was organized. When I started incorporating accessibility guidelines into my work, I discovered sites could be built more efficiently without sacrificing visual appeal.

There are many advantages to designing an accessible website. Most importantly, it is highly beneficial to site navigation. Sometimes the most visually logical way to create navigation makes for unnecessarily complicated code. Because accessible menus generally operate on less code, site users experience no lag time when waiting for a hover state or a dropdown menu to appear.

Accessible websites make your site more visible to search engines because images with text require a live text equivalent. Additionally, because they follow standard coding protocols, accessible websites are easier to manage and update.

Focusing on web accessibility earlier in the process means all content is properly coded, leading to simpler sites with cleaner typography. The result: Websites that work better for all users because both the design and production were considered, together, early in the process.

Learn More About Accessible Web Design

 

An introduction to accessibility:

http://www.w3.org/WAI/intro/accessibility.php

Website accessibility checklist:

http://www.webaim.org/standards/wcag/checklist

A guide to creating accessible image-based navigation:

http://simplebits.com/notebook/2003/09/30/accessible_imagetab_rollovers.html

College Web Pages Are ‘Widely Inaccessible’ to People With Disabilities

http://chronicle.com

 

– Claire Napier