Author Archive

A few months ago I updated the live chat tool for one of the websites I manage so that it would proactively pop up after a visitor had been on the site for a couple of minutes and had viewed several pages. The pop-up is pretty intrusive which concerned me from a user experience standpoint, but I thought I would try it out anyway.

Here’s how the chat popup looks — you can’t navigate the site without closing it:

Proactive chat popup

We’ve now been running the proactive for four months, and the increase in the number of online chats it has generated is quite substantial:

Month Increase in # of chats
September 2011 433%
October 2011 211%
November 2011 195%
December 2011 195%
Average 258%

A 200%+ increase in the number of chats was certainly more than I had expected. Not surprisingly, I was also concerned about the negative impact in might have on other visitors who might find it too intrusive and instead choose to leave the site.

Fortunately, we have not seen any spikes in exit rates that could be attributed to this, nor has our conversion rate gone down. In fact, over the last quarter the site has experienced its highest ever revenue, although this is likely to be due to other activities and campaigns we have underway.

Despite its intrusive nature, we’ll be sticking with the proactive chat popup. If you are running an online chat service on your website — especially if it is an ecommerce site — and do not have it set to proactively pop up, you might want to test whether you can drive more chats this way.

I enjoyed this well explained tutorial on how to code multi-column data tables responsively (demo) so that they display in a usable format on small screen devices. The solution? Assign ‘essential’ and ‘optional’ classes to the the data columns and hide the optional columns at smaller screen widths using CSS3 media queries. Very nicely done.

[via CSS Tricks]

I thought this order confirmation page from Potbelly Sandwich Shop was nicely done (click to view larger).

Potbelly Sandwich Shop order confirmation page

Too often, confirmation pages such as these are overlooked from a design standpoint, so it really stands out when someone takes them time to add some branding / personality to the page.

Of course, there are many other ways you can improve the usefulness of your site’s thank you page from a customer engagement perspective. When did you last look at the user experience when a customer interacts with your business online?

I enjoyed reading ReadWriteWeb’s top web products and top web developer tools of 2011, so I thought I’d put together my own list of top web tools of 2011, based on which ones I liked and used the most.

Here they are, in no particular order:

Basecamp

I use Basecamp every day as the project management tool for my web team. Many people I work with still use spreadsheets and emails to manage their work, and I just feel so organized compared to them. It has just the right amount of features for me, and has been easy for other team members to pick up and use. Given the amount of tasks we have to manage, including multiple websites and email campaigns, it would be impossible to keep everything on track without a solid, user friendly project management tool like this.

JotForm

If you’re still coding forms by hand then you’re crazy. With JotForm I can create any kind of form I need — including branching logic, validation, tooltips, custom thank you pages — in minutes. Embedding the forms into a web page is easy thanks to the range of options, and maintaining them is simple as I can do it all from within Jotform without ever having to touch the code on the page.

HootSuite

I manage a team that looks after multiple social media accounts and HootSuite has been invaluable in enabling us to keep up with posting to all of them and managing interactions with others. The user interface is very intuitive, with all the functionality I need, such as easily posting to multiple social media networks and scheduling posts in advance.

Google Analytics

Not a big surprise to see Google Analytics on this list. It’s a fantastic tool and I use it multiple times a day. New functionality is continually being added, such as the integration with Webmaster Tools, real-time reporting, and multi-channel funnels, which is turning into a real one-stop analytics shop. Plus, there is so much being written on how to use Google Analytics that I’m continually improving my reporting and analysis through the tool.

Keyword Tracker

There are many online services for tracking keyword rankings and backlinks, but I’ve found that Digital Point’s keyword position tracker works fine for my needs. The free service is easy to use, can track a ton of keywords, and provides charts to show your rankings over time in Google, Yahoo!, and Bing. They also track backlinks to your site.

Convert Hub

I often need to email design mockups to stakeholders (some people just love to live in their email), and so I use Convert Hub to do this. It’s quick and easy to use, and supports a wide range of image formats (although my need is mainly PNG to JPG). More recently, I’ve started using QwikVu to share mockups, but it’s too early to tell if it will become an essential tool for me.

