Week 10: My Thoughts on a SpoolCast episode

SpoolCast talked to Luke Wroblewski back in October in an episode titled "Luke Wroblewski and Innovations in Web Input" (transcript available).

As the title suggests, they discussed some of the newer ways forms are handling user input and the newer ways users are able to input data. The main topics in the interview (in order):

• Google Instant Search
• Yahoo's experience with a similar product "Live Search"
• Other sites using different versions of this search
• Input from anywhere
• Ping for iTunes

It's a good interview where many good points are made but there were three that stood out for me.

A feature added to your site should solve your specific problem

Google's Instant Search may be cool and useful but that does not mean that every web site should change their search to do the exact same thing in the exact same way. An instantaneous* response can backfire. The example given in the interview was a form immediately throwing an error when the first character for a user name was entered because 'L is not a user name'.

As a counter-example some registration forms, like the one for Twitter,  put indicators next to the password field indicating their strength. As you type in the password and add in characters that meet the requirements (numbers, symbols, mixed case) the indicator goes from red and 'weak' to green and 'strong'. You know that your password is good enough as you're typing it: not after you've attempted to submit but you're not being interrupted by an error message either.

New features should help the user do what they need to easier and faster without frustrating them. This means doing some research and user-testing even when it's not something you're building from scratch.

Keep It Simple, Silly

Not a new lesson but sites like Facebook and LinkedIn are helping other sites let their users skip the registration process entirely. Services like Facebook Connect lets you log into an entirely different site using your existing account. The third party site avoids losing the user in the registration process, Facebook increases the value of their service to the user, and the user doesn't have to do anything other than log in to use the third party site.

Manage and Meet User Expectations

If Luke Wroblewski's opinion of Ping is typical of the people who used it then it seems that most of the problem was that people got something other than what they expected. Wroblewski was expecting his Ping account to pull information from his iTunes account but it didn't. He was also expecting it to work the way most other social sites do where there is very little limitations on what name or photo you use and no limit to what you can say that you like.

Part of this could have been avoided if people had known that their Ping accounts wouldn't be pre-populated with any data. User expectations can be managed by explaining what a new service will have, do, and be used for when it's announced. Demos are a good idea: they can make it clear what a service can't or won't do. I don't know what Apple did or didn't do with Ping before it was launched so this isn't to say that they didn't do any of this.

But another thing to do is to meet user expectations. I've honestly never heard of a social site or service that required you to not just use your real name but use it exactly how it appears on your credit card. I've also never heard of one that requires you to submit your user image for approval first. That's just odd. If they really didn't want to bother with having moderators check for anything inappropriate they could have just done what AdultSwim did and have a set of images for users to choose from.

This is all just my opinion and certainly not a substitute for listening or reading the interview so check it out if you haven't yet.

*I know people use the term "real time" but it sounds odd to me for anything that doesn't use some kind of alternative timing. We're not talking about an awards show on a 30 second delay or a video game where 3 minutes in real life is an hour in the game. We're talking about web sites. It'd be like getting on a slow elevator and saying, "I wish this elevator could get me to my floor in real time!".

See how that doesn't make sense? Clearly it wouldn't even be an elevator at that point but a teleporter.

Week 6 - Getting Access

All people, regardless of any condition they may have that affects how they use a computer, should be able to use web sites. Poor development and design decisions can prevent that. We should all want to build accessible web sites because it's the right thing to do but that is not enough motivation for everybody. Some people think that making web sites accessible is too much work and not worth the effort. So here are 3 selfish reasons for making sites accessible.

1. It's good business
   19.3% of the United States population in the year 2000 had some kind of disability. 17% of adult Americans report having some hearing loss. While not everyone who falls in the first 19.3% necessarily has a condition that affects how they use the Internet that is still a large number of people to ignore as potential customers. Would you have your sales people refuse to describe a shirt to a blind customer in your store? Then why do that with your web site?
   
   "The ADA prevents that anyway" you say. I say that's a next segue for my next point: not making your site accessible could get you sued. Target ended up settling a lawsuit brought forth by the National Federation of the Blind for 6 million dollars because they were unable to use their site. Target's settlement with the NFB also required that they make the site accessible.
   
   If you don't care about increasing your customer base you should at least care about covering your butt.
   
   
