Home » Design

Tag: Design

The Content-Driven Design Process

Content-driven design is the process of using the content that you have to determine the design and layout of the site. For decades, it has been the normal order of things to create a great-looking design based upon demographic keywords (mood, feeling, industry, etc.) and then create content to fit that space.

Though there is nothing wrong with this, per se, it leads to a lot of frustration between designer and company. The designer works hard to create a strong design only to see compromise after compromise until his design is no longer recognizable. The flip side is that the design is so great that no one wants to compromise it with the content. Therefore, the company isn’t always able to say what it needs to in order to reach the target customer.

In comes content-driven design. Start with the content first and then let that lead the direction, feeling, mood, etc. of the design. It’s a more harmonious way to design for the Web, ensuring that both the design and the content work together instead of against one another.

There are two parts to content-driven design: content and design.

Continue reading

Does Your Website Have Too Many Stop Lights?

“Why do you have so many stop lights in America?”

This is a question I was recently asked by a student from Saudi Arabia. We were driving down a major thoroughfare with commerce on either side–the kind you’d find in any city in America.

I asked him what it was like in Saudi Arabia. Only a big, wide street, he said. No stop lights.

The prospect of this is probably horror for most Americans, but the reality is that it’s a lot faster to go from here to there on those Saudi roads.

I was thinking about web design and how we often put stop lights all over our sites. Every time the user has to reload–stop light. Every time the visitor has to go through one more page to purchase something or donate–stop light.

I’m not advocating no stop lights. The user does need to stop and think about interacting at some point. But you don’t want the user to stop when he should be moving along with the flow of information. Does your site actually keep people from reading? Are there poorly placed ads or calls to action? How can you find a balance between moving the user along and getting his attention to stop and look, watch, or participate?

As you evaluate your own website, what do you see? Do you have too many stop lights or not enough? How long does it take to go through your site before someone is confronted with a stop light?

5 Key Website Elements for Nonprofit Organizations

Modern website design can be daunting for many nonprofit organizations. If you’ve decided to create a site yourself or you are working closely with a freelance web developer, here is a framework that you can use to get up to speed in designing a modern website.

Rather than build out something completely new, we’ll be taking a basic framework from the folks at volunteermatch.org and their article, The 5 Elements of Great Nonprofit Web Design.

Element 1: Site Structure

Key Question: What are we going to put on this website?

A new website is akin to a blank book or blank canvas. It holds a million possibilities. The first questions to ask concerning your website have a lot more to do with your organization than with HTML5 and CSS3. These are basic questions but they must be answered first:

  • Who are we?
  • Why do we want to build a website?
  • What do we want the world (literally) to know about our organization?
  • Where do we stand on the issues important to our organization and those we wish to work with?
  • Who is going to build and maintain the website?

Questions like these don’t typically come to mind when thinking about a new website, but they should be at the center of all that you do. They are are the Web equivalent of a business plan. Without a clear understanding of who you are and what you want your website to support (yes, it’s a supportive piece within the organization) the site will fall short (at best) or be completely useless and a waste of time and resources (at worst). Take the time to sit down within your organization and flesh out who you are before beginning the design process of the website.

This approach is a huge advantage for the organization and the designer(s). Finding the answers to the questions above, will create a clear path for the design and implementation of the website. The person(s) designing the site will thank you.

Element 2: Usability

Key Question: What will we do to get users to interact and communicate with us?

With books, magazines, ads, and direct mailers, there was an understanding between the user and the organization that the initial communication was all one-way: organization to viewer/reader. On the Web it’s a completely different story. Not only is two-way communication possible from the very first moment the visitor loads the site in the browser, but it will be expected that there is a way for the visitor to participate in some way. Users are willing to give you (potentially) valuable pieces of information in exchange for the opportunities or products you can provide. They want the freedom to ask questions, chat, connect with an individual person, or click something that makes something else move. They expect to feel powerful. To meet the user here, the mindset of the organization must become one of pulling others alongside their organization rather than confronting them. It is not face-to-face that will attract new volunteers; side-by-side is the new motto of the Millennials. If you have to sell them, they’ll walk away to the next guy that will help them become a part of the organization rather than a cheerleader.

What does that have to do with usability? Everything.

From the beginning, the designer(s) must take every possibility of how the user will interact with each individual page and element on the website. A lot of questions need to be asked and different things need to be tried to ease the friction of using the website and make it as painless as possible to move down that two-way street. Here are some good questions to ask:

  • What does this site/page/element look like on a desktop? on mobile?
  • What do I have to do to interact with the elements on the screen?
  • Is that element too far away for a one-finger interaction?
  • How many clicks is too many to get to the conversion?
  • Are interactions clearly presented?
  • Is the content clearly presented?
  • Is the site simple to use?

