BlogmyQuery – BMQ

Ed Merritt, Designer from Bournemouth, took a pragmatic approach. Sosa is a tailored icon font, which carries all the symbols he needed most frequently in his daily development work. As Ed is a designer, just as probably most of you are, it doesn’t seem far-fetched to expect, what Ed needs most might be identical to what you need most, too. Since Sosa is free for both personal and commercial projects, why not take a closer look?

Sosa: Icon font without a specific use case

If you know common icon sets, Sosa might surprise you. Despite the relatively small amount of just 120 symbols, the set is able to cover a variety of potential use cases. You’ll find device-icons as well as brand-icons, icons for user interfaces and more. Even weather-symbols and currency-icons are provided.

With only 95k, the download is rather lean and contains the icons in the formats TTF, EOT, WOFF and SVG. Sosa has to be integrated in your own website via @font-face. Merritt didn’t deliver the necessary related files, which shouldn’t impose a major problem to the average designer. Sosa’s project website has an overview of which key on your keyboard produces which icon.

Sosa: Contents of the downloaded archive

Even though Sosa is offered free of charge, its developer is always happy to accept donations via PayPal as to keep up font-development. There are no restrictions regarding how to use the icon font. Of course you’re not allowed to offer the set as a download from third-party domains or imply that you’re its developer. Backlinks are always appreciated, but not presupposed for the use of the product.

"Curiouser and curiouser!" declared Alice of her adventures in Wonderland. The neologism applies to us as well. At A List Apart, we are perpetually and ever more deeply curious about the lives and livings of people who make websites.

What educational background or economic circumstance led us down this particular rabbit hole of a profession? By what titles do we market ourselves, which skills do our employers expect of us, what can we hope to earn, and which prejudices hurt or benefit us? How mobile are we, how fluid are our titles, and how, in an increasingly complex and frequently perplexing field, do we keep our knowledge current? About these things and a dozen others are we continually and unabashedly curious.

It is a curiosity many of you clearly share. Each year, when we post our Survey For People Who Make Websites, thousands of you kindly take time to complete it. The resulting data, sliced and diced per a team led by An Event Apart's inimitable Eric Meyer, presents a living picture of the businesses, backgrounds, and aspirations of professional web workers most everywhere.

Of course, our findings are far from the last word on the comings and goings of designers, developers, UX folk, and related web professionals. We can only make sense of the data we have, so only those who took this year's survey factored into its results. We are read worldwide, but survey respondents tend to come chiefly from the US, Canada, and Europe—particularly those countries where English is a first or second language.

You can change this by helping spread the word to your far-flung colleagues when the next survey rolls around. For example, if you work with back-end teams in India or China, reach out to those folks. The more of us who complete the survey, the clearer, more accurate, and more informative our results will be.

As always, should your curiosity exceed the bounds of our reporting, you can do your own data slicing and dicing. You'll find the anonymized raw data files at the end of this year's results, where you can download and inspect the data your own way.

Now dive in boldly, find out how your situation compares to others', and keep building respect for this most elegant of professions.

Translations:
Italian

RSS readers: Don't forget to join the discussion!

A year ago we published an article on 11 fundamental guidelines for e-commerce checkout design here at Smashing Magazine. The guidelines presented were based on the 63 findings of a larger E-Commerce Checkout Usability research study we conducted in 2011 focusing strictly on the checkout user experience, from “cartâ€� to “completed order”.

This year we’ve taken a look at the state of e-commerce checkouts by documenting and benchmarking the checkout processes of the top 100 grossing e-commerce websites based on the findings from the original research study. This has lead to a massive checkout database with 508 checkout steps reviewed, 975 screenshots, and 3,000+ examples of adherences and violations of the checkout usability guidelines.

Here’s a walkthrough of just a handful of the interesting stats we’ve found when benchmarking the top 100 grossing e-commerce websites’ checkout processes:

1. The average checkout process consist of 5.08 steps.
2. 24% require account registration.
3. 81% think their newsletter is a must have (opt-out or worse).
4. 41% use address validators.
5. 50% asks for the same information twice.
6. The average top 100 checkouts violate 33% of the checkout usability guidelines.

In this article I’ll go over each of them and explain exactly what’s behind these numbers, showing you some real life implementations of do’s and don’ts when it comes to checkout processes.

