Archive for the ‘User Experience’ Category

Too Much Content on a Page

Have you crowded out what the visitor needs to see with what you think will convince him on your site? What do you need on your site for a conversion?

For a couple of months, I have been taking apart websites from various small businesses to see if they work. Not how do they work. I wanted to improve one of my websites, but I also wanted to understand visitor behavior. Each week I take one site to analyze. I go through the site. I look at the links leading to the site. I try to discover if the business uses any social media to drive traffic to the site, or if social media is used to encourage use of the business. I realized that I had fallen into a trap. I was looking at what the site owners considered to be working, and I was not looking at what actually may be working.
    The interesting aspect of my study has been that you can pick a field of business only to find that there will be the most basic of websites designed twelve years ago to sites that play with all of the current thinking. In some ways this does matter to finding an audience in the search results page. You could put up a simple flier of a website, and you may obtain traffic or a good result in a local listing. My point is that sometimes design choices like a static site or dynamic site do not make much of a difference. However, when you do have a visitor on the site, does the site help convert that visitor into a client?
    I began looking at my own behavior to make guesses about my visitors possible motives. To determine the seriousness of a business when looking at their website, I go to the “about us” page. You will be surprised how many firms forget to fill this out or do not have one. I then look at contact information. If there is no good way to contact the site owner, I a wary. Yet this goes farther. If the contact information is “”, I am not too trusting. This changes though depending on the circumstance. When going to a page about advertising, then “” does not put me off. The same applies when looking for information and I find the info@ email, but when the site is all about Jane Smith Consulting, then I wonder about info@ emails. I feel better if I am sending an email to a person ( who is the personal assistant to Jane Smith). Little details left an impression, and I feel better if I believe that I am contacting a known entity (hello tom, can Jane Smith…).
   What did dawn on me is that I am not really reading. Like most users, I have a certain set of websites that I like to go to read, and I do think of myself as reading, yet I am not too concerned with everything there. A website that I discovered not too long ago in my Google Reader for an alert on sustainable architecture is Green Building Elements. This is a wonderful site if you are interested in green or sustainable issues in building. At first, a few articles came up in the reader, and as it turned out, I was lead to this site, so I am reading the article, and I explore the site a bit. Eventually, I type the site into my browser to go directly there, instead of waiting for an alert to pop up. So there I am. Do I look at the ads? Do I read what is in the sidebars? The header? No, I quickly scan the article titles to see what may interest me, then I read that article. If I have time, I glance over to see the recent comments, which may lead me to read that article. If I have a bit longer, I may read the advertising or any promotional cop on the site. Why not pay attention all of the time? Because that is not why I am on the site. I want to read the article, and provide a response to join or engage a conversation.
    Let us turn this around. Say I am searching for a water filtration system to be used on my greywater system that I am building. I type this into my search box, and I find an article about these systems. I land on the page, and I begin scanning. Does this page have what I need? I then check out the advertising too. Again, this is a quick scan, and I will click the ad if it seems to take me to where I want to be. My point is that we are scanners. We read when it matters to us, but a website visitor is scanning for that tidbit which brought home to the site.
    This brought me back to my website analysis. I delved into the content of each site to find a morsel that would show me how to convert my user into a client. I missed the point. A competitor’s copy does not provide the answer. Understanding the user does. Some users will want to check you out, so the details have to be in place. Little clues reveal a lot about the business. For example, I noticed quite a few websites reporting to be from larger firms that had teams, but much of the data indicated that there was only one person working for the firm. I also noticed that web users want something quick. The trick is to figure out what that something is, and give it to them. Do they want to know how much a consulting fee would be. Maybe Jane Smith consulting will get the job if the price is right. Do they need a quick turnaround? Can same day service be achieved? Ms. Smith can meet clients on the same day. This is where competitor copy may come in use. When each competitor is touting a certain feature, then maybe they are doing so because the consumer has asked for it. However, you may also want to ask your own clients what information they need to make the sale. This is where I came to another conclusion: too many small business sites are working too hard to make that conversion that they cause the customer to leave the site. We pile on marketing copy before we give the price in the hope that the content will help make the sale. The user does not want to wade through it.  Redacting content to make the scan of a website easier can be the best thing that you could do to win the user over.
    Have content where it matters. To give users a better option, I have teaser content in some spots on a page. Other times I do not. The depending factor is how do the users to your site use the information. I also discovered that I am guilty of repeating content, as if I am trying to make a point. I saw this happening on several sites. Remember that people who want to read will continue to explore, but a scanner will leave the page if he does not think the data is on that page. Putting too little content can be a problem as well. One service company had a slogan that included the term “five point service”. Being familiar with the type of work that they do, I realized what the five points were. Nowhere on the site was the five point service clearly explained. An intelligent user would eventually discover the meaning though, yet we have to remember the scanner. They are not going to bother looking for the explanation. The slogan had no significance to the scanner, so it became wasted copy. Another aspect is the site that contains all of the basic content that every one of his competitors contains. No content differentiates itself, and the questions a visitor might have, like price, was not answered. Having the price listed may be what the visitor wants, but you may not want it on the site. You may want the visitor to call you to make the sale. I found that visitors to one site are fairly evenly divided: some want the price listed, some want to send a request for a quote, and some call. Of course callers may be better for you, but they may not be the only ones to convert. If you are focusing on having them call, you need more than a phone number. Having a call to action to encourage them to call, or a simple explanation why they should call is the best option.
    What is the lesson: clean up your act, but be sure that you made yourself clear. Go through your own site with fresh eyes of a scanner, but maybe ask friends to do tasks on your site to find out their reactions to their site. You may be adding content, but you may discover the need to reduce.