2. One day it could be you
   Think about the amount of time you spend online and all the sites you like to visit. Now think about how you'd feel if you suddenly couldn't use most of those web sites anymore or if the number of sites you could use got smaller over time.
   
   Not everyone who has a disability was born with it. Some people developed impairments with age. Some were caused by injury or illness. You might not care about sites being accessible now but you will when your short term memory won't hold onto which page you just visited, that artsy site becomes harder to read, that episode of your favorite show becomes harder to hear, and moving the mouse gets that much more painful.
   
   Unless you're planning on becoming completely disinterested in the Internet at some point.
   
   It's worth noting that while I keep using the word 'disability' there are things that affect your vision, hearing, cognitive abilities, and/or mobility that aren't considered disabilities, at least not by the general population.
   
   It's also worth noting that you're probably taking advantage of things that done for accessibility already and not just on the web. (Sliding doors anyone?)
   
   
3. Professionalism
   Just like coding to standards, making your sites accessible is just the right way to do it. If you want to be perceived as a professional in the industry then your sites will work for 100% (or as near to that as possible) of the population, not just 80%.
   
   Some of this should happen anyway without the client asking for it, like alternate text. A lot of it will require input and/or permission from the client like the color scheme.
   

These aren't the only reasons but they're the best ones I could think of for anyone for whom appealing to their better nature doesn't work.

Useful Links

W3C Web Accessibility Initiative - "[Develops] strategies, guidelines, and resources to help make the Web accessible to people with disabilities."

United States Section 508 Guidelines - Web sites for federal agencies must follow these guidelines as well as state and local agencies that receive federal money.

WebAIM - Web Accessibility in Mind has a lot of information on the subject like this article on cognitive disabilities and the web but they've also created a tool to help you check that your sites are accessible called WAVE and it's free.

Think Vitamin's Videos on Accessibility - Think Vitamin recently made all of their videos on accessibility free forever.

Vischeck - This site has two useful tools. The first, Vischeck, is a color-blindness simulator that allows you to see what an image or web page looks like for someone with one of three different types of color blindness. The second, Daltonize, alters the colors of an image so that someone with colorblindness can still see the same contrast as in the original image.

Color Scheme Designer - 4th link in the utility navigation at the upper right is Vision Simulation and it has 8 different conditions that affect how someone views color. It's a good way to make sure that your palette has sufficient contrast for those that don't have normal vision (which according to this site is over 10% of the population).

Week 4: Personas

I happened upon this randomly. The Consumerist linked to a comic about e-mail marketing and I found this while browsing the archives. It's a comic created by Brad Colbow for Think Vitamin:

How to Understand Your Users with Personas

Week 3: Web Standards

It is very important to have standards. We have standards of weights and measures. There's agreement on how long a foot is and how much a pound weights. There are industry standards. You don't have to worry about electronic devices only working with one kind of wall outlet (at least not until you go overseas). There's even standards for the weight of yarn.

So why not use standards for the web?

There are already plenty of articles explaining why web standards are good and necessary. The main reasons are:

Maintenance and Production: It is easier and faster, and therefore cheaper, to create a web site that uses standards than to create a site specifically for one browser using proprietary code (or worse, a different site for each browser).

Accessibility: You can make your site more accessible by coding to standards. This is usually stated in reference to disabled users but will also help those hampered by older technology or slow/limited Internet access.

Search Engine Optimization: Other things being equal, a site with valid code is ranked higher by Google than a site with invalid code.

Professionalism and Quality: If you're a web developer writing standard code shows that you know what you're doing. You want to be seen as someone who is current on industry standards, technologies, and best practices. If you own the site then you don't want your site to flat out break in other modern browsers even if it isn't the one most of your target audience.

There are more of course: page weight, re-usability of the code, etc. but these are the reasons I see given the most often. They're also the reasons that both the developer and site owner will care about.

