I Hate Stock Photography

Posted by: Nick

"Hate" is a strong word, and while it's very difficult for me to say that I truly hate something, I like to throw that word around liberally to the point where it becomes devoid of any significant meaning.  With that said, I hate stock photography. I hate it, hate it, hate it. Given that I work in an industry that gives so much lip-service to the importance of presentation, user experience, and customer engagement, it's mildly mind-boggling that stock photography is so commonplace across the Web.  It is uninteresting, cliche-riddled, aesthetic-destroying and an overused, last-minute tool that's become the defacto standard when it comes image selection.

Everyone involved in the creation of a website understands this on some fundamental level because we (as the creators of a site) know where the images come from and know that the images we choose are just a paltry handful of a thousand others that represent or show the same thing. But do our end-users notice this? And, if they do, does it have any kind of effect on their ability to use or engage with a site? Of course it does! I wouldn't have asked those questions if the answer wasn't a solid "yes".

The Problem

People don't engage as much or as well with a site when the imagery doesn't line-up with the content or their expectations. To use a stupid example, it would be inconceivable to think that a site for a pet store would do as well if all of the imagery involved anything but fluffy, cute animals. If I replaced every puppy photo on the site to show a 1970 AMC Gremlin, the site's usefulness would come to a screeching halt and engagement would flat-line.

Of course no web designer worth their salt would ever disassociate the content and imagery to that extreme, but when it comes to real world scenarios it's not the extreme examples that are the problem; it's the subtle and often overlooked commonalities that people pick up on. Is that businessman on the home page a member of the organization? Is that lady with the headset really a customer service representative? Is that building shot tied in any way shape or form with the company itself? In spite of what some people may say, the end-user definitely picks up on these common threads and subtle incongruities when they look at a website, even if they can't fully articulate what the problem is.

One of the biggest issues with stock photography is that people just "know" when something isn't right. This is especially true when it comes to shots of people.  Ever notice how the lighting in a photograph is just a little too clean or how the subjects' teeth are a little too white? Is the the angle of the shot just a bit off-center but not by so much that it would ruin the composition? These are all subtle signifiers that scream "fake" to users.

I won't get too far into the details as Jakob Nielsen over at UseIt.com did a more than suitable job of articulating this point 2-years ago in his study of photo content.

In Nielsen's own test, he found that when people were presented with biographies with both image and text content, users spent 10% more time examining employee portraits than they spent on reading biographical text. This is in spite of the fact that in terms of volume and space used, the biographical text was the predominant element. By comparison, generic stock photography was largely ignored to the point that it's placement and subject matter was largely irrelevant. Suffice it to say that if it isn't "real", it's not meaningful, and if you're a business that takes their web presence seriously, then it should concern you if large sections of your website are being wasted or ignored.

The Solution

Blow it up, start over, and really think about the real estate that's being wasted on your site.  In an age when illustrators, vector artists, and freelance photographers are plentiful, there's no rhyme or reason to saturate otherwise good web content with generic, ineffective stock photography.

Even in instances where budget is a concern and designers have to bite the bullet, there's absolutely no excuse for not putting in the time and effort to find stock imagery that "works". Whether it's because a particular image hasn't already been purchased by a thousand other people, or because it provides a better thematic fit, being able to deliver a final showpiece with imagery that works speaks volumes about the time and care that went into the initial build of a site.

Another One Bites the Dust...

Posted by: Nick

While I'm not one to make flippant, short-form blog posts, there are times when I'm so absolutely thrilled with a sea change in our industry that I cannot help but only comment on it due to overwhelming glee.

As both an independent consultant and an agency suit, I will not have to support IE7 anymore. That's right, folks, Internet Explorer 7 is dead to me.

IE 7 currently eats up around 2.5% of the browser market with IE 6 (the step-child of the family) covering approximately 0.9% of the market. In total, that's 3.4% of the market that's using browsers that are so outdated and bereft of any support for modern web technologies, that they may as well be functionally useless at this point in time.  And while I'm not necessarily thrilled at the prospect of having to drop 3.4% of the market, that 3.4% represented countless hours of support, workarounds, and a level of hack-fu nonsense that made supporting them impossible to sustain and costly from a development and post-launch support perspective.

In the end that means far fewer headaches during the development cycle, quicker turnarounds on projects, and lower costs for me and my clients. If some of the biggest websites (Facebook, Gmail) and some of the biggest development platforms (Drupal) refuse to support that beast, then I'm more than happy to follow suit to retain my sanity.

Service-Oriented eCommerce Design: Part 1

Posted by: Nick

