The book tells a story on a young man who want to learn about how to become a great designer, in smooth way the author takes you in a user-centred design journey explaining it’s secrets and benefit’s.

“Once there was a bright young man who was looking for an effective designer. He wasn’t looking for just any designer. He wanted to find a designer who could design complex technology that was simple to use.”

Contents

• Preface
• The Search
• The User-Centred Designer
• The First Secret of the User-Centred Designer
• The Second Secret of the User-Centred Designer
• The Third Secret of the User-Centred Designer
• The User-Centred Designer Explains
• The New User-Centred Designer
• Acknowledgements

The most interesting part in the study that users who show interest in Google products will start move their mouse and then they will see the links, and for those who are interested in search they can only see the big search box.

Marissa Mayer,

All in all, we ran approximately 10 variants of the fade-in. Some of the experiments hindered the user experience: for example, the variants of the homepage that hid the search buttons until after the fade performed the worst in terms of user happiness metrics. Other variants of the experiment produced humorous outcomes when combined with our doodles — the barcode doodle combined with the fade was particularly ironic in its overstated minimalism. However, in the end, the variant of the homepage we are launching today was positive or neutral on all key metrics, except one: time to first action. At first, this worried us a bit: Google is all about getting you where you are going faster — how could we launch something that potentially slowed users down? Then, we realized: we want users to notice this change… and it does take time to notice something (though in this case, only milliseconds!). Our goal then became to understand whether or not over time the users began to use the homepage even more efficiently than the control group and, sure enough, that was the trend we observed.

How would you consider this change?

The title is really scary, is it a finding that need to be discussed?

I really wanted to talk about this for a while now, I though of discussing the traffic analysis effect on business in the Middle east. I looked around and found that almost no one in the Middle East interested in this field as i went through 100 websites from different sectors such as banking, government, education, health and finance and checked their websites and found no evidence on any analytic tools.

These findings made me wonder on why the owners of these websites don’t find interests in tracking their user’s behavior through the web traffic analysis.

There is no doubt that traffic analysis is an essential to the success of the website, there are tones of data that can benefit the site owners and their businesses.

• * Visitor loyalty and the returning visitor behavior: what pages did they visit and what they did on these pages. Which areas of the site did attract them and why? Where did they stay longer and why?
• * Conversion ratio and conversion funnel: what is the conversion? What pages have higher exit rate? Which parts of the pages get most attention? How long people stay before gets converted?
• *  Abandonment rate: what are the items that have been added to the basket? What missing elements needed to reduce the abandonment rate? Why did people abandonment?
• *  Internal search engine: what keywords people used? Where did they go after the search and how long did they stay there? How was their behavior after the search? What was the bounce rate?
• *  Bounce rate: why did people bounce? Where did they come from? What were they looking for? Is what they are looking for exist?

Sure these are very small sample of data they can get from analyzing their traffic. Almost triple this number of questions can be pop up and answering these questions will give them better understanding on their user’s behavior. 

Why do you think?

• XHTML/CSS Markup Generator
• Traffic Analysis Can Reduce Bounce Rate Tip #4:
• Traffic & Referrals tip #3
• Bounce Rate Tip #2
• Conversion ratio tip #1

I was there, finally saw the legendary Steve Ballmer on his keynote and he is really an amazing guy. I was inspired with his passionate to people, science and technology. His dreams and vision for tomorrow is very interesting, I will leave you with the keynote to see your selves.

Click here to watch Steve Ballmer Keynote

First let’s all agree that we professional web designers do write good semantic markup and not the old fashion table based designs. This is something essential, why? Because search engines are just like people, they don’t like to read a lot of unnecessary markup and get board quickly that they might leave your website before they crawl it all. They also can’t determine which part of the markup is important and which is not such as lists, menu or titles.

That’s why you should make sure that you are inserting the right markup in the right place. I’m not saying that writing the semantic markup will boost up your traffic and put you at the top of the SERPs but it will make crawling and understanding of your website much easier.

Now how do we make the search engine spider while visiting our website knows the good pieces of that site? That’s very simple and we will come to it.

Header