The Average Checkout Process Consists Of 5.08 Steps (But It Doesn’t Influence Usability Too Much)

The average checkout consists of 5.08 steps, counting from the shopping cart to the step where the order is actually placed — often a “review and confirm order” step. The shortest checkout process is one step (including cart) and the longest being a massive nine steps.

Above you see the distribution among the top 100 grossing e-commerce websites in regards to the number of checkout steps they have. Note that only a single website had one step (including cart), and the “average� for this one website therefore shouldn’t have been given too much weight.

Above, we’ve plotted the websites grouped after the number of checkout steps, moving out from the x-axis, as the groups average checkout usability score moves up the y-axis. As you can see, we’ve found that up until six checkout steps there isn’t a noticeable relation between the number of checkout steps and the quality of the user’s checkout experience. This matches the test subject’s behavior we observed during the checkout usability test back in 2011. What matters the most for checkout experience isn’t the number of steps in a checkout process, but rather what the customer has to do at each step.

With that being said, there does seem to be an upper limit to the number of steps practically achievable in a checkout process before it begins to hurt the checkout experience. The websites with eight or nine steps have accumulated a significantly lower score in checkout usability than the rest of the checkout processes. This is often a result of required account registration (which typically induces more steps and is bad for checkout usability) as well as the fact that websites that end up with over eight checkout steps simply have more chances available to screw up the experience for their customers. At the time of testing, these were the websites with eight or more steps: Sephora (8), Amazon (8), Peapod (8), Sony (8), Safeway (9), ShopNBC (9) and W.W. Grainger (9).

To recap: don’t focus too much on the number of steps in your checkout — instead spend your resources on what the customers have to do at each step, as that is what matters the most for the checkout experience. Three examples of this are the checkout processes of Apple, Walmart and Gap, which are all seven-step checkouts that perform approximately 50% higher than the average top 100 grossing checkouts (not to say that they are perfect, there are still room for further checkout improvements). While in theory it is possible, in practice none of the benchmarked websites with eight or more checkout steps had a checkout process that wasn’t greatly under-delivering in regards to the checkout user experience for a new customer.

81% Think Their Newsletter Is A “Must Haveâ€� (And Don’t Value Customer Privacy)

81% of the 100 largest e-commerce websites “assume� that their customers want their promotional emails by having a pre-checked newsletter checkbox (or worse) at some point during checkout.

Large view.

One reason why customer hate being required to create an account to complete a purchase is because they have a mental model of account = newsletter. This became evident during the user testing, where we heard the same complaint over and over again: people hate creating an account when buying online. When we asked the test subjects why, 40% told us that they “didn’t want any newsletters�.

For years websites, including e-commerce websites, have tricked customers into “accidentally� signing up for newsletters that they didn’t want by visually downplaying a pre-checked “subscribe to newsletter� checkbox. So people have come to expect, that when they sign up for a new account, that they also sign up for a newsletter, or “spam� (as more than half of the test subjects had referred to such newsletters).

This mental model sadly isn’t just a misconception, but evidently something learned the hard way. Pre-checking the newsletter checkout is one thing, but of those 81% of the websites that think their newsletter is a “must have�, 32 of them proceed to do something even worse than pre-checking a checkbox:

Amazon is just one of the 32% of the top 100 grossing e-commerce websites that automatically signs customers up for their newsletters, without clearly informing the customer (only via the privacy link), and without giving an opting-out option during checkout. Large view.

These 32% automatically sign up their new customers for their newsletters with no way of opting out during the checkout process, and often burying this fact deep down in their privacy policy. Typically, the only way for customers to “opt-out� on these websites are either by a privacy tab in an account settings section (if they were forced to register for an account) or by an unsubscribe link in the newsletters that the customers will automatically start receiving.

So what the test subjects displayed of account = newsletter is something they learned from shopping at websites (such as these from the top 32%). Only 8% of the top 100 e-commerce websites value their customers inbox and ask them to opt-in if they want to receive newsletters (as does the last 11%, which don’t offer newsletter subscriptions at all during checkout.)

24% Require Account Registration

To put it differently: 24% don’t offer the customer a “guest checkout� option when placing an order, but force them to create accounts on their websites.

Sony (step 2) is just one of the 24% that require every new customer to register for an account when placing an order. Large view.

