In the last post, we introduced the idea of spriting, an easy way to animate in JavaScript that works in all browsers. We also walked through how to set up the sprite as a background image for a div and then use a line of JavaScript to change the background position to make it appear as if the image has moved.

In this post, we will use this technique to animate both running and jumping motions. In order to create the animation, we will need to quickly change the background position at a regular interval. Take a look again at the sprite we are using.

Meet J, the mascot for my company, Joust Multimedia.

In our example, we have ten total images: one of J standing facing right, three of J running to the right and one of J jumping while facing right (with the same number of each frame facing left). Let's start with making him run to the right. In order to make our image look like it is running, we will need to do two things: change the sprite to a different image and move the div towards the right.

Running to the Right Animation

We certainly won't want to be stuck clicking different buttons to cycle through the sprites, so we will need to create some functions that do this automatically.

For our running function, we want to:

1. Move the div towards the right slightly
2. Move to the next frame of animation
3. Pause for a fraction of a second (to preserve the "persistence of vision" illusion)
4. Loop the function again

Fortunately, there is an easy way to loop with functions. A native command in JavaScript called setTimeout will allow us to create a timed delay, after which we will call the function again (from inside the function).

function run_right(){
      // Move slightly to the right ...
      // Change to the next frame of animation ...
    
      // this will call 'run_right' again after 200 milliseconds
      setTimeout(function(){run_right();}, 200); 
    }

So now we have a function that will call itself again five times a second (which will be fast enough to create animation for our purposes). Remember here that browsers are not terribly accurate with their timers. You can specify timing to the millisecond, but that doesn't mean your script will run at that timing exactly!

Our next problem to tackle is how is our function going to know which sprite to change to? In our example, we will need to cycle back and forth through our three images (to have four total frames of animation). To do this, we are going to pass our function a bit of information to tell it which slide to switch to. Once in the function, we will do a test that will check which slide we should be on, then switch the background position to the correct sprite. When we call the function again, we will pass the next slide as the argument.

function run_right(slide){
      // Move slightly to the right ...
      switch (slide){ // this switch statement checks for different possibilities for 'slide'
        case 1: // if 'slide' equals '1' ...
          document.getElementById('j').style.backgroundPosition = "-40px 0px";
          setTimeout(function(){run_right(2);}, 200);
          break;
        case 2: // if 'slide' equals '2' ...
          document.getElementById('j').style.backgroundPosition = "-80px 0px";
          setTimeout(function(){run_right(3);}, 200);
          break;
        case 3: // if 'slide' equals '3' ...
          document.getElementById('j').style.backgroundPosition = "-120px 0px";
          setTimeout(function(){run_right(4);}, 200);
          break;
        case 4: // if 'slide' equals '4' ...
          document.getElementById('j').style.backgroundPosition = "-80px 0px";
          setTimeout(function(){run_right(1);}, 200);
          break;
      }
    }

And now when we call the function for the first time, we will need to make sure we pass the starting slide.

<input type="button" value="Run Right" onclick="run_right(1);" />

Similarly, to move our div to the right slightly, we can pass the initial left attribute of the div, then move the div slightly each time the function is called.

function run_right(slide, left){
      
      left = left + 15; // Increase his left attribute by 15px
      document.getElementById('j').style.left = left+"px";
      
      switch (slide){ // this switch statement checks for different possibilities for 'slide'
        case 1: // if 'slide' equals '1' ...
          document.getElementById('j').style.backgroundPosition = "-40px 0px";
          setTimeout(function(){run_right(2, left);}, 200);
          break;
        case 2: // if 'slide' equals '2' ...
          document.getElementById('j').style.backgroundPosition = "-80px 0px";
          setTimeout(function(){run_right(3, left);}, 200);
          break;
        case 3: // if 'slide' equals '3' ...
          document.getElementById('j').style.backgroundPosition = "-120px 0px";
          setTimeout(function(){run_right(4, left);}, 200);
          break;
        case 4: // if 'slide' equals '4' ...
          document.getElementById('j').style.backgroundPosition = "-80px 0px";
          setTimeout(function(){run_right(1, left);}, 200);
          break;
      }
    }

And when we initially call the function, we need to make sure we pass the current left position of our div.

<input type="button" value="Run Right" onclick="run_right(1, document.getElementById('j').offsetLeft);" />

Stopping the Animation