If you read my post on page load times, you may already be privy to the understanding that there are a myriad of factors that can negatively affect the experience of your users. With eCommerce websites these minor idiosyncracies and headaches can pile up quickly, and given how notriously fickle web users are, this can invariably affect the bottom-line by driving them (and their dollars) away from your site.

For a number of companies, online shopping carts have "quick buck" appeal because they represent the ability to sell products to a wide-audience with minimal overhead and support. But this simplistic understanding is what kills many small eComm sites and hinders much larger operations. The fact of the matter is that good, successful eCommerce sites are more than databases filled with products; they're service-oriented experiences that are designed from the ground-up to minimize frustration, remove needless steps, and maximize consumer visibility.

So what does this all mean?  A lot, actually. Conservative estimates claim that the average cart abandonment rate hovers somewhere around 59.8%.  That 59.8% figure represents users who have added something to a cart,  dropped out of a site and never came back. Having a cart abandonment rate sit at that level across a 11,000-site sample speaks to a larger systemic problem in the way eComm sites have been handeled up to this point; poor design choices, poor management, poor direction.

Below are some of high-level issues to be mindful of when thinking about your online store.

Problem #1: Minimize Frustration

Good carts don't anger consumers or try their patience.  While many would see this as a "no, duh" insight, it's not the prinicple itself that people have a hard time understanding; it's the execution.

One of the most common examples of poor execution is the boiler-plate checkout process. For users it's long, arduous, and loaded with potential pitfalls. Worst of all, users who get frustrated during the checkout process are users who have already decided that they want to give you their money. When you have people who are ready and willing to throw their money at you, making their lives difficult is the last thing you want to do.

So how do eComm sites get it wrong? If the shortest distance between any two points is a straight line, then most checkout processes are winding, branching roads. Between pushing users down a different path by forcing them to register an account to making them navigate through page-after-page-after-page of forms, standard checkout processes do a horrible job of providing clarity and keeping the customer motivated.

Solution


The ideal checkout process requires no more than two pages; one page being devoted to information gathering and user assessment, and the second page acting as a speedbump for confirmation purposes.


There is little reason for not allowing users to quickly review their purchase and enter their billing and shipping information on the same page. It removes needless steps, minimizes wait time and allows users to quickly assess and enter any information that's relevant to their purchase in one area.  The one-page method can also accomodate secondary, lead-generation functionality like user accounts and newsletter sign-ups.  In fact, with some clever design tweaks and a sharp eye, there's very little that you can't do within the context of a single page.



In the left column are all of the cart items,
in the right column is the checkout form.
Now was that so hard?



Next Up

Next up, well address other oversights and ways to easily address them with very simple, straight-forward solutions.

Rapid Prototyping in Web Design

Posted by: Nick

When I look at the web design processes being used by various freelancers and small- to medium-sized web design agencies, I find that all too often they're grossly oversimplified, static and inefficient.  Between having to collaborate and bend to the will of the client, many designers often wind up bumping up against time or budgetary restrictions due to the volume of criticisms and requests that are made on the way to producing a finalized design. As a designer myself, being able to quell these demands as early as possible helps me reduce the amount of labor-intensive revisions later on and ensures that the final product meets or exceeds a client's expectations.

What is Rapid Prototyping?

Rapid prototyping is the process of drafting multiple rough states or instances of any given system for future development. Being able to do this in a quick, iterative fashion allows for a continuous feedback loop that can lead to better design and a reduction in the number of changes that occur during development.  Furthermore, because of its quick pace, rapid prototyping can free time up for experimentation because it tends to focus on a project's more easily-understood visual elements; allowing designers, team members and even clients to reach a consensus in less time.

Rapid prototyping is NOT about fidelity or permanency. While there are certainly a wide-range of methods for prototyping a web design, rapid prototyping eschews the need for full-on simulations or near-finalized designs. It is a fast, loose process that is, at its heart, a way to get preliminary ideas on the table so that you can easily test, modify, and finalize design elements. An effective prototype is all at once fast, disposable and focused.

Where Do I Start?

Prototyping a site doesn't encompass all of the site elements, just the important ones.  For the sake of keeping it simple; if you need to explain in vivid detail how something works or why it's placed in a certain area, you need to prototype it.

Drop-down menus, a cart's check out process, slide shows, forms, light box functionality, and galleries are all examples of seemingly simple pieces of functionality that can be implemented (and screwed up) in a million different ways. By prototyping them out within a shell, you're able to better explain how that functionality works within the context of the larger piece.

Once a list of needful is established, designers should then take a broad, high-level approach at presenting those ideas and drilling down into greater detail with each subsequent iteration. For websites, this means building out a rough sketch (literally) of the home page and then revising that framework until all of the important elements are sussed out.

