Archive for the 'Usability' Category

Who really has time to go “back to the top?”

Monday, November 12th, 2007

Our team recently launched www.wholeplanetfoundation.org. The mission alone really created an extra sense of project ownership for our team.

The lead programmer who also happens to take ping pong way too seriously incorporated an element of “persistent navigation.” So what is persistent navigation?

Example: Let’s say your task is to check out Whole Food’s CEO John Mackey’s involvement with the Whole Planet Foundation. You visit http://www.wholeplanetfoundation.org/about/directors/ and click on “John Mackey.” You first notice how smoothly the page glides down to Mackey’s content. After reading up on how Whole Foods was created you are ready to get involved with the cause. Rather than having to manually scroll up or find a “back to top” link you notice the navigation has traveled with you down the page. The “Get Involved” button is just pixels away making Mr Fitts of Fitts law happy based on how close the target (in this case the “Get Involved button) is from your mouse. As my five year old son says, “How cool is that!”

Being in business since 1995 we have seen many early examples of what we are now calling persistent navigation with the use of frames for example. Framed pages are carved up into one or many scrolling boxes often creating an unwieldy experience. The framed site approach was usually jumpy and not very smooth. Based on user task feedback, we feel 12 years later persistent navigation may indeed have its place on the web as shaving a few seconds off of a visitor’s experience. Any time savings in our world is big reason to celebrate!

So what do you think about the persistent navigation approach?

Steve C. Kahle - Managing Principal - White Lion Internet Agency

Why your web site cares about “Validation Drag.”

Friday, January 19th, 2007

Let’s start with defining:

Validation Drag: The concept of form validation, although needed, will cause some visitors to abandon completing online forms. With practically unlimited web site choices some time-starved Type-A visitors may leave to never return if faced with having to correct their input on a form due to form validation.

To avoid validation drag, we need to improve the engineering, designing, and programming of forms to minimize the need to invoke validation thereby increasing posts (e.g. customer sign-ups, ecommerce orders, etc.). The form’s UI (user interface) should be designed to minimize the chance a visitor will input incomplete or incorrect data without increasing brainload time. For example, a form could give visitors feedback about inputting the correct length of a password while the visitor types.

In White Lion’s last “Programming Sync” meeting, our team of 7 programmers and I vigorously debated what we now define as validation drag. In the usability corner we want to decrease and ultimately eliminate the chance a visitor becomes frustrated while completing online tasks. In the design corner (our programmers have awesome design awareness and many with design experience) is the need to decrease “stuff” on the page.

The team had already agreed that giving feedback to password input on a form made sense. A while back a team member posted a “Web Sighting” to our Intranet noticing how Skype showed a count down mechanism to the right of the password input field.

Our debate expanded and questioned giving visitors feedback on other fields like username and email address using AJAX. At the end of the day, the debate was a great exercise in the reduction of validation drag and brainload time creating better user interfaces.

It’s really all about protecting the user, their time and their success accomplishing tasks on the site. Our Internet Agency’s approach is to collaborate and remove any potential for Validation Drag with form feedback components (e.g. password length feedback as the user types). Our team must balance the added feedback components with keeping the user interface clean and intuitive. Being a culture of data, we will continue to measure, adjust and learn from the feedback components we implement.

As a closing note I noticed a smart way to reduce validation drag when exploring SlideShare — a site I read about being a Flickr/YouTube version of sharing PowerPoint files. Note how the visitor can immediately check their username on the sign-up form.

check-username-availability.gif

(click to enlarge)

Best of luck with the online forms you encounter,

Steve C. Kahle - Managing Principal - White Lion Internet Agency

Who really cares about pogo-sticking?

Monday, June 19th, 2006

We do. Let’s first define pogo-sticking as it relates to web development:

“Pogo sticking is the act of jumping up and down through the hierarchy of a web site, repeatedly hitting the back button to move to the next item in a list.”

Let’s review two examples.

Example 1: You are researching a company online and want to peruse the company’s press release section. You start with the first press release and need to go back to the main listing page to access the next press release. Wouldn’t it be easier to be able to access the next press release from the press release detail page you were on originally?

Example 2: You are looking online for a flat panel TV. You visit a leading ecommerce site and see a great listing of flat panel TVs and drill down to one that fits your budget. You want to see the next TV the site offers and have to go back to the listing page. Wouldn’t it be easier if you could travel in a linear path to the next TV from the page you are currently on?

At White Lion we see the need for a visitor to pogo-stick as a barrier. The accumulation of barriers, both small and large, quickly add up to lost opportunities. As we all know, lost opportunities can be costly whether it’s a sophisticated ecommerce site or an interactive informational corporate site where first impressions are often made.

How do we fix the unnecessary clicks or the need to pogo-stick? It’s certainly not rocket science. The answer has been used in online photo galleries practically since the Internet went mainstream. The solution lies in a simple “Next/Previous Mechanism.” The mechanism is also armed with title tags allowing a visitor to hover their mouse over the “next” or “previous” links. The mouse hover reveals a description of what the visitor can expect. The Next/Previous Mechanism helps dramatically reduce pogo-sticking by allowing an intuitive linear path of exploration compared to having to jump back and forth from listing pages back to detail pages.

For an example of a White Lion-designed site with the Next/Previous Mechanism in action, visit the T.Stacy site. T.Stacy has been in the forefront of purchasing, managing and selling downtown properties in Austin and other cities across Texas.

Pogo sticking eliminated when viewing by city: http://www.tstacy.com/portfolio_list.php?location_id=1

Pogo sticking eliminated when viewing by project: http://www.tstacy.com/portfolio_detail.php?building_id=56

Pogosticks can be fun, but when it comes to finding information, no one likes to be bounced around.

Best regards,

Steve C. Kahle - Managing Principal - White Lion Internet Agency

Breaking the Back Button

Sunday, April 23rd, 2006

At White Lion we have had many contentious debates over opening content in a new window versus the same window. I have noticed over the decade plus of being in the business, many web developers do not have a unified strategy for when to open content in the same window versus opening in a new window. We do.

We feel you need a very compelling reason to open content in a new window since the visitor will be without an easy way to go back. In other words, when you open content in a new window, the visitorâ??s back button breaks. When you open content in a new window your browser thinks you are on the page numero uno so the back button is grayed out.

So who cares? Visitors do. I remember when I was in a meeting with one of our law firm clients several years ago. The managing partner was a very experienced web user. He commented how he hated (a few expressive expletives were used) when he couldn’t use his back button. The meeting triggered memory of many case studies I have read where newbie users were extremely confused when their back button failed to work. I thought here is a man who is seeing triple digit growth because of his web site and Internet technology. The managing partner was practically an expert Internet user but still didn’t really understand the “new window versus the same window” concept - he just knew he hated when a web site broke his back button.

So what is an example of an exception to the rule? As a quick aside, my wife was sucked into White Lion vortex starting out doing temporary work 9 years ago. My wife turned into the best project manager our agency has seen (if I could only get her to come out of her semi-retirement). She noticed when she would open PDF files, she would often times accidentally close out of her entire browser due to how most browsers present PDF files embedded in the browser page. My wife felt we should make PDF files open in a new window to make life easier on visitors to our sites. Our team debated and we agreed creating another White Lion standard (we have over 200). Several years later I noticed Jakob Nielsen who is a known Internet usability expert post an article and agree with my wife and our standard (see bullet point number 1).

Sincerely,

Steve C. Kahle - Managing Principal - White Lion Internet Agency