Tag Archives: ecommerce

Successful communication

Posted in Site content on by Paul Boag

We put a lot of time and attention into the content on our sites, but what about our other communications?

We send out newsletters, post blogs, participate in forums. All of these reflect on our brand and the way we are perceived. How can we improve the way we communicate?

Good communication is dependent on two factors:

  • When you communicate
  • How you communicate

Get this wrong and you risk seriously damaging the relationship with your users.

When to communicate

The schedule of your communications are always important, whether posting to a blog or sending out a newsletter. Send too many communications and it becomes irritating, too few and they forget about you.

There is no frequency that is always right. To a large extent it depends on the nature of your site. If your site sends out stock market tips then users may expect updates every few minutes. However, if you sell a service that is purchased once every couple of years then sending out communications every few weeks will be enough to keep you in their minds.

The key is not so much frequency as regularity. Users should come to expect your communications. Communicating on an ad-hoc basis becomes frustrating, especially with blog posts, newsletters or podcasts.

However, communication does not have to be completely dictated by a schedule. You can also have trigger based communications. These are normally emails sent to a specific individual rather than the whole community. They are sent in response to a specific event rather than a schedule.

A common trigger based communication is an email sent to somebody who has just purchased from an ecommerce site. These typically include an email confirming the transaction but also one when the goods are dispatched. These emails are extremely important and yet are often overlooked in the development process.

Trigger based communication are also useful in encouraging repeat traffic. Most website communities have a large number of ‘sleepers’. These are individuals who have signed up for your site but have stopped using it. It is possible to monitor user activity and if they stop using the service an email can be automatically sent tempting them back with incentives or new content.

However, never forget the golden rule of user communication; do not contact users without their permission. Nothing will damage your sites reputation faster and destroy your community than spam.

Take a few moments to consider your communication strategy. When might it be appropriate to send out trigger emails? Are you collecting user’s contact details and is it legitimate to contact them? What methods you are going to use to communicate and on what schedule?

Your communications with users needs the same attention you gave your sites copy. This includes not only when to communicate, but how.

How to communicate

There are lots of communication tools out there including blogs, podcasts, email and RSS. However, these are just technologies and don’t get to the heart of how to communicate. Communication is about what you say and how you say it.

Always remember when communicating with users to make it personal. Whether it is in a forum or posting to your blog, people like to talk to people not faceless corporations. Whenever possible write as ‘Jim from Marketing’ rather than as ‘Acme inc.’ People are less critical and more receptive when dealing with a individual rather than an organisation.

Although your aim is to demonstrate that your organisation is made up of ‘real people’, that does not mean you do not need no unifying voice.

Know your voice

The danger individual employees engaging with your users is that your organisation sends out mixed messages about its identity. All copy should have a consistent tone, from the content on your website to the emails you send existing customers.

At first reading this may seem contradictory. On one hand I demand a consistent identity and on the other I want users to see the people behind your organisation. However, this is actually an approach newspapers have been employing for years.

Most newspapers have regular columnists who readers come to recognise. However, each newspaper has an overall identity. For example in the U.K. tabloid newspaper "the Sun" has a very different persona to that of "the Times".

Deciding on your persona will underpin all communications with users. Ask the question – if your site was a person, what type of person would it be? Would it be a young hip teenager or a boring middle aged business man? These characteristics help define how you communicate and the tone you set for your site.

However, whatever persona you create it should always be as open and transparent.

Be open and honest

Many organisations feel they need to maintain a flawless facade with users. This serves to create a barrier, reinforcing the feeling that the user is dealing with a faceless corporation.

A better approach is to be honest and fallible. Nothing is more effective in getting users trust than admitting when you get it wrong. Take for example photo sharing site Flickr.com. Their site suffered a series of outages in which users were unable to access their photos. Unsurprisingly the mood in the flickr community was pretty negative. However, flickr was able to turn that negativity around with a simple blog post entitled "Sometimes we suck". They acknowledged the problem, apologised and promised to do better. They did exactly that and before long flickr was seen as a shinning example of how an organisation should run a community.

In fact it is possible to turn a critical user into an evangelist for your site simply by responding in a timely and open manner. In a world where users can instantly broadcast their frustrations via blogs, social networks and other methods of online communication you cannot afford to ignore them. However, if you respond in a positive and open fashion those same users will be broadcasting their pleasure at your response.

This post is an edited extract from Paul’s book – The Website Owners Manual.

Using web stats for more

Posted in Site content on by Paul Boag

We all use web stat tools like Google Analytics for tracking marketing campaigns. However, they can also be used to improve your site.

As I continue my efforts to finish the website owner’s manual, I have reached a section on web stats. What struck me was how little most of us use the power of web stats. They can do so much more than monitor your marketing efforts. In particular they can:

  • Help find and resolve problems on your site
  • Improve the quality of the content you deliver

Let us look at how.

Finding and resolving problems

When it comes to web stats one of the most popular figures to monitor is conversion rate. Conversion rate compares the number of users visiting your site to the number that complete a call to action.

If your conversion rate is low, this could reflect a problem with your site. This could be due to:

  • Usability – The user is unable to find the call to action due to poor navigation or other usability issues.
  • Accessibility – For example a particular browser does not render the site correctly and so users cannot complete the call to action.
  • Content – The site does not provide adequately convincing content to encourage users to complete the call to action.

But what consists of a low conversion ratio? That entirely depends on your call to action. For example, an ecommerce site could have a ratio anywhere between half a percent and eight percent depending on the sector and product. On the other hand, a call to action that does not cost the user money should expect a higher figure.

The best approach is to compare a conversion ratio against itself over time. As you make adjustments to your site does that harm or improve conversion rate?

Fortunately website statistics can also help establish what changes will improve your conversion rate. Start by looking at where users exit your site.

Dropout points

When looking at where users exit your site exclude those who only view one page. If you do not the homepage will be at the top of your list. This is because people click through from a search engine, discover this is not the site they wanted and leave immediately. Although this may indicate a problem with your SEO, it does not reflect badly on the site.

Once these anomalies are excluded take a look at the remaining pages. Why are users leaving at these points? Is the content relevant and clearly presented? Is the navigation usable? Are you suggesting a next step to the user or are these dead end pages?

Look at the history of users who dropout at a particular page. How long have they been on the site by this point? What other pages have they viewed? How long did they spend on the exit page before leaving? Does this reveal trends which help to identify the problem?

Sometimes the problem will be obvious, other times it will not. In such cases try usability testing. This will uncover potential issues. If usability testing is not an option try using a tool like Click Tales.

Click Tales picks up where traditional analytical packages leave off. It allows you to see what users do on an individual page. It record user sessions anonymously showing you what they click on, hover over and how far down the page they scroll.

Although a technology like Click Tales is impressive it cannot replace traditional usability testing. It does not provide you the opportunity to question the user. For example it will not explain why users abandon shopping carts?

When the website owners of ecommerce sites start examining their website statistics they are often horrified by the dropout rate experienced on shopping cart pages. They worry that there is a fundamental usability flaw. However, in many cases that is not true. Questioning users reveal they abandon baskets for a host of reasons ranging from ‘I was saving the items to buy later’ through to ‘I wanted to compare the price on another site’. Like the homepage, shopping carts will always have a high exit rate and no amount of statistical analysis can change that.

However statistical analysis will allow us to improve the content and products we provide on our sites.

Identifying popular content

There is a real benefit in understanding what users want from our sites. From what content they want to what products they will buy, understand users requirements allows you to mould the site to user needs.

Website statistics can help identify popular content but not in the way you might expect. Looking at the most visited pages will not provide answers.

Popular pages can be misleading for three reasons:

  • Pages can be visited by mistake
  • Page can be popular because their prominent
  • Pages can be popular because they are gateway pages to deeper content

The homepage is a good example of these problems. I have already explained that the homepage is visited my mistake from search engines. It is also a prominent page and used as a navigational tool for finding other content.

Looking at how long users spend on a page can help to weed out ‘false positives’. However ultimately this is a flawed approach and can only give a partial indication of the popular content on your site.

A better approach is to look at the search terms users entered into search engines to reach your site. Almost all website analytical packages provide this information and it helps define users priorities. However, this is only going to show content that already exists on your site. If a user entered a search term for content you do not have, your site would not have been returned. The user would never come to your site. What you really need is a way of identify content that you do not offer but users want.

This is possible by examining the phrases users enter into your own sites search engine.

Approximately half of your visitors will use internal search. Every time they use search they are telling you exactly what they want from your site in their own words. That is incredibly valuable.

You need access to these search terms and particularly the ones that return zero results. This is the area where you need to do work. Users are expressing an interest in a piece of information you do not have or your search engine does not recognise.

Once you have access to these search phrases, start tailoring content around them. If the content does not exist, add it where appropriate. If it does exist but is not being found, introduce the exact phrasing your users are searching for. Better to use the language of your users than sticking to internal jargon nobody understands.

And there you have it. Proof that website stats can be used for a lot more than just tracking marketing campaigns.

123. Plight

Posted in Classic shows on by Paul Boag

In this weeks show we review Textmate and the Top 5 Tips for Web Designers and we discuss the plight of in-house designers.