Do You Think about Font Color?

Can font color choices enhance your design? Can it draw the eye to marketing copy?

I have been examining a few sites that were designed almost ten years ago. I was looking at marketing copy. We mainly use a bold font or an italic font to make a statement stand out. A web page is more versatile than that technique. Sometimes to highlight a phrase, a box was created to highlight that sentence. It was almost as if we sat down with a piece of paper to design a page with no thought of the possibilities. Looking at a page that I had created, I saw that I had a different issue: a color was being used for the font of two different texts. Why was this a problem? Each text had a message, but I found that I and a few people that I asked to look at the site skipped over the second paragraph, which was placed to the right of the first.

We have so many options with color that I have seen designs which go wild. I think in part this happens because we evolve our websites over time, and we do not have a consistent color theme that we follow. Another problem is that we allow our perceptions to guide us, instead of analyzing what we see. For example, we can use a black background, and forget that a grey font will not read well on the screen. This happened on a site where the business owner, a photographer, had seen a book with a black and grey cover. The cover was gorgeous, but as a small font, it was a hard color combination to take. White font on black is not so great either all the time. I have an easier time reading yellow font on a black background. I think we go to our admin areas for our sites to update content, that we forget what our visitors are going through. When studying other sites, I became sure I had not looked at my site for a while.

I prefer minimal sites that have bits of eye candy. I do not want to overpower my visitors with colors. I know that there is a splash here and there, and that may suffice. When it came to these fonts, I did not want a glaring difference, but I did want the user eye to stop, while he thought that this is something else. I took a color that was in the same hue range, but lighter. In this case the colors were an orange approaching red, with a lighter orange for the next font. Orange was used in the title of the site on a black background. So three different oranges separate the fonts. I think a subtle cue like a color change can cause a visitor to pause, and that is my goal. My test subjects may have been bias at this point, but they saw the change as acheiving its goal.

How do you go about picking new colors? Some designers spend a good deal of time creating color themes. You can incorporate these themes into your site theme via the stylesheet. That is in a perfect world. The simpler method is to set the font color through html.  For example, I set the color and weight for the first lines of this post by using this code: <span style=”font-weight: bold; color: rgb(153, 0, 0);”>text here</span>. By using this code, I can change the color scheme away from what the stylesheet tells the browser to do to what I might consider the best option. One paragraph is darker, and one paragraph becomes lighter.  Let’s say I wanted the color to be a bit lighter, I would change the 153 to 204.  The question is will the browser render these colors correctly though. Another question may be how did I come up with the 153 and 204 in the first place. First question: there are sites that can test your color choices with a bit of javascript to see if your choices will work. I choose a simpler method. I create a test page in my web page creation program Kompozer. There I can control the background and font colors, so I can experiment. The program allows me to look at the source code, so I do not need to remember all of the codes. You can become quite creative, but sticking to the predefined colors will keep you browser safe. Kompozer is open source, but you can go with any web page creating program to play with colors.

