What is the first impression of a customer who visits your web site? Today, I visited the Prudential home page where I was greeted with the content and imagery below.

First impressions of Prudential

• This guy has a lot of money.
• He probably doesn’t understand day-to-day life of an average American.
• Does it really take this much space to say that Prudential is stable?
• How does a picture of the CEO help to back up this idea?
• Why is so little of the home page devoted to the activities one might come to the site to complete?

What are your first impressions of Prudential?

Next, I visited the Principal Financial Group home page. While some would argue the Principal home page isn’t as visually appealing, just look at the number of things you can do from the home page.

First impressions of Principal Financial Group

• I can do a lot of things from the home page.
• The site is very information-rich.
• There are multiple links to primary activities a user might come to the site to complete.
• A few photos on the site, but I can figure out where to learn more about rolling over funds from an existing 401k plan.

What are your first impressions of Principal Financial Group?

CNN proclaims, Internet Explorer 6 finally nearing extinction

Except, not really. See below for latest browser statistics from our consumer/physician clinical information web site, which gets about 2 million visits or 5 million page-views per month.

Internet Explorer 6 – 12.2%, in August 2010, down from 17.8% in January 2010.

Note: Graph last updated September 3, 2010.

Form Length

Better to have form on one or multiple pages?

• Evaluate every question, then ”Keep, Cut or Postpone”
• Perform best practices audit using spreadsheet & breaking up by section & data collected.

Apple check-out system uses dynamic accordion form. Makes use of accordion to collapse sections after you enter form data.

Inline multi-step do not affect conversion, though people were fastest with it.

Are there accessibility issues with accordion forms? Build form out to work with plain HTML, then progressively enhance using code & CSS.

Primary & Secondary Actions (or Next & Previous)

Primary & secondary actions. Should Next be on the right and Previous on left? Depends on how form labels are aligned. If you’re going to use this, be sure there is enough space between buttons so secondary action doesn’t align with your form elements.

Consider changing form labels. Continue & Go back instead of Next & Previous. Take emphasis off secondary action by using a link instead of a button or using more subtle style.

When primary action is inline with rest of form, users performed the most quickly.

How about tab index on secondary actions? Leave out in most cases, depending upon user goals.

Button & Links

Consider button for primary action & link for secondary.

For help differentiating forms from applications, see Forms vs. Applications by Jakob Nielsen.

Mad Libs Style Forms

Questions are layered into paragraphs with blanks. Some sites have seen consistent increase in conversion & completion rates.

“Mad Libs” Style Form Increases Conversion 25-40%

Vast.com uses Mad Lib Style Forms.

International Forms

There are many ways to present forms that collect postal addresses. Relying solely on text inside form fields causes usability issues.

Be sure your forms are tuned to the country your form is targeted towards. Can use automatic-detection based on IP address WiFi, or GPS. HTML5 has geolocation-based API.

Use generic format that covers multiple regions or countries. Example form fields, City/Town, State/Province/Region, ZIP/Postal Code. When it comes to form validation, realize the variations in different countries. Some countries don’t have postal codes, some have numbers and alpha-characters.

More on postal addresses & forms

• Franks Compulsive Guide to Postal Addresses.
• International Address Fields in Web Forms.

Flexible inputs for form fields

Use input maps is fine, but don’t change answers while users are entering them. Set expectations up front or modify after entry. Don’t hide form hints in your form fields.

HTML5 allows additional input types

• number
• range (implements slider)
• date (implements calendar)

Two-Column Form Design

People will scroll if there is something to scroll for, if it’s clear your form continues. People will jump right in, skipping help text if they want what’s on the other side.

Scan line for form completion. Left aligned items have a much clearer scan lines. Be careful not to scatter input forms across the page. Draw straight lines as guerrilla metric between different sections of your forms.

When you encounter a form on mobile & enter your cursor, Apple does form field zoom. Android doesn’t so form fields are

In general, it’s a good idea to avoid two-column form designs because of loss of scan line and issues it might cause for mobile devices.

Q & A

Cancel and reset buttons on 1-page forms: Get rid of cancel or reset buttons when you can.

How about help links? Help links can work when content is relevant.

Label position on forms: Use top-aligned for speed and higher completion rates. Also best for mobile, accessibility, etc.

Lightbox use in forms: No concrete data yet, inserting follow-up questions in lightbox can be more successful than full form. Okay for adjustments & additional inputs. Stay away lightbox for a complete or multi-page form.

Auto-populate city and state, based on ZIP code: Read post on auto-populating city and state based on ZIP.

The latest Facebook design has one major issue, the ambiguity of the icons for Friend Requests, Mail and Notifications.

Name the first thing you think of when you see each of the icons.

Friend Requests – Friends, People? What about the requests you get from people who really aren’t your friends?

Mail - Chat? Is Facebook saying mail is the new chat? We’ve all had email for at least ten years. Why not use the conventional envelope icon?

