• What is the rationale for employing a User Centred Design approach to conceiving, designing and building websites?


• How do we get from raw inputs such as market research, demographics and business requirements to a fully fledged design?

What is User Experience?

User Experience involves building a model of users' attitudes and behaviours to help us consider solutions that best fits their needs and expectations. The core aspects of it are a blend of design insight, usability and accessibility, psychology, technical knowledge and storytelling. We can better support users' experiences by focusing on what they are trying to achieve and making it easier for them.

Benefits of a user centred approach to design

Successful business models such as Netflix and Flickr have been predicated on the notion of a user centred design process. They will tend to be focussed on enabling their users to be able to feedback frequently about what works and what doesn't work for them. They will also work on incremental improvements to their websites, rather than large scale revamps.

This means they are able to respond quickly and effectively to their users' needs, and build up a high degree of affinity for their brands.

Typical project phases

Large scale web design projects often run in three phases:

• Discovery (stakeholder interviews, user research, requirements gathering)


• Definition (persona creation, experience concepting)


• Design (design and build - site map, wireframing, functional specification etc.)

Discovery
This is the starting point for the User Experience team to understand the scope of the project. During this phase they seek buy in from key stakeholders. At the same time, business consultants and planners assess the scope of the project, sometimes producing a scope map and a road map which is used to determine what the project is intended to achieve.

Definition
The Definition phase is when user research outputs are absorbed and processed by the User Experience team. Personas are often created at this stage, enabling a distillation of user research learnings into a form more suited to Experience work. Visual design work typically takes place at the same time. Requirements captured during the Discovery phase are prioritised.

Design
Typical outputs from the design process are a site map, annotated wireframes, and a page and module catalogue. This is the most easily recognised and understood point of a project. Recommendations made during the Definition Phase are put into practice: wireframes and key screens are mocked up, user testing of different treatments may take place. Annotations may be added to the wireframes, in conjunction with page architecture, page descriptions the site map and process flows. Together these form a functional specification – a working document outlining the design and build requirements for the website.

Inputs (requirements gathering)

Market and user research
The User Experience team will absorb as much information about the business, its goals, any available user research, whether primary or secondary. In addition, any competitor reviews or analysis, brand reviews, and in the case of a pitch, the RFP (Request for Proposal). This material may come from a variety of sources; chief amongst these are user research and material supplied by the client.

• Primary research - bespoke research commissioned and conducted for the benefit of the project


• Secondary research - research which while valuable, is not tailored for the exact demands of the project

Mental models / card sorting
Great benefits can be gained from understanding how target users of a website think. We can build a mental model of how a user understands and thinks about the world. This can be very helpful when considering how to organise and group information (information architecture), what type of functionality should be used (interaction design) and the most appropriate language and signposting for content areas and features.

One way to achieve this is with a card sort. There are two types of card sort: open and closed. In an open card sort, users are asked to group website items with no predefined groups established. In a closed card sort, users are asked to place website items into predefined groups.

Processes (methodology)

Personas
These are fictionalised, composite characterisations typically derived as a result of primary user research. The qualitative aspects of research shine through here. One way to develop personas is to create behavioural axes – a series of sliding scales that range across a behaviour, attitude or activity exhibited by the sample set of users.

An example axis might have 'money' at one end and 'love' at the other. The axis might be called 'life values'. Each user is mapped to the axis, and where clusters emerge, commonalities in behaviour can be perceived. These become the formative factors in a persona – the motivations and goals a user may exhibit.

To be useful, there is usually a limited number of personas, each focused around distinct goals and motivations. One of these is usually settled upon as being the primary persona, that is the one persona for whom if you were to design, you would fulfil the needs of all the other personas. For example a job site would attract jobseekers and vacancy posters.

User journeys
Once personas are established, user journeys can be created which focus on enabling the personas to complete tasks. Hence a successful user journey for the jobseeker would probably involve searching, refining selecting and applying for a vacancy.

Outputs (deliverables)

Taxonomy
Typical processes include the development of a taxonomy. The site taxonomy is generally developed in conjunction with the card sort, though input from stakeholders is typical in this process.

Page architecture
To facilitate the creation of layouts for individual web pages, it is useful to create a consistent rationale for where items will be located within each page. This is achieved through zoning, dividing the page into areas where the user can expect to consistently find certain types of content, navigation, features and functionality.

Scamps
These are rough layouts made to get an initial sense of how the pages might look.

Wireframes
These are more detailed layouts, ideally featuring real website content to facilitate the design process, as well as stakeholder feedback and any user testing.