So are there any arguments against using web standards? I didn't really find any articles railing against standards but here are two reasons I've heard not to bother with them.

Tables are easier than using CSS
If browsers would support the multi-column layout module I would just say that this statement is false and move on. But since this is not the case then it may be true in production depending on your comfort level with CSS. But once the site is in maintenance you're in trouble and here's why: the client can't see the table, they only see space.

I can GUARANTEE that eventually the client is going to ask for content to be added someplace that is going to break the template because there is space there. They can't see that putting a wider banner in that cell is going to throw off the spacing for the entire table. They can't see that the change they're requesting is going to require adjusting all of the colspans and rowspans in the table. They only know that they are being quoted/charged an awful lot of money for what looks like a very simple change.

The site has to look exactly the same in every browser so it's OK to make the developer write hacky code.
No.

No, no, no, no, no.

No.

And also no.

I'm going to quote/paraphrase John Allsopp here and say that a site does not have to look exactly the same in multiple browsers because most people don't use different browsers on a regular basis. At worst, for the average non-web designing user, they might be using IE6 at work because they have to and a different browser when they use a mobile device. But no one expects sites to look exactly the same on a mobile device as they do on a computer and since IE6 is not a modern browser there can't be a reasonable expectation for things to even work in it, much less look the same as they would in IE8 or FF 3.x.

Yes, I did say earlier that you don't want your site completely broken browsers other than the one used by the majority of your users but there's a difference between the template being broken and something being 5 pixels farther to the left in IE than it is in FF.

Side Note:
OK, how ridiculous is this? Apple has an HTML5 showcase but blocks you if you try to view the demos in anything other than Safari. *facepalm*
Found via an article in InfoQ.

Communication - Harder Than It Looks

Our professor showed this two minute clip on YouTube of a guy attempting to explain what an Information Architect is and does. It's a funny video. The woman keeps thinking that any other job he mentions in his explanation is what he does until he gives up and says, "Sure, why not?" to her last guess.

But let's be honest here there were problems on both sides of that conversation.

It starts out OK. She asks what he does and he says he's an Information Architect. Most people are after your job title when asking that question so no problem here. But once she asked if he was "like an architect, but" it was clear she had no clue what an IA does. At that point he should have given the simplest and most complete answer possible. Again, I like the one given by the The Information Architecture Institute since it doesn't use any jargon.

Instead, he only gives bits of information that don't really answer the question. She then starts guessing at what he does. When he does explain what an IA does he uses a bunch of terms she doesn't understand. So she guesses again and he gives up.

For her part, it makes absolutely no sense to guess that he does any other job he happens to mention. The "do you work in fashion" part came across like she was purposefully being difficult. However, I'm sure she felt the same about him when he said he isn't a designer and then described his job in terms of designing something.

I bring this up because one of the things that has been brought up multiple times in our classes is that IT communicates poorly with the rest of the business. I think that this works as an example even if he isn't actually in IT.

Week 2: Information Architecture

So, What is It?

The Information Architecture Institute has three definitions for information architecture. For this post this one is the most useful: The art and science of structuring and classifying web sites, intranets and all other organizational information repositories to help people find and manage information.

It's the job of an Information Architect to make sure that the information is arranged and labeled in a web site in a way that makes sense. This refers not just to information on individual pages but to where those pages are located in relation to each other. For example, a bank web site might put checking and savings information on separate pages but could have those pages grouped together under the heading of Deposit Information.

This job is important because if done poorly (or not at all) then visitors to the site won't be able to find what they're looking for. If you have a favorite website that you've never had to use the search engine on then thank the person who took on the role of Information Architect.

Persuasive Information Architecture

So I was looking for a site with some tips for IA. I expected to be writing about findability and/or usability but then I found this: Persuasion and Information Architecture: 5 tips

Even though IA is about organization, usability, and helping the user do what they want it can also help the business get the user to think and do what they want. What's key is that many of the rules for helping the user and helping the business overlap. While there are times where they will conflict, user and business goals are often the same. I want to buy a book from Amazon and Amazon wants me to buy a book.