So, now we have a function that, when called, will animate J to run to the right. Unfortunately, we have no way to stop it. First of all, we will need to make the function stop calling itself if J runs to the edge of our stage. To do that, every time the function runs, we will check an if statement to see if J has room to keep running. If so, we will run the function like normal. If not, we will stop calling the function and return him to the standing sprite.

function run_right(slide, left){
      // If we can add 15 pixels to the left and have J's right edge not be at the stage's right edge ...
      if ((left + 15) < (document.getElementById('stage').offsetWidth - document.getElementById('j').offsetWidth)){
        // We have room! Continue like normal here
      } else { // if we are on the right edge, we need to stop calling the function and return to standing
        document.getElementById('j').style.backgroundPosition = "0px 0px";
      }
    }

Finally, we will want to have a way to stop the function, when needed. We can set the setTimeout() command to a variable, then stop it with the clearTimeout() command. In order to do this, we will need to declare that variable outside of the function, so that we will be able to refer to it later. For now, we will declare it as a global variable. This is terrible coding practice, but we will correct this in the next post. This is what our function looks like.

var timer;
    
    function run_right(slide, left){
      if ((left + 15) < (document.getElementById('stage').offsetWidth - document.getElementById('j').offsetWidth)){
        left = left + 15; // Increase his left attribute by 15px
        document.getElementById('j').style.left = left+"px";
      
        switch (slide){ // this switch statement checks for different possibilities for 'slide'
          case 1: // if 'slide' equals '1' ...
            document.getElementById('j').style.backgroundPosition = "-40px 0px";
            setTimeout(function(){run_right(2, left);}, 200);
            break;
          case 2: // if 'slide' equals '2' ...
            document.getElementById('j').style.backgroundPosition = "-80px 0px";
            setTimeout(function(){run_right(3, left);}, 200);
            break;
          case 3: // if 'slide' equals '3' ...
            document.getElementById('j').style.backgroundPosition = "-120px 0px";
            setTimeout(function(){run_right(4, left);}, 200);
            break;
          case 4: // if 'slide' equals '4' ...
            document.getElementById('j').style.backgroundPosition = "-80px 0px";
            setTimeout(function(){run_right(1, left);}, 200);
            break;
        }
      } else {
        document.getElementById('j').style.backgroundPosition = "0px 0px";
      }
    }

And we can create another function to stop the running timer and return the sprite to the standing image.

function stop_running(){
      document.getElementById('j').style.backgroundPosition = "0px 0px";
      clearTimeout(timer);
    }

Running to the Left Animation

Now by borrowing the code from our run_right function, we can create another function to make a run_left function, with just a few modifications.

function run_left(stage, left){
      if ((left - 15) > 0){
        left = left - 15;
        document.getElementById('j').style.left = left+"px";
        switch (stage){
          case 1:
            document.getElementById('j').style.backgroundPosition = "-40px -50px";
            timer = setTimeout(function(){run_left(2, left);}, 200);
            break;
          case 2:
            document.getElementById('j').style.backgroundPosition = "-80px -50px";
            timer = setTimeout(function(){run_left(3, left);}, 200);
            break;
          case 3:
            document.getElementById('j').style.backgroundPosition = "-120px -50px";
            timer = setTimeout(function(){run_left(4, left);}, 200);
            break;
          case 4:
            document.getElementById('j').style.backgroundPosition = "-80px -50px";
            timer = setTimeout(function(){run_left(1, left);}, 200);
            break;
        }
      } else {
        document.getElementById('j').style.backgroundPosition = "0px -50px";
      }
    }

Jumping Animation

Finally, we need to create a jump function. We will pass two arguments to this function, one that will track whether the div is currently moving up or down and another that will track the current top attribute of the div. Between the two, we will determine which direction the div needs to move next, and how far (we will move the div less distance near the arc of the jump to simulate acceleration with gravity).