I guess that if I was going to be elegant, I would find the way to have these font colors set in the stylesheet. Most items I do set that way. I find that if you do not know what you are doing, you may make a mistake, and this method works fine. The benefit of this method is that I can change up the colors from section to section fairly quickly. Do not judge the color combinations on your own though. Ask others what  they think (remember the grey font on black).

You Have Five Seconds to Impress Me

You have to consider every detail of your design and content to keep the visitors on your site.

I have been working on site architecture for two sites which had become a bit too spread out. As I cleaned up, I began to observe my navigational elements, and how could I clean up files. On top of that, I was dealing with quite a bit of spam, which lead me to look at legitimate comments. With all of these elements, I began to see my design in a new light. I also studied other sites, and their solutions to the questions I was considering.
    I also like to delve into my analytics to find ways to improve the site. I find ideas for content. I discover what is working, and where I am faiing. On one site, I had been improving visitor retention on site. The number of pages that were being viewed on average was increasing. Interaction appeared to be improving too. I noticed that there were still people leaving the site rather quickly. This could be for a number of reasons, such as the site being the wrong provider for the information needed. I began to look at my site carefully. I loaded the landing page into the browser, and then different pages and posts. I stared at how the pages loaded, and then I looked at each detail above the fold. This is what will be seen by these visistors which make them think about staying or lleaving the site. Much of this happens faster than you may realize; five seconds is fairly much the average. Looking at this part of the site, I began to ask questions to ensure that I was not loosing visitors who may find what they need on the site.
    Is the site purpose clear? Blogs can have names which may be misleading. From “Jared’s Blog” to “My Life in Rose” (both made-up),  we have creative to simple names which say nothing to what the purpose of the site may be. This can work for you if you effectively brand the name, so visitors may know in advance that Jared is the writer to go to when finding the latest tech news, and that if you love roses in the garden, you will want to read about one person’s adventures of growing and using roses. This takes work, so you may want to be clear from the start. If you want to use a title like Jared’s Blog, then add a subtitle which helps quickly define the site.
   Have I given a clear path for the different users of the site? Have you paid attention to people in line to buy movie tickets? There are certain people who know which film that they want, and their goal is to move through the line fast to purchase those tickets. Others are trying to decide between two or three films, and the start time may be the determining factor. Others have no idea what they are going to see, but they may have a set of concerns which will narrow the list. The box office has to serve all of these users well to keep the line moving.  Although you have one over arching purpose to your site, you have users coming to the site with different goals. Can the person who has a goal find it quickly to move through? Can the person who wants to explore find a way to do this? Moreover, this has to happen above the fold. However, if you cram everything into this real estate, have you confused the user? You may have to encourage them to scroll down to find their path, but the option to do so has to be stated or hinted at in the first view of the user.
    Does my language inspire the desired action? I am not speaking of your call to action statement (“go this page to get your free ebook”), but the content seen by the visitor when the page has loaded. I have used the passive voice or a vague reference when writing content, because I may like the sound of it or I feel that it represents my intentions accurately. This is not a good practice when you have a few seconds to convert a visitor to a reader or a customer. Every sentence above the fold has to sway the visitor that this is the site meeting your purpose, so you have to craft your message carefully.
    Does everything fall apart when the user scrolls down below the fold? Once you have them scrolling, does the remainder of the page encourage the visitor to continue on to explore or comment or whatever you need them to do? Here you have to find balance. Packing content into the space can confuse the user, but maybe you need that content. Planning the layout of images and words helps, and where to use bold and title tags, can be what the visitor needs to move through the site. Elelments in the sidebar can also influence the user path. If I list recent comments, a visitor may opt to comment themselves, or explore the post where the comment was left. Having a tag cloud does not encourage commenting, but does encourage exploration. If I use both, which one should  I place first in the sidebar? What do I want the visitor to do? Each element has to have a reason on the page, and that reason should meet a site goal. Consider each piece of real estate valuable, so do not waste it.
   Lastly, what is your landing page? On certain websites, I have a different template for pages and posts, because I know that the reason for the visit is different.  A post becomes a landing page even if you do not intend for it to be. Visitors do not move cleanly through our site as we desire. This forces me to meet different needs, but guide them to my ultimate goals. “Use my service” can be my intent, which is easy to do on the home page, but not the obvious message on a post. Still, I want to sneak that idea into the visitor’s mind.
    Look at your site. Take it apart piece by piece. Cut out what does not work; adjust what does to be better. Ask yourself the questions in this post to begin your journey.

