When it comes to web design, not to mention online marketing as a whole, the world would be a better place if this book, As Little Design as Possible, were required reading for every professional.

Written by Sophie Lovell, the book examines the design sense of a man named Dieter Rams, who ran the design team at Braun for nearly 50 years. And although he created real-world (what I like to call analog-world) products, the concepts Dieter follows work in any medium — even in 2020.

In a nutshell his philosophy is: “less but better.”

When it comes to websites, less distraction, less movement, less confusion, less noise = less, but better design.

Maybe I should rephrase that as mindful design, as there’s still design involved …

Sure, movement on a webpage may look cool to the developers on a web design team — but that doesn’t mean it’s best for the website visitor (in fact, it can be quite nauseating). When we look at the visitor — the potential client or customer — design moves away from what “looks cool,” or what’s on-trend, and becomes more difficult.

Why more difficult? Because it moves into the realm of what’s the best way to design this for the USER so they have an outstanding user experience on a website, in turn making it more likely they will ENGAGE …

In other words, websites need to be designed so they are functional, easy to use — and look good, too.

In this case form follows function, as opposed to form following design sense that’s not grounded in the user’s experience.

Want more tips and insights from Cuppa SEO?

The post As Little Web Design as Possible appeared first on Cuppa SEO.

You can connect with them on an emotional level.

Here are a few ways to do that …

First Impressions

Once a user clicks on your website, you have between three and five seconds to show them what you’re all about in order to keep them there. If you don’t demonstrate that you have what they’re looking for in that time, they’ll move on to the next site. This is called the blink test. In order to pass it, you have to make a good first impression.

If your website is too busy, if it inundates the user with too much at once, or if it’s slow to load, that can elicit a negative user experience — and a negative emotional response — creating a bad first impression. Instead, focus on a few key images that are visually appealing, and give an idea of what your brand is like. You might even include an introductory video to let people know how you can help them. Whether it’s a a video, or text on the page, keep the focus on the VISITOR and their pain points. In other words, talk about benefits, benefits, benefits … At first glance, this advice may seem simple, but it’s often not followed. But a good user experience goes a long way in creating a positive emotional connection.

Oh, and by the way, stock photos will rarely engage with visitors emotionally. So if you have the budget, invest in original photography that places the website visitor front and center.

Usability

Aesthetics are great, but just as important in web design is how easy your site is to navigate. Is it clear and intuitive? Will it help the user go where they need to and find what they’re looking for? In other words, are next steps obvious?

A single menu across the top of each page of your site can go a long way in adding clarity.

In this age of instant gratification, a user will gain a certain amount of satisfaction, and even pleasure, from a website that makes it easy for them to see where they need to go, do what they came to do, and accomplish their overall goals quickly!

There are all sorts of ways to elicit an emotional response with your website, and different things work for different brands. So how do you know what your audience will like? Ask them. Do some research and determine what works for them, and what designs and layouts best evoke the emotional response you’re going for. Then use that data to create a website that will connect with your audience quickly and keep them using your site for a long time to come.

Want more tips and insights from Cuppa SEO?

The post Does Your Website Connect with Visitors on an Emotional Level? appeared first on Cuppa SEO.

The Cuppa SEO space is a fantastic place to meet with clients, colleagues and friends — and drink some piping hot coffee brewed fresh in our Braun coffee maker (pictured below)!

I am truly grateful.

If you’d like to stop by for a cup of coffee, just let us know!

Want more tips and insights from Cuppa SEO?

The post Introducing Cuppa SEO Web Design’s New Space appeared first on Cuppa SEO.

In our second installment of our SEO Tips series we discussed the importance of optimizing the main headline (also known as a “title” or “H1”) on a webpage or blog post. Today, we’ll take a look at optimizing sub headlines (also known as secondary headlines) on your website and blog.

The post Soup Up Your Sub Headlines with SEO appeared first on Cuppa SEO.

Copy (also referred to as content) that lives on your website and blog needs to be rich, relevant and benefit-driven. It’s got to solve problems — and maybe even identify problems your customers didn’t know they had.