function jump(up, top){
      /*
       * We change J to his jumping sprite ...
       */
      document.getElementById('j').style.backgroundPosition = "-160px 0px";
      /*
       * Here, we need to decide whether he should be traveling up or down...
       */
      if (up && (document.getElementById('j').offsetTop > 20)){
        // if he is currently moving up, and he is more than 20 pixels from the top of the stage ...
        top = top - (top * .1); // This gives us a slight arc in the jump, rather than a constant movement like running
        document.getElementById('j').style.top = top+"px"; // Change his position
        timer = setTimeout(function(){jump(up, top);}, 60); // Then call the function again
      } else if (up) {
        // if he is currently moving up, but he is almost at the top of the stage and needs to come back down...
        up = false; // we switch the 'up' variable so he will be falling in the next loop
        timer = setTimeout(function(){jump(up, top);}, 60);
      } else if (!up && (document.getElementById('j').offsetTop < 115)){
        // if he is moving down, but is more than 5px from the ground, he will continue to fall...
        top = top + (top * .1); // His fall will slightly accelerate
        document.getElementById('j').style.top = top+"px";
        timer = setTimeout(function(){jump(up, top);}, 60);
      } else {
        // If he is moving down, and he is within 5px of the ground...
        document.getElementById('j').style.top = "120px"; // Place him on the ground
        document.getElementById('j').style.backgroundPosition = "0px 0px"; // return to standing sprite
        // We do not call the loop anymore since he is standing still at this point
      }
    }

Now we can put all four of our functions into buttons and have a working prototype of a running and jumping animation! Please check out the source code for this page with comments and download the sprite sheet that I used, if you'd like.

Conclusion