Lost Opportunities on the Steps to the Checkout

In your store, you may train your employees to upsell or suggestive sell, missing no chance for a sale, but does this happen through your website?

Since I used to train staff to make the most of every sale, I guess that I pay attention to the mechanics of employee interactions with me when going to a store. A way to keep my hand in the game I imagine. I noticed that at one shop, the five foot rule has come back (greet all customers within a five foot radius). At another, the simple can I help you find something was being reinforced. The last place to catch me is at the checkout. Clerks might ask “did you find everything alright?” to “is there anything else that you need?”. Try answering no to that first question, and you may find someone attempting to direct you to the product that you may have missed. There is more to the checkout than this last sale though. I stopped going to a store for sometime, because the clerks at the checkout where so unfriendly that I had a negative impression of the store. (Yesterday at a sandwich shop the two clerks behind the counter were so busy talking to the owner that I was being ignored; I blame the owner for that situation). The checkout becomes vital if you want a customer to come back.
    I had two online checkout experiences this past week which made me consider how we handle this process. In the first, I was making a larger purchase, where I experienced a problem with my card not being accepted. I could have been quite mad at the website, but I knew what was happening from a past incident. My bank halts online transactions which are over $100. For the transaction to be approved, I have to contact the fraud department. The message from the website did not reflect that fact. The message was nice enough : “the processing of this card has failed” , which is better than having a statement saying your card was declined, but I think it would have been better if the message somehow stated the situation clearly. I know that when this happens in a store, there will be a message on the machine stating that the customer has to call a certain number to have the transaction process. At this point of the checkout, you have to be careful of what message you deliver, but the more information you can provide, the better for the customer.
    The other checkout experience involved search. I needed new test equipment for my business. I have a standard supplier, and I was prepared to go to that store; however, I wanted to see what other models were available, so I conducted a search. There in the search results was a section containing the name of the store and model number of the piece of equipment that I was seeking. The first price was $60 lower than the cost at my supplier, so I clicked the link, where I was brought to a page describing the equipment, along with a noticeable checkout button.The unit had everything that I wanted, so I hit that checkout button, which brought me to a page, where I could confirm uantity, shipping, and personal information to complete the sale (like name and how I was paying). That page and another for card information led me to the thank you for your purchase page. Confirmation emails were sent with an invoice and tracking number. Great, right? At one point there was a button which asked “continue shopping?”, but I had obtained my goal, so why would I click?  What would have been better? Well, a section with “other people who bought this item also purchased” would have been a start. My only problem with those also purchased items is that they are below the fold. Why not have them in a sidebar? How about mentioning other on sale items in related categories in the sidebar? Suggestive selling does not work unless you offer the customer something that he might want. How about showing off a more expensive model? You could say “for $30 more, you could buy this tester that has these twenty additional features”. That line may have made me curious before going onto the final steps.
    The point is know your checkout process, and  implement you sales techniques from the physical store into you website. The real estate above the fold is precious. Protect it. Use it wisely. “Above the fold” means what the client will see when logging onto your site on their screen. If they have to scroll down to see your sales pitch, you may have lost the opportunity. Go through your own checkout process to see how well you are selling.

Designing Your Website for When It Will Be Used

The look of your website could effect user involvement, but so can the sound of your website. Consider when the website will be used to make decisions about design.

