UX Magazine

Defining and Informing the Complex Field of User Experience (UX)

Toying with UX and CSS3 - I love this idea but...

December 30, 2012
Stephen Shooster

I have been trying to show on a web page escalating urgency by changing the colors on the surrounding box of a field slowly at first. The idea is to paint the box from blue and green toward red.

Here is a sample of what I have created so far. It's kind of cool.

http://www.on-call-architect.com/steves_brew

The idea as simple as it seems is problematic to execute. What I am focused on is the colors and the timing but the engineering has its onw set of issues. At best it is hypnotic, at worst instead of moving you along to fill out a form more quickly it slows you down. I think once people get over the uniqueness of this look and feel they will understand that it is designed to help them fill out the forms faster.

I know it is very suttle but I still think it could be an exciting part of the experience, giving users the idea that we really care about there interactions and enjoyment even while doing mundane tasks.

Here is the code I used to make this. I share it with the hope that you will give it a spin and with the best of the web in mind, using the open source methodoloy who knows there might be some folks out there that can improve upon it in an exciting way. That would be fun... perhaps a little character should peek out at the end and say, "Move along, why don't you" or something funny yet poignant.

Example Code:

Steve's Brew
<head>
  <style>
    input {
      outline:none;transition: all 4s ease-in-out;-webkit-transition: all 2s ease-in-out;-moz-transition: all 2s ease-in-out;
       border: 1px solid #f5f688;

        /* Safari 5, Chrome support border-radius without vendor prefix.
         * FF 3.0/3.5/3.6, Mobile Safari 4.0.4 require vendor prefix.
         * No support in Safari 3/4, IE 6/7/8, Opera 10.0.
         */
          -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;

        /* Chrome, FF 4.0 support box-shadow without vendor prefix.
         * Safari 3/4/5 and FF 3.5/3.6 require vendor prefix.
         * No support in FF 3.0, IE 6/7/8, Opera 10.0, iPhone 3.
         * change the offsets, blur and color to suit your design.
         */
          -moz-box-shadow: 2px 2px 3px #666; -webkit-box-shadow: 2px 2px 3px #666; box-shadow: 2px 2px 3px #666;

        /* using a bigger font for demo purposes so the box isn't too small */
        font-size: 20px;

        /* with a big radius/font there needs to be padding left and right
         * otherwise the text is too close to the radius.
         * on a smaller radius/font it may not be necessary
         */
        padding: 4px 7px;

        /* only needed for webkit browsers which show a rectangular outline;
         * others do not do outline when radius used.
         * android browser still displays a big outline
         */
        -webkit-appearance: none;
    }
    .shadow_ltblue {
      box-shadow: 0 0 5px #41c2e2;-webkit-box-shadow: 0 0 5px #41c2e2; -moz-box-shadow: 0 0 5px #41c2e2;
    }
    .shadow_skyblue {
      box-shadow: 0 0 5px #a1dff8;-webkit-box-shadow: 0 0 5px #a1dff8; -moz-box-shadow: 0 0 5px #a1dff8;
    }
    .shadow_dkblue {
      box-shadow: 0 0 5px #207c91;-webkit-box-shadow: 0 0 5px #207c91; -moz-box-shadow: 0 0 5px #207c91;
    }
    .shadow_dkgold {
      box-shadow: 0 0 5px #906928;-webkit-box-shadow: 0 0 5px #906928; -moz-box-shadow: 0 0 5px #906928;
    }
    .shadow_gold {
      box-shadow: 0 0 5px #e6ad3a;-webkit-box-shadow: 0 0 5px #e6ad3a; -moz-box-shadow: 0 0 5px #e6ad3a;
    }
    .shadow_tan {
      box-shadow: 0 0 5px #e6ad3a;-webkit-box-shadow: 0 0 5px #e6ad3a; -moz-box-shadow: 0 0 5px #e6ad3a;
    }
    .shadow_pink {
      box-shadow: 0 0 5px #f7a59a;-webkit-box-shadow: 0 0 5px #f7a59a; -moz-box-shadow: 0 0 5px #f7a59a;
    }
    .shadow_salmon {
      box-shadow: 0 0 5px #e44e3d;-webkit-box-shadow: 0 0 5px #e44e3d; -moz-box-shadow: 0 0 5px #e44e3d;
    }
    .shadow_none {
      box-shadow: 0 0 5px #;-webkit-box-shadow: 0 0 5px #; -moz-box-shadow: 0 0 5px #;
    }

  </style>
  <script>
    function on(id){
      x = document.getElementById(id);
      setTimeout('x.className += " " + \'shadow_ltblue\'', 0);
      setTimeout('x.className += " " + \'shadow_none\'', 2000);
      setTimeout('x.className += " " + \'shadow_skyblue\'', 3000);
      setTimeout('x.className += " " + \'shadow_none\'', 4000);
      setTimeout('x.className += " " + \'shadow_dkblue\'', 6000);
      setTimeout('x.className += " " + \'shadow_dkgold\'', 9000);
      setTimeout('x.className += " " + \'shadow_tan\'', 12000);
      setTimeout('x.className += " " + \'shadow_pink\'', 15000);
      setTimeout('x.className += " " + \'shadow_salmon\'', 18000);
    }
    function off(id){
      x = document.getElementById(id);
      x.className = '';
      on('id');
    }

  </script>

</head>

<body>


<form>
 <input type="text" id ="welcome" onfocus="on(this.id)" onblur="off(this.id)" >
<br>
<br>
<input type="text" id ="welcome2" onfocus="on(this.id)" onblur="off(this.id)" >
</form>

</body>
</html>

<script>
 </script>

.......................

 

 

Add new comment

Comments