Let’s start our journey; what you need to do first is to add the regular Meta data at the top of your HTML header, title tag followed by keywords tag, and finally the description tag – in this order; then you can attach JavaScript’s and CSS files. Why? Because search engines will read these pieces of information the first thing, so if they are at the top you will make their life much easier.

Please note that every page has its own unique Meta data, so don’t duplicate the Meta data and use it on every page of your website.

Footer, the power

Let’s tackle something else, let’s talk about the footer.

Footer, where you add the copyrights and some other links is a good place for another navigational element using your keywords listed in UL as you did with the navigation above.

This is not spamming and we are not stuffing the page with tones of unnecessary links, for some websites this could be very good especially if your website have long pages, so when users reach the end of the page (if they did scroll) they will find another navigational assistant.

Your body, the gold mine

Now, let’s go to the next part of your exercise, it’s the body or body tag; the base of all the good information that search engines are crawling to find.

In the body of your XHTML make sure to start your markup with the menu or your navigation DIV and give it an ID call it navigation or menu or whatever you want to call it, by this the first thing search engine finds when it comes to the body is the navigation where usually your most important keywords are listed there.

Put these navigational elements in a list because that’s what they are; and each one of them are titled with a description of its function. By this; search engine can crawl your whole website (Make sure that your navigation is consistent and exist in every page of your website, this is purely usability issue).

Note: If you are using flash, images, or JavaScript’s navigation then you better stop that as they are unrecognized by search engines and not accessible or usable at the same time.

Now you have built your navigation with links of your most important keywords and told the search engine that these are important items (as they are listed at the top of your body tag and are built as links, and each has its title attribute). Isn’t that’s fun and simple?

Note: adding the navigation at the top of your body tag doesn’t mean that it will appear at the top of the page, with CSS you can control that and float it to the right or left on your page.

Now we’ve covered two of the website parts, lets’ now dive in the most important part of your page. The content part where all the good stuff could be found (assuming you are building a good website that can benefit the mankind).

Since this part of the website is totally different from website to another and from webpage and the other even in the same website, so I will give general recommendations.

First start your content area with breadcrumb, breadcrumb is something very important for every website, it tells the users where they are, and it’s a good place to add your keywords to it with descriptive title attributes.

Breadcrumbs are supposed to be at the top of the content area and, they are the first thing a search engine read when crawling this area.

Second add to your content area the most important keywords as heading for that part, use H1,H2,H3 for that. By this search engine spider will understand that you are pointing it to an important area of your website. The idea is to use the appropriate markup to present your content.

Note: it’s not recommended to stuff your page with keywords and links, so use them wise and carefully or it will turn on you. What is good for users is good for search engine spiders as well. Search engines are tools people use them to reach their goals.

As a web designer you can control the placement for each element inside that area and according to it’s impotence you can take it upper from the markup side.

Your recommendation for the layout is very important in this stage, that’s why you should have a strong understanding of the nature of every page in the website and every section.

Connectable

Try to make your pages reachable by two to three clicks and are connected to each other where I can reach the first page from the third one and vise versus. You also want to decrease the links to external pages, so avoid elements as much as you can that are pointing to other website (this is differ from website to another depending on their nature and objective).

While we are talking about links; put into your mind to limit your page links to 100 according to Google recommendations.

Always use title tag and link attributes for your images and links, this is very good place to add extra keywords (but don’t use this to spam the spiders).

File size is considerable

While building your page always remember light is good, so try to avoid 300 KB websites and try to limit your self with 30 to 40 KB with higher text to code ratio.

Rich Internet Application

Try to avoid adding your content that has your most important keywords inside flash, JavaScript’s, AJAX or images. Don’t hide that valuable content from the search engine spiders. Always remember that building a website is for professional and you are that one, your recommendations should be for the client and the user benefit.

Let’s sum it up

I think by this I’ve reached the end of the story on how should you as a professional web designer build your website, what are the good elements and how to structure your layout. You should know that there are a lot of elements that control website ranking, what we’ve discussed here was the web designer part of the equation and nothing more. Always depend on the standard instead of trying to work around the system.

My aim of this article is to highlight the web designer part for designing usable and in the same time search engine optimized pages.

• XHTML/CSS Markup Generator

For years and years there has been that debate between usability consultants and designers regarding standards and it’s affect on usability.
While it has been proven that following standards will enhance the user experience on your site, we still see this debate going on.