Pages and modules (page module catalogue)
Typically websites consist of a series of linked pages. These pages have many areas of commonality between them. The areas that are the same or similar across pages can be understood as modules. For example, websites usually have a footer with the same set of links regardless of the page they appear on.

Prototypes and user testing
As the specifications for a site are developed, prototypes of certain user journeys are sometimes created for the purpose of user testing. These can be low fidelity, paper prototypes, which consist of scamps with some moveable and replaceable elements. These are great tools for rapid prototyping solutions to problems.

It is possible to produce higher fidelity prototypes which can present the actual experience of using a website in a much more compelling way with tools such as Visio, Axure, Fireworks, Dreamweaver and Flash.

To test the value of a proposed design solution, sample users from the target audience are recruited to try to complete tasks with the prototypes.

This article is by Stephen Hellens, User Experience Architect at LBi, a leading London based digital agency.

1. Location location location
Geo-target your relevant audience(s). Be sure not to include territories that aren’t relevant to the products or services you are advertising.

2. Target your ad groups
One of the golden rules: ensure your ad groups are well targeted. Avoid creating a generic ad group with a list of non-targeted keywords. Aim to limit your keywords to around 10-20.

3. Get your keyword matching strategy right
Combine broad matching with phrase or exact matching in order to balance volume for precision targeting; the latter will reduce your CPC (cost per click) in the long run.

4. Negative words are a positive step!
Build a list of global negative keywords especially if you are using a plethora of broad matches. Negative keywords will filter out unwanted searches and will improve your targeting.

5. Dynamic keyword insertion
Use dynamic keyword insertion on some ads and measure against other ads. Dynamic keyword insertion will often improve your click-through rates (CTR) as the displayed copy within the ad will match the search term. However be sure that all your keywords work correctly when published dynamically. Finally make sure you get your capitalisation right!

6. Content versus search network
Firstly make sure you understand the differences between the content and search networks. Bear in mind that clicks from the content network are well known to be impulsive as visitors are usually not in “purchase” mode but are in “browse” mode.

As a result of this, be wary of the content network and separate bids between the content and search network. Also use different messaging between the two.

Finally, consider the content network if your keywords are not regularly used in searches.

7. It’s not just about clicks
Remember to track your conversions and ROI (return on investment) not just CTR (click-through rates). At the most basic level you can use Google’s website optimizer to track your cost per sale and conversion rates.

8. Aim to meet your profit targets
Work out your CPA (cost per acquisition) and profit targets and compare against other channels with cross channel tracking. Remember that you can generate brand awareness and various forms of offline value for every click as well as direct online sales or leads.

9. Avoid bidding wars
Don’t enter into bidding wars especially if you wont meet your profit targets. Aim to increase your quality score and ad position through good targeting.

10. Test, tweak, measure
In Jim Sterne’s book "Web Metrics", when referring to website design, he recommends adoping the "Try It, Measure It, Tweak It" approach. Apply the same approach to your PPC campaigns. Don't rest on your laurels. Test different creative copy and offers and measure your click-through rates religiously.

11. Monitor the competition
Watch your competitors; aim to figure out their bidding strategy.

12. Bid management software
Consider adopting bid management software if you are running large or multi-network campaigns.

13. Work on your listing position strategy
Aim to modify your listing position and monitor fluctuations in click-through rates. Remember that you might achieve a good CTR at position 1, but your may well achieve better conversion rates in lower listing positions.

14. Dayparting
Monitor your dayparting strategy (i.e. the time of day and day of week your ads appear). Aim to display ads when conversions are at their highest. Avoid switching ads on and off as this might affect your ad performance history; instead consider getting your bid management software to reduce bids at times when conversions are at their lowest.

15. Don’t forget the last hurdle: landing pages
Optimise your landing pages to achieve the best possible conversions. Consider A/B testing or multivariate testing to improve your conversion rates.

If you find the above baffling, why not enroll on our Google AdWords PPC course?

But what about "expanded match"? What is it and when does it apply?

Expanded match applies only to broad matched keyword and implies that Google may publish your ad(s) with search terms that are similar to your broad matched keywords even if they aren't exactly the same.

For example, if your keyword list contains "internet marketing", Google may well publish your ad for searches such as "writing for the web" even if the latter is not included in your keyword list.

You might immediately conclude that the concept of expanded match contradicts the targeted nature of PPC marketing, but Google argues that it not only helps Google AdWords novices, but it also offers searchers a more well-rounded series of targeted ads.

Whilst we can appreciate Google’s point of view, the secretive nature of expanded match has certainly not helped education, particularly at the novice level.

The easiest ways to avoid the expanded match algorithm are:

1. use exact or phrase matching rather than broad matching (but of course this might not suit your keyword matching strategy)

2. build a list of negative keywords either within your ad group or as a global list.

If you want to see if your ad has been the victim of the expanded match algorithm, run a search query report and you will soon see whether the search term that resulted in your ad being published was contained in your keyword list.

What is web 2.0?

Before discussing the ins and outs of web 2.0 website design, let's remind ourselves what web 2.0 is about.

Web 2.0 is not officially a set of new online technologies, rather it is a trend of second generation web-based communities and hosted services that facilitate and promote social collaboration and sharing among its users. Such collaboration results in what is often termed user generated content (UGC).

Websites and/or services that fall under the web 2.0 phenomenon include social bookmarking sites, wikis, blogs and folksonomies, otherwise known as collaborative tagging and social tagging.

If you've used services such as Facebook, Stumbleupon, Flickr, Wikipedia and Technorati, you're in the right area.

Technical differences

Where web 2.0 stands out from a technical viewpoint is in its architecture of participation which goes beyond the concept of open source software; it is the idea of opening up a mix of APIs and content production to all users and exposing data for re-use in what are termed "mash-ups". The simplest example of this is site owner installing Google maps by directly tapping into the Google maps API.

It is often quoted that Ajax (asynchronous Javascript and XML) falls under the banner of web 2.0. Ajax is in fact more a by-product, as many web 2.0 sites use Ajax to improve GUI usability as it allows the display of additional "pages" without causing the HTML page to reload. This is ideal when carrying out typical web 2.0 related tasks such as uploading files or content.

O'Reilly make a nice comparison between how "web 1.0" has evolved into web 2.0 with the following examples:

Web design considerations for Web 2.0:

Let's not lose site of the original aim of this article: where does this leave web design in relation to web 2.0?

The most notable factors to take into consideration when designing for web 2.0 are as follows:

Simplicity
Whilst we always advocate simplicity when it comes to effective web design, the very nature of web 2.0 being more interactive and engaging requires simple design that creates a hierarchy between the visual and the functional elements of a page.

Allow for growth
Given that web 2.0 often refers to user generated content (UGC) in the form of blogs and wikis etc, be sure to allow your pages to grow gracefully whilst remaining digestible. Facebook is a classic example of this where users' profiles can be packed full of UGC whilst still remaining relatively easy to read and understand.

Don't forget Ajax
Given that Ajax and web 2.0 go hand in hand, ensure that you understand where Ajax can benefit your designs. When designing GUIs (graphical user interfaces) or pop-ups, consider Ajax over forcing a user to reload a page which can lose you usability points.

Adopt a column layout and consider your navigation
Many web designers adhere to a structured column layout such as the 3-column approach seen on many corporate websites. Some criticise this lack of invention, whereas others argue that web design has matured and these approaches clearly work from a persuasive perspective. I have to say I agree with the latter argument.

When it comes to web 2.0, you might want to consider separating site-wide navigation from functional navigation in separate columns. Equally your content should be separated yet again. Having clear demar ation zones aids usability and will result in higher user engagement levels.

Font sizes
With the advent of tag clouds, varying font sizes has become more prevalent among web 2.0 web designs. Tag clouds are a simple and obvious use of font size variations where the most popular links are bigger in size to the less popular ones. There is no reason why this approach cannot be adopted elsewhere providing it is carried out with care.

Consider the use of mixing serif and san serif fonts to convey a different personality among site-wide content. A good example of this (albeit not "web 1.0") is the Times website.

Disseminate information
The use panels to display "chunks" of information is increasingly ubiquitous among web 2.0 designers. Not only does is it a useful mechanism for disseminating information, but it goes hand in hand with the technology where "includes" and "portlets" are published via 3rd party APIs or "mashups".

Accessibility
Finally, let's no forget accessibility. As is commonly known, accessibility and SEO go hand in hand, but so does good GUI design. Given that web 2.0 requires consideration for flexbile and growable amounts of content, functional components enabling users to add/edit content and technologies such as Ajax, design with your accessibility hat on so as not to alienate your audiences.

1. Those who need to up-skill in order to run their own in-house SEO campaign(s)

2. Those who work with, or are seeking an SEO agency and need to be able to manage their SEO agency better

Ignoring pure bottom line issues for the moment, is there a scenario that dictates whether outsourcing search engine optimisation to an agency is preferable over maintaining SEO in-house? Or maybe bottom line is always the overriding factor and simply cannot be ignored?

Having spoken to many SEO training course delegates about their experiences, the above two camps are not always so clear cut after all. There are some instances for example where companies keep their on-page optimisation SEO activity in-house, but choose to outsource their external link building strategy as this is less tied in with website development issues.

