Category Archives: User Experience

User Interface Research

I came across this interesting class project for the Advanced Interface Design Class at the Art Institute of Atlanta.

The ten question survey collects your answers and then shows the cumulative results for over 30,000 other users who have also went through and answered these questions. The stated goal of studying design elements is to help “build better websites.” The data is interesting but personally, I’m not sure of the value.

Try it yourself.

A Gift, an E-commerce Site and Bad Navigation

A recent online experience got me thinking more about how e-commerce sites really should focus in on what a usable site consists of.

A quick story.

Our middle son is having a birthday in a couple of weeks and my wife went online to order a gift he wanted (The Mystery Rock – an archeologist’s excavation kit). She knew what he wanted since he marked the item in the catalog. She had a couple of questions about whether he really wants, and if he’ll enjoy it, etc. so called me to get my opinion.

Mystery Rock View larger image

I proceed to go to the website and try to find the gift in question. Here is where it falls apart.

Upon arriving at the homepage I begin my hunt for a link that will take me to where I think I need to go. But in looking at the options I pause and begin to wonder where to go.

I’m presented with “Gifts by Age,” pretty straightforward but I skipped right over these, I had an idea what I was looking for. Instead, I went to “Toys by Category.”

Now, my mind begins running through the scenarios listed below:

  • Science Activities – archeology is science, but maybe this toy requires some more cognitive thought
  • Cognitive Play – hmm, pounding a rock, OK probably not here
  • Creative Activities – it definitely is a creative idea, but how much creativity is involved finding bones?
  • Outdoor Activities – I guess it could be messy, kids + dirt = mess

Image of the navigation that caused my confusionView larger image

Meanwhile, as I try to figure out what to click, my wife, who has already read me the entire description from the catalog is wondering what the heck I’m doing and wants an answer.

I decided to just search for the product number, which got me there quickly and I was able to answer my wife’s question (I believe she had already made the decision while I was having navigation woes).

Needless to say the navigation failed me. Had we not had the catalog the site may have failed me, in turn the site would have lost a sale.

As I’ve mentioned in another post e-commerce sites need to focus on usability.

Know Why Your Customer Will Use Your Website

Understanding why a customer will come to your website is the first step to building a meaningful website.

In working with many clients over the years, I’ve seen the only initial goal of a website to create a “Wow” factor. This being an attempt to impress their customers and gain a competitive advantage. Unfortunately, this rarely works as planned. And often times leads to frustration from both the client and the designer each trying to seek the elusive “Wow.”

A better approach is to know why your customer is coming to your website in the first place. Example questions you should ask yourself:

  • What benefit can a website provide my customers?
  • Will customers have questions that could be answered online?
  • What are my customers’ needs?
  • Are customers looking for a way to contact me?
  • Are customers researching products or services before making a decision?
  • Will customers go online to compare my company against my competitors?
  • Will customers look online for samlpes of work?
  • Can my website extend the offline, in store, experience?

Understanding your customers is only one step to a great website. But if done correctly could be a website with the “Wow” factor.

Debunking the Myth of the Fold

The fold, an invisible line placed on a website where the bottom browser chrome cuts off the rest of your page, forcing the user to scroll to see the remainder of the content. Content of any importance must reside above the fold if it is to be seen let alone clicked on. Any content below the fold is well, just not important. This was the design convention that designers would design towards. Surprisingly some still do.

But the fold is no longer an issue, maybe it never really was. Research has shown that users will scroll to find the content they are looking for. And there can be a lot gained by allowing your site to scroll and adding white space making your site easier to read.

I found it interesting, and somewhat shocking when working on a project to hear the client talk about moving more information above the fold. They client was concerned that users were not clicking on the links below the fold and that to increase the click through rate on these links that the information must be placed above the fold.

The client was very visual in nature so sharing only numbers and percentages wasn’t going to cut it. I needed to debunk this myth of fold visually.

In preparation for the meeting I captured the homepage of five (5) different websites that visitors to my clients’ website would also visit. I then marked on each one where the “fold” would be and measured the number of pixels above and below the fold.

The images from my presentation are shown below along with the measurements are listed below.

Barnes & Noble

  • 25% of site information above the fold
  • 75% of site information below the fold

Barnes and Noble Thumbnails
View larger image

Target

  • 27% of site information above the fold
  • 72% of site information below the fold

Target Thumbnail
View larger image

HGTV

  • 27% of site information above the fold
  • 72% of site information below the fold

HGTV Thumbnail
View larger image

FoodTV

  • 28% of site information above the fold
  • 72% of site information below the fold

FoodTV Thumbnail
View larger image

This presentation proved to be a convincing argument and really opened the eyes of the client. The fact that major consumer brands are designing their websites so that over 70% of the content is below the fold should solidify the fact that the fold is a myth.

With all the all the variable that make website design difficult it is time to remove one troublesome myth and concentrate on the real stuff.

Why Hire a Professional Web Designer

The reasons for hiring a professional web designer are the same reasons as hiring any other professional. You want someone who is knowledgeable in design, user experience and usability. The designer should be able to understand the needs of your clients and translate them to an online experience. As such a professional web designer will create a site that not only meets your needs but also the needs of your customers.

I’ll Just Get Joey From Down the Street

With the advancements in WYSIWYG editors, open source themes and the multiple books on websites, HTML is becoming a household word. Elementary schools have even started showing students how to develop their own web page. It is no wonder why so many people are calling themselves designers. So, Joey from down the street might be an HTML whiz. But what are the chances he knows how to properly create a user interface. Or how to leverage your site to enhance your current marketing and business goals. What about assisting you in determining your site’s purpose?