LightShot

I’m always taking screenshots and sharing them, and for this I use the Firefox add-on LightShot. It’s lightweight, quick and easy to use, and is perfect for snapping portions of a screen for copying into an email in order to share or send feedback.

LastPass

I use LastPass for password management. I’ve found it to be a well designed password management tool that doesn’t get in the way as I’m logging in and out of websites. It’s pretty intelligent, so it knows when you make a change to some login information, and it manages multiple profiles well, so I can use it with my wife.

Firebug

I don’t have much to say about Firebug, except for how I don’t know how I would do any web development without it. It’s also immensely useful for providing feedback — instead of trying to describe how I want something to look, I can just show them. This also saves cycles, as I can see what works and what doesn’t myself without going through numerous iterations with a developer.

MockFlow

I’ve tried out a number of wireframing tools in the past, but settled on MockFlow for my UI design needs. It is a very full-featured tool, while still remaining easy to use. They also have quite an active community creating wireframe templates, which you can use to jump-start your designs. For the longest time, my main complaint was the lack of a snap-to-grid function, but that has since been fixed and new features are being regularly added. A desktop version is available for no extra charge, but for some reason I still find myself using the web version instead.

Thanks to all of these tools for making my working life a lot easier than it would have been without them.

Honorable Mentions

I use a number of other apps on a regular basis that I didn’t quite make my list. These include:

  • iContact for email marketing (we send 500k to 1M emails a month through this service)
  • Ta-da List for keeping tracking of sites I want to add to an Elements of Design showcase
  • Fileswap for sharing large or multiple files with other people without emailing them
  • Litmus for checking emails for compatibility with a range of email clients
  • Notable for reviewing web designs
  • SurveyMonkey for creating online surveys

These are my choices — I’d love to hear what web tools other people couldn’t do without.

Netflix came up with a different approach for their end-of-year holiday / thanks-for-being-a-customer email — a free DVD rental. Not only is it a nice gesture, but it is also implemented well.

Here’s the email I was sent:

Netflix holiday bonus email

Here is the landing page you visit when you click through to redeem your free rental (click to view larger):

Netflix holiday bonus email

And here is the confirmation page once you redeem your free rental (click to view larger):

Netflix holiday bonus email

Redeeming my free rental literally took two clicks, the messaging is clear and concise, and there were no hidden ‘gotchas’ to dampen my feelings of Christmas cheer towards Netflix. Nicely done!

Which leads to the question, what are you doing to bring a smile to the faces of your customers at this time of year?

Soap.com email header

I was recently working on some updates to one of our email newsletter templates, in particular the header area. I thought it would be useful to create a showcase of email header designs for reference. I certainly found it helpful — I hope you do too!

Note that the majority of these emails are from online retailers. However, many of the best practices in evidence are applicable to any type of marketing email or newsletter, whatever your line of business.

If you’re into email design, you might also want to check out my recent post about the best email width.

I love this post from CSS-Tricks about using icon fonts to create website icons. I’d never really thought about using this technique before, but it seems like a clever way to build considerable flexibility into how you present icons and symbols on a website.

As you can see from the example, it’s easy to customize their size and color which makes it simple to use them in various locations across a site — whether it’s in the header, the footer, or within the page content itself.

If you want to get started with icon fonts or need some ideas on the types of icons you can use, there are plenty of icon fonts available online. Here are some that are more useful for web designers:

Writing good, original content is hard. Which is why I love these two example filled posts by Ann Smarty about reusing existing content in clever and creative ways.

The first article looks at ways that you can repackage your content into formats such as presentations, PDFs and cheat sheets.

The second article delves into how you can repackage your content into an image-based format, such as a comic, a flowchart, or a comparison chart.

Both are well worth a read if you are finding new content ideas hard to come by.

I recently cancelled my account with online backup service Mozy as they have discontinued their unlimited storage plan. Before I did, however, I moved to another service which still provides this option.

