Pillars of Engaging and Successful Mobile UX

mobile-users

photo credit: Sowerby Bridge Rushbearing via photopin (license)

A mobile phone is an intensely personal device and possession. We use them to make calls, send messages and share content that we like, all very intimate actions that are also highly user-centric. Naturally, mobile users expect a personalized browsing experience as well.

Engaging users and retaining their attention is not an easy job in today’s world. It takes more than compelling content to get your mobile users interested and enthused about your site. Advanced analytics on mobile platforms have made it possible for you to gauge user interaction and involvement, thereby tweaking your site till it achieves the desired results.

Below are a few tips for you to keep in mind as you perfect your mobile ux strategy.

Know Your Goals

Photo Credit: NathanF via Compfight cc

Photo Credit: NathanF via Compfight cc

So, before you spend even a single second designing or developing, you will want to stop a moment and get a clear grip on your goals. Are you delivering written content? Are you selling products? Are you trying to improve engagement – social shares, comments, etc?

Your goals will drive your design. Time and again, I’ve known clients who embarked on a long and unfortunately expensive mobile design process only to find that their product was not aligned with their goals. Let’s learn from their mistakes and know before you code! Remember that you’re looking for conversions of some kind, whether that’s a sale, like, share, or comment. In an article on the 5 W’s of UX, Samantha Kalita gives some excellent advice on how to pinpoint your goals.

Think of Going With an App

Mobile and responsive websites are essentially passive. They are optimized for mobile phones but they require the user to come looking for them which means you miss out on the biggest positive of mobile technology- the proactive, vibrant, personal and timely nature.

If you have a dynamic, rich and user-centric website that your customer enjoys to read, share and engage with on a daily basis, the time is not very far when he would be willing to download your app for ease of use and convenience. This is a big victory for your web outreach and earns you a personal connection with the person interested in your product. At that point, it’s time for you to invest in a responsive and optimized site or an app suited for mobile use.

The main benefit of having a native mobile app is that it strives to catch the user’s attention at all times. Timely and relevant push ads, information on deals and discounts, interesting news and updates on new product launches become easily accessible to the app user. He is never ever not in touch with you, thus making it easy to build brand loyalty and brand engagement.

Get Personal

Though the capabilities of smartphones, it’s easier than ever before for marketers to get in touch with their target market. They no longer have to create mass market ads and hope that they will do the trick.

Marketers need to understand their customers, and their aspirations, wants, needs, problems and buying environment, more now than ever before. If your customer is choosing to engage with you through her phone, she expects a personalized experience. You will need to pull in data from the phone regarding her geographical location and movement. You should try to understand her interests, identify wants, and engage with her needs in mind – your mobile app or site needs to deliver.

If you know your customer, you certainly have a chance of accomplishing your goals. Ultimately, understanding your end-users and why they’re coming to you will help you design in the best way to fully engage them. But without taking the time to really explore their goals and unique needs, you could end up with a beautiful design that may align with your goals but fall flat without the key ingredients end-users want.

In the case of mobile sites, the ability to leverage functionalities of the mobile phone from an interface to rich user data to hardware is limited. However, you can build in interactive and app-like features that will help you provide a more unique experience to your visitor.

Do Thorough Homework

With the mobile age dawning on us, almost every company in the world has jumped on to the mobile site or app bandwagon. With the plethora of apps and mobile sites out there, it is not surprising that only the most unique, engaging and rewarding app or mobile site will succeed.

Study up on apps that have already succeeded or are doing well, and see what works for them. Visit the successful and high-traffic sites in your niche and research how they interact with and engage visitors. You will be able to identify gaps that your site can strive to fill or personalized benefits that your app can deliver.

Keep Things Interesting

It is very important that you keep your site and app clean, simple and easily navigable.

If you run a news site, you should ensure that you provide concise articles without unnecessary clutter. The story should be easily readable and at the end, you can provide a link to other articles on your site. You can coax them to have a look at what is trending on your site or editor’s picks and similar articles. If they are pleased with the experience so far, they will definitely oblige.

Test, Test, Test

I can’t emphasize enough the importance of testing, for any design but especially mobile design. The good news is that there are many great tools out there for understanding how users are interacting with your content. The bad news is that these are of a fairly technical nature. But all are definitely worth giving a look…I promise.

02-mobile-design-hotjar

For websites, a recent favorite of mine is HotJar (freemium). You can get up to 300 actual videos of users interacting with your site on both mobile or desktop devices. Incredible! You also get a host of other tools. Another favorite of mine is Crazy Egg (paid) with their heatmaps, scrollmaps, and confetti charts for seeing what users are clicking where.

For native apps, check out Flurry. It’s free and has SDKs for iOS, Android, and several other platforms. You can track events, usage, and a lot of great technical specs about your users you won’t get otherwise.

Also for iOS, Apple recently rolled out basic usage reports right in iTunes Connect under the Analytics section. For now, the Apple solution is pretty basic, but here’s hoping it gets better sooner rather than later.

