Categories
Learn

Inexpensive Ways to Target Problem Areas

ToddElliott – todd@adaptivepath.com

Until fairly recently, when designers wanted to test an idea or
design, they sought out an outside usability agency or, rented a
room, some expensive equipment and recruited users to come into an
artificial environment to participate in a usability study. In the
past few years, technology has become available that has brought
the cost and complexity of user testing down to a level where it is
available for anyone. In addition, it allows designers to be
exposed to users, in their native environment, not a sterile lab
across town. You can run a test in only a week for less than a few
hundred dollars.

There are numerous reasons remote user testing is valuable:

1. It’s cheap – most tests can be run for little more than the cost
of your time and the incentive to the user.

2. It’s fast – done right, a study can be put together,
executed and summarized in about a week. You also get
immediate feedback that can be rolled directly into your
designs.

3. Mediate conflict – User testing can be used to resolve internal
design conflicts.

4. Test ideas – A quick user test can often help resolve a
difficult design choice, like labeling or determining whether users
can figure out how to use the new drag and drop system for adding
items to their shopping cart.

5. Reduce release cycles – Instead of putting a new idea out in the
wild and then having to scramble with a follow-up release, running
a quick user test can often yield valuable insight that will save
you time in the long run.

One of the best reasons to do remote research however, is that it
offers you a window into the users environment. In addition to
seeing how they tend to navigate a page you will see what kind of
electronic interruptions occur, such as IM and email. You get to
experience a little bit of their physical environment, is it noisy
or quiet? Do they have kids competing for their attention? This is
the kind of real-life testing environment that can yield unexpected
and extremely valuable results.

One user test we conducted not long ago included a large segment of
users that were relatively new parents, meaning there were often
kids of all ages from in the background while we were testing. The
product had been tested extensively in QA, and the usability tests
were almost an afterthought. During the course of our testing, we
discovered one very important issue: If the users walked away from
the sign-up process for more than a couple of minutes, their
session would expire and they would lose all of the information
they had input. They had to start all over again. This only
came up because one of the users we tested had a small child that
demanded constant partial attention, and caused her to walk away
from the computer for several minutes. It was one of the most
valuable outcomes of the test. More importantly, it was a wholly
unanticipated outcome that was only possible because we were
testing the application.

Whether your client is an external one, or an internal group,
invite them to watch the tests. Clients that listen in on user
tests almost always come away with a fresh perspective on how users
use their site.

There are many different types of remote user testing, the case
above was the result of standard moderated remote usability study.
However there are a number of other ways of collecting feedback
from users without having them come into a lab.

Card Sorting

Card Sorting is a valuable tool in its own right to help inform the
top level navigational structure of a site. It’s a common tool used
by Information Architects everywhere, and is a cheap and reliable
way to quickly get feedback on navigation and findability. This is
done by… yes, sorting cards. Each card is labeled with a piece of
information or a function. The cards are given to the users who are
asked to sort them into logical groups. This helps uncover users
expectations, create logical categories and help with naming of
those categories. This type of data is very helpful early in the
project when you’re trying to establish the overall navigation.

The best part is that tools are available online that make it easy
to do this sort of testing remotely, which means you can design a
card sorting study for dozens, even hundreds of users without the
time consuming overhead of managing so many in person
interviews.

Online tools like Optimalsort and Userzoom make it easier than ever to
run card sorts. Userzoom is newer to the space and appears to offer
a really nice output for easy analysis. I’m looking forward to
using it at the next opportunity.

Remote Moderated Usability testing

In the case of moderated remote user testing, you can test specific
ideas or solutions for a small audience: How long does it take
users to find things? What do users think your site labels mean?
Can users figure out how to get where they want to go? You
can even test multiple designs on the fly, and test improvements as
you go along.

It is also valuable to have your clients observe and listen in on
the sessions using Adobe Connect or other meeting applications.
Meeting applications like these are what allow you to see the users
screen. As I mentioned earlier, the insight into the users
experience can often foster empathy for the user, which is can be
very valuable, if you need their support to improve the
user experience.

There are a number of tools available for the lab environment that
aren’t viable remotely. It’s sometimes desirable to do eye tracking
or to record the users expressions while running the session.
Though we don’t typically do this, there are more and more tools
becoming available that add this type of functionality for fans of
remote usability studies..

One example for recording users is Silverback which uses the
cameras built into the Macbook and Macbook Pro to record the user
as well as their screen. This is very handy if capturing the users
expression while they are going through the test.

Recruiting For Your Session

It’s important to test your designs and solutions with the intended
audience. For that reason, often the best audience to take
advantage of is the one already coming to you. In order to recruit
them, all you need is a survey and a survey tool. Your survey
should be short and designed to capture a spread of your current
audience. It’s useful to offer an incentive. Amazon gift
certificates make great incentives, and are easy to manage because
they can be emailed in bulk from Amazon.com.

There are a whole host of survey tools available for practically
free out there. They include Survey Monkey, Wufoo.com, even Google Docs has a survey form option
now, and User Experience experts, Bolt Peters, have a very nice,
supported solution for a small fee. Once you create the survey, all
you need to do is identify the page or pages you want to recruit
from, then just put a short line of javascript in the code at the
bottom of the page. Depending on how much traffic your site gets,
you’ll usually want to select the pages that get the most
traffic.

Once the survey is up and running, you can start scheduling a pool
of candidates, or you can try to recruit them on the fly as they
come to the website, and have them join the online meeting.

Designing A Script

One key to a good user test is a flexible script. If you force the
user through a pre-determined set of tasks, you’ll risk miss out on
those unexpected opportunities. Letting the user direct the
study. I often like to start the study by asking the user what they
came to the site to do originally. This is often referred to as
their “passionate task” or the task that they came to the site to
do. It can often give you surprising insight into users thought
process.

That being said, I recommend taking the time beforehand to map out
a series of questions. A good rule of thumb is to try to limit the
test to 45 minutes. People often start to lose focus after that
long. It doesn’t take many questions to fill up an hour, so it’s
usually a good idea to pick about 3-4 main tasks.

A script should also include all the logistical information up
front. Introduce yourself, and give them a little background on the
study’s subject. You want to ask their consent, give them specific
details on how long the test will last and how the software works.
When you’re done, don’t forget to thank them and confirm the
address you’ll be sending their incentive to.

Screen Sharing & Capturing the Output

