Photo by Kerry Woo

Focus on the experience, not the device

“Mobile first” as a strategy forces us to focus on a specific device, but we should start sooner than that. Way before we consider our device or our canvas we need to think about what the user should walk away with after interacting with our sites. This typically starts with a goal, a mission statement, something that is at the core of your company, business, or product. It’s up to us as user experience craftsmen and women to preserve that experience throughout all the interactions our users will have with it.

“Where there is no vision, your marriage will fail, your family will be dysfunctional, you will stumble in your spiritual walk, you will get fat and flabby, and your money will disappear. Vision affects every area of our lives.”
-Dave Ramsey, Entreleadership

I would add that “Where there is no vision, your website will fail.” That is why putting focus on your experience first is so crucial. It doesn’t matter how good your site looks on a mobile device, a desktop computer, an iPad, or an Android: if your experience isn’t enjoyable and if your message isn’t important or interesting, no one will care.

One website

“Mobile first” as a movement has caused an explosion of “m.yoursite.com”, “mobile.yoursite.com”, and “yoursite.com/mobile” URLs. We’re creating these separate websites just to cater to a mobile experience. Why haven’t we done this with iPads? Nintendo Wii’s? Web-enabled DVD players? The short answer is that there are far more users on “mobile” devices than on iPads or Nintendos, though those numbers (especially iPad users) are going up rapidly.

So at what threshold should we create a subdomain just to cater to users of a particular device? 10,000 users? 1,000,000 users? Do we reference worldwide data? Our own analytics? So many questions. We shouldn’t be creating separate subdomains in the first place. Your website, and your URLs should be the same regardless of device. Let me paint you a scenario to illustrate why.

A tale of two websites

Jane finds a great link while she’s at work browsing yoursite.com. She tweets the link out to all of her friends. John, one of Jane’s friends, receives the tweet on his mobile device and clicks on the link. John is redirected to mobile.yoursite.com’s homepage because the link Jane sent out isn’t available on the “mobile version” of your site.com. John doesn’t know what Jane was all excited about and he’s left to browse around mobile.yoursite.com trying to find what Jane was talking about.

We send out so many links in so many ways: facebook posts, tweets, and email campaigns to name a few. It is vital that those links provide a unified message and experience no matter how our users interact with them. Experience First leads to one web.

Don’t stereotype your users

When we focus on “mobile first” and create separate mobile sites, we tend to stereotype who our “mobile” users are. “Mobile” users are on the go, on slow connections, and only interested in 10 minute or less tasks they can get done quickly.

As Yahoo points out, 86% of mobile users are using their devices while watching TV. They’re not in a hurry, impatient, or on slow connections. They’re just surfing the net like we always have. True, there’s a smaller screen, no keyboard or mouse, but the experience they’re looking for is often the same as that of a “desktop” user.

“When we stereotype user context, we create experiences that serve those stereotypes.”

If we keep our focus on the experience first, we find that there are ways we can deliver our message to our users, no matter where they are our what they’re doing. In fact, we can tailor the experience to match their context. We have geolocation, real-time analytics, facebook profile access, and bandwidth detection. We can know to a large extent where our users are, how big of a hurry they’re in, and how fast their connections are. We can then dynamically adapt our experiences to better serve our users. I’m not just talking about “mobile users” either. We can tailor the experience regardless of device.

Provide the complete experience

View full site links drive me crazy. If I go to a rock concert, I want the full show, not just the greatest hits. If I want to walk out after I’ve heard my favorite song, that’s my decision, but the experience wasn’t limited for me by someone else. This point ties back into the one website mentality, but it’s bigger than “one set of URLs.” A complete experience means all your content, images, videos, and products in your store are available to me, regardless of the device I’m using.

The interactions will look different, content may initially be hidden on a smaller screen, but all of your site’s content should be just a click (or a tap) away. I point out a couple great examples in my slides: ehow.com and the new Boston Globe site. Both of these sites provide all of their content regardless of device. You won’t find a view full site link on either of these website, because you’re already looking at the “full site.” A complete experience. (note, there is a view desktop site link on eHow.com’s small screen layout, but it just goes to their homepage, I think they need to remove it)

Getting Practical

The dangers of isolating your site into separate mobile and desktop experiences are quite clear, as are the dangers of stereotyping your users into “mobile” and “desktop” categories. “Experience First” is future-proof. I don’t care if 3D Nintendo handhelds become the next big device of choice among internet users, if you’ve focused on delivering a consistent, complete experience with your site, then you’ll be ready for whatever new devices hit the market.

But even with “Experience First” as our battle cry, we still have very real hurdles to address. We have to find ways of delivering our experiences to a myriad of users, contexts, and devices. I’m going to use the next several blog posts to break down the factors that affect a user’s experience on the web, and discuss the best approaches and technologies we currently have for adapting and enhancing the user experience based on those factors. Stay tuned.

Video

Slides

Love IKEA? Live in Nashville, TN? Then ModerNash is your best option. They drive to IKEA in Atlanta to pick up furniture for their customers in Nashville.