Notifications – The world? The World Wide Web? Earth?

Windows Security Essentials

I recently discovered Windows Security Essentials and installed it on a new Windows 7 desktop. Satisfied with the product, I went back to the Web site, to see if Windows Security Essentials was compatible with Windows XP.

Was the team not focused enough on user tasks and goals? Or were they just focused on too narrow a set of users? In the scenario of Windows XP users, they missed the mark.

Use of images on the page

The images under the left navigation include Windows 7 and Windows  Vista. The images don’t tie into the design and look more like advertisements, than a part of the page. The huge image in the center of the page might make traditional marketing types feel warm and cozy, but how does it help users’ accomplish their goals?

Who are your users, what are their goals?

Even if the team realized a user with Windows XP is not the primary audience for this page, they should link to a compatibility chart or provide enough information scent on the page to allow an XP user to achieve their goal.

User experience questions not appropriately researched or analyzed

• What are users’ primary  & secondary goals?
  • Is there enough information scent for users’ secondary goals?
• Which features are of most importance?
  • How do you draw attention to them?
• Are images used effectively?
  • Do the images help achieve users’ goals?
  • Are images decorative, content or navigational?

Users come to your site to complete tasks

The web is a functional, task-oriented place. On the web, we want to find the information we’re looking for quickly. We go to the web to get answers to our questions or to complete specific tasks. Imagine the last time you went to your bank web site. Were you just browsing, or did you have a specific task in mind, such as finding your account balance, or looking at current interest rates?

The web often lacks context

We come to the web to do, and we already have the context when we get to the web site. Print lends itself to length and because print is delivered to the reader, it comes with lots of contextual language.¹ If a visitor comes to your site looking for something specific, and doesn’t find it, they will click the back button and move on to the next site.

Understanding how users read on the web

It’s easy to think writing for the web is similar to writing for print. A first instinct is to obtain the exact text from printed materials and copy and paste it to your web site. If you do this, you should realize users don’t read web pages word for word; they generally skim the contents looking for specific trigger words. To ensure success, web writers must understand how people use web sites and how they read on the web.

Research – how users read on the web

To prove these points, in the summer of 1997, three studies were conducted at the SunSoft usability laboratories in Menlo Park, CA. During the studies, eighty-one randomly selected users ranging from highly-technical to novice were asked to perform various tasks on a number of pre-selected web sites.

The first and second studies were exploratory and qualitative, aimed at generating insight into how users read web pages. The third study was a measurement study aimed at quantifying the potential benefits from some of the most promising writing styles identified in the first two studies.

Conclusions from the studies

The studies concluded that scan-able, concise writing styles made a positive difference in user performance and subjective satisfaction. The studies also showed that 79 percent don’t read web pages as they read print. Instead of reading from beginning to end, they scan the page, looking for words or phrases related to their desired task².

Writing clear and concise web content

Web writers must write clear and concise text using a variety of formatting options. Some of these options include:

• sticking to one idea per paragraph
• writing and using concise sub-headings (which summarize paragraphs)
• using numbered or bulleted lists

It’s also a good idea to get rid of wordy sentences and try to cut the word count to half that of conventional writing. The web isn’t about communicating with long words, and overly descriptive sentences. The web is about communication with speed. Use simple words. For example, use “tried” instead of “attempted.”

Real-life web writing examples

Review the scenarios below. Remember, visitors come to a site to accomplish a task: such as, viewing their checking account balance, or logging in to their college web site to submit an assignment.

In this example, a family physician is trying to find health care reform information for his or her patients. This text was taken from the home page of American Academy of Family Physicians.

Original Version:
With the health care reform debate entering its most critical period, patients across the country are asking their family physician for answers to questions such as — “Which health reform claims are true? Where can I find a bipartisan source for more information? Why are the reform proposals being reviewed by Congress important to me, your patient?” The AAFP has created a one-page information sheet (1-page PDF) that physicians can download and share with their patients.

Rewritten Version:
With health care reform entering a critical point, patients are looking for answers to health care reform questions. Give them answers with the health care reform patient handout (1-pg PDF).

Summary of changes: In this example, sentences were too wordy. The questions a patient might ask were removed. If a physician was seeking this information, he or she has likely encountered the questions already.

The next scenario is a customer of Poplar Bluff Federal Credit Union (PBFCU) who wants to learn more about online banking. This text was taken from the online banking page on the PBCFU web site.

Original Version:
Internet Home Banking – The Credit Union Way
Developed exclusively for FLEX Credit Unions, FLEXTeller is the latest in Internet Banking technology. Accessible through any web Browser, FLEXTeller provides you with real time connection and a secure site in which to view account information. Members may make transfers between accounts, view and download account history, view recent check clearings, view cleared checks and even apply for a loan, all on-line. FLEXTeller gives you access to your financial information 24 hours a day, 7 days a week.

