BlogmyQuery – BMQ

It’s easy to see your top-visited pages, navigation patterns and conversion metrics using visitor-tracking tools like Google Analytics. However, this data doesn’t show the roadblocks that users typically run into on your website. Tracking and optimizing error messages will help you measurably improve your website’s user experience. We’ll walk through how to add error tracking using Google Analytics, with some code snippets. Then, we’ll assemble the data and analyze it to figure out how to improve your error message drop rates.

What To Track

The most helpful errors to track are form-field errors and 404 pages. Form-field errors can be captured after the form’s validation has run; this can be client-side or server-side, as long as you can trigger a Google Analytics event when an error message appears to a user. (We’ll be using Google Analytics in this article, but you can apply these concepts to many visitor-tracking tools, such as Omniture and Performable.)

Form-Field Errors

Forms that allow users to create an account, log in or check out are the places where most visitors will hit stumbling blocks that you are not aware of. Pick pages with forms that have high exit rates or that have high total page views but low unique page views. This could indicate that users are repeatedly trying to submit the form but are encountering problems.

The easiest way to track form-field errors with Google Analytics is to track an event each time a user sees an error message. The specification for _trackEvent is:

_trackEvent(category, action, opt_label, opt_value)

If the form is for signing in and the user submits an incorrect password, I might use the following code:

<script type='text/javascript'>
  _gaq.push(['_trackEvent', 'Error', 'Sign In', 'Incorrect Password']);
</script>

If possible, store the error message’s text as a variable, and call this variable within Google Analytics’ event tracker. This way, as you change the text of the error message over time, you can measure the differences between the versions. For example, in PHP, I might write:

<?php
  $message = 'Incorrect password';
  if ($message) { ?>
  <script type='text/javascript'>
    _gaq.push(['_trackEvent', 'Error', 'Sign In', '<?php echo $message ?>']);
  </script>
<?php } ?>

If it’s possible for the user to receive more than one error message on the page at a time (for example, if they’ve missed more than one field in a form), then you might want to store all of the messages in the same event tracker. Use an array, or concatenate them into the variable that you call in your event tracker. You might see that a user has attempted to skip all of the fields in a form; this could indicate that they are testing the form to see which fields are required and which are optional. You’ll notice this if you have tracked an event that includes all missing fields in the same event. However, storing all of the messages in the same event might prevent you from tracking the effects of individual error messages over time, so begin by tracking each error message separately.

404 Pages

You might already know how many times your 404 page is being viewed, but do you know which URLs the users were trying to reach, or what websites are referring to those URLs? By adding a tracking code to your 404 pages, you can see both. The following snippet will include the URL that generated the 404 error and the URL that linked to that page:

<script type="text/javascript">
  _gaq.push(['_trackEvent', 'Error', '404', 'page: ' + document.location.pathname + document.location.search + ' ref: ' + document.referrer ]);
</script>

Google Analytics Reports

As you track errors as events using Google Analytics, you will find a list of them in your reports under “Event Tracking,� under the “Content� menu. Choose “Categories,� and then start drilling down through your error types.

You can save any of these graphs to your dashboard with the “Add to Dashboard� button at the top of each screen. I find it useful to list the top 404 errors on my dashboard, so that I can see whether anything new has popped up when I log in.

Google Analytics also lets you know of spikes in error messages. The “Intelligence� section allows you to set an alert for when a certain metric reaches a specified threshold. In my case, I want to know when the number of unique 404 errors has increased by more than 20% over the previous day.

In your custom alert, set the alert’s conditions to include “Event Action,� matching your error’s name exactly. In this case, the error name is “404.� Set it to alert you when the “Unique Events� percentage increases by more than 20% over the previous day. Be sure to check the box for the option to receive an email when this alert triggers!

Once you have captured enough data to analyze, start creating these dashboard widgets and alerts in Google Analytics, so that you can make informed decisions on how to improve your website.

How To Analyze Errors

Error messages will help you see in aggregate the most common stumbling blocks for users. Are a lot of users encountering errors with a particular text field? Perhaps the field for the expiration date of their credit card? Or for their email address? You might be surprised by what your users encounter.

Segmenting Data

If your website gets a lot of traffic, consider segmenting the user base to analyze the error messages. Look for groups of users who make up the majority of a certain kind of error event, because there may be something unique about that segment.