When I began my first website, I did not consider ease of use, nor did I think much about when people might be looking at my site. I wanted to get information up on the site; I wanted the information to be impressive; and I wanted the information to lead to a conversion. I kept working on improvements which I thought would help to this end. When I began a second site, I became more concerned with how to make the site a success through posting frequency and other factors. With both of these sites, I did not pay much attention to the user, or when they would be viewing the site, and how that could effect their interaction with the site.
Read the rest of this entry »

The Importance of the Follow-up

I witnessed a spectacular bit of customer service this past weekend, which made me appreciate the concept of following up as a customer service tool.

I wanted to share this story, because it impressed me. Firstly, I am a data junkie. I have learned to love reports, but I know that I can be flooded with information which is useless. Sometimes finding that nugget of information and its importance can be hard. For example, I have an ad running on one website, and the click through rate is not all that great, but I noticed that searches for my name and phrasing in the ad has increased since the ad has been running. There may or may not be a correlation; more data is needed. And there is my problem ladies and gentlemen: more data. This causes me to search out ways of obtaining more data.
Read the rest of this entry »

Changing your theme elements by using different php files

What if you need a slightly different header or sidebar in your posts from your pages?

I have been going through various reports to see how I could improve one of my sites. My goal is to improve user experience, and related to that goal is to improve navigation in the hopes that users will explore more pages. I like the idea of using css to change different parts of a website, but you may want to keep the basic look of your pages the same for branding purposes, and you may want only one element to be different. Creating a unique php file for your header, sidebar, footer, or post may be what you need.
    Here is a scenario: you have Google AdSense on your site, but you do not want every visitor to see it. A visitor who comes to your site through search is more likely to click on the ad, so you only want them to see it. Also, visitors hardly ever click on ads on your pages, but they do click on them when they are reading a post, so let’s elimanate them from the pages. You did find that ads in the header work best, so you want to keep it in the header. You also want the pages and the posts to maintain the same feeling.
    Here is the problem: WordPress uses the same php file (header.php) to create the header for a page or a post.
    The solution:
Step1: create a new header.php file
You will need a copy of the exisiting header.php file. You can either transfer from your site to your computer, or you can copy it from the editor box under Appearance>Editor from your WordPress dashboard. You will need a text editor, like Notepad++.
    Leave the exisitng header.php file for the pages. We will use this one for the posts. If you already have your Google AdSense code in the place that you want, you will only have to save this file as header1.php. To limit who sees these ads, you could use a plugin, but there is a wonderful function that will help (why add a plugin, when all you need is a bit of javascript). The site Scratch99 will explain this from a search engine code (the site has a good deal of information for you), so follow the instructions there (he goes over different methods). If you do not have the code in place, you could experiment to see where it works best, then add the javascript from the previously mentioned site. Make sure to save your changes.
Step 2: upload your changes
Use your FTP client to upload the header1.php file into your theme’s folder.
Step 3: edit the existing header.php
If you have the AdSense code here, the ads will be seen by visitors on the pages, so you can remove it, then save your changes by updating the file.
Step 4: update your single post file (usually single.php)
This file contains the elements which are displayed when a visitor is looking at a post. You will find the command <?php get_header(); ?>; this pulls up the header.php. What you want is the header1.php file, so you will need the following command   <?php include (TEMPLATEPATH . ‘/header1.php’); ?> to replace the old command. This brings up your new header file. Save your work.

That is it. Now a visitor looking at an individual post will see the ad, but no one else. How else may you use this? You could have different headers,sidebars, or footers for the various categories, or maybe you want the sidebar to contain certain information when a visitor is on a page from when they are on a post, such as a blogroll. There is a function in your WordPress admin panel that lets you choose which php file will determine the look of a post or page, so you could create new page.php and single.php files for different aspects of your site. Hope this gives you ideas.

Websites Reaching a Plateau of Similarity

How different is your site from the next guy’s site? Have you considered a new format for your blog?

I was discussing the state of real estate portals recently, when it was pointed out that we are reaching a “plateau of similarity”. Not long after reading this phrase in an email, I receive another email informing me that another site is adopting the features of two other popular sites. The move makes sense. You copy what works for others. Refine the element to make it work better for you. Then others copy your imitation; hopefully some will refine the element with a clever innovation to take it a step further. Eventually, we obtain a distilled feature that works at its optimum level.
Read the rest of this entry »

