Usability & Navigation

Make sure it works

I was on a beauty product site the other day and they had a questionnaire to determine which line of their products would be best for me. I actually spent over 3 minutes filling this form out, only to find out that the submit button was broken and did not work. I never got the information I was looking for and was frustrated enough to find the contact page and let them know. I never got a reply and I’m very unlikely to re-visit this site or buy the products now.

Be vigilant about is broken links and have someone test your site regularly, especially to external links that are not in your control. Nothing screams unprofessional site like links that go to Page Not Found. Any time you change anything, it’s always good practice to test for this. You can check your site right now with this tool. http://validator.w3.org/checklink

If it’s not ready, don’t put it out there

Say NO to "under-construction"

I strongly encourage forethought and planning in site design, but that doesn’t mean promising links or info that is not ready yet. If the content for the page is not ready, then don’t put it in the navigation. How many times have you seen COMING SOON! only to come back a week or month later and have whatever was coming still not there? Design the navigation so that adding pages later is no big deal, but “under construction” and “coming soon” are  just not cool.

If Mom can’t figure it out, it doesn’t make sense

When I first designed my own site, I did some very artsy things with my navigation. Instead of the straight choices across the top or side that you see almost universally, I embedded the links into the header art. I showed this site to my Mom and despite the fact that the giant leaves to the right had Portfolio and Contact written on them, she didn’t know that was where she was supposed to click until I showed her. Oh. Eventually I got around to changing my navigation to something more conventional. Maybe not as cool, but if your audience can’t make sense of it, what’s the point?

For more on this, check out the Mom test video.

Is it easy to use?

We’ve all been in sites where how to get to the next step, refine the search or figure out the shipping before buying was just not apparent. User testing, (this is a great place to use your Mom again), is critical. Even small companies can enlist family and friend help. This is where you really want to find someone who is not you or your designer. If it’s not easy to use, the chances of repeat visits, otherwise know as business, are slim.

Engagement & Conversion

Engaging your audience and converting them to sales are the holy grail for e-commerce sites. Once you’ve got the structure making sense and working, making your site attractive to your target audience is next.

Know your audience

Know the audience you're designing for

Design elements

Why are quote and buy buttons often large and hot colors? Because they work. Why is navigation across the top or on the side? Because that is where we expect it to be. Your site can be your own without being so unconventional that nobody knows what you’re offering or how to get more

Call to action example

information. All e-commerce sites and even those that are just service businesses should have some kind of “Call to Action” on as many pages as possible. What that is depends on what you want your audience to do, but if you want them to get a quote, or sign up for a newsletter or search or buy, makes those actions obvious and don’t be afraid to test different methods.

Customer Service

OK, this seems like a no-brainer, but it bears repeating. If you’re selling something, at some point you will have to deal with your customers.

• Don’t surprise them, be up front about things like shipping costs
• Don’t make them search for a way to contact you
• Make returns and other policies obvious

If you are selling your own products, make sure this process is completely tested as well. The system that works is one that can handle the exceptions well. Very few people will talk about an uneventful order, everyone will complain about a bad one.

Sell your Credibility

Belong to a chamber of commerce, a trade association, have a profile on Linked In or a fan page on Facebook? Tell the world about it. Not only does bring credibility to you and the services you offer, but it has the added bonus of adding more SEO to your site. Do you see what’s happening at bottom of this page?

Test it, track it

Google analytics

How do you know what pages on your site are being visited? How do you know how long they are staying on a page? How do you know if your customers are bailing in the middle of a sale? How do you know that you really need to make sure that your site works in IE6?  How do you set up A-B testing to see which landing page works better? One word: ANALYTICS. Google analytics is free to install. There is no excuse for any site and particularly an e-commerce site to not have the tracking code installed. Business is all about measured results. This is where it starts.

Further Resources

http://www.seomoz.org/blog/17-new-rules-for-successful-ecommerce-websites

http://www.site-reference.com/articles/Internet-Marketing/Building-eCommerce-Websites-That-Work.html

http://reach.dzone.com/articles/10-key-practices

http://www.webdesignfromscratch.com/web-design/current-style.php

http://www.lakeshorebranding.com/company/blog/simple-ppc-tip-increasing-conversions-with-a-shiny-button/

http://www.mahalo.com/how-to-use-google-analytics-for-beginners