“New Visitors� are first-time visitors to your website. They are likely unfamiliar with the typical flow of your navigation and are brand new to your forms and so don’t know what fields are required. “Returning Visitors� will likely be familiar with your website, so they may not have a large impact on error rates (unless you’ve changed something that catches them by surprise).

To change the user segment that you’re looking at, go to your list of error events and click the drop-down menu next to “Advanced Segments.� By selecting “New Visitors� and then hitting “Apply,� the data will update to show only the errors that “New Visitors� have encountered.

Break down your data on error messages according to user segment in order to analyze the data more deeply.

Segmenting users by country can also give more context. I once wrestled with why so many users were triggering error messages for ZIP and postal codes in a form. After organizing the data by country, I saw a high number of errors from one country whose postal-code syntax I hadn’t accounted for in my form’s validation. I fixed the error and saw the error rate for ZIP and postal codes drop.

Check errors by country to see whether any patterns emerge in your error messages.

Referring sources for 404 pages is another way to examine the data. Use the “Filter Event Label� search bar to show errors whose referring source is a particular domain. Searching your own domain first is useful to see which incorrect URLs you can quickly fix on your own website.

Prioritize Issues

After segmenting the data, prioritize the errors that you want to fix. The top priority will be errors that affect a large group of people (i.e. ones that have a high number of unique events). Next, work on the errors that you know you can easily fix. You likely already know the cause of some errors (poor validation, unhelpful error message, etc.), so clean those up. For 404 errors, check which referring links come from your website, and fix those.

Examine 404 errors to see whether any particular referring links can be easily fixed.

Once you’ve cleaned up the errors that are easy to fix, track the new data for at least a week before doing another round of prioritization. Examine what has changed in the top errors and where they come from, and then research the cause of those errors.

Often, forms will need to be made more intuitive to help users avoid error messages. For example, if a lot of users are making mistakes when entering a date, then play with that field. Does your user base prefer drop-down menus for days, months and years? Do they make fewer errors if given a date picker? Are you giving them helpful examples of the syntax they need to follow? Track your changes and measure the rate of error events after each change to see what decreases user error.

Improve Your Error Messages

Improving the text, design and layout of your error messages could decrease the number of repeated errors by users. An error message might not be clear or might be hidden on the page; improve the user experience by testing changes to your error messages.

I prefer A/B testing to compare the effectiveness of error messages and their designs. On one form, I noticed that a number of users were skipping the phone-number field altogether, even though I’d indicated that it was required.

Some of the indicators of a required field that we tested.

After A/B testing different ways to indicate that the field was required and why it was required, we found that the combination of a link and a tooltip helped users recognize the need to fill in their phone number. This solution drastically decreased the rate of errors for this field.

On 404 pages, test out different content on users: link to your most popular pages; present a search form; try humorous content or Easter eggs to lighten the users’ spirits.

As you test different textual and design changes to your error messages, be sure to measure their effectiveness. Examine the following:

• Total error events, and total events per error message;
• Unique events per error message;
• Exit rates on pages with forms and 404 pages.

All of these rates should drop. Ideally, your users should find the website so intuitive that your error event data will represent only those who try to “beat the system.�

Conclusion

To sum up, track error messages and 404 pages as events in Google Analytics, and analyze the top error patterns. Prioritize the causes of errors, and continue to improve your forms and 404 pages to avoid errors altogether. Lastly, test changes in the content and design of error messages to see whether they decrease repeated errors. Improving your forms, 404 pages and error messages will improve your website’s overall user experience.

Additional Resources

• “Event Tracking Guide,â€� Google Analytics
• “A Primer on A/B Testing,â€� A List Apart
• “Optimizing Error Pages: Creating Opportunities Out of Mistakes,â€� Smashing Magazine
• “Web Form Validation: Best Practices and Examples,â€� Smashing Magazine

(al)

---

© Lara Swanson for Smashing Magazine, 2011.

In school, I hated math. It was a dire, dry and boring thing with stuffy old books and very theoretical problems. Even worse, a lot of the tasks were repetitive, with a simple logical change in every iteration (dividing numbers by hand, differentials, etc.). It was exactly the reason why we invented computers. Suffice it to say, a lot of my math homework was actually done by my trusty Commodore 64 and some lines of Basic, with me just copying the results later on.

These tools and the few geometry lessons I had gave me the time and inspiration to make math interesting for myself. I did this first and foremost by creating visual effects that followed mathematical rules in demos, intros and other seemingly pointless things.

