Pages

Monday, September 13, 2010

Error Message Design of the Shopping Cart

Error messages are used to warn users about any errors occurred in a system. These errors can be run time errors which are caused by the user inputs which are invalid or the program errors due to bad programming or even errors because of environmental errors such as failures in operating system, etc.

The typical error message format is using the message boxes. It was decided to avoid message boxes for the reason of slow down of the performance of the website. So, the error messages are designed with the latest web trends for showing errors. All the validations are in the site have used Regular expressions, and control validates which are newly introduced controls in Microsoft .NET platform are used for validations. Some of the error messages used in the site are given below for samples.



Error Message for the Invalid Request


The red asterix (*) used In the site  next to the controls show the field cannot be empty and the filed should be filled.



The Email addresses are validated by the expression given below:

ValidationExpression="\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"

Aspx Code for the Error Pages:

//-----------------------------------------------------------------------------------------||
// Error page for invalid request                                                           ||
//-----------------------------------------------------------------------------------------||

reqiuesterror.aspx

<%@ Page Explicit="True" Language="VB" Debug="True" %>// Page Directive
<script runat="server">
Sub Page_Load( s As Object, e As EventArgs )

if session("invalidreq")="" then
response.Redirect("index.aspx")
end if

End Sub
</script>

<html >
<head>

<title> ERROR!</title>
<link href="stylesheet1.css" rel="stylesheet1" type="text/css" />

