Designing for People Who Struggle with Reading and Attention

Imagine you’re almost done with your taxes—but you’re ravenous and the smell of Indian food is wafting through your window, your electricity is randomly turning off for 30-second blips, and the neighbor’s infant is incessantly scream-crying. How successful will you be finishing your taxes? This session included simulations so you can get a sense of reading as a low-decoder, and of completing web-based tasks when you lack the ability to filter out distractions and/or struggle with short-term memory. We observed usability test session video clips of some of the obstacles introduced by interface design choices. You can’t design effectively for low literacy and attention disorders if you don’t understand how these issues affect people as they try to work online. We looked at good and poor design implementations of forms, touch and ajax interactions, search interfaces, and layout choices. I hope the talk helps people improve design for as much as 15% of audiences.

References in Presentation

Baumeister, R. F., & Vohs, K. D. (2004). Handbook of self-regulation: research, theory, and applications. New York: Guilford Press.

CDC Data & Statistics | Feature: Developmental Disabilities Increasing in US. (n.d.). Centers for Disease Control and Prevention. Retrieved May 6, 2012, from http://www.cdc.gov/Features/dsDev_Disabilities/

H.L. Chace, 1956. Anguish Languish. by Prentice-Hall, Inc. Englewood Cliffs, N. J.

Resources in Presentation

Captcha Alternatives

http://www.evengrounds.com/developers/alternatives-to-captcha
http://webaim.org/blog/spam_free_accessible_forms/
http://www.90percentofeverything.com/2011/03/25/fk-captcha/

Writing and Plain Language

http://www.plainlanguage.gov/
http://www.centerforplainlanguage.org/
http://www.centerforplainlanguage.org/aboutpl/guidelines.html
http://www.plainlanguage.gov/howto/wordsuggestions/simplewords.cfm
http://owl.english.purdue.edu/owl/resource/539/1/

Tools mentioned in the presentation

Clickstream Data

• Google Analytics (robust clickstream data)
• Adobe Omniture (robust clickstream data)
• IBM CoreMetrics (robust clickstream data)
• CrazyEgg (heat maps)
• ABTests.com (A/B testing)
• Google Website Optimizer (A/B and multivariate testing)
• Facebook Insights
• Social Bakers Facebook Statistics

Competitive Data

• Google Insights for Search (search term trends)
• Compete.com (competitor search term data)
• Google Keywords Finder Tool

Surveys

• 4Q (customer satisfaction survey)

Resources mentioned in the presentation

• Google Analtyics Event Tracking Guide (tracking non-html events such as PDF downloads and Flash movie plays)
• Search Patterns: Design for Discovery (book by Peter Morville and Jeffrey Callender)

People mentioned in the presentation

Dana Chisnell
@danachis
Co-author: Handbook of Usability Testing
www.usabilityworks.net

Richard Dalton
@mauvyrusset
Presentation: A Practical Guide to Measuring the User Experience

Avinash Kaushik
@avinash
Blog Post: Rethink Web Analytics: Introducing Web Analytics 2.0

Lynne Polischuik
@lynneux
AnalyticsForUX.com

Erin Richey
@erinjo
Presentation: Qualitative / Quantitative – Learn More About Your Users With Web Analytics

Two Banks

I needed to pay some bills. I went to check one account but couldn’t remember the password my husband said he’d changed it to. I clicked the forgot password link and was asked for my email address. I received an email with a link, which took me to a page where I could reset my password. I changed it and got into the account, but unfortunately, did not have enough in that bank account to pay the last bill, due the next day.

So I went to my other bank’s dreaded website, and tried logging in. Firefox prefilled the password for me. “Invalid password.” I rarely know this password as you’re require to change it every two months, and you can not repeat any of your last six passwords.  My fear began to mount. I knew I only had two more tries and then the website would lock me out. There is no forgot password link. If I got locked out, I not only would have to wait for regular business hours, I’d have to physically go to the bank two towns away because they can’t achieve the magic of resetting passwords at the branch in my town. But I had no choice. I had to try to pay the bill. Sure enough. I ended up locked out, and taking a long lunch the next day.

Stories prime the room for conversation

