The good news is that Google has made it easy to choose from a selection of fonts for your website — and they’re free! They are also “website friendly,” meaning they don’t cause any slowdown when someone visit’s your site.

The problem is, with so many fonts to choose from, how can someone decide what font is right for their brand?

There are a few things to keep in mind that can help …

Serif vs. San Serif Fonts

Serif fonts, like Times Roman, tend to have a more serious feel because of the extra strokes found at the end of the main vertical and horizontal strokes of some letters.

Sans serif fonts, like Helvetica or Arial (Microsoft’s ripoff of Helvetica) are more modern looking. They do NOT have the additional strokes, which makes them more approachable — some would even say more human.

So, a major decision to make is how you want to be perceived as an organization. And while a lawyer’s office or financial planner might want to use a serif font to add a certain gravitas, a hair salon or web design firm will most likely want to use a sans serif font to help them be perceived as modern and approachable.

Google Fonts

If this is your first exposure to even thinking about font style on your website, it may be a good idea to check out Google Fonts yourself. Again there are hundreds of free options to choose from, and they’re good fonts. Once you find one or two that you like, talk with your web design firm, and have them implement for you. The safest way to do this (so actual visitors are not seeing you testing out fonts) is to create a dev site where you can view font selections on your website. It’s VERY easy for a web designer to swap out a Google Font, so you can check out a few options and then implement into your live site once a decision has been made.

Helvetica (the documentary)

If you want to geek out a little more with fonts, I highly recommend Gary Hustwit’s documentary, Helvetica, which is a great exploration of the Helvetica type face, as well as a primer into the world of typography.

The Visual History of Type

If the film is not enough, or if reading is more your thing, then check out The Visual History of Type, by Paul McNeil. This book is also great for working out as it’s really heavy! It’s also a comprehensive, detailed survey of the major typefaces produced since the advent of printing with movable type in the mid-fifteenth century to the present day. And it’s truly beautiful …

When it comes to web design, fonts are only one part of the equation, but they’re an important one. Being deliberate about font you choose for your website can go a long way in helping clearly define your brand.

That said, which type is your type?

Want more tips and insights from Cuppa SEO?

The post Web Design Tips: Figuring out Fonts appeared first on Cuppa SEO.

As you can see, Dollar Shave ensures that everything is clear in their navigation. “Our Blades,” “Our Products,” and “Gift,” all tell you exactly where you’ll land when you click on them. “How it Works,” “Reviews,” and “Account,” do the same. Crystal clear, right?

The only not-so-clear component of the Dollar Shave Club navigation is “Box.” This is actually what’s going to be contained in your next shipment, or box, but it’s not necessarily clear what this is until you’ve become a customer.

Dollar Shave Club also has what’s called a secondary navigation. You can see it on the left, where it says “Menu.”

When you click on “Menu,” the secondary navigation opens up …

As you can see, the hierarchy of the secondary nav is identical to the primary nav, which is good.

But here’s the question: why is this secondary nav here at all? What is the purpose of its existence? In terms of UX, it adds another element to the page. And from we’ve learned, the more elements a page has, the more a visitor has to think. The more they have to think, the better chance they will get distracted from what you want them to do.

On the one hand, when the secondary nav is collapsed, it’s is non-obtrusive. But, again, why is it there? The only difference between the secondary nav and the primary nav is the fact that the products are all laid out nice and neat in the secondary nav. But here’s the thing: this could EASILY be accomplished by simply creating a dropdown menu in the primary navigation under the “Products” tab.

When it comes to the user experience, if there’s a simpler way — do it. In this case, the simpler way is painfully simple AND OBVIOUS.

The only item in the secondary nav that doesn’t appear in the primary nav is “Original Content.” Essentially this is the Dollar Shave Club blog. This could easily be added to the primary nav as, “Blog,” rendering the secondary navigation useless in the process — which would make their user experience even better.