The three keys to a successful test are:

o You can talk to the user

o You can see what they’re doing

o (optional) You can record both the audio and the video for later
reference.

This is where the field has gotten pretty interesting lately. There
are a number of inexpensive solutions out there for screen
sharing. UserVue by Techsmith is still one of the
best screen sharing and recording solutions out there, but
the rumor is that they will be going away in 2010.

Both iChat and Skype offer screen sharing, and allow you to voice
chat. If quick and dirty is your focus, Skype has a large installed
user base and is already free. Other solutions include Adobe
Connect, which has a little more up front cost, but also a whole
range of uses beyond user testing.

If it’s important to record your session, Camtasia by Techsmith is one of the best
solutions out there, and is now available for the Mac and the PC.
And of course, Silverback, which I mentioned earlier, although it’s
currently for Mac only.

Finally, I’d like to mention a few tips not covered in this
overview. The first is that it’s very handy have someone sit in
with you to take notes. It take a lot of practice, but it is
possible to run a test and take notes at the same time.
Secondly, save at least 15 minutes between each test to summarize
what you heard. This will help you quickly include those insights
in your next design.

There you have it, all the basic tools you need to run your own
user tests. How about it readers, are there tools out there that
you like that I haven’t mentioned? If so, let me know.

Categories
Learn

10 Usability findings

By Dmitry Fadeyev, September 24th, 2009

Everyone would agree that usability is an important aspect of Web design. Whether you’re working on a portfolio website, online store or Web app, making your pages easy and enjoyable for your visitors to use is key. Many studies have been done over the years on various aspects of Web and interface design, and the findings are valuable in helping us improve our work. Here are 10 useful usability findings and guidelines that may help you improve the user experience on your websites.
Form Labels Work Best Above The Field

A study by UX Matters found that the ideal position for labels in forms is above the fields. On many forms, labels are put to the left of the fields, creating a two-column layout; while this looks good, it’s not the easiest layout to use. Why is that? Because forms are generally vertically oriented; i.e. users fill the form from top to bottom. Users scan the form downwards as they go along. And following the label to the field below is easier than finding the field to the right of the label.

Tumblr
Tumblr features a simple and elegant sign-up form that adheres to UX Matter’s recommendation.

Positioning labels on the left also poses another problem: do you left-align or right-align the labels? Left-aligning makes the form scannable but disconnects the labels from the fields, making it difficult to see which label applies to which field. Right-aligning does the reverses: it makes for a good-looking but less scannable form. Labels above fields work best in most circumstances. The study also found that labels should not be bold, although this recommendation is not conclusive.
Users Focus On Faces

People instinctively notice other people right away when they come into view. On Web pages, we tend to focus on people’s faces and eyes, which gives marketers a good technique for attracting attention. But our attraction to people’s faces and eyes is only the beginning; it turns out we actually glance in the direction the person in the image is looking in.

eye tracking
Eye-tracking heat map of a baby looking directly at us, from the UsableWorld study.

eye tracking
And now the baby is looking at the content. Notice the increase in people looking at the headline and text.

Here’s an eye-tracking study that demonstrates this. We’re instinctively drawn to faces, but if that face is looking somewhere other than at us, we’ll also look in that direction. Take advantage of this phenomenon by drawing your users’ attention to the most important parts of your page or ad.
Quality Of Design Is An Indicator Of Credibility

Various studies have been conducted to find out just what influences people’s perception of a website’s credibility:

* Stanford-Makovsy Web Credibility Study 2002: Investigating What Makes Web Sites Credible Today
* What Makes A Web Site Credible? A Report on a Large Quantitative Study
* The Elements of Computer Credibility
* Elements that Affect Web Credibility: Early Results from a Self-Report Study (Proceedings of ACM CHI 2000 Conference on Human Factors in Computing Systems, v.2, New York: ACM Press)

Fever
We don’t know if Fever app is any good, but the sleek user interface and website make a great first impression.

One interesting finding of these studies is that users really do judge a book by its cover… or rather, a website by its design. Elements such as layout, consistency, typography, color and style all affect how users perceive your website and what kind of image you project. Your website should project not only a good image but also the right one for your audience.

Other factors that influence credibility are: the quality of the website’s content, amount of errors, rate of updates, ease of use and trustworthiness of authors.
Most Users Do Not Scroll

Jakob Nielsen’s study on how much users scroll (in Prioritizing Web Usability) revealed that only 23% of visitors scroll on their first visit to a website. This means that 77% of visitors won’t scroll; they’ll just view the content above the fold (i.e. the area of the page that is visible on the screen without scrolling down). What’s more, the percentage of users who scroll decreases with subsequent visits, with only 16% scrolling on their second visit. This data highlights just how important it is to place your key content above the fold, especially on landing pages.

This doesn’t mean you should cram everything above the fold, just that you should make the best use of that area. Crowding it with content will just make the content inaccessible; when the user sees too much information, they don’t know where to begin looking. Choose the content that you put above the fold very carefully so that it delivers the most important things without overwhelming the user.

Basecamp
Basecamp makes great use of space. Above the fold (768 pixels high), it shows a large screenshot, tagline, value proposition, call to action, client list, videos and short feature list with images.

This is most important for the home page, where most new visitors will land. So provide the core essentials there:

1. Name of the website,
2. Value proposition of the website (i.e. what benefit users will get from using it),
3. Navigation for the main sections of the website that are relevant to the user.

Blue Is The Best Color For Links

While giving your website a unique design is great, when it comes to usability, doing what everyone else is doing is best. Follow conventions, because when people visit a new website, the first place they look for things are in the places where they found them on most other websites; they tap into their experience to make sense of this new content. This is known as usage patterns. People expect certain things to be the same, such as link colors, the location of the website’s logo, the behavior of tabbed navigation and so on.

Google
Google keeps all links on its websites blue for a reason: the color is familiar to most users, which makes it easy to locate.

What color should your links be? The first consideration is contrast: links have to be dark (or light) enough to contrast with the background color. Secondly, they should stand out from the color of the rest of the text; so, no black links with black text. And finally, research shows (Van Schaik and Ling) that if usability if your priority, sticking to blue for links is best. The browser’s default link color is blue, so people expect it. Choosing a different color is by no means a problem, but it may affect the speed with which users find it.
The Ideal Search Box Is 27-Characters Wide

