We Love The Web - Blogorhea

If you want your customers to be able to buy stuff from you and pay online, then you'll need to make credit card transaction one way or another*. There are about four ways that you can do this, each with their pros and cons.

Whichever way you choose, it's almost always the part of setting up an eCommerce outfit that takes the longest. It just always does. You either have to prove who you are to Paypal or Google Checkout, or get a merchant facility with online 'customer not present' payments from your bank. Either route takes time - allow up to a month. I know. A month. It often takes less time to build the store than get the payment stuff in place.

* I am ignoring bitcoin and other alternative eCurrencies until they become a bit more mainstream. 

What are my options?
Broadly speaking: PayPal, Google Checkout, SagePay and WorldPay.
There are a host of minor providers, but these are the big ones.

PayPal
Easy to set up, people are familiar with it, but comes with issues around customer service. Because it's a mass market service, they have real problems with preventing fraud, so will tend to shut down accounts that exhibit unusual behaviour. So, if you get a big sales spike because your latest product video went viral then PayPal may shut down your account if you get a lot of business. And then you are left to deal with PayPal customer support, which appears to be one little old lady in a broom cupboard with a bakelite telephone in the Arctic circle. OK, the risk is small, but the impact is huge. This has happened to people we know.

In it's favour, it doesn't require you to get any special facilities from your bank. The downside to this is that they charge higher commission as a result. Watch out for its fee structure though.

Both SagePay and WorldPay also offer a 'pay by PayPal' option on top of their own payment gateway, so you don't have to choose 'either/or'

Google Checkout
Easy to set up, but takes quite a big lump out of your payments in commission. The same problem that you have with paypal freezing accounts is also true, but given the higher level of proof required to get the account, we haven't heard of as many problems. Unfortunately, Google customer support is, we think, outsourced to the same old lady in the Arctic circle as PayPal use. Getting redress for grievances can be difficult.

A significant difference between PayPal and Google Checkout, to my understanding is that Google automatically pays money into your bank account after about 48 hours, whereas PayPal just hangs onto it until you log in and initiate a transfer, but I may be wrong.

As with PayPal, this doesn't have to be the only payment option on your site. Adding new payment options often increases the number of completed orders.

SagePay, WorldPay and a host of smaller providers
These guys usually charge a monthly fee + small transaction fee to validate that the person's credit card is valid and has fund, then it either takes the money immediately, or reserves it (pending despatch of the item and 'release of payment' when you actually want to take the money).SagePay, for example, charge £20 a month, which covers the first 100 transactions and thereafter in £20 blocks for each 100 payments. 

To work, they need to be linked to a business bank account with the ability to take credit card payments (called a merchant account). The banks will charge you

A key advantage to these payment providers is that they are unlikely to freeze your accounts lightly and, because you are their customer paying real money, you can actually phone them up and try to sort things out with an actual live human being! Costwise, they are about the same because your bank will charge you commission on the incoming payments of 1-2% or about 60p for debit cards.

Broadly speaking, WorldPay allows you to apply your styling more seamlessly to the payment process, but SagePay is more flexible to work with and better with foreigners (see below). We prefer SagePay.

Do I have to take Credit Cards? Is there no other way?

There are some really interesting developments on the horizon such as dwolla that circumvent the need for a Visa card entirely. This is a good thing and long overdue because Visa and Mastercard take far too large a chunk of your payment and can get away with it because there's no meaningful competition. Sadly, they only work in the US at the moment. We'll update this post when they come over here!

Why does it take so long to get set up?

Paypal
PayPal is the quickest route, but comes with other issues (see below). Paypal need to validate your credit card and address by making a small charge against a credit card validated to your given address. When you receive your statement then you type in the special code given. You'll need to do the same thing for a nominated bank account too as soon as you reach a sending limit for money.

Google Checkout
Setting this up entails sending off audited accounts to Google, along with copies of your certificate of incorporation (for Ltd. companies) and various other bits. Google then lets you know a few weeks later when it's approved.

SagePay, WorldPay and other processors that need a bank account with a merchant facility.
The big problem here is the banks. You'll be amazed to learn this, obviously. Honestly, it's like they are stuck in the 18th century. We've yet to see a bank completing the necessary paperwork in less than a month. No reason, just stupidity and bureaucracy.