I’ve helped ModerNash refine their customer experience online for the last three years.

Demo temporarily unavailable

Tutorial

Step 1. Create an app on facebook

To authenticate your store to use this plugin you’ll need a facebook app id. This process also allows you to define what shows up as your “Application Name” when your app-generated posts are displayed on your customers’ facebook walls.

Head on over to the Facebook Developers Site and log in using your regular facebook account. Once you’re on the developer dashboard screen click the “Set Up New App” button in the upper right corner. When prompted for your app name keep in mind that this is what will show up on your customer’s walls as shown in the image above.

Fill out the CAPTCHA, continue, and you’ll be presented with your app’s profile. Click on “Web Site” in the left side nav. Note your application ID, you’ll need this later. You must also enter your FoxyCart store URL in the Site URL section. Facebook checks any API calls using your application ID against the domain set here. If they don’t match, it won’t validate the API call. For this example I entered: http://utb.foxycart.com which is the URL for my FoxyCart test store.

With that set up, it’s time to download and install the plugin files.

2. Download & Install FoxyBook

Download the plugin and unzip the file. After unzipping you should have one JS file and one PHP file. Place these in a web-accessible directory somewhere on your website. It doesn’t matter where you place these files, as long as you can access them from a browser. These two files require zero configuration. All the configuration for this plugin is done via your cart template.

3. Set up coupon codes in FoxyCart

This plugin utilizes FoxyCart’s standard coupon code system in order to add discounts to your customer’s carts. In order to configure the plugin you’ll first need to create the discounts you’d like to use with the plugin. If you’d like to take advantage of the plugin’s tiered discount system you’ll need to create several discounts.

Log in to your FoxyCart Admin and click the “coupons” link under the Product header. If you’re unsure about how to create a coupon in FoxyCart refer to their coupon code documentation.

In the image below you can see how I’ve configured a 15% off discount for anything in the customer’s cart and given it a coupon code of “FACEBOOK.”

If you’re going to utilize the tiered discount feature, go ahead and set up several coupons. I find it’s easier to make their names descriptive so I can match them with their friend count tiers later. The coupon codes don’t have to be meaningful or easy to remember at all since your customers will never actually enter these coupon codes into their cart. If they try the coupon code will be rejected.

4. Configure your FoxyBook Install

If you’re using FoxyCart’s awesome AutoMagiCache feature and you have a checkout template hosted on your site that FoxyCart pulls in, then you’ll do your editing there. If you’ve been using the default cart template, now would be a good time to checkout the AutoMagiCache link above. In order to securely serve the FoxyBook plugin on your cart, you’ll need to have your cart template sucked into FoxyCart and hosted on their servers.

On your cart template copy and paste the following:

	<!--BEGIN FOXYBOOK-->
	<script type="text/javascript" charset="utf-8">
			var fc_social_store_name = 'Your Store Name';
			var fc_social_store_url = 'Your Store URL';
			var fc_social_site_image = "Your Store Image";
			var fc_social_caption = "Post Caption";
			var fc_social_wall_post_message = "Post Message";
			var fc_social_facebook_ad_message = "Cart Ad Message";
			var fc_social_facebook_app_id = 'Your Facebook App ID';
			var fc_social_validator_path = 'Absolute Path to fb_validator.php';
			var fc_social_coupon_codes = {
				"JavaScriptObject":"With coupon code tiers."
			};
	</script>
	<script type="text/javascript" charset="utf-8" src="http://yoursite.com/path/to/foxybook.js"></script>
	<!--END FOXYBOOK-->

Most of the configuration options affect what is posted to your customer’s wall. Here’s an image that maps most of those options to how they appear in a wall post.

Remember that facebook App ID we got way back in Step 1? You’ll want to paste that in for the variable: “fc_social_facebook_app_id”.

Put the absolute filepath to the fb_validator.php file you downloaded and installed in for the variable “fc_social_validator_path”.

To configure the coupon codes you set up you’ll use JavaScript Object Notation like so:

var fc_social_coupon_codes = {
				0:"Default coupon code with no friend threshold",
				numFriends:"First coupon code with friend threshold",
				numFriends:"Second coupon code with friend threshold"
			};

And a “real” example:

var fc_social_coupon_codes = {
				0:"FACEBOOK",
				100:"FACEBOOK100",
				200:"FACEBOOK200"
			};

The final variable “fc_social_facebook_ad_message” is optional. Put the HTML you’d like to appear in the default facebook link that will show up on your cart if you set this variable. If you leave this variable out completely you’ll need to have an element in your cart template with an ID=’facebook_link’. When that element is clicked the plugin will be invoked.

Conclusion

It’s my hope that this plugin and tutorial will be helpful for many FoxyCart users. If you haven’t tried FoxyCart for your eCommerce needs sign up now. It’s FREE while you’re developing!

If you need help installing or configuring this plugin I’m available to do custom installs. Just contact me and we’ll discuss what you’re looking for. If you run across any bugs feel free to contact me as well. Let me know if it’s working for you and feel free to share conversion success stories with me. Happy discounting!