Francois Camilleri

Whether its filling out a job application, or signing up to create a new email account, we all encounter forms in one way or another. If you’re anything like me, entering information on forms can be quite tiresome, especially if its the same details each time i.e name, email address, password yada yada yada. However, just like pairing up socks after getting them out of the washing machine, its something we just have to do.

As it seems we cannot avoid encountering an online form, there is a very good argument here, that online forms should be well designed, easy to use, help me (where possible) fill in the form and let me know that I have made a mistake in a nice friendly way.

Good HTML Structure

This is important for getting the design of forms right. A good bare bones structure, will give you a good start, and also prevent problems occurring down the line when adding CSS or JavaScript.

A nice basic structure for a sign up form can be found below:

<form id="signupform" action="index.html" method="post">
   <fieldset>
      <legend>Sign Up Form</legend>
      <label for="name">Name</label>
<input id="name" name="name" size="30" type="text" />

      <label for="email">Email</label>
<input id="email" name="email" size="30" type="text" />

      <label for="password">Password</label>
<input id="password" name="pasxword" size="30" type="password" />

      <label for="submit"></label>
      <button id="submit">Send</button>
   </fieldset>
</form>

Once this basic structure is in place, it is quite easy to apply CSS to the form using the ID attributes on the various elements. You can also use these ID’s for JavaScript to reference, rather than use in-line JavaScript.

When fields are highlighted these should stand out to give the user a good visual aid. This will inadvertently speed up the process of filling out the form.

Validation

I find it annoying when forms that have mandatory fields are indicated by an asterisk (*). Whilst this isn’t such a good practice if a user requires the use of a screen reader, I often miss them completely. If something is so important, why not make these fields stand out? I find that a simple “Required” works 10 times better than a *. Taking this one step further, instead of just using required, why not customise each one for the field it is linked to? For example, a password field may have a validation message “Please use 6-10 characters using only letters or numbers”

I also find it quite irritating when I fill out a form and submit it, only to find that I missed out required fields. It can be really handy and save a lot of frustration if fields are validated as you move from one field to another. This can easily be achieved by changing the “Required” message to a “Input Valid” message or even using a relevant image.

I have finally got my feet back on the ground after the Christmas break. I have sorted through the emails, read the proposals for new upcoming projects and I am ready to go!

So how do you begin a project and manage it until the end. There are many systems methodologies out there that are claimed to be fool proof, but the one proven systems methodology that never seems to fail for me is the Waterfall methodology. The Waterfall methodology follows the basic principles of systems design:

• Feasibility
• Analysis
• Design
• Programming
• Implementation
• Maintenance

The Waterfall method draws from this to provide a methodology that is easy to follow and helps projects move smoothly from stage to stage, making sure client’s requirements are met. With the project built in stages, it is easy to restrict clients changing elements once they have been created. Once the site has been designed and agreed, it will not be so easy for the client to change this once the project is in it’s implementation phase.

Stage 1 - Requirements Capture

It is at this stage where the client’s needs are documented, costs are defined, constraints are identified and timelines are defined. It is advisable at this stage to outline what the client is to expect at each stage and the expected delivery dates of each stage.

I advise drawing up a contract that both you and the client can adhere to. This will not only give the client peace of mind, but also can be very handy should the client change requirements further down the line, which are out of scope of the project.

Stage 2 - Design

This is the stage where you can put your creative thinking cap on, and create the initial site designs. It is also the point where you can take your client’s requirements and convert these into a viable solution. At this stage it is important to define the following:

• What information will be inputted
• What information will be outputted
• How will the data that is inputted be transformed into it’s outputted state
• What data will be stored
• How will the data be stored

Once these are documented, you will then have an advantage  when creating your visual designs. User journeys are easier to define which will help you design the navigation of your site.

Stage 3 - Implementation

This is the stage where you add life to your project. If you have planned previous stages correctly, it will be far more simpler to develop the solution rather than begin implementing from scratch.

Create a work plan and stick to it. Start with the HTML templates and the CSS.  Then work on any development if necessary. Will the site require a database to store data. If so, create this now and any tables you require. Once completed write all your server/client side code and integrate with your HTML templates. With the design out of the way you can focus simply on getting the functionality right.

Stage 4 - Testing

Next to the Requirements stage, this is the most important phase of the project. Does the website meet all of the clients requirements? If not why not? This is a chance for you to look over your work and rectify any problems before your client has chance to see them.

One thing that has been drilled into me, is test, test and test again! You never know how one fix to a problem can affect the build elsewhere.The last thing you want is the client to find bugs that makes them think your work is sloppy. If you put a lot of effort into building the solution, the least you can do is make sure it works!

Stage 5 - Maintenance

Now the project has been handed over to your client,  it is likely that the client at this stage will identify requirements that were not initially brought up during the original requirements capture. Bugs in the development can also occur in time, which will require a rethink. New technologies can push out old ones. New web standards can force you into a redesign and exploits in code and databases can be discovered which can make your website vulnerable to attack.

So Christmas this year is almost over and just typically I have spent half the day cooking up a roast dinner for the family, the second half trying to rid my computer of a blasted virus that decided to infect itself on a day when I just wanted to relax.

The virus in question… Trojan.Vundo, nothing too harmless, but annoying none the less. A pop up will appear every 5 or so minutes trying to sell me antivirus software - how ironic.

However, I have found a useful article and a useful piece of kit should you find yourself infected.

http://www.bleepingcomputer.com/malware-removal/remove-vundo-virtumonde

Also download Malwarebytes’ Anti-Malware Download Link

Now that I got rid of the said virus, I can begin to enjoy the rest of my Christmas. I have been thinking of treating myself to a new watch from Tokyo Flash , they are having a Boxing day sale, so I may just grab a bargain and buy something nice for myself.

After months and months of planning, design and development, I decided to scrap all of that and install Word Press instead. It was the only way to get things moving. To be quite honest I was so set on developing my own blog and designing my own site template, that I never really got round to finishing it as I was always making changes! As a project manager, changes to the original spec is one of my pet hates , yet I find myself guilty of this.

So finally, I am writing my first post, and what a relief it is. I never really thought I would get to this stage. Now that I am here, I feel I should be blogging about all the interesting things currently going on in my life. In all fairness, I’m just glad I have gotten this far without giving up!

I hope you will enjoy reading the posts that will follow, and if you ever feel like giving me a shout, there is a handy contact link at the top, over to the right