An example of what information design can do
Before
After
Category: User Experience Design
Website Navigation
One of a series of white papers by Elizabeth G. Fagan dba EGF Consulting.
Website Navigation Best Practices
- Organize navigation choices from the user’s perspective.
- Navigation reflects logical categories that users immediately understand.
- Navigation clearly represents the website’s organization and overall intentions.
- Navigation is broad rather than deep. In other words, navigation menus have many items rather than fewer items with many menu levels.
- Navigation items are in a natural and logical order.
- Remember: Navigation reflects the title (and HTML title tag) of the page to which it refers.
- All language is simple, without jargon.
- Use the same words or phrase to describe an item throughout.
- Use shape, font size, and color as visual cues.
- Navigation choices are redundant only when required for user productivity.
- Strive for overall consistency. Choose a preferred style and do not mix styles.
- Use either phases or simple one- or two-word labels. Labels are preferred.
- Analyze two-word labels for redundancy. For example, the adjective “Computer” in the label “Computer Systems” is probably redundant; “Resources” in “Staff Resources” is not.
- Use either nouns or verbs.
- Use pronouns or do not use them. For example, “Our Services” or “Services.” If you use pronouns, use them consistently.
- If you use pronouns, choose first, second, or third person. For example, do not use “Our Services” with “Your Solutions.”
- Limit use of “My” to customizable elements. For example, “My Links.”
Email Marketing Campaigns
One of a series of white papers by Elizabeth G. Fagan dba EGF Consulting.
Email Marketing Campaigns Best Practices
Be customer-centric, not product-centric
- Emails enhance your company’s customer service reputation and increase users’ confidence.
- The overall message meets the expectation set by the subject line and registration process.
- Instead of focusing on “product” descriptions, focus on meeting customers’ needs.
- Place marketing messages after content. Users are likely to delete emails that begin with marketing messages before they see the content that interests them.
- Use engaging text that “closes the loop” of an action the user took or that outlines opportunities for benefits, education, and convenience.
- Do usability testing and refine content over time.
Differentiate your email from spam
- Include your company name in the display and domain names of the address.
- Give users content by including type of email (confirmation, alert, offer).
- In the subject line, promote the email’s value rather than giving a description of its contents.
- Do usability testing to determine the best subject line for each customer segment and email message.
Make registering easy
- Promote account registration on an above-the-fold space on the home page.
- Put account registration in the universal navigation.
- Include a link to privacy statement at point of registration.
Position content by its relative value
- Readers scan the top first: place call to action above the fold.
- Use the inverted pyramid structure: put the most important information at the top.
- Because some email users turn images off, put all message copy and links as text outside of images. Use images to enhance, not convey.
- Readers scan the left-hand margin: use headings and bulleted lists to make content scannable.
Add relevant links
- Managing customer phone calls is expensive. Instead of encouraging email recipients to call your company, encourage them to go to your website.
- Link to FAQs.
- In the footer, tell users how to manage their email account.
- By law, include your company’s physical address and unsubscribe link.
- Tell users how to edit account profiles.
- Tell users how to change email addresses.
- Provide customer service information.
Headings are short abstracts
- Heads contain a first word or two that carry important meaning of associated content.
- Headings make sense without text.
Writing is clear and concise
- Avoid wordiness; sentence length should not exceed 15 words.
- Use active verbs (“the cat caught the rat” vs. “the rat was caught by the cat”).
- Call the reader “you” and refer to the company as “we.”
- Use simple, everyday language.
- Avoid nominalizations (“the purpose is to communicate” vs. “the purpose is the communication of”).
- Put statements in a positive form (“paying promptly ensures you” vs. “if you do not pay on time” or “your failure to pay on time”).
Grainger.com Mini-cart & Checkout Wireframes
Fagan contracted with Grainger.com as Senior User Experience Architect. She created wireframes for a subscription feature and for an award-winning persistent mini-cart and one-page checkout.
Background
The Grainger.com UX management team challenged the its staff to create visions for different areas of the company’s website. Managers divided the staff into four teams, set a deadline, and the contest was on.
Result
Fagan led her team (Beluga Project: White Team 1) to win the contest by creating the best concepts for a persistent mini-cart and one-page checkout.
Grainger.com Persistent Mini-cart and One-page Checkout wireframes PDF 1031
Grainger.com Subscription Wireframes
Fagan contracted with Grainger.com as Senior User Experience Architect. She created wireframes for a subscription feature and for an award-winning persistent mini-cart and one-page checkout.
Background
Grainger.com had contracted with an outside vendor to provide subscription functionality. Grainger.com required many more complex considerations than the vendor’s out-of-the-box functionality could handle.
Process
As her team’s most-experienced member, Fagan became the project lead. She worked closely with the business stakeholders. She made sure back-end developers vetted the designs. She insisted on usability testing. In three months, she delivered the final document containing user flows, architecture, page designs, and content.
Result
Fagan completed the project in the shortest amount of time in the vendor’s history. Grainger.com revenue increased dramatically following its Auto-Reorder launch.
Grainger.com subscription wireframes PDF 5874
Card Sorting
One of a series of white papers by Elizabeth G. Fagan dba EGF Consulting.
Card Sorting Best Practices
Toward an Intuitive Website
Card sorting is a way to think about how users want or expect to see information on your website. Participants in a card-sorting session are asked to organize the content from your website in a way that makes sense to users. Participants review items from your website, and then they group the items into categories. They then label the groups, forming a new navigation structure.
Usually a card sort is performed with actual users, but you can perform a card-sorting exercise internally, with staff members.
Benefits of Card Sorting
Card sorting helps you build the structure for your website, decide what to put on each page, and label the navigation categories. It helps to ensure that you organize information on your website in a way that is logical and intuitive to your users.
Types of Card Sorting
There are two types of card sorts: an open card sort and a closed card sort.
In an open card sort, participants are asked to organize the cards into groups that make sense to them and then name each group. In a closed card sort, participants are asked to sort items into pre-defined categories.
An open card sort is typically done when you want to learn how users group content and understand the terms or labels users call each category. A closed card sort typically works best when you are working with a pre-defined set of categories and you want to learn how users sort content items into each category. A closed sort works well after an open sort. By conducting an open card sort first, you can begin to identify categories of content. You can then use a closed card sort to see how well the category labels work.
Preparing for the Participants
- Select participants to represent the range of users. Draw from different user groups with different levels of experience.
- Explain the card-sorting process to the participants, perhaps in a kick-off meeting.
- Plan about one hour for each session.
- Arrange for a space where the participants have enough room to spread the cards out on a table. A conference room works well.
Preparing the Cards
- Perform a content inventory. List the content topics or types of information that you are likely to have on the site (if it’s a new site) or the content on your current site. Record a two- or three-word summary of the actual page content instead of the page title or navigation links. If a page has two or more topics, record those separately.
- Write each topic on a separate white index card. If you like, print labels with the name of each topic from your content inventory and attach them to the cards. Each card represents a unique chunk of content.
- Include some blank white cards for content that participants may believe to be missing.
- Include colored index cards on which the participants will write page titles and navigation labels.
- Make a set of cards for each participant or group of participants. Consider numbering the cards if you have a lot of participants; you can record numbers in Excel and reuse the cards.
Sorting the Cards
- Give each participant or group of participants a set of cards.
- Ask the participants to group the cards in a way that makes sense to them. Many participants start by placing the first card on the table and then look at the second card to see whether it belongs in the same group or if it deserves its own category—and so on through the set of cards.
- After participants have grouped the cards, you can ask them to name or label each group with the colored cards. What words would the participant expect to see on the home page or second-level page that would lead the participant to that particular group of content items?
- At the end, if the participant has too many groups, ask if some of the groups could be combined.
Each card sort represents an information architecture; the colored cards make up the navigation, and the white cards are the pages.
In cases where multiple participants perform sorts, there are different ways of analyzing the data. Complete site maps could be created in Visio or Excel. The cards can be pinned to a wall and reviewed. If you numbered the cards, you might use Excel to perform sorts. The website team should look for commonalities among the participants’ sorts.
Next steps are interface design and content development.
Landing Pages
One of a series of white papers by Elizabeth G. Fagan dba EGF Consulting. This one was written for the Girl Scouts of Greater Chicago and Northwest Indiana.
Landing Page Best Practices
The process of creating a website is frequently much more involved than what we are doing now. It can take a year or more to interview users, do usability testing, create designs, write content, development advanced features, and so on.
We are redoing this site on a shoestring, but that doesn’t mean we’re doing it wrong. The card-sorting activity and new navigation have been successful (as long as users can find what they’re looking for). This short report addresses how to create landing pages for the updated Girl Scouts of Greater Chicago and Northwest Indiana website, another important element to a redesigned website. The previous site lacked landing pages altogether.
The purpose of a website
Traditional retail sites have it easy. They know how to build their websites because they know what they want their websites to do. If they have a good Web marketing department, they can answer the following three questions without batting an eye:
- How can I get people to my website?
- How can I persuade them to buy my products?
- How can I deepen our relationship to get repeat business?
The Girl Scouts of Greater Chicago and Northwest Indiana might not be able to answer those questions quite to so easily. Let’s look at these questions a little more closely.
How do I get people to visit my website?
Google analytics figures for our site say:
- 47.33 percent direct traffic
- 37.17 percent referring sites
- 15.50 percent search engines
Marketing efforts such as improved Search Engine Optimization (ongoing), a non-profit YouTube channel, the Twitter widget, and other vehicles could be the subject of an entirely different report, generating its own efforts.
How can I persuade them to buy my products?
Here’s where the answer gets a more complex for the Girl Scouts of Greater Chicago and Northwest Indiana, because, aside from the retail store site, the main site does not sell products. What, then, does it “sell?” What is the desired action?
Four customer groups
The site has four basic customer groups, all of whom are looking for different things. Think of the call to action for each group.
- Donors. These visitors are looking for why and how to donate to the Girl Scouts. They might want to donate to something specific; they might want to know how their donations are used. Desired action: donate to worthwhile community.
- Prospects. These are probably parents who want to know how to sign their daughter up. They might want to know the specific benefits of being a Girl Scout—as well as the costs involved. Desired action: sign up, become part of community.
- Adult Volunteers. These may be the most focused of all users. They want to know specific information that relates to them without wading through other content. Desired action: Find targeted information, be part of community.
- Girls. This might be a tricky section to fill, because girls’ interests and loyalties so quickly change. Fortunately, the administration of Girl Scouts of Greater Chicago and Northwest Indiana has many experts on girls and their interests! Desired action: Find desired information, be part of community.
How do I get them to perform the desired actions?
“Bounce rate” is the percentage of single-page visits or visits in which the person left your site from the entrance page. According to Google analytics, the bounce rate for the site is 60.74 percent. That’s high. The average number of pages viewed is 2.35 per visit. The average time on the site is one minute, 58 seconds. There’s a lot of room for improvement here, and good landing pages can help.
Landing pages are where more traditional marketing steps in. The best way to get visitors to act is to appeal to their fundamental emotional motivations. Notice I used the word “community” in all the desired actions. The role of the landing page is to create a sense of belonging, a powerful motivator—especially for a site like Girl Scouts of Greater Chicago and Northwest Indiana. They should contain a brief call to action.
The landing page should pick a few powerful topics from the pages below it and emphasize those. They should make emotional appeals, yet should be teasers—too many items on a Web page destroy the visitor’s ability to find key information. It paralyzes them from making a decision.
How can I deepen our relationship?
This is the role of the tertiary pages, or the pages below the landing pages. They contain the main content. They create the sense of community. They are positive and informational about the Girl Scouts. They contain the details of the calls to action.
Walgreens.com Prescription Value Card Wireframes
Fagan contracted with Walgreens.com as User Experience Designer and worked on the company’s online pharmacy. Wireframes were created in Visio, Axure, and Photoshop.
Overview
Years on development teams taught Fagan the laws of customer-centric design. Most assuredly, interfaces designed without user input fail. The interfaces she advocates are inextricably linked to the user’s or customer’s perspective. But Fagan has seen too many user-centered web designs that are good looking but technically impossible. Her coding background informs her wireframing process. She vets wireframes with developers, saving time and money.
Walgreens.com Prescription Savings Club Wireframes 1
Fagan contracted with Walgreens.com as User Experience Designer and worked on the company’s online pharmacy. Wireframes were created in Visio, Axure, and Photoshop.
Overview
Years on development teams taught Fagan the laws of customer-centric design. Most assuredly, interfaces designed without user input fail. The interfaces she advocates are inextricably linked to the user’s or customer’s perspective. But Fagan has seen too many user-centered web designs that are good looking but technically impossible. Her coding background informs her wireframing process. She vets wireframes with developers, saving time and money.
Walgreens.com Prescription Savings Club wireframes 1 PDF 5014kb
Walgreens.com Prescription Savings Club Wireframes 2
Fagan contracted with Walgreens.com as User Experience Designer and worked on the company’s online pharmacy. Wireframes were created in Visio, Axure, and Photoshop.
Overview
Years on development teams taught Fagan the laws of customer-centric design. Most assuredly, interfaces designed without user input fail. The interfaces she advocates are inextricably linked to the user’s or customer’s perspective. But Fagan has seen too many user-centered web designs that are good looking but technically impossible. Her coding background informs her wireframing process. She vets wireframes with developers, saving time and money.
Elizabeth G. Fagan Portfolio 