During the checkout usability study, we (as have many others have before us) have identified multiple reasons why potential customers resent being forced to register for an account just for placing a simple order. We’ve already touched upon one of them, the mental model of account = newsletter. But let’s quickly list a handful more of them that we’ve found during the study:

1. Signing up for an account means more steps and form fields to complete during checkout — essentially taking longer to complete.
2. Most customers already have a myriad of logins and passwords to remember and don’t want more of them.
3. When creating an account, customers are more likely to realize that you’re storing their information indefinitely.
4. Many customers just don’t understand why they need an account to buy a product. As one test subject clearly expressed during testing: “I don’t need to sign up for anything when I’m buying a perfume in a regular [brick and mortar] store.�

Nordstorm (step 3) is one example of the 76% of the top 100 grossing e-commerce websites that offer new customers the much appreciated “guest checkout� option, but offering at the same time an easy optional account registration. Large view.

When you do it right (as 76% of the e-commerce websites have done) and provide the much appreciated guest checkout option, you still have the possibility of asking for an optional account creation along (or after) the purchase. This can be done simply by creating a short section with a brief description and an optional password field. During the checkout usability study no test subjects were put-off by this approach, and just left the optional field(s) blank if they weren’t interested in creating an account with that particular website. But they generally liked the option on websites where they were interested in becoming repeat customers.

If we look into the type of websites that typically require account registration, there is a slight tendency towards them being the highest grossing websites:

Of the 23 websites that had more than $1 billion in online sales (Internet Retailer 2010 sales estimates), 35% of them required account registration, whereas for the rest of them grossing less than $1 billion (and down to $148 million) it was only 21% that required account registration during checkout.

41% Use Address Validators

Of these 41%, 12% (relative) don’t allow their customers to override the validation mechanism in case the address isn’t recognized (though the customer is absolutely sure the address is correct).

Amway is one examples of the 12% (relative) that doesn’t allow the customer to proceed in any way, in the event that the address validator is outright wrong, or the address validation database isn’t updated properly. Large view.

An address validator can be a smart way to avoid common customer typos that might cause shipping problems, ones that otherwise would have resulted in undelivered or delayed orders. But street names, postal codes, etc. aren’t consistent, nor permanent. So the possibility still exists that it’s the address validation mechanism/database that is erroneous — not the customer’s input. Those subsets of websites that don’t allow the customer to force proceed through a potentially wrong address validator (at the time of testing: Office Depot, ShopNBC, Amway Global, FreshDirect, and CafePress) will leave the customers with no other option but to abandon their purchase as they are technically locked-out from completing the checkout process.

A decent implementation by Overstock (step 3) that informs the customers that their typed address doesn’t match the address validation — and therefore, are likely to be wrong — while still giving the customers an option to force-proceed.

The advisable approach — implemented by the vast majority of the 41% of those websites utilizing address validators — informs the customer that the typed address doesn’t match, yet still allows them to force proceed if they are sure that the address is right.

50% Ask For The Same Information Twice

Instead of pre-filling the already typed-in information for the customer, 50% of the e-commerce websites add needless friction to their checkout experience by asking for the same information more than once. This is rarely at the same page (although that does happen) but is most often happening across multiple pages. Sometimes it’s the customer’s name that isn’t pre-filled from the address step to the billing step. Other times it’s the zip code that the customer provided at the cart step (e.g. for a shipping calculator) which isn’t pre-filled at the the shipping address step. Although it is only fair to assume that in most cases users calculate the shipping to a certain zip code, this would also be the zip code that they plan on shipping the order to.

Apple is one of the 50% of e-commerce websites that asks for the same information more than once. At their 5’th checkout step the billing email address isn’t prefilled — even when the customer clicks the “Same as shipping informationâ€�-link. Large view.

Retyping information is a tedious task on a regular computer, but on a mobile device most users will find it outright annoying. Considering that all the benchmarked websites gross $148+ million per year in online sales, it seems rather sloppy that only half of them have dedicated the resources to removing needless checkout friction by ensuring that they don’t ask for the same information more than once (across multiple pages).

On the path to reducing needless checkout friction, only 10% of the websites helped their customers by pre-filling the state and/or city fields based on the zip code provided. Hayneedle (step 2) was one of them. The result: three less fields for the customer to fill + shipping dates and costs already updated at the page entry. Large view.