Play

Podcast: Download (30.4MB)

Download this show.

Launch our podcast player

A quick request. We are really in need of some more transcribers to help with the interviews we do. The team we have are doing an amazing job but it would be great to spread the load.

If you feel you could help once in a while please drop an email to Ryan our producer and he will add you to the list.

News and events

SPAM meltdown

It is always with fear and trepidation that I mention HTML email. It inevitably leads to a torrent of comments ‘educating’ me about the evils of HTML in email, and that we should only use plain text.

Although personally I wish HTML email was never invented and try to limit its use, I do accept it is here to stay. Despite its many drawbacks it is statistically more effective than plain text from a marketing perspective.

You will be hard pushed to pursued a client to forgo HTML. Inevitably we will have to produce HTML templates occassionally. Of course, being conscientious, when we do produce HTML emails we want to ensure they look great and are well coded. This leads me to a couple of stories worth mentioning.

The first is that Patrick McNeil (of Design Meltdown fame) has launched a new site called Spam Meltdown. The site showcases examples of great email design in much the same way as Design Meltdown does with websites. Patrick has done an amazing job on this site and he has my sympathy because he is subscribed to over 1000 mailing lists! The designs he showcases are organised by style, colour, industry and topic. As with design meltdown this categorisation approach works really well. You can quickly find inspiration by looking at categories that are relevant to your project.

The second news item worth mentioning is that Campaign Monitor have updated their chart for CSS support in email clients. Campaign Monitor is a service which allows you to send HTML newsletters, but they do a lot more than just take your money. They are actively involved in improving standards support among email clients through the email standards project. Next time you are trying to produce an HTML email template check out their CSS support grid as it will clearly show you whether a particular CSS property is supported.

Form Analytics

While I am on the subject of cool services like Campaign Monitor, I also want to mention Clicktale. Clicktale is a service that allows you to track users as they move about your site and even anonymously record their actions. The last time I mentioned them this disturbed many people who saw it as an invasion of privacy. However, I see it as a valuable tool for learning about user interaction and improve site usability.

If you share my view, then you maybe interested in a new service they are starting to offer. You can now not only track users as they click around your website, you can also watch how they interact with forms.

In addition to video recording, the new form analytics service also provides three invaluable reports…

  • The time report – This shows how long users spent completing each field.
  • The blank report – This provides information on fields that have been left blank on submission.
  • The refill report – Which highlight fields that have been completed incorrectly.

If you run a site that requires users to complete long or complex forms then you will see the benefit of this service. On a high trafficked ecommerce site this would be invaluable, substantially reducing the number of users dropping out at checkout.

Art direction hits the blog

This week has seen the launch of Jason Santa Maria’s new personal website. For those of you who do not know, Jason is the creative director at Happy Cog (Zeldman’s company).

Normally, I would not mention the launch of a new personal website. However, Jason has done something very interesting. His new design is well executed but plain. It certainly is not as inspiring as his other work. The reason for this simple approach is that it is a framework upon which he will build.

The idea is that each of his blog posts will have a custom design to accompany it. The design will therefore reflect the content. In effect he is bring art direction to his blog. This is a bold experiment and something that Zeldman has written about before.

Although I am fully behind the idea of bringing content and design closer together, I do have some reservations. First, there is a possibility that the constantly changing design could make navigation around the site confusing. Fortunately from what I have seen so far that will not be the case. Jason has been careful to ensure key navigational elements remain in a consistent location and have similar styling wherever you are in the site. However, if other designers were to adopt this approach would they be so careful?

My second concern is a purely practical one. If each article not only needs writing but also designing, will that reduce the amount Jason posts? In other words is a blog really the right place for this type of art direction?

However, despite these reservations I am really pleased Jason is trying this approach. A personal website should be the place to experiment and try new things. Too many blogs (including my own) are cookie cutter solutions with some pretty graphics slapped on top. Its superb to see somebody doing something different.

Prototyping

My final news story of the week returns to a subject we have touched on recently. How do you wireframe a modern web application with its high level of interaction? In show 120 I mentioned that one approach might be to utilise flash. Today I want to point you at an article on the List Apart website, which suggests that building prototypes maybe better than struggling with wireframes.

When I first saw this article I was hesitant. After all I can barely pursued my clients to pay for wireframes let alone a full blown prototype. However, the more I considered what was being suggest, the better the idea seemed.

The majority of time spent getting an application working is spent on bug fixing, browser support and non-core functionality. The rough ‘outline’ of an application can come together very quickly. What is more, unlike wireframing, a prototype can be used as the basis for the final build. It does not get thrown away like a wireframe.

The article also points out that prototypes are better for demonstrating difficult concepts to clients. They encourage earlier collaboration between designer and developer, and provide something substantially better to user test against.

With almost every new website having some form of web application, we all need to consider how to better conceptualise their operation.

Back to top

Feature: The plight of the in-house designer

The more organisations I work with the more sympathy I have for in-house designers and developers. It is a role that can be thankless and isolating. How then can their lives be made that much easier? We discuss this in this weeks feature.

Back to top

Reviews: Textmate and Top 5 Tips for Web Designers

We have two reviews this week by our lucky competition winners Teifion Jordan and John McFarlane. Teifion and John will be going to this year’s dConstruct in Brighton.

dConstruct is the affordable one day conference for people designing and building the latest generation of social web applications. Tickets cost £125 inc VAT and went on sale yesterday so be sure to check it out.

Textmate by Teifion Jordan

Hi, I am Teifion Jordan, I am reviewing a program created by someone far smarter than me. I am going to be looking at Textmate. Textmate is a Mac only application though there is a similar editor called eText Editor for Windows.

First impressions of Textmate are that it’s pretty sparse, it looks like any other editor. I throw it a PHP file and it colours the text in, just like any other editor would. The colour scheme can be changed, both text and background colours can be altered, which is quite a neat touch. I can even make parts bold, italic and underlined which is a neat touch. It requires knowledge of Regular expressions but I can actually add in more rules for what to colour in! I used this to make variables used as array indexes appear differently, something I have wanted to do for some time. Not since I was a toddler, but definitely some time.

But enough moaning about how the program itself is both smarter and better looking than me, I wanted to try some code. I found that if I typed "foreach" in a PHP block and hit tab, I was presented with an entire foreach loop. Closer inspection revealed that there were dozens of snippets and commands for PHP and dozens more for each of the many languages and some things that were not languages. With 5 minutes of effort I had setup Textmate to post my blog posts for me, I am now one step closer to not having to put any effort at all into blogging.

It is possible to create your own snippets and not at all hard either. I now have one to tell me that I am beautiful and another to create a PostgreSQL query. I can also write new commands, I can write them in command line script, Python, Ruby and PHP to name a few. All of the commands are completely open sources, so you can see what’s already been done, and sort of plagiarise that sort of work for your own means. Except plagiarism is bad so don’t ever do it.

I can edit columns, I can write new snippets, commands and even entire languages, I can Regex, I can manage projects with a hierarchal file structure. It’s like before I was walking but now I’m on a push bike. I can’t make use of the ability to run down pedestrians until I learn how to do balance and pedal. Okay, the running down pedestrians was a bad example but anybody that is still listening and not calling the police must have understood it so I’ll continue. There’s nothing I can’t do in Textmate, I just need to look at the extensive online manual to learn it. And there I think is it’s biggest failing.

Textmate is a really lovely program to use but it’s so complicated. Coda, as a contrast, is a more intuitive application but it is to Textmate as a spade is to a chainsaw, that is, meant for a different problem and with fewer moving parts but also with the ability to digs holes? I’m sorry, my mind wandered. What I meant to say is that Textmate is great for dealing with code but not so much the design which is what apps such as Coda excel at. I’ve now been using Textmate for 10 months and I still think there is potential to unlock, though, that might be because I’m a thickie.

I suppose I should wrap this up by saying that I would heartily recommend anybody thinking about writing lots of code to give TextMate a good look. It takes a lot of time to get a lot out of it, but there really is a lot to get out of it.

Thank you very much for listening, I hope this was at least semi-informative

Top 5 Tips for Web Designers by John McFarlane

Hi, I’m John McFarlane and this is the first ever review brought to you live from my living room. Today I’m reviewing a post that has been submitted on the boagworld.com forum. The title is "Top 5 Tips for Web Designers". I’ve been reading through the replies and I’ve put together my top 5 top tips.

In at number 5 submitted by richquick, allow time and money for personal development, read blogs, buy books, attend conferences, experiment and learn new techniques and technologies.

In at number 4 posted by Jayphen, surround yourself with designers, whether they’re colleagues, real world contacts, online contacts, forums, podcasts. The more you talk about design the more you learn and I’d like to add to that e-mail designers for advice and let them know your experiences.

In at number 3 posted by some guy called Paul Boag, develop with the latest best practices, ensure you separate content, design and behaviour. Make sure everything you build uses progressive enhancements.

In at number 2 another one by Paul Boag, it’s an obvious one but one that can’t be put across more clearly, know HTML, CSS and javaScript inside out, you need to know the core technologies that underpin the web back to front. I’d like to add to this point, the basics of HTML and CSS are easily learnt but don’t be fooled into thinking that you know enough, you really need to know these subjects to an advanced level. This will benefit you when your implemented the latest best practices.