Now, although we have a working prototype here, you may notice it is a little buggy. When you click on more than one button at a time, the script will try to run both at once. Or, if you click the jump button again on the way down, J will continue to fall forever. Also, as I mentioned earlier, we have global variables in our script, which means it might be difficult to add this code into an existing page without crashing other JavaScript (which is also why I didn't try to run this code within this blog page). In our next post, we will clean up all of these bugs and talk about the concept of encapsulation and why it is important to write good code in the real world.

In the last post, we introduced the idea of spriting, an easy way to animate in JavaScript that works in all browsers. We also walked through how to set up the sprite as a background image for a div and then use a line of JavaScript to change the background position to make it appear as if the image has moved.

In this post, we will use this technique to animate both running and jumping motions. In order to create the animation, we will need to quickly change the background position at a regular interval. Take a look again at the sprite we are using.

Meet J, the mascot for my company, Joust Multimedia.

In our example, we have ten total images: one of J standing facing right, three of J running to the right and one of J jumping while facing right (with the same number of each frame facing left). Let’s start with making him run to the right. In order to make our image look like it is running, we will need to do two things: change the sprite to a different image and move the div towards the right.

Running to the Right Animation

We certainly won’t want to be stuck clicking different buttons to cycle through the sprites, so we will need to create some functions that do this automatically.

For our running function, we want to:

1. Move the div towards the right slightly
2. Move to the next frame of animation
3. Pause for a fraction of a second (to preserve the “persistence of vision” illusion)
4. Loop the function again

Fortunately, there is an easy way to loop with functions. A native command in JavaScript called setTimeout will allow us to create a timed delay, after which we will call the function again (from inside the function).

function run_right(){
      // Move slightly to the right ...
      // Change to the next frame of animation ...
    
      // this will call 'run_right' again after 200 milliseconds
      setTimeout(function(){run_right();}, 200); 
    }
    

So now we have a function that will call itself again five times a second (which will be fast enough to create animation for our purposes). Remember here that browsers are not terribly accurate with their timers. You can specify timing to the millisecond, but that doesn’t mean your script will run at that timing exactly!

Our next problem to tackle is how is our function going to know which sprite to change to? In our example, we will need to cycle back and forth through our three images (to have four total frames of animation). To do this, we are going to pass our function a bit of information to tell it which slide to switch to. Once in the function, we will do a test that will check which slide we should be on, then switch the background position to the correct sprite. When we call the function again, we will pass the next slide as the argument.

function run_right(slide){
      // Move slightly to the right ...
      switch (slide){ // this switch statement checks for different possibilities for 'slide'
        case 1: // if 'slide' equals '1' ...
          document.getElementById('j').style.backgroundPosition = "-40px 0px";
          setTimeout(function(){run_right(2);}, 200);
          break;
        case 2: // if 'slide' equals '2' ...
          document.getElementById('j').style.backgroundPosition = "-80px 0px";
          setTimeout(function(){run_right(3);}, 200);
          break;
        case 3: // if 'slide' equals '3' ...
          document.getElementById('j').style.backgroundPosition = "-120px 0px";
          setTimeout(function(){run_right(4);}, 200);
          break;
        case 4: // if 'slide' equals '4' ...
          document.getElementById('j').style.backgroundPosition = "-80px 0px";
          setTimeout(function(){run_right(1);}, 200);
          break;
      }
    }
    

And now when we call the function for the first time, we will need to make sure we pass the starting slide.

<input type="button" value="Run Right" onclick="run_right(1);" />
    

Similarly, to move our div to the right slightly, we can pass the initial left attribute of the div, then move the div slightly each time the function is called.

function run_right(slide, left){
      
      left = left + 15; // Increase his left attribute by 15px
      document.getElementById('j').style.left = left+"px";
      
      switch (slide){ // this switch statement checks for different possibilities for 'slide'
        case 1: // if 'slide' equals '1' ...
          document.getElementById('j').style.backgroundPosition = "-40px 0px";
          setTimeout(function(){run_right(2, left);}, 200);
          break;
        case 2: // if 'slide' equals '2' ...
          document.getElementById('j').style.backgroundPosition = "-80px 0px";
          setTimeout(function(){run_right(3, left);}, 200);
          break;
        case 3: // if 'slide' equals '3' ...
          document.getElementById('j').style.backgroundPosition = "-120px 0px";
          setTimeout(function(){run_right(4, left);}, 200);
          break;
        case 4: // if 'slide' equals '4' ...
          document.getElementById('j').style.backgroundPosition = "-80px 0px";
          setTimeout(function(){run_right(1, left);}, 200);
          break;
      }
    }
    

And when we initially call the function, we need to make sure we pass the current left position of our div.

<input type="button" value="Run Right" onclick="run_right(1, document.getElementById('j').offsetLeft);" />
    

Stopping the Animation

So, now we have a function that, when called, will animate J to run to the right. Unfortunately, we have no way to stop it. First of all, we will need to make the function stop calling itself if J runs to the edge of our stage. To do that, every time the function runs, we will check an if statement to see if J has room to keep running. If so, we will run the function like normal. If not, we will stop calling the function and return him to the standing sprite.

function run_right(slide, left){
      // If we can add 15 pixels to the left and have J's right edge not be at the stage's right edge ...
      if ((left + 15) < (document.getElementById('stage').offsetWidth - document.getElementById('j').offsetWidth)){
        // We have room! Continue like normal here
      } else { // if we are on the right edge, we need to stop calling the function and return to standing
        document.getElementById('j').style.backgroundPosition = "0px 0px";
      }
    }
    

Finally, we will want to have a way to stop the function, when needed. We can set the setTimeout() command to a variable, then stop it with the clearTimeout() command. In order to do this, we will need to declare that variable outside of the function, so that we will be able to refer to it later. For now, we will declare it as a global variable. This is terrible coding practice, but we will correct this in the next post. This is what our function looks like.

var timer;
    
    function run_right(slide, left){
      if ((left + 15) < (document.getElementById('stage').offsetWidth - document.getElementById('j').offsetWidth)){
        left = left + 15; // Increase his left attribute by 15px
        document.getElementById('j').style.left = left+"px";
      
        switch (slide){ // this switch statement checks for different possibilities for 'slide'
          case 1: // if 'slide' equals '1' ...
            document.getElementById('j').style.backgroundPosition = "-40px 0px";
            setTimeout(function(){run_right(2, left);}, 200);
            break;
          case 2: // if 'slide' equals '2' ...
            document.getElementById('j').style.backgroundPosition = "-80px 0px";
            setTimeout(function(){run_right(3, left);}, 200);
            break;
          case 3: // if 'slide' equals '3' ...
            document.getElementById('j').style.backgroundPosition = "-120px 0px";
            setTimeout(function(){run_right(4, left);}, 200);
            break;
          case 4: // if 'slide' equals '4' ...
            document.getElementById('j').style.backgroundPosition = "-80px 0px";
            setTimeout(function(){run_right(1, left);}, 200);
            break;
        }
      } else {
        document.getElementById('j').style.backgroundPosition = "0px 0px";
      }
    }
    

And we can create another function to stop the running timer and return the sprite to the standing image.

function stop_running(){
      document.getElementById('j').style.backgroundPosition = "0px 0px";
      clearTimeout(timer);
    }
    

Running to the Left Animation

Now by borrowing the code from our run_right function, we can create another function to make a run_left function, with just a few modifications.

function run_left(stage, left){
      if ((left - 15) > 0){
        left = left - 15;
        document.getElementById('j').style.left = left+"px";
        switch (stage){
          case 1:
            document.getElementById('j').style.backgroundPosition = "-40px -50px";
            timer = setTimeout(function(){run_left(2, left);}, 200);
            break;
          case 2:
            document.getElementById('j').style.backgroundPosition = "-80px -50px";
            timer = setTimeout(function(){run_left(3, left);}, 200);
            break;
          case 3:
            document.getElementById('j').style.backgroundPosition = "-120px -50px";
            timer = setTimeout(function(){run_left(4, left);}, 200);
            break;
          case 4:
            document.getElementById('j').style.backgroundPosition = "-80px -50px";
            timer = setTimeout(function(){run_left(1, left);}, 200);
            break;
        }
      } else {
        document.getElementById('j').style.backgroundPosition = "0px -50px";
      }
    }
    

Jumping Animation

Finally, we need to create a jump function. We will pass two arguments to this function, one that will track whether the div is currently moving up or down and another that will track the current top attribute of the div. Between the two, we will determine which direction the div needs to move next, and how far (we will move the div less distance near the arc of the jump to simulate acceleration with gravity).

function jump(up, top){
      /*
       * We change J to his jumping sprite ...
       */
      document.getElementById('j').style.backgroundPosition = "-160px 0px";
      /*
       * Here, we need to decide whether he should be traveling up or down...
       */
      if (up && (document.getElementById('j').offsetTop > 20)){
        // if he is currently moving up, and he is more than 20 pixels from the top of the stage ...
        top = top - (top * .1); // This gives us a slight arc in the jump, rather than a constant movement like running
        document.getElementById('j').style.top = top+"px"; // Change his position
        timer = setTimeout(function(){jump(up, top);}, 60); // Then call the function again
      } else if (up) {
        // if he is currently moving up, but he is almost at the top of the stage and needs to come back down...
        up = false; // we switch the 'up' variable so he will be falling in the next loop
        timer = setTimeout(function(){jump(up, top);}, 60);
      } else if (!up && (document.getElementById('j').offsetTop < 115)){
        // if he is moving down, but is more than 5px from the ground, he will continue to fall...
        top = top + (top * .1); // His fall will slightly accelerate
        document.getElementById('j').style.top = top+"px";
        timer = setTimeout(function(){jump(up, top);}, 60);
      } else {
        // If he is moving down, and he is within 5px of the ground...
        document.getElementById('j').style.top = "120px"; // Place him on the ground
        document.getElementById('j').style.backgroundPosition = "0px 0px"; // return to standing sprite
        // We do not call the loop anymore since he is standing still at this point
      }
    }
    

Now we can put all four of our functions into buttons and have a working prototype of a running and jumping animation! Please check out the source code for this page with comments and download the sprite sheet that I used, if you’d like.

Conclusion

Now, although we have a working prototype here, you may notice it is a little buggy. When you click on more than one button at a time, the script will try to run both at once. Or, if you click the jump button again on the way down, J will continue to fall forever. Also, as I mentioned earlier, we have global variables in our script, which means it might be difficult to add this code into an existing page without crashing other JavaScript (which is also why I didn’t try to run this code within this blog page). In our next post, we will clean up all of these bugs and talk about the concept of encapsulation and why it is important to write good code in the real world.

Before you first meet with project stakeholders for a website design or redesign, you’ll want to prepare yourself by researching the company the website represents and the nature of the audience it serves. You also need to familiarize yourself with any existing site’s content and features.

That first meeting will be where you set the course of the design, establishing the goals and requirements of the project. The more informed you are at this stage, the better your input, and your requests for input, will be.

How do you approach the research steps for a website redesign? Do you follow a written checklist, or do you take intuitive twists and turns around the basic questions, “What is this website about?” and “How can we make it better?” Your answer probably lies somewhere along the spectrum between those two extremes. It’s also likely to vary considerably from project to project.

To ensure that you’ll bring valuable insights to the table at this critical stage and throughout the course of the work, make sure to avoid the following pitfalls.

1) Only critiquing the current visuals, without also assessing the content and structure