I’ve been reading Whitney Quesenbery and Kevin Brook’s book, Storytelling for User Experience. While the book has useful tips about using data-rich stories throughout design processes, it has made me aware of my need for a bank of stories for persuading people about common user experience pitfalls. When we have a good bank of stories on hand, we can use them to set the scene for exploring solutions. What stories do you use to help people value user control?

1. This wasn’t part of my problem, but it would be helpful to have some contrast between the text and the background. Can you see where it says ‘Add Column?’ It’s very difficult to read.
2. It appears that the only kind of column you can add is a search column.

3. I saw some searches I didn’t remember, but it wasn’t until running the mouse over them that the trash can icon appears.

I clicked it and twice did the wrong thing next:

So what would you click?

4. It seems obvious to me now that this is a confirm-deletion state: The green check-mark is a confirmation that you want to delete the saved search. Nevertheless, I chose the ‘X’ twice. I think the problem with the check-mark is there’s no visible question asking “Do you really want to delete this search?” Adding “Delete?” to the left of the check-mark and red X would probably be sufficient.

Back to the original goal: Finding my missing DMs. As I was writing up my support ticket, I looked at the dialog box and something about all that black space in the column around ‘Search’ made me move the cursor there.

5. Can you see the little arrow there? That’s the affordance you get once you hover in the black space, inviting you to click. Easy to miss.

If you do hover, see the arrow and click–success!

So how about it, TweetDeck? Add some more visibility to these options in the next release? Perhaps grayscale options until they have focus?

As a lone UX’er (for the most part) in my job, I relish the chance to learn from fellow user experience folks face-to-face. I’ll kick that off with Dan Saffer’s Brainstorming and Design Principles. There are quite a few brainstorming techniques in Saffer’s book Designing for Interaction that I have not tried, and would love to see a good brainstorm leader put into action. For instance, there’s the ‘Force Fit,’ where you “distill a problem to two words in opposition, then put those words together into a phrase.” The idea is to then think about what exists in the world that embodies the phrase and apply it to the project for inspiration. I also could use some guidance when it comes to organizing concept drawings: when to try for a 2×2, grid alternatives, etc.

I hope the morning session doesn’t wear me out before The Right Way to Wireframe, with Will Evans, Fred Beecher, Todd Zaki Warfel, and Russ Unger. I’m primarily a paper-to-html girl, with more and more 8Shapes Unify these days, though I’ve spent too little time with Axure and OmniGraffle. This session will get participants working in teams with different tools to address a local business problem. We’ll see how the tools affect ideation, and have a few hours of designing together. Sweet. I expect to laugh most of the way through and hope the party continues afterward.

There will be a UX Book Club session discussing Saffer’s book as well as Jon Kolko’s Thoughts on Interaction Design. (I have the book but need to hurry up and read it!) I coordinate UX Book Club Brattleboro, here in southern Vermont, but we’ve had low turnout. I hope to get some ideas about drumming up interest. Kolko’s giving a keynote on interaction design’s role in shaping culture, and his take on “three fundamental problems: a lack of quality, a lack of competent leadership, and a misappropriation of our skills.”

Some of the sessions I’m most looking forward to include: Liz Danzico (Frames: Notes on Improvisation and Design), Chris Fahey (The Human Interface (or: Why Products are People, Too)), and Livia Labate (talking about measuring UX success, something I’m particularly focused on these days). I’m hoping there’s a Deus Ex Machina moment and Fahey & Labate’s sessions get moved to separate time slots. Cindy Chastain gets raves for her storytelling and experience themes workshops, and I missed her speak at the 2009 IASummit. Though if you’re attending, I highly recommend Peter Morville’s Future of Search. I was fortunate to attend his terrific UIE Virtual Seminar last week. Morville got us thinking about how we facilitate fluid movement between searching and browsing, and how we implement search to help people find what they’re looking for & discover what they didn’t know existed. He encouraged that: “Good search requires a telescope to look ahead, a microscope for obsessive attention to detail, and a kaleidoscope to blend patterns.”

There’s a session, Use of Virtual Worlds Among People with Disabilities (Kel Smith) that intrigues me, and I’ll be participating in Dan Willis and Donna Spencer’s Visual Thinker’s Pictionary. Will you be there? What are you looking forward to?

I’m staying through Monday, with full expectations of a superbowl party. Don’t let me down, people.