And that brings me on to my number 1 tip and that is love your job, I think if you love this industry and have a passion for web design, I think those qualities will guide you to achieve your goals. So enjoy your development and don’t rush yourself too much. Take the time to develop the right way, build contacts and friends and embrace the industry as a whole.

That about raps up this weeks review. I hope you’ve enjoyed the very first show live from my living room. Thank you and goodbye.

Back to top

Listeners feedback:

Newspaper columns on the web

Adrian writes: Hey guys, long time listener from the states. I’ve been working on a new personal site lately and I’ve become fixated on the idea of using newspaper style columns. Since you two seem to know a thing or two usability, I’d figure I’d ask for your thoughts.

It seems like most people view them as a print concept that doesn’t translate well online but seeing as most screens these days are widescreen and vertical space is taken up by menu bars, docks and browser extensions, going horizontal strikes me as a logical solution.

I appreciate the logic. It is true that more computers than ever have widescreens and that vertical space is at a greater premium than horizontal. However, I would think very carefully before employing newspaper style columns. As I see it there are two concerns:

The usability concern

As you point out, people reference usability concerns as the primary reason against newspaper columns. In a newspaper, copy runs across several columns with the eye darting from the bottom of one column to the top of the next. This is acceptable because the user can view the entire newspaper in a single glance. There is no such thing as a scroll bar.

On the web it is different. You are unable to predict the height available in a browser window and so users will almost certainly have to scroll. This means the user will scroll down one column as they read and then have to scroll back to the top to start the next column. This is far from a pleasurable reading experience.

It is also important to consider width as well as height. As you say newspaper style columns works well on high resolution, widescreen monitors. On anything less the story becomes unreadable with narrow columns and short line lengths. The alternative is to allow both horizontal and vertical scrolling. But as I am sure you, know this is the ultimate usability error and should be avoided at all costs.

The technical concern

There are also technical considerations to take into account. How will a story be split over multiple columns? Currently this cannot be done in CSS, although this may appear in CSS3.

One option would be to manually layout each block of text. However, this isn’t going to be practical with anything other than the most static of sites.

The only option is to use some server side code. However, even this is not without its problems. Consideration needs to be given to inline elements such as images or quotations. What happens if they appear at the end of one column? Does a quote get split? Will the design accommodate larger images? What happens when text is scaled?

Although all of these technical problems can be overcome, you are forced to ask whether it worth the effort. This is especially true considering the serious usability concerns.

Estimating dev/creative work

Kirk Henry asks: I’m not sure if this should be listed as a question or not but her goes. I’m a Creative Director for a dev shop with some very large fortune 500 companies and a problem I always seem to come across is difficulty in the estimating process. We use excel documents, have some standard hours for comps but have to do custom estimation for multi media projects etc… my estimates are always pretty decent but I want to know what you guys use or what software you would recommend. I have been listening on itunes from the start and love the show.

Ok, this is probably the most important subject that we (and I mean the web community) don’t talk about. Why? I think, because it’s difficult to pin down a method of reliably estimating a project and, more so, we’re all guilty if underestimating time and again… these are my thoughts:

The first thing to ask yourself is ‘how serious is this project?’ I have a sixth sense for requests for quotes that fit into the following brackets:

  • ‘We have this idea but have no idea how much it will cost and we want you to do all the research work involved in scoping it. Of course we won’t pay for the research and there’s no way we’ll pay sensible money for the work once we know what it is’
  • ‘We have a supplier that we want to work with but my boss says I need a couple of other quotes’
  • ‘Us guys in sales and marketing have been doing some blue sky thinking and want a quote to redevelop Google….’

You get the idea – timewasters. You need to deal with these requests quickly – this is how I do it. Have a chat with whichever department(s) would do this work if it ever materialised – get them to give you wide ballpark figures. Add in PM and contingency and send them an email. 99 out of a 100 won’t even bother getting back to you. Some will, but they’re usually trying to get free scoping (‘can you give me a bit more detail on how you reached those figures’).

Anyway, I’ve ranted long enough timewasters, back to Kirk’s question.

First question – do you know the budget? If yes, then you are looking to fit a scope into a set amount of effort. Can you do it? Will the ‘client’ be happy with the scope that fits their budget? Do they understand what that scope is (especially if you have reduced it to fit their budget)? DO NOT get creative with your effort allocations just to fit within the budget. Either ask for more (up front) or walk away.

If you don’t know the budget then you are looking to scope a project from scratch. If it’s a really big project then ideally you should be being paid to scope it as we’re looking at business analysis and consultancy here.

Break down the project into rough task areas. It’s likely that you’ll have done other projects that include similar tasks so you’ll know efforts on these (though ask yourself if you got it right last time). For the ‘new’ tasks, break it down further and you will probably find other smaller tasks that you have done before. For the really new stuff then you need to talk to an expert (designer/developer/IA) and get them to think the task through. They will provide you with an informed guess. That’s right – guess. Because people are guessing it is really important to overestimate fixed price projects. This is the cost to the client of having a fixed price.

Don’t forget to charge for meetings (if 3 people are attending then charge for 3 people!). Project management is notoriously undercharged. We have a rule of thumb of 15 – 20% (and that’s probably light).

The golden rule of estimating is don’t be tempted to lower your probably already too low price just to win the work. Be prepared to walk away.

As far as tools to help with estimating go, MS Project is great at separating tasks, linking resources to tasks and giving you a good idea of how long things will take. But, I tend to find that it is over the top at the quote stage and tend to stick with Excel.

Back to top

117. Friendly

Posted in Classic shows on by Paul Boag

On this week’s show, we review woopra, a google analytics alternative and we explore why friendly urls are so important and what tools are out there to help you set them up.

Play

Podcast: Download (22.4MB)

Download this show.

Launch our podcast player

Information

Fuel Conference

Fuel is a one-day conference for entrepreneurs and marketers who want to make their companies, services and products truly remarkable. The conference is on the 13th June 2008 and tickets cost £195 inc VAT however for lucky boagworld listeners if you enter the promo code boagworld at the checkout you will get a £25 discount!

Back to top

News and events

The devil is in the detail

We kick off the news with three stories that focus on the detail of web design. So much is said about design, usability, accessibility and other broad subjects. However, less is written about the small things. It is here that a good site becomes an excellent site.

The first is a post on the list apart website entitled Zebra Striping: Does it really help?(1). Zebra striping refers to alternating colours on a table of data. It is a small thing, but a lot of us do it thinking it helps the readability of the data. But does it really? This post takes that theory and puts it to the test. The results are inconclusive but it is an interesting read anyway.

The second story is about a new book released on the topic of web forms. It’s called Web Form Design(2) and as the title suggests looks at the much under-represented subject of creating a great looking, usable form.

As I have said before forms make or break some of the most crucial elements of a website: checkout, registration, data input, and any task requiring information entry. This looks like an excellent read and I highly recommend you check it out. I will be.

The final post that focuses on the detail of design is looks at pagination(3). It is a tutorial that explains how to code pagination semantically. It then demonstrates how you can use CSS to recreate the appearance of pagination on sites like digg or flickr. It is an easy read and ideal for beginners.

Review crazy

The next theme of the week is reviews. In particular Smashing Magazine have gone review crazy in two excellent (if somewhat excessive) posts.

The first reviews 35 useful code editors(4). Of course, we can write our code with a text editor but that wouldn’t make for a very interesting post! Also we like those advanced features like auto complete, formatting and debugging tools.

If like me you have been using the same coding tool for years, this article is worth a read. Things have certainly moved on and there is no shortage of choice out there. It might be time to change.

The second review from Smashing Magazine only manages 25 applications. This time it is WYSIWYG editors(5). I guess this compliments the previous post very well. However, generally speaking I would warn against producing sites using WYSIWYG editors. That said they do have their place. They are useful to give to clients who want to maintain their own sites. They are also good for posting to blogs or other sites where the styling is already set.

It has to be said that I personally code in Dreamweaver, which has a WYSIWYG component. I have been known to use it to find a particular part of the code I want to edit.

A balanced look at flash

Our final news item of the day is a post by Veerle on her blog entitled Does Flash irks me?(6). It is an excellent opinion piece that clearly lays out her feelings about flash. She explains how she decides whether to use it and dispels some of the misconceptions about the technology.

Her post is very timely coming as it does a week after flash goes open source. It is balanced and her attitude very much mirrors my own (therefore it must be right!). If you view flash as the ultimate evil or alternatively refuse to code in anything else, read this post. It will provide a healthy dose of realism.

Back to top

Feature: Friendly web addresses

When redesigning boagworld considerable time was spent formatting the sites’ web addresses. Find out why so much time was taken and an introduction to the tools I used in this weeks feature

Back to top

Review: woopra

When it comes to website statistics Google Analytics dominates most of our thinking. However, there are some impressive alternatives. One I would like to introduce to you is woopra. I give my thoughts to woopra in this weeks review

Back to top

Listeners feedback:

Creating consistant colors

