# Presentation: 422157

## Designing and Writing Tasks for the Web

- Kathryn Summers, Ph.D.
- University of Baltimore
- Copyright 2007

## Kathryn Summers, Ph.D.

- Program Director, M.S. Interaction Design and Information Architecture, University of Baltimore
- Teaching areas: User research, information architecture, human/computer interaction, interaction design
- Supervisor, University of Baltimore User Research Lab
- Researching Web usability for users with lower literacy skills since 2002
- Observed more than 100 Web users with lower literacy skills

## Define audience and purpose

- Who will be doing the task?
- What is their level of knowledge?
- What is their reading level?
- Under what circumstances will the task be performed?
- Emotional issues
- Physical circumstances
- Time constraints
- More
- How will users get to the task?

## Identify the user’s purpose

- What is the user’s goal for doing the task?
- Request information
- Sign up for services
- Registration
- Make payments or purchases
- Find information/services/products

## Scope of the literacy problem

- 23% of adults in the U.S. have low literacy competency skills and struggle with everyday tasks
- Nearly 50% of adults in the U.S. read at the 8th grade level or below.
- Two out of every five older users read at the fifth grade level or below
- Most websites are written at the 10th grade level or above
- Content must be written at the 3rd grade level to be readable for 90% of the adult population in the U.S.

## Literacy and cognition

- Limited working memory resources
- Resources normally devoted to high-level cognitive processes are used up by low-level information processing, producing:
- Slower reading speeds
- Reduced comprehension when reading written prose
- Limited number of reading and problem-solving strategies
- Difficulty separating the important from the unimportant
- Impulsive learning and interaction behaviors
**Difficulty making inferences, understanding relationships, and making connections**
- Low self-confidence when faced with learning, testing or new situations

## Implications for public agencies

- As government services move online they may become less available to those who need them most
- Reduced access or limited understanding of information can dramatically affect outcomes and costs

## What we observed

- Low literacy users face severe challenges in
- Using search engines to find desired content
- Navigating to desired information on individual sites
- Reading content when (or if) they find it
- Reading takes concentration and effort
- Scanning is hard, can’t grasp page structure at a glance
- Low-literacy users tend to focus on a very narrow field of view
- Using forms

## Navigational and reading behaviors/coping strategies

- Read every word, so they don’t “miss” the answer
- Skip chunks of text
- Skipping triggered by
- Long paragraphs, dense text, long pages
- Long sentences, complex syntax
- Numbers contained in text
- Difficult, long, or unfamiliar words
- Parenthetical text
- Hopping from link to link
- “Satisficing” quickly

## So forms will be hard to use...

- As the form gets longer and more complex, the cognitive load for users increases
- Every field you add increases the cognitive load and creates potential for error
- Every additional page is an opportunity for users to think they’re done when they’re not
- Every word you add may potentially trigger skipping
- As the cognitive load increases, more and more users will give up or fail, reducing access to the information/service/product requiring the form
- Thus, the questions:
- Is this form really necessary?
- Can this form be shorter?

## Basic design principles for forms

- Help users know what to do
- Getting started
- Moving through the form—create a linear path
- Understanding instructions
- Help users understand the results of their actions
- Understanding feedback
- Fixing errors
- Knowing when they’re finished

## Help Users Know What to Do: Getting Started 

## Help users find the form

- Users need to find their way through the website TO the form
- Support the user’s narrow field of view by minimizing wayfinding
- Create linear reading paths within global navigation sections
- Format pages with single columns of content
- Use minimal links in page content
- Put links to forms in the main content area in logical places; build them into the linear reading path

## How linear reading paths help users

- Users don’t have to interrupt what they’re doing in order to figure out HOW to move forward
- Linear reading paths raise the success rate of most users:Once they hit the right broad category, the path leads themto task success
- Linear reading paths are particularly helpful for less experienced Web users, older users, and users with lower literacy skills

**Notes:**
A linear reading path is content about a particular topic presented in a set of linearly organized pages, starting with the information that is most important, most general, and most simple

## How to create a linear reading path