In the case of an eComm website, sketching out the placement of promotional elements, featured products, menu items, and calls-to-action is critical to understanding how users will flow through the site before a single piece of software is opened or a single line of HTML is written.  Later iterations of this initial work can then drill down into the site's interior pages to map out the checkout process or the ways in which the product selection process can be extended once a user is past the home page.

The Tools That Make This All Possible

The best and most effective tools to use in a one-on-one collaborative meeting are going to be a pencil and paper. Nothing is more flexible or adaptable at expressing an idea visually. Even if you can't draw, a pencil and paper still allows you to quickly produce a low-fidelity visual approximation of what you want to present. For all intents and purposes, your output during this process should be somewhat muddy, as the idea is to get as much feedback and information as possible until you feel comfortable with closing that loop. But when it comes to digital solutions, there aren't that many options that afford designers that same range of flexibility.

With web designers in particular, many have come to rely on the Adobe suite for all of their drafting and design work.  And while Adobe's software has become the defacto standard in the design industry for a reason, it's counter-intuitive to use offline, professional-grade software for a relatively simple task like rapid prototyping.

The closest middle-ground to the fast-paced pencil-and-paper method and the methodical digital method can be found at uxpin.com. Not only does it have numerous hot-swappable elements (GUI pieces, icons, templates, frames) to make drafting simple and fast, it also supports a wide-array of features that enable collaborative work across multiple users.  Most importantly of all, UXPin can translate paper sketches into fleshed out wireframes; allowing you to convert your offline drafts into online demos.

Final Thoughts

I've heard from a number of designers in the past that the idea of rapid prototyping is an attack on the primacy of the designer; stripping away creative freedom in the name of saving time and money.  But when done right, rapid prototyping can help bridge the gap between the client and the designer, by allowing the designer to inject clarity into the process through quick and simple iteration.

If the end-goal is to produce something that a client likes while minimizing the need for labor intensive re-workings and communication headaches, there's no reason why you shouldn't adopt rapid prototyping into your process.

(Page Load) Time is Money

Posted by: Nick

As broadband internet connections have become more wide-spread and servers have gotten faster, the scope and complexity of websites have scaled up to keep pace. More often than not a lot of this is reflected on the front-end in the form of content-heavy, image-rich designs that are built from the ground-up to immediately engage and entice attentive audiences. But in our quest to shower users with information, issues regarding overall performance and load times have been tossed aside to make room for aesthetic and functionality.  And while it's difficult to argue that these concessions shouldn't be made, it's becoming increasingly obvious that more effort needs to be invested to ensure that sites load quickly and smoothly.

Load Times Affect Everything

Let's keep things simple: the longer someone stays on a site, the more likely it is that they'll convert, and the longer it takes for a page to load, the less likely it is that someone will stick around.  It doesn't matter if you run an eComm website, a lead-generation site, or a blog; page load times have a profound effect on a site's performance across an audience.

Some of the largest and most successful online companies understand this dynamic very well. Amazon, for example, reported that every 100 millisecond increase in load time results in a 1% decrease in sales.  When Google managed to shave off 930KB from their Google Maps home page (going from 1000KB down to around 70KB), they saw a 10% increase in traffic the following week and an additional 25% traffic increase for the next three weeks.

But this doesn't just affect the big guys. Long load times hurt all sites equally because they annoy all users equally.  What counts as "long" to an average user nowadays? According to a pile of studies, 50% of web users expect a page to load in 2 seconds or less, and 40% abandon a website that takes more than three seconds to load.  Ever wonder why that Adwords campaign is costing you money but fails to produce any conversions? Take a look at how long it takes for your landing page to load.

To make matters worse for business owners and web designers, it turns out that the ever-expanding mobile demographic is just fickle as desktop users.  While mobile users are willing to wait longer for a site to load on their devices (with the majority of respondents saying that they would wait 5-9 seconds), a 1 second delay results in a far higher abandonment rate, driving the overall conversion rate into the ground.

Slow and Steady Does Not Win the Race

Users will never complain if a page loads too quickly, but they will always complain if a page loads too slowly. And while load times can seem infinitesimal on paper, the time it takes for a user to move their cursor over to the back button is just as infinitesimal. Given the shifts that we've all seen over the past ten years and the increasing amount of competition, it would be foolish to start arguing that page load speed isn't an important factor in a site's success.

Baking-In Mobile/Small Screen Functionality

Posted by: Nick

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:

The Arsenal Firearms website when viewed in a standard 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: Nick

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.

Salience in Decision-Making Design Pt. 1

Posted by: Nick

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.