What’s the ideal width of a search box? Is there such a thing? Jakob Nielsen performed a usability study on the length of search queries in website search boxes (Prioritizing Web Usability). It turns out that most of today’s search boxes are too short. The problem with short boxes is that even though you can type out a long query, only a portion of the text will be visible at a time, making it difficult to review or edit what you’ve typed.

The study found that the average search box is 18-characters wide. The data showed that 27% of queries were too long to fit into it. Extending the box to 27 characters would accommodate 90% of queries. Remember, you can set widths using ems, not just pixels and points. One em is the width and height of one “m” character (using whatever font size a website is set to). So, use this measure to scale the width of the text input field to 27-characters wide.

Google search
Google’s search box is wide enough to accommodate long sentences.

Apple search
Apple’s search box is a little too short, cutting off the query, “Microsoft Office 2008.”

In general, search boxes are better too wide than too short, so that users can quickly review, verify and submit the query. This guideline is very simple but unfortunately too often dismissed or ignored. Some padding in the input field can also improve the design and user experience.
White Space Improves Comprehension

Most designers know the value of white space, which is the empty space between paragraphs, pictures, buttons and other items on the page. White space de-clutters a page by giving items room to breathe. We can also group items together by decreasing the space between them and increasing the space between them and other items on the page. This is important for showing relationships between items (e.g. showing that this button applies to this set of items) and building a hierarchy of elements on the page.

The Netsetter
Notice the big content margin, padding and paragraph spacing on The Netsetter. All that space makes the content easy and comfortable to read.

White space also makes content more readable. A study (Lin, 2004) found that good use of white space between paragraphs and in the left and right margins increases comprehension by almost 20%. Readers find it easier to focus on and process generously spaced content.

In fact, according to Chaperro, Shaikh and Baker, the layout on a Web page (including white space, headers, indentation and figures) may not measurably influence performance but does influence user satisfaction and experience.
Effective User Testing Doesn’t Have To Be Extensive

Jakob Nielsen’s study on the ideal number of test subjects in usability tests found that tests with just five users would reveal about 85% of all problems with your website, whereas 15 users would find pretty much all problems.

User tests
Source: Jakob Nielsen’s AlertBox

The biggest issues are usually discovered by the first one or two users, and the following testers confirm these issues and discover the remaining minor issues. Only two test users would likely find half the problems on your website. This means that testing doesn’t have to be extensive or expensive to yield good results. The biggest gains are achieved when going from 0 test users to 1, so don’t be afraid of doing too little: any testing is better than none.
Informative Product Pages Help You Stand Out

If your website has product pages, people shopping online will definitely look through them. But many product pages lack sufficient information, even for visitors doing a quick scan. This is a serious problem, because product information helps people make purchasing decision. Research shows that poor product information accounts for around 8% of usability problems and even 10% of user failure (i.e. the user gives up and leaves the website) (Prioritizing Web Usability).

iPod marketing page
Apple provides separate “Tech Specs” pages for its products, which keeps complicated details away from the simpler marketing pages, yet provides easy access when they’re needed.

Provide detailed information about your products, but don’t fall into the trap of bombarding users with too much text. Make the information easy to digest. Make the page scannable by breaking up the text into smaller segments and using plenty of sub-headings. Add plenty of images for your products, and use the right language: don’t use jargon that your visitors might not understand.
Most Users Are Blind To Advertising

Jakob Nielsen reports in his AlertBox entry that most users are essentially blind to ad banners. If they’re looking for a snippet of information on a page or are engrossed in content, they won’t be distracted by the ads on the side.

The implication of this is not only that users will avoid ads but that they’ll avoid anything that looks like an ad, even if it’s not an ad. Some heavily styled navigation items may look like banners, so be careful with these elements.

FlashDen
The square banners on the left sidebar of FlashDen are actually not ads: they’re content links. They do look uncomfortably close to ad banners and so may be overlooked by some users.

That said, ads that look like content will get people looking and clicking. This may generate more ad revenue but comes at the cost of your users’ trust, as they click on things they thought were genuine content. Before you go down that path, consider the trade-off: short-term revenue versus long-term trust.
Bonus: Findings From Our Case-Studies

In recent years, Smashing Magazine’s editorial team has conducted a number of case studies in an attempt to identify common design solutions and practices. So far, we have analyzed Web forms, blogs, typography and portfolios; and more case studies will be published next month. We have found some interesting patterns that could serve as guidelines for your next design.

Here, we’ll review some of the practices and design patterns that we discovered in our case studies in this brief, compact overview, for your convenience.

According to our typography study:

* Line height (in pixels) ÷ body copy font size (in pixels) = 1.48
1.5 is commonly recommended in classic typographic books, so our study backs up this rule of thumb. Very few websites use anything less than this. And the number of websites that go over 1.48 decreases as you get further from this value.
* Line length (pixels) ÷ line height (pixels) = 27.8
The average line length is 538.64 pixels (excluding margins and padding), which is pretty large considering that many websites still have body copy that is 12 to 13 pixels in font size.
* Space between paragraphs (pixels) ÷ line height (pixels) = 0.754
It turns out that paragraph spacing (i.e. the space between the last line of one paragraph and the first line of the next) rarely equals the leading (which would be the main characteristic of perfect vertical rhythm). More often, paragraph spacing is just 75% of paragraph leading. The reason may be that leading usually includes the space taken up by descenders; and because most characters do not have descenders, additional white space is created under the line.
* Optimal number of characters per line is 55 to 75
According to classic typographic books, the optimal number of characters per line is between 55 and 75, but between 75 and 85 characters per line is more popular in practice.

According to our blog design study:

* Layouts usually have a fixed width (pixel-based) (92%) and are usually centered (94%). The width of fixed layouts varies between 951 and 1000 pixels (56%).
* The home page shows excerpts of 10 to 20 posts (62%).
* 58% of a website’s overall layout is used to display the main content.

According to our Web form design study:

* The registration link is titled “sign up” (40%) and is placed in the upper-right corner.
* Sign-up forms have simple layouts, to avoid distracting users (61%).
* Titles of input fields are bolded (62%), and fields are vertically arranged more than they are horizontally arranged (86%).
* Designers tend to include few mandatory fields and few optional fields.
* Email confirmation is not given (82%), but password confirmation is (72%).
* The “Submit” button is either left-aligned (56%) or centered (26%).