Usability Considerations

I’m just going to leave this right here…

03-mobile-design-usability

This handy little graphic shows the ease of touch for certain areas on various iPhones. Specifically for right-handed users, it gives you a sense of where on the screen you should be placing key items. Whatever your goals are, make sure end-users can interact with elements that fall within the “natural” areas.

Also, it’s worth noting that people tend to have one of three ways they hold a mobile device:

  • One-handed while interacting with their thumb – typically the most common, especially with smaller devices.
  • Two-hands while interacting with a finger – one hand holding the device with the other for touching the screen.
  • Two-hands while interacting with two thumbs – typically for typing.

Keep in mind these valuable considerations while creating your mobile design to ensure that usability is as easy as possible for your end-users.

Readability

There are many, many folks out there with opinions on font sizes and types for mobile design readability. So, it can be difficult to know which font advice to take. However, thanks to Google, we have a good fallback source on this topic. Check out Google’s Developer portal where they’ve recently rolled out their latest research. In short, 16px font with 1.2em line-height is the best way to go, according to their findings.

Don’t forget about the font type as well. Typically you’ll want to stick with a sans-serif font for titles and larger text, as with any design. And use a serif font for larger sections of text. Avoid script fonts unless it’s part of your brand and you limit yourself to using them in very specific places.

05-mobile-design-times

For a great example, check out New York Times’ website. They have an Internationally recognized scripted font for their website name. They use serif fonts for titles and content, but the font type is different for each. The Boston Globe is another solid example and make sure to check out both their desktop and mobile designs as they do an amazing job of both.

OS Specific Design

For those developing native mobile apps that will likely be used on different platforms (iOS and Android, for example), you should use elements that are OS specific. While this can be a moving target, that’s just part of the gig.

Users expect certain functionality and ways of getting tasks completed based on the device type they have. Menus, select boxes, toggle switches – these are just a few areas that can be tremendously different from OS to OS. For a quick case study, open Facebook on an Android device and compare it to Facebook for iOS. There are a lot of big differences! Check out this nice comparison from JackRabbit:

06-mobile-design-jackrabbit

For the de facto guides for iOS and Android, here’s where to go:

Designing mobile content for the web can be a bit tricky if you’re trying to deliver an OS-specific experience. Yet, thankfully this can be done if you use a combination of JavaScript and CSS. For sites taking advantage of the “Add to Home Screen” functionality (discussed below), this can be especially useful. For an incredible example, check out Bootcards.js. While it’s primarily for Bootstrap-based sites, it will give you an idea of how JavaScript and CSS can be used together to deliver on an OS specific look and feel.

Media Queries for Mobile Web

Finally, I can’t emphasize just how important are media queries in CSS – they are certainly the backbone for delivering content optimized for mobile devices. There are scores of device specific media queries. This CSS Tricks article keeps an updated list of the most common devices (99 as of the latest count): Media Queries for Standard Devices.

And now that I’ve said the above, I also have to mention that there is a movement away from breakpoints and toward flexible layouts for mobile design. For example, the latest standards for flexbox design are supported in most modern browsers, but here’s a compatibility chart (see image below) that shows why media queries are still going to be around for awhile along with all the details you’ll need for implementing: Using CSS Flexible Boxes.

07-mobile-design-flexbox

Evaluate Relevant Metrics Regularly

It’s not enough if you are only measuring the number of people who visit your site or click through your ads. You also should measure the duration of each session, the pages visited in each session, how much time they spend in your app, social shares, comments/reviews/ratings accrued, and many other engagement parameters. There are several key criteria that app marketing experts consider as yardsticks to measure the success of an app.

Various sites and apps have different methods of tracking revenue. It may be actually on-site or within app purchases, time spent consuming content, in-game currency or ad impressions. You can evaluate how each segment performs and take steps to improve user engagement and revenue for the less successful segments.

Mobile Design is the Future

Hopefully, everyone knows that this is not an overstatement, especially if the rest of humanity is as lazy as I am. I mean, who wants to get up from the couch to do some quick research on a PC when their mobile device is already in their hands? Or what about when researching best prices while shopping? Or checking out an ad while at the bus stop?  All of these scenarios and more happen every day to a great many people. Many people, like several of my friends, don’t even own a laptop because, why bother when everything is (or should be) available via a mobile app or mobile website?

So, as a designer or developer, your future certainly lies in mobile design. The more you know about this topic, the more highly sought after you’ll be.

Start Your Own Freelance Business!

Learn how I went from a corporate employee to owning my own freelance business and blog. Sign up for my email newsletter and get a FREE copy of my Ebook plus a coupon for 10% off your first billing cycle on any Vandelay Premier plan!

Looking for hosting? WPEngine offers secure managed WordPress hosting. You’ll get expert WordPress support, automatic backups, and caching for fast page loads.

Comments are now closed on this post.