Read this book if you present at conferences, pitch your ideas, your products, or your firm. It’s a manual for being prepared and engaging. (It is not an in-depth discussion of rhetorical styles nor presentation slides; for these Berkun refers the reader elsewhere). The book offers many useful suggestions for conference hosts as well.

The central tenet of the book is that successful public speaking requires serious thinking. The more you’ve thought through your ideas, the more confident you will be in your ability to discuss them, even through technical glitches and difficult audience questions.

I look forward to using Berkun’s suggestions for getting started on new presentations. He offers a fill-in-the-blank list for writing a strong title and brainstorming ideas for inclusion. While he’s not particularly moved by the utility of concept maps or storyboards, Berkun suggests that whatever you use to get there, ultimately you need to end up with an outline of basic points. The information architect in me always starts brainstorming points on index cards, for easiest sorting, reorganizing and refining.

“Work hard on transitions between slides and points.” Amen. I’ve committed to doing an audio recording before all presentations. I started doing so in order to make it available online immediately after presenting, for the selfish reason that the slides would most likely be shared while still on people’s minds. I’ve continued to do so because it forces me to get those transitions correct. If the flow between slides or points is not there, it’s a good sign I have not spent enough time on organization, or that something needs to be removed. Berkun shares techniques for maintaining control over the pace and the flow of a talk, in order to keep your audience engaged.

The book includes a thorough review of things to do before the presentation, including questions to ask the host, rehearsal, best room types, best clothes for lapel mics (if you’re a guy), and how to check out the venue on arrival to ensure problems are addressed. Berkun entertains with many stories of awkward situations and weaves in suggestions for recognizing and addressing problems mid-stream, as well as ways to avoid pitfalls in the first place.

“Clear ideas and strong points are what people remember.” Berkun’s notes about concise, memorable statements call to mind the excellent book Made to Stick: Why Some Ideas Survive and Others Die (Heath & Heath), which appeared as #4 in the Confession’s ranked bibliography. He discusses making use of silence and intonation, and avoiding what Heath and Heath call the curse of knowledge, encouraging us to “emphasize key points the audience should notice or understand.” Both books emphasize the power of storytelling to make people care and remember your ideas.

I enjoyed the ideas shared for involving the audience. Berkun suggests “resetting” the audience’s attention every ten minutes. There is nothing like eliciting participation to get people fully engaged. My work team has been using multiple-choice pop quizzes lately, with audience members volunteering to explain their answers/guesses. What are your favorite ways to involve the audience?

The book’s venue-related advice will be useful to conference hosts, including: controlling environmental distractions, providing timing queues, and encouraging people to move to the center front to create good energy in support of the speaker. One of my favorite parts of the book is the suggestion list for good session evaluation questions, which largely evaluate the extent to which participants think they will be able to use what they learned. Host venues can help by ensuring that compiled evaluation data gets to the presenter. Berkun suggests providing an email list so the speaker can follow up, such as by asking, “Now that you’re back at work, do you have any new questions?” (Twitter would serve well for this for some audiences.)

Berkun’s interest in improving speaking is infectious. He suggests we probe for more information when receiving a compliment after speaking: “Thanks, but how could I have made it better?” I missed a recent Boston opportunity to see Scott speak, but hope to catch a talk in the coming year.

Update 1/5/10: Improv Class

After reading the book, upon Berkun’s suggestion, I resolved to take an improv class in 2010. I thought this was my least convincing resolution of the year, but five days in, I registered at the local theater.

I heartily recommend Luke Wroblewski’s Web Form Design (May, 2008) for people who create web forms and for those who hire others to create them. The book is structured in three parts: form structure, form elements, and form interaction, and includes a plethora of real-world examples. Whether you’re a novice or expert, walking through Wroblewski’s overview of forms-related issues will provoke your thinking about design choices and their impact. Luke is Chief Design Architect at Yahoo! and blogs at Functioning Form.

Below are some of my thoughts and recommendations in response to the book.

Deepen your understanding of other people’s experiences

Who are we to not bother to ensure the resources we create are universally usable? As you are thinking about making better web forms, deepen your understanding of how design choices affect people with disabilities.

Peter Wallack wrote an accessibility piece for Web Form Design, offering a list of the “most important” accessibility requirements to consider. He reminds us that it is up to website designers to ensure their forms are accessible to millions of people with physical and cognitive disabilities.

