UI Design Newsletter – November, 2010

How often do you talk with your graphic designer?

Every minute? (You are the graphic design and usability person!)

Twice daily? (They sit next to you!)

Three times a week? (You're in the same office.)

You have to make appointments? (Yikes, how busy can you get? Or maybe, "get to know more about graphics.")

Whatever your answer, we have some good updates on the science of visual appeal and how to make it work in a usability context.

Does usability overcome a poor visual impression?

You're in a rush to get the application or website up and running. Just how much time should you allocate for your graphic designer?

You might say "well, our usability testing showed people could find what they needed."

But that's just half the story, according to recent findings by two researchers at the Wichita State University Software Usability Research Center (SURL). Christine Phillips and Barbara Chaparro knew from prior research (which we have reported) that first visual impressions are very important in determining whether someone likes the site – even the first one-twentieth of a second!

Prior research did not cover, however, these two questions:

1. Can a poor initial visual impression be reversed when given an excellent usability experience?
2. Does the usability of a site influence someone more when they are accomplishing a task rather than freely exploring it?

Setting up the comparison showdown

Our two authors used two websites from their prior research: one had received high rating in visual appeal and the other had low ratings.

Figure 1. High visual appeal website: www.australia.com

Figure 2. Low visual appeal website: www.renttoown.com

The authors then altered the pages so they had a "high usability" and a "low usability" version of each. They used 36 criteria from www.usability.gov's Research Based Web Design and Usability Guidelines to score the designs.

Four groups of 40 people reviewed the pages, one group per web page. Each person had 10 seconds to examine the homepage. Then they completed 3 short surveys:

1. A 9-question adjective survey about the design (e.g., simple, interesting, good layout, easy to use)
2. A 10-question interest survey about the site appeal (e.g., I want to spend more time on this site, the homepage is an accurate representation of the site)
3. The 10-question System Usability Scale (SUS) (see prior article)

After completing the surveys, participants were given 15 minutes for one of these assignments: a) a series of randomized search tasks or b) free exploration of the site. Upon completion, they completed the 3 surveys a second time.

First impressions count
in the usability count-down

As expected, the "high visual appeal" site (including both "more usable" and "less usable") scored higher on all three surveys after the 10-second viewing.

Of greater interest, after 15 minutes of participant web usage, the authors found answers to their initial questions:

1) For all three survey measures, the high visual appeal site still received higher scores than the low visual appeal site even for the low usability design. In fact, participants rated the low usability version of the high visual appeal site better than the high usability version of the low visual appeal site!

In other words, good usability didn't make up for low visual appeal.

2) On the other hand, participants assigned the search-tasks rated all 4 types of screen lower than participants who conducted free exploration of the site.

This means that task-orientation made users more critical in general when compared to users conducting free-exploration of the sites. In these cases, searching placed demands on usability.

The authors conclude that high usability cannot overcome a low visual appeal.

In summary, the usability of the site fails to overcome whatever bias, good or bad, introduced by the first visual impression. Users form attitudes that confirm that bias during the subsequent site interaction.

The authors write "The results support the confirmation bias theory proposed by Lingaard and Dudek (2002) in that the users' first impressions held true even after using a site that was not usable."

Food for thought about graphic design

While we are typically more than willing to let our graphic support people do their thing, some researchers ask if there is a rapid way to review quality of graphics using automated support.

For instance, on large-scale websites, how can you maintain an acceptable level of aesthetic value without an army of graphic artists?

Sheng, Lin, Chakraborty and Rauschenberger of Siemens Corporate Research report their 2009 findings from "pixel-level statistics that are agnostic about the existence of objects, meanings, cultural or discipline-specific conventions, etc."

In other words, they wonder if a computerized metric of images (symmetry, balance, and equilibrium) can correlate with the rapid judgments made by non-professionals regarding aesthetic dimensions (described next).

The authors focus on impressions made in the first 150 milliseconds of the "pre-cognitive" phase of perception. 22 participants viewed 30 web pages presented in different orders and rated each page on these four aesthetic dimensions. They had 1 minute to perform their rating.

What the computer saw in the images...

The automated analysis drew from existing work in calculating measures extracted from viewing the web page as an "image". These measures counted variations in RGB color, luminance intensity, and spatial texture. Collectively they create perceptions of balance, symmetry, and equilibrium as follows.