http://www.newfangled.com/how_to_use_google_analytics

The question I always come back with when someone asks me this question is “How long will it take you? Do you have your content ready?”If I send you a mock-up for design approval, how long will it take you to get back to me? Are you ready to move the process along with comments, approval and the next payment?

The reality is (and one of the main reasons I teach the seminar) is that while all small business owners want and need a website, most are unprepared for all the work that needs to go into it. Unfortunately, I’m not a fairy godmother. I cannot just create a site for you with my magic wand out of thin air. My job is to create a design that works for your business and makes it easy to use and compelling for your customers. Your job is to sell your products and services. I can help you with structure,design and functionality, but only you can tell me about your business.

The other reality is that while my priority is getting your site designed and coded, it’s not yours. You’re still running your business. Getting back to me in a timely fashion with comments and feedback may not happen and that stops me in my tracks. I used to design a layout and then ask for content. One time that process took over 6 months. I’ve come to the conclusion at this point that I really need content first, before even thinking about design. Having the content first does several things.

• It forces me to design a layout that actually works with the existing content, instead of finding out later that there really isn’t room for that form here.
• It forces you to really think about the whole project and all of the details ahead of time.
• It allows both of us to plan for as many contingencies as possible while still in the design stage.

This creates a win/win situation for both of us and hopefully keeps the project on track so it really doesn’t take too long at all.

Original Article

On October 20, 2009, Chris Campbell wrote:

So you have an idea for a business website and you’ve hired a web designer. It’s a simple enough collaboration. You’re raring to go live. If, however, you wish to encourage people to keep coming back to your site, understand that this takes more than stylish, colorfully designed pages and great Photoshop skills. After all, there are things that a web designer won’t tell you – or can’t tell you – but which you should know anyway. Here are some of them:

1. “Shiny, sparkly, and splendidly bright” doesn’t cut it. It might work as a lyric for a Michael Jackson single (“Gone Too Soon”), but not as an agenda for web design. Out of propriety, or shyness typical of people with artistic temperaments, a web designer might not tell you to keep off the electric neon-colored background, or the blinking rainbow font, or the head copy that scrolls like a snail. Keep off them anyway. You want your website easy for your visitors to read. Don’t give them a headache.

2. Put a “Skip” option on your fancy Flash intro. It’s actually simpler and easier to not have a fancy Flash intro altogether. But in case you decide to have one anyway (it makes sense for some businesses), remember to make the option of skipping it available to your visitors. If your web designer doesn’t tell you this, well – it might be that he just wants more and more people to see his work. It doesn’t matter: put a button so repeat visitors won’t have to sit through the same thing over and over.

3. Say no to popup windows. All right, those ads can bring in a bit of revenue. But make sure they comprise no more than a quarter of your website content. And place them with subtlety. If you want a visitor sign up for your newsletter, buy your e-book, or take the online survey, do it with subtlety. Pop ups are not subtle. Nothing is worse than a popup while reading an article, its easier to click the back button than stay on your site. Very rarely do people bookmark sites with popup ads popping up all the time. (See? Even reading “popup” several times is annoying.)

4. Turn it down; better yet, turn it off. At least give people the chance to do so. I’m talking about the sound that suddenly starts playing when one visits a website. Again, this is a matter of subtlety. Neither your website designer nor you should play DJ and force visitors to listen to audio tracks, be it a business podcast or your choice of background music. If you just have to play audio on your website, place in a prominent area on the webpage the option of muting or pausing it.

5. “Back to top” makes reading a lot easier. Your web designer will probably have learned in design school that reading a page that scrolls horizontally can be irritating. But if you have to have so much content that your page scrolls, make it scroll vertically. And then put a “back on top” option for easier navigation.

6. Don’t ask for TMI, or too much information. Think about it: if you were to visit a website, you’d hate signing up for anything that requires you to enter your residential address, phone number, and birthday, among other personal details. And unless there’s a financial transaction involved, you’d be foolish to give out your credit card information. So build a website that doesn’t ask too much; keep it basic. If you have to use a form with fields that visitors have to fill in, don’t make it mandatory.