In this article I will talk about one of the standards, the links.
If you checked the top visited websites worldwide you will see that these websites are using the blue color for their links and the purple for visited links.

Why would they do so? Is it because it looks pretty? Is it because they don’t have creative designers to come up with different combination of colors? Well, the answer is No; it’s simply because blue underlined text is recognized worldwide around the globe as links, and purple as visited links.

For years; users acted this way, they do it on daily basis. The do it while searching online with Yahoo, Google, or Live; the results popup blue underlined and they click. When they go to check their Facebook account they click on blue links, when checking their photos on Flickr they click blue links, and when they see their videos on YouTube they click on blue links as well.

Now, what has this to do with conversions?

If you chose this standard for your links it will be easier for your users to recognize the links and therefore they will start their journey through your website. This will reflect on your bounce rate which will also affect your conversion (especially if one of your targets is page views and time spent on site).

Let’s take simple example that will prove this point, you have a website, and the articles on your website has some inline links colored green, orange or gray. Will the user (high or low experienced user) in this case recognize the links? Well, simply No; they will recognize emphasize on that word, but they will not have this 100% confidence that this word is a link.

How many times you’ve clicked on this kind of links and been disappointed from the result; when founding them not clickable. As we all know; frustration will increase bouncing which will reduce conversions.

You don’t want to reduce your conversions or your visitors get frustrated, do you? Our aim is always to increase the conversion and keep our users happy; we invest thousands and thousands to improve their experience with our products; spend thousands of hours and dollars to understand their behavior, so why when it comes to standards we stop and say “it doesn’t look good, or it doesn’t fit within our design”.

Conclusion

I believe that using blue colors for links on your website doesn’t mean your creative design should be neglected, what I mean here that you as a designer should follow standards that have an affect on the business targets and the user experience on the website.

Blue link colors may not look cool but it will end up recognized, and that’s what matter.

PS: Blue for link color and purple for visited is not one of the World Wide Web standards but it’s been recognized by the user as the link color.
Netscape back in the 90s was the first who used this color for links and the rest of the browsers followed this behavior which resulted to become the standard from the user perspective.

• Conversion ratio tip #1
• Bounce rate tip #2

In a previous post Bounce Rate Tip #2; I explained that bounce rate is one of the metrics that affect your conversions and should be checked regularly.

Today I will try to discuss how to reduce your bounce rate by analyzing and knowing both your referrals and traffic.

Your traffic is coming from three different places, either it’s coming from:

• Search engines
• Other websites are linking to you
• Not referred traffic by direct input, bookmarks, or newsletters and advertising…etc.

Note: I will not go deep into the not referred traffic within this article.

Search Engines Referrals:

Maybe search engines referrals are one of the most free of cost important part of your traffic. To reduce search engines bounce rate you need to do some optimization to your Meta tags; the title and description tags.
By this and while people are googling for something; your website popup on their face with the right title that explains the destination page with a small description on what will the user will find when clicking that link on the SERP.

The good optimizer will work for the user without offending the search engines, choosing the right keywords that people use and putting them in an understandable phrases will not only reduce your bounce rate but it will also increase your search engines ranking.

But, this will not work if the landing page has misleading, wrong elements or content such as:

• No search function at the top of your website
• Bad design which will affect your creditability
• Wrong usage of colors and font size
• Redirection to other website or page that doesn’t match what the user where searching for.
• Loading time more than 10 seconds.
• User’s can’t find what they were look for in 4 seconds.
• …etc.

So as you can see reducing the bounce rate for search engines referrals is a very simple procedure based on knowing your users and giving them what they are looking for.

Other Websites Referrals:

You should always work on this part as it has an incredible effect on your search engine ranking. The more people links to you the more ranking improvement you will get, especially if they are linking to you using your own keywords.

Do a fast research on top search engines and check who is linking to you, you can do that manually by using the below table which exist on Google webmasters tools:

Or you can use the SearchStatus for Firefox and Mozilla.

The idea is to know who is linking to you and check the bounce rate for those backward links. You will be amazed when checking the results.

Categorize these links and see which is better category have less bounce rate and work to increase this kind of linking either by direct submitting or by contacting webmasters to let you included in their websites and blogs (we are not talking about reciprocal links here).