On the same note for reducing needless checkout friction, only 10% of the websites helped their customers to fill-out even less form fields by pre-filling the state and/or city fields based on the zip code that the customer provides.

The Influence Of Revenue And Industry

The e-commerce websites grossing above the $1 billion mark scored 44% worse on checkout usability (for a first-time customer) than the e-commerce websites grossing below $1 billion.

When taking a closer looking at the checkout experience of these 23 websites that gross over $1 billion, it’s likely that some of that gap exists because these websites are more focused on forcing as many customers into their account eco-system as possible. Furthermore, the top grossing e-commerce websites also tend to be the ones with the most complex marketplace systems. These marketplace systems often end up inducing a lot of derived complexity into the checkout process, due to shipping and legal constraints, for a deal where the website only acts as the middleman. In comparison, some of the “smaller� websites in the top 24 to 100 grossing range had one simplified goal for their checkouts: to let the customer move as swiftly as possible through the checkout process.

All the top 100 e-commerce websites plotted with checkout usability score moving up the y-axis and online sales moving out the x-axis (logarithmic scale). Notice that the far majority of checkouts that scored the highest on checkout usability are below the $1 billion sales mark. Large view.

If we take a look at specific e-commerce industries, the Automotive Parts industry had much better checkout usability than the rest of the industries (scoring 110% higher) whereas the Office Supplies industry scored the lowest (38% lower than average). Food & Drugs followed right behind in providing the worst checkout experience.

It’s interesting to see the that in both the worst and the best scoring industries, all three have a very similar checkout process. In fact, their checkouts are almost identical; have a look at Staples’ checkout, Office Depot’s checkout, and OfficeMax’s checkout. I’m not going to speculate on who “was inspiredâ€� by whom, nor does it really matter. But in the Office Supplies industry it’s unfortunate, because as a consequence they all suffer from a very sub-standard checkout experience (38% lower than the average). While it’s clear that some of the top 100 e-commerce websites are using the same system vendor (and thus, end up with similar features and sequences in their checkout flow), the tendency of similar checkouts between competitors weren’t noticed to nearly the same degree in some of the other e-commerce industries (e.g. in Electronics).

The General State Of E-Commerce Checkouts

If we have an overall look at the top 100 grossing e-commerce checkout processes, the average checkout violates 21 checkout usability guidelines. This is an indication that checkout improvements are still much needed if the average cart abandonment rate of 65,95% is to be lowered (“50% Ask for Same Information Twice� also points in this direction).

This overall lacking of checkout experience — even among the highest grossing e-commerce stores — is hardly rooted in an unwillingness to improve checkout experience, but is most likely due to a combination of factors, such as:

1. Flows are much more difficult to improve than single pages.
2. Checkouts often need deep, back-end integration, and thus require more IT capabilities to modify/test upon.
3. Checkouts haven’t been on the agenda for top management (although, I believe this has changed a lot in recent years).
4. Checkouts are for most designers much more dull to work on than product pages, home pages or new ad-campaigns.
5. In a few cases, a poor user experience can still be good for business, at least in the short run (e.g. sneaking people into your newsletter).
6. No Web convention for a checkout process exists.
7. “Best practice� for checkout designs are scattered and scarce (only two to three research-based resources exist).
8. Feedback from those who use the checkout process are only several degrees of separation from those who design and develop it.
9. Improving most somewhat-optimized/decent checkouts aren’t 1 to 3 “big fixes”, but are most likely to be 10 to 30 smaller checkout changes.

If you want to further examine the checkout processes and flows of the 100 top grossing e-commerce websites for yourself — without filling out some 1,300 form fields, as we have done — you can do so in the free part of the 2012 E-Commerce Checkout Benchmark, as we’ve decided to make that part of the database publicly available.

(jvb)

© Christian Holst for Smashing Magazine, 2012.

For years Tim Smith has been vocal part of the design community. From the various projects and blogs that he has been a part of, to the even more literal interpretation of him being a part of the community as the voice behind the design and development related podcast, The East Wing. His enthusiasm and insights make him a valuable asset to the community, but beyond that, they make him an inspiration to all of those in this ever evolving field of web design.

