As a matter of science, simplicity is almost always better. People respond to simplicity the same way they did to the advent of cars in the early twentieth century. Sure, they had horses and bicycles to get around, but traveling this way was exponentially more time-consuming and taxing than through an automobile. Compare that to the plight of the modern day mobile user: unnecessarily long form fields, tiny call-to-actions, and pinch-to-zoom to read text? No, no, and please no! These are all mobile design faux-pas that you need to avoid at all costs. The fate of the Internet depends on it.
This begs the question: is there some way to improve and simplify a mobile user’s experience the way cars revolutionized and streamlined commuting?
The answer is a resounding yes, in case you were wondering.
When you have less real estate on your screen, as is the case with mobile, you need to be thinking with your index finger and thumbs. Every square inch of the screen becomes important to optimize. Mobile website design strategy should very well differ from your desktop design strategy. So how do you utilize simplicity to guide a seamless user experience? I’m glad you asked.
Responsive Web Design
This should come as a surprise to no one. For the uninitiated, responsively designed websites are coded such that they will always be optimized for the screen size they’re being viewed on. In the past few years, mobile usage growth has experienced an explosion in popularity not seen since the advent of the iPod and proliferation of cat videos on the Internet. Responsive web design is now the de facto standard in mobile website design and is heavily encouraged by Google itself.
When you optimize your website for mobile devices, users will have a better experience. When’s the last time you had to pinch to zoom on a mobile-unfriendly website? It’s a chore that makes for a terrible user experience, not to mention the sour taste left in your mouth long after you’ve abandoned the website. On the other hand, by simplifying your users’ browsing experience through responsive website design, you’ll be rewarded with conversions, referrals, loyalty, and a pat on the back from our favorite pal: Google.
As Kent Lewis, President and Founder of Anvil Media, Inc. sums up,
Optimize the mobile experience. Create pages with mobile screens in mind. Ensure your website is responsively designed and optimized for quick loading times.
A responsively designed website will dynamically adapt to whatever screen you’re browsing on. But instead of writing out the explanation, let me simplify it for you by showing – not telling. It’ll be a 15 second field trip tops, I promise. Ready?
Take your cursor to the top right corner of your browser. Drag it to the left to reduce the size of the browser window.
Abracadabra!
See how the website impeccably transformed from full screen to mobile optimized? That’s responsive website design, and it’s the latest standard in web development because of its simplicity and ease of use. Simplicity promotes a (relatively) stress-free and seamless browsing experience.
That being said, developing a responsive website is only half the story.
Mobile Optimization: Understand Your User (Seriously)
How many times have you heard that phrase? Cliché or not, it’s one that every marketer, designer, and developer needs to live and breathe when creating anything for the end user. No matter what you’re doing, never lose sight of your customer. The only way you’ll successfully convert a casual visitor into a repeat customer is by understanding their every point of view.
Kris Appel of Ignition72 states,
You are not your visitor. Stop thinking that it needs to be perfect for you. It doesn’t.
David Waterman of The Search Agency adds,
When it comes to mobile optimization, the key is to understanding the intent behind someone doing a mobile search. In many cases, it will differ from the intent behind the same person doing a search from a desktop for the same brand information.
Users searching on mobile and on desktop will often have completely different mindsets. A mobile user may need to quickly call the same hospital for a medical emergency that a desktop user is casually researching for an upcoming operation. The key is to build a website that can simultaneously address both people in their moment of need. It must be quick to load for the mobile user, and include well written copy that educates the desktop user. It must display a distinct call-to-action (CTA) phone number for the mobile user, and include patient testimonials for the desktop user to aid in his research.
Understand your users and their intentions and design accordingly. To really reach your mobile customers, consider the following optimization suggestions that expand past just a responsive website. You’ll notice that every single idea below keeps the user in focus at all times.
a) Reduce the length of your forms.
No one likes filling out long forms, especially on a mobile device. Mobile users are on their smartphone browsers because they are away from their desktops. Generally, this means they are in a hurry and do not have time for impractically long forms. Simplify your forms by including only the most important fields. There’s no need to ask for birthday, a secondary phone number, job title, and favorite Pokémon when you’re in the tree trimming industry. Figure out what fields are absolutely required for you to reach out to an interested party and ask for those only.
I’ll let Chris Lucas, VP of Marketing at FormStack take over from here.
“Step 1: Reduce Form Size
We all know that long forms can be a pain to fill out. They’re even worse on mobile devices. Too much tapping, scrolling and correcting leads to higher abandonment rates. When building a form, ask for the essentials but don’t go overboard. Keep required fields to a minimum so users can cruise through the form quickly.
Step 2: Take Advantage of Conditional Logic
Conditional logic is a feature that reveals additional form fields based on how your user answers the form. For example, if someone selects yes, I am interested in receiving more information, conditional logic can make an email address field appear. If the user selects no, then the form remains the same. Conditional logic is great for mobile because it keeps your form as brief as possible for your users.
Step 3: Choose Fields Wisely
When you are using your smartphone, what is easier, a quick tap or typing? For most people, it’s much quicker to tap an option than to input full sentences. Checkboxes and radio buttons are simple to tap on a smartphone or tablet, and they display all of your user’s choices at once. Drop down options help to keep the form short.”
Again, notice how everything here is about simplifying the user’s experience.
b) Decrease load time of your mobile site.
By decreasing your load time, you’re decreasing the frustration level of mobile users and increasing the probability of them converting. I’m personally astounded at the number of sites that load pop-ups and flash elements that increase load times to a crawl, especially on mobile. I have places to be, people! As mentioned previously, mobile users are almost always in a hurry, so it doesn’t make sense to drastically increase page load time just to add a cool looking flash element to your site. Focus on simplifying your website for your user, and you’ll see website load times drop. It’s not rocket science.
Every second counts on mobile. If a webpage takes more than 3 seconds to load, 40% of users will abandon it. So ensure image file sizes are compressed, JavaScript is optimized, and no matter the device, that the performance is optimal.
Max at Online Optimism
c) Have easily distinguishable CTAs.
Remember the guy who was on his mobile device looking for a hospital near him to tend to a medical emergency? Imagine he landed on your website, yet couldn’t figure out how to call you. Chances are he will not have the patience to scroll through every page on your site to find a phone number to call. He expects it to be there staring at him on the screen the moment he lands on the page.
And rightfully so – make it easy for the user to accomplish their goal on your mobile website. For example, it’s paramount to have big buttons to guide the user into performing an action. Consider adding a “Tap to Call” button and making your “Contact Us” button (or its equivalent) loud and noticeable for starters.
d) No popups, please.
Having to close out popup windows on a mobile device is much more frustrating than on a web browser, especially if the site redirects to open the App Store or Play Store. Additionally, navigation onsite becomes tough when there are hover menus, for these cannot load on mobile sites. They will confuse your users and create major problems in their experience.
Max at Online Optimism
Pop-ups are the bane of a mobile user’s browsing experience. Instead of occupying the entire screen with a pop-up begging the user to join your newsletter list, try displaying it on the top 20% of the page only; it’s less obstructive and serves the same purpose.
e) Consider the less tech-savvy user segment
Mobile users occupy a wide demographic of people. Although a tech savvy 22-year-old might zip around your mobile website without a hitch, a 65-year-old retiree may not have the same experience. As a general rule of thumb, always simplify your website to accommodate the greatest percentage of your target users.
For example, the hamburger-style menu button that’s been widely adopted by almost every company may not be intuitive to a less technologically savvy person. Instead of using this:
Try utilizing this:
Simple – but effective. By simplifying your site, you are effectively simplifying a user’s browsing experience by eliminating ambiguity. That’s worth a whole lot of conversions.
Conclusion
This is by no means a comprehensive guide on how to optimize your mobile website, but I hope you understand my point. By simplifying the user’s browsing experience, you will see a rise in conversions and user interaction on your site. Oh, and did we mention that an optimized mobile website will boost rankings for your website on Google and other major search engines?