1. "Balance" applies to the page elements on either a left/right or top/bottom comparison. Similarity of elements on both halves will increase the measure of balance. Note in Figure 3, that the elements are not "symmetric" even though the image has the same elements.

Figure 3. A pattern high in balance but moderate in symmetry.

Figure 4. Left: least balanced or symmetrical of the pages. Right: most balanced and symmetrical.

2. "Symmetry" refers to the degree to which the opposing half page mirrors the placement and size of the other half page. In Figure 4, the top rectangle reflects the size of the bottom image rectangle. There is also a left/right mirror of image variety, especially in the bottom rectangle.

3. "Equilibrium" measures the "lopsidedness" of an image, as in Figure 5. Distance from the physical midpoint plays a role, as in a doctor's scale for measuring body weight, where two massive image elements of different sizes might be brought into equilibrium by placing them at different distances from their physical center. They would be high in equilibrium but low in balance and symmetry.

Figure 5. This image measures low on "equilibrium" because the center of mass is clearly to the top left of the physical midpoint of the image.

"# of Quadrants". This shows information density as measured by iterative analysis of pixels in a page quadrant. A high number of quadrants reflects greater recursive depth at which pixel differences cease to be unpredictable. Thus, regions with dense information will contain a larger number of "leaves" (child quadrants) and will be perceived as having greater complexity.

Figure 6. Example of quadtree decomposition. The more unpredictable pixels present in the quadrant, the deeper and greater the number of child quadrants or "leaves".

Aesthetic outcomes from computerized analysis

The authors found their computer analysis correlated with subjective findings on three of the computer-generated measures: balance, symmetry, and # of quadrants.

Figure 7. Statistically significant correlations between human aesthetic judgments (top row) and computer measures (left column).

The authors suggest that equilibrium failed to correlate with any rating because web pages, by convention, are not organized around the midpoint of the screen.

On the other hand, balance (and symmetry to a lesser degree) constitutes the main tool by which graphic talent provides professional and appealing layout.

The # of quadrants has a negative correlation with "simple" and "professional". The more quadrants we have, the less simple and the less professional the rating. While this may sound challenging to overcome, the authors suggest that "raw informational" content can be made pleasing with addition of balance and/or symmetry.

In this context, the authors state "the high number of "leaves" – and therefore raw informational content – allows these designs not to be dull." So it's the job of the usability (you) and graphics staff (you, again?) to add enough balance and symmetry to tame pixel unpredictability.

The final word on visionary usability

We have come far in this UI Update.

We started with a demonstration that usability science will benefit from the aesthetic hand of our graphic colleagues. In fact, good graphical support can save our butts in the absence of good usability on a home page. And it can save everybody's butts, even with good usability.

Next, we learned that graphical evaluation of large-scale websites may never happen unless we employ the help of computerized image analysis. Home-page design is one thing. (Hang on to our graphic buddies!)

But, getting rave reviews on the other 8,000 automatically assembled pages is another thing.

Using traditional graphic concepts we find that indeed, pixels can communicate their degree of balance, symmetry, and pixel unpredictability in the # of quadrants measure.

We can translate these into useful measures of page appeal, simplicity, professionalism and avoidance of dullness.

It takes one usability visionary to see the visual in usability.

And, you are the one.

References

Phillips, C. and Chaparro, B.S. 2009. Visual Appeal vs. Usability: Which One Influences User Perceptions of a Website More? SURL: Software Usability Research Laboratory, Wichita State University. Usability News, 11 (2).

Zheng, X.S., Lin, J.J., Chakraborty, I., and Rauschenberger, R. 2009. Correlating Low-Level Image Statistics with Users' Rapid Aesthetic and Affective Judgments of Web Pages. Conference on Computer-Human Interaction (CHI), April 4-9, Boston, MA. Association of Computing Machinery.

I've worried about some of the usability gurus' websites that so obviously receive no graphic attention. They seem to make a statement that "Usability is just effective presentation of content." But now John points out the reality. Our user experience field is about much more.

The user experience field is about the overall subjective experience. It is about the ability of the site to engage and influence users. It is usually about conversion. So we must incorporate graphic skill sets and processes, as well as classic user-centered design resources. Just as sites developed ONLY by graphic artists generally fail, sites developed ONLY by UX staff fail as well.