In a perfect world, the client would include a realistic assessment of a website’s content and structure in the project brief. For a variety of reasons, this rarely happens. For one thing, it may simply be assumed that it is your job. Also, even if the client does provide that information, they may be so close to the site, they are likely to miss or underestimate important facets.

For content, it’s in your best interest to assess everything. That’s not a big deal for a small site, but a big site, especially one that’s overdue for a deep redesign, will likely have forgotten corners, some of them obsolete and some of them surprise gems — valuable information buried in an accidental labyrinth of excessively deep and seo-hostile taxonomy.

In addition, take the time to assess, even chart, the website’s structure. There’s a good chance it no longer matches the old charts they’ve got on file. Not only that, your fresh design perspectives are likely to shed a unique light on resources your client didn’t even know they had.

2) Critiquing the current visuals with the intent to “outdo”

If you are concentrating on how you’ll rival the previous designer, you aren’t concentrating on your client’s business needs. Unless you were there to see the process unfold, you have no idea what precipitated their “questionable” design choices. Circumstances may or may not have changed since the last website design; there may have been challenges they faced that you have yet to (or may never) encounter.

Do evaluate the visuals, but from the perspective of understanding the continuum. A new designer coming in after a previous one should be wary of “throwing the baby out with the bathwater.” What spark or fresh energy is reflected in the old look? How do current customers relate, even identify, with it? And what is the company ready to reach for this time? The visuals reflect the company’s self image as it was. Your job isn’t to strike away inferior design, but rather to discover what is no longer adequate, and to help them evolve their business identity.