There is a lot of math in the visual things we do, even if we don’t realize it. If you want to make something look natural and move naturally, you need to add a bit of physics and rounding to it. Nature doesn’t work in right angles or linear acceleration. This is why zombies in movies are so creepy. This was covered here before in relation to CSS animation, but today let’s go a bit deeper and look at the simple math behind the smooth looks.

Going From 0 To 1 Without Being Boring

If you’ve just started programming and are asked to go from 0 to 1 with a few steps in between, you would probably go for a for loop:

for ( i = 0; i <= 1; i += 0.1 ) {
  x = i;
  y = i;
…
}

This would result in a line on a graph that is 45 degrees. Nothing in nature moves with this precision:

A simple way to make this movement a bit more natural would be to simply multiply the value by itself:

for ( i = 0; i <= 1; i += 0.1 ) {
  x = i;
  y = i * i;
}

This means that 0.1 is 0.01, 0.2 is 0.04, 0.3 is 0.09, 0.4 is 0.16, 0.5 is 0.25 and so on. The result is a curve that starts flat and then gets steeper towards the end:

You can make this even more pronounced by continuing to multiply or by using the “to the power ofâ€� Math.pow() function:

for ( i = 0; i <= 1; i += 0.1 ) {
  x = i;
  y = Math.pow( i, 4 );
}

This is one of the tricks of the easing functions used in libraries such as jQuery and YUI, as well as in CSS transitions and animations in modern browsers.

You can use this the same way, but there is an even simpler option for getting a value between 0 and 1 that follows a natural motion.

Not A Sin, Just A Natural Motion

Sine waves are probably the best thing ever for smooth animation. They happen in nature: witness a spring with a weight on it, ocean waves, sound and light.
In our case, we want to move from 0 to 1 smoothly.

To create a movement that goes from 0 to 1 and back to 0 smoothly, we can use a sine wave that goes from 0 to π in a few steps. The full sine wave going from 0 to π × 2 (i.e. a whole circle) would result in values from -1 to 1, and we don’t want that (yet).

var counter = 0;

// 100 iterations
var increase = Math.PI / 100;

for ( i = 0; i <= 1; i += 0.01 ) {
  x = i;
  y = Math.sin(counter);
  counter += increase;
}

A quick aside on numbers for sine and cosine: Both Math.sin() and Math.cos() take as the parameter an angle that should be in radians. As humans, however, degrees ranging from 0 to 360 are much easier to read. That’s why you can and should convert between them with this simple formula:

var toRadian = Math.PI / 180;
var toDegree = 180 / Math.PI;

var angle = 30;

var angleInRadians = angle * toRadian;
var angleInDegrees = angleInRadians * toDegree;

Back to our sine waves. You can play with this a lot. For example, you could use the absolute value of a full 2 × π loop:

var counter = 0;
// 100 iterations
var increase = Math.PI * 2 / 100;

for ( i = 0; i <= 1; i += 0.01 ) {
  x = i;
  y = Math.abs( Math.sin( counter ) );
  counter += increase;
}

But again, this looks dirty. If you want the full up and down, without a break in the middle, then you need to shift the values. You have to half the sine and then add 0.5 to it:

var counter = 0;
// 100 iterations
var increase = Math.PI * 2 / 100;

for ( i = 0; i <= 1; i += 0.01 ) {
  x = i;
  y = Math.sin( counter ) / 2 + 0.5;
  counter += increase;
}

So, how can you use this? Having a function that returns -1 to 1 to whatever you feed it can be very cool. All you need to do is multiply it by the values that you want and add an offset to avoid negative numbers.

For example, check out this sine movement demo:

Looks neat, doesn’t it? A lot of the trickery is already in the CSS:

.stage {
  width:200px;
  height:200px;
  margin:2em;
  position:relative;
  background:#6cf;
  overflow:hidden;
}

.stage div {
  line-height:40px;
  width:100%;
  text-align:center;
  background:#369;
  color:#fff;
  font-weight:bold;
  position:absolute;
}

The stage element has a fixed dimension and is positioned relative. This means that everything that is positioned absolutely inside it will be relative to the element itself.

The div inside the stage is 40 pixels high and positioned absolutely. Now, all we need to do is move the div with JavaScript in a sine wave:

var banner = document.querySelector( '.stage div' ),
    start = 0;
function sine(){
  banner.style.top = 50 * Math.sin( start ) + 80 + 'px';
  start += 0.05;
}
window.setInterval( sine, 1000/30 );