Anna Joe Writes: I know that the colour of a website will look a little different on every monitor, but is there a profile setting that you use as an ‘average’ setting?

Since I work on Mac with a Mac monitor, I’m afraid most people will see something radically different than me. I have read that Mac defaults are brighter than Windows. I’m using a lot of dark colours, so I am concerned about the site appearing too dark on the majority of computers.

I have a list of colour settings provided on my computer… only one seems to have a Windows-related profile. It’s called ‘Nikon WinMonitor 4.0.0.3000′

Do you have any suggestions regarding this issue?"

I have to confess Anna, this was a subject I knew nothing about before your question. The way that I got around the problem was to look at any design I produced on as many different monitors as possible. To be honest, even after my research I would advise this as the best approach.

View your site on a TFT and an old CRT monitor. Also check on laptops and under different operating systems.

However, based on a bit of reading it would appear that the problem is to do with Gamma settings. Macs by default have gamma correction built in while PCs do not. This causes images (especially photographic images) which look good on a Macintosh monitor to appear too dark on a PC.

Fortunately there is a tool that allows us Mac users to experience the horror of the PC world. It’s called gamma toogle(7) and can be downloaded for free.

If you don’t have access to multiple machines for testing this would be the next best thing.

Setting up an ecommerce site

Paul East Writes: My girlfriend has come up with an sales idea that would require a simple store front application with the ability to take credit and debit card payments online.

Have you any advice on where to start or any recommendations on store front applications?

We’d like to try and keep start up costs low (we’d like to avoid paying a web designer, sorry!) and avoid eBay type stores if possible for that more professional look.

We’ve done a little investigation on merchant accounts but could do with a good steer on the rest!

Again this is not a subject I k
now a huge amount about. Most of the ecommerce sites I work on are considerably larger. However, hopefully I will be able to point you in the right direction.

First, for the best advice when it comes to setting up ecommerce sites big or small I would highly recommend the ebiz video podcast(8). These guys really know their stuff and in fact we had them on show 55 to talk about ecommerce basics.

Second, in the past I have come across two simple shopping cart systems that impressed me. The first is FatFreeCart(9). This simple system can be integrated easily into an existing site. If you are only selling one or two items this is perfect. The alternative is shopify10. This is a little more sophisticated but incredibly simple to setup and run.

Neither of the questions today are subjects I know much about and I am guessing there are people groaning at my advice. If that is the case, get in touch and we will put you on the show.

Back to top

Review: Woopra

Posted in Reviews on by Paul Boag

When it comes to website statistics Google Analytics dominates most of our thinking. However, there are some impressive alternatives. One I would like to introduce to you is Woopra.

Screenshot of the Woopra interface

The first thing that sets Woopra apart from Google Analytics is that it is a desktop application. This is both a blessing and a curse.

Live results

One blessing provided by the desktop is the ability to stream live results to the application. You can see users moving around the site, watch as they click between pages and get detailed feedback on their location, history and computer configuration.

Being able to watch users interact with your website in real time is hugely enlightening and tells you much more than Analytics can.

Of course it would be possible to stream live to a website using Flash or AJAX but I am not aware of a stats package that does this.

A rich user interface

Another benefit of being a desktop application is the smoothness and richness of the user experience. From the constantly updating animated map to the interactive graphs and charts, there is something very immediate about the way Woopra works.

User interaction

Woopra popup chat message

Not only can you watch users move around your site it is also possible to interact with them in much the same way as Live Person works.

At any point you can select a user who is browsing your site and choose to "start a conversation". The user sees your message in the form of an instant messaging alert.

I can see real potential in this, especially on ecommerce sites where users so easily abandon baskets. Being able to provide on-site customer support could be hugely beneficial. In fact it is a subject Iwrote about back in 2004 and I still believe it is an under utilised technology.

Of course it could be horribly abused and terribly intrusive. However, it is an invaluable tool for some audiences such as the elderly or those with less online experience who require interactive help.

The curse of the desktop

Woopra is not without its problems. The desktop application is built in Java, which should ensure cross platform compatibility. However installation on a mac was incredibly painful, involving the use of a beta version of Java and fiddling with preference panes. I would hope things were not so bad for windows users.

Another problem with Woopra is that it is currently in closed beta. Fortunately getting hold of an invite is not too difficult. I received mine in a couple of weeks just by using their online application form.

Woopra is now available to anybody who wishes to signup and is entirely free.

So is Woopra the perfect analytics tool? Probably not. However, I have abandoned Google Analytics for the time being in favour of the more interactive, rich environment of Woopra.

Headscape is recruiting (again!)

Posted in News on by Paul Boag

Headscape are currently after two new members of staff. If you are an experienced Information Architect or a newly qualified developer, we would love to speak to you.

Yes I know, I am not supposed to be blogging at the moment. However, the reason I am not blogging is because we are so insanely busy. In order to get around this problem we are recruiting (yet again!). If you fancy the idea of working with the gang at Headscape then drop me an email.

Here are the jobs…

Information Architect

We are currently looking for a smart, articulate Information
Architect to work with our clients on initial stakeholder interviews,
user testing and the production of wireframes.

We are looking for candidates with some or all of the following skills:

  • An ability to organize complex information into simple, easy to
    understand structures.
  • Experience in running stakeholder interviews and other requirement
    gathering exercises.
  • Outstanding organizational and communication skills.
  • Proven experience in preparing, running and reporting on usability
    test sessions.
  • The ability to produce easy to digest documentation on IA and
    usability issues.
  • Extensive experience creating sitemaps, wireframes, use-case
    scenarios
    and flow diagrams.
  • Experience of working with large, complex, information heavy
    websites.
  • Ability to plan and execute competitive analysis.
  • Proven experience of working with and producing personas.
  • The ability to meet aggressive deadlines.
  • A good understanding of the design process.
  • A good understanding of technical constraints.
  • Experience of copyrighting.
  • Experience of working with B2C ecommerce sites.

The ideal candidate would be one who is able to work from our Southampton office for at least part of the week.

Experience:

  • Bachelors degree or the equivalent
  • 3 years experience designing websites preferably within a web design
    agency.

Graduate web developer

Starting salary: £22k+
Location: Southampton

Headscape is looking for a graduate web developer, with a 1st or 2:1 degree in a relevant discipline, who is passionate about their profession, keen to learn and can demonstrate good problem solving abilities.

Headscape’s core development technologies are ASP.NET v2.0, VB.NET, Microsoft SQL Server 2005 and XML/XSLT. We have our own, highly flexible content management system software that is the basis for most of our website implementation projects for clients. We are also in the process of developing an online service aimed at web designers.

If you don’t have skills in our core development technologies, don’t worry. We can help you to acquire the skills you’ll need. What we need is demonstrable ability and enthusiasm.

You will need to be a fast learner. You need to be a confident, productive developer. You need to understand relational databases. You must be motivated by developing real-world, web-based applications that really matter to their users. You’ll want to grab with both hands this once-in-a-lifetime opportunity to join a web agency with a national (becoming international) reputation.

If you have had some web development experience outside your degree course we’d love to hear about it too.

Your role will involve working in client project teams with project managers, designers, information architects and user interface developers to create superb bespoke web solutions on-time and within budget.

About Headscape

Headscape is an established web design agency based in the Southampton,
England. We produce top quality websites that are accessible to the
widest possible audience, easy to use and designed around our
clients business objectives. Clients include large government bodies,
educational institutions, charities and the commercial sector.

Ecommerce quick order

Posted in Reviews on by Paul Boag

A get a steady trickle of emails asking about the application of ‘web 2.0.’ How do the cool things we see on the trendy new generation of sites apply to the everyday web projects we are involved with?

I believe that almost any site can benefit from technologies such as AJAX and Javascript. These technologies and websites offer an improved user experience that can help even the most inexperienced of web user. In this video I show how the lessons learnt from the new generation of website can be applied even to the over 60s market where Internet experience is minimal.


The video is best viewed full screen. Click on the menu option and then on the icon in the top right of the video. Alternatively pop over to the Wiltshire Farm Foods website and try the quick order facility yourself.

What we can learn from Flickr

Posted in Site content on by Paul Boag

Once we wrap our heads around the fact that we should be focusing on our content rather than our website it offers some interesting new opportunities.

This years dconstruct really inspired me especially the talk by Tom Coates. It challenged my perception that web design is all about the website. Instead, as website owners, we need to start thinking about what content we hold rather than the method by which it is delivered.

These days the web is becoming less about websites and more about content delivery in all of its various forms. Once we wrap our heads around the fact that we should be focusing on our content rather than our website it offers some interesting new opportunities. However, instead of talking in theoretical terms lets look at a real world example; the photo sharing site flickr.

Alternative delivery mechanisms

Flickr realized very early on that they were about photos, not running a website. Central to the Flickr philosophy is empowering users to share their photos. It doesn’t matter to Flickr how their users share their photos. What matters is that they are exposed to the biggest audience possible. By opening up their content via an API Flickr photos can be accessed through a huge variety of methods including (but not limited to)…

  • The Flickr website
  • Mobile devices
  • Desktop widgets
  • Digital WiFi photo frames
  • Third party desktop applications
  • Third party websites
  • Even printed material (such as moo cards)