We had the opportunity recently to turn the tables on Tim, and put him on the other side of the interview. He was gracious enough to take time out of his busy schedule to provide some of his insights for noupe’s readers. Below are the answers he shared.

Interview With Tim

Thanks again for agreeing and taking the time to answer these questions. So Tim, if you don’t mind, take a moment and introduce yourself.

Thank you! It’s a huge honor! My name is Tim Smith and I’m a Designer, Talker and Coffee Addict. I also run a small podcast called The East Wing, a podcast that talks about design with some very smart people.

Who are some of your biggest influences in web design?

This is always a tough question for me. I have a lot. I’d say anyone I’ve had or will have on The East Wing. Carl Smith, Jason Van Lue, Tim Van Damme, Janna Hagan, Aarron Walter and the list goes on. The way they think inspires me. They help me approach projects and design from a new angle, keep focus on the details and always remember that I design for people and that their experience with what I’m designing is of utmost importance.

You’ve been working in design and part of the online community for several years now, in your opinion, what have been the best developments and worst developments in the field since you first dove in?

I think for the most part, they’ve been great developments. I’m glad to see that design isn’t being seeing as decoration and that we as designers have been urged to recognize problems, assess personal and business goals and create designs that meet these goals. This has brought on new ways of thinking like responsive web design, designing for mobile and injecting emotion into designs. All of these developments come from knowing that our job extends far beyond making things beautiful. We want to make websites that are functional, accessible and alive. As we move forward, I’ve been doing a lot of thinking around constructive criticism and critique. In fact, I talked with Aaron Irrizary and Adam Connor about this on The East Wing.

Given your proclivity for radio, The East Wing is something of a natural step for you. How did the show come about?

Well, a podcast is something I had been trying to start. I had two failed attempts to start one and now that I look back, I’m glad it worked out the way it did. It gave me time to think about a solid idea. The show was the result of me wanting to educate myself more. I realized that there are so many smart people doing some amazing things in our field and I wanted to talk to them. My point was never to establish myself as an expert, but more as a student. I love the opportunity to pick the brains of these people and it makes me very happy to see that there are people who enjoy the show and listen to it every week. I’m very grateful to the listeners.

How do you approach beginning a new podcast? Does the idea for each show stem from the guests you have on it, or do the guests you have on stem from the idea you wish to cover for each episode?

It depends. Sometimes, I want to cover a particular topic so I contact a person who I know is well versed in it. Other times, I like someone and have been following their work and would like to know more about them and how they do what they do. For the most part, I only get the guest talking. It’s all them for there. Everybody is passionate about something, the art is finding the string so as to pull it.

With so many steps to the design process, what would you consider the most important? Why?

That’s a tough one. My gut feeling is to say each one and that would be true. You can’t do a good job by skipping steps. I do believe that a part of the process that get’s neglected is user experience. Unfortunately, some designers have the mentality that it’s not their job, but that of the “UX Designer”. I say that’s false. Wireframing, user testing, information architecture and more are all things a designer should be involved and actively participating in. This stage of the process is crucial and drastically affects the success of the project. I wrote an article about the importance of wireframing(http://timlikestowrite.com/the-importance-of-wireframing) actually.

What do you think that the design field’s biggest strength is? What does the field really have going for it?

Community. Although as in every place, there are jerks, I have never met such a friendly and willing to help group of people. I would’ve learned so many things the hard way if it hadn’t been for the openness of a lot of designers and developers. Not to mention, when I first started The East Wing, the guests were really nice and didn’t hesitate in coming on. I hadn’t published my first episode and I already had 7 guests lined up.

In that same respect, what do you think that the field’s biggest drawback or weakness is?

I think it’s constructive criticism. We have to get better at this. It’s usually one of two things. 1) Everybody loves something. 2) Everybody hates it. This helps no one. “Good job”, “Awesome” and similar things don’t really help people get better. Neither do statements like “Wow, this is ugly”. I think we should be helping each other with solid critique without ridiculing anyone. We make our community stronger and it helps us all put out amazing work.

You work on a project that promises to teach Drupal to users, which is a slight change with WP monopolizing so much of the market. What would you say are some of the draws to Drupal that the average user/designer overlooks?