Wallack urges us above all, “Test your page with your intended users, including those who have disabilities.” There is broad diversity among people with disabilities and their approaches to using technology. Shawn Lawton Henry offers suggestions for recruiting participants with disabilities in her book Just Ask: Integrating Accessibility Throughout Design.

Check out this YouTube accessibility playlist of people talking about their disabilities, demonstrating using a variety of assistive technologies, and speaking of their experience using the internet:

“…I feel often ashamed because I can’t use it as well and I’m not that old; I’m quite young… And it becomes a battle and it should be a level playing field. The web should have created a level playing field for visually impaired people and disabled people as a whole, and what I feel sometimes the web does is it actually blocks people out and it isolates you more.”
Kirin Saeed, a screen reader user discussing her experience using the web (link: youtube video).

As web designers and developers, we all make things for people to use. If you are not working on making your resources accessible, you are making a choice to block some people out. This can cost you and your clients or your organization money. And it causes great frustration for real people. When we talk about accessible, or universally usable forms, we’re talking about Kirin, (above). We’re talking about Jessica Cox, the pilot who has no arms who flies a single jet engine using foot controls. She recently flew a plane from Arizona to Wisconsin, but she might not be able to fill out your web form because you didn’t bother to make it accessible to alternative input devices. We’re talking about friends with muscular sclerosis who must use extreme effort to control a mouse, with minimal success. We’re talking about brilliant co-workers who have non-verbal learning disabilities and will spend inordinate amounts of time trying to divine what unfamiliar abbreviations, idiomatic expressions, and unclear icons are meant to convey.

In addition to listening to people talk about their experiences, learn to browse your pages with alternative methods. Try listening to your web pages with the web-based screen reader WebAnywhere. (Better still, install the free NVDA screen reader (Windows only) and learn how to test with NVDA.) Become proficient in keyboard navigating the web. I would bet that if you spend any time moving around a web page with only your tab key, you’ll quickly get a sense of how important it is to maintain (or enhance) the unformatted dotted line box decoration of links when they have focus. As you deepen your understanding, you’re likely to create fewer problems that need fixing.

Why are people filling out your form?

Recently, before giving a presentation I surveyed attendees about their typical workflow. Generally, people described getting fields identified by the client, doing some layout, and testing to ensure it works. Nobody said anything about identifying who will be filling out the form. In Web Form Design, Caroline Jarrett (author of Forms that Work) encourages us to think about people and relationships, and to balance user and business needs.

So what are some things that are helpful to know about how the form will be used? What do people need with them? Where might they be when filling out the form? If they’re on a mobile device, do their needs change? What will they need to do with the transaction in a month? How often will individuals use the form? How will the data be retrieved? What will it be used for? It’s often a big mind-shift for clients to think in terms of the people coming to their forms. It is far more common to be thinking of the data entry you will do in order to complete your own tasks, than to consider the experience of the people filling in the forms. Addressing recovery issues, such as what happens if a person is interrupted or needs information they don’t have with them at the moment will make your form more usable. In the last few weeks, I have twice purchased things over the internet on my phone. Neither website sent me an email copy of my receipt. If the designers had considered that I might be purchasing something for my business or that I would be on a mobile device, I would be able to supply a receipt to my accounts payable office. Another important consideration is the frequency with which people will use a form: Wroblewski points out the tradeoff between making forms highly efficient versus encouraging well thought-through answers.

Measuring Usability

Web Form Design includes an overview of measuring how effective, efficient, and satisfying forms are to use, by assessing things like successful completion, abandoned forms, completion time, number of help requests, number of errors, satisfaction after submitting the form, and common issues in call center logs. Throughout the book, Wroblewski points to results of various usability studies, in support of various recommendations for layout of forms, alignment of labels, use of progress meters, etc.

Social Rules for Forms

Wroblewski underscores the notion that forms are conversations, and need to be approachable and respectful. Our forms are stand-ins for our voice. They are what makes the web two-way. Wroblewski notes that forms stand between people and productivity and they help us close deals. Michael Angeles said, “After all, if software is to be social, then it may as well learn social skills.”