<SCRIPT language=JavaScript
src="javascript.js"></SCRIPT>
<style type="text/css">
<!--
.borderTable {padding: 0px 0px 0px 0px;
border: 1px solid #cccccc;
}
.borderTable {padding: 0px 0px 0px 0px;
border: 1px solid #CCCCCC;
}
-->
</style>
<link href="stylesheet1.css" rel="stylesheet1" type="text/css" />
<style type="text/css">
<!--
.style1 {color: #FFFFFF}
.style3 {font-weight: bold}
-->
</style>
<link href="stylesheet1.css" rel="stylesheet" type="text/css">
</head>

<body><form runat="server">
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0">
  <!--DWLayoutTable-->
  <tr>
    <td width="800" height="32" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
      <!--DWLayoutTable-->
      <tr>
        <td width="307" height="4"></td>
          <td width="493"></td>
        </tr>
      <tr>
        <td height="28" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0" background="imagenew/up_serch_ban.jpg">
          <!--DWLayoutTable-->
          <tr>
                  <td width="153" height="28"><img src="imagenew/1.jpg" width="112" height="28"></td>
              <td width="150" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
                <!--DWLayoutTable-->
                <tr>
                  <td width="157" height="28"><font color="#336699">
                    <asp:TextBox ID="txtSearch" Columns="6" width="104px" runat="server" TextMode="SingleLine" />
                    <asp:Button ID="btnSearch" Text="Go" Width="32" runat="server" />
                  </font></td>
                    </tr>
              </table></td>
              <td width="4">&nbsp;</td>
          </tr>
          </table></td>
          <td><table width="100%" height="28" border="0" align="center" cellpadding="0" cellspacing="0" background="imagenew/up_ban.jpg" bgcolor="#FFCC00">
            <!--DWLayoutTable-->
            <tr>
              <td width="60" height="28"
                      align="center" valign="middle" nowrap="nowrap" class="navtopdark1"
                      onclick="jump(this)" onMouseOver="colorOnTop(this)" onMouseOut="colorOffTop(this)"><a class="toplink"
                        href="index.html"><span class="style1">Home</span></a></td>
              <td width="50"
                      align="center" valign="middle" nowrap="nowrap" class="navtopdark1"
                      onclick="jump(this)" onMouseOver="colorOnTop(this)" onMouseOut="colorOffTop(this)"><a class="toplink"
                        href="index.html"><span class="style1">News</span></a></td>
              <td width="58"
                      align="center" valign="middle" nowrap="nowrap" class="navtopdark1"
                      onclick="jump(this)" onMouseOver="colorOnTop(this)" onMouseOut="colorOffTop(this)"><a class="toplink"
                        href="index.html"><span class="style1">Forums</span></a></td>
              <td width="68"
                      align="center" valign="middle" nowrap="nowrap" class="navtopdark1"
                      onclick="jump(this)" onMouseOver="colorOnTop(this)" onMouseOut="colorOffTop(this)"><a class="toplink"
                        href="index.html"><span class="style1">Ringtone</span></a></td>
              <td width="72"
                      align="center" valign="middle" nowrap="nowrap" class="navtopdark1"
                      onclick="jump(this)" onMouseOver="colorOnTop(this)" onMouseOut="colorOffTop(this)"><a class="toplink"
                        href="index.html"><span class="style1">Software</span></a></td>
              <td width="42"
                      align="center" valign="middle" nowrap="nowrap" class="navtopdark1"
                      onclick="jump(this)" onMouseOver="colorOnTop(this)" onMouseOut="colorOffTop(this)"><a class="toplink"
                        href="index.html"><span class="style1">Faq</span></a></td>
              <td width="50"
                      align="center" valign="middle" nowrap="nowrap" class="navtopdark1"
                      onclick="jump(this)" onMouseOver="colorOnTop(this)" onMouseOut="colorOffTop(this)"><a class="toplink"
                        href="index.html"><span class="style1">Links</span></a></td>
              <td width="80"
                      align="center" valign="middle" nowrap="nowrap" class="navtopdark1"
                      onclick="jump(this)" onMouseOver="colorOnTop(this)" onMouseOut="colorOffTop(this)"><a class="toplink"
                        href="index.html"><span class="style1">Contact Us </span></a></td>
              <td width="18">&nbsp;</td>
            </tr>
          </table></td>
      </tr>

    </table></td>
  </tr>
</table>
<table width="799" border="0" align="center" cellpadding="0" cellspacing="0" class="border4">
  <!--DWLayoutTable-->
  <tr>
    <td width="7" height="7"></td>
    <td width="783"></td>
    <td width="7"></td>
  </tr>
  <tr>
    <td height="134"></td>
    <td valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
      <!--DWLayoutTable-->
      <tr>
        <td width="783" height="134" valign="top"><img src="imagenew/main_ban.jpg" alt="Banner" width="783" height="134" /></td>
        </tr>
    </table></td>
    <td></td>
  </tr>
  <tr>
    <td height="8"></td>
    <td></td>
    <td></td>
  </tr>
</table>
<table width="799" border="0" align="center" cellpadding="0" cellspacing="0" class="border4">
  <!--DWLayoutTable-->
  <tr>
    <td width="7" height="18"></td>
    <td width="783" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
      <!--DWLayoutTable-->
      <tr>
        <td width="783" height="18"><table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="f3f3f3">
          <!--DWLayoutTable-->
          <tr>
            <td width="783" height="18">                        </tr>
        </table></td>
          </tr>
    </table></td>
    <td width="7"></td>
  </tr>
  <tr>
    <td height="8"></td>
    <td></td>
    <td></td>
  </tr>
</table>
<table width="799" border="0" align="center" cellpadding="0" cellspacing="0" class="border4">
  <!--DWLayoutTable-->
  <tr>
    <td width="7" height="337"></td>
    <td width="783" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
      <!--DWLayoutTable-->
      <tr>
        <td width="154" height="105">&nbsp;</td>
        <td width="491">&nbsp;</td>
        <td width="138">&nbsp;</td>
      </tr>
      <tr>
        <td height="62">&nbsp;</td>
        <td valign="top"><div align="center"><span class="redfont">Invalid request!! <br>
          Please check the link you requested..<br>
          or <a href="Index.aspx">click here </a>to go to the home page.<br>
              thank you!.
              </span><br>
            <br>
</div></td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td height="187">&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
</table></td>
    <td width="7"></td>
  </tr>
  <tr>
    <td height="7"></td>
    <td></td>
    <td></td>
  </tr>
</table>
<table width="799" border="0" align="center" cellpadding="0" cellspacing="0" background="imagenew/dlink_ban-new-copy.jpg">
  <!--DWLayoutTable-->
  <tr>
    <td width="192" height="28">&nbsp;</td>
      <td width="394" align="center" valign="middle"><span class="style1">Copyright
        &copy; Online Mobile Store</span></td>
    <td width="213">&nbsp;</td>
  </tr>
</table>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p></form>
</body>
</html>
Posted by Free Articles at 3:59 AM
Labels: