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 they 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.

We were not sure if the ever-present purring problem was physical or programmatic, so we checked out some of the physical things first: Cables snugly connected? Batteries strong enough? We tried swapping in a different light sensor. Next we moved on to programmatic debugging. We eliminated the additional set of blocks (program) to see if that was part of the problem. Still the cat purred as soon as we turned it on. We tried a different variable (the input of touch instead of brigthness). This time it recognized the sensor and did what we intended: It did nothing until we pressed the button on the touch sensor, at which time it purred. (I realize there’s no recognizable cat here: imagine a felt thing with ears, eyes, and whiskers with the PicoCricket parts hidden inside.)

Next we tried going back to the original program, but this time testing for "dark" instead of "brightness less than 20." Perhaps the way we were using brightness was faulty. Alas, dark also did not work: the cricket purred as soon as it was switched on.

The question of what the light sensor measures was now paramount. If we were working on a screen, I would output as much dynamically generated information as possible. This was the key. We added a "display brightness" command to the program. It turns out that the fluorescent light in our living room rates a brightness of only 3 or 4 on the display. The cat purred right away when the test was "brightness less than 20" because it was indeed less than 20. Covering the sensor with our hands, we found that "dark" is triggered by a brightness rating of 3 or lower. So the program and our sensors were working; we just needed to change the brightness test to "brightness less than 2" in order to have consistent control over when our cat purrred.

I loved how intrigued the kids were (both at home at at the local tween center where students I work with did an outreach activity with the PicoCrickets). The crickets were developed at the MIT Media Lab to engage young people in computing through art and storytelling. Scratch is a programming app (animation, games, art, music) from MIT that kids can download (free), create stuff with and then upload to share. Scratch uses a similar graphical interface with snapping blocks like the ones seen on this page. Storytelling Alice (from Carnegie Mellon student Caitlin Kelleher) is a "programming environment designed to motivate a broad spectrum of middle school students (particularly girls) to learn to program computers through creating short 3D animated movies." The National Center for Women in IT (NCWIT) offers Outreach in a Box kits to help people get started doing small outreach projects to get young girls interested in computing. Time to do some outreach!

While the Facebook timesink is beloved for the community and connections it helps us maintain, the constant vacuous quizzes are a vexing reminder of its lack of avenues for creativity. Wesch noted that “We are most creative when we let go of identity.” Demonstrating identity is one of the strongest intrinsic values of most social networking sites (SNSs). In creativity-focused sites (deviantArt, Flickr, MySpace) pseudonyms (an alternate persona or ‘alt’) are more common than on sites where real identity is the main focus (e.g. LinkedIn, Facebook). Social networking sites also must negotiate a balance between enforcing social norms and supporting individual freedom.

Looking at SNSs on a spectrum of creativity and identity crossed with a spectrum of individual freedom and social norms makes me optimistic that creativity-related features are possible in communities that have room for social norms. Facebook has many users who have work posted on deviantArt, Flickr, Slideshare, YouTube and other creativity-focused SNSs. Many of these users have joined the artistic communities for the feedback and inspiration they get there, not necessarily because of a desire for anonymity. Younger users tend to be less inhibited about sharing their creative work. We need (good) apps that make it possible to bring our content in from disparate sites. Gavin Bell, in Disintegration of Persistence of Identity at the online HEAD conference, said we need to create ways to see the “larger picture of identity, not just the last 15 things about a person.” We need to create mechanisms for coherence rather than chaos and fragmentation.

So aside from fostering creativity, what are other characteristics of communities we want to create? Priority must be given to the values that meet the goals of the intended users. Here are some characteristics for consideration:

• Diverse
• Welcoming
• Democratic. Striving for balance between individual freedom and social norms.
• Creativity fostering
• Encouraging
• Balance between collaboration and competition
• Balance between open and closed—Some communities derive their value from shared memory and the intimacy of small numbers. In other cases this is only a value for selected communication instances.
• Safe—safe for debate, sharing opinions, safe to be snarky (varies by community)
• Fun
• Respectful
• Successful communication
• A place and role for everyone
• Accountability
• Connection
• Data-rich, informed
• Self-organizing
• Humorous, playful
• Learning opportunities
• Inspiring