The start value changes constantly, and with Math.sin() we get a nice wave movement. We multiply this by 50 to get a wider wave, and we add 80 pixels to center it in the stage element. Yes, the element is 200 pixels high and 100 is half of that, but because the banner is 40 pixels high, we need to subtract half of that to center it.

Right now, this is a simple up-and-down movement. Nothing stops you, though, from making it more interesting. The multiplying factor of 50, for example, could be a sine wave itself with a different value:

var banner = document.querySelector( '.stage div' ),
    start = 0,
    multiplier = 0;
function sine(){
  multiplier = 50 * Math.sin( start * 2 );
  banner.style.top = multiplier * Math.sin( start ) + 80 + 'px';
  start += 0.05;
}
window.setInterval( sine, 1000/30 );

The result of this is a banner that seems to tentatively move up and down. Back in the day and on the very slow Commodore 64, calculating the sine wave live was too slow. Instead, we had tools to generate sine tables (arrays, if you will), and we plotted those directly. One of the tools for creating great sine waves so that you could have bouncing scroll texts was the Wix Bouncer:

Circles In The Sand, Round And Round…

Circular motion is a thing of beauty. It pleases the eye, reminds us of spinning wheels and the earth we stand on, and in general has a “this is not computer stuff� feel to it. The math of plotting something on a circle is not hard.

It goes back to Pythagoras, who, as rumor has it, drew a lot of circles in the sand until he found his famous theorem. If you want to use all the good stuff that comes from this theorem, then try to find a triangle with a right angle. If this triangle’s hypothenuse is 1, then you can easily calculate the horizontal leg as the cosine of the angle and the vertical leg as the sine of the angle:

How is this relevant to a circle? Well, it is pretty simple to find a right-angle triangle in a circle to every point of it:

This means that if you want to plot something on a circle (or draw one), you can do it with a loop and sine and cosine. A full circle is 360°, or 2 × π in radians. We could have a go at it — but first, some plotting code needs to be done.

A Quick DOM Plotting Routine

Normally, my weapon of choice here would be canvas, but in order to play nice with older browsers, let’s do it in plain DOM. The following helper function adds div elements to a stage element and allows us to position them, change their dimensions, set their color, change their content and rotate them without having to go through the annoying style settings on DOM elements.

Plot = function ( stage ) {

  this.setDimensions = function( x, y ) {
    this.elm.style.width = x + 'px';
    this.elm.style.height = y + 'px';
    this.width = x;
    this.height = y;
  }
  this.position = function( x, y ) {
    var xoffset = arguments[2] ? 0 : this.width / 2;
    var yoffset = arguments[2] ? 0 : this.height / 2;
    this.elm.style.left = (x - xoffset) + 'px';
    this.elm.style.top = (y - yoffset) + 'px';
    this.x = x;
    this.y = y;
  };
  this.setbackground = function( col ) {
    this.elm.style.background = col;
  }
  this.kill = function() {
    stage.removeChild( this.elm );
  }
  this.rotate = function( str ) {
    this.elm.style.webkitTransform = this.elm.style.MozTransform =
    this.elm.style.OTransform = this.elm.style.transform =
    'rotate('+str+')';
  }
  this.content = function( content ) {
    this.elm.innerHTML = content;
  }
  this.round = function( round ) {
    this.elm.style.borderRadius = round ? '50%/50%' : '';
  }
  this.elm = document.createElement( 'div' );
  this.elm.style.position = 'absolute';
  stage.appendChild( this.elm );

};

The only things that might be new here are the transformation with different browser prefixes and the positioning. People often make the mistake of creating a div with the dimensions w and h and then set it to x and y on the screen. This means you will always have to deal with the offset of the height and width. By subtracting half the width and height before positioning the div, you really set it where you want it — regardless of the dimensions. Here’s a proof:

Now, let’s use that to plot 10 rectangles in a circle, shall we?

var stage = document.querySelector('.stage'),
    plots = 10;
    increase = Math.PI * 2 / plots,
    angle = 0,
    x = 0,
    y = 0;

for( var i = 0; i < plots; i++ ) {
  var p = new Plot( stage );
  p.setBackground( 'green' );
  p.setDimensions( 40, 40 );
  x = 100 * Math.cos( angle ) + 200;
  y = 100 * Math.sin( angle ) + 200;
  p.position( x, y );
  angle += increase;
}