Taking and storing credit card numbers yourself like wot Amazon do.
This is a complete non-starter unless you have about £15k to spend just on taking payments. We have to have all sorts of heinous security stuff in place and it's not just about software on the server, it's about making the organisation PCI-DSS compliant. Sorry, acronyms. PCI-DSS is the set of rules that the banks have put in place to make sure your organisation can securely process credit card payments. There are a lot of rules and complying with them all is expensive.

Foreigners with their funny money.
Just when you thought you'd solved all the problems with taking money, some damn foreign Johnny will want to give you some money. And this introduces a new set of minor complications.

Assuming your shop supports multiple currency pricing for a moment (and ours do, obviously), then you need to make sure your payment provider does too. For Paypal, this shouldn't be a problem, at least for the obvious currencies (Yen, US$, Euro, GBP Sterling) - you may have a problem with the Azerbaijani Manat through. It will handle the hard work.

Google checkout only works with a handful of currencies, currently Yen, US$ and GBP, but will only accept payments in your native currency (so GBP for UK accounts). It will not take payments in Euros.

For sagepay, providing your bank account with the merchant facility is set up to accept payments in other currencies, then you just let them know and it will pass on the payments in the original currency.

World Pay always used to be owned by RBS, those fine upstanding titans of fiscal rectitude. They used to make you have an RBS account for payments in all currencies except Sterling, but not sure if they still do now that they are no longer owned by RBS.