What features can we include in our SNSs that encourage particular values?

An SNS that values learning, successful communication, and being a safe zone might offer a social cue feature (a space bubble warning, per my 10-year-old) that community members can use to indicate why a comment or post might need rethinking. The intention would be for the recipient to learn why what they posted made someone else uncomfortable. Such cues should be anonymous: an expression of someone’s feelings and not a source for the debate that can arise if the source is known. (If someone repeatedly gives space bubble warnings to another person, they should get a friendly suggestion to consider limiting their exposure to the person who so frequently offends them.) Space bubble warnings should be private, meaning only visible to the recipient. They are not intended as crowd-sourcing feedback where momentum is built. In this case there would be greater value in multiple responses that were generated independently. Space Bubble Warnings might include options like:

• TMI (too much information)
• TLI (too little information)
• Harsh
• A tad creepy
• In someone else’s space
• Not so appropriate here
• Interpretation too literal

And, sure, it would be good to put in place a mechanism for sussing out trolls offering disingenuous social cues, perhaps based on frequency, along with a mechanism for people to turn off visibility of cues they receive. However, turning off visibility should not prevent others from offering the cue. The ability to offer a never-to-be-seen cue still may offer a satisfying experience for the person who wanted to indicate they didn’t like something.

The feature could go further and implement selective invisibility, making comments with many social cues become invisible to people other than the author. According to Wired magazine, Disqus does this with comments that get many negative ratings, but they don’t tell the author. In their case, the goal is not education, but to give someone less attention in the hopes that they will go away. In the case here, where the goal is education and improved communication, the author would be told that their comment is being made invisible because it made too many people uncomfortable.

How about a self-regulated impulsivity setting? This might be a good feature for SNSs that strive to be welcoming safe zones that foster successful communication. If I know I tend to post responses quickly and regret them later, I might benefit from a delay-post option that always delays posting for an amount of time I choose, or allows a per-post option of delayed posting to allow for retraction before publication. (This is a bit like Google Labs’ “mail goggles” that require a successful solution to a math problem before sending emails written after 11:00 pm.)

There is no single kind of community we need to identify. We need to ensure that our experience design process incorporates assessing the kinds of community values a client wants to sustain.

1. Be a strong persuader
2. Be able to form and articulate opinions quickly, and believe in those opinions
3. Write

On the final afternoon of the conference, Young’s encouragement to nurture confidence was echoed by Whitney Hess’ inspirational presentation, Evangelizing All of Us: You Can’t Change the World if No One Knows Your Name. Hess challenged the non-bloggers in the room to talk with her about why they are not publishing their writing.

I imagined that discussion, and realized that it’s not that I don’t have anything new and useful to say, but rather that I’m out of the habit of critical thought. How dismal. I put a premium on completing tasks, including reading a great deal, but not on taking time to develop my responses to the things I encounter.

Kick-in-the-Pants Plan for Re-engagement in the World of Thought

• Read more. I read blogs across many topics, but not enough books and newspapers these days.
• Write daily. Identify a regular time to think through the things I’m reading and formulate responses, creating a habit of deep critical thought. Such habitual response will result in more frequent publishing but also strengthen my ability to formulate and articulate opinions quickly and to be able to explain and stand by those opinions. My often difficult-to-populate list of potential blog topics would probably fill itself if I did these two things. Which will require viewing of fewer tv crime dramas, but that would support local beautification efforts in my house.
• Quiet the knee-jerk elimination of ideas that are not completely new. (I’ve almost ditched this post three times already.)

Hess generously promised that everyone in the room has talent, and given that, the differentiator between being a no-name and being a super-star is practice. She assured, “You have something that no one else knows and it’s deep inside of you.” This resonated. It’s time to mine the deep, apply art to element, and add useful thoughts to the conversations I care about.

So what keeps you from blogging?