Frank Schulte-Ladbeck

Archive for the ‘User Experience’ Category

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.

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 »

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. 

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 »

Two restaurants opened up near my home, and they may provide insight into how you should see your website.

You never will know what a customer will want until engage them. You may think that with a website that you may not be speaking directly (as in face to face). This would be a poor choice to follow. Whether they speak to you or not, website visitors are engaging you. I thought about these two restaurants recently opened, and about my experiences with them. It occurred to me that they are good examples of might be going through the thoughts of our site’s visitors.
Read the rest of this entry »