In short, Flickr has let go of the concept of driving traffic to their website and focused on putting their content in front of as many people as possible.

You maybe asking yourself how this applies to your website. After all you are not flickr and don’t share photos. However, the principles can apply to most content types. Take for example the humble blog. A blog is made up of individual blog posts. Each of these are content items that could be delivered through almost all the mechanisms mentioned above (with the possible exception of digital photo frames). Equally you might be a university who holds a database of all of your courses. Again, why limit that data to your own website? It could just as easily be delivered to a much wider audience.

Amazon get this idea. They have had an API since the dawn of time and are more than happy to push their product lines out beyond the confines of their website. Of course by doing so they loose some level of control over their content but that is offset by the many more potential customers who are exposed to their products and their brand.

However it isn’t just Flickr’s API that should impress you. Its also how they navigate and organize their content.

Navigate via meta data

Take a look at your average Flickr photo. It contains a lot more than the photo itself. Each photo has associated with a mass of additional information (known as meta data). Just some of the data held on a photo includes…

  • A title of the photo
  • A description of the photo
  • Comments on the photo
  • The photoset the photo belongs to
  • The user who uploaded the photo
  • Tags for the photo
  • Notes on the photo
  • The copyright restrictions
  • The longitude and latitude of the location where the photo was taken
  • The type of camera used to take the photo
  • Settings used when taking the photo

However, what is interesting is not the amount of data available about the photo, but the fact that it is possible to navigate by almost all of those criteria. You can search on title, description, tags and pretty much anything else. You can click to see the photos of a user who has commented or even see all of the photos that have a certain copyright restriction. You can view photos geographically via a map and even look at photos taken with a specific F stop!

This richness of navigation really helps when navigating a huge amount of data (such as the 1 billion photos in Flickr). It enables users to quickly and easily find what they are looking for as well as exposing them to content that perhaps they would have never previously found.

Again there is a lot that we can learn from this. In particular there are real benefits here for ecommerce sites. Building up rich meta data around products and allowing users to navigate via that, will expose them to many more products and allow them to narrow their search much quicker. For example on an ecommerce site users could choose to navigate via customer ratings or brand name as well as more traditional categories. With our blog example from earlier users could navigate posts by tag, author, or even number of comments. The possibilities are endless.

Of course, this approach is not without its risks. Without the kind of clean simple design implemented by Flickr users could quickly be overwhelmed by all of these options. However, it does not need to be that way and with some careful visual hierarchy a site can be both meta rich and easy to use.

Conclusions

The key to this approach is to start thinking beyond the page metaphor and to start looking at your content in terms of data types. Obviously this approach does not apply to all content types (for example I don’t envision pushing the about us page to third party applications) however most sites contains some form of key content to which these principles apply. The trick is identifying what they are.

Making the most of the footer

Posted in User experience on by Paul Boag

The footer is the graveyard of many websites. The place where links are sent to die. However it doesn’t have to be that way.

This week I thought I would try and tackle a question from Peter in Italy…

Disclaimer, copyright, accessibility statement and privacy policy; these are the links that can often be found in the footer of a page. Why is it important to add this information on a website and what should this information include?

Good question! Why do we will fill our footers with all of this stuff? I suspect the truthful answers is three fold:

  • that we are lemmings, blindly following what others have done before.
  • that the only reason the footer exists at all is as a way of “finishing off” the bottom of the page.
  • that the footer is a dumping ground for information which doesn’t fit neatly anywhere else in the site.

This somewhat reactionary approach cannot be healthy so lets take a step back and look at what is commonly found in footers and what better solutions might be out there.

What is often found in the footer

To start with let’s examine the list of footer items that Peter proposed:

  • disclaimer
  • copyright
  • privacy policy
  • accessibility statement

Legal rambling

First up, disclaimer and copyright. These two links are often joined by various other forms of legal talk. Generally speaking, these are a waste of time from the users perspective, but often have to appear for legal reasons. Exact legislation varies from country to country (for example in the UK you have to display certain company registration information), however few people actually care about this stuff.

If nobody cares about this information why are we linking to it from every single page of the site (as footers tend to be universal)? What is more, why do we separate them out into numerous links? Why don’t we simply have a single link marked “legal information”?

Peter in his question asked what should be included in this information and to be honest I dare not try and answer that. I am no lawyer and as I have already said the answer will depend on your location. However, I would suggest that where possible this information is written in plain english rather than the legal jargon used on many sites. Take a leaf out of the creative commons book.

The users rights

Peter also mentioned privacy policy in his question. I would bundle this into a general category that appears a lot in footers. Lets call it “user rights”. This includes things like privacy, return and cancellation policies.

Unlike the legal ramblings, depending on the type of site, many users may actually be interested in this information. On ecommerce sites in particular users want to know these kinds of things and having that information gives them the confidence to buy.

If you are selling stuff or if you are collecting personal data then consider including this kind of information in your footer.

Accessibility

Finally, the last item Peter identified is the accessibility statement. I have to say I like seeing an accessibility statement link in the footer. It tells me that the website owner has at least considered accessibility and thinks it is important enough to justify a link on every page. However, although I appreciate the sentiment I feel that there are better ways of going about it.

The trouble with an “accessibility statement” is that it smacks of more ass covering. The emphasis is on defending the site against those that might criticize it rather than helping those users with accessibility needs.

If you are having trouble using a site because of a disability you do not immediately think “what I need is an accessibility statement”! What you actually think is “I need help”. Accessibility should sit under a help section and should be written within that context. “What help can you provide people with disabilities” rather than how do you defend the fact that your site doesn’t scale.

Of course it could be argued that people only look for help as a last resort. Perhaps it should be sold as a “guided tour” instead ;)

Whether this help section (or whatever you call it) should be on the footer at all is another matter. In my opinion it is too important to leave in the graveyard of your average footer. However maybe if the footer becomes something more, it might be the right place. That leads us nicely on to asking what role the footer should actually fulfill.

What role the footer should fulfill

So if the footer is not a dumping ground for rogue links, what is it for? Well for a start, I would suggest it has a lot more power than we give it credit. Think about it for a moment…

  • We know most users are now comfortable with scrolling and reach the bottom of the page.
  • The footer appears at the end of the body content when users are looking for their next action (after scanning the page).
  • It appears on virtually every page of your site.

The problem is that historically footers have been limited to a single line consisting of a few unattractive text links. However, there is absolutely no reason why they cannot be more. A growing number of sites demonstrate that if we free the footer from our artificial constraints it can be a powerful navigational aid. It can provide quick links to killer content and even be used for up selling and cross selling on ecommerce sites.

When next you design a website I would encourage you to seriously consider how you can make the footer more than a place where unloved links go to die. Take a look around at how others are beginning to use the footer in more innovative ways.

Podcast 55: Ecommerce 101

Posted in Classic shows on by Paul Boag

Payment gateways, secure transitions, order fulfilment. Ecommerce can be a confusing subject. In this week’s show we are joined by Eric and Ben from the eBiz Vodcast.

Play

Podcast: Download (26.4MB)

Download this show.

To subscribe directly within itunes click here

With Ben and Eric being almost as talkative as myself and Marcus, I am not even going to try to document all that we covered. The main topic for this week’s show was basically an introduction to setting up of an ecommerce site. We looked at some of the more confusing aspects such as payment gateways, fulfilment and credit card transactions. However, we also reviewed shopping cart software and discussed the top 10 things that make or break an online shop.

To learn more about ecommerce I highly recommend you subscribe to the EBiz Vodcast. Ben and Eric are excellent presenters that are both informative and entertaining. If you enjoy Boagworld you will love their show.

Also in this week’s show

We discuss the acquisition of YouTube by Google. We also cover the launch of IE7, which is impressive has it hadn’t been released when we recorded the show. And finally we discuss the web development survey released by SitePoint.

Podcast 53: Ecommerce Usability

Posted in Classic shows on by Paul Boag

Product information can make or break an ecommerce site. In this week’s show we look at the usability of ecommerce sites and in particular how you display your products.

Download this show.

To subscribe directly within itunes click here

Recently I have been reading Jakob Nielsen’s book “Prioritizing Web Usability”. Although I don’t always agree with everything Jakob says this is an invaluable resource and I strongly recommend that you consider buying it.

I have just finished the chapter on product information for ecommerce sites. What he had to say on the subject was so good that I thought I would share some of it with you.

We cover:

  • Pricing – What to display and how to display it
  • Common Questions – Ensuring you address FAQs on subjects like delivery, returns and security
  • Product descriptions
  • Layering product information so as not to overwhelm users
  • Product imagery
  • After sales support
  • Supporting articles on your products and the benefits these provide you as a website owner

Later in the show we also discuss some of the comments about ecommerce usability made, in the boagworld.com forum.  Unfortunately we couldn’t cover all of the issues discussed so if you would like more detail visit the ecommerce thread on our message board.

In the news