By the way, remember when I said that your navigation is no place to be cute or metaphorical? Dollar Shave Club forgot that when they decided to call their blog, “Original Content.” Now, since you’re on a shaving site, it’s implied that the content is going to be about shaving and men-related topics. But original content could be a lot of things — like a book, or the latest Netflix produced TV show — so why not just call it what it is, which is a blog?

Yes, this is a small point, and it may seem trivial. But how many ambiguous things does it take to make your visitor confused? Anything that is even remotely confusing needs to be made clear.

One Navigation

As you can see, whenever possible it’s always best to have ONE site navigation. For a large portion of websites, a single navigation with dropdown menus will suffice nicely. If you have a more complex hierarchy of subpages, it may be necessary to have a primary dropdown menu that drills down into a secondary dropdown menu.

For instance, on the Cuppa SEO website, the primary dropdown menu looks like this:

And the secondary dropdown menu appears when you hover over one of the primary dropdown choices. In this case, my cursor was hovering over “Web Design”:

 In this example, my cursor was hovering over “Search Engine Optimization (SEO)”:

To keep the UX clean, and easy for the user to digest, it’s important that the secondary dropdown be in alignment with whatever service or produce its expanding upon.

To further clarify what the secondary dropdown is associated with is to have the primary dropdown you’re hovering over change color. On the Cuppa SEO site this color change is very subtle, and does not translate well to print, so I’ve enhanced it here so you can see what I mean:

Other Types of Navigation

If you’re housing dozens — or even hundreds — of product pages, you can also use mega drop downs, like Williams-Sonoma …

Or if you simply must have a secondary navigation, make sure it’s consistent on every page of your site like Banana Republic does.

Some sites are selective about when the secondary nav appears or is hidden. This can cause confusion, leading the visitor to feel stranded or lost (bad UX).

In the case of Banana Republic, the information contained in the secondary navigation is also present in their primary navigation. But the reasoning behind this is different than the Dollar Shave Club (DSC) example we examined above. With DSC, there wasn’t an obvious reason for the secondary navigation’s existence.

But in the case of Banana Republic, the secondary navigation is used very wisely.

It’s used on EVERY landing page for every product category (Men, Women, Petites, etc.) for a very specific reason: to help clarify what my options are WITHIN that particular product category without having to use the primary navigation.

With Banana, there are so many product pages that once someone drills down to a section they want to be in, having the secondary nav available on the left-hand side of the page actually improves the user experience. This is because, once a visitor has drilled down to a particular product category, the secondary nav acts as an at-a-glance guide as to what other options they have within that product category. In other words, it’s clarifying the situation, and placing the visitor on solid ground.

As you can see, the secondary nav is NOT present on the homepage …

This is not an oversight. The secondary nav has been removed with good reason: the visitor has not yet provided any information as to what product category they’re interested in shopping yet. And since the secondary nav is meant to provide easy clarification as to where you might want to go next within a specific product category, there’s no use for it on the homepage. 

Typically, multiple navigation bars, or primary and secondary navigation bars can be tricky and difficult for the user to navigate — which means a bad user experience.

Let’s take a look at a site with multi-navigation hierarchies that can create a poor UX for a visitor …

Navigation #1 & #2
In the above example, #1 is the primary navigation. Then you’ve got a secondary nav above it.

Already, the user’s focus is split in two — at least for a few seconds, which can be enough to confuse or distract someone. Not the desired effect.

