User Registration Form Layout

Question

I am working on a site where I need to be able to accommodate frequent flyers but I am not so good at user interface design when I am given such a long leash.

I am using ASP.NET (I am restricted by not being able to use MVC), I like the idea of using BootStrap but I am not familiar with it, and it's been a while since I have had to do much with GUI design, I am very rusty.

Is there new techniques that I could utilize to make this page a little cleaner or make it more extendable?

 <div>
 <h1>User Registration
 </h1>
 <form name="RegistrationForm" runat="server" role="form" class="form-inline">
 <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
 <div class="form-group-sm">
 <label for="<%=FirstName.ClientID %>" class="col-sm-2">First Name:</label>
 <asp:TextBox runat="server" ID="FirstName" CssClass="textbox" TabIndex="1"></asp:TextBox>
 </div>
 <div class="form-group-sm">
 <label class="col-sm-2" for="<%=LastName.ClientID %>">Last Name:</label>
 <asp:TextBox runat="server" ID="LastName" CssClass="textbox" TabIndex="3"></asp:TextBox>
 </div>
 <div class="form-group-sm">
 <label for="<%=txtAddress1.ClientID %>" class="col-sm-2">Address Line 1:</label>
 <asp:TextBox runat="server" ID="txtAddress1" CssClass="textbox" TabIndex="4"></asp:TextBox>
 </div>
 <div class="form-group-sm">
 <label for="<%=txtAddress2.ClientID %>" class="col-sm-2">Address Line 2:</label>
 <asp:TextBox runat="server" ID="txtAddress2" CssClass="textbox" TabIndex="5"></asp:TextBox>
 </div>
 <div class="form-group-sm">
 <label for="<%=txtCity.ClientID %>" class="col-sm-2">City:</label>
 <asp:TextBox runat="server" ID="txtCity" CssClass="textbox" Enabled="False" BackColor="#CCCCCC"></asp:TextBox>
 </div>
 <div class="form-group-sm">
 <label for="<%=txtState.ClientID %>" class="col-sm-2">State:</label>
 <asp:TextBox runat="server" ID="txtState" CssClass="textbox" Enabled="False" BackColor="#CCCCCC" MaxLength="5" Width="50"></asp:TextBox>
 </div>
 <div class="form-group-sm">
 <label for="<%=txtZip.ClientID %>" class="col-sm-2">Zip:</label>
 <asp:TextBox runat="server" ID="txtZip" CssClass="textbox" TabIndex="6"></asp:TextBox>
 </div>
 <div class="form-group-sm">
 <label for="<%=txtPhone.ClientID %>" class="col-sm-2">Phone: </label>
 <asp:TextBox runat="server" ID="txtPhone" CssClass="textbox" TabIndex="7" TextMode="Phone"></asp:TextBox>
 </div>
 <div class="form-group-sm">
 <label for="<%=txtEmail.ClientID %>" class="col-sm-2">Email Address: </label>
 <asp:TextBox runat="server" ID="txtEmail" CssClass="textbox" TabIndex="8" TextMode="Email"></asp:TextBox>
 </div>
 <div class="form-group-sm">
 <label for="<%=txtEmail2.ClientID %>" class="col-sm-2">Confirm Email: </label>
 <asp:TextBox runat="server" ID="txtEmail2" CssClass="textbox" TabIndex="9"></asp:TextBox>
 </div>
 <div class="form-group-sm">
 <label for="<%=txtUsername.ClientID %>" class="col-sm-2">Username: </label>
 <asp:TextBox runat="server" ID="txtUsername" CssClass="textbox" TabIndex="10"></asp:TextBox>
 </div>
 <div class="form-group-sm ">
 <label for="<%=txtPassword1.ClientID %>" class="col-sm-2">Password: </label>
 <asp:TextBox runat="server" ID="txtPassword1" CssClass="textbox" TabIndex="11" AutoCompleteType="Disabled" TextMode="Password"></asp:TextBox>
 </div>
 <div class="form-group-sm">
 <label for="<%=txtPassword2.ClientID %>" class="col-sm-2">Confirm Password: </label>
 <asp:TextBox runat="server" ID="txtPassword2" CssClass="textbox" TabIndex="12" AutoCompleteType="Disabled" TextMode="Password"></asp:TextBox>
 </div>
 <br />
 <h2>Payment Information</h2>
 <h3>
 Drawdown
 </h3>
 <div class="form-group" >
 <label for="<%=txtDrawdown.ClientID %>" class="col-sm-3">Drawdown Account: </label>
 <asp:TextBox runat="server" ID="txtDrawdown" CssClass="textbox" TabIndex="13" AutoCompleteType="Disabled"></asp:TextBox>
 </div>
 <h3>
 Credit Card
 </h3>
 <div class="form-group">
 <label for="<%=txtNameOnCard.ClientID %>" class="col-sm-5">Name on card: </label>
 <asp:TextBox runat="server" ID="txtNameOnCard" CssClass="textbox" TabIndex="14" AutoCompleteType="Disabled"></asp:TextBox>
 </div>
 <div class="form-group">
 <label for="<%=txtCardNumber.ClientID %>" class="col-sm-5">Card Number: </label>
 <asp:TextBox runat="server" ID="txtCardNumber" CssClass="textbox" TabIndex="15" AutoCompleteType="Disabled"></asp:TextBox>
 </div>
 <div class="form-group">
 <label for="<%=txtExpirationDate.ClientID %>" class="col-sm-5">Expiration Date: </label>
 <asp:TextBox runat="server" ID="txtExpirationDate" CssClass="textbox" TabIndex="16" AutoCompleteType="Disabled"></asp:TextBox>
 </div>
 <div class="form-group">
 <label for="<%=ddlCardType.ClientID %>" class="col-sm-5">Credit Card Type</label>
 <asp:DropDownList runat="server" ID="ddlCardType">
 <asp:ListItem>Visa</asp:ListItem>
 <asp:ListItem>Mastercard</asp:ListItem>
 <asp:ListItem>American Express</asp:ListItem>
 </asp:DropDownList>
 </div>
 </form>
 </div>