There are some very interesting stories in the news this week. Probably the biggest story is the possibility that Google intend to by YouTube. For more information on this acquisition check out TechCrunch’s report. However, more interest to me are two stories found on the BBC website. The first is a report stating that people are more concerned about net crime than being burgled. This remarkable report emphasises the need to reassure users continually about the privacy and security of their personal information. The second article exposes the fact that despite people being more tech-savvy than ever before, they are still left confused by the mass of technical jargon online.

Review

Finally, we review an easy to implement ecommerce system called Shopify. Although not quite as straightforward as RightCart it does have considerably more features and is definitely worth checking out if you are considering a small scale ecommerce website. For a more complete rundown of the different ecommerce packages available read the ecommerce software thread on our forum.

Podcast 46: Selling web design services

Posted in Classic shows on by Paul Boag

This week on Boagworld.com, we discuss how to sell your web design services, the pros and cons of HTML emails and we review the .net web design magazine.

Play

Podcast: Download (30.6MB)

Download this show.

To subscribe directly within itunes click here

Selling your services

You may build the best websites in the world but if you do not know how to sell your services then nobody will hire you. That is the sad state of the world. Web design is competitive marketplace and simply being a great developer or designer is not enough. You also need to know how to write good proposals and come across well in presentations.

That is why in this show we take a long hard look at the sales process and how to become more effective at promoting yourself. Below is a rough outline of what we covered in the show:

Play to your strengths

It is easy to bite off more than you can chew when pitching for work. Do not pitch for contracts that are too big for you and avoid relying too heavily on outsourcing, as many clients are uncomfortable with this. In particular Marcus recommends that you never promise something unless you are 100% sure that you can deliver on it. Failure to deliver can seriously undermine your company’s reputation.

Focus on a specific market

Marcus and Paul both heavily favoured identifying a sector in which you have some good case studies and focusing on winning work there. Given time you can build up a strong reputation in that sector which will in turn attract more clients. Clients seek out web design companies that have experience working on similar projects so this approach works much better than the scattergun mentality applied by many agencies.

Care for your existing clients

Marcus reckons it is ten times easier to win work from an existing client than it is to win from a new one. He has a good point. Not only is it easier to win new work from a happy client but they will also recommend you to others. It is vitally important that you keep existing clients happy because they should be the lifeblood of your business. If you are in the position of having to constantly find new work then you are doing something wrong. Concentrate on nurturing your existing clients and then you will quickly find new business coming to you.

Know when to walk away

It is the hardest thing in the world to do, but it is important that you know when to turn down work. There are times when the clients requirements are unrealistic or the job is simply too big. On other occasions, the chance of winning a job does not justify the investment involved in pitching for it. There is a natural tendency to want to run after every piece of work, but sometimes you just have to say no.

Question the client

Don’t be afraid to ask questions about a brief supplied by a client. Asking questions and making suggestions is a great way to build a relationship with your clients and make you stand out from the crowd. Of course, ultimately it will allow you to put together a better proposal that meets the client’s needs even when they are not fully expressed in the brief.

Write a good proposal

Marcus provides a huge raft of suggestions for writing a good proposal including (but not limited to):

  • Make sure you carefully cover any special requirements requested by the client (financial reports in your business etc).
  • Respond to the brief by taking each of the issues raised on a point-by-point basis, rather than using a standard template for all your proposals.
  • Be detailed but don’t overdo it (nobody will read a 100 page document).
  • Include screenshots and diagrams but be wary of file size if you are intending to email the proposal.
  • Provide modular pricing so people can choose which functionality to include.
  • Always include relevant references.

Ensure your presentation is slick

The presentation is the last obstacle to overcome and so often it can be where mistakes are made. Ensure your presentation fits into the time available with ample left over for questions. Remember, by this stage the client has read the proposal and know what you are offering. The reason for the meeting is to ask questions and have a chance to find out if they feel they can work with you. Everybody prefers to work with people they like, so be enthusiastic, helpful and professional. Be prepared to discuss prices and timescales but do not promise things you cannot deliver.

Questions and comment

On this week’s show, we have a great question from Aaron about building HTML newsletters with web standards. This sparks an interesting debate between Paul and Marcus about the pros and cons of HTML emails. The conclusion was that if possible send plain text emails and link back to a webpage containing more information.

For more information on the pros and cons of HTML emails read Paul’s post on the subject.

Also in the show

Also in the show, Paul recommends the .net magazine on web design, highlights two new courses on accessibility from the RNIB, and introduces a new sponsor in the form of RightCart (possibly the easiest to implement ecommerce system ever!)

Silver surfers need to eat

Posted in Reviews on by Paul Boag

I don’t normally sound the fanfare when Headscape launches a new site. In my experience it opens me up to more criticism than I enjoy! However I think for once I will make an exception.

The problem is that people can’t help but criticise. They love to spot the fact that a site doesn’t work on some obscure browser under a defunct operating system like Safari for the mac ;).

Anyway the site that we have just launched is an upgrade to a pretty standard ecommerce site which I worked on a few years back. You can view it at:

www.wiltshirefarmfoods.com

Despite the somewhat provincial name, Wiltshire Farm Foods is a massive organisation and their website is a significant revenue generator. Basically they sell ready meals to an elderly audience, who don’t have the time or inclination to slave over a hot stove.

I know what you’re thinking. Not the most exciting site ever created. However, it has actually been quite a challenging site to work on. The age and relative lack of web experience, of the target audience meant that a lot of time and thought had to go into the user interface.

I won’t bore you with a long post outlining all the design decisions made and why those approaches were taken. Instead I will let you have a poke around for yourself and draw your own conclusions.

Things to look out for include:

  • Nice interface scaling when you increase the font size
  • Lots of friendly cross selling adverts to increase the value of each sale
  • A simple, clean and large interface, ideal for this audience
  • Slick AJAX functionality when items are added to your basket including clear indications to the user that something has happened.
  • Fixed position (impossible to miss) shopping basket tethered to the bottom of every screen

Of course there are a lot of things I don’t like about the site (such as the need to enter a postcode before you can see the price). However, some things are beyond a web designers ability to control.

That said, all in all, it’s come out pretty well.

atMedia: Real world application

Posted in Reviews on by Paul Boag

Yesterday I posted my thoughts on each session as I went along. Today I have decided not to post on each individual session but rather sum up the overall lessons to be learnt from this year’s show.

I have really enjoyed this year’s conference and have unsurprisingly learnt loads and met some great people. The trick is to now take what I have learnt and apply it to the real world.

This blog and podcast has always been aimed at two specific audiences:

  • Those that run and manage websites but aren’t web developers
  • Those that are web developers, but don’t have time to keep up with all the latest trends in this constantly evolving industry

A lot of what is written about web design is full of techno-babble and therefore incomprehensible to anybody who isn’t an ubergeek. The same is often true for web design conferences and atMedia was no exception. Discussions about WCAG 2.0, microformats and the DOM can often seem to have little relevance in the real world simply because they are not clearly explained in real world scenarios.

Bearing all of that in mind I have attempted to summarise the key issues raised from atMedia in such a way that they are relevant to the daily experience of the boagworld audience.

atMedia for website owners…

Pragmatic Accessibility

Probably the most depressing session at the conference was the one that discussed accessibility. I won’t bore you with the details, but sufficed to say the new accessibility guidelines that are currently being developed have some serious issues.

Many website owners have traditionally simply asked their web design agency to "make their site compliant with the accessibility guidelines". All they cared about was ticking the accessibility box so they didn’t get sued.

The lesson from atMedia is that you need to change that thinking. Accessibility needs to be more about finding the right solution for your users, rather than conforming to a generic checklist.

Are you more likely to be sued if you take this approach? No, not if you respond in a timely manner to any accessibility problems that your users identify.

Sites that work together

In the two atMedia conferences I have attended there has been more and more discussion about sharing information across multiple sites and in a variety of different ways. Whether it is turning contacts into downloadable business cards that can be taken into outlook or allowing events you show on your site to be published on other sites. Whatever the situation there are more ways than ever to share information. Not only is this an excellent way of getting your message in front of a larger audience it is also a great way of creating closer integration between websites.

Although this is still an evolving area I would encourage you to start thinking about what information on your site might be worth sharing and possibility some of the ways you would like to share it.

Also it is worth noting that there are a lot of other sites out there that allow you to integrate their content into your site. For example it is now easy to take Google maps and plug them right into your pages. In the closing panel of the conference the idea of sharing content between sites came out as the big area of growth over the next year, so it is definitely worth your attention.

Internet Explorer 7

Probably the most pressing issue for web site owners is the release of IE 7 within the next two or three months. It is vitally important that your site is checked in this new browser as changes to the way it works could mean that your site appears broken. Fortunately this is relatively easy to check by downloading the beta version of IE 7 and simply visiting your site. If you do spot problems, now is the time to contact your web design agency. But don’t worry, the fixes shouldn’t be that difficult or expensive.

More than just web pages

Without a doubt, the biggest shift in thinking between last year’s conference and this one, is in the area of web applications. What that means is that your website can now be more than just a collection of pages, but rather has the potential to behave more like a piece of software on your desktop. How does that apply to your site? Well, that depends. Let’s say that you have an events section. Instead of allowing users to click through a series of pages showing lists of events and then detailed information on an individual event, you can now show it as a calendar very similar to the one found in outlook. The key is that it is no longer necessary to wait while a new page loads but rather that information can appear instantly in the same way it would in a piece of software on your desktop.

