Mar 25, 2012

Baking-In Mobile/Small Screen Functionality

Posted by: 

Go here: http://www.arsenalfirearms.com/

Now change the width of your browser.  Did you see that? That almost magical™ change to the site's styling? That nice (if not slightly odd) middle-ground between desktop and mobile compatibility?

Here's a couple of screenshots in case you missed the obvious or you were too lazy to click on the above link and roll through my relatively simple exercise:

Image of the Arsenal Firearms website in a standard browser window.
The Arsenal Firearms website when viewed in a standard browser window.
Image of the Arsenal Firearms website in a smaller browser window.
The Arsenal Firearms website when viewed in a  tighter browser window.

I've seen a lot of different development techniques used to address the issue of mobile browsing over the years, and it's always nice to actually find new and unique examples of this functionality.

There are some small flaws and potential issues with the Arsenal site's specific application (mobile functionality creeping into the desktop experience being one). But the catch-all approach of enabling/disabling the mobile stylesheet based on the viewport width helps polish out a long list of potential usability issues that come up when making a website as browser agnostic as possible.  Not the least of which is the imperative need to consistently find that "sweet spot" across an always expanding list of smartphone, netbook, and tablet SKUs.

I'm not shy in saying that I have every intention of duplicating something similar for some of my clients (where appropriate).

Good Versus Bad Gamification on the Web

Posted by: 

Below is a video of Jesse Schell's talk from 2010's DICE Conference, where Schell discusses the incredible growth of social gaming and the potential behind integrating game functionality into other real life applications.  Take the time to watch it if you have 30 minutes to burn.


This was probably the first I had heard of "gamification" from anyone who wasn't a drone in a suit, and over time the roar of gamification has gotten louder and louder in a number of industries, particularly the web design industry.

As a long-time fan of video games and a Mr. Manager-type at a web design agency, the idea of mixing in game elements into everyday life or as a secondary function to a website's core fascinates me.  But with any hot new concept, businesses and developers have begun to roll these elements into products in ways that are barely effective, costly, and provide little to no value to their users.

The central idea to gamification is the precept that injecting game mechanics into everyday areas of life can help incentivize people and, potentially, aid in solving real world problems. There are websites that use game mechanics to encourage personal health, iphone apps that get you off your butt to do simple tasks, and cars that poke you in the face to tell you how you're saving the world at the low starting-price of $27,000. These ideas, on paper, are neat because they each provide an extra feature layer that can foster engagement and invariably motivate.

But for every good idea a trend produces, 100 bad ones follow suit. "Gamification" has slowly introduced thousands of poorly thought-out examples into the marketplace that don't engage or interest because they don't elegantly tie together the ideas of purpose and meaningful play.

The Problem


Let me be real clear: In spite of what Schell believes in that video, gamifying a product is not game design (even if game designers are best suited to do it).  Understanding that is important in understanding why gamification works and why it doesn't.

Games, especially video games, play off our intrinsic desires to keep us motivated. Leveling systems, achievements, and incremental point systems are used to help signify progress to the player.  Each of these systems, by themselves, aren't all that interesting. But when they're baked into an overarching play space with a purpose tied to it (ex: save the princess), they work as a motivating device so that the player doesn't quit. If I hear swelling music and receive a piecemeal reward every time I level up in an online game, I'm going to be that much more interested in continuing. In business terms, it's a "value add" for something that was already pretty damn good to begin with.

Gamification assumes that we can take these principles of play and adapt them into other mediums. But many of these gamified products have shown a shocking amount of disregard for the quality of the customer experience, because they aren't built from the ground-up so that the game elements completely intertwine themselves with the end-goal or purpose. This application winds up betraying the very idea behind gamification because it implies that experiences that are rooted in something other than games can/should be dressed up to resemble them. And it's no surprise that a number of very recent applications amount to nothing more than tacking on a poorly designed points system to an existing underlying system.

A Great Example of  Crap Web Gamification


When Google rolled out their news badges, it seemed like a novel idea on paper; encourage social sharing amongst Google News users by incentivizing them with profile badges. In practice, though, Google's approach should be considered "faulty" at best. 

From the way that the system is implemented (tacked on to an existing system) to the reward itself (badges that signify nothing spectacular), the whole idea behind Google's badge rewards seems to be wrapped around the need to foster user engagement by providing a solution to a problem that doesn't exist. It doesn't provide any real sense of mastery to the user (how do I get better at wasting time at work); the reward is meaningless in of itself; and because it fails to fulfill the purpose/mastery motive, it doesn't actually complement the system it's built on.


A Great Example of  Web Gamification Done Right


With that said, if our prerequisites for "gamification done right" are a finely-tuned combination of purpose, mastery, and implementation, then look no further than Mint.com.