You Do Have a Purpose?
You have a site for a reason. Or if don’t you need to. Having a site for the mere fact that you have a site no longer is a legitimate reason. What purpose will your site serve? What benefit would your customer receive from visiting your website? Who are the users that will view your site? A professional designer can help you answer these questions as well as, establish goals and objectives.

Web professionals understand the fact that with so many choices of sites out there your site must stand out. It must also speak to your customers. Establishing a purpose will result in a better designed site. Leaving a lasting impression with your customers.

Even more so a web designer will help you establish a purpose for customers to come back to your website. Each time you get a customer to come back you will establish more mind share than the time previous. And so on.

Study Your Competitors

So now that a purpose has been established it is time to create the look and feel. One of the best ways to get started is take a look at your competitor’s sites. Make a list of things that you like about the site, feel work well, or things that you feel don’t work well. Your web designer should also research your companies’ competition. Challenge the designer to make your site better then what is out there already. Be it a more professional look, better usability or more functionality. Whatever the case maybe you want your designer to make your website better than that of your competition.

The Big Issue

As with anything cost is a driving factor in most company decisions. It will come as no surprise that Joey from down the street will create a site cheaper than a trained professional. But what will the end result be? How well will the site reflect your company?

Customers are quick to judge the book by the cover, so to say. If your website isn’t up to par chances are good that your potential customers will leave before they go any further than the home page. If they get frustrated or discouraged by your website, it won’t leave a very good message about your company. This result could end up costing way more than the cost of a professionally designed website.

Not Intentionally Bad

No one intentionally designs a bad website. And I’m sure that a Joey from down the street somewhere has designed a gorgeous, functional and well-structured site. Chances are however, that you will get a better ROI if you go with a professional designer.

Form Design Basics: Error Handling

Form design is tricky. Sometimes designers don’t understand all the complexities of a given form and misjudge the time needed to properly design them. Your web site’s form is essentially the heart of any transaction. It is of the utmost importance to design the form correctly.

A frequent question on form design is how to handle error messages?

My typical response is to build the form to do the “heavy lifting” so that the majority of errors can be eliminated.

Create the form to handle varied inputs. For example don’t force a user to figure out how you want a phone number. If they enter with dashes (periods or parenthesis) don’t fire an error message and force the user to correct the problem simply strip out the extraneous characters on the backend and move on.

Clearly indicate what is required, best practice is to use an *

Since no matter how well the form is built there is going to be errors make sure the errors are clearly indicated as well as instructions on how to correct the problem. For long forms it is a good idea to indicate the errors at the top of the page and also by the field. This eliminates the need for users to scroll up down trying to find the errors. The standard for error messages is red. I’ve used a combination in the past of a yellow alert box with red text. This really stands out against a white background.

In some instances I’ve seen live validation work well for, instance when passwords don’t match, or password strength indicators. Other times it can become rather intrusive. Whereby it fires an error before I’ve even finished typing my response.

If the form is of the complex nature (i.e. mortgage applications, claim reporting, etc.) contextual help along side of the forms can prove to be a good idea. A good example of this can be seen at Wufoo

These points only scratch the surface on error messages and form design however should get you pointed in the right direction. It is important to think through your form making it as easy as possible for your users to complete.

Click Here…and Then What

There has always been a debate around whether or not one should use the words ‘click here’ as link text. On the one hand, we know usability experts strongly advise against this since the link is not descriptive enough.

While on the other hand some copywriters have exactly the opposite opinion and showing ‘click here’ is perfectly acceptable. The counter argument is that you will get better results if you tell the person exactly what you what them to do. Now if we throw in the fact that SEO gurus prefer links that contain keywords optimized for the page we have a real situation on our hands

So who’s right? The answer is all of them.

From a usability perspective it is true that the link should be descriptive and understandable to the user. It is also true from a marketing a copyrighting standpoint that telling the user what you want them to do produces better results. And we know that providing keywords in the links help with search engine optimization.

With all of these statements being true what would happen if you combined both the action word with the content related words to form a link such as:

Click Now to Subscribe to Our Design Blog

A link shown in this way solicits the action the user should take, Click Now, Subscribe tells them what the purpose of the link is for, clearly indicating the goal of the link and Design Blog is the optimized phrase.

The length of the link falls within the 7-12 word range, desirable when try to produce good information scent. Personally however, I think the link could be shortened and still be affective.

Subscribe to Our Design Blog

The action we want the user to take is to subscribe, the click here seems to be redundant since that is the typical action one does with a link. However, I can see how it provides a stronger call to action.

The lesson in all of this is to make sure the your links are understandable to your users. Whether you use ‘Click Here’ or something different if the users aren’t clicking then chances are they aren’t finding what they are looking for.

The US Apeals Court Rules It’s OK to Bury Your Terms & Conditions

A U.S. Appeals Court has ruled that a website can incorporate terms and conditions language into the clicking of a continue button. Meaning a website no longer needs to require a person clicking a checkbox to agree to the terms and conditions of the site.

The dating website True.com was sued by a male user who said he was unaware that the website’s free membership was only for women. A main part of the case was the fact the user argued he had not agreed to terms and conditions on the website’s registration form when signing up for a free trial.

Now, I’m not sure about you but I have never completely read anyones’ terms and conditions however I still think this is a poor decision by the court and one that I would urge you not to listen to.

It seems a little shady to try and bury your terms and conditions – and causes one to question if you have something you are trying to hide. If you have terms and conditions that will affect how a person will interact with your site provide a checkbox that must be acknowledge before they continue. Even if the person doesn’t read the terms they will be forced to at least acknowledge there are terms to the service.

Terms, conditions and all that legal mumbo jumbo may not be fun to read but think about how poor of an experience it will be if the user is blind-sided by something they “should have” read but didn’t because it was “hidden”