7. Highlight your brand and make it easy to contact you. While you may have a shared aesthetic with your designer, it doesn’t automatically mean that he understands your brand fully. Your web designer can’t be expected to double as your strategic consultant. That leaves you in charge of communicating the story of your business through your website, which really is a cost-effective way of establishing your brand. Highlight it. Put a logo, your site name, and your contact information where visitors can see them. And then tell the people what you can offer them.

8. BONUS- Build it and they will come syndrome. Yes the first step to effectively marketing your organization online is through a website, but web designers often are not internet marketing experts. Having a strategy and plan for how you are going to market your business online through email, search engine optimization, paid advertising or maybe even blogging is important to maximizing your investment of your website.

Then he directed my attention to a completely different site that was not his. “I want my site to look just like this one.” Oh. Now we’re not talking about a few minor changes, now we’re talking about a whole re-design. This is basically building a new site. Except for having most of the content already written (and really that probably needs some work as well), everything will have to be done from scratch. I can charge hourly for this, but most small business people like to have a clue on cost before starting such a project.

Once I had this information, I would be able to send him an estimated cost and a contract. While I have no problem just billing for a few hours of maintenance, for a complete project, I need to have a signed contract and a spelled out payment plan. It is typical to ask for 1/3 up front, a 1/3 after the design has been approved and the final payment once the working site has been approved, but before it gets launched.

Close to a week went by and I hadn’t heard from him, so I sent him a friendly follow-up email asking him about getting the login information so I could correct the current site. The reply I got back is “is the new template ready yet?”

What we have here is a failure to communicate.

My bad, I should have followed up the conversation with an email spelling out my understanding and the action points that we both needed to take.

The cost of designing and building a site is often one of the first questions I get and probably one of the hardest to answer. This is not an evasion. If you went into a Home Depot and asked how much a new kitchen was would you expect a direct answer? No, you know that you would have to pick out the appliances, cabinets, counter top materials, etc. before a price could be generated. So what do I need to be able to write you a quote? Some of that depends on what you need or want for your site, but some of it is pretty basic.

1. How many pages do you want?
2. Do you have the images you need or do you need stock photography or?
3. Do you have the written content ready or do you need a writer?
4. Do you need a contact form? (What happens when someone fills it out, does it go to you email or a database?)
5. Is there ecommerce needed?

As you might imagine, I’ve just gotten started. The discovery stage is a very important collaborative effort and one of the main reasons I encourage my clients to fill out my questionnaire. It may seem like a lot of work and it is, but without your contribution to the project there isn’t much I can do.

The good news is that every new client and project is a fascinating learning process and this faux pas on my part has at least given me good material for an article and a reminder to never assume anything. Now excuse me while I go reply to that email with some detail about what I need to get this project rolling.

For the small business owner the over whelming amount of information on these subjects can be intimidating, so let’s start with a small primer and understand why you should care.

Social Media – This includes things you’ve probably heard of like Facebook and Twitter, but almost anything online that you can contribute to (like YouTube or Wikipedia) counts. Most mere mortals use this kind of thing for personal enjoyment, but the growing thinking is that this is the new way to communicate and sell to your customers. 20 somethings have never used a phone book, they look it up online. And it’s not just 20 somethings anymore, the biggest growing segment on Facebook right now is boomer aged women. If you watch television on demand or like I do on the Internet, then your exposure to commercials is way down. But if I know my local business and connect with them on Linked In or Facebook, then I know what they are up to. Then as the theory goes, the friends of my friends also know what they are up to and the potential for a new customer is born. Small business competes with large on a more even playing field.

SEO – Search Engine Optimization is the holy grail of getting on the first page or 2 of Google. Not when someone searches for your business name, but when a complete stranger searches for the product or service that you provide. There are many ways to make this happen for your site and there are many experts out there that specialize just in this. This is where content has to be king. Pictures and art have a definite place in telling your story, but as far as the search engines are concerned, words are what they understand.

A really beautuful site that has just the right fonts and colors is just the begining. If the content is not optimized so that people searching for your product or service can find you, then that’s all your site is – pretty. Most people build a site hoping to increase sales in some fashion. If that’s what you want, then your budget for the project needs to be more than just the design and coding. Without careful content planning and a marketing strategy that includes making it personal with social media and making sure that the search engines find you – no one will come.