Now it is worth saying that it is early days for this kind of technology and you might want to wait for the cost of development to come down. However, it is worth having a long hard look at your site and thinking about where it might be appropriate to add richer interactivity.

This isn’t the most straightforward of concepts to grasp so if you are left wondering what I am talking about then don’t panic. We will cover this subject in more depth later. However to get you started check out Google maps and then compare it with a site like Mapquest. Notice how on Mapquest everytime you zoom in or out the page reloads, while in Google maps it all happens without the refresh.

Don’t underestimate branding

Although this isn’t a new concept, it was really driven home in one of the sessions: you get what you pay for. It came up in a discussion about design and that great web design takes time. Often web design companies will cut corners on design in order to stay within a clients budget. This is unfortunate as research highlighted at the conference demonstrated that users make their mind up about a site based largely on how it looks. Once those first impressions have been formed it is very hard to overcome them no matter how good your content is.

The lesson to be learned here is that when you are looking at a web design companies proposal take particular note of how much time is dedicated to establishing the look and feel of your site.

Your site on a mobile phone

Without a doubt delivering the web through mobile devices like mobile phones is going to be a big growth area over the coming year. Already there are three times more mobile phones than personal computers, the vast majority of which can access the web. The question is; do you need to worry about this yet as a website owner? Well to some extent that depends. The key thing that came out of this conference is that mobile users want very different content from a user sitting at a PC. The chances are a user isn’t going to want to know about your company history while shopping in the high street. However they might be interested in comparing prices if you run an ecommerce site.

Even if you have content which might be useful to mobile users the current barrier to entry is very high. With so many mobile phones out there and so many different browsing experiences, creating a good mobile website is very difficult.

My advice is simple… wait. Wait for the industry to mature and standards to emerge. Although the mobile web is an exciting area it is early days and now is not the time for the majority of organisations to enter the market.

atMedia for busy web developers…

New accessibility guidelines: Don’t worry YET

So you have just begun to get your head around the WCAG 1.0 guidelines when you hear that the second version is about to be released. Don’t panic, you don’t have to worry about them just yet.

To be honest, it became quickly apparent from the session on these guidelines, that they are in a mess and not yet in a fit state to release. Even the accessibilit
y experts are havin
g trouble understanding them so I really wouldn’t waste your time at this stage.

The emphasis should be on creating the most accessible site you can irrespective of any particular set of "rules". That isn’t an excuse to slack off, but it should be seen as an opportunity to be pragmatic about the approach you take to accessibility.

Time to learn Javascript

If I had one message from last year’s conference it was "now is the time to learn standards". This year the message is "get your hands dirty with Javascript". Javascript is, without a doubt, having a real renaissance and it is a skill you should definitely develop whether you consider yourself a developer or a designer. More and more of your clients are going to be asking for some of the cool functionality that is found on the so called "web 2.0" sites and as these are mainly driven with Javascript you will need to brush up your skills. But beware, make sure the techniques you learn are up to date and that you get your head around concepts like unobtrusive Javascript, graceful degradation and progressive enhancement.

Preparing for Internet Explorer 7

As I am sure you are already aware IE 7 is going to be launched in the next couple of months. What you might not know is the new browser is going to be pushed out through windows update so you can expect this to become the dominant browser very quickly. Obviously this is an excellent opportunity to get some extra work from your clients (unless of course you are an in house designer in which case it is just extra hassle – sorry!).

In order to make the process of testing and fixing sites as painless as possible Microsoft have produce a set of tools for preparing for IE 7. Among them is an expression finder, useful for finding all of those annoying IE specific CSS hacks which may no longer work in IE 7.

Open data

From Google Maps to Microformats, there are more and more ways to share data across multiple sites. This kind of data sharing was seen as the biggest growth area for the coming year, so it is something that is worth learning more about. I couldn’t possibly begin to cover the many opportunities in this post but it is definitely an area to start researching.

One of the simplest places to start is with the subject of Microformats. Microformats are simply a consistent way tagging content across multiple sites. Because data is marked up in a consistent manner it can be identified by other systems and used.

The simplest example is the hCard which allows you to markup your contact information on your website in such a way as to make it readable by other sites and applications.

I know it may all sound very confusing but it’s actually very simple and very powerful. Definitely worth checking out.

Pricing design

One of the sessions at the event focused on what makes design great. It was presented by some of the best designers around and yet their answer was incredibly simple. Great design takes time. You need time to consider and tweak a design. The creative process just can’t be rushed. If you are anything like me, the look and feel of sites that you work on don’t get the priority they deserve. With so many time consuming tasks within an average project, design is often the first to suffer when the budgets are tight or the deadline is looming.

Although it is not easy, the moral of the story is that if we want to make our designs truly exceptional, we need to build more time for design into our projects. If you work out how to do that without sending the budget through the roof then let me know!

Designing for mobiles

Although designing for mobile devices is a huge growth area and you may well find clients interested in mobile sites, proceed with extreme caution. The session here at atMedia confirmed my worst fears about developing for mobile devices. There are approximately 40 different mobile browsers and over 160 different devices. Support for XHTML and CSS is minimal and designing for the mobile web is a very different beast to designing for the PC.

And so it ends

So that’s about it. A great conference. Thanks to all that were involved in presenting and putting on the event. It was incredibly enjoyable and had a great friendly atmosphere. If you missed out on atMedia then don’t panic. The podcasts will be out soon and you can still come to d.construct in September (for a fraction of the price!).

Podcast 36: Developing your site structure

Posted in Classic shows on by Paul Boag

In this week’s show, Paul gets depressed about the state of online accessibility, we debate the virtues of user testing design and discuss the basics of creating a good structure for your site.

Download this show.

Check out Paul’s book recommendations

Developing your site structure

Organising the content of your site into a logical, user friendly structure is fundamental to its success. In this week’s show Paul and Marcus look at how to go about this process and some of the pitfalls you should avoid.

There is nothing particularly high tech about creating a good information architecture. The best place to start is by making a list of all of the content your site needs to cover. Print out each item on a separate piece of paper and start organising them together into logical groupings. It really is as simple as that.

Of course, even better than you organising the content into logical sections, is getting your users to do it for you. That is where card sorting comes in. In the podcast we discuss card sorting in more depth but most of what is cover can be found in the boagworld article on card sorting.

The conversation moves on to discuss the common mistakes made by those creating a site structure. Most of the points discussed are covered by Louis Rosenfeld’s excellent article: "Seven Pitfalls to Avoid in Information Architecture" so we recommend you take the time to read it.

Question time: Can you user test design?

In last week’s show Andy Budd and Paul took slightly different positions over whether it is possible to user test design work. In this week’s show Paul explains how he believes user testing can be beneficial to the design process, allowing for the resolution of design differences and enabling the testing of emotional responses to design.

Techno-buster: Different server side languages

The vast majority of the clever functionality we see on websites today is created through the use of "sever side languages". These programming languages allow a variety of functionality from content management systems to ecommerce sites. However with so many different languages out there it can all seem incredibly confusing. In this podcast Paul and Marcus explains how the average website owner shouldn’t have to make decisions about programming languages, but rather this is the responsibility of the developer. Different languages have different pros and cons, however in most cases it is down to personal preference. However, make sure that your website server supports your chosen language before development begins.

The state of web accessibility

Following Joe Clark’s hard sitting article about the WCAG 2.0 on the List Apart website, there has been much debate about the state of web accessibility. Paul and Marcus share some of their concerns and comment on the Web Standards Project response to Joe’s article.

Podcast 23: Defining your project

Posted in Classic shows on by Paul Boag

This week on boagworld.com Paul and Marcus discuss the need to define clearly the scope of your web project before rushing into the build.

Play

Podcast: Download (18.8MB)

Download this show.

TechnoBuster: Semantic code

Semantic code is a term that is thrown around a lot at the moment, but what is it and why should you care? I try to explain to Marcus in very small words what it’s all about!

Check out our article on this subject

Main feature: Scoping your web project

Carefully planning your website before you start to build might not sound like the most exciting theme for a podcast but it is fundamental to a successful website project. I know from bitter experience that not doing so can lead to a world of pain for both the developer and the client. In this weeks show we share loads of tips that we have learnt over the years. Here are just a few of them:

Take the long view

Many clients force agencies to start projects before they are fully prepared, either because they are unwilling to pay for a scoping phase or because they have a tight deadline to meet. This kind of short-term view does nobody any favours. If a project is not properly defined at the outset, it will inevitably lead to slippages and additional expense. A developer needs time to understand the requirements before they begin to build. If they don’t, they will be unprepared when they encounter unforeseen technical issues.

Everybody has to sign off

Having a statement of work that everybody has signed off on is a great way to ensure client, developer and designer are all singing off of the same hymn sheet. It avoids miscommunication and misunderstanding by clearly defining what is going to be delivered.

Do you really need that?

The scoping phase should not only identify what tasks need to be done, it should also take a long hard look at what functionality is being considered. If you are not careful, your statement of work can turn into a wish list of functionality rather than a considered document which factors in return on investment. Ask yourself, if I spend all of this time building a certain piece of functionality, will it pay dividends for my organisation.