In order to find a new provider, I started my research on Google and it quickly became apparent that there were several online backup services that provide unlimited backup for about $5 per month. They all offer approximately the same features as far as my needs are concerned, for about the same price.

In order to decide between them, the basis for my decision moved to which backup service did I like the look of the most. I wasn’t about to download a trial of each service, so my decision was largely based on reviewing the website of each company.

I figured that the one with the best designed website would also have the best UI for their backup program. In short, I was looking at the websites to see which one gave me a ‘good feel.’

Based on this approach, I ended up choosing BackBlaze. If I am going to be using a program and/or online service it’s important to me that the UI makes it easy and enjoyable to use, and theirs seemed most closely aligned with the design aesthetic that appeals most to me.

BackBlaze website

BackBlaze website

Not only that, but a well-designed website makes me feel that if the company cares about my experience when I’m just visiting and learning about their service (‘kicking the tires’ if you will), they will also care about my experience when I am a customer and am actually using their service.

BackBlaze uploader

BackBlaze desktop program

And when you are competing in a space where the services offered are largely commoditized, other than price, it’s this focus on user experience that sets a company apart from its competitors.

In a similar vein, I joined Spotify a few months ago. I was looking for an online music service and all the hype convinced me to give it a try first. However, other than the huge selection on music, I haven’t been that impressed by Spotify.

Again, it comes down to user experience. The fact that it requires a desktop program that looks like an iTunes clone feels antiquated when most other services I use are web-based. The iPhone app is clunky and unintuitive to use — all of which combines to produce a less-than-stellar user experience.

Since then, Spotify’s competitors, Rdio and MOG, have started offering a free option, so I have been able to check both of them out too. The experience of using Rdio’s web interface is almost night-and-day compared with Spotify. The elegant UI is both a pleasure to look at and use, and it makes music discovery so much easier than Spotify (an important feature when you have a library of millions of tracks to explore).

Here’s how you manage your music library in Spotify (hint: lots of scrolling — way worse than iTunes):

Spotify music library manager

Spotify music library manager

Here’s how you do the same in Rdio:

Rdio music library manager

Rdio music library manager

Even though Spotify has the larger music library, when I am listening at my computer I prefer to use Rdio because the user experience is so much better. I’m sure it’s only a matter of time before I switch.

What other services have you chosen based on their user experience — either on their website or in the application itself? Let me know in the comments.

With the wide range of devices on which people now read their email, I wondered if this had caused retailers to adjust their email templates — my assumption would be to make them narrower. So I thought I would review some of the retail emails to which I subscribe in order to see if there was an ideal email width or any kind of recommended standard.

I reviewed the width of emails from 155 retailers, which ranged in width from HSN with the narrowest at 580px to Harry & David with the widest email at a whopping 894px!

To be fair, Harry & David recently redesigned their email template and it looks narrower, but for some reason they have stopped sending me emails so I have yet to receive one with the new design.

Here’s how the retail email widths compare in chart form. The average email width is 675px.

Comparison of retail email widths

Comparison of retail email widths

Digging a little deeper into the data, we can see that:

  • 17% of the retail emails are 600px wide or less
  • 44% of emails are 650px wide or less
  • Almost 75% of all the emails reviewed are less than or equal to 700px wide
Email Width < 601px < 651px < 701px < 751px < 801px
% of Emails 17% 44% 74% 92% 98%

Interestingly, although the ideal email width has for many years been recommended at between 550-600px, only 17% of retailers are following this guideline. On the other end of the scale, only 8% of retailers opted to make their emails wider than 750px.

As far as the ‘ideal’ email width is concerned, three widths stood out as being preferred, which can be seen by the plateaus in the chart above:

  • 600px
  • 650px
  • 700px

Each of these widths was used equally by 14% of retailers, and as a group they accounted for 42% of the retail emails studied.

Looking at the data in terms of ranges gives a more general idea of where email width preferences fall:

Email Width 576-625px 626-675px 676-725px 726-775px 776px+
% of Emails 22% 29% 34% 10% 5%