Am I an expert in all this? Hardly, but I can direct you to some people who are. I’m the one who makes it all work and look good. But I am learning more all the time and trying to participate more regularly myself. (Which by the way is probably my next article – this stuff is time consuming, how do you manage it?) Adding recent and relavent content is something that Google loves too, one of the reasons we’re becoming a world of bloggers. So, I’ve done my bit, so help me out and do yours. Let your friends know about me and post this on Facebook or tweet it on Twitter for me will you? I’ll do the same for you.

If your business doesn

The biggest part of this puzzle is getting the TV to be a computer monitor as well as a TV. To do this, you have to be able to run a video and audio cable from the PC to the TV. Older sets only have a coaxial connection in for cable, but the new LCD HD TV’s, should have places to not only hook in the DVD, VHS (yes I still have mine – I still have my original vinyl records too, that I’m recording over to digital, that’s another article), X-box etc. They should also have an audio L/R out so you can connect it to your existing stereo or surround sound system.

Desktop PC to Flat screen TV

2. Audio out from the PC. This is almost universally the green mini jack plug from the audio card. The Bravia does have a mini jack in for audio below the VGA, so getting a mini cable long enough to work was what I tried first. While this worked and gave me sound out of the TV speakers, it did not translate the signal to the audio out jacks (3.). I like to run the audio into my older stereo (you know, receiver, big speakers) and the TV speakers by them selves are pretty weak. The next thing I tried was using a pair of regular desktop PC speakers and just setting them on either side of the TV. This worked pretty well and my wireless keyboard had a volume control on it, but I still wanted the sound from my big speakers. Then I found what I needed: a mini to RCA splitter cable. This let me hook the PC right into the stereo receiver, beautiful sound for my movies.

3. Audio out from the TV. Normally I would have this running into the VCR or AUX L/R in on the stereo, but that’s where I hooked up the PC… So I moved this over to the tape monitor in – works like a charm. (Yes I still have my vinyl, but I did finally get rid of my cassettes during my last move.)

Another problem arose – what if I have a show I like to watch that is NOT being offered online? Sadly, there are still quite a few of these. The most obvious solution is just to watch it live – but having that DVR really spoiled me. I don’t want to wake up at 8:30am on Sun. to watch Sunday Morning. I want to wake up whenever and watch it then. So, for $70 (you can spend more if you want) I got a TV tuner. Specifically for me a Win TV-HVR-850 Hybrid Video Recorder. These are very cool devices. You can get them as internal cards, or as USB external. I chose USB, just for simplicity. You plug the device into a USB slot on the PC, then plug your coax cable (you’ll need a 3 way splitter if you have a cable modem as well) into the other end. Install the software and this little device goes out and finds your available TV stations, just like when you first hook up your TV or cable box.

It came with several pieces of software that were a bit confusing at first. One program allows you to watch live TV off of the PC. Another one give you an account for a web based TV guide which gives you the ability to pick a program and say RECORD. This record request goes to a 3rd program where I can set it up to be a recurring recording if I want. The recorded shows are stored on your PC (about 2Gb per hour), so now I have my own personal DVR (PVR) again, but I’m not paying a monthly fee for the privilege.

This has an added advantage for my clients as well. If one of them gets publicity on a news show, I can record it with just a couple of clicks. Then I have a digital file that is easy to edit and post to their site. Very cool.

I knew that most broadcast TV was going online for streaming video viewing within 24 hrs of broadcast, but I didn’t want to watch TV in my office chair, I wanted to watch it in the living room in my comfy chair on a big screen. I am not a sports fan but I am a movie fanatic and I worried about how I would replace TCM and the Encore movie stations. I figured I would just get a Netflix subscription and live with DVD’s.

I thought about replacing my 10 year old 27″ Sony with an LCD that would have the capability to hook up to a PC. That way I would still be able to watch TV, slash my Comcast bill and I could give the old set to my daughter in college. Then the old Sony heard me talking about this and died a week later. The universe was trying to tell me something.

My daughter missed out on getting the old one, but I did get a new 32″ Sony Bravia for around $600. I’m sure this is true for most of the new LCD HDTV’s, but this one has the hook-ups I needed for my existing DVD and VHS players, a side hook-up for my son’s X-box and most importantly, a VGA cable port so that I could connect a PC to it and treat the TV like a monitor.