This process might take sometime to be done, but it worth it, and will also show how people are positioning and classifying your website or what are they saying about you.

Not Referred Referrals:

Usually this is the big piece of the pie, part of this traffic is because of bookmarks, people found your website worth to keep on their del.icio.us or their favorites. Very interesting and important to keep giving these people the same level of service they used to. Other part is for people who memorized your domain and this is much better (they need more attention).

• Rest of the list:
• Word of mouth
• From your business card
• Offline advertising
• Online campaigns
• Newsletters and mail shots

Optimizing this part is difficult somehow and need real teamwork within the organization and the different departments.

Conclusion:

Optimizing your messages through your marketing strategy is very important to reduce your bounce rate and that include you Meta tags, links from other websites, directories, and blogs.

Now you have the knowledge needed to reduce your bounce rate which eventually will increase your conversion ratio.

• Conversion ratio tip #1
• Bounce rate tip #2
• Traffic & Referrals tip #3

Wow, how fast weeks pass these days.
Hope you all had a great week full of good output and enjoyed these spring days.

Today I will discuss the traffic of your website, where do you receive it, who is your referrals and what’s their relation with bounce rate and conversion ratio.

Before I start check these two links for referrals and traffic definition and get back here to continue reading.

• • HTTP Referrals
• • Web Traffic

Now we know the definition for both traffic and referrals let’s dig and see how these two terms control somehow our conversions.

We agree that every website or webpage on the internet receives traffic through certain referrals (If you don’t receive traffic, then your website really in a bad shape and need to be optimized). That traffic to your page need to be segmented to determine where it comes from and how does it influences your conversions and I will show you how.

Let’s take a sample site that receives in a particular period (a month for example) a sum of 100,000 unique visits, digging inside this we will notice that 30% of this traffic you are receiving from search engines, 20% from other websites, and 50% are not referred (pure example for easy understanding).

What I did is I segmented the data I received simply by dividing the traffic into three groups:

• • Search engines referrals
• • Other websites referrals
• • Not referred traffic

This was the first step of the exercise; now let’s take it step deeper. Your 30% search engines referrals are coming from 15% Google, 5% Yahoo, and 10% Live, and the bounce rate of these referrals are 20% from Google, 40% from Yahoo, and 60% from Live; are you following?

Now let’s check the other websites that are referring to my website or webpage. There are 20% from other websites, directories, blogs, social networks such as digg, facebook, sphinn, YouTube, Flickr…etc. You have the percent of each one and the bounce rate as well, getting these numbers depend on your web analytic tool you are using.

The third element here is the not referred links, which happens because someone book marked your website or entered your domain name directly in the browser, or got a link from mailshot or newsletter or probably received an invitation from a friend through an email. This kind of links is mostly affected by your offline marketing campaigns or the word of mouth or your popularity. You should know their bounce rate for each element and the conversion ratio; how is that?

For your online campaigns you may add a variable in your links that will explain where this referrals came from, add another variable to your mailshots and newsletters so you can track those referrals, for those who typed directly into the browsers; I don’t know if they can be measured (add in the comment if you know a way) but I’m sure there is a way through the log files.

Ok, enough of that talk and let’s do some business here, let’s show how that will improve our conversions and get us the cash. First what we did above was normal web analytic and data collection with minor segmentation.

We can improve that; get deeper and show every referrals conversion and check which is getting us the less bounce with more conversions and try to focus on it, also will give us an indication on our bad referrals that are sending us the less conversions and higher bounce rate and try to improve them.

From the above exercise you will know how is your online campaigns are working and how much loyal visitors you are receiving, you can see if you need search engine optimization, will also give you indication if you’re giving the right content to the users.

This was the baseline where you will know the indications and the trends from your flow of data you are receiving.

This post along with the previous two posts about bounce rate and conversion ratio are the baseline for your improvements, it’s not the end of the story it’s just the beginning.

Competitions online are huge, try to type a phrase or keyword your website about and check the number of results around the internet on that topic.

I hope I explained it clearly; let me hear your questions.

Related to this post:

• • Conversion ratio tip #1
• • Bounce rate tip #2