According to our portfolio design study:

* 89% of layouts are horizontally centered, and most of them have a large horizontal navigation menu.
* 47.2% of portfolios have a client page, and 67.2% have some form of standalone services page.
* 63.6% have a detailed page for every project, including case studies, testimonials, slideshows with screenshots, drafts and sketches.
* Contact pages contain driving directions, phone number, email address, postal address, vCard and online form,

Other Resources

Categories
Learn

Blasting the Myth of the Fold

The Above-the-Fold Myth

We are all well aware that web design is not an easy task. There are many variables to consider, some of them technical, some of them human. The technical considerations of designing for the web can (and do) change quite regularly, but the human variables change at a slower rate. Sometimes the human variables change at such a slow rate that we have a hard time believing that it happens.

This is happening right now in web design. There is an astonishing amount of disbelief that the users of web pages have learned to scroll and that they do so regularly. Holding on to this disbelief – this myth that users won’t scroll to see anything below the fold – is doing everyone a great disservice, most of all our users.
First, a definition: The word “fold” means a great many things, even within the discipline of design. The most common use of the term “fold” is perhaps used in reference to newspaper layout. Because of the physical dimensions of the printed page of a broadsheet newspaper, it is folded. The first page of a newspaper is where the “big” stories of the issue are because it is the best possible placement. Readers have to flip the paper over (or unfold it) to see what else is in the issue, therefore there is a chance that someone will miss it. In web design, the term “fold” means the line beyond which a user must scroll to see more contents of a page (if it exists) after the page displays within their browser. It is also referred to as a “scroll-line.”
Screen performance data and new research indicate that users will scroll to find information and items below the fold. There are established design best practices to ensure that users recognize when a fold exists and that content extends below it1. Yet during requirements gathering for design projects designers are inundated with requests to cram as much information above the fold as possible, which complicates the information design. Why does the myth continue, when we have documented evidence that the fold really doesn’t matter in certain contexts?

Once upon a time, page-level vertical scrolling was not permitted on AOL. Articles, lists and other content that would have to scroll were presented in scrolling text fields or list boxes, which our users easily used. Our pages, which used proprietary technology, were designed to fit inside a client application, and the strictest of guidelines ensured that the application desktop itself did not scroll. The content pages floated in the center of the application interface and were too far removed from the scrollbar location for users to notice if a scrollbar appeared. Even if the page appeared to be cut off, as current best practices dictate, it proved to be such an unusual experience to our users that they assumed that the application was “broken.” We had to instill incredible discipline in all areas of the organization that produced these pages – content creation, design and development – to make sure our content fit on these little pages.

AOL client application with desktop scrollbar activated

AOL client application with desktop scrollbar activated

As AOL moved away from our proprietary screen technology to an open web experience, we enjoyed the luxury of designing longer (and wider) pages. Remaining sensitive to the issues of scrolling from our history, we developed and employed practices for designing around folds:

  • We chose as target screen resolutions those used by the majority of our users.
  • We identified where the fold would fall in different browsers, and noted the range of pixels that would be in the fold “zone.”
  • We made sure that images and text appeared “broken” or cut off at the fold for the majority of our users (based on common screen resolutions and browsers).
  • We kept the overall page height to no more than 3 screens.

But even given our new larger page sizes, we were still presented with long lists of items to be placed above the fold – lists impossible to accommodate. There were just too many things for the limited amount of vertical space.
For example, for advertising to be considered valuable and saleable, a certain percentage of it must appear above the 1024×768 fold. Branding must be above the fold. Navigation must be above the fold – or at least the beginning of the list of navigational choices. (If the list is well organized and displayed appropriately, scanning the list should help bring users down the page.) Big content (the primary content of the site) should begin above the fold. Some marketing folks believe that the actual number of data points and links above the fold is a strategic differentiator critical to business success. Considering the limited vertical real estate available and the desire for multiple ad units and functionality described above, an open design becomes impossible.

And why? Because people think users don’t scroll. Jakob Nielsen wrote about the growing acceptance and understanding of scrolling in 19972, yet 10 years later we are still hearing that users don’t scroll.
Research debunking this myth is starting to pop up, and a great example of this is the report available on ClickTale.com3. In it, the researchers used their proprietary tracking software to measure the activity of 120,000 pages. Their research gives data on the vertical height of the page and the point to which a user scrolls. In the study, they found that 76% of users scrolled and that a good portion of them scrolled all the way to the bottom, despite the height of the screen. Even the longest of web pages were scrolled to the bottom. One thing the study does not capture is how much time is spent at the bottom of the page, so the argument can be made that users might just scan it and not pay much attention to any content placed there.

This is where things get interesting.

I took a look at performance data for some AOL sites and found that items at the bottom of pages are being widely used. Perhaps the best example of this is the popular celebrity gossip website TMZ.com. The most clicked on item on the TMZ homepage is the link at the very bottom of the page that takes users to the next page. Note that the TMZ homepage is often over 15000 pixels long – which supports the ClickTale research that scrolling behavior is independent of screen height. Users are so engaged in the content of this site that they are following it down the page until they get to the “next page” link.

Maybe it’s not fair to use a celebrity gossip site as an example. After all, we’re not all designing around such tantalizing guilty-pleasure content as the downfall of beautiful people. So, let’s look at some drier content.
For example, take AOL News Daily Pulse. You’ll notice the poll at the bottom of the page – the vote counts are well over 300,000 each. This means that not only did folks scroll over 2000 pixels to the bottom of the page, they actually took the time to answer a poll while they were there. Hundreds of thousands of people taking a poll at the bottom of a page can easily be called a success.

AOL News Daily Pulse with 10x7 fold line and vote count
AOL News Daily Pulse with 10×7 fold line and vote count

But, you may argue, these pages are both in blog format. Perhaps blogs encourage scrolling more than other types of pages. I’m not convinced, since blog format is of the “newest content on top” variety, but it may be true. However, looking at pages that are not in blog format, we see the same trend. On the AOL Money & Finance homepage, users find and use the modules for recent quotes and their personalized portfolios even when these modules are placed well beneath the 1024×768 fold.

Another example within AOL Money & Finance is a photo gallery entitled Top Tax Tips. Despite the fact that the gallery is almost 2500 pixels down the page, this gallery generates between 200,000 and 400,000 page views depending on promotion of the Taxes page.