Navigation #3
But this website isn’t done yet. The third navigation (#3) sits above the secondary nav. This is the search box and social buttons. It’s typically a bad idea to place social buttons at the top of a web page like this for two reasons:

• Social buttons add another layer of navigation to the site. Now the user’s focus is split into three.
• What is the purpose of those social buttons? To bring someone to one of your social media platforms, right? As we’ll see in Part 4 of this book, social media — very often — is a tool that helps drive people TO YOUR WEBSITE.

When you place your social buttons right up at the top of your page, in addition to competing with your primary navigation — it also runs the risk of directing someone AWAY from your website.

When this happens, you’re directing traffic the wrong way! Once we’ve got someone on our website, the last thing we want to do is have them leave! More on this in Part 4, but I wanted to address, albeit briefly here, too.

Navigation #4
Nav #4 is an advertisement for Advil. And although it’s not technically part of the navigation (it’s a call-to-action), I’m counting it here because it is taking up prime real estate where your primary navigation should be!

Navigation #5
This navigation sits mid page, disjointed from the primary navigation. Nav #5 contains news-centric information. Something that could easily be communicated through adding “News” to the primary nav, along with a dropdown menu to accommodate each tab.

At this point, the visitor’s focus has potentially been split five times — and that’s not even counting the slider they use for multiple hero images (bad for UX) and the other links and call-to-actions on the page.

Whew! That’s all we’ve got for today regarding UX and desktop navigation. Next time, we’ll tackle mobile navigation.

Related Content:
User Experience & Website Navigation Video

The post Website Navigation and the User Experience, Part 1: Desktop appeared first on Cuppa SEO.

Another somewhat popular web design format is parallax design. And although the name may not be overly familiar to you, I’m betting you’ve experienced this type of site, at least a few times.

A parallax website is a site that is often referred to as a “scrolling website.” They’re typically comprised of a single page, or just a handful of pages, with the homepage containing a TON of information.

On these scrolling websites, what happens is you start scrolling down for more info, and down, and down, through what appears to be a never-ending scroll. And as you scroll, there are layers of imagery and text on the page moving at different “speeds” to create visual interest, tell a story, create depth effect, etc.

This is often a lot of fun for a designer to build, as it provides opportunity to be really creative. But it’s bad for UX because it’s really hard for the visitor to easily locate the exact information they need. In addition, parallax sites make it hard to know which end is up. In fact, all of those moving parts may cause you to feel nausea (not kidding).

It’s almost like parachuting out of an airplane, but you’ve got to keep your eyes closed the whole time — so you never know where the ground is.

This can be very unsettling for the viewer who’s looking for “solid footing” as soon as they arrive on your site. What I mean by this is that website visitors, mostly unconsciously, have a need to understand the lay of the land when they arrive on a website. They want to feel grounded, and be able to quickly understand where they are without having to think about it.

Since we use the internet every day, it’s easy to forget that it’s a virtual platform made up of pixels that we view. To assure a good UX, we’ve got to provide visitors with this sense of solid footing by implementing all of the user experience strategies we’ve talked about thus far. They need to know “this end is up, and this end is down.” Solid footing, on solid virtual ground. We don’t want them feeling like they’re free-falling or off balance — which is exactly what often happens with parallax sites.

If you’re on a desktop computer, you see an example of a parallax site on your right. If you’re on a mobile device, you probably saw the image at the top of the blog post (and wondered what the heck was going on).

The website in this example goes on, and on for nine whopping on-screen “pages” (on a 13” Mac). Yellow lines represent scroll points, meaning you wouldn’t be able to see what’s below the yellow line without scrolling.

One final note about Parallax web Design…

… is that like anything else, there’s no hard, fast “best practice” for every circumstance. I’ve seen some parallax sites for artists (showing one piece of art per “page”), and musicians (showing one album and/or music video per “page”) that work really well. But for most businesses and organizations, there are far better choices that provide a remarkably better user experience.

Thank you for visiting the Cuppa SEO blog!

The post The Pitfalls of Parallax Web Design appeared first on Cuppa SEO.

From a global view, conversion is clearly leading people from where they are, to where you want them to go.

Simple right? But once you dive in, there are a lot of pieces of the puzzle that add up to successful, or unsuccessful conversion (CV). Let’s take a look at each of these pieces for a better understanding …

A Clear Intention: What’s Your #1 Goal?

There’s nothing random about leading a website visitor from where they are to where you want them to go. As you might imagine, it’s quite the opposite, which means you need to have a very clear intention of what you want your visitors to do once they land on your homepage, subpage, squeeze page or blog.

This clear intention can only come from identifying THE #1 THING you want your visitor to do next after they’ve visited your site. Do you want them to call or email you? Shop? Your #1 thing should align nicely with your organizations #1 goal.

Using a dental office example, or any medical office for that matter, the #1 goal (call-to-action) is to get new or existing patients to call to make an appointment.

So, in this case, is a free giveaway like a dental health mini-book or a PDF of the top 10 ways to prevent caveties, in alignment with our #1 goal? NO. Which means in this case, and many others, free giveaways are not the best call-to-action (CTA). But we see it all the time right? Sign up for this, download that, watch our video. Often times, the goal here is to build a bigger email list with YOUR name on it!

Now IF, and only if, your primary goal is to build a big email list — again for a very specific reason — go ahead and focus on getting as many qualified emails as you can. But you better make sure you’re offering excellent value for the price of handing over my name and email address. In an upcoming blog post, we’ll talk all about the dark side of conversion, where signing up for ONE e-book can quickly become daily harassment from someone you never wanted in your inbox in the first place!

You get the point. Keeping your #1 intention in mind when creating your CTAs will help you be more focused, more successful — and remain on a clear path!

Make it Easy for Visitors to Take the Next Step

Notice how I said “next step,” there, and not something like “getting your visitors further down the funnel.” Keeping in line with our relationship-building philosophy, it’s important to look at people as people — not as an object you push through a funnel.

So how do we make it super clear and easy for someone to take the next step in becoming a client or customer?

This is often accomplished through the use of well-placed buttons. But where do those buttons go, and what do they say? Here’s an example …

As you can see, in addition to the #1 CTA, “Do It,” there’s also a second CTA, which is the Dollar Shave Club video. Which leads us to the question …

What’s Your #2 Goal?
Often times, we need a secondary, #2 goal in case our visitor is not ready to take action on our #1 goal. This secondary goal can often lead to a visitor taking action on our #1 goal, but without it, they might not engage at all.

Why is the video there? Think of it this way:

Your primary, #1 CTA is like the first date
The person you’re talking to is ready to take action, to go out for dinner. In the case of Dollar Shave Club, this represents the “DO IT” button — I’m ready to buy, get out of my way! I’m sick and tired of overpaying for razor blades, I’m busy — and I am psyched that my friend told me about Dollar Shave Club — let’s buy some blades!

Your secondary, #2 CTA is like the introduction
“Hi, I’m Joey, nice to meet you. Tell me a little about yourself.” This is the part where you get to know someone enough to decide WHETHER OR NOT YOU WANT TO GO ON A FIRST DATE. The video accomplishes this because it does just that — It helps us get to know Dollar Shave Club, with NO commitment at all. Are they for me or not? Watch the video and find out.

Solve a Problem: Make it About Them, Not You

Just as with your website and blog content, your conversion strategy/CTA needs to solve problems. Put yourself in your customer’s shoes and determine what their pain points are. Once you identify them — show me you can solve them.

It’s easy to get caught up in explaining the awesome process you have, which makes your company so unique. I could talk for hours about all of the nuances of SEO and how we apply optimized content into every nook and cranny of your website. Most people don’t care. If they’re looking for an SEO expert, that means they want to be more visible in natural search results. Now if I say, “Cuppa SEO can help you get found on Google,” I just let them know I can solve their problem — and I’ve told them in a succinct, easy to comprehend way.

If they’re a tech geek like me, we can always talk more about the details later. But first, they need to know I can help remove their pain.

Place CTA Buttons Where They Make Sense

Not every page needs a CTA, but if it makes sense, place one there. If a button seems too intrusive, then insert a text link instead — in some cases, you might want to do both! In general, your homepage, squeeze pages* and subpages are good candidates for CTAs. Your blog is not. Try to leave that as your relationship-building place, and if you use a CTA, make sure it’s a soft sell.

*What the Heck is a Squeeze Page?
This is a specialized page that’s specifically designed as a payoff to your CTA. Although there will be times when leading someone to your contact or products page may be totally appropriate, other times call for a different solution.

For example, on my SEO services page, I have a call-to-action, “Contact Us About Your SEO Needs” that leads to a minimalist squeeze page:

SEO Services Page

Squeeze Page

The squeeze page is devoid of any and all non-pertinent information or services. It’s an obvious, direct payoff to the CTA from the previous page.

In this distraction-free environment my visitor is presented with the opportunity to get in touch via phone, email or by filling out a SIMPLE form. I’ve made it easy for them to accomplish the task they set out to do when they clicked on my call-to-action.

One more thing …

When it comes to conversion, always be honest, be real, be trustworthy — and avoid manipulation.

The post Understanding Point of Conversion (POC) on Your Website appeared first on Cuppa SEO.

In this article, we’ll answer the question, “what is conversion,” and discuss a handful of solid conversion strategies.

What is Conversion?

In order to better understand conversion, and the role it plays in your online marketing, let’s first take a look at what comes before conversion. In other words, what is the path a visitor might take to arrive at the point of conversion (POC)?

Well-developed search engine optimization (SEO) is how we get more visitors to our website. But getting more traffic to our website is not enough. It’s the beginning of a process that leads a visitor to the point of conversion. Once someone arrives on our website, it’s a solid user experience (UX) that keeps them there. And once we’ve got a visitor on our site, and they like that they see, it’s time for conversion …

In a nutshell, conversion is a strategy that takes a website visitor from where they are, to where you want them to go. Please note how I’ve worded this, “from where they are, to where you want them to go.”

For example, let’s say you’re a dental office and a potential new patient lands on your homepage. The next step you’d like them to take is to call you, which means your conversion strategy needs to be a call-to-action (CTA) that makes it easy for that potential new patient to call and make an appointment.

More often than not, your call-to-action will take the form of a button on your website.

How to Use It

This call-to-action button needs to be properly placed on both your desktop and mobile site, respectively. The reason for this is because of the differential in screen size between a laptop or desktop computer vs. a mobile phone or tablet. Different-sized screens call for different solutions, which often go beyond simple responsive design.

On a laptop, or even a tablet, a call-to-action may work very well placed on the hero shot (main image at the top of the page). On an iPhone, that same CTA needs to go somewhere different to be effective — not to mention remain readable for a good user experience.

In the following example, we’re using two CTAs on the homepage for Roger Wolkoff’s website. Roger is a professional speaker, and he’s also one of our clients.

• CTA1, the most important call-to-action for this client, “Book Roger,” is the number one action Roger would like a potential client to take. This button is for visitors who are ready to hire Roger. Metaphorically, this potential client is ready for a first date. They probably already know Roger, or have been referred to him (he’s awesome, BTW). Regardless, they’re ready to discuss booking him as a professional speaker for an event.
• CTA 2, the second call-to-action, “Watch Roger Speak,” is almost as important as the first — but it serves a different purpose. This CTA is for visitors who are not ready for that first date yet. They need an introduction, “hi my name is Roger and this is who I am,” before committing to go out for dinner. In other words, CTA 2 is there for those who are not yet ready to commit to booking Roger, but want to learn more.

Those same CTAs on mobile serve the same purpose, but need completely different placement to remain effective:

Now CTA1 and CTA2 have become buttons that sit below Roger’s hero shot and tagline. Easy to spot, easy to read — and easy to understand. That’s a recipe for great conversion and an excellent UX!

Speaking of UX, in both of these examples, there are a lot of user experience strategies going on that we won’t review here. But if you’d like to learn more about UX, feel free to click on the UX Categories section on the right for more articles on the subject.

As you can see from the examples above, there should never be anything random or non-critical about where your conversion strategy leads someone. This means you have to be crystal clear about the intention of your conversion strategy. In other words, if you’re that dental office looking to encourage more people to call and make an appointment, don’t make the mistake of offering a free e-book as your CTA.

I hope this helps give you a better understanding of website conversion!

The post What is Website Conversion, and How do You Use It? appeared first on Cuppa SEO.