“But it’s my content,” you might be saying. True, but the visitor has more power than ever before and desires to come up eye-to-eye with the organization. They want to accept you based on their own evaluation, not because someone told them it’s a good place to put their time or money. Your organization must make it a point to equally consider your own interests and those of the visitor. Even if it’s not your intention, it’s easy to talk down to visitors. It’s hard to engage them and invite them to come alongside through two-way communication, discourse, and invitation. Considering how to engage the user and create a design that allows for interaction will help you as you consider the next element: content.

Element 3: Content

Key Question: What are the common threads in our content?

I deal in web development and spend most of my time in the content and design areas. There is a lot to say here, but I’ll make an attempt at brevity.

What is content? Content includes all of the substance of the site: text, video, images, etc. It is found in the elements that fill all the boxes created by the design team. Only that’s an outdated way of creating a website.

The optimal way to build a website is not to create content for the design but to design the site based upon the content. If your organization has taken Element 1 seriously, you should have a great idea as to who you are and what you want to show others around the world about your people, mission, and organization. If you’ve documented the process of answering the questions about who you are then you’ve got content enough to put together a website.

Communication is noise unless it’s focused and clear. From Element 1 your organization probably has a ton of great content. Some of it is gold, the rest is just noise. For instance, it would be a great idea to record your sessions as you talk through who your organization is. The problem is that a session like that might take several hours. There’s no way you’d want to put that online. It would be a testimony to your irrelevance. However, if you sift through those hours of video (or audio) you are sure to find the core parts of who you are. With a little editing you’ll be able to cut the noise and clarify who you are, what you’re doing, who you’re helping, and why you need others to join in.

The main types of content are text, video, and images. Here’s an overview of the strengths of each element:

Text

The words on the page are the workhorse of the publication, whether print or digital. Text is great for clarification, instruction, and ease of use. It is the fastest and easiest element to load onto the page. Because it doesn’t look like advertising, it can easily be separated from the graphic elements and will often be the first thing the visitor focuses on.

Video

Moving images catch the eye, even if they don’t hold the eye. There are times when the combination of visual and audio express the fullness of what you want to say. It’s also easier to listen to someone talk for 5 minutes than to read the same thing as text. A design advantage is that you can say a lot in a small amount of screen space.

Images

Because an image doesn’t change it has the power to affect a visitor longer than a video that is cutting quickly between images. Images rarely instruct or clarify. Instead, they are great at getting to the heart of the issue or the organization. They freeze time and allow the user to dwell on the moment captured in the image. People remember images so make sure your images show the mood/feeling/attitude you want visitors to remember about your organization.

Many things go into the content of an organization: the way the people operate, their corporate behaviors and governance, their mission, the people they serve. All of these connect together to form a unique organizational fingerprint. If you take time to observe the organization through photos, video, and text, this unique fingerprint will become apparent. That is the starting point of the design. Designers need to know not only what types and pieces of content do we have, but what is the content of that content? Is there a thread of connection moving through all of the organization’s content elements? Use that thread to determine the aesthetic feel and design of your site.

Element 4: Connection

Key Question: What can we do to ensure we connect with visitors?

The generation of current internet users 18-35 want to connect with everything they do. They are powerful and are learning how to use their power to come alongside companies and organizations to be personally fulfilled. They want to participate. They want some human connection. The rise of social media is not because of boredom; it’s happened because there is a personal disconnect in the world created by the last two or three generations. The sense is that our humanity is getting lost and social media allows people to once again participate in the lives of their families, friend, and even strangers.

A connection like this is possible but it requires that your organization do more than just create a channel of one-way communication. Like Element 2 you must create a situation in which a real human connection is probable (not just possible). The most obvious places are social networking platforms (like Facebook and Twitter). This is an area where many organizations really mess up. If you are going to set up channels for people to connect to your organization, you must man that channel. It must be a place filled with people who care not only about the organization but also anyone who shows interest or care in the organization.

I once heard social networks described as outposts. No one in their right mind would send someone to a deserted outpost. Likewise, your social media accounts need to be active. If that means directing people to only one account, then do that. It is better to send people to one active account than create the possibility that they might go to an inactive platform. Build up one platform at a time if you don’t have the manpower or resources to commit to more than one.