It is clear that where a given item falls in relation to the fold is becoming less important. Users are scrolling to see what they want, and finding it. The key is the content – if it is compelling, users will follow where it leads.

When does the fold matter?

The most basic rule of thumb is that for every site the user should be able to understand what your site is about by the information presented to them above the fold. If they have to scroll to even discover what the site is, its success is unlikely.

Functionality that is essential to business strategy should remain (or at least begin) above the fold. For example, if your business success is dependent on users finding a particular thing (movie theaters, for example) then the widget to allow that action should certainly be above the fold.

Screen height and folds matter for applications, especially rapid-fire applications where users input variables and change the display of information. The input and output should be in very close proximity. Getting stock quotes is an example: a user may want to get four or five quotes in sequence, so it is imperative that the input field and the basic quote information display remain above the fold for each symbol entered. Imagine the frustration at having to scroll to find the input field for each quote you wanted.

Where IS the fold?

Here is perhaps the biggest problem of all. The design method of cutting-off images or text only works if you know where the fold is. There is a lot of information out there about how dispersed the location of fold line actually is. Again, a very clear picture of this problem is shown on ClickTale. In the same study of page scrolling, fold locations of viewed screens were captured, based on screen resolution and browser used. It’s a sad, sad thing, but the single highest concentration of fold location (at around 600 pixels) for users accounted for less than 10% of the distribution. This pixel-height corresponds with a screen resolution of 1024×768. Browser applications take away varying amounts of vertical real estate for their interfaces (toolbars, address fields, etc). Each browser has a slightly different size, so not all visitors running a resolution of 1024×768 will have a fold that appears in the same spot. In the ClickTale study, the three highest fold locations were 570, 590 and 600 pixels—apparently from different browsers running on 1024×768 screens. But the overall distribution of fold locations for the entire study was so varied that even these three sizes together only account for less than 26% of visits. What does all this mean? If you pick one pixel location on which to base the location of the fold when designing your screens, the best-case scenario is that you’ll get the fold line exactly right for only 10% of your visitors.

So what do we do now?

Stop worrying about the fold. Don’t throw your best practices out the window, but stop cramming stuff above a certain pixel point. You’re not helping anyone. Open up your designs and give your users some visual breathing room. If your content is compelling enough your users will read it to the end.

Advertisers currently want their ads above the fold, and it will be a while before that tide turns. But it’s very clear that the rest of the page can be just as valuable – perhaps more valuable – to contextual advertising. Personally, I’d want my ad to be right at the bottom of the TMZpage, forget the top.

The biggest lesson to be learned here is that if you use visual cues (such as cut-off images and text) and compelling content, users will scroll to see all of it. The next great frontier in web page design has to be bottom of the page. You’ve done your job and the user scrolled all the way to the bottom of the page because they were so engaged with your content. Now what? Is a footer really all we can offer them? If we know we’ve got them there, why not give them something to do next? Something contextual, a natural next step in your site, or something with which to interact (such as a poll) would be welcome and, most importantly, used.

References

1 Jared Spool UIE Brain Sparks, August 2, 2006:Utilizing the Cut-off Look to Encourage Users To Scroll

2 Jakob Nielsen’s Alertbox, December 1, 1997: Changes in Web Usability Since 1994

3 ClickTale’s Research Blog, December 23, 2006: Unfolding the Fold

Categories
Learn

Fresh vs. Familiar: How Aggressively to Redesign

Summary:
Users hate change, so it’s usually best to stay with a familiar design and evolve it gradually. In the long run, however, incrementalism eventually destroys cohesiveness, calling for a new UI architecture.

Jakob Nielsen‘s Alertbox, September 21, 2009:

You often hear design team members (or their management) say, “We need a fresh design.” This usually gets redesign projects off on a wrong footing, with the wrong goals and strategy.

Typically, a fresh design will be a worse design simply because it’s new and thus breaks user expectations. A better strategy is to play up familiarity and build on users’ existing knowledge of how a system works.

Why Insiders Want Fresh Design

You stare at the thing all day, years on end. Of course you think the UI looks tired. Count the number of “exposure hours” you’ve had to your own design. If you’ve worked on the same design team for a few years, those hours likely reach into the thousands.

In contrast, your typical user has probably spent only a few hours looking at your design over the last few years. Remember Jakob’s Law of the Internet user experience: users spend most of their time on other sites.

People usually spend no more than 2–3 minutes on a website, so even if they visit your site daily, they’d run up only 30 exposure hours over 2 years. More commonly, even loyal customers will spend less than 5 hours on your site each year. With so little time spent looking at the design, customers won’t tire of it anytime soon.

Why Users Want Familiar Design

The most important reason? Users don’t care about design for its own sake; they just want to get things done and get out. Normal people don’t love sitting at their computers. They’d rather watch football, walk the dog — just about anything else. Using a computer probably rates above taking out the trash, though.

When people are visiting websites or using applications, they don’t spend their time analyzing or admiring the design. They focus their attention on the task, the content, and their own data or documents.

Thus, people love a design when they know the features and can immediately locate the ones they need. That is, they love a familiar design.

In fact, anytime you release a redesign, prepare for a flood of angry email from customers. It’s a law of nature that users hate change, and they’ll complain every time you move anything around or otherwise reduce their ability to just do what they’ve always done.

(Having users complain about a redesign doesn’t necessarily mean that it’s bad; if the new design actually has better usability, people will eventually grow to like it. Customer complaints are thus not a reason to avoid all redesigns; they’re simply a reason to avoid changing the design purely to “stay fresh.”)

Frequently Used UIs

If you run an intranet, develop applications, or have an extremely popular site, users might in fact accumulate more than a few minutes’ exposure to your UI per week. In such cases, you’d think that customers would clamor for a fresh design — but no.

People who regularly use a UI become experienced users and their user experience is dominated by skilled performance. Designing for novice users vs. expert users differs in the relative importance of key usability attributes such as learnability and efficiency.

The more that people rely on skilled performance, the more they depend on having routine behaviors automated. Thus, high-frequency users also prefer a familiar design.

Ultimately, the difference between the design team and users comes down to looking vs. using. You look at the design over and over again, and endlessly debate its smallest elements. Customers might use the same features repeatedly, but their mind is on the task. Because users are focused on something external to the design, it doesn’t register as strongly for them.

When To Refresh Designs Anyway

