User Centered Design

Overview

Think about your favorite “usable” thing (a utensil or tool, for instance). Why is it your favorite? What makes you choose to use it over similar things? While there are many possible explanations including ‘it was free’, ‘it’s durable’, ‘it looks neat’, ‘it’s sentimental or familiar’, most of our favorite usable things have reached such a level of endearment because they meet our needs and work well while doing so. Often they are also easy to use. Now, think about your favorite website or web application and why it is so. Are some of the reasons starting to sound familiar?

User-centered design is a way of thinking that focuses on the needs, wants, and limitations of users throughout the entire design process for a product. UCD is not a new concept; however, recent years which have seen such explosive growth of the Web have likewise brought about a necessary appreciation for applying the age-old concepts of UCD to website design and management.

On the surface UCD is simple enough, yet properly executing it takes good planning and preparation as well as continual effort. As it relates to your website, applying the principles of UCD requires you to predict and analyze how people are likely to use your site. It encompasses every aspect of the site’s structure including design (looks good), navigation (works well, easy to use), and content (meets users’ needs).

The key to UCD is optimizing your site’s design and contents to fit the users’ needs, preferences, and abilities rather than trying to force them to change their behavior to fit the site’s design. The core of UCD is people. The aim is to build a site which users can interact with in a way that is natural and gratifying.

Benefits

By making a genuine effort to put people at the core of your site’s purpose for existence, the benefits of UCD are substantial, including most of the following:

Increased user satisfaction and productivity.

If your site meets the needs of its users, they will be happy with it and will get the most out of their experience when using it.

High likelihood of user loyalty and return visits.

If your site provides the tools and information that its users need or want, they will continue to revisit the site again and again. The reverse is equally true.

A greater sense of user ownership and increased usage.

If your site is built around the needs of your users, they are much more likely to actually utilize and take pride in it as well as share it with others.

A more engaged community of users.

If your site provides opportunities for users to connect with one another in a way that meets their needs, they will do it. Often.

A head start on search engine optimization.

If your site is focused on meeting the needs of its users, search engines will naturally match it to relevant searches.

UCD Helps You Know Your Audience

Another key benefit of UCD is that doing it correctly and consistently forces you to get to know your site’s users very well, which in turn allows you to meet their needs even better .

Key Concepts

User

A person who interacts with the site

Usability

A measure of how easy it is to use the site

Usefulness

A measure of how well the site meets its users’ needs

Accessibility

A measure of how easily users are able to interact with the information or concepts presented by the site; also refers to making a website usable by people with impairments or disabilities

Experience

What the user gets out of interacting with (using) the site

Design

Can refer to the process of designing the site or the end result of the design process; website design is both a process and a product ; in this document the term website design refers to all aspects of the website including its design (both process and product) and content

Information Architecture

The navigation scheme of the site

Plan