- Divide site content into main content areas: the content areas in your global navigation will become your linear reading paths
- Break “path" content into logical chunks: content on each particular path page needs to feel like it belongs together and appears in a logical sequence
- Base paths on a logical series of user questions
- Arrange information from general to more specific

## Minimize wayfinding: Create a linear reading path on the page

- Support a linear reading path on each webpage by creating a single column of content
- Many users are distracted or irritated by callouts, features, or lists of links in the right margin
- Anything in right column may be ignored as advertising
- Use links in page content primarily to help users in the wrong place find the right place—don’t assume users will branch and come back
- At end of each page, provide a clear link to the next page—minimize wayfinding
- Put links to forms in the linear reading path

**Notes:**
Bad Examples
Abilify: This page about how to identify a schizophrenia relapse has two lists of key warning signs in the right margin. Many users fail to notice these lists.
CNN: This CNN example uses the right column for advertisements. As a result of this common practice, users are less likely to notice or process content in this area.

People are distracted by callouts, features, or lists of links in right margin.
This is a KEY DIFFERENCE between print and Web.
Lower Lit users: their visual scope is going to be much smaller than you would think.  R-column content triggers SKIPPING.

## Make the navigation easy to use

- Make navigation LOOK like navigation
- Position navigation on the left side of the screen; no DHTML
- Create a clear visual hierarchy:
- Make secondary navigation look secondary and be clearly visually grouped with the primary navigation it expands
- Utility navigation should look visually subordinate to all other navigation and content
- Provide a clear visual signal of the user’s location in the site
- Write link text that allows users to predict target content; use simple, familiar words

## Help users get started (registration)