Amazon prefers that I buy the Kindle and buy Kindle books instead of paperbacks which means that it shows up first in the left hand menu but the site doesn't prevent me from finding other kinds of books. The conflict does not have to be a deal breaker.

If the business doesn't see the value in Information Architecture then describing the benefits in terms of persuasion would be more helpful than talking about usability. When discussing usability you have to explain why it helps the user and why helping the user helps the business. Putting it in terms of persuasion goes straight to business goals. Some businesses may not appreciate how much their needs and customer needs align and this skips having to convince them otherwise.

Design with Intent

This isn't strictly about IA but the article above linked to it and I found it interesting. It's a set of cards with patterns for influencing behavior through design. It says that the Architectural Lens section "can also be applied in interaction and product design, even in software or services". I think I can find an example for each.

Angles
The example given is the sloping top on cigarette bins which prevent people from leaving trash on the lid. This might be stretching it but my example is timeouts for login forms. You don't want users to accidentally leave their login information in a form if they leave without actually submitting it.

Converging & Diverging
This is done on websites all the time with different logins for different types of users: Students vs Teachers, Business vs Consumer banking, and so forth. Business web sites also make sure that you'll end up on the page to purchase their product/service whether you decided to view the demo, view a feature list, or read reviews. All those paths lead to a "Buy Now" page.

Conveyor belts
The web site equivalent would be Quick Links.

Feature deletion
This one is self-explanatory.

Hiding things
Many web sites will put some settings in an Advanced Features section to prevent users from accidentally breaking things.

Mazes
While you shouldn't make your site a maze (unless that's the point) you probably won't get to the free version of a service or product without first seeing the benefits of the paid version.

Pave the cowpaths
Finding the paths users usually follow and making those paths easier is in the definition of Information Architecture.

Positioning
Same as above.

Roadblock
Many of our clients are required by their auditors to warn their users about any link that takes them away from their web site. We sometimes call them speed bumps. For example, take a look at First American Bank and Trust and see what happens if you click on any of the logos at the bottom of the page.

Segmentation & spacing
Monthly upload limits on free accounts, like the free accounts on Flickr.

Simplicity
IA is all about making the most important tasks simple. 1-click ordering on Amazon would be an example of this.

Fall 2010 - Week 1: Interact with Web Standards Chapter Summary

Chapter 5 – Writing for the Web

The chapter begins with how people read websites and how that differs from how people read printed media. We're told what bad and good web writing does with a brief description of SEO. The chapter then gives us a list of tools to organize and style content. A list of web writing tips and tips for keeping the content updated finish the chapter.

The Writer

Writing for the web is trickier than you might think. It requires having multiple skills: the ability to write creatively and on technical subjects, organize content into categories from multiple sources, balance user needs and business goals, and so on. A successful web writer must understand what the user wants and how they will use the web site.

The User

People do not use web sites the same way that they read books. Users go to a site to do specific tasks. They scan pages for relevant information and will leave if they can't find it quickly. Visually impaired users do the same with the aid of special tools. The user will also interact with a site via tools like forms or chat if available.

The Content

The content should be "useful, usable, engaging, and findable". The text should be descriptive but not wordy; personable, but not sloppy. The style should be consistent. It should aid findability for both users and search engines without sacrificing readability. Whatever is most important to the user should be easiest to find on the page.

The Tools

There are several things a web writer should use:

• Copy deck – All of the text for the web site


• Content audit/inventory – A list of all the web pages in a site, their URLs, and any notes about its current state
  
• Style guide – Describes how the text should look, its tone, voice, etc.
  
• Wireframes – A layout of the web page
  
• Sitemap – The hierarchy of all of the web pages in the site
  

The Tips

Erin Anderson lists ten tips for writing for the web. Start with the conclusion. Begin sentences with verbs. Be brief but be specific. Keep the sentence structure simple. Make the text easy to scan by breaking up text into short paragraphs and lists. Use short, concise headings. Headings and links should be accurate. Have the content reviewed by someone knowledgeable. Get writing hints from other good web sites.

Keep the content updated by scheduling regular audits and updates. Put people in charge of the content for specific pages or sections.