10 Interesting Insights on Website Usability

I am a sucker for good usability. Usability is one of those things you don't notice - until it is bad. Usability affects all areas of life; however, we all typically encounter bad usability on a daily basis on the web.

If something is easy to use, then it is a fun, enjoyable and stress experience to use. Unfortunately this is typically not the case on the web, and we regularly find ourselves cursing a website for its confusing mess of advertising and poor navigation - ultimately leaving that site - never to return.

I came across this very interesting article, that lists 10 Useful Usability Findings and Guidelines for web design. It is by no means a definitive guide; however, it does offer up some really good suggestions that are backed up with compelling evidence and examples - a rare find on the Internet.

The summary of the headings is listed here, head over to the Smashing Magazine site to read the full article.

1. Form Labels Work Best Above The Field
2. Users Focus On Faces
3. Quality Of Design Is An Indicator Of Credibility
4. Most Users Do Not Scroll
5. Blue Is The Best Color For Links
6. The Ideal Search Box Is 27-Characters Wide
7. White Space Improves Comprehension
8. Effective User Testing Doesn’t Have To Be Extensive
9. Informative Product Pages Help You Stand Out
10. Most Users Are Blind To Advertising

Do you want to learn more? Here are some related books from Amazon:

Continue Reading...

7 steps to clearly communicate and avoid misinterpretation

Have you ever had a discussion with someone where you thought that the other person understood you, only to later discover that they had a completely different understanding of what was discussed? I would imagine that if you are married; or if you have ever been in a relationship then you will almost certainly will have experienced this! At work and home we encounter communication difficulties on a regular basis.

When we communicate with another person, we have a tendency to assume that the person hears and interprets the information in the same way that we do. It is hard for us to realise that there are different interpretations of the information that we are communicating.

We are biased to the interpretation that we have, and therefore to us the understanding seems simple and obvious. We may not even stop to consider the possibility that the information we are sharing could be interpreted in a another way.

An Example

To illustrate this point I will use an example on punctuation; the correct use of a comma can make a big difference. This is a written example but the same principle still applies for verbal communication - when we talk we 'punctuate' our words with pauses and the intonation in our voice, that affect the interpretation.

Take a look at the following two sentences - the only difference is the placement of the comma:
"A woman; without her man, is nothing."
--True or False?

"A woman; without her, man is nothing."
--True or False?
When we communicate with other people we tend to assume that they hear and understand everything that we say.

The above example could, for arguments sake, have been written in an email without punctuation. When the recipient reads the text they will add the punctuation themselves when the read the statement and may interpret the wrong meaning.

We may also lack verbal punctuation with the way we pause and use our tone of voice and intonation when we are speaking. As the above example shows, we could intend to communicate one statement and have the other person interpret a completely different understanding if we pause in the wrong spot whilst speaking.

It is important that when we communicate with others that we ask questions and confirm understanding by repeating what was said back to them in our own words. This will help to clear up any misunderstandings.

Managing Interpretations

1. Clarify: check that the correct message was received

If you are the person communicating, then it is up to you to ensure that the listener has understood. You cannot rely on the listener to clarify. This means that you need to ask clarifying questions to ensure that the other person understands and has interpreted as you intended.

If you are on the receiving end of the communication, confirm the message by repeating it back in your own words and asking clarifying questions.

2. Avoid misunderstandings before they happen

Consider other ways to interpret the information that you are communicating. Avoid the potential misinterpretation before it happens -by ensuring that there is sufficient information in your communication. Explain what you do and don't mean!

For example, a wife asking husband to cook some dinner for tonight's meal might ring home on the phone and say "I will be late home, are you OK to sort out some dinner?"

Possible interpretations by the husband could be:
- Sort out your own food...don't worry about me.
- Cook some food for both of us
- Get some take out food for both of us

the original statement could have been communicated clearer if more information had been provided:
"I will be late home, are you OK to cook dinner for us tonight?"

3. Stick to the most important information

In our house we have a little saying which is occasionally expressed when one of us is giving an over complicated explanation for something: "can you explain that... in 10 words or less".

Find the simplest way to communicate what you want. Stick to the most important information. As a gross generalisation: women have a tendency to elaborate on explanations (sometimes too much) and men tend to do the opposite, where they provide straight facts without enough surrounding information to give them context.

Provide enough information to make the message clear, and that is all. If you provide too much information the important points of the message will become confused with all the other less important information.

4. Have a Reason

It is important that you articulate a reason for your request or communication.
This creates a higher level of importance to what ever it is that you have communicated. The exact reason is not as important as the fact that there is a reason. Even if the reason is slightly selfish or self serving, people appreciate the honesty and are more likely to understand what you are trying to achieve and be willing to help.

"Can you make a photocopy of this document for me please"
"Can you make a photocopy of this document for me please, I need a copy for my report"