Generally, it’s best to evolve a UI with gentle changes rather than offer a totally fresh design. I thus strongly recommend getting the basic design right in the first place, before you launch, so that it can live for several years with minor updates. Before you release anything to customers, use techniques such as rapid iterative design and paper prototypes to thoroughly explore the design space and polish the usability.

This approach contrasts with that of simply “throwing something at the wall” to see what sticks. Indeed, some people advocate just releasing your best guess, because the beauty of the Web is that you can always change it if you’re wrong. This is true, but you’ll be unpopular, because

  • you’ll be mistreating users by subjecting them to a flawed design that you could have fixed with just a few days of pre-release user testing; and
  • you’ll antagonize users by making them suffer the very changes that we know they hate.

In general, get it right, and then change slowly. Still, there are two cases in which a more radical approach is appropriate:

  • If you have almost no current users and expect a major design improvement to dramatically expand the user base. In this case, the business loss from punishing your current customers is small enough to be worth taking. Of course, it’s still a gamble that you’ll actually be able to attract a vastly bigger audience. Remember the old adage: a bird in the hand is better than two in the bush. Unless you’re sure that there are millions of users in that bush, you might not want to go there.
  • If your old design has incrementally evolved for so many years that the overall user experience has become overly convoluted and lost any sense of a unified conceptual structure.

As an example of the second point, let’s consider Microsoft Office. The suite was introduced in 1989 as an incremental packaging of older stand-alone apps like Word (from 1983) and Excel (from 1984). By 2000, the underlying UI architecture was 17 years old, and MS Office was creaking at the edges. I frequently complained that the old approach was a muddled set of thrown-together features — and that the ever-more complex set of menus and dialog boxes made it hard for users to find most of them.

While I criticized MS Office’s growing usability problems, I also said that, if I were Bill Gates, I wouldn’t necessarily go for a radical redesign. My thinking was that, while a new design would be better for users, it might be bad for business: it’s easier to sell an incremental upgrade than a totally new UI. Sure enough, Office 2003 shipped with a bit of shoeshine applied to the same 20-year-old UI.

Basically, though, the old design was indeed too old, and the humongous amount of accrued functionality needed a totally rearchitected user experience. This was finally introduced with Office 2007. Now, having used the new UI for 2 years, there’s no way I’d go back to Office 2003 or its predecessors. The new design is superior. When it launched, however, there were plenty of complaints: users don’t like change, and a new UI takes time to get used to.

So, unless your existing design is an overgrown mess of bolted-on features that needs a new architecture, it’s best to stay with the familiar design that users prefer and avoid the temptation to go with a novel design that only you’ll appreciate.

http://www.useit.com/alertbox/familiar-design.html

Categories
Learn

Integrating facebook with wordpress

By Thiemo Fetzer, September 14th, 2009

http://www.smashingmagazine.com/2009/09/14/how-to-integrate-facebook-with-wordpress/

Facebook is one of those Web phenomena that impress everyone with numbers. To cite some: about 250 million users are on Facebook, and together they spend more than 5 billion minutes on Facebook… every day. These numbers suggest that we should start thinking about how to use Facebook for blogging or vice versa.

We did some research to find out how the integration of Facebook with WordPress and vice versa works, or — in other words — how you can present your WordPress blog on Facebook or use the functionality of Facebook on your WordPress-powered blog. Both of these can be achieved with a set of WordPress plug-ins, a couple of which we’ll present here in detail.

1. Integrating A WordPress Blog Into Facebook

Integrating a WordPress blog into Facebook is actually quite simply achieved via the Facebook API. The Facebook API makes programming applications that can be spread via Facebook almost a piece of cake. A lot of interactive browser games are on Facebook, such as the currently popular “Mafia Wars.” This game allows users to start a mafia family with their friends, with the goal of becoming an important figure in the virtual underground crime scene. To start a clan, you invite other friends on the network to join. This is the growth strategy of any application on Facebook: the simple snowball effect.

The applications sustain themselves through earnings generated by displaying advertisements, which also makes Facebook an even more attractive platform to develop on. This symbiosis generates growth for both Facebook and its applications.

Plug-In Installation and Configuration

