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.
May 6, 2012
Apr 18, 2012
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.
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.
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.
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.
Apr 4, 2012
Rapid Prototyping in Web Design
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.
Subscribe to:
Posts (Atom)