On top of Mint.com's existing functionality of tying together all of your financial information, the site also provides its users with a "Financial Fitness" system.  This entire system is tied directly to the information that Mint.com has on-hand, allowing the site to provide goals, scores,  and progress over time to each to of its users.

Each of these goals and their scores are tied to five principles that everyone notes when dealing with their personal finances:
  1. Know your Money
  2. Spend Less than you Earn
  3. Use Debt Wisely
  4. Invest Your Savings
  5. Prepare for the Unexpected
These five axioms are important because they define both the purpose and the system that needs to be mastered.  By reinforcing each of these items with points and a scoring system, users are able to track their own progress over time and become that much more motivated to comeback to the website.

That last point is very important from a business-perspective. Not only is Mint.com providing all of the tools that their users need to be properly engaged, they're effectively increasing their ability to generate leads and referrals.  That's what we call a win-win, and it wouldn't have been possible had Mint.com half-assed this implementation.

Final Thoughts


As much as I'd like to believe it were not true, the introduction of gamification into our lives is not slowing down. And as more and more companies continue to push forward on all of their web endeavors, it's inevitable that this concept will eventually translate from a simple novelty and throwaway fad, into a formal process and study.  That means that as designers and developers, the onus is on us to recognize when gamification works and when it doesn't, so that our products are able to touch audiences in ways that are substantiative and meaningful.



Mar 24, 2012

Salience in Decision-Making Design Pt. 1

Posted by: 

There is a tacit understanding among experienced web designers, user-experience designers, and even web developers, that the functional, navigatable core of any website should always be focused, direct, and as simple as possible to interperate. And while web designers, in general, have become more proficient at injecting clarity and vision into their aesthetic and visual design, the conversation up until now has always centered more on usability and less on directability.  Understanding this slight but very important distinction can be the difference in having a website that can generate an audience versus having a website that's actually capable of positively affecting the bottom line.

The Problem


When businesses try to divine a return on investment through their website, they often look at a handful of key performance indicators and the behaviors that led up to those specific events.

Did a user fill out a "request a quote" form? Did they sign-up for a newsletter? Did they purchase a product or subscription? Or did they just meander around the website for awhile and then leave?  And, if they did leave, why?

In the case of the last question, I've found that it's not uncommon for otherwise "healthy" websites to under-perform sales-wise, even though the websites in question could very well have thousands of attentive, well-engaged visitors browsing through them on a daily basis.  In the case of those sites, it always came down to a subtle design problem that made the final decision-making process more difficult than it had to be.

The Bigger Picture


Studies have shown that the decision-making process is highly malleable, and that a person's preferences are never as concrete or as stead-fast as we'd like to believe. In fact, more often than not, decision outcomes are greatly affected by the context in which a decision was made. When we look at this in terms of web design, this has major implications on not only the usability of a site, but also on our ability to influence our users in making critical, nascent decisions that can potentially lead to measurable actions like generating a sale or producing a lead.


Salience On Ecommerce Sites
The simpliest way to distill down this new problem is to use the eComm experience as our baseline. A fairly well -understood dynamic of eComm is that online marketplaces are saturated with products. If a price-sensitive consumer can find an item somewhere else for less money, they'll have no reservations in going to a different website to finalize their purchase. This habit of comparison shopping is the most common method used by online consumers because it provides a reference point for gleaning new information that they'll invariably use for coming to a conclusion.

The entire process itself  occurs both within and outside of a site across a number of different touchpoints; from “related product” calls-to-action and upsells to time spent on comparison shopping engines and competitor websites.  Throughout this process, each touchpoint adds a new layer of information that clarifies  a consumer's course-of-action by providing sufficient context for arriving at a decision.

Salience On Lead-Generation Sites
But, if we transition our focus over to the less sophisticated but far more common B2B and B2C lead-generation sites, we find that compared to eComm setups, we typically have less information and little to no feedback that could positively influence someone at the “point-of-purchase”. When I say “less information”, I'm not speaking to the content that exists on any given site as a whole, but rather I'm referencing the lack of well-refined decision-influencing devices that can assist visitors in taking that extra step towards filling out a contact form or signing-up for a service.

It is because of this absence of information that users have little to no visibility as to why the service is valuable anymore. This is the folly of many lead-generation sites across the B2B and B2C industries, as well as across many online media outlets and large online communities; they don't effectively convey the value of their service to their audiences at the most crucial decision-making juncture.

Coming Up Next...


I'll add a second post that drills down into things like contextual data and comparative data (among other things) eventually, and will also examine other issues relating to addressing the basic cognative hang-ups that act as the basis for all of this in the first place.