A little background here – I do web design for a living, have done PC tech support for years and have a teenage son living with me who is a burgeoning game developer. We both have laptops for mobility, desktops for serious work and there is an extra desktop for back-up. Originally this extra desktop was the original family computer an 8 year old Dell. This machine had had it’s RAM and video card upgraded, but not it’s processor. My thinking was that the Internet streaming video was mostly dependent on the speed I was getting at any given moment from the cable modem and so a newer PC was not really necessary.

So, I spent an afternoon behind the TV and since the PC was in the office on the other side of the wall, I spent some time with a paddle bit as well making a hole big enough for the VGA cable. (If my landlord Frank is reading this – that was the afternoon you called making sure I wasn’t killing anyone, and yes, I cleaned up everything and put a nice cover on both sides of the hole.) The TV is in the corner on a stand with wheels. I’ve set up and had to move more equipment over the years than most – I like to hide cables when possible, but it’s key not to tie everything down and always be able to have access to things. When the Comcast guy showed up to pick up the cable box, he was extremely happy to see me just pull out the stand so he had ready access. He was then happy to test my coax cable (I had some older pieces that needed replacement) and make sure I had the best hook up possible. But I’m jumping ahead of my story.

So, I got everything set up and then spent the evening with my son with one of us trying to run the mouse from the other room to get the resolution set up correctly and get to a web page. Another trip to the computer store later and I came back with a wireless keyboard and mouse as well as a 6′ mini jack cable so I could run the sound to the TV.

Then the big moment, could I watch TV satisfactorily from my PC? We got it to the CBS.com site and looked for CSI. CBS required a quick download for it’s player (all of the stations use different players and they all did this) and then we got the most recent episode. Overall, the quality was very good and I was happy. Over the next week, I went to all the major broadcast sites, (NBC, ABC, TNT, FOX etc) downloaded their players and I was in business. The quality of the players and their control varies, ABC being the current winner. CBS was until they started showing the sponsor logo below. They all have issues with resolution getting pixelated occasionally and freezing. I think both of these are related to how busy the internet signal is at the time.

Then I got the trial subscription to Netflix. I discovered that about a third of their very extensive library is available for instant download viewing – very cool. Now I can watch a large selection of movies and TV series when I want and not have to wait for the DVD. On the downside the resolution and jerkiness of the picture was bad, really bad, so I called their tech support.

The support guy was very nice and not from India. He then told me that I was sort of a test case for them. Netflix had recently decided to change their player to Microsoft’s Silverlight. Unfortunately, this player is heavily dependent on the processor (my 8year old one was just not up to it) and not on video card (which had been upgraded for my gaming son). Silverlight requires a 2GHz processor or better. Bummer, the picture on this PC was just not going to be acceptable. I hooked it up to my new workstation PC to test and it was much better, but I needed this machine for work and was not willing to have to be constantly changing the video cable out. Time to retire the 8 year old machine.

I did need to replace it, but not with a $1500 machine. I was able to get a lower end Dell for $400. 2Gb of RAM, a 250Gb hard drive for my backups and most importantly a dual 2.2GHz processor. Not a powerhouse machine, but I don’t need to do heavy graphics work with multiple programs open on it either. I just need it to be storage and handle all the video players.

Now all the streaming stuff from Netflix is great. For under $20 a month I have access to practically anything I want, including all those Showtime series that I never had before. On top of that, because I have the 3 DVD at a time subscription, that also means that at any given time, 3 computers can be streaming video from my account. That means that my daughter and son can access my account from any PC and watch a movie. They can pick anything that is instant streaming from their PC’s, or using their Xbox, watch whatever is on the instant queue on a television. My son does this in his bedroom down the hall, but will continue to be able to do this when he goes off to college next year. My daughter does this from across town.

The paradigm has shifted. I no longer ask “what’s on?” Now it’s “what do I want to watch now?”

It’s true, I spent about $1000 to make all this happen and you’re thinking why? Where are all the savings? After I got all this working and was satisfied, I finally called Comcast. I canceled the “extended basic” package and went down to the basic basic broadcast stations and had them come pick up the DVR. Naturally I’m still paying for the cable modem for Internet access. My $147 bill is now $60 a month. Over the course of a year that’s a $1044 savings. (Even with the new Netflix subscription, it’s still over $800 in savings.) I just paid for the new flat screen TV and the new computer. Next year I’m a grand ahead. Not bad, not bad at all.