Be specific

It is easy to be vague about your scope, but if you do, there is room for confusion. The statement of work should cover everything from how many design iterations there should be, to what browsers the site is going to be tested on. Make sure your list of tasks is as detailed as possible, that way you will avoid any nasty surprises half way through the project.

Phased development

Don’t be afraid to phase a project especially when faced with a tight deadline. If your website has to be live by a certain date, it might be wise to leave out some of the "bells and whistles" until post launch. It is easy to forget that your website should be an evolving animal that can grow over time. After all, saving some of the functionality and rolling it out later gives you a good PR opportunity.

The hidden technology killers

Beware of those little technology issues that are so easy to overlook. For example, pay particular attention to which browsers you are going to support and what accessibility level you will be conforming to. Finally don’t forget to factor in time to deal with those extra style sheets for print, mobile or low vision users.

Web resources: Getting your layout right

This week I picked two sites that help designers develop the perfect layout.

Web Design Practices
A great site that shows you the trends in layout based on an analysis of several hundred websites. This site answers invaluable questions such as; "where does the search box normally appear" and "do most sites use side or top navigation?"

Although slightly out of date and centred largely on ecommerce sites, this is still an excellent resource. However, remember, just because a lot of sites do something a certain way doesn’t make it good practice!

Layout cookbooks
Have you ever had a client who knows what they like when they see it? If so, send them over to the layout cookbook and get them to look through the hundreds of different screen layouts available there. It’s also a great place to get some inspiration when you feel like all your designs are using the same basic layout!

Podcast 22: How your website sells

Posted in Classic shows on by Paul Boag

Whatever your website is about, it has to sell something. From selling an idea to a product or service, every site has its place in the sales process. This podcast looks at what that process is and how your website plays its part.

Play

Podcast: Download (23.8MB)

Download this show.

News and stuff

This week we look at the new beta of Internet Explorer 7 as well as correcting a heap load of errors we have made in previous podcasts! However, most importantly we tell you about the geek dinner being held in honour of boagworld.com.

For more about the geek dinner check out my post

Win a ticket to SXSW by visiting the geek dinner website

Technobuster: Validation

This week’s technobuster section looks at Validation. What is it, why bother and how it work?

Read our validation post for more details

Main Feature: How your website sells

As I said at the start of this post, every website is selling something. Even the most dreary public sector site is trying to convince somebody of something (selling an idea). In many ways most of life is about sales, we are always trying to get people to see our point of view, to do something we want them to do. Unattractive though it is, sales are the cornerstone of web design and yet so often it is overlooked.

In this episode of boagworld, we explore some of the underlying sales principles that have been around for years and try applying them to the web.

Seven steps in sales

It is widely accepted that we pass through seven states in the purchasing process:

Satisfied ignorance

We do not believe we have a need and so are making no effort to fulfil that need. For example if you have just eaten, you feel no need to eat more.

Awareness of need

You are aware you have a need but have yet to take action. Gaining an awareness of your need can be triggered by external or internal sources. For example you may start to feel hungry (an internal trigger) or you might smell some food cooking, which makes you hungry (external).

Information search

You now actively look for a way to fulfil that need. Either we rely on internal sources such as a memory of a nice place to eat, or turn to external sources, such as a recommendation of a restaurant from a friend or family member.

Evaluation of alternatives

This search process will lead to a number of alternatives. Do I eat in a restaurant or cook something myself? We weigh the pros and cons of different options in order to settle on a decision.

Purchase decision

In this stage, we begin to look at the specifics of our decision. If we have decided to cook ourselves, we decide on what we will actually cook.

Purchase

This is the actual decision to act. In some cases, this will be a literal purchase while in others it might be a call to action like volunteering ones time or changing ones point of view. Understanding what your site’s objective is (your purchase point) will help you position it in the sales process outlined here.

Post purchase

This is the point where we decide if the "purchase" was the right decision and whether we intend to stick with that decision.

Applying the sales process to your site

Understanding these steps are one thing, applying them to your site is quite another. It is especially difficult if your site is not an ecommerce site. The goal is to understand which of these steps you perceive your site addressing and which are to be dealt with by other methods (such as on or offline marketing). Before you can do that, you need to understand what your ultimate goal (sale) is.

Let me give you an example of what I mean. Headscape is a web design company that offers a variety of services that are tailored to individual companies needs. They do not sell a tangible off the shelf product and so the web is not an appropriate environment to complete the transaction. Instead, the actual purchase point needs to be reached from negotiation between the client and the Headscape team. Therefore, the Headscape website is primarily geared around helping prospects with the "evaluation of alternative" stage. Anything before this point in the sales process and the prospect wouldn’t have found the Headscape site, anything after this point and we would prefer to be talking to them face to face.

Knowing where your website fits in helps determine factors like supporting marketing, content requirements and general design/functionality.

Useful questions

The following questions might help you to better understand the positioning of your site:

  • Does your site need to convince the user of their need before you present them with a solution? For example, the majority of visitors to the Headscape website already know they need a site and so this part of the process is unnecessary.
  • Does your site need to explain the solution to the users need before selling your particular proposition?
  • Does your site seek to maintain the prospects attention while they investigate alternative solutions?
  • Does your site manage the purchase process online?
  • Does your site provide post purchase support?
  • Are there methods in place to raise awareness of their need and help in finding your site?

I realise that this is a bit of a tricky concept to explain so have a listen to the podcast and if it still isn’t clear post a comment on this site.

Web resources: Choosing a colour palette

This week Paul and Marcus looked at three sites that help you choose the right colour palette for your site.

Dark-i.com
This site lets you view example sites based on palette to see how other designers have worked with certain colour combinations

Colour blender
This site allows you to quickly and easy try out different colour combinations together as well as making suggestions of colours that will work well.

Colour Schemer studio
The colour schemer studio is the best colour theory software around. This excellent little tool helps you create the perfect colour palette. A great buy!

Ecommerce 2.0?

Posted in Web strategy on by Paul Boag

There is a lot of hype surrounding the new generation of websites that are emerging. Collectively they are labelled web 2.0 applications, largely because they behave more like desktop applications than websites. The question is how the underlying principles of web 2.0 will expand beyond the current raft of “web applications” to encompass more traditional websites. For example, how can web 2.0 principles and technologies benefit a typical ecommerce site?

Google Suggest.

  • The ability to filter products on the fly without page reloads in order to narrow the selection of possible products.
  • A slicker "compare and contrast" facility that enable the user to look at products side by side.
  • The option to sort product listings by price, size or any other criteria without page reloads.
  • The option to tag favourite products or hide unwanted products from the listings
  • Saved searches that notify you by RSS when new products are realised meeting your search criteria.

    • The list could go on and may even include an open architecture that allows you to compare products across sites.

    Managing your shopping basket

    We all know that a huge percentage of shopping baskets are abandoned before checkout. The reasons for this are many and varied but a significant factor is the usability of the shopping cart process. All too often shopping baskets are unwieldy and distract from the shopping experience. Once again, Web 2.0 technologies can provide significant improvements.

    • The ability to add products to a shopping basket using drag and drop as well as the conventional "add to basket" button.
    • Persistent shopping baskets that are on screen all the time but do not need page refreshes to update.
    • Shopping baskets that are saved automatically, like draft emails in Gmail. This prevents users loosing shopping carts due to dropped connections or timeouts.
    • The ability to save shopping baskets instantly, for future repeat ordering without interrupting the current shopping process.

    The checkout process

    The checkout process is often the most painful part of the user experience and can often make or break an ecommerce site. Large ecommerce players have gone to great lengths to shorten this process with systems such as "one click ordering". However, at the end of the day you cannot avoid those forms requesting user details if you are going to fulfil your orders. Out of the three parts of the ordering process, Web 2.0 has the most to offer the checkout process:

    • Postcode auto address completion, can be taken to a completely new level that no longer required page reload.
    • Forms can be validated instantly giving the user detailed feedback about any problems with their submission.
    • Repeat purchases can be sped up dramatically, with the ability to quickly and easily change shipping address and credit card details.
    • Fewer page refreshes means less chances of information being lost in transit.
    • Greater control over the functionality of forms allows unnecessary fields to be hidden until required. Why for example display the shipping address fields unless a user specifies their billing address is different.

    I am sure that the ideas I have outlined above only scratch the surface of how "Web 2.0" can help the average ecommerce site. The point is that there is a real opportunity here to improve the user experience and in doing so the conversion rate of these sites.

    What’s new?

    A lot of the functionality I outline here already exists on ecommerce websites. Indeed, you are probably asking what makes any of this original or different. In some senses you are right, much like Web 2.0 as a whole, none of this is new. However, what I hoped to highlight in this entry is that a small group of new sites are implementing existing technologies in new and existing ways and that these techniques can be easily transferred into traditional websites to improve functionality and increase return on investment. By using a small amount of "web 2.0 technology" on top of your existing ecommerce site, you can improve your conversion rate and increase profits. Whether you like the Web 2.0 buzzword or not, surely this is worth considering.