Mobile Web Design Archives - Cuppa SEO

Website Navigation and the User Experience, Part 2: Mobile

Joey Donovan-Guido — Mon, 28 May 2018 17:11:09 +0000

In Part 1 of this series, we talked about website navigation and how it affects the user experience on your desktop website. Today, we’re going to turn our attention to mobile …

MOBILE NAVIGATION

Just when you thought we were probably done talking about navigation — I spring mobile nav on you. Mobile nav needs just as much attention as desktop navigation. Luckily the same principals apply here, but they look different because we’re on a mobile platform.

Here are a handful of examples of mobile navigation with an excellent UX.

The first example is from the Dollar Shave Club mobile site. The second example is from the Lighthouse Healing Massage therapy site (built by Cuppa SEO). In both cases, the navigation follows a clear, easy to digest hierarchy …

If you have multiple services or products, another nice touch is to implement an accordion-style mobile nav. In other words, one that expands and contracts when there’s a dropdown menu. Here’s what this looks like on the Cuppa SEO site.

On the left is an example of the collapsed navigation. On the right is an example of the expanded nav, which is triggered when you click on “Services.”

NAVIGATION ORDER

The final point I’d like to cover regarding navigation is the order in which your tabs should appear.

It can be tempting to lead with your About section, just after your Home tab, but it’s not the optimal place for it. Businesses often feel it’s important that potential customers know their history and what they’re about. But if you remember when we talked about content in Part 1 of the book, this information is often less important to the customer. What they care about is their pain points being addressed.

Keith Gilmore, a local Madison friend and conversion expert, once told me a story about a person who broke their arm and was rushed to the hospital. When the person got to the emergency room, the doctor began telling him about her credentials — where she went to school, when she graduated, the different hospitals and private practice’s she’s worked at over the years, and how many broken bones she’s set back into place.

Now, do you think for one second that the patient cared about any of this? That patient is sitting there IN PAIN! He wants the doctor to fix his pain!

So, just as you need to keep your content customer-centric, the same holds true for your navigation.

Instead of a nav that’s ordered like this …

Make your nav look like this …

In the first example, you’re offered to check out “About,” “Why Artisan,” and a “Tour,” before you get to the services they provide. Yes, it only takes a few seconds to find the “Services” tab, but why diminish the UX in your nav unnecessarily? Remember, most people look for services when they’re in some kind of pain. Address their pain!

Social Side Note: notice that this website navigation also includes social buttons right in the navigation. Would you want to check out a dentist’s Facebook page if you needed a root canal? Although there are some cases where use of social buttons can actually be helpful (as we’ll see shortly), in most cases they won’t prove helpful as part of your navigation.

The second example is from one of our client’s websites, Roger Wolkoff, and of course it provides the “Programs” and “Event Planners” tabs right up at the front of the nav — making it all about the customer.

We hope this helps you create a mobile website navigation that’s geared toward a great UX!

Related Topics

Website Navigation and the User Experience, Part 1: Desktop

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

Google’s May Mobile-friendly Web Design Update

Joey Donovan-Guido — Sun, 29 May 2016 00:07:35 +0000

Are you aware of Google’s latest mobile-friendly update that rolled out this May?

Essentially, the update magnifies the importance of your website being mobile friendly.

Since it’s more important than ever to implement a mobile-friendly web design, let’s assess whether or not your website is serving you well with these five easy tips …

View Your Site on a Mobile Device

How does it look? Like the image on the left (non-mobile friendly), or the image on the right (mobile friendly)?

The Google Mobile-friendly Test

This visual assessment mentioned above is probably enough to know whether you’re mobile friendly or not. But why leave anything to chance when you can do a 30-second Mobile-friendly Test? To make sure your web design is meeting Google’s standards, simply go to their mobile-friendly test site. Once there, enter your full homepage URL (web address) to test. Once that test is completed, you should also run a subpage URL through the test as well. Google will tell you if you’ve passed or flunked.

Bonus Note: Even if your site DOES pass Google’s test, ask yourself if your web design offers a good user experience (UX) for your visitors, and if it has a clear call-to-action (CTA) that leads those visitors to the next step you want them to take.

What’s Your Traffic Like Now?

Up until now, has your site’s traffic been good? Being aware of how much traffic you’re getting now will make it easy to spot if it takes a dip because of the latest update. If it’s never been good, there may be other problems contributing to the issue including thin content or poor SEO.