What face-to-face social interaction rules should our forms follow? Only ask what you need to know. (No impertinent questions! If you and I had just met, I wouldn’t ask you for your street address unless you asked me to send you something.) Be friendly.

Avoid speaking for your site visitors. If forms are a conversations, the questions are the website’s side of the conversation, and the form inputs are the other side. Phrase your questions accordingly. Many forms, instead of asking questions, speak in the voice of the user. For example, field labels such as: “My Address.” “Sign me up for a trial now.” “Please contact me with more information.” Speaking in the voice of the user removes the opportunity to have a conversation with the person. You also run the risk of the person reacting negatively to something being said for them. (I’ll report back if I get a chance to test this with people.)

Build User Confidence

Here’s a picture from a gas pump. “Insert Card Fully. Withdraw card quickly.” What response do you have when you encounter this? What’s going to happen if I fail to remove the card quickly enough? Perhaps not everyone gets panicky when they encounter these signs. Nevertheless, we don’t want to create that unsure feeling of “What if I mess up?” for people filling out our web forms. Our designs should reassure the user that they have control over the form in as many ways as possible.

Wroblewski suggests form should have reduced noise and contrast. He suggests calling to mind soothing rooms and a friendly smile. I’ll go a step further and suggest you think of Mister Rogers. Remember when he promised we would never, ever go down the bathtub drain? Our forms could strive to be that reassuring. Mister Rogers, or someone you know, can act as your Reassurance Genie. When you create a form, do a ‘reassurance genie’ test as part of quality assurance. Call your reassurance genie to mind. What would they think of your error messages? Of your confirmation screen?

Provide a clear path to completion

The goal of our forms design, well-stated by Wroblewski, is to provide a clear path to completion. The decision to do a single page versus multiple pages is not clear-cut. The drawback of multiple pages on an unfamiliar site is a lack of trust that people will be able to go back and forth between pages if needed without losing data. We must do everything we can to facilitate recovery and reassure users that they will be able to change their entries. When a form is rather long, and there are logical breaks, one might decide to do a paginated form, either with links such as ‘Continue’ and ‘Go Back’ or as a series of tabs. Progress meters indicate stages of multi-page forms. Wroblewski describes the essential aspects of successful progress meters: They should explain the scope of the form (that is, how many steps or pages), they should show your progress and location (that is, where are you along the path to completion), and they should accurately reflect the actual steps. It is critical that people can go back and forth through pages without losing their data, and with the ability to make changes.

Form Labels and Fitts

Web Form Design includes a chapter on labels (the text associated with a form field). Wroblewski compares various layouts of labels and their fields, answering questions such as which layout results in the speediest completion, which requires the least effort, and which scales best to accommodate growing text. Luke covers some of this in his slides Best Practices for Form Design on slideshare.net.

WFD does not touch on Fitts’s Law and coding form labels and input fields such that they are explicitly associated with each other in the code behind the page.

Fitts’s Law states, “The time to acquire a target is a function of the distance to and size of the target.” The further away a target is, the larger it needs to be to maintain access speed. Bigger things are easier to hit. This seems obvious as I say it, but do you take this into account when you create a form? Think about toolbar icons as an example. Some toolbars offer the option of displaying a label below each tool. Labeled tools can be accessed faster because the label becomes part of the target. The target is therefore bigger. Bigger targets, all else being equal, can always be accessed faster. When labels are not used, the tool icons crowd together, and are easier to miss. When targets are large, you don’t have to slow down so as not to overshoot the target.