If you do not give a reason, the other person may interpret that your request is for another reason and they may make assumptions because of this. In the above example, the communicator may have forgotten to tell the person that it must be a color photocopy, however, if the person was aware of the purpose of the job (i.e. for the report) then they may have thought to ask if it needed to be in color, rather assume that it was just a black and white copy for reference.

5. Communicate the expected outcomes

If you are communicating something and you expect the other person to do something with that information then tell them! Don't assume that they will automatically know why you have told them the information.

6. Don't Assume!

A blanket rule here is to avoid making assumptions about how the other person will interpret the information that you are sharing. Find ways to share the information as if you were explaining to someone that knew nothing about it. It is important however, that you do not do this in a condescending way. This is best achieved by asking clarifying questions, for example, "have you ever used the X Y Z before?" - this will help you to understand their level of knowledge.

7. Relate information instead of giving orders

Another useful technique to use when you are communicating with someone is to share knowledge from a first hand experience. It can be insulting to tell a person about something that they already know, but if you really want to make sure that you can tell them that information, then relate it from first hand experience; "Hopefully you already know about this, but I had a real problem getting the defribyulator to work until I realised that the stability switch was around the back - worked great after I found that!"

Put it to the test

The only way to improve your communication with others is to practice. Practice is more than just trying a technique out - it is also very important to observe - take note of how well it worked. What worked and what didn't. What could you have done better if you were able to do it all over again.

Share your experience

If anyone has any stories from personal experience - about either successful - or unsuccessful communication, or any tricks that they have learned then please share your knowledge in the comments!

Do you want to learn more?

Here are some recommended books from Amazon. I have read these books and can recommend them as being excellent books for helping you to more effectley communicate and interact with people:

Continue Reading...

How to Remove and Hide Blogger NavBar (Top Navigation Bar)

By default, Blogger shows a navigation bar (navbar) at the top of every blog that you create with Blogger.

The hack to hide the Nav Bar so that it does not appear on your blog is very simple. Follow these simple instructions to hide the blogger navigation bar on your blog.

Steps to hide your blogger blog navigation bar (NavBar):

1. Log in to Blogger and go to the Layout > Edit HTML tab