Even though social media gets a lot of the attention, there are other ways that you can kill the connection with users. Your site should have the ability to contact you in most common forms of communication for your country or target user. The abundance of communication offerings is pretty astounding: email, telephone, fax, text, chat, IM, Skype. The list goes on and on. Here are the secrets of connection:

Speed

It’s easy to set up a website that has every available way to contact your organization. If a user tries to connect with you and you don’t get back to them quickly, they will move on. All of the examples of communication above move very quickly. Email is no longer much like mail. It’s actually a lot more like chat. It’s on your phone, computer, tablet, tv, etc. Users know this and they expect that you will not only get back to them but get back to them quickly. If you don’t answer with speed visitors (potential donors and volunteers) will move on.

Humanity

One of the worst things to happen when visitors finally take the time to stop and communicate with your organization is for them to get an automated response in return. The expectation online is that there is a human on the other end of that email address. To get an email back that says someone will get back to them in the next week is disheartening, at best. Don’t be one of those organizations. Commit to having a human on the other end of every communication tool (e.g., email address) for your website.

Listening

The third thing that can kill the connection with visitors is if your organization insists on doing all the talking. Your organization will get a lot farther if you commit to listening to what users have to say than trying to speak all the time. If there is a problem, listen to users. If you don’t know how to fix the problem put a short-term plan in place to find out how to fix it and then get back to users quickly with a solution. Remember, your organization should come alongside visitors, not confront them.

Relationships are about connections. The stronger the initial connections, usually the deeper the friendships can go. The same is true of your organization. Not everyone connects with your cause. However, when someone does connect with your cause you must make sure that you don’t kill the relationship by dehumanizing your organization or failing to listen to your new friends.

Element 5: Design

Key Question: How does who we are affect the site design?

I’m putting design last here but it’s a huge part of your organization’s website. The design tells the visitor many things. For instance, what is this organization’s:

  • Energy
  • Attitude
  • Mission
  • Seriousness

It has the ability to answer many of the questions a viewer comes to the site with initially.

  • What space is this organization in?
  • Are they cheap?
  • Do they care about their online presence?
  • How does this make me feel?
  • What are they about?
  • Do they care about people or money?

Every user comes to your site with these questions in their heads. The design elements can help to answer some of the users’ questions immediately. Does your design show what you do or just tell visitors? Does your design bring clarity to your mission or just muck it up? Does your design send the right or wrong signals, tone, and attitude? Studies have shown that users make up their mind about your organization after only a few seconds. There are a handful of gates that you must jump through for the user to open up to your message. The design is one of the first. (The first is: Does the site load on the user’s device or not?) Care equals trust. If you put care (time, money, energy, effort) into your site people will be more apt to trust your organization, even if they’ve never heard of you. After they see that you dress the part then users will move onto judge the content, or substance, of your organization.

Each element of the design speaks to the user. Here three key elements and what they convey to the visitor:

Type

We have a tendency to associate fonts with specific time periods, people, feelings, events, etc. At some point the way the letters and words are formed takes on as much meaning as the ideas the words are conveying themselves. Choosing the right type for the organization and specific piece of content is a large part of winning users over in the first few seconds of viewing the site. One other consideration is legibility. If the visitor can’t read the message, who cares what it says?

Color

Choosing colors is a tricky business, especially when dealing with a global organization that has users from around the globe. Colors tend to mean different things in each culture. Using website analytics, your organization can track where most visitors are from and try to plan for color palettes that are pleasing to everyone who comes to the site. In general, black and white are safe for every culture.

Layout

Is your website a website or a blog? Users can tell almost immediately which it is. Many discerning users can tell if you’re using WordPress or not solely based upon layout. Layout is where logic kicks in. Each part of the page–and even the whole page–should be laid out in such a way that the information is clear, concise, and logical to the user. Read and think through each of the elements on the page. Does it make sense? Is there a hierarchy of information that can be helped by the layout?

Many designers talk about what’s above the fold and its importance. It’s true. What’s above the fold is of huge importance. Honestly, though, most users come to a website ready to scroll. My advice is to use what is above the fold to get the user to take an immediate action and/or to scroll down the page to learn more. I also suggest using that space to immediately inform the user about who you are as an organization. This can be through text, images, video, design, etc. Content above the fold should impact the user immediately and move him or her down the page to more information and calls to action.

Conclusion

There are many things to think about when looking at designing or redesigning a modern website. I apologize for having to leave out so much of the rest. A new website begins with organizational self-discovery and an internal conversation. From there it moves over into a conversation with the user. If you are clear on who you are and what you’re doing as an organization it will help you to effectively engage users and visitors to your site or blog. Through that engagement a connection is made and your organization begins to move quickly in positive directions. This is the game plan, at least. The waters of reality,however, are much more difficult to navigate.