Rewritten Version:
Poplar Bluff Federal Credit Union uses the latest secure technology, so you can feel safe banking online. Using online banking you may:
* Make transfers between accounts
* View and download recent transaction info
* View recent and cleared checks
* Apply for a loan

Summary of changes: In this example, much of text was omitted. Most visitors would have no idea what FLEXTeller is, and because the user is already on the site, there is no need to include, “Accessible through any web Browser.” The list of online banking tasks was split into a bulleted list to improve scan ability. Finally, most people realize the web is 24 hours a day, 7 days a week.

Writing meaningful link names

When linking to files or other web pages, use care not to make the link name, “click here.” Link names should describe what is being linked to and be worked into sentences naturally. Longer link names can be better if they provide relevant contextual information³. Descriptive link names also let the user scan the page to find information they seek, without reading entire sentences or paragraphs. If you’re linking to a document, such as a Word file or PDF, be sure to include the file type in parenthesis after the link name.

Example link names:
Click here for more information about XYZ.
Click here to see the earnings for your school.

Descriptive link names:
Information about XYZ.
View earnings for your school.

References

1. McGovern, Gerry. “How web is different from print.” New Thinking 08 Dec 2008: web. 21 Sep 2009.
2. Morkes, John, and Nielsen, Jakob. “Concise, SCANNABLE, and Objective: How to Write for the web.” Useit.com: Jakob Nielsen’s website. 01 Jan 1997. Nielsen, Jakob, web. 21 Sep 2009.
3. Brinck, Tom, Darren Gergle, and Scott Wood. Usability for the web: designing web sites that work. Illustrated. San Francisco, CA: Morgan Kaufmann, 2002. Print.

I’ve set up a user interface design / user experience search engine (#1 below). Thanks to @cbehrlich for the heads up on her user experience search engine (#2 below).

• User experience search engine #1: http://snipurl.com/uxsearch
• User experience search engine #2: http://tinyurl.com/UI-UX-Search

The searches engines return results from trusted user experience and user interface design Web sites. If you work in or write about user experience and you’d like to contribute, contact me.

To ensure users don’t have trouble downloading files (Word, PowerPoint, Excel files or PDF’s), follow these guidelines when naming files to be uploaded and used on your Web site.

Remove spaces from file names

(hyphens are okay to separate words)

Some web browsers may not recognize the spaces. Spaces can also cause links sent in e-mail to break.

• Marketing Brochure.pdf
• should be changed to:
• MarketingBrochure.pdf

Remove any non-alphanumeric characters

(hyphens are okay to separate words)Non-alphanumeric characters cause problems in web browsers and e-mail programs.

• New Brochure #1.pdf
• should be changed to:
• NewBrochure1.pdf

Simple is better

Descriptive file names help users identify file contents (some users may stumble upon your file via search). However, overly descriptive file names create really long web addresses.

• Letter From a Reader on March 15.pdf
• should be changed to:
• LetterFromReader.pdf
  

Be consistent and thoughtful

(use dates only when relevant)

If you have a weekly or monthly PDF newsletter, be consistent and thoughtful when naming your files. Use dates in your file name only when they are relevant to the content.

Use the following date format in file names: YYYYMMDD.pdf.

• CompanyNews030209.pdf
• should be changed to:
• CompanyNews20090309.pdf

Following this date format will ensure your files are sorted chronologically in Google and other search results.

Web site features and functionality continue to grow, making it important to carefully consider and display only the most relevant feedback to your users.

I came across this example when trying to find a service to update my status on various social networks. To help uncover the problem and the solution you must understand how your application will be used.

This example discusses the default link or trimming behavior on HelloTxt.com and Ping.fm, popular web status update services. Link trimming is important because many micro-blogs, such as Twitter, Yammer and Facebook limit your post to about 140 characters.

HelloTxt.com provides no indication they will shorten links automatically when posted.

If you have shortened the link or you’re posting a short link, the hellotxt.com link (posted on Twitter above) may be longer than your original link.

Ping.fm provides relevant user feedback by indicating links will be automatically trimmed. You can disable Ping.fm link shortening by putting an asterisk in front of the desired link.

The urge to insert the phrase “click here” or “more” is somewhat common among content contributors when creating links on a page. Non-descriptive link text makes your site difficult to scan and causes accessibility and search engine optimization (SEO) issues. Replacing the phrase click here with a meaningful word or phrase (which makes sense out of context) will make your site more user-friendly.

Example 1
Before: For the latest news, Click here.
After: Read the latest news on Medicare Bill (HR 6331).

Example 2
Before: To download the registration form, click here.
After: Download the Spring Fling Registration Form (PDF file).

More Information

• Trigger words – users love ‘em!
  
• Don’t ‘click here’: writing meaningful link text
• Don’t say “click here” not everyone will be clicking