Graphic designing is a kind of visual communication that makes use of a word, symbol, or any visual item and designs it in a way to communicate the underlying message of the design to the public. Graphics designs might be created by grouping together visual images, texts, words, shape of different sizes, color combinations, layouts, lines, and dot patterns.
Here is the harsh reality of e-commerce websites: according to recent e-commerce studies, at least 59.8% of potential customers abandon their shopping cart (MarketingSherpa puts it at 59.8%, SeeWhy at 83% and MarketLive at 62.14%). The main question is why do customers abandon their shopping cart so often? Is there some fundamental mistake that designers of e-commerce websites do very often? Are there any common guidelines or rules of thumbs that make it more difficult for our users to purchase products? And is there some meaningful way to improve the conversion rates for our products?
Well, that’s exactly what we wanted to find out. In 2010, we recruited a batch of Web users and conducted a usability study, focusing only on the checkout user experience, from “Cart” to “Completed order.” The study was conducted using the “think aloud” protocol and was documented by recording everything that happened on the computer screen. The behavior of the test subjects was then analyzed by scrutinizing these recordings at a later date.
The study has shown that it is often difficult to lead customers to the final step in the checkout process when the only thing left is to submit their credit card details.
The 15 e-commerce websites that we tested were: 1-800-Flowers, AllPosters, American Apparel, Amnesty, Apple, HobbyTron, Levi’s, Newegg, Nordstrom, Oakley, Perfume.com, PetSmart, Thomann, Walmart and Zappos.
In total, the test subjects were given more than 500 usability issues, ranging from being distracted by animated graphics to being thrown off course by an illogical checkout flow. These issues were then analyzed and distilled into 63 checkout usability guidelines in a report titled “E-Commerce Checkout Usability.” In this article, we’ll share 11 fundamental guidelines from that report with you.
1. Your Checkout Process Should Be Completely Linear
Issue: Having steps within steps confuses and intimidates customers as it breaks with their mental model of a linear checkout.
One of the worst usability violations that we discovered in our testing was non-linear checkout processes. Websites with a non-linear checkout process left several of our test subjects confused and intimidated. At the time of testing, both Walmart and Zappos had a non-linear checkout process.
The typical way to “accidentally” end up with a non-linear checkout process is to create steps within steps. This happens, for example, when the customer has to set a “Preferred shipping address” (Walmart’s violation) or “Create an account” (Zappos’ violation) on a separate page, and is then redirected to a previous checkout step upon completion.
Below, you can see Walmart’s checkout flow in thumbnails (click image for larger view). Notice that it’s non-linear because the “Preferred shipping address” sub-step directs the user to a previous step:
Download the Icon Set for Free! Continue reading
The number of people browsing the Web from a mobile device has more than tripled since 2009, and it is sure to continue growing, with browser platforms such as iOS and Android offering mobile browser support that is almost identical to what we have come to expect from a desktop experience. As the mobile consumer market continues to grow, so will the aspirations of individuals and companies who look to embrace what the mobile Web has to offer.
With this in mind, many website owners have begun to develop a strategy for providing information and services to their mobile visitors. However, mobile strategies can vary massively from website to website, depending on what the company wants to offer visitors. For example, eBay’s strategy will be very different from an individual’s strategy for a portfolio website, which might simply be to improve readability for those viewing on a mobile device.
Designing websites and related media for kids presents plenty of opportunities for Web designers. Openings are available at many businesses and schools, as well as through parents and kids themselves, giving designers many ways to find work on electronic and print projects that appeal to kids. The types of work range from interface designs for video games to websites for birthday parties.
There was a time when kids’ websites were brash and busy, packed with colors and cartoon typography. Fortunately, the scale of the children’s market across most product ranges has resulted in rapid innovation in recent years. Most websites aimed at children (or children and adults) now follow principles that take some account of kids’ perspectives on Web design.
Perhaps the most difficult part about navigation on the Web is organizing and designing it. After all, coding it can be relatively easy. In this first section, we’ll go over some methods and best practices for organizing navigation, which can lead to a more intuitive user experience and higher conversion rates.
Primary vs. Secondary
Most websites, especially those with a lot of content or functionality, need navigation menus. But as a website grows in complexity, guiding users to that content and functionality shouldn’t be the job of any one menu. All of that content just doesn’t always fit in one large menu, no matter how organized it may be. While many websites need more than two, all websites have at least two main menus: primary and secondary.
Almost every Web designer can attest that much of their work is repetitive. We find ourselves completing the same tasks, even if slightly modified, over and over for every Web project. Following a detailed website design and development process can speed up your work and help your client understand your role in the project. This article tries to show how developing a process for Web design can organize a developer’s thoughts, speed up a project’s timeline and prepare a freelance business for growth.
First of all, what exactly is a ‘process’? A Web development process is a documented outline of the steps needed to be taken from start to finish in order to complete a typical Web design project. It divides and categorizes the work and then breaks these high-level sections into tasks and resources that can be used as a road map for each project.
A Typical Process
Here is a standard process that was put together using examples from around the Web as well as my own experience. (Note: Please see the resource links at the end of each phase.)
The planning stage is arguably the most important, because what’s decided and mapped here sets the stage for the entire project. This is also the stage that requires client interaction and the accompanying attention to detail.
- Requirements analysis
This includes client goals, target audience, detailed feature requests and as much relevant information as you can possibly gather. Even if the client has carefully planned his or her website, don’t be afraid to offer useful suggestions from your experience.
- Project charter
The project charter (or equivalent document) sums up the information that has been gathered and agreed upon in the previous point. These documents are typically concise and not overly technical, and they serve as a reference throughout the project. Continue reading
The other day a design came across my desk for coordinated letterhead, business cards, post cards, and pens. It was colorful, creative, and stimulating. Or maybe I should say over-stimulating. My eyes didn’t really know where to focus. Four different fonts were used in different areas, six different colors, and there were graphics and text all over the place. What should have been a blank piece of letterhead someone would be able to type a letter on looked more like a TV screen of a news network broadcast with a stock ticker along the bottom, a news ticker at the top, a weather map on the side, and a bullet-point graphic seemingly growing out of the news anchor’s head. It was simply too much. And, anyway, how was I ever supposed to get all that on a pen?
It got me thinking – why is that a bunch of good ideas aren’t as good as one good idea? And how can a designer feel free to expand his or her creativity while narrowing the focus?
The approach of throwing everything up and seeing what sticks is great if you’re talking about a brainstorming session and a whiteboard. It’s not a great approach if you’re talking about a thousand printed sheets of 28-lb linen paper. So instead of thinking in terms of limiting your freewheeling ideas, think of letting your ideas fly, but only in an early stage of the process. In other words, as many crazy ideas as you can come up with the better. But don’t print there. Take it a few steps farther. Continue reading