We want 10 things in a circle, so we need to find the angle that we want to put them at. A full circle is two times Math.PI, so all we need to do is divide this. The x and y position of our rectangles can be calculated by the angle we want them at. The x is the cosine, and the y is the sine, as explained earlier in the bit on Pythagoras. All we need to do, then, is center the circle that we’re painting in the stage (200,200 is the center of the stage), and we are done. We’ve painted a circle with a radius of 100 pixels on the canvas in 10 steps.

The problem is that this looks terrible. If we really want to plot things on a circle, then their angles should also point to the center, right? For this, we need to calculate the tangent of the right-angle square, as explained in this charming “Math is funâ€� page. In JavaScript, we can use Math.atan2() as a shortcut. The result looks much better:

var stage = document.querySelector('.stage'),
    plots = 10;
    increase = Math.PI * 2 / plots,
    angle = 0,
    x = 0,
    y = 0;

for( var i = 0; i < plots; i++ ) {
  var p = new Plot( stage );
  p.setBackground( 'green' );
  p.setDimensions( 40, 40 );
  x = 100 * Math.cos( angle ) + 200;
  y = 100 * Math.sin( angle ) + 200;
  p.rotate( Math.atan2( y - 200, x - 200 ) + 'rad' );
  p.position( x, y );
  angle += increase;
}

Notice that the rotate transformation in CSS helps us heaps in this case. Otherwise, the math to rotate our rectangles would be much less fun. CSS transformations also take radians and degrees as their value. In this case, we use rad; if you want to rotate with degrees, simply use deg as the value.

How about animating the circle now? Well, the first thing to do is change the script a bit, because we don’t want to have to keep creating new plots. Other than that, all we need to do to rotate the circle is to keep increasing the start angle:

var stage = document.querySelector('.stage'),
    plots = 10;
    increase = Math.PI * 2 / plots,
    angle = 0,
    x = 0,
    y = 0,
    plotcache = [];

for( var i = 0; i < plots; i++ ) {
  var p = new Plot( stage );
  p.setBackground( 'green' );
  p.setDimensions( 40, 40 );
  plotcache.push( p );
}

function rotate(){
  for( var i = 0; i < plots; i++ ) {
    x = 100 * Math.cos( angle ) + 200;
    y = 100 * Math.sin( angle ) + 200;
    plotcache[ i ].rotate( Math.atan2( y - 200, x - 200 ) + 'rad' );
    plotcache[ i ].position( x, y );
    angle += increase;
  }
  angle += 0.06;
}

setInterval( rotate, 1000/30 );

Want more? How about a rotating text message based on this? The tricky thing about this is that we also need to turn the characters 90° on each iteration:

var stage = document.querySelector('.stage'),
    message = 'Smashing Magazine '.toUpperCase(),
    plots = message.length;
    increase = Math.PI * 2 / plots,
    angle = -Math.PI,
    turnangle = 0,
    x = 0,
    y = 0,
    plotcache = [];

for( var i = 0; i < plots; i++ ) {
  var p = new Plot( stage );
  p.content( message.substr(i,1) );
  p.setDimensions( 40, 40 );
  plotcache.push( p );
}
function rotate(){
  for( var i = 0; i < plots; i++ ) {
    x = 100 * Math.cos( angle ) + 200;
    y = 100 * Math.sin( angle ) + 200;
    // rotation and rotating the text 90 degrees
    turnangle = Math.atan2( y - 200, x - 200 ) * 180 / Math.PI + 90 + 'deg';
    plotcache[ i ].rotate( turnangle );
    plotcache[ i ].position( x, y );
    angle += increase;
  }
  angle += 0.06;
}

setInterval( rotate, 1000/40 );

Again, nothing here is fixed. You can make the radius of the circle change constantly, as we did with the bouncing banner message earlier (below is only an excerpt):

multiplier = 80 * Math.sin( angle );
for( var i = 0; i < plots; i++ ) {
  x = multiplier * Math.cos( angle ) + 200;
  y = multiplier * Math.sin( angle ) + 200;
  turnangle = Math.atan2( y - 200, x - 200 ) * 180 / Math.PI + 90 + 'deg';
  plotcache[ i ].rotate( turnangle );
  plotcache[ i ].position( x, y );
  angle += increase;
}
angle += 0.06;

And, of course, you can move the center of the circle, too:

rx = 50 * Math.cos( angle ) + 200;
ry = 50 * Math.sin( angle ) + 200;
for( var i = 0; i < plots; i++ ) {
  x = 100 * Math.cos( angle ) + rx;
  y = 100 * Math.sin( angle ) + ry;
  turnangle = Math.atan2( y - ry, x - rx ) * 180 / Math.PI + 90 + 'deg';
  plotcache[ i ].rotate( turnangle );
  plotcache[ i ].position( x, y );
  angle += increase;
}
angle += 0.06;

For a final tip, how about allowing only a certain range of coordinates?

function rotate() {
  rx = 70 * Math.cos( angle ) + 200;
  ry = 70 * Math.sin( angle ) + 200;
  for( var i = 0; i < plots; i++ ) {
    x = 100 * Math.cos( angle ) + rx;
    y = 100 * Math.sin( angle ) + ry;
    x = contain( 70, 320, x );
    y = contain( 70, 320, y );
    turnangle = Math.atan2( y - ry, x - rx ) * 180 / Math.PI + 90 + 'deg';
    plotcache[ i ].rotate( turnangle );
    plotcache[ i ].position( x, y );
    angle += increase;
  }
  angle += 0.06;
}
function contain( min, max, value ) {
  return Math.min( max, Math.max( min, value ) );
}

Summary

This was just a quick introduction to using exponentials and sine waves and to plotting things on a circle. Have a go with the code, and play with the numbers. It is amazing how many cool effects you can create with a few changes to the radius or by multiplying the angles. To make it easier for you to do this, below are the examples on JSFiddle to play with:

• Sine bouncing message
• Double sine bouncing message
• Offset issue with plotting
• Distributing elements on a circle
• Distributing elements on a circle with correct angles
• Rotating a circle of boxes
• Oscillating rotating message
• Rotating message in a circle movement
• Boxed rotated message scroller

(il) (al)

---

© Christian Heilmann for Smashing Magazine, 2011.

Creative is as creative does, except when your creative spark fizzles out. Looming deadlines, over-fussy clients, dull projects, or feelings of fatigue that may signal the beginnings of burnout—any of these everyday afflictions can tamp down your creative fire, making it tough to come up with creative ideas just when you need them most. But fear not! Denise Jacobs shares sure-fire strategies to reignite your creative spark.

Every site or service will fail eventually. An emergency communications strategy can get you through the crisis faster and reassure your users while you're putting out the fire. Learn to imagine, prioritize, and prepare for everything that can go wrong, assign roles in advance to get you through the crisis, and communicate effectively with your customers throughout the experience.

Texture is becoming integral to design. It’s gone beyond being a trend — it’s now a simple and effective way to add depth to a website. Wielding the power of texture is a great responsibility. It increases the effectiveness of websites and is a quality tool in the arsenal of designers. It can guide the user’s eye and emphasize the importance of key elements.

However, texture has long been synonymous with “dirty� or “grungy� design. Its overuse can be seen throughout the world of music group websites and has left a bad taste in the mouths of designers. Due to its frequent misuse, its benefits have long been overlooked. Texture can bring a website together, but should not be the main focus.

Textures vs. Patterns

Before we get into textures in depth, let’s distinguish between patterns and textures. These words are often used synonymously. Patterns are typically small, repeating, tileable elements, whereas textures tend to be much bigger images that don’t repeat. Imagine a Venn diagram, with textures on the left and patterns on the right, with a little overlap in the middle. So, some textures are also patterns. Several of the tileable texture packs found on Tileables are good examples.

The Function Of Textures

We love texture on the Web for a multitude of reasons. Design decisions shouldn’t be made simply on the basis of, “Oh, well. It looks good.� Design should serve a purpose, and each decision about texture should be made by weighing the pros and cons. Let’s start by going over some of the key benefits.

Grabbing Attention With a Call to Action

Texture can highlight elements such as titles, headings, icons and buttons. It draws the eye to calls to action and main headings. This is perhaps the clearest way that the trend towards textures is catching on.

When used minimally, texture separates the content from the rest of the website. It guides the user’s eye directly to the intended element. It can be a great way to separate key branding elements.

You can grab attention in different ways, but two common ways can be easily demonstrated with branding: a textured logo against a clean background, and a clean logo against a textured background.

Notice how Poco People’s grunge logo is accentuated against the clean background.

Cultural Solutions UK’s branding is the opposite: a clean logo against a textured background.

Enhancing Information Architecture

Texture can be used to guide the eye. And like lines, boxes and contrast, it can be used to separate content into logical divisions. Using it effectively in conjunction with other methods is vital. The goal is not to abandon other methods of information architecture, but to enhance their effectiveness.