I’d love to hear your feedback on these 5 key elements of nonprofit web design. Are there some I’m forgetting? What did you learn? Has your organization recently gone through this process? If so, what did you learn along the way? Leave a comment below.

Website Complexity and Maintaining Your Site

Everyone wants an amazing, complex, do-everything website. A key question to ask, however, is, “What do I have the time and expertise to maintain?” The more complicated the website, the more need there will be for complex maintenance.

Think about websites as new cars. You buy a car and the dealer hands you the set of keys. It’s easy enough to just take the car home and begin driving it. But what about maintenance? Eventually, it will need some work. The two big concerns are: 1) Where will you go to maintain the site and 2) how much will it cost?

Before the complexity of the modern car men and women all over America would fix their own cars. They were relatively simple combustion engines and electrical components. While major work required the help of a certified expert (or a more knowledgeable neighbor) most everyday maintenance was within the reach of car owners. As cars began to grow in complexity (e.g., the introduction of computerized components) car maintenance began to move beyond the capacities of most car owners. Today, owners don’t handle as much of the maintenance and repair as before.

A website is like the cars above. It was once relatively simple to maintain a website. If you knew HTML and CSS, you had all the tools you would need to create and maintain a very nice website. With the introduction of more complexity in web design, however, much of that maintenance seems out of the scope of the normal site owner. Site owners must learn not only HTML and CSS but also other, more complex, languages such as PHP, Javascript, and AJAX. There are also third-party management systems to learn. These systems make creating a beautiful and complex website possible for the average person but do require some time and experience learning.

I’m sometimes asked to create a complex website, which I’m happy to do. However, with that complex website comes complexity in maintenance. A simple brochure-type website created in WordPress will be a breeze for the average site owner to maintain. The introduction of more complex (i.e., interactive) elements, however, requires a significant investment in time learning how to maintain those elements.

So the next time you ask your developer or designer to add in complex functionality, consider whether or not you have the expertise already–or the time to gain the expertise–to maintain those complex functions. If not, then it’s either time to hire someone to care for your site or scale back the complexity of the website.

Do you have a website that is too much for you to maintain? I can help. I offer two maintenance packages that are priced to fit your budget. I can help you maintain your WordPress website so you can spend your time and energy growing your business or organization. Find out more about my maintenance packages or contact me today.

It’s Time to Give Focus to Your Website

Give your visitors the shortest path to what you want them to do

A change is taking place in the way that people use the Web. That means that the way we create and present websites must change, too. Sadly, much time and energy is spent utilizing old trends to fit new user behaviors.

What do I mean?

There is a lot of Web out there these days and people have to traverse it each day. They hit the normal social sites several times per day, but there is always a chance to discover something new. When a site visitor comes to your site, you have a very short time to tell the visitor what it is you really want to say and what you want him to do.

That’s it. What is it that you really want to say? Is that on your home page? Is that the first thing the visitor can take action on?

I was working with a client recently who wanted to add 20+ options on the front page for visitors to click through to categories. Functionally, it was doable and would have worked out fine. But if I were a visitor to that site, I would have over 20 choices to choose from initially. It was a digital magazine so she could get away with that, but for most sites 20 options would be way too many. (I advised her to cut it down to her 12 best-performing categories, which she did.)

Your website is like a funnel

Regardless your topic or brand, think of your website as a funnel. The front page of your site is one entrance into the top of the funnel. It’s okay to have more than one entrance but the fewer you have the more clear the choices will be. The more clear the choices, the more you will weed out visitors. So there is a trade-off there.

I like to think from the end to the beginning. What is it that you ultimately want visitors to do before they leave your website? That is the bottom of your funnel. No matter which path they take to enter the funnel, it should all be moving down to that action you want them to take.

Some examples of actions would be giving a donation, buying a product, sending an email, or making a phone call. It must be an action that leads to something valuable for your organization.

You could have more than one funnel on a page, but the most effective sites will have one funnel with multiple entrances. You’ll appreciate the simplicity when it comes time to manage it all.

So the important thing here is to rethink your organization’s website from back to front, bottom to top. Consider where you want the user to be at the end and then build the path to get them there.

You have control of your website and content. Create a site where visitors think, “This is exactly what I needed and was looking for. I can’t wait to sign up/call/email/find out more.”

(You don’t have to tell them that’s what you wanted them to do all along.)