What Words Do You Use to Guide a Visitor Through Your Site?

A user interface is more than the buttons and menu bars on your website. There are all types of navigational elements, but the words that you deploy can have a greater impact.

We are careless in our use of language. We take a word that we feel best suits our intentions, even though it might not suit our meaning. Sometimes we are not aware that words imply meanings to others that may be contrary to our intent. Sometimes we reveal our thoughts when we did not intend. Our users though will pick up on the cues that words transmit, so we should consider which words will prompt the actions that we desire.

    You are selling widgets to the public, so you have a page entitled “widgets” or “products”. Standard fare for a website, and a user coming to your site obviously is looking for this item. What if they are looking for items under $20? Does the word “products” help them? Let’s be more specific: what if the customer is looking for a bargain, because they need to save money? Will they find what they want under “products”? They will, but the implication is that they will have to hunt for this item. They may not want to go through that task. What if you have an option “cheap products”? Cheap does imply low cost, but it does have the implication of low quality too. “Sale Items” may work; “under $20″ may be better.

    This problem surfaces on a website more often than you may imagine. The visitor is going to be on our site for a short time span before deciding to stay or leave, so we need to choose the words carefully that will call them to stay. After they have decided to stay, we have to prompt them to take specific actions. There are various techniques in the design process of a site which assist in this effort, but we are not always so creative when it comes to words. Users want to feel comfortable, so we rely on phrases that we see on many other sites. If they want to know about the author , they will scan for an “About” page. If they do not see a page with that label, they may scan for the “Contact” page, since author information is sometimes placed in that location.

    Having consistent lables to other websites can be good for creating a user interface; however, we can take the expected in a slightly different direction to pique the interest of our visitors. Did you notice how I set up the posts on the landing page of this blog? I have an excerpt, then there is the means to click through to read the remainder of the post. Typically the phrase used is “continue reading this post”. To draw attention to the fact that the user should click, designers may increase the size of the font of this phrase, or they may highlight in a box or by a color element. I chose to alter the senetence to “Intrigued? Well read on”. The excerpt is meant to intrigue them, so I am asking were you intrigued? I then ask them to take an action. The basic concept of continue reading is expressed, but not in those words. The phrase does catch a user’s attention, because it is not quite what was expected, but it fits the parameters, so it helps to force a decision. This phrase may not be a big deal, but there are moments like this all over your blog. You could place a header over a tag cloud that states “tag cloud”, or you could invite them to take an action: “explore through tags”.

    Subtle differences from the norm help the user to think, and I feel that may be better for your site. Take the tag cloud example. These are becoming common on sites, and most users understand their function, so they glance over that section without a thought to interact with the site in that way. By having the heading stopping the user’s attention on what has been written, you may have created the opportunity to cause an action that benefits your site. Consider other features, like breadcrumbs. Those are the lines that show the visitor where they are on the site (home>category>subcategory>post). Intuitively the user understands that he can click on part of the breadcrumb to be taken to a page that contains other related posts in a category, or he could go back to the home page. What if you prefaced your breadcrumbs with a phrase like “You are Here”. We imply that this is a map. We have caught their attention, and they may actually click the category or subcategory button to orientate themselves in the site.

    Does this method work all of the time? Each change of word or phrase will effect the visitor, but they may decide not to take the action. Most of our visitors will never read an “About” page, unless they want to know the author better. I titled my “About” page on one site “About the ever curious Frank”, which caused the hits on that page to rise. I have been trying an experiment for a while now, where I replaced the navigation bar that had page titles to one that had icons. Initially, I did see a spike in traffic to other pages, because I think users were curious. I am letting the icons stand, to discover if they will continue to draw visitors in after the novelty has worn off. Personally, I like the clean look of the icons.

   Words carry a weight that we do not always stop to consider, but we may want to think of the possibilities if we want users to interact with the site more. 

How Do You Define User Experience on Your Site?

When you consider innovative websites, you may realize that they take the forms of existing media or functions, which make them easier to use.

Read the rest of this entry »

Canonical URL by SEO No Duplicate WordPress Plugin