John Eckman developed the WordPress plug-in Wordbook in early 2009. This plug-in allows WordPress blog owners to integrate their blog in Facebook. This gives a blog two lives: one as an application on Facebook (such as, for example, my private FreigeistBlog) and one at the original URL (http://freigeist.devmag.net).

To access a blog via Facebook, you need to first grant access to the application. To do this, go to the so-called “canvas” page, which is where the Facebook twin of the blog lives (my example). However, granting access to the blog’s application means that the administrator of the blog also has access to information about you as a user (this is what most applications aim for: information such as date of birth, gender and educational status allows them to display quite targeted ads).

The application we’re dealing with is a simple blog and, in this sense, quite innocent, but we should state outright that the Facebook API as it is now treats blogs and websites as applications, which may not be appropriate, given the issue mentioned above. Facebook users who authorize the blog application can now easly send comments and share posts from within Facebook. The data, however, is still stored in the original database on the server where the blog is installed.

This makes it look as though Facebook serves merely as a simple feed reader. Yet, we get some other benefits. The blog on Facebook can be used to create a community around it by taking advantage of Facebook’s snowball effect, because friends of the blog’s users will see in their activity stream that they have been participating on the blog. Furthermore, it means that Facebook users will see new posts from your blog whenever they sign in to Facebook and can easily follow comments, making your blog more accessible.

To create a Facebook twin of your blog, first you have to set up a new application. To do this, you need a Facebook account and have to register as a developer using the preceding link. All of this can be done in a few minutes.

Create a new Facebook application
Create a new Facebook application

Once you have agreed to the terms of use, give your application a name. Then you will receive your API key and a secret, which you will need later.

Settings for a Facebook application
Settings for the Facebook application. Large view.

Then, you have to submit a so-called “post-authorize callback URL.” This is the address on your server to which Facebook will send a notice whenever a user authorizes access to the application. By the same logic, there is also the “post-remove callback URL,” which receives a notice when a user removes the application. Both of these events are handled by the Wordbook plug-in. You merely need to write the address of the blog’s root directory with a trailing slash.

Callback URLs definieren
Facebook application settings: Define callback URLs. Large view.

The third step is to claim your canvas page, which is the page through which a Facebook user accesses your blog, and a canvas callback URL, which is the page from which content is retrieved. Again, include a trailing slash, or else internal links on your blog won’t work with their Facebook twin.

Define canvas page
Facebook application settings: Define canvas page. Large view.

Now you have some choices to make, namely, how to set up your canvas page. You have a choice between iFrame and FBML. FBML is a Facebook XML scheme with which you can use specific Facebook tags (such as tags to display user profiles). You can also use it to access certain Facebook procedures. However, the Wordbook plug-in works with iFrames, which allow Javascript and other tags, and which FBML does not support.

To distinguish between them rather crudely, you can say that iFrames give the developer more flexibility but, unlike FBML, restrict access to Facebook procedures. Another advantage of iFrames is that code that Facebook retrieves from the canvas callback URL need not be parsed by the FBML parser, which could yield a performance gain. With iFrames, only internal links on the blog need to be adjusted. And the “resizeable” option allows Facebook’s JavaScript code to adjust the size of the iFrame to Facebook’s layout.

Now the hard work is done. All that’s left is to install the Wordbook plug-in using the standard WordPress method: install and activate. Then you can change the plug-in’s settings on the settings panel, and here you will need your application ID and the secret. You also have to tell the plug-in where the canvas page is located, so that internal links can be adjusted.

Settings for the Wordbook plug-in
Adjusting the settings of the Wordbook plug-in

And that’s it! If you want, you could activate or deactivate some other options, such as the commenting function and whether users can add your application to their profile by displaying the latest posts from your blog in their profile.

Browsing through a blog via Facebook
Browsing through the blog via Facebook. Large view.

The plug-in allows you to play around a little bit. But as we said, you are somewhat limited in how fully you can integrate your blog into the Facebook canvas. But the next plug-in we’ll look at integrates a bit of Facebook into your blog.

2. Integrating Facebook In A WordPress Blog

To begin, a little history lesson is needed. Many users do not like having to register for each blog where they would like to post comments, especially if they already have accounts on so many other social networks, such as Facebook and MySpace. So a single online ID for several purposes would be ideal, wouldn’t it? That’s the idea behind the OpenID protocol, which started in 2005. It decentralizes the identification of users for various providers and services. In essence, you can create an account on Facebook and connect it to services such as MySpace or even a personal blog. If you want to change your profile for all of these services, that too is decentralized: you simply change the settings on your Facebook account. OpenID is a chance to make the Web and its services more easily accessible. There are reasonable risks and concerns involved, but also many opportunities.

Facebook announced in 2007 that it would implement OpenID, and others followed, which explains why we now find more and more buttons that say “Connect with Facebook” or “Google Friend Connect.” This leads us to our second plug-in, Facebook Connect WordPress plug-in, which almost seamlessly integrates Facebook into your blog.

The plug-in allows users to comment on a blog using their Facebook account; and if they are already signed in or on Facebook, they need not sign in again. Users do not have to register for a unique account on the blog because the plug-in retrieves the user’s information directly from the Facebook API. With access to the user profiles on Facebook, you can display your users’ profile pictures, which adds a personal touch to your blog.

The plug-in integrates a lot of Facebook functions: for example, users can send invitations and share stories and comments on Facebook, which gives your blog the benefit of word-of-mouth marketing. To do this, you need to activate the plug-in option that publishes a user’s activity in their respective activity feed. Last but not least, you can enable a gadget that displays the profile pictures of your blog’s most recent visitors, similar to “Google Friend Connect.”

Facebook Connect Implementation as seen on Sociable.es
Facebook Connect implemented on sociable.es (in Spanish)

This plug-in essentially does the opposite of Wordbook (which integrates Facebook functionality into your blog).

Plug-In Installation and Configuration

Again, as in the previous section, you will need to create a new Facebook application.

Create a new Facebook Application
Creating a new Facebook application. Large view.

You will also have to define the callback URLs, which point to the root of your blog.

Defining callback URLs for the new application
Defining callback URLs for the new application. Large view.

Again, most of the work is now done, and you can soon start having fun and being creative. Just a few steps remain. First, download the plug-in from the website (see link above) and upload and enable it. A big part of the plug-in consists of the “Facebook Connect” library, which is provided by Facebook. You might stumble over the two xd_reciever files, one in HTML and one in PHP. They play a key role: enabling the so-called cross-domain communication (hence, the xd) between your blog and Facebook.

So why are these needed? Typically, HTTP requests are sent with the XMLHttpRequest object. However, the typical security settings on browsers allow XMLHttpRequest to send requests only to the domain where the original request was sent to. In our case, requests are send to and from Facebook. This cross-domain communication is achieved with iFrame cross-domain communication. With this, the application opens an iFrame on facebook.com with the relevant requests; for example, to retrieve information on whether a user is logged into Facebook.

These requests are sent to Facebook through the iFrame via the URL, with which the iFrame is opened. The request is checked, and now the Facebook script that was called via the iFrame opens an iFrame on the application page, where the outcome of the request is sent to, again with the query string of the URL. The result of any requests lands in the query string of the xd_receiver.htm file on your own server. This circumvents the problem of being unable to use XMLHttpRequest.

Now back to the plug-in. Once you have installed and activated the plug-in, you can add the plug-in as a widget to your blog’s sidebar. However, you first need to enter your API key and secret.

Settings for Facebook Connect WordPress plug-in
Settings for Facebook Connect WordPress plug-in. Large view.

As you will see, a whole lot of options are enabled by default, such as automatically publishing comments if they are posted through a Facebook account (the rationale being that you don’t have to moderate them because they come from actual people using Facebook and not spambots).

If you activate the sharing function, the plug-in adds a “Share” button automatically below each post. You can also activate the option that publishes a user’s comments in their activity feed on Facebook, thus making their activity on your blog visible to their friends.

After you have adjusted the settings, you will be notified that you need to define templates for the presentation. These need to be “synchronized” with Facebook. Scroll down a bit to generate and activate these templates. You can change the language manually here as well.

Alter Facebook Connect template settings
Adjust Facebook Connect’s template settings. Large view.

The first template controls how a user’s activity is posted in their activity feed on Facebook. However, you can also include the activity feed of your users in your gadget, as done on sociable.es (see link above). The last step is to go to the widget set-up page and include the gadget as a widget in your sidebar.

Including the Facebook Connect Widget into the sidebar
Including the Facebook Connect widget in the sidebar

Here again, you have some choice over the configuration, especially with regard to changing the language, showing a big or small “Connect to Facebook” button, etc. After installing the plug-in, you may want to see what else you can do with it. The implementation on sociable.es is quite a nice one.

Further Resources

These two plug-ins are quite specific in what they do. However, a wide variety of Facebook plug-ins are available for platforms other WordPress. Here is a list, certainly not comprehensive:

  • Movable Type
    A plug-in by Six Apart for adding Facebook Connect to a Movable Type blog, allowing any Facebook user to sign in. It is still in beta.
  • WordPress-FacebookConnect
    This plug-in is quite similar to the one on sociable.es. It has the same features, such as single sign-on, publishing comments to news feeds and displaying profile pictures. However, it has not been updated since the beginning of the year. Still, there is a nice tutorial by the developer Adam Breckler.
  • WordPress Fotobook
    With this WordPress plug-in, you can import all of your photo albums from Facebook onto a WordPress page.
  • Drupal’s Facebook Connect module
    With this Drupal module, you can allow Facebook users to connect to your blog through their account. Similar to the plug-in by sociable.es.
  • Gigya WordPress plug-in
    This plug-in integrates not only Facebook but Twitter, MySpace and other OpenID providers into your blog for community building.
  • StatusPress
    This small plug-in displays your Facebook, Twitter or Last.fm status on your blog.
  • Quailpress
    Integrate Facebook-sharing functionality on your blog with this plug-in. However, it has not been actively developed for some time. And with the sociable.es plug-in, it is practically redundant.

About the Author

Thiemo Fetzer is pursuing a PhD in Economics at the London School of Economics. He has been publishing articles on programming in PHP for more than 8 years in German print and online magazines such as Dr.Web, his own website Devmag and his blog.

Categories
Learn

The problem with non

Seth Godin, September 09

http://sethgodin.typepad.com/seths_blog/2009/09/the-problem-with-non.html
===========================

The problem with non

Non as in non-profit.

The first issue is the way you describe yourself. I know what you’re not but what are you?

Did you start or join this non-profit because of the non part? I doubt it. It’s because you want to make change. The way the world is just isn’t right or good enough for you… there’s an emergency or an injustice or an opportunity and you want to make change.

These organizations exist solely to make change. That’s why you joined, isn’t it?

The problem facing your group, ironically, is the resistance to the very thing you are setting out to do. Non-profits, in my experience, abhor change.

Take a look at the top 100 twitter users in terms of followers. Remember, this is a free tool, one that people use to focus attention and galvanize action. What? None of them are non-profits. Not one as far as I can tell. Is the work you’re doing not important enough to follow, or is it (and I’m betting it is) paralysis in decision making in the face of change? Is there too much bureaucracy or too much fear to tell a compelling story in a transparent way?

Beth has a great post about the feeling of vertigo that non-profits get when they move from the firm ground of the tried and true to the anti-gravity that comes from leaping into change.

Where are the big charities, the urgent charities, the famous charities that face such timely needs and are in a hurry to make change? Very few of them have bothered to show up in a big way. The problem is same as the twitter resistance: The internet represents a change. It’s easy to buy more stamps and do more direct mail, scary to use a new technique.

Of course, some folks, like charity: water are stepping into the void and raising millions of dollars as a result. They’re not necessarily a better cause, they’re just more passionate about making change.

A few years ago I met with two (very famous) non-profits to discuss permission marketing and online fundraising and how they might have an impact. Each time, the president of the group was in the room. After about forty five minutes, the meetings devolved into endless lists of why any change at all in the way things were was absolutely impossible. Everyone looked to the president of the group for leadership, and when he didn’t say anything, they dissembled, stalled and evaded. Every barrier was insurmountable, every element of the status quo was cast in stone.  The president of the group was (he thought) helpless.

When was the last time you had an interaction with a non-profit (there’s that word again) that blew you away?

Please don’t tell me it’s about a lack of resources. The opportunities online are basically free, and if you don’t have a ton of volunteers happy to help you, then you’re not working on something important enough. The only reason not to turn this over to hordes of crowds eager to help you is that it means giving up total control and bureaucracy. Which is scary because it leads to change.

If you spend any time reading marketing blogs, you’ll find thousands of case studies of small (and large)  innovative businesses that are shaking things up and making things happen. And not enough of these stories are about non-profits. If your non-profit isn’t acting with as much energy and guts as it takes to get funded in Silicon Valley or featured on Digg, then you’re failing in your duty to make change.

The marketing world has changed completely. So has the environment for philanthropic giving. So have the attitudes of a new generation of philanthropists. But if you look at the biggest charities in the country, you couldn’t tell. Because they’re ‘non’ first, change second.

Sorry if I sound upset, but I am. The work these groups do is too important (and the people who work for them are too talented) to waste this opportunity because you are paralyzed in fear.

Categories
Learn

Brand Dashboard

Here’s a sneak peak of HSUS’s dashboard and what they are “listening” for.

  • Brand – mentions of your nonprofit, including acronyms, misspellings, etc.
  • Current Issues – what people are talking about that involve your nonprofit right now.
  • Detractors – people or other nonprofits you know dislike your nonprofit or issue but talk about you (the opposition).
  • Competition – nonprofits or people in the same space as your nonprofit.
  • Staff Mentions – prominent people in your organization like your Executive Director.

HSUS Monitors Their Brand Via:

  • Google Alerts
  • Tweetmeme –  tracks the most popular tweets about a subject.
  • Technorati – tracks blogs that mention certain keywords.
  • Blogpulse – a blog monitoring tool.
  • Digg – highlights most popular articles on the web.
  • Boardreader – shows forum posts by keyword.
  • Filtrbox – a paid monitoring service that tracks social media conversations.

Carie’s Tips for Getting Started:

  1. Start with a blank iGoogle page.
  2. Choose the 3 column layout.
  3. Open a new browser window. Do a search on Technorati for your org name. You’ll see a “subscribe” link. Click on it.
  4. A window in Google Reader should open. Copy the feed URL in the top left corner.
  5. Go back to iGoogle, and click on “add stuff” and add feed or gadget.
  6. Paste the URL into the box and save.
  7. You’ll be taken back to your iGoogle page, where you should see a new box with the content from Technorati mentioning your org name.
  8. Repeat these steps for each site, then each tab and voila you have your own dashboard to monitor your nonprofit’s brand.