Are you Depending on Your Website for More Business?

If so, what percentage? The reason I ask this is simple. If you DO depend on your website to gain business — it’s imperative you make it mobile friendly ASAP. Why? Because Google is making it harder and harder for non-mobile-friendly sites to get found.

If you DON’T depend on your website for business, then it may not be as imperative to make it mobile friendly.

Talk with Your Web Designer

Ask them what it will take to make your site mobile friendly. And ask them what you can expect from the mobile aesthetic once it is mobile friendly.

Talk with Cuppa SEO

If you don’t have a web designer, feel free to contact Cuppa SEO to discuss your website. The initial consultation is complimentary, and there are not strings attached.

One final note …
Mobile-friendly web design is often more than simply making a site responsive (so it’s adjustable to any screen size). It’s also about ensuring that the hierarchy of the mobile pages makes sense for a good user experience AND conversion. This is exactly how we address every website we work on at Cuppa SEO.

The post Google’s May Mobile-friendly Web Design Update appeared first on Cuppa SEO.

5 Mobile Web Design Tips for a Better User Experience (UX)

Joey Donovan-Guido — Sat, 02 Apr 2016 20:16:00 +0000

Talk about mobile web design, and being mobile friendly, has increased dramatically since Google started grading sites based on their “mobile-friendly factor.”

But mobile-friendly web design has been an important consideration since the very first iPhone allowed a person to search the internet in the palm of their hand.

Why? Because no matter what device you’re using — iPhone, iPad, laptop, or desktop computer — you’ve go to provide a good user experience (UX).

What is User Experience?

In a nutshell, UX is exactly what it sounds like: a positive, negative or indifferent experience a visitor has with something.

There are two main types of UX:

Analog User Experience: experiences you have in the real world — like a restaurant, supermarket, the gas station, etc.
Digital User Experience: experiences that occur, as you might have guessed, online

In the case of a mobile website, when the UX is good, a visitor will stick around, and actually look forward to coming back to your site. And when it’s bad, they will hit the back button, never to return.

To follow are 5 mobile web design tips that provide a better user experience — and make your site extremely mobile friendly, too! As our example, we’re using the Cuppa SEO homepage …

Sandwich Navigation: those three bars you see in the upper right hand corner are typically referred to as sandwich navigation. They’re your entire navigation collapsed into three little lines. This is the optimal way to present your mobile navigation. Once the sandwich is clicked, the navigation expands and allows the viewer to choose from the full menu. Sandwich navigation typically sits above or below the hero shot (top image) on a page.

The Hero Shot: this is the main image on your mobile page. It needs to be clean, clear and clutter-free — since it has to be understood on a much smaller screen. For this reason, any calls-to-action (CTAs) you have on your desktop hero shot need to be removed for mobile. As you’ll soon see, they go somewhere else.

Headline: the main headline on any web page is called your “H1.” It’s the largest headline on the page, and it should live toward the top. Whenever possible, limit your headline to 2 lines of copy. This keeps it easy to digest, and gives you more room for #4 and #5 on our list.

Introductory Copy: the first couple of sentences of copy needs to live here. You DON’T need to provide every little detail … at least not yet. Intro copy is meant to be just that — a brief overview of where the viewer has landed so they feel they have solid footing. This copy needs to be a large enough font for those of us with older eyes (or transition lenses) to easily read. Writers don’t dismay! The remainder of your homepage (or subpage) copy is still included for mobile websites. It will just live below your …

Call-to-Action (CTA): in Cuppa SEO’s case, we have two CTAs we want to share with visitors on the homepage: Web Design Services and SEO Services. In many cases, your business may only need one call-to-action. In all cases, your CTA should drive visitors to what you want them to do next (so choose wisely). As you can see, both of my CTAs live ABOVE the scroll line, which means the viewer does not have to scroll down to see them.

All of this adds up to a user experience that viewers enjoy, and that Google defines as extremely mobile friendly.

Next Steps
If you have a website, I encourage you to take a look at it on your smart phone to see if it’s following the best practices laid out above. If not, make the necessary changes. If you need help with the process, feel free to contact Cuppa SEO — we’re always happy to help!

For More About UX
Check our our article, Understanding Online Marketing, Part 2: User Experience

The post 5 Mobile Web Design Tips for a Better User Experience (UX) appeared first on Cuppa SEO.