The post Is Your Content Rich and Relevant — or Just Plain Yucky? appeared first on Cuppa SEO.

In this installment of our SEO Tips series, we’re going to be talking about optimizing the images on your website and blog.

The post Not All Images are Created Equal (Optimized Ones are Better) appeared first on Cuppa SEO.

In our SEO Tips series, we’ll be examining solid, tested strategies to help your website rank better on Google.

As you may have guessed, we’ll begin with the title tag.

Did you know that title tags are an important part of search engine optimization (SEO)? In reality, most people don’t even know what title tags are, let alone how to optimize one.

The post SEO and the Power of Your Title Tags appeared first on Cuppa SEO.

A picture (image) may be worth a 1,000 words. But if your images are named correctly on your website — they’re also worth more traffic, and more website authority with Google. On the flip side, poorly named images can actually hurt your website’s chances of getting found.

To ensure your website images fall into the former of these two options, follow these six steps…

1. Make sure you include at least one keyword or keyword phrase in your image name that’s relevant to your business and the product you’re talking about.

2. Keep your image names at a maximum of 50 characters total. Anything longer starts to look spammy.

3. Avoid_underscores_like_I_am_using_here, because they “dirty” your code, which is bad for SEO.

4. You’ll also need to avoid spaces in your image names. For instance, you DON’T want your image names to look like this:
Root Canal Dentist In Madison WI.jpeg

Which actually looks like this to Google:
Root%20Canal%20Dentist%20In%20Madison%20WI.jpeg

5. Instead of underscores or spaces in image names — use dashes (and initial caps are good too)! Like this:
Root-Canal-Dentist-In-Madison-WI.jpeg

Dashes are a “clean” way to separate your words so they’re easier for you and your web developer to read/identify. Initial caps also make the image name easier to comprehend to the human eye, so we always use this strategy, as well.

6. Name your Alternative Text (Alt Text). This is as simple as cutting and pasting your image name (as shown in #5 above) into the Alternative Text region in WordPress (when you’re uploading an image that’s already been optimized).

Once you’ve pasted it in, be sure to REMOVE the dashes, and use spaces in-between words (it’s OK in the Alt Tag), like this:
Root Canal Dentist In Madison WI

As you can see, we also remove the file type (in this case.jpeg) from the Alt Text.

If you follow these suggestions for every image you use on your website and blog, you’ll enjoy the benefit of a better-optimized website. If this seems overwhelming, feel free to contact Cuppa SEO and we’ll professionally optimize your images — an a whole lot more.

Happy image optimizing!

The post 6 Steps to Optimized and Better-named Images 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.

As an organization, it’s always tempting to give MORE information on one’s website. But more information can often have the opposite effect of what was intended.

Carousels make your visitor think harder. Every new rotating banner is new information that makes the viewer have to think, and even if that’s for only a few seconds, that’s a few seconds too many.

Yes, you should assume your customers are intelligent, and yes — you should also acknowledge they’re overwhelmed and super busy. As every new offer slides into view, you’re giving them more work to do. They’ve got to digest it, then decide if it’s more important to them than the previous offer(s). And then, after four slides, they’re asking “what was the first one again,” and possibly wondering how they get back to a previous offer.

Here’s an example of a website that presents a carousel of four offers on their homepage:

   
Instead of this plethora of information, your homepage hero image — and accompanying content and call-to-action (CTA) — should be like a very clear sign:

1. “You are here”
2. “Here’s how we can help”
3. “Do this next if you want to talk”

Instead of carousels, use a single image for better UX. Then, figure out the top one to three (maximum) things your visitor needs (address those pain points) and make them easy to find calls-to-action.

Good CTAs provide the right offers (client pain points that become your points of conversion), that are easy to find (which equals a good user experience), resulting in a more successful website. This “formula” often leads to increased qualified leads and decreased unqualified leads.

The post Web Design Tips: Avoid Carousels (Slideshows) appeared first on Cuppa SEO.