By setting off the sliding banner with a texture, A Modern Eden highlights the content within.

See how you can use textures without violating best practices? High contrast and legibility are evident and work in tandem with the texture.

Sky’s Guide Service perfectly separates its content with textured elements.

Above, each element is individually textured for a particular purpose. Sky’s Guide Service divides the content into logical sections, and the user sees where they start and end. Texture enhances the information architecture by creating logical content areas that help the user process the information accurately.

Also, the texture perfectly suits the style and topic of the website. All of the elements are custom-tailored to fit a logical theme, thus enhancing the website’s overall message.

Building an Atmosphere and Bolstering Identity

More and more, clients want website designs that do more than display their content in a user-friendly way. They want websites that enhance their identity and enable users to identify with the brand. Texture can be used to achieve this in many ways.

While texture is plenteous on Deda, it is gentle and never over-bearing.

Deidre “Dedaâ€� Bain does exactly this for her personal brand. Her use of texture helps to put a face — almost literally — to the service. Without the texture, the website would be rather bland and would lack the personality of its creator. With legibility and a proper information architecture, the design would still be nice, but that extra something would be missing.

Texture adds to the “intangibles� of Web design: that wow factor and sexiness of a memorable website.

Tips And General Advice

All of this is fine and dandy, but you’ll want to avoid common traps while refining certain techniques and modes of thought.

Maintain Legibility

Never (ever!) sacrifice legibility for texture. Many of us make this mistake, and will continue to for a while to come. Legibility on the Web is paramount in importance. If a user can’t even read the message, then what’s the point in composing it, let alone texturing it?

Avoid doing this to your type:

Sometimes, we go a bit overboard. This poster shows what happens when you get too excited about texture.

Don’t Beat a Dead Horse

In print, texture is hard to overdo — depending on the genre, of course. On the Web, however, texture can be extremely distracting when used in “bulk.â€�

On Hinder’s website, legibility gets lost in the menu, and the texture is distracting. (And watch out for the auto-playing music.) Oops!

Practice Means Improvement

Experiment with your designs. Try new things. Apply textures in places where you wouldn’t normally put them. Use textures that you’ve never used before. You never know what you’ll discover until you try it.

If It Serves No Purpose, Take It Out

Refine your technique before using it on a client’s website. Always make sure that your use of texture is based on a sound plan, as would be the case with any website you create. If you can’t justify something that you’ve done as being an improvement, take it out.

There’s no point in overdoing texture. The entire purpose of the Web is to disseminate information. How can you accomplish this if your content is unreadable? Besides, subtlety and nuance are a better way to demonstrate mastery of a subject.

Consider the Effect You Are Trying to Achieve

As we know from experience, getting carried away with texture is all too easy. Keeping in mind the final effect you are trying to achieve is the best way to avoid this. If you want a subtle textured background, just do it and then move on to the next item on your list. Otherwise, you’ll never get it done.

Collect Resources So That You Don’t Have to Search Later

You can save a huge amount of time by downloading and archiving resources that seem useful to you. Keeping your files organized is a great back-up plan. Trust us: nothing is more frustrating than coming across the perfect brush pack and not being able to remember where you found it. Our list of brushes is long and diverse. We’ve been collecting the brushes over the years from websites such as deviantART and Brusheezy, from the freebie sections of various design blogs, and by making our own.

Learn Masks

Learning to work with layer masks will save you a lot of time in the long run and will be a strong tool in your arsenal. Masks are also a fantastic way to non-destructively experiment with your designs. A lot of great tutorials are out there; a quick Google search led me to “Understanding Layer Masks in Photoshop.�

Don’t Sacrifice Quality for Loading Time

There are plenty of interesting ways to keep textures from killing loading times. But don’t sacrifice the quality of the texture too much, because rather than appearing finished and professional, the website will look outdated right out of the gate. Repeating texture patterns are a good way to save on the loading times of backgrounds and larger elements.

Of course, we want to design with the Web’s inherent constraints in mind, but as Internet connection speeds rise globally, loading time shouldn’t be your primary concern. Nevertheless, use texture within reason: a website with a lot of textures will inevitably have a long loading time. A simple method to get around file size is to use repeating textures, especially for backgrounds. Tileables is a fantastic resource to get started. And we’re always learning about CSS Sprites and using Smush.it to further compress our files.

The difference in texture quality here is major. The texture on the left is compressed. The one on the right is, too, but not as much.