I was surprised that not one of the ranges stood out clearly as the most popular, which shows that when it comes to ideal email width there is not a great deal of consensus among online retailers.

Finally, here’s the full table of results:

Retailer Email Width (px)
HSN 580
RedEnvelope 585
Crabtree & Evelyn 590
Cabelas 592
SkyMall 593
Anna Scholz 600
Bonobos 600
FansEdge 600
Patagonia 600
Reebok 600
Zappos 600
AutoAnything 600
Soap.com 600
Bon-Ton 600
Conns 600
Dillard’s 600
Mothercare 600
Orvis 600
SmartBargains.com 600
Brookstone 600
IKEA 600
Linens-N-Things 600
Ashford 600
Blue Nile 600
Buy.com 600
Zazzle 600
HP 607
OfficeMax 607
Appleseed’s 608
Office Depot 612
Gettington 619
Ford 620
Starbucks 620
NorthernTool 622
Walmart 629
CafePress 630
JC Whitney 633
Sierra Trading Post 636
eForCity 640
figleaves.com 640
L.L.Bean 640
Kohl’s 640
Target 640
Micro Center 640
Sam’s Club 641
The Sharper Image 642
Ralph Lauren 646
Horchow 650
Aeropostale 650
Boden USA 650
Chadwicks 650
Crocs 650
Cusp 650
dressbarn 650
Frederick’s of Hollywood 650
Neiman Marcus 650
Sports Authority 650
Tommy Bahama 650
Diapers.com 650
Fingerhut 650
Hayneedle 650
Spiegel 650
Walgreens 650
World Market 650
CircuitCity 650
Dixons 650
Newegg.com 650
Pottery Barn 650
Harrods 654
eCOST.com 655
Petco 660
Kate Spade 660
Motorcycle Superstore 660
Overstock.com 660
CompUSA 660
Coldwater Creek 662
B&H Photo 664
Loft 670
1-800-Flowers.com 675
Baby Phat 680
TK Maxx 680
B&Q 681
The Home Depot 682
CDW 685
J.Crew 686
Nordstrom 687
H&M 690
J&R 690
CB2 690
Chapters.Indigo.ca 692
Bare Necessities 695
Charlotte Russe 696
Build.com 699
adidas 700
Ann Taylor 700
Athleta 700
Banana Republic 700
Bluefly 700
Converse 700
farfetch.com 700
Fred Perry 700
Gap 700
Next 700
Talbots 700
Topshop 700
Beauty.com 700
Sephora 700
Bass Pro Shops 700
Layla Grace 700
Lillian Vernon 700
Marks & Spencer 700
REI 700
RadioShack 700
UncommonGoods 700
Zales 700
J.C. Penney 704
Crutchfield 708
The Land of Nod 708
Bath & Body Works 709
Crate and Barrel 710
Anthropologie 718
Abercrombie & Fitch 720
aerie 720
Barneys New York 720
Express 720
Gilly Hicks 720
The Limited 720
Saks Fifth Avenue 720
The Container Store 720
Tiffany & Co. 720
Staples 720
77kids 725
Dell 728
Chico’s 730
Debenhams 732
Coach 737
American Eagle Outfitters 740
Dune Shoes 740
Lands’ End 740
Brooks Brothers 742
Apple 742
Eddie Bauer 748
Swatch 749
Hallmark 758
Victoria’s Secret 760
Anne Klein 770
Tory Burch 770
Currys 770
John Lewis 782
Restoration Hardware 784
Gymboree 800
Costco 800
Frys 820
Old Navy 836
Harry & David 894

It’s worth noting that almost all of the emails reviewed were graphically heavy and virtually none were of the newsletter format, a study of which may produce very different results.

Note: Thanks to Tableizer for making it a snap to convert these tables from Excel into HTML.

Database Design and Management

Cwebpro can design and develop a small business data management solution for you. We will provide professionally crafted entry screens and a database that will grow with your business.

Professional Web Designs

If you need a web site designed or updated contact Matthew at Cwebpro for quality work at a fair price. The Web Creation Zone (Cwebpro) can meet all of your business website design and data management needs.