- Provide one entry point for new and returning users
- Users did not always distinguish between “logging in” and “registering” (“_[Remember me](file:///18a_p9_page_didnt_change_PFL.avi)__”) (__[Fields](file:///18a_p26_filling_in_fields_NYT.avi)__)_
- Examples: AHA and Amazon

**Notes:**
Observation: Inability to begin the login process (confusion about new v. returning status)
Users did not always distinguish between being a new user and a returning user. For example, upon coming into a new site, many users put their name and a password in the “returning users” fields even though they were new to the site. In fact, some users who knew that they needed to register still tried to enter in their user name and password in the returning user fields. Eyetracking also showed that some users looked at the links to “register,” but they would still “log in.”

## Remove barriers to access: Keep forms simple and short (registration)

- Ask for the minimum amount of contact information
- Don’t require answers to profiling questions
- Use email addresses for usernames (“_[had this trouble before](file:///18c_P20_ErrorMessUserName_walgreens.avi)__”)_
- Keep password requirements simple
- Include information about “Why we ask for this” with questions that might trigger concern or anxiety
- Limit key processes (such as registration) to a maximum of three screens

**Notes:**
Observation: Difficulty generating usernames 
Most users with lower literacy skills were unable to generate unique usernames on sites that required usernames, which meant that these users were unable to register successfully on such sites. Users experienced higher rates of success on sites that used email addresses as usernames. While not all lower literacy participants had email addresses, those users who did not have email addresses were without exception unable to generate unique usernames successfully. 

## Avoid requiring passwords or keep them simple

- Don’t make passwords or usernames case sensitive (_[“case-sensitive](file:///18c_p10_PFL_case_sensitive_PFL.avi)_)
- Do not specify a maximum length for passwords
- Put any (simple) requirements immediately to the left of the password field
- If a password prompt is desired, ask for a “password clue” rather than a “hint phrase”

**Notes:**
Observation: Difficulty generating passwords
The need to generate passwords also caused great difficulties for users with lower literacy skills: 
Users tended not to read instructions for creating passwords, and they did not always understand error instructions. 
Users who did read the instructions for creating passwords frequently misunderstood them. Several users thought that a minimum password length of eight characters meant that the password had to be exactly eight characters. This led to significant toil and anxiety.
Users were confused when prompted to provide a “hint phrase.” Some were unable to complete the registration process when a hint phrase was required.

## Basic design principles for forms

- Help users know what to do
- Getting started
**Moving through the form—create a linear path**
- Understanding instructions
- Help users understand the results of their actions
- Understanding feedback
- Fixing errors
- Knowing when they’re finished

## Support a linear path through the form

- Don’t divert users to other pages or other sections of the form
- Don’t use popups or links to other pages (except privacy policy and terms and conditions)
- Design the form to avoid browser warnings about encrypted or secure pages
- Try not to divert users into a mandatory registration process when their goal is to perform some other process
- Don’t make users enter the same information twice
- Don’t split up processes that seem like a single step to users

**Notes:**
Observation: Difficulty completing forms in the designed order 
Users struggled significantly with forms that did not support a linear path through the form content. For example, on one site, the results of user input on the bottom right part of the page were displayed in a top left area of the page. As a result, many users generally didn’t see these results. On an HIV drug interaction site, users had to search for their drug, highlight the drug from a list, then click a separate button to add the drug to a separate “user” list. Even users who figured out this process repeatedly forgot the final step of “adding” the drug. Users on these sites and on others like it were confused by having to return to earlier parts of the form in order to repeat steps. 
Users with lower literacy skills were particularly dismayed and sometimes abandoned the task if they had to reenter data because they had used the BACK button and lost the data they had already entered. Users also responded with anxiety and sometimes with task abandonment if using the BACK button generated a warning message about needing to re-send data. Errors that required returning to earlier parts of the form were also harder to find and correct.
Users experienced anxiety and sometimes frustration when the form page refreshed after they inputted information. Some users were afraid that they had broken something when the screen refreshed; they wanted to close (abandon) the form or tool.

## Design form layout to support linear progress through the form

- Provide NEXT and BACK buttons to help users navigate through the form
- If users do move through the form, retain their data
- Don’t disable the NEXT button
- Provide a location indicator to signal progress
- Display fields vertically (except for naturally grouped fields such as city, state, zip code).
- Put labels just above or to the left of each field (location of labels)

## Keep each element of the form above the scroll line

- Users often miss questions, answers, or links because they don’t realize they need to scroll down
- If the form is longer than one screen, break it into several pages
- Make sure the action button to move on to the next step appears above the scroll line

_**AHA Live and Learn quiz **__[0:58](file:///../../../kathryn%20and%20john/My%20Documents/professional/My%20Documents/CHC%20consulting/forms/results/popup_home_nav_confusing_p15_realm65_10_30_2002_editor_post_graduate.avi)_

_**PPARX medications lookup **__[2:01](file:///../../../kathryn%20and%20john/My%20Documents/professional/My%20Documents/CHC%20consulting/forms/results/popup_home_nav_confusing_p15_realm65_10_30_2002_editor_post_graduate.avi)_

_**AHA registration **__[0:55](file:///../../../kathryn%20and%20john/My%20Documents/professional/My%20Documents/CHC%20consulting/forms/results/popup_home_nav_confusing_p15_realm65_10_30_2002_editor_post_graduate.avi)_

**Notes:**
Observation: Skipping parts of forms below the fold line
When questions, answers, or links to the next screen appeared below the fold and required scrolling, users sometimes missed this content because they didn’t notice that they needed to scroll down. For tools that had multiple pages, users sometimes assumed they were finished and abandoned the form because the “next” step was below the fold.

## Don’t use interior scrolling areas on a page

- Users experience difficulty in switching between an internal scroll bar and the browser’s scroll bar
- Present terms and conditions and privacy policies on their own page

- _[PFL using inner scroll ](file:///16i_p7_PFL_using_inner_scroll_PFL.avi)_

_**PPARX can’t find medication **_

**Notes:**
Observation: Difficulty using interior scrolling areas
Users had a lot of difficulty using interior scrolling areas, such as those commonly used for terms and conditions or privacy policies. Users had difficulty switching between the scroll bar for an internal scrolling area and the browser’s scroll bar, and some users were never able to use both successfully. Users in several circumstances had difficulty accessing information or answering questions that appeared below the fold in interior scrolling areas. Some users who scrolled through a terms and conditions scrolling area subsequently failed to scroll down the browser window and submit their registration, resulting in task failure.

## Help users understand the results of their actions by maintaining the linear path

- Display the results of user actions within the user’s current focus of attention, but without refreshing the page or allowing page contents to move
- In an assessment tool or quiz, display feedback immediately to the left of or below the user’s input
- Have a final results page that repeats the questions, the user’s response, and the feedback
- Provide a clear final result (if relevant)
- Help users know when they are finished and what they should do next

**Notes:**
Observation: Difficulty processing feedback
Users consistently had difficulties processing the results of diagnostic or assessment tools when these results were presented in a popup or at the end of a long page, or when the answers appeared on a separate page at the end of the tool. 
When presented with popups, users experienced many problems, including losing the popup behind the larger browser window or closing the popup without reading it. 
Results presented at the end of the tool tended to be ignored or skimmed. When asked, users explained that there was just too much text. Eyetracking confirmed that users tended not to read longer chunks of text. 
When the answers appeared at the end of a tool, users weren’t able to map the results to the questions they had answered. For example, some users didn’t realize that they were presented with the correct answers, or they had difficulty mapping the correct answers back to their responses. 
Users didn’t always read or understand answers and explanations when they were long or used complex words and sentence structure. Eyetracking data showed that users skimmed or skipped over difficult text, but they read the text when it was easy to read.

## Risk Assessment Tool

## Basic design principles for forms

- Help users know what to do
- Getting started
- Moving through the form—create a linear path
**Understanding instructions**
- Help users understand the results of their actions
- Understanding feedback
- Fixing errors
- Knowing when they’re finished

## Key cognitive and behavioral characteristics relevant to forms

- Most users seem motivated to avoid reading when possible
- Resources normally available for high-level processing are used up by low-level information processing
- Users have a relatively narrow focus of attention as they move through all kinds of texts, including forms and interactive tools

## Readers with lower literacy skills...

- Interpret words and visuals literally
- Read slowly, missing meaning
- Skip over hard words
- Miss the context – jump right in
- May have difficulty seeing principal features
- Tire quickly and may give up easily

## Readers with higher literacy skills reading on the Web...

- Prefer information that looks easy to read through
- Prefer information that gets to the point
- May skip over long blocks of text
- Are overloaded with information and may not take time to read lengthy text
- Appreciate having unfamiliar terms and concepts put into plain language

## Support reading avoidance: Keep text to a minimum

- Keep instructions short and clear
- Keep introductory text as minimal as humanly possible
- Use simple, familiar words for instructions and labels (_“Submit”_)
- Define words in context where necessary (sleep apnea)
- Use one-word field labels if possible (_Email “address”_)
- Remember—the tradeoff for longer text is fewer readers!
- 		   (Too much reading) (Like a conversation)

**Notes:**
In the current study, many users with lower-literacy skills attempted to fill out forms while doing a minimum of reading. Users tended to skip all introductory text, and to abbreviate field labels and instructions to a single key word. For example, “First name” was read as “name”; “email address” was read as either “email” or as “address.”
Observation: Confusion and skipping caused by embedded text
Forms with a lot of text, including instructions, long field labels, and descriptions of services, tended to trigger skipping. Users sometimes skipped over information that they needed in order to fill out the form correctly. The eyetracking information showed that users would sometimes read the very first text on the page, or might read small chunks of text immediately above the form fields. If this text seemed non-essential, these users would skip everything else. Most users with lower literacy skills didn’t read any introductory text before attempting to fill in fields.
If users encountered unfamiliar medical words, they sometimes skipped those questions or answered them inaccurately. For example, when asked about relatives, users were unsure if their “relatives” included cousins, or spouses, or people who had already died. Similarly, users didn’t know how to proceed if they were asked for specific medical information, like their systolic blood pressure. 
Observation: Confusion over field labels
Labels that used jargon or unfamiliar words led to mistakes. For example, some users didn’t know what “brand” meant and concluded that they were being asked for the drug’s manufacturer. Some users didn’t know what “residency status” meant and failed to identify themselves on forms as U.S. citizens. Users also struggled sometimes with jargon such as “Submit” or “Verify.” 
Users routinely abbreviated field labels to a single information bearing word. For example, users saw “Email Address” as “Address,” and typed in the street address. Similarly, they saw “First Name” as “Name,” and typed in both first and last names.
When field labels weren’t located close enough to the appropriate fields, users didn’t always connect the label to the right field. Also, when labels appeared below fields, users sometimes assumed that text above the field, even when it was far away, was the field label.

## Accommodate a narrow field of view

- Make sure labels make sense without depending on the larger context
- Put labels above or to the left of fields

**Notes:**
Previous research has found that lower literacy users and some older users are less able to pay attention to cues about what might be coming up or remember where they came from because processing the text itself takes so much cognitive attention. As a result, they have an especially narrow field of view—as they move through form content, they are not “looking” ahead or behind, so they are less likely to notice content above, below, or to the sides of their focus of attention (Summers and Summers 2005).
The current study confirmed the importance of this finding in several ways related to user progress through forms. It was particularly crucial that field labels make sense out of context, and that pages make sense independently. Based on our findings, it is our recommendation that even adjacent paragraphs should be as independent as possible. If form elements cannot be understood without remembering the content of previous form elements, some low-literacy users are likely to misinterpret the form and may enter inaccurate information.

## Make text legible

- Use a large type size for content and navigation (14 points or larger)
- Allow users to resize all text
- Provide strong contrast between text and background

## Make text simple and direct

**Put the most important information at the beginning**
- Clearly state main ideas in the first sentence of each page and paragraph
- Lower-literacy users stop reading sooner
- Many users choose paragraphs based on perceivedrelevance of first sentence
- Some scan using first sentences rather than headings
- Not all users will see content below the scroll line
**Use familiar words; simple sentences**
**Keep ALL text familiar: navigation, links, content, field labels, instructions**

**Notes:**
We also found success in using sentence and paragraph structures that did not require users to hold the meaning of early clauses or sentences in working memory in order to interpret later text successfully. In other words, we attempted to write text that did not place large demands on users’ working memory.Previous research has also indicated that scanning is hard for lower-literacy users (Summers and Summers 2005). 
Reading itself takes a great deal of concentration and effort. Users can’t grasp the structure of the page or form at a glance by reading headings and subheadings. 

## Rheumatoid arthritis (12th grade level)

- Unlike osteoarthritis, which is limited to the joints, adult rheumatoid arthritis can affect the entire body.  Typically, the first symptoms of rheumatoid arthritis are fatigue, soreness, stiffness, and aching.  The wrists, hands, and feet tend to be most affected, but the elbows, shoulders, neck, knees, hips, and ankles can become painful as well.
- Rheumatoid arthritis is thought to be an autoimmune disease, meaning that the body's own immune system attacks the joint.  The resulting inflammation causes the characteristic pain, stiffness, swelling, warmth, and redness.  The affected joint may also lose its shape, resulting in a loss of normal movement.
- In adult rheumatoid arthritis, symptoms can appear and disappear repeatedly over time.  In some people, rheumatoid arthritis may affect other parts of the body in addition to the joints, including the blood, the lungs, and the heart.  People with rheumatoid arthritis may also suffer from appetite loss, fever, and lack of energy, and lumps of tissue may form under the skin.
- (from _[http://www.bextra.com/rheumatoid_arthritis-54.asp](http://www.bextra.com/rheumatoid_arthritis-54.asp)__)_

## Rheumatoid arthritis (8th grade level)

- Some forms of arthritis only affect your joints. But rheumatoid arthritis can affect your whole body.
- The first symptoms of rheumatoid arthritis are being tired, sore, stiff, and aching. You may notice these symptoms most in your wrists, hands, and feet. But your elbows, shoulders, neck, knees, and hips may also become painful. In some people, rheumatoid arthritis can also affect the blood, the lungs, and the heart.  People with rheumatoid arthritis may also lose their appetite or have a fever. Lumps of tissue may form under the skin.
- Your symptoms may appear and disappear again and again.
- Some scientists think that rheumatoid arthritis is caused by your body’s own immune system attacking your joints. The inflammation caused by this attack creates pain, stiffness, swelling, warmth, and redness.  The joint may also lose its shape. It may become harder for the joint to move normally.
- (Note—all the info about symptoms now appears together.)

## Special case: Make consent options easy to understand and use

- Make consent options clear and simple
- Default to the lowest level of consent
- Confirm user’s consent choices on the confirmation page and allow them to alter their selections

**Wants “no mail”**

**Notes:**
Observation: Feeling “tricked” over privacy and consent issues
Most participants in the study had prior experience with feeling “tricked” into signing up for services/newsletters that they did not want. Some participants exhibited distrust and reluctance to enter personal information. On most sites, the privacy options were explained in relatively complicated language, which resulted in inaccurate selections. 

## Basic design principles for forms

- Help users know what to do
- Getting started
- Moving through the form—create a linear path
- Understanding instructions
- Help users understand the results of their actions
- Understanding feedback
**Fixing errors**
- Knowing when they’re finished

## Errors: Prevention and Recovery 

## Prevent errors

- Use the visual design of fields to help guide user input;
- Match field size to expected input for fields such as phone numbers, zip codes, dates (_Phone number_)
- Make fields large enough for expected data such as email addresses (_Email “won’t fit”_ )
- If users must select among related choices, use visual design to emphasize the relationship among the options:
- Keep the options short
- Visually group options
- Separate options from other content by indenting them
- Use radio buttons if appropriate.

**Notes:**
Observation: Field length and display positioning as visual cues
Field length can be an important supplemental clue about expected input for users with lower literacy skills. Fixed field lengths can also help users notice and avoid input errors. If fields weren’t large enough for the expected input, such as email addresses, some users experienced anxiety. Users also had difficulty identifying and correcting errors when fields were short and they couldn’t see all the data that had been entered.
Users with lower literacy skills were generally more successful in navigating through fields that were displayed vertically rather than horizontally. However, fields that users saw as closely linked worked well when displayed horizontally.

## Accept multiple forms of data when possible

- Accept multiple formats for data such as months (1 or 01) or height in feet (5 or 5’) (_Height in feet and inches_)
- Don’t make text fields case-sensitive (Caps or no caps)
- Don’t verify city names (_Abbreviations_)

## Make clickable targets large and don’t use dropdowns

- Replace dropdown menus with radio buttons, checkboxes, or data entry fields
- Make radio buttons and checkboxes large and the text associated with them clickable

_**Input mistakes **_

_**Backspace and browser errors **_

- Some users have mobility issues that make dropdowns challenging.  Dropdowns that require scrolling are especially problematic.

## Help users recover from errors by maintaining a linear path

- Display fields that need correction by themselves on a new page
- (_City error not found_)
- (_Walmart errors not found_)
- (_NYT errors found _)
- Provide error messages just above the relevant field
- Make them stand out visually
- Provide clear, simple instructions for correcting user input

**Notes:**
Observation: Difficulty finding and processing error messages
At-risk users had trouble noticing and processing error messages. Unfortunately, they were also more likely to make errors because they didn’t always know the standard formats for entering items such as phone numbers. Eyetracking showed that users sometimes didn’t find error messages, sometimes looked at them without reading them, and sometimes read them without understanding them.

## Display only the fields that need correction on a new page

## Write clear, helpful error messages

- Please double-check your email address
- Make sure you've entered everything, including the @ sign.
- Make sure that you've used a period (.) instead of a comma(,).
- Make sure there are no spaces.
- For example, smith@yahoo.com

## Basic design principles for forms

- Help users know what to do
- Getting started
- Moving through the form—create a linear path
- Understanding instructions
- Help users understand the results of their actions
- Understanding feedback
- Fixing errors
**Knowing when they’re finished**

## Help users know when they’re finished

- Provide a clear confirmation screen
- Keep text short and simple
- Use lots of white space
- Allow users to alter their choices (if possible)
- Help users know what to do next

## Review: Basic design principles for forms

- Help users know what to do
- Getting started
- Moving through the form—create a linear path
- Understanding instructions
- Help users understand the results of their actions
- Understanding feedback
- Fixing errors
- Knowing when they’re finished
- Questions???