How does a website flow?

By Sara White

Have you ever considered why web designers create websites in a particular way? Why is the “Donate” button in the upper right corner? Why is this paragraph broken up into bullet points?

It all has to do with the “flow” of a website and how humans (and machines) read. A good website tells a compelling story. To do so, we must consider the audience.

There are three main concepts a web designer considers when creating a website:

1. Information architecture (IA)
2. User experience (UX)
3. Search engine optimization (SEO)

We’ll go over each concept to help you understand how a website flows.

Information architecture (IA)

Information architecture seeks to answer the question, “What should go where on my website?” Think of the process of designing a house: Where does the master bedroom go? How many bathrooms can you have?

The idea is the same, except the rooms are different pages or even headings on a website. For example, a typical nonprofit’s site will have a separate page about its organization or one for its blog. Information from these pages may go on the homepage, but it all depends on how you wish to present the information.

Information architecture also looks at how your audience will navigate your site. Some nonprofits find that they want their “About” page to be the very next thing a visitor clicks on, while others want their users to volunteer or donate.

How to create a good information architecture for a nonprofit website

Every story begins with an outline. Crafting a good information architecture starts much in the same way. List out what you want to let your audience know  –  the information you want to give them:

• Who are you?
• What do you do?
• How do you help others/the community?
• How can your visitors help you (e.g., donations, volunteering)?

Then, look at how you want to write your story. Start with your nonprofit’s elevator pitch. You only have a few seconds to explain everything vital about your organization. What do you say?

From there, we can start getting into details about your nonprofit and finding places for this information. Next, we create the sitemap or outline of a website showing all the pages available. A typical sitemap for a nonprofit will include such pages as:

• An “About” page that establishes credibility
  • A detailed description of the organization, including how it started
  • Bios of the people in the nonprofit or on the board
  • Information about any sister or parent organizations
• A “Volunteer” page that shows the nonprofits activism and includes information on how others can join the cause
• A “Donate” page to help keep the organization afloat
  • This page can also showcase foundations that have given large amounts
• An “Events” page that contains a calendar or feed where your audience can engage in fundraisers, community outreach, or other events your nonprofit hosts

Of course, every nonprofit has different needs and will have different pages in its sitemap. Some will be more complex, but generally, simpler is better. 

Once you have the outline of your website, you can begin to finesse its user experience.

User experience (UX)

The user experience (UX) of a website takes the outline of the story crafted in the information architecture and adds the layout, design elements, and navigation. UX designers seek to answer the question, “How will the visitor interact with the website?”

UX involves the prettiness of the website and how to make it as readable as possible. A good UX design keeps visitors on the page or leads them to your call to action (CTA), which for most nonprofits is their donate button.

The user experience must be accessible to all visitors and, therefore, be readable by machines. Accessibility for devices such as screen readers also makes the website easier for human eyes as well.

In this same vein, accessibility also addresses such issues as red-green color blindness and attempts to use the basic ideas of a cohesive color palette. A UX designer should not make assumptions about the website’s visitors.

UX design also answers the question of interactivity. The UX designer decides what should be a button, how the menu should look, and where the logo should go. 

How to create a good user experience for a nonprofit website

To create the best user experience for a nonprofit’s site, begin with a color palette. Find what colors match your logo and go from there. Sometimes logos look better on a sign or a letterhead and not so good on a website. That’s okay! A graphic designer can help.

Once you’ve decided on your colors, it’s time to pick a font. Studies have shown that a sans serif font (e.g., Arial or Helvetica) is easier to read due to pixelation and the way the human eye tracks letters. The font size should also be larger, with no fewer than 16 pixels.

Now to create the design. People who read in English go from the left side of the page to the right, so you will usually see the site’s logo in the upper left corner. The eye will travel across the top of the page, so that is where the menu should go. The site’s call to action (typically something like “Donate” or “Get Involved”) will go on the right and be in a prominent color.

You should have the rest of the layout from the information architecture. 

Other tips and tricks include:

• “Zebra stripes” on tables so that each row has alternating colors
• Rounded corners on CTAs and buttons
• Implementing a slower slideshow, around three to four seconds per slide
• Using captions for tables and images

Search engine optimization (SEO)

Search engine optimization (SEO) is the process of making a website findable. Once you have your site up and ready for viewing, you need to optimize it so that people can get to it.

Search engines, such as Google or Bing, use little bits of software called bots to “crawl” the web and discover websites. These web crawlers look at your website’s information and determine how to rank the page for a particular word or phrase.

Crawlers will usually first look at the website’s metadata (the information about the site that audiences won’t see) for keywords and the site’s description. They also compare the website’s content – particularly words in bold, italics, or headings – with the metadata.

How to create search engine optimization for a nonprofit website

To optimize a nonprofit’s website for search engines, we start with what we determined in our information architecture to be the most valuable data points on the site. These keywords should be present in the page’s headings and in emphasis.

All the images should have alternative text (or alt text) that describes the image and is relevant to the keywords for which you wish to rank. For example, if you have a picture of your volunteers at your yearly event, the alt text should read something like, “Volunteers at GiveCamp NWA 2019.”

Additionally, Google and other search engines now use an algorithm called latent semantic indexing (LSI), which looks for not only keywords but also related content. Some LSI keywords for a nonprofit would include:

• 501(c)(3)
• Fundraising
• Work
• Give
• Opportunities
• Gala
• Foundation

Now, ranking for these words individually would be extremely hard, but if you want to rank for, say, “Northwest Arkansas nonprofit for cancer patients,” then having the above words on your website makes you look more like a match for that phrase to search engines.

Other things to consider to increase your ranking:

• Be specific about what you want to rank for, and you’ll find more relevant matches.
• Create engaging copy that is grammatically correct and relevant to your organization.
• Do not stuff your content with just keywords.
• Do not plagiarize.
• Link to your other pages. For example, a board member’s biography may contain the fact that she received an award at your gala  –  you should link to the events page!

In general, search engines rank pages that are meaningful to their topic. Don’t go overboard with the keywords, and always make sure that your content is relevant and informative.

In summary

Web developers consider three factors when creating a website: information architecture, user experience, and search engine optimization. Web developers design and write websites using these concepts.

Your website should tell a cohesive, meaningful story. Creating a website in this way will entice supporters and help your site be findable on the internet. A nonprofit’s story is typically:

• There exists a problem that no one is addressing.
• There are people who want to fix or ease the suffering caused by this problem.
• These people have come up with a solution to this problem.
• These are the ways these people have helped.

The site should be navigable and easy to use. The reader should be able to find information without having to overthink it. In the same vein, a web crawler working for a search engine should be able to find information as well.

Following these principles will help you create a website that is useful, elegant, and findable.

About the author

Sara White is the content coordinator for SupplyPike, a Fayetteville software startup. She has a degree in computer science and ten years’ experience as a web developer. Sara has been a writer in some capacity throughout her career, creating everything from help files to knowledge bases to a supply chain wiki. Sara has volunteered at GiveCamp since 2017.