It seems that I still have some time during this long weekend to open a new topic that will help us understand more and more on the data coming from the web analytic tool we are using.

In my previous post I talked about conversion ratio and how important it is, today I will discuss one of the elements that are related somehow to the conversion, it’s the bounce rate.

Bouncing occurs according to Wikipedia when a website visitor leaves a page or a site without visiting any other pages before a certain session timeout elapses.

Bounce rate can occur due to several elements, such as:

• -Closing the window or tab
• -Typing new URL in the browser
• -Leaving the page open for more than 30 minutes which cause session timeout
• -Hitting back button of the browser

Eventually if you decreased the bouncing you will improve the conversions, right?

Well, theoretically it’s right but there is a lot more you need to know before you have a 100% confidence on this.

In other words bouncing occurs if a user or visitor entered your site by mistake or entered your website from a running campaign that has misleading message or any other reason that made your visitor bounce of the page before taking any action within let’s say 10 seconds (most analytic geeks think this is fair enough to decide if you found what you are looking for).

Below are more reasons for bouncing:

• -If a user is referred by search engine organic results, the meat data such as the title tag and the description tag are not giving clear message of what the user want.
• -Users who clicked on the paid listing assuming that these links will send them to the right place.
• -Having a link in other directories or websites and blogs with wrong message.
• -Bad content of your website.
• -Your website design is not credible enough to gain user engagement.

You can start measuring your Bounce Rate using the below formula:

Bounce Rate for specific page = Unique visitors to that page with less than 10 seconds / Total of Unique visitors to that page

Ok, now let’s apply this to the previous example I used in conversion ratio tip #1 post. Let’s say you have 100 unique visits and a conversion of 10% with $50 sales since the item cost $5. Let’s say that you have a 30% bounce rate then in this case you’ve lost 30% of your potential customers who were maybe converted into sales.

Conversion ratio could be affected to many several elements than bounce rate, in later posts I will go into deep details on this issue.

Now, I will go to have a break and spend sometime with my wife

• Conversion ratio tip #1
• Traffic & Referrals. Deep measurement tip #3

Conversion ratio or rate is a very important metric that’s something all analytic geeks agree upon, how it will be used and how obsessive people with it is something else we can get to… later.

Let’s first step back for moment to explain what is conversion ratio, in very short words it’s the percent of visitors who were converted into buyers. Whatever the target was, from registration into purchasing, the desired action of the website was taken. This is the very simple explanation from my humble point of view.

Conversion Rate = Outcomes / Unique Visitors

Note: In the above formula I’m using the unique visitors not the visits which is I prefer as it’s more accurate,  lot of debate on this topic so let’s not get into it, whatever the method you will take will not make any difference as long as you will be consistent along the way. I personally prefer the unique visitors because in e-commerce people come and go several times before they decide to do the purchase.

As i mentioned above the outcomes or the actions could be anything from website objectives, let’s say for e-commerce websites it will be purchasing or downloads or total number of orders or signing up for newsletter. For none commerce websites such as newspapers and blogs it could be number of articles were read.

Conversion ratio could be calculated for online and offline actions, you could measure your support team (Customer service) conversion ratio or your sales team conversion ratio (calculate the numbers of sales leads with the closed ones).

Let’s have a quick example of conversion ratio.

If your website is receiving 100 visits per week and you are selling 10 items of chocolate bars (Mmmm) each with $5, the conversion in this case is 10% and the sales is $50. Apply this to anything, imagine you have a store, newspaper, website, or blog. Whatever your business is the metric is the same.

Take into consideration that when you measure the numbers try that be in specific time period. So for the above example it’s total visitors and total purchases in the specific week or month for example.

I think now you have a clear vision on what is conversion, the question now should be how does that help me?

Simple answer on this question is it’s a tool with your hand based on it you can start measuring your success, for example if you did a usability test how did that improved your business or you did a million dollar SEO or you’ve run a campaign online and offline. The conversion ratio is your baseline but again don’t be obsess with it as there is a lot we will talk about in the coming posts.

There are different elements that effect the conversion ratio will be discussed later during the coming posts.

Wait for me and I will go deep and deep into this section.

• • Bounce rate tip #2
• • Traffic & Referrals. Deep measurement tip #3