3) Ignoring the current community

If you stop at what the client tells you is the nature of their community, you’ll be missing an opportunity. Sometimes, they can be guilty of seeing what they’d like to see, rather than what’s actually happening. You’re the “visiting fireman” and a fresh, new user. Your first impressions here (as well as in other aspects of the website) will be priceless.

If the facility exists, sign up to the website and actively engage in the community (as appropriate, since some communities are private). Who are they? What’s the dominant culture? Are there “subcultures”? At what points are you confused or unsure about how to participate? Is the community welcoming? If not, what are their reasons? Are there unofficial leaders or stars who tend to set the tone? Who is contributing valuable content, and are they doing it because of, or in spite of the current website or managers’ support?

What do any of these types of research questions have to do with design? When you take into account that design is, by definition, anything (anything) done with a plan and a purpose, then the ideas you propose can address, for example, how the community UI can be improved in order to recognize and support valuable contributors and encourage optimal behaviors.

4) Forgetting to review the site’s current analytics (or worse, jumping to hasty conclusions about them)

Reviewing a site’s current analytics is an imperative. Not only that, even if they are supplied in the brief, you may need to look deeply at more than the numbers provided. The site in question may not even have analytics in place, or they may be too superficial. Yes, you can make very good, educated guesses about the effectiveness of a clunky call to action in the sidebar, or the usefulness of a top nav bar that has sub-sub-sub-menus. On the other hand, people occasionally respond in surprising ways. If the website caters more to returning users, their familiarity with the site’s quirks could be tragically thrown by sudden, rather than incremental changes, even if those are proven usability enhancements.

That said, this is one area where your “fresh perspective” may be a liability. Website analytics are easy to misinterpret, especially when we are stepping in cold, and aren’t yet connected with the history of the site and the business. Question your own findings, and treat them as preliminary, rather than conclusive. Revisiting the analytics over the course of the project are likely to yield new layers of insight.

Don’t do this last: make sure analytics are set up at the outset, while initial discussion is still under way. These will serve as an indispensable benchmark against which you can continue to suggest improvements, and also measure changes after launch.

5) Merely following client directives

In addition to (and not instead of) respecting client directives, find at least one unasked-for thing you can bring to the table. Often, within a client’s concrete, specific requests, is a bigger more abstract request. Stating that they want Zapfino headings may be the reflection of an unverbalized desire to instill their business identity with a greater sense of luxury. Give them the option they asked for (implemented well), and also give them the option you think better meets the essence of their request.

This is where research comes in. Using the “luxury” example mentioned above, you’ll want to find out how the concept is regarded within the client’s industry, and also explore current design ideas for luxury brands in general. Just because they say “we specifically want Zapfino,” it doesn’t necessarily mean they’ll dismiss your ideas, especially if they feel you are listening to their directives while adding further value. An unexpected idea that is clearly thoughtful and well-researched will be much easier to sell, and will do wonders for your professional relationships, as well.

Conclusion

Design research and web design research are activities that can be happening along the entire course of a redesign project. They tend to (and should) happen organically as questions arise, so it’s likely you’re more than satisfactorily addressing at least a few of the above warnings. However, these are called pitfalls for a reason: at one time or another, one or more of these oversights has very possibly tripped you up, whether or not you were aware of the cause.

If any of these research mistakes strikes a chord, integrate the suggested remedies into your own web design (or redesign) process by adding them to your formal or personal checklists. If you happen to be smack in the middle of a redesign project, this may be the perfect opportunity to give it a healthy and strategic boost.

Are any of these mistakes uncomfortably familiar? What other pitfalls have you encountered? Let us know in the comments.

Massive Discounts on Stock Photos – 90% off!