Label tags are the HTML tags used in the code behind the form. Label tags affect how much is clickable on a form. When the label tag is used, the button and the text all become clickable. (In the example on the left, the green areas are clickable. Making the target area much larger will improve completion time (efficiency) and make your forms easier to use. Labels provide this benefit for checkboxes, text boxes, and other form fields.

Form labels are crucial for accessibility. Using a label explicitly (that is, using the ‘for’ attribute to refer to a unique ‘id’) tells a screen reader which label is associated with which input field. While the input field has focus (that is, while it is selected), the browser will recognize the connection between the label and the input. In the case shown in the image, a screen reader will speak, “Mushrooms Radio Button not checked. One of three.” Any time this radio button has focus, it will indicate it is the mushrooms option and how many other options there are. If the code does not explicitly make the association of the label and the input, the screen reader will read “Radio button.” The screen reader will then say the text “Mushrooms” and the user will have to tab backwards in the form to select the radio button, never being sure they’ve actually selected the radio button they intended to select. Roger Hudson offers details about how screen readers read labels and form fields.

Avoid placing labels inside inputs

Wroblewski talks about some of the pitfalls of placing labels inside inputs, a technique used to reduce impact on screen real estate. Sometimes the text inside the input is a secondary prompt of what to enter in addition to an actual label (as in the example on the left). Other times it is the only information indicating what the field is for. Often labels inside inputs are light gray to distinguish them from real answers. Frequently the light gray provides little contrast to make it readable by anyone with reading difficulties or trouble distinguishing color. The common behavior of the text inside the input is that it goes away when the input receives focus and the person enters any information. What if you click on the label, hit the spacebar, and the phone rings. When you come back, will you know what the field was for? Will you need to refresh and lose the other data you had already entered? A person who is blind may tab through all of the fields to see if they’re willing to fill out the form. For any fields where they start typing, when they go back through the form to fully fill it out, the labels will be gone. What if the person entered something unreadable, for example their fingers were shifted on their keyboard and they hadn’t noticed? How will you know what the question was? What if you’re on a touch device and you fat-finger the field before you read it? Labels are generally put inside inputs in order to create a cleaner-looking field, or reduce the vertical length of the form. However, the usability trade off is not worth the gain. Regarding color contrast, I recommend Gez Lemon’s Firefox Extension, the Colour Contrast Analyser. It provides a report of all of the color contrast combinations in a page, indicating which pass contrast validation tests and which do not.

Captcha Alternatives

Captcha stands for “Completely Automated Public Turing test to tell Computers and Humans Apart.” This screen shot is from Google’s account creation page. It shows a very difficult-to-read captcha word that must be typed in the field below. Sometimes, these at least offer the ability to request a new word, but not here. One could refresh the page repeatedly until getting a legible ‘word,’ but you would have to re-enter the information you had already filled in. If you have reading or vision difficulties, you can click on the wheelchair. What do you think happens if you click on the wheelchair? It plays audio of the letters. I don’t know about you, but a wheelchair doesn’t make me think of audio (or reading difficulty for that matter.) The audio is not helpful if I’m in a situation where I need my device to be silent. As a spam-reducing alternative to captcha, consider using CSS to hide a form field with an empty value. You can then use server-side form validation to check to see if a spam bot has unwittingly filled in this field. You can see an example of this looking at the code on an interest form. WebAIM offers instructions on spam-free accessible forms.

Dismissable error messages trip people up

Beware of dismissable error messages, like the one depicted in this screen shot. This is an example where you submit a form and a box appears with information about errors that need to be fixed. It may be worded in a very friendly matter. While most modern screen readers can read such an alert message, many people struggle with short-term memory issues. In order to fix the form errors, you must dismiss the alert message, losing your instructions about what needs fixing. This type of alert is the default for things like the Adobe Cold Fusion <cfform> tag, which is designed to reduce the effort of people creating web forms.  People will be far more able to recover from their errors when the system feedback (such as error messages) is persistently available. Web Form Design includes many examples of error and success messages, as well as validation treatments before form submission.

Don’t forget the confirmation screen

Confirmation screens are an important part of the conversation between the form and the user. Too often forms say thank you and don’t bother with any detail. Include information about what will happen next with regard to the transaction. (Only offer a promise you can keep!) Show the person the information they submitted. It is very reassuring to the person submitting the information and it provides a means for them to check their submission. Provide your contact information: how can they get in touch if they made an error. If they can not contact you directly, give information about how they can adjust their submission. You can also use this opportunity to keep them on your site by providing links that may be useful based on the form they just submitted, or as Wroblewski puts it: encourage more progress.

11/2009 narrated presentation: Universally Usable Web Forms

I was frustrated, to say the least, by how difficult it was to find a solution. There were many months-old unanswered pleas on the wp forums.

I cannot figure out the hackers’ revenue model. Repeatedly over the course of two weeks, my husband’s site became unreliable to access. The symptoms were varied, including:

1. The site never loads
2. Loading stalls and then redirects to a virus scanner software
3. The site is redirected to a Harry Potter related website
4. The site takes a long time to load and the source code shows approximately 30 links to enhancement-related drugs or movies. Each time the links are to a new single site, where the drug or movie is a variable at the end of the URL. The inserted code has a style of display:none; so it’s not visible to the naked eye. Nevertheless, it is available to search bots.

For the first few days, the injection would take place in the form of #4 (invisible links) at the same time of day. Replacing the theme’s header.php erased the problematic code, returning the site to normal for the day. (I read of other situations where the injection is in the footer.) The ftp logs showed that /wp-content/themes/mytheme/header.php file was changed.

After the first few days, replacing header.php no longer solved the problem, and the injection switched over to being an evil redirect, taking our visitors elsewhere.

Location of the Bad Code

Eventually I found bad code in two files in /wp-content/uploads/2009/01/: topper.php and wp-pass.php. At least I think I did. It hasn’t come back in five days. The actual code was a base64-encoded 44,300+ character string starting with: <?php $o=”QAE…(44,300 characters)…”  ==”));return;?> This is apparently a variation on the ‘Goro’ hack, which Roberto Galoppini explains calls an external javascript code when decoded with base64_decode. My impression is that this bad code gets uploaded in any number of directories.