Choose Textures Logically

Lastly, and perhaps as important as maintaining legibility, choose textures that are logical for your design. If you’re building a website for a furniture store, then rusty textures wouldn’t make a whole lot of sense. Textures are meant to build identity, not to confuse the visitor, regardless of whether they look good. Usability should always take precedence.

Textures: A D.I.Y. Attitude

One of the many ways to get textures is to create them yourself. We are big proponents of this because it can save you time and give the exact result you’re looking for. And don’t worry: it’s not as difficult as it looks.

Snap Some Photos

The simplest method is to grab your trusty digital camera and snap shots of textures that are around you, especially ones that you’ve never considered to be “textures.� Unique textures can advance your style. For example, would you consider the top of a cake or bubbles in a sink as workable textures? They’re all around you.

This photo from Lost and Taken demonstrates that a distinctive photograph can be used for a special-purpose texture.

If you look around yourself, you will see plenty of grunge: worn-down buildings, concrete walls, rusted metal, tree bark, weathered wood. These are all fantastic specimens. In fact, a decent point-and-shoot camera is enough to start. We started shooting our own textures with an old Nikon Coolpix 4200, which worked flawlessly.

When you shoot, you could use full auto mode. But don’t use flash, because it will “flatten� the image and remove most of the detail in the texture, especially in close-up shots. Let the camera do the work, and always take multiple shots of a texture to get the best possible result. You can always rely on post-processing in your favorite image editor.

Scanners Work, Too

Another great tool is the good ol’ flatbed scanner. Old paper, cardboard, mouse pads (shout out to Trent Walton for this idea), paper bags, skin — the list of what you can scan goes on. Scan at a very high resolution, 600 to 1200 DPI, so that the texture is of high quality and can be adapted to any project, including large print pieces. High-resolution scans also allow you to isolate particular spots in an image to use as a texture.

Once you’re comfortable with that, you can start creating elements using traditional art techniques. For example, apply a bit of charcoal to some beautiful heavy paper, which could be the finishing touch for that grunge background you’ve been after. What about acrylic paint splatters to add depth to your UI? Or coffee stains on paper? The possibilities are endless!

Icing on the Cake

You can always spice up the process by combining textures. Using the layer blending modes in Photoshop, you can combine various textures into one. Caleb of Lost and Taken has posted an in-depth walkthrough of the process that he follows to create his packs.

Believe it or not, Photoshop’s somewhat gimmicky filters can also be used to create textures. Noise textures are a snap with the Noise filter. Playing with the values and levels of the filter, you can obtain results for a wide range of needs. There’s also the Texturize filter, although it’s rather gimmicky and rarely useful. Still, it could help you achieve part of the effect you’re going for.

A brief experiment with noise filters. Light noise is better, but make sure you can still see the effect.

If you want the texture to be seamless, then a uniform distribution is easier to work with. “Monochromatic� ensures that the texture has no color noise that could conflict with other colors in your design.

If you’re interested in learning the basic techniques of applying texture to elements, we’ve produced several videos to get you started. More advanced users may already know these techniques but might want to brush up on them anyway. Either way, we hope you find them useful.

A demonstration of using brushes, levels and layers to create texture.

A demonstration of using texture files, packs, levels and layers to create texture.

A combination of the two techniques above, with an overview of more advanced ideas.

Articles and Resources

Articles and Tutorials

• “Adding Texture in Photoshop,â€� Method & Craft
• “Creating Tileable Textures,â€� Method & Craft
• “Vintage Effects Within Illustrator,â€� Method & Craft
• “Design a Vintage Poster With Vector Pack 16, Part 1,â€� GoMediaZine
• “Design a Vintage Poster, Part 2,â€� GoMediaZine

Free Resources

• Smashing Magazine’s Free Textures (2000 free textures)
• Lost and Taken
• Subtle Patterns
• Projectdd
• Valleys in the Vinyl
• deviantART
• Flickr
• Tileables

Premium Resources

• Arsenal, Go Media
• WeGraphics
• GraphicRiver
• Vandelay Premier
• Premium Textures
• Zen Textures
• 48 Pixel Patterns

Related Posts

You might be interested in the following related posts here, on Smashing Magazine:

• Smashing Magazine’s Free Textures (2000 free textures)
• 100 Beautiful Free Textures

(al) (tg) (vf)

---

© Jon Savage and Simon H. for Smashing Magazine, 2011.