I have some JavaScript at play here as well. validation is on its way also.

 $(document).ready(function () {
 $('#<%=txtZip.ClientID%>').blur(function (e) {
 getAddressInfoByZip($(this).val());
 })
 function response(obj) {
 console.log(obj);
 }
 function getAddressInfoByZip(zip) {
 var addr = {};
 if (zip.length >= 5) {
 $.getJSON("https://maps.google.com/maps/api/geocode/json", { address: zip }, function success(results, status) {
 var resultObject = results.results[0];
 for (var ii = 0; ii < resultObject.address_components.length; ii++) {
 var city;
 var state;
 var types = resultObject.address_components[ii].types.join(",");
 if (types == "sublocality,political"
 || types == "locality,political"
 || types == "neighborhood,political"
 || types == "administrative_area_level_3,political") {
 addr.city = (city == '' || types == "locality,political") ? resultObject.address_components[ii].long_name : city;
 }
 if (types == "administrative_area_level_1,political") {
 addr.state = resultObject.address_components[ii].short_name;
 }
 };
 $('#<%=txtCity.ClientID%>')[0].value = addr.city;
 $('#<%=txtState.ClientID%>')[0].value = addr.state;
 addr.success = true;
 for (name in addr) {
 console.log('### google maps api ### ' + name + ': ' + addr[name]);
 }
 response(addr);
 });
 } else {
 response({ success: false });
 }
 }
 })

*Note: I eventually want to make this site mobile ready, so please feel free to suggest anything that would help make this more mobile ready or anything that I am doing that is not mobile friendly, apart from not using MVC.

• SirPython: Is this a follow up of this? If so, you should include that in your post.
• Malachi: @SirPython kind of, not really, that other post was about the JavaScript function. This is about the layout of the entire page and what I can do to make it prettier.

Answer 1

I'm not familiar with ASP and Bootstrap/HTML, but I'll see what I can offer.

You form code looks pretty standard, there isn't much to say. However, here's a few comments on design:

• Go check out How much information should you ask for when users register? for more information on how you can help make this more user friendly. Here's a good snippet:

  Consider the lazy registration design pattern. Basically, it defers registration until it's absolutely needed and can even fill in some of the information for the user based on their previous interactions with the site.

• Keep your code consistent. I see:

  <tag>Words</tag>
  

  and

  <tag>Words
  </tag>
  

  and

  <tag>
   Words
  </tag>
  

  Which is it?

• Instead of handling credit card information on your own (especially storage), consider using a service already available. Like PayPal!

• Your Bootstrap looks good, although I'm not sure you want to have most of the form labels as col-sm-2 and then the Payment area a different indent size. I'm not sure how this looks, perhaps it makes no difference. If you split up the form though, we wouldn't have this ambiguity.

In terms of your JavaScript:

• All of the jQuery you currently is superfluous. I'd suggest just using plain JavaScript. Check out http://youmightnotneedjquery.com/ and this SO question.

• You're using for...in, which isn't a great idea.

I'm not a JS expert, so I'll leave the JS details for someone more experienced!

• Malachi: The Credit Card information is going to be routed through a third party for charging a specific way, I do not maintain this code any longer, so I don't know what they are going to do with the credit card information, I hadn't gotten that far when I left.
• Alex L: @Malachi good to hear that you'll have someone else take care of payments, I hope the rest of my answer helped!