2. Search for the following line of code
/* Header
3. Add this code as shown in red directly above the header comment
#navbar {display: none;}
/* Header
4. Save your template changes.


simpler than you think!

Do you want to learn more? Here are some related books from Amazon:

Continue Reading...

5 Minute Chocolate Mud Cake in a Cup

Ever wanted to have a fresh baked chocolate cake fix in 5 minutes flat? Well now you can! This is a recipe to make a chocolate mud cake in a cup and cooked in the microwave in a matter of minutes. This is about as easy as cake making gets.

This is not an original idea of mine - believe it or not, this was chain mail that hit my inbox. Unlike the other junk in my inbox, this one caught my attention; I didn't believe it would work. So I had to give it a go - and the results were surprisingly good!

This is a great little recipe to have tucked away for when you need that 5 minute chocolate cake fix. If you have children, I imagine that it would be a fun thing to make with your kids as well.

The cake is big enough to feed 2 people, or one person who has a serious need for a chocolate fix.

The recipe:

4 Tablespoons Flour
2 Tablespoons Sugar
2 Tablespoons Cocoa
1 Egg
3 Tablespoons Milk
3 Tablespoons Oil
3 Tablespoons Chocolate chips (optional)
1/4 Teaspoon Vanilla extract
1 large coffee mug, that is safe to put in the Microwave!


1. Add the dry ingredients (flour, sugar and cocoa) to the mug and mix well.
2. Add the egg, milk and oil and mix well
3. if you are adding chocolate chips then mix them in as well
4. Microwave on high for 3 minutes(for a 1000 watt microwave). The Cake will rise over the top of the cup - but don't worry....it will be OK!
5. Allow to cool for a minute before tipping out onto a plate
6. Add chocolate sauce and ice cream if desired!
7. Eat Eat EAT!

Here are some photos from making the cake. Enjoy!

Adding the dry ingredients into the cup.
In goes an egg...looking good so far.
Mix it all up and then add some chocolate chips.
If you are anything like me you will probably still make a lot of mess
Watch that cake go!!!
The cooked cake. Waiting for it to cool. Waiting is hard.
Out onto the plate! Looking good.
Add chocolate sauce and ice cream if you want. I highly recommend it.
The cake was thick and sweet. Very tasty, but also very rich eating. Nice treat.

simpler than you think.

Do you like baking? Here are some related books from Amazon:

Continue Reading...

How to Open a New Jar with a Tight Lid

Here is a great trick for opening those tight lids on jars, sent in from the Diamond Dame:

I used to struggle with opening jars of pickles and sauces for ages, asking boys to do it for me, running them under hot water, using tea towels, until I discovered this ridiculously easy trick.

This only works on jars that are new and unopened, not for ones that you can't open simply because someone has put the lid back on too tightly.

New jars are vacuum sealed. If you can break the seal, the lid becomes really easy to open. Hold the jar upside down and whack the lid really hard on a solid surface (like the kitchen counter) on an angle. A solid whack pops the air seal and the lid will unscrew easily. Sometimes I have to whack it 2 or 3 times, but this method works 95% of the time.

simpler than you think.
Continue Reading...

Why Google Adsense ads are not displayed on your Blog

This is a Simple thing... once you figure it out!

I have Google Adsense ads on my Blogger blog and I could not figure out why the Google Adsense advertisments in my sidebar where not showing up. The Google ads would show up on the permalink page, but were not being displayed on the main page where multiple posts were shown.

After a fair bit of head scratching, this is what I discovered.

There is a limit on the number of ad units that will display on one page. You can only show 3 ad units per page. Once there are more than 3, the rest wont show up.

Maximum of 3 ad units

On any given page, you can place up to:
  • Three standard ad units
  • Three link units
  • Two search boxes
  • Three referral ad units
  • One video unit
Be aware however, that if in Blogger you select to show ads between every 1 blog posts, and you are also , for example, have Blogger set to display 7 posts on the main page (this is the default). This means that the adverts are shown between blog posts until 3 units are used. If you have a separate Adsense unit in your side bar, then this will not display anything, as the 3 units are used!

But don't remove the ads in your sidebar just yet. If you click on the permalink to go into a blog post, then there is less than 3 usnits used in the main content panel, so your sidebar adverts will be displayed.

Options to display Google adsense ads

If you want adverts to show in the side bar on your main blog page then you have 3 choices:
  • Decrease the number of posts shown on the main page (so less units can be used inbetween psots), or
  • Increase the spacing of adverts between posts. ie if there are 7 posts displayed and you show ads every 3 posts, then only 2 units will be shown inbetween posts and you can palce one unit on your sidebar.
  • Remove the advertising between posts, and just have the ads in the sidebar (max of 3 units).

Simpler than you think!

Do you want to learn more? Here are some related books from Amazon:

Continue Reading...

Blogger expandable post summary and 'Read More...' link

This is the best expandable summary hack for blogger. This code does not use any JavaScript and does not have the errors that the JavaScript solutions have.

This solution uses pure CSS to achieve the post summaries, so it is a really elegant solution that is also really robust.

This version of the hack fixes the problem with other versions where the 'Read more...' text does not disappear when the full post is shown.

Because this post summary hack uses CSS and <div> tags, instead of <span> tags this hack does not have the problems with the new blogger code changes where other <span> tags for formatting cause the summary to be inconsistent.

Step 1 - Lets start!

Open Layout / Edit HTML.
Backup your template before you make any changes.

Step 2 - Find the code that we are going to change

Click the Expand Widget Templates check box. We need to do this to find the code that we are going to change.

Search for this line of code in the template to find where you need to make your changes:
<div class='post-body entry-content'>

Step 3 - Changing the code

We are going to change this piece of code:
<div class='post-body entry-content'>
<div style='clear: both;'/> <!-- clear for photos floats -->
Add in the new lines of code as shown here in red:
<div class='post-body entry-content'>
<b:if cond='
data:blog.pageType != "item"'>
<style type='text/css'>.restofpost {display:none;}</style>
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>Read more...</a>
<div style='clear: both;'/> <!-- clear for photos floats -->
Save your template
Click the save template button to update the changes to your blog.

Step 4 - Set up your Blogger post template

Go to Settings / Formatting in Blogger.
In the Post Template box add this code:
Write summary here
<div class="restofpost">Write rest of post here</div>
You can edit existing posts, by wrapping the content that you want to be hidden with the <div class="restofpost"> tag. Anything outside of this tag will be displayed as the summary; which includes pictures.

When you paste a picture into your Bogger blog post it is added to the top of the post by default and you must move the picture inside the <div class="restofpost"> tag to ensure that it will not be displayed in the summary. If however, you want a picture to show as part of your summary (as I do on this site) then leave the image outside the restofpost tag.

Limitations of this post summary method?

There is only one limitation that I am aware of with this method of post summaries. This is that all posts will display the "Read more..." link at the bottom of them. This means that if you do not want a summary version for a very short post for instance, that the "Read more..." link will still show and will be a link to the permalink page for that post.

There seems to be no way around this that I am aware of at the moment. To get around this you will need to use a Javascript summaries hack, or handle this by stating at the end of short posts that it is the [end of post].

Do you want to learn more? Here are some great books from Amazon:

**Note: since being first published this post has been edited to correct the following:
- Updated so that the summary will work on all pages, including archive pages, searches on categories and older post pages - as long as each post has had the DIV tag added.
- Updated to remove the summary DIV tag, as this was unnecessary. The restofpost tag is all that is needed to create the summary.
Continue Reading...