So what are the real benefits of carrrying out SEO activity in-house?

Familiarity
A major part of search engine optmisation relates to website information architecture, internal link building and a myriad of on-page optimisation issues. On a complex site, an SEO agency may take longer to attain the same degree of familiarity as an in-house design or development team or a 3rd party web design agency that produced the site in question.

Marketing campaign integration
An external SEO agency will invariably have less awareness of your company's on-going search engine marketing or offline marketing activity. If you are running your SEO campaign in-house, you can ensure this integrates well with existing or future marcoms strategy.

Dedication
It is very likely that an SEO agency will be employing the same staff to run multiple SEO campaigns for obvious economic reasons. In-house teams on the other hand can focus their efforts on a single website or campaign with no distractions.

Expenditure versus ROI
I have left expenditure until last as there is debate concerning this issue. It is important to weigh up the pros and cons of employing external expertise (albeit at a cost) versus employing in-house staff to run your SEO campaigns.

This very much comes down to the quality of your staff, their available time and their cost to your business versus that of your SEO agency.

Skilled SEO savvy employees are not always easy to come by and furthermore they will demand good salaries; as the adage goes "if you pay peanuts you get monkeys".

Ultimately your ROI is the most important measure of success so choose wisely!

If you have experience of outsourced versus in-house SEO campaigns, feel free to comment.

What is a liquid layout?

A liquid layout is an approach to web design using the full width of the browser window. The immediate benefit is noticeable among viewers with higher resolution monitors as there is a conspicuous lack of white space around the website. In contrast, fixed width websites can display a great deal of white space when viewing at larger resolutions.

In liquid layouts, the content stretches across the full width of the browser window; the by-product of this is that much more content is visible above the fold.

Who is using liquid layouts?

Given this, liquid layouts are often popular among etailers as they can display more items, promotions or just navigation in the viewable area above the fold, enabling them to engage more efficiently with their customers and either improve conversion rates or average order size.

Examples of websites adopting a liquid layout include: amazon.co.uk, dabs.com and maplin.co.uk.

Web design issues:

1. Design control

Mention liquid layouts to designers and they will generally express a preference for fixed layout since this approach will give them more control over the content height and width and hence general behaviour across difference resolutions. Fixed layouts are therefore still the preferred approach amongst most creative teams.

Bear in mind that liquid layouts will need to be functional at lower and higher resolutions to appeal to all audiences. There are some instances where liquid layouts at larger resolutions do not work as well - see smile.co.uk for example.

You may want to consider adopting an adaptive layout using CSS to adjust the position and behaviour of different screen elements depending on the viewable screen resolution.

2. Increased expenditure

There is no doubt that your HTML/CSS developers will need to spend more time getting liquid layouts right which will incur additional cost.

Furthermore, the design team and client will most likely have strong opinions on which parts of the screen should expand and which should remain fixed which means there may well be revisions across many templates.

Factor all of the above into your initial planning and estimating.

3. Test, test and test

Whilst every web project should undergo extensive testing including platform, browser, accessibility and usability testing, liquid layouts will add a new level of complication to all of these.

It may also reveal problems among content managed websites or ecommerce sites where content is dynamically generated, so again be prepared for additional testing and hence increased costs.

4. E-marketing

A designer following best practices should always wear his/her e-marketing hat, especially among ecommerce sites, where the focus will be on increasing conversion rates, up-take on promotions and basket or order sizes.

Whilst website design encompasses the visual element, persuasion-based design for commercial gain cannot be ignored.

In the web analytics market, Google Analytics, launched in 2005, clearly has a strong market share (24% in the Netherlands, The Mirabeau Monitor 2008).

Within Google Analytics (and many other web analytics tools), one of the most important areas for measurement is goals and related metrics such as goal conversions, goal conversion rates, reverse goal path and form abandonment. Most web analytics tools will also produce a funnel visualisation based on goal conversion.

No goal tracking

The reason we write this article is because we are astonished by how many businesses that are using Google Analytics have either not set up goal tracking at all, or have set it up incorrectly; sadly the former seems to be more common.

Not only will this prevent measurement of the above metrics, but conversions will not be measurable against referrer types, non-paid (organic search) keywords, paid (PPC) keywords and other important metrics that can have a significant effect on SEM success.

Google Analytics can also use an assigned goal value to calculate ROI or an average score, something which site owners will miss out on unless goals have been set up.

Lack of skills or complacency?

In their web analytics buyer's guide 2007, E-consultancy highlights the importance of employee skills when using web analytics, and the failings of businesses to set up Google Analytics goals is a good example of this.