The planning phase involves asking a lot of questions in order to study your users as completely as possible. Since the sole focus of UCD is the user, you should become intimately familiar with their needs, preferences, and abilities so you can effectively adapt your site. Key questions to discuss with your team (adapted from usability.gov):

    Identify your audience and involve them from the start

    • Who are the primary users of the site?
    • How would you describe the users? Develop user characteristics such as age, experience, education, culture, etc. Consider creating personas based on these characteristics to put a face on the users
    • Why will they come to the site? Outline user needs, interests, goals, and expectations
    • When and where will they access the site? Determine user environment and context
    • How will they access the site? Identify what hardware and software users will use to access your site including type of device (mobile, desktop, laptop), internet connection speed, screen resolution, internet browser, etc.

    Analyze and Prioritize User Tasks and Goals

    • How will the users use the site?
      • Which features do they need?
      • Which features do they want?
      • Which features will they use the most?
      • Which features are prone to usability issues?
    • How do the users think your site should work?
    • What will compel users to return to the site?

    Determine usability objectives

    • Which tasks should users be able to accomplish easily and with few errors?
    • Which tasks should users be able to complete efficiently?
    • What level of satisfaction should users have after using the site?

    Discuss expectations, requirements & preferences

    • What is your vision of what the site should do?
    • Are there any restraints, mandates, or guidelines for the site?

      In the United States, all government and many non-profit organizations which receive federal funding are required to conform to Section 508 of the Rehabilitation Act of 1973. If yours is one of them, be sure to factor this in when planning the site’s design and content. Additionally, the Department of Justice has set a precedent of backing lawsuits filed against websites that do not conform to Title II and Title III of the Americans with Disabilities Act.
    • Are there any sites you would like to model or a particular style that you prefer?
    • How do the users think your site should look?
    • What message should the site convey to users?

    Determine accessibility requirements and needs

    • See 4(b)(i) above.
    • What types of accessibility testing will be done?
    • What types of accessibility tools will be used?

    Identify available resources and needs

    • What resources are available for updating and maintaining the site?
    • Do you have content writers skilled in writing for the Web or is anyone willing to learn?
    • Do you have access to a graphic designer?
    • Do you have access to a photographer?
    • Who will be responsible for updating and maintaining the site?
    • Who is in charge of site marketing and promotion?
    Consider assigning each area of the UCD key concepts to one member of your web team (usability, usefulness, accessibility, experience) and hold them accountable for resolving issues within their area both during the initial site design process and through ongoing site maintenance.

    Involve Future Users

    You may reach the best end result by involving some of your future users throughout the entire design process. Input from the web team may be insightful and user testing is an important part of the process as well, but the information you can get from actual users in each phase is invaluable to your site’s success.

    Set Goals

    Set goals for the site so that when it’s time to measure your success, it will be easy to compare what you’ve accomplished with what you planned.

    Think about the following questions when considering your goals:

    • How would you define a successful website for your church?
    • What does success look like?
    • How will you know when you have been successful?
    Be sure to set some goals which can be tracked and precisely measured such as desired traffic levels (page views, return visits, amount of time spent on site, most popular pages, etc.) and positive user feedback percentage (e.g. 90% of users say they enjoy using the site).

    Set a Timeline

    Determine a timeline for incorporating UCD into your site which includes the following:

    • Developing user characteristics and answers to the key questions above.
    • Researching the best ways to communicate with your users given their needs, preferences, and abilities.
    • Determining the website’s organizational structure (information architecture – can be hierarchical, narrow and deep, shallow and broad, sequential, or tag-based).
    • Creating an outline of the site that includes content inventory and site maps, and wireframe illustrations of the page layouts. A basic site map for most church websites should look something like this

    Develop Your Navigation

    Define the navigation scheme the site will use possibly including:

    Site-wide

    The primary means of navigation throughout the site; this is usually at the top or on the side of every page.

    Submenus

    A secondary means of navigation for sections of the site; can be just under the primary navigation area or in a side column.

    Functional Links

    Frequently used links (such as contact, about, site map, search) that appear in the header or footer of every page.

    Decide on Key Site Features

    Decide on the key features of the site. Below is a short list of suggestions but remember to consider your users’ wants and needs first to align them together:

    • Audio – sermons, original music, daily devotions
    • Video – upcoming event/sermon teasers, inspirational skits or clips, staff interviews, facility tour, latest news, project/campaign updates, welcome from the pastor
    • Social Interaction – Facebook, Twitter, blog, podcast
    • Online Forms – registration, reservation, contact
    • Online Giving
    • Photo Albums

    Gather and Create Content

    Gather and create content (text, media, images, etc.) to use on the site. Schedule time during and after the design process for user testing and feedback. Do not finalize things too soon but also not drag things out too long.

    Build

    Think about your least favorite website and why it is so. Perhaps it is one you use regularly by choice or otherwise. On a scale of 1-10, how frustrated were you the last time you went there. Are you a little uneasy now just thinking about it? Without even knowing what site you’re thinking of, we know one thing is certain: its designers didn’t have you in mind when they designed it. Is it becoming clearer as to why UCD is so important? Alright then, let’s look at how not to do that to the users of your site.

    Usability Principles

    There is a set of universal usability principles that apply to all stages of the website design process.

    Visibility

    Important elements should be highly visible (though not as obtrusive as flashing, blinking, rapid scrolling, etc.)

    Recognition

    A user should be able to easily recognize, rather than memorize, what elements mean or how they work.

    Response

    A user should receive immediate feedback for every action performed on the site.

    Accessibility

    A user should be able to find information quickly and easily; users with disabilities shouldn’t be hindered in performing important tasks on the site. 

    • Provide a few ways for users to find information on the site, while avoiding unnecessary repetition of elements as it can be confusing and overwhelming. Elements in this category include navigation menus, sitemap, and search functions.
    • Break information up into small, yet meaningful, pieces.
    • Organize the site in a manner that is meaningful to the users.

    Orientation

    A user should never feel “lost” on the site; offer ways for them to orient themselves and navigate throughout the site with little effort

    • Use words for your hyperlinks that effectively describe what a user will find if they click the link.
    • Supply clear navigation telling users what page they are on, how other pages relate, and how to get to other pages. Remember that users don’t always enter the site through the home page.
    • Apply the navigation to each page of the site consistently (same style, placement, etc.). Your Thrive theme will actually do this for you without you having to think about it.
    • Avoid using icons or images for navigation that aren’t absolutely clear to the vast majority of your users.

    Recovery

    Users should experience minimal errors and be provided with ways to allow them to recover quickly.

    Satisfaction

    Users should enjoy or at least perceive to enjoy using the site.

    Clarity

    Site content should be clearly legible and easy for the majority of users to understand.

    Content

    Your site’s content is where you really win or lose with UCD. More than design or neat features, it is content that keeps users coming back. If any one area of the site is going to have more resources devoted it, it should be your content.

    Tell Stories

    We relate to stories better than anything else. Make your site a gathering of stories that tells the collective story of your church, especially as it relates to your users. Is there a special event coming up that you’re hosting? Tell a story about it including how much fun last year’s was and what you’re doing this year. But don’t just tell stories. Show your users the stories by incorporating photos of people ‘acting out’ the stories. It’s highly likely that there is already someone in your church who enjoys photography but if you don’t have anyone who can take good photos, there are many places online to purchase inexpensive royalty-free stock photos such as bigstockphoto.com and istockphoto.com.

    Make Your Message Clear

    Give the main message more prominence than anything else.

    Consider Similar Organizations' Approaches

    Look at what churches similar to yours are doing. Talk to their website administrators and editors. Ask them if there’s anything they wish they’d done different or are planning to change soon. Ask them what works well and whether they tried anything that didn’t work and why. Keep in mind any differences that may exist between your users and theirs, though.

    Keep Your Site Updated

    Most importantly, keep your site updated regularly. The fastest way to lose your users’ confidence in the site’s reliability is to let stale content sit out there. Be sure that everyone who is responsible for maintaining the site strategically allots time in their schedule on a regular basis to remove old content from the site as well as add new information.

    Write for the Web

    The Society for Technical Communication described it best when stating “Most users don’t really read web pages .Users looking for their ‘nugget’ of information are more like hunters than like someone out for a leisurely stroll.” Too often, we forget this reality in the transition from website user to website manager. Below are some guidelines for “writing visually”:

    Use Headings

    Use headings to draw attention to important sections and divide page content. Headings and subheadings should only occupy one line of space.

    Utilize Lists
    Use bulleted and numbered lists as much as possible and break up longer blocks of text to speed up scanning and reading.
    Use Proper Grammar
    Avoid run-on sentences by using simple sentence structure.
    Keep Sentence and Paragraph Structure Simple

    Write short sentences and paragraphs that contain less than 4 sentences. Often, sentences can be made shorter by eliminating unnecessary words.

    Use Familiar Words
    Use words that are familiar to your users.
    Use the Active Voice

    Use active voice and active verbs for shorter and more readable sentences. “The women’s ministry is holding a gathering after church today” instead of “A gathering is being held by the women’s ministry after church today”

    Use Pictures and Graphics
    Use pictures or graphics in place of text when the image so accurately and completely conveys the point that the text is unnecessary.

    guidelines for text

    • Avoid serif fonts, italics, and all caps in body text.
    • Use left justification for all body text while indenting text for desired effect when necessary.
    • Use colored text conservatively.
    • Use a color scheming tool to compose a color scheme for the site which includes up to three accent colors for text in addition to the main body text color, and then use them consistently throughout the site.
    • Be sensitive to cultural and educational variances prevalent among your users by carefully using language devices like humor, metaphors, idioms, and unexplained acronyms.
    • Avoid copying and pasting content to your site (especially from print documents) without editing it for best readability on the Web.
    • Avoid using tables for layout by only using them for information that makes the most sense in a tabular format.
    • Run spelling and grammar checks on every page of your site prior to publishing them.

    Using Media

    • Invest in some good quality equipment, though not necessarily super-expensive professional gear, to record and produce your media.
    • Focus on the style of media that your users want most (audio vs. video) and make it the best possible experience for them that you can within your budget rather than spreading your resources too thin over several different formats which may offer little return on investment.
    • Use formats that meet or exceed current web standards (MP3 for audio, H.264 for video).
    • Consider using popular online media sharing services like E-zekiel.tv that have easy-to-use player interfaces which you can embed in your site for a seamless experience.
    • Provide text equivalents such as closed captions or transcripts for audio and video files.

    Incorporating images into your site:

    The site’s graphical design (as in template or theme) should be uncluttered and complementary to the site’s purpose and content. Elements generally referred to as ‘eye-candy’ and ‘features’ should be used sparingly yet intentionally and only to the benefit of the users.
    • Incorporate generous amounts of ‘white space’ which forms a virtual padding around elements to help visually organize a page while distinguishing important areas as well as give users’ eyes a place to rest.
    • Use pictures and graphics to inform users or illustrate a point as opposed to just decorating the page (this is in reference to foreground elements, not those that are part of the site’s design template or theme).
    • Provide concise, relevant and meaningful alternative text descriptions and advisory titles for every image so that users with disabilities who are ‘viewing’ your site with a screen reader can make sense of them. These values are easy to set as you are adding images to your pages in Thrive.

    Additional Features

    Before adding any new feature to the site, consider what benefit it will provide your users. Make sure you can justify it using all of the UCD principles otherwise you might be wasting resources to implement it.

    Testing

    Test your site on as many devices and internet browsers as you can to be sure it looks and works how it was intended to in a wide variety of contexts. Retest regularly since new devices and browser updates are being introduced frequently. If you have limited or no access to other devices and browsers, ask others to assist you with this or use testing software such as crossbrowsertesting.com.

    User testing is important but doesn’t have to be an overly formal process. Though if you’re really serious about it, there are some great user testing programs available such as Silverback for Mac and Morae for PC as well as Optimal Workshops web-based tools.

    • Find at least ten or more people who are or will be actual users of the site. If this task proves to be elusive, find people who match to the user personas you have developed or are representative of your actual users.
    • Ask them to perform some of the most important tasks on the site with little or no instruction and then let them browse around the site and give you their thoughts.
    • Notice how quickly they are able to perform the tasks (taking into account the user’s individual abilities) and whether there appears to be any confusion or frustration.
    • Also notice areas that tend to be the most-visited or least-visited and attempt to get some feedback as to why.

    Measure

    • Revisit the goals you set during the planning phase and compare them to the results to see which areas need improvement.
    • Desired traffic levels (page views, return visits, amount of time spent on site, most popular pages, etc.) can be measured using tools like Thrive’s Statistics area along with Google Analytics.
    • Periodically conduct user testing along with formal and informal surveys to measure user feedback so you are aware when it’s time to make some changes to the site.
    • Analyze the results of your user tests and feedback to know which areas need improvement, then go back to the planning phase and restart the process. This is something you may do several times over in the life of your website as the primary user characteristics change and as technology advances. Factors to be measured should be:
    • The user’s ability to successfully use a website to find information and accomplish tasks quickly, with ease, and with little or no frustration or error.
    • The user’s satisfaction level with the site.
    • Perhaps the best measures of success for a user-centered site are that it is 1) getting used and 2) getting positive feedback.
    • Consider purchasing our Website Assessment to see how your site measures up in several key areas.