Watch out for cross-border payment fees too. Yes, even if they are paying in pounds at a retail exhange rate that the payment processing people mark-up heinously, some processors (I'm looking at YOU PayPal) also charge you for moving the money across borders. No, there's no real excuse for it, it's just another source of profit.

What other gotcha's are there?
Well, you also have to watch for chargebacks. Basically, if a customer is unhappy and can't get resolution from you, they can initiate a 'chargeback', which involves telling their bank that this was a fraudulent transaction. The bank assumes the customer is correct and takes the money back. The onus is on you to prove yourself innocent of the charge. Too many of these a month (more than a couple) and you could be looking at fines or suspension of your account. These do sound scary, but in truth, they rarely happen unless you come under concerted attack.

Oh, and finally: one real eyebrow raiser is that refunds are counted as another transaction and therefore attract another round of commissions! That makes you cross the first time it happens, but it is survivable as most people don't issue many refunds.

So, hope I haven't scared you off taking money online. It really does work out well for most people - none of our customers have had real problems around this part of the process, but since the banks are involved you can expect to experience a stinging pain in the wallet. Strip aside all the comic 'chip on the shoulder' stuff about the banks and it boils down to this: you have to plan the turnaround times and transaction fees into your business model.

To find out more about how eCommerce. could help you, call Frank or Jules on 01422 847 958 or email us: make.it.work@welovetheweb.com

If you have a friend or colleague who you think might like to receive these as emails, get them to sign-up here: Sign up for the We love the web newsletter.
We won't share their email addresses with anyone else and we won't send through huge numbers of mails, just these how-tos, well, and the very occasional sales pitch, but we promise not to be 'in your face' about it.

And you can unsubscribe at any time.

Without doubt, this is toughest online design discipline, bar none.

For a print designer, it's like playing 3D chess. It's hard because the pages change, depending on how they're used. Forget your A4 piece of paper with a set amount of space. No, you have a page of indefinite length filled with elements of varying height and/or width. To add to the fun: you'll have bits of the screen that reconfigure themselves depending on the time of day, what the user is doing, whether there's a video or not or any of a hundred other variables.

We can't make it simple, but we can help you avoid the pitfalls.

Basic approach: content led design

You are designing a set of templates that other people will use to make pages of their own. This means relinquishing a lot of control over how it's used to a content-monkey who understands little about design. The templates have to be flexible and robust so they always look good despite the evil works of design-illiterate website admins.

Do:

• Stress-test your design once the basic layout is one you are happy with.
  • Does this design still work if the headline is twice as long? 
  • What if the images are half the size (see images stuff, below)? 
  • How does it look when there are 10 items on the page? When there is one item on the page?
  • What if the one column has a lot of content? Does it push everything else out and make the rest of the page look ridiculous?
• Content builds up over time. Think about how a page element might look when there are 3, 12 or 100 items to list. 
• Have a read of this article here: http://www.onextrapixel.com/2010/11/03/15-ui-design-patterns-web-designers-should-keep-handy.
• Use a column-based grid layout: make it one that cascades down the page, so that big content lumps can push others down the page without breaking.

Don't:

• Make something that requires lots minor variations of the same template.
• You won't necessarily know what you can and can't do, but we are happy to give feedback. if we say 'this won't work' then it's because we are trying to help you achieve a good, workable design and genuinely not that we are trying to be unhelpful.

Images

Most modern Content Management Systems scale images to the right size for the site automagically, but there are limits to this: the machine is fairly 'dumb' and cannot intelligently crop an image.
We can scale it to size in one of three ways.

1. Squish it to fit into a defined size. This will distort any image uploaded that doesn't fit into a given size. You can't force a rectangle into a square hole without breaking it.
2. Scale to a set width and then set the height in proportion.
3. Scale to a set heigh and then set the width in proportion.

Don't worry, we know that's tough to visualise, so here's an illustration.

In this screengrab, all the image widths have been made the same. Some of these items are landscape, some are portrait, but they look OK because the template has been designed with this in mind. For horizontal layouts, we can set the height and allow the width to vary.

Do:

• Visualise your templates with a series of landscape and portait images. Make sure you are happy that these will display correctly.
• Remember that finding appropriate images can be hard, so some items may not have an image. Visualise your templates so that some items have images and some don't.
• Remember that some images may be used in more than one place. The classic mistake here is to put an image thumbnail on the news homepage that appears again in a completely different aspect ratio on the news story page. They can be scaled to different sizes, but we can't shape-shift them!

Don't:

• Flow text around a curve or image cut-out. It can't be done.
• Flow text around a rectangular image. Well, you can if you want but bear in mind that line-heights are fixed - site administrators may get orphans and widows because the image is just 3 pixels higher than the line wrap.

In this example, you can see a line-wrap orphan due to an awkward image height. Our experience is that you can tell some site admins to check for this until you are blue in the face, but if they aren't design literate then you face a steep uphill battle to make them care! It's best to avoid the situation really. 

 

Text

When we get artwork for a CMS website from a designer, the same chunk of Lorem Ipsum usually fits very neatly into exactly a space provided, kerning and leading adjusted to make it fit.
Real life isn't like that - you have a harrassed PR guy trying to push the latest press release online in about 10 minutes flat. The truth is they will never respect or follow any visual rules that you try to impose. The only solution is to make it sufficiently flexible to accommodate this variability and look good.

Product names are the classic case. To choose two items from Amazon:
'iPad (16Gb)' vs. 'Panasonic KX-TG8422EB Colour DECT Twin Phone With Answer Machine - Black'
Both have to fit into the headline slot. Both have to look good.

Here's an example. In this pic, the text has been neatly fitted to the available space.

This doesn't help you understand it how it will look in real life. Here's how it might be actually used:

Still OK? Well, that line-wrap looks a bit wrong. The boxes look all irregular too. It's not as good-looking as the first piece of artwork, certainly. If you don't try out the variations, then your design will fail in real life use.

Do:

• Make the text line-wrap over several lines as well as showing it fitting neatly into a single line for headlines, sub-headlines and body text.
• Make your design rubbery. It has to look good with one line of text in the headline or three.
• Allow each element to stretch and contract. When designing: visualise every element with twice and much and half as much text.

Don't:

• Fit everything neatly into a space allocated.
• Use comic sans. Black polo-neck clad typography ninjas will pad silently into your stylesheets and do unspeakable things under the cover of darkness.

Site functions

When designing, make sure you understand the types of content that go in the site and what the restrictions are.

Anyone can draw a picture of a moon rocket but it doesn't mean we can provide you with a vehicle capable of interplanetary travel!

Seriously, a designer recently added 'last time you were here you visited the following pages:' throughout the artwork for a site, then showed it to the customer, who loved the idea and signed it off. The first we knew about it was after the sign-off. We said: 'Great idea. It's not in the budget mind. We'll happily do it, it's an extra day or two at our normal rates.' Cue much muttering, but it's really not our fault.. We'd rather have happy customers, but we can't extra work for free. We will supply wireframes or a spec. showing what each part of the site will do. Please follow this, or discuss it with us if you are unsure it will meet the client's needs. It may be an extra, or it may be that we can do something similar within budget, but it's handled properly and not adding to anyone's stress levels.

Do:

• Work from the wireframes and spec. documents. If you don't understand them, we are happy to support, explain and illustrate, more than once if necessary.
• Show us artwork early and often. We can identify potential issues before they turn into problems.

Don't:

• Design something in isolation, sell the client on it and then show it to us. It's bad for everyone's blood pressure. Please don't think we're being unwilling: if we're shown designs that can't be achieved, then we have to say no!

Navigation

Do:

• Visualise a navigation item text wrapping over two lines. It will happen, so be ready for it!

Don't:

• Put content-managed navigation across the top without thinking long and hard about what may happen next year. Your client may want to add a new site section called 'Insert very long name here'. Is there enough space for that?

Integration with outside systems

We do a lot of integrations with stock control or warehousing systems run into issues when the designer has included a whole number of fields that don't exist. There was a recent example where stock management software is supplying the core information for each product in a large 'brochure' site. Their software contained no pricing information, but the design called for four different price points to be displayed on each of the 20,000 different products (price breaks by how many you buy). Assumptions collided with reality in a design presentation when the client pointed out the lack of pricing information and how many person weeks it would take to create that info if they added 100 products a day. The design was changed.

Do:

• Check what information an outside system will be supplying (we'll help with that: we'll usually supply a list of available fields).

Don't:

• Assume that any missing information can be created by the client. They may not be happy about that.

A special note on eCommerce

Do:

• Think like a customer: what would I look for when deciding whether or not to buy? We've not bought a computer because the spec. was vague and the image of the back of the machine was too small and we couldn't see what type of video card it had in it. A £400 sale lost because the photo was too small. People have very little emotional commitment to one shop over another, so your product pages should be very carefully considered.
• Think about how people will use the site, whether it all makes sense and whether you'd buy based on the information you can see on the page.

Don't:

• Use lorem Ipsum. Use an actual product that you would want to buy and make sure it includes the information you need to make a buying decision. If it doesn't, discuss with us to see if that information can be created. 

We've only scratched the surface really, but there's so much to cover....

If you'd like any further help or advice, please feel to drop us a line at make.it.work@welovetheweb.com

In April, Warp Films will launch DRM-free film download sales from its online store at www.warpfilmstore.com. Warp will start with a small selection of films that includes the Artic Monkeys - Live at the Apollo, the film of All Tomorrow's Parties and Le Donk and Scor-Zay-Zee directed by Shane Meadows and starring Paddy Considine. The list of films will grow over time to include future releases such as Chris Morris' Four Lions and most of Warp films' back catalogue.

We Love The Web ltd. worked with Warp Films to design and build the site.

It¹s a shame that this is in any way newsworthy. DRM is the copy protection stuff that¹s been so successful in keeping the Internet free of music and film piracy*, whilst giving customers who support artists and film-makers a worse experience than you get by pirating the film. Films bought by download are usually locked to a single computer and iPod**: so you if you want to watch that film at a mate's house, you'll have to take your computer with you. Using the files on your next computer may not work either.

There was real debate throughout the site¹s development about whether to go for copy protection or not. The decider was that we were able to find copies of Le Donk and Scor-Zay-Zee on Pirate Bay, Rapidshare and myriad bit torrent sites within 30 seconds of looking: this was weeks before the DVD was released. We¹ve been lucky in working with Warp. The 'Bleep' music store www.bleep.net run by Warp Records led the way in 2006 by in selling legal MP3s without copy restrictions. They've built a good business doing so.

We respect Warp Films for having the guts to trust its customers. Piracy is a major problem, but punishing the people who have chosen to support you seems contrary at best. Copy protection doesn't prevent piracy. Most major releases are on Rapidshare or Pirate Bay before they are even available to buy, so it's evidently not working. We understand how scary it is for film-makers to release this stuff, but it's the right thing to do. Surrendering the illusion of control is hard, but deliberately crippling your product only makes paying customers cross.

* the 'Sarcasm' warning flag is raised.
** iPod or other digital media player.