Our opinion is that many site owners are still of the mindset that real-time web analytics is a rebadged log file analysis tool similar to original products such as AWStats or Webalizer where basic measures such as most popular pages or "hits" were reported on.

Alternatively, one could argue that because Google Analytics is free and fairly simple to install, site owners do not go to much effort to configure it once it is up and running. If a cost was attached to it, it might encourage site owners to seek out the real benefits and make configuration tweaks accordingly.

Of course there's always the argument that site owners simply aren't aware of goals and their importance!

As a final point, we would like to announce that in the near future Emarketeers will be offering a web analytics training course, so watch this space.

Please tell us of your experience in relation to Google Analytics and goal setup.

Whilst the accounting jargon is crystal clear during the meeting, you can bet your tax rebate that the minute I walk out of his office, I have forgotten everything I've learned and will be on the phone to him later that day.

The parallel with training non-technical delegates technical material is phenomenally similar. Take a search engine optimisation course as an example. Whilst we often train technically literate developers or IT staff, our delegates are often made up of marketing or operational staff. Whilst their enthusiasm for improving search engine rankings knows no bounds (and rightly so given that SEO is such a topical subject), their technical grounding is limited.

So, how can we engage such delegates and ensure that they absorb and apply learned skills over a 7-8 hour course? And how can we ensure that their nods of approval actually translate into a permanent understanding of the subject matter?

Real case studies

Any training course that focuses entirely on strategy without citing real examples runs the risk of putting attendees to sleep very quickly. Learning strategy followed by an identifiable case study provides the perfect reference point or benchmark especially when the strategy is intangible. This applies to technical and non-technical material.

So, using our search engine optimisation example, when learning about on-page optimisation techniques or link building strategy, cite good and bad approaches using real-life examples in order that the delegate can understand the implications in real terms.

And of course, if the training course is carried out in-house (versus a public training course), use material directly relating to that company or the company's clients or suppliers.

Exercises

Providing exercises not only allows the trainer to gauge whether or not the delegates have grasped the material, but it also allows the trainee to test their own knowledge and ask questions accordingly.

Don't fall into the "all chalk and talk" trap where you talk at the delegate for 8 hours in order to impress them with your vast knowledge.

Exercises can be carried out in small groups or as a whole depending on the group size. It is important to pitch exercises at the right level so as not to intimate or patronise.

When training delegates who are real beginners, we often refer to exercises as "quizzes" to appear less intimating; equally we might offer multiple choice answers to make the whole experience more enjoyable and less of a chore.

Technically competent delegates prefer to be challenged and will often be more than happy to get the answer wrong in order to learn an additional soupcon of information.

Audience participation

Audience participation tends to vary according to the group dynamic and whether the training course is public or in-house; the latter often being better for audience participation as delegates usually know each other.

Non-technical attendees on public courses often shy away from asking "obvious questions", so it is very much down to the trainer or facilitator to spot that confused look in delegates and assess their understanding of the material.

Trainers or facilitators should also be wary of the more demonstrative delegates intimidating the more reserved ones - irrelevant of whether the subject matter is technical.

Drawing parallels

As mentioned earlier, technical material is often intangible and therefore hard to grasp if the delegate doesn't perform technical tasks relating to the subject matter day to day. Drawing parallels with every day examples that are more tangible is a good technique to promote understanding.

For example, when discussing the importance of information architecture in web design and SEO, why not apply it to real architecture where the foundations of a building compare to the underlying technology, and the bathroom fittings apply to the on-page components that enhance the user experience.

Summing up and listing objectives

One of the most important things I learned at University was that the content of an essay or paper needed to be summarised in the opening paragraph in order to set the scene for the reader.

The same applies to training courses. Not only should you introduce the structure of the course from the outset but you should summarise learned material at the end of each section or module. Equally, when it comes to technical material, draw an overriding conclusion about the main technical components.

Also highlight the underlying objectives of that section, and if required, remind the delegate to perform a number of tasks relating to the technical material, in order that they can take away an action to perform not just knowledge.

Impromptu questions

Whilst no trainer wants to appear intimidating, it's a useful to keep your delegates on their toes by asking them impromptu questions about learned material. We wouldn't recommend picking out individuals but rather posing questions to the group to ensure they have understood key technical points. It'll then be easy to assess whether their nods of approval actually translate into real understanding.

Frequent breaks

Last but not least, allow your delegates to take frequent breaks and supply lots of refreshments.

Absorbing technical material to the technically illiterate is challenging at the best of times and losing concentration is certainly not going to the help the delegates' engagement levels.