Well, it’s a different type of problem. At Lullabot, where I used to work, we were solving complex editorial problems for huge companies that had a staff of writers, editors, managers and Editor-in-Chief. Drupal does extremely well with handling a variety of types of content and contrary to popular belief, scales very well. Lullabot has been doing the Grammy website for four years now and not once has it been down on event night. The way I see it, WordPress and Drupal are just tools. It’s a matter of deciding what’s the appropriate solution for a project.

People talk all the time about how ‘we learn something everyday’. What have you learned recently that has impacted your workflow or usual methodologies?

Fireworks and “box-sizing: border-box;”. They’ve changed everything for me recently. I use Fireworks to create wireframes which is a helpful tip from my pal, Jared Ponchot. It’s really fast and doesn’t make your wireframes ugly like OmniGraffle. The other tip has been really useful. I hated having to calculate the padding into the final width/height of a box. I hate math in general. That’s been a huge time saver.

Speaking of learning, what is the one thing you wish someone had told you before you got into the design game?

First off, I’d like to say I wish there was the Student’s Guide to Web Design when I was a student. I would also say that my recommendation is to be honest about who you are and where you’re at in your career. There is no shame in saying you’re a student or that you’re just starting out. All of us are students. If we don’t constantly have a hunger to learn, the web is going to leave us behind. Talk to people. If you like this interview, talk to me. I’d be more than happy to help out with questions or problems.

After watching the web design field evolve over the years, what do you expect to see in the future of the web?

I’m excited to see more and more an acceptance of mobile. Not from our side but, from the client side. We’re all on board but I look forward to seeing more and more people out of our circle embracing it and investing in better solutions that span different screen widths and devices. It’s a huge learning process, we’re all learning on how to organize and display the many different types of content appropriately.

Speaking of the future, what can we expect to see from you in the future?

That’s a good question. I want to see myself grow more as a designer. Hopefully be of more help to others by means of my podcast and my writing and also do some speaking. If you haven’t noticed, I love to talk so I’d welcome that opportunity. Other than that, time will tell.

All For Now

That closes this interview with Tim Smith, but you can get more from him and the design community through his blogs Timothy B Smith, Time Likes to Write, and the podcast The East Wing. Share your thoughts on the collected insights shared throughout this interview in the comment section below.

(dpe)

Stephen Hutchings from Australia undoubtedly brought forward an intelligent new term when he called his icon font Typicons. Nevertheless, Typicons are just that, an icon font, but a good one with 88 pieces. Typicons are especially useful in app-design as most of the symbols relate to user interface aspects typically needed for controlling functionality. I guess, Hutchings had development for mobile clients in mind when he created the symbols.

Typicons: only a few examples

Typicons: a grid of 24 square pixel, but scalable to any size

Even though they have their downsides, web design without icons is unthinkable these days. Several methods of icon usage have been established. At first, icons were implemented via separate files, which led to separate http-requests for every single file. For reasons of performance optimization, modern websites should try to invoke only as many requests as absolutely unavoidable. Separate icon files have proven not to be the right method. Next came and still stay the so-called sprites. Here we have only one file which includes all the icons needed. To display a certain symbol, we use CSS to locate only a part of the whole file and show this sprite to the user. This method is established, but has its downsides too. If you’d want to serve different devices and/or different resolutions, you’d have to provide different sprite-files, which certainly means a higher effort in producing them. These would have to be targeted using media queries, which you’ll not always want to use.

Freely scalable icon fonts are the cure to these pains. You don’t need to worry about their resolution even on the new iPad, the new MacBook Pro or other HiDPI-screens. That’s where Typicons come in.

The download weighs in at 1,6 MB and contains the necessary font files (EOT, SVG, TTF, WOFF) as well as the corresponding CSS for easy implementation into your own website. On top of this, Hutchings provides you with vector files in the formats of Adobe Illustrator and EPS (encapsulated Postscript), thus leaving nothing to be desired. Experienced designers can take and modify the icon set to open up new use cases.

Typicons are shared under a Creative Commons Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0) license. That means they can be used free of charge for personal as well as commercial projects. You must attribute the work in the projects you use it, typically by providing a backlink. If you alter, transform, or build upon this work, you may distribute the resulting work only under the same or similar license to the one, Hutchings shares it under. Fair enough…

Related links:

• Typicons
• Hutchings Twitter-Account
• Creative Commons Attribution-ShareAlike 3.0 Unported