Steps to Harden Off the WP install and Look for the Problem

It took a while to eliminate the pernicious code. First steps included:

1. Update WordPress. (I keep mine up-to-date, so this wasn’t the issue, but it’s a good first step if you’re facing this situation.)
2. Change the ftp password, the wp-admin password (strong passwords, different from each other)
3. Delete the wp-admin user ‘admin.’ (Create a new admin account and assign all of the posts, if needed, to this account.)
4. Disable any plugins that ping updates to sites like Google, Technorati, etc. until the problem is solved. (You don’t want to call their attention to the new spam.)
5. Remove any spammy looking registered users on the site. (They shouldn’t be able to do anything, but it seems like a good precaution.)
6. Move wp-config.php to the directory directly above WordPress install. (It will only work if it is a single directory above its original home.) This file stores the database username and password. [I assume this was the file that made the breach possible, but I don’t know for sure.]
7. Install the plugin SEO Egghead’s WordPress-firewall
8. Make sure there is a blank index.html file in the wp-content/plugins/ directory
9. Per Chris London’s spam injection advice: Protect the wp-config.php file further by adding the following to your .htaccess file:
   1. # protect wpconfig.php
   2. <files wp-config.php>
   3. order allow,deny
   4. deny from all
   5. </files>
10. Hide your wordpress version number (instructions via WpRecipes)
    In your theme’s functions.php file, add the following line:
    remove_action(‘wp_head’, ‘wp_generator’);
11. I used the WordPress Admin upgrade tool to reinstall the current wp version. This removed the spam in the code, indicating that the script calling the code was showing up in a new location: a WordPress file and not a theme file.
12. I followed the steps at http://www.teohuiming.name/blog/wordpress-exploit (reviewing db tables for potentially problematic entries in the options table, as well as *_(old|new).(php|giff|pngg) files in the directory structure). I could have had success in this step if I scoured through the wp-content/uploads/ folders for not just the file names and extensions listed but also for files that did looked suspect (topper.php and wp-pass.php, the culprits, definitely would have gotten my attention).
13. Finally, I did a fresh install of WordPress, and all plugins. A new database was created, as part of the process. I imported the old data. This potentially could bring the spam back in, but was worth at least a try to me. The site has a lot of photos managed through the wp plugin NextGEN Gallery. Reloading all of the photos would have been very time-consuming. The theme files and uploads were ftp’ed to the server. It was at this point that I scoured through the uploads folders and found the suspect files.

It’s been almost two weeks now, with no sign of the injection. If you’re dealing with this: best wishes. If your site’s Google search ranking is suffering because of the spam links, see instructions for requesting reconsideration.

In May, Twitscoop launched changes, becoming a full-fledged Twitter client. These changes posed some discoverability issues for me, in part because I was having a broader Twitter search issue. The people at Twitscoop have been great about troubleshooting with me. (They seem genuinely interested in making improvements to their interface, based on some of the public interactions with users on Twitter, their emails with me, and their ‘About’ page.)

I do have a few suggestions that mostly relate to helping users bridge the gap between what they know and what they need to know to make use of the service.

Current Search Screen

Mockup of Redesigned Search Screen:

1. Sign-in Call to Action: Placement and Wording

Describe the service’s benefits near the call to action. The home page explains “Receive, send tweets, and find new friends instantly, without ever reloading your page.” People may arrive on any page, not just the home page. With the current design, you can use the search page without ever realizing that Twitscoop is a full-fledged Twitter client.

The proximity of the sign-in button to the search results seems to imply it is related to the search, almost as if it is an error message. The top right, where there currently is another Twitter sign-in button is a standard location where people look for login. I think either sign-in button color and font treatment works (the Twitter-branded sign-in or the green, larger button). In the redesign mockup, text describes the richer experience available through sign-in. The user gains control over their decision to authorize Twitscoop when the benefits are clearly stated.

I was concerned when I first encountered the command to “Sign in to your twitter account.” Did Twitscoop want me to give them my login information? Fortunately, however, Twitscoop uses OAuth to manage the connection to Twitter. This means that Twitter manages a list of applications that are allowed to access my account and make updates. I can revoke that authorization in my account settings, and I don’t have to give Twitscoop my username and password. Clicking on the “Sign in…” button calls up a twitter authorization screen:

While many people seem to be willing to share their account information across services, a subtle change in language to “Sign in with Twitter” makes a significant difference to security-conscious surfers who might otherwise bail on the site.

2. Which is the active ‘tab’

Twitscoop offers the ability to observe multiple searches in an ongoing fashion, described as ‘tabs.’ These searches are sticky and tied to your login. If you open a search in Firefox and visit Twitscoop later in Internet Explorer, the searches will remain. This is a great way to keep an eye on topics of import to you—your field, your client, your team, etc. In the Twitscoop interface, tab color is the only indicator of the active tab. If you have only two searches going on related topics, or if you have color vision trouble, it is difficult know which is the active search. Carrying through the actual tab metaphor with an outline around the content makes the active tab immediately apparent. Using visual design to provide interface clues offers users reassurance that they will be guided in using the service. In this case, the outline would identify distinct areas of focus.

3. Navigation placement and an FAQ or About page

There’s a very small ‘About’ link at the bottom of the Twitscoop page with some inviting language describing features and goals. Placing an ‘About’ or ‘FAQ’ link in the top navigation will help build the relationship between Twitscoop and its users. It matters to users that Twitscoop is interested in creating a great app and in getting feedback from users.

In the redesign mockup, I moved the navigation links to just above the tweets. The placement may be too tight, but the idea is that the links be proximal to the content that changes. (The ‘Buzzing Right Now’ section remains across pages.) The current link is orange type to indicate it is active (similar to the active search tab). Moving these links addresses the absence of a page title by placing it where we might look for a heading. (Personally, I think the wording shift from ‘Replies’ to ‘Mentions’ makes a great deal of sense, so I recommend making that change as well. This is visible to logged in users.)

Go, Twitscoop.

I look forward to seeing what Twitscoop does in their efforts to become “the best online Twitter client out there.” (Hmnnn… What would an offline Twitter client do?) My #1 feature request would be the ability to find the first instance of a hashtag.

Page Layout

The spread below is my re-do of the Union for Reform Judaism’s introductory materials. (The changes are minor: darker text, a few wording changes, and alignment of the brackets.)

Hebrew has right-to-left orientation, so the right-hand page comes first.

1. Type of service
2. Prayer in Hebrew
3. Name of current prayer
4. Hebrew “Navigation bar” (location of prayer in current section of service)
5. Chatimah (prayer ending)
6. Prayer in transliteration
7. Literal English translation
8. Chatimah (prayer ending)
9. Sources for the prayer
10. Transliterated “Navigation bar” (location of prayer in current section of service)
11. Name of current prayer
12. Chatimah (prayer ending)
13. Contemporary related readings
14. Chatimah (prayer ending)
15. Contemporary commentary and/or traditional sources

Granted the layout does not address the choreography of when to stand, and which lines are repeated multiple times. There’s still some observation and experience needed. I love that the prayer ending is repeated in print after each version of the prayer. At least a few times each service I use the ‘navigation bars’ as I try to locate a prayer in the book.

Now I need to give someone the job of asking people who attend the service to describe their experience using the siddur. I think I’ll be a little busy.