Usability and Forms

Introduction to Usability — What is Usability?

Usability is an often-used word that addresses the relationship between tools and their users. In order for a tool to be effective, it must allow intended users to accomplish their tasks in the best way possible. The same principle applies to computers, websites, and other software. In order for these systems to work, their users must be able to employ them effectively. Usually, a usability expert works with an organization to review the design of a site. Often, the review is done very late in the process which is not optimal and tends to drive the programmers crazy because they find they have wasted a lot of time implementing code that is not going to be usable after all. In the case of The Ocean Project's website (one used for Project 2 in class in 2009), we used both consultants and our board of directors to advise as to the usability of the site. Then, we watched the Web use analytics for use and page flow to see if how they said they were going to use the site was congruent with how they actually were using it. More or less, there was some alignment which is not always the case (based on my experience).

What makes a website or piece of software usable?

Usability depends on a number of factors including how well the functionality fits user needs, how well the flow through the application fits user tasks, and how well the response of the application fits user expectations. We can learn to be better user interface designers by learning design principles and design guidelines. But even the most insightful designer can only create a highly-usable system through a process that involves getting information from people who actually use the system. Usability is the quality of a system that makes it easy to learn, easy to use, easy to remember, error tolerant, and subjectively pleasing.

Why is Usability Important?

From the user's perspective usability is important because it can make the difference between performing a task accurately and completely or not, and enjoying the process or being frustrated. From the developer's perspective usability is important because it can mean the difference between the success or failure of a system. From a management point of view, software with poor usability can reduce the productivity of the workforce to a level of performance worse than without the system. In all cases, lack of usability can cost time and effort, and can greatly determine the success or failure of a system. Given a choice, people will tend to buy systems that are more user-friendly.

How Do You Achieve a High Level of Usability?

The key principle for maximizing usability is to employ iterative design, which progressively refines the design through evaluation from the early stages of design. The evaluation steps enable the designers and developers to incorporate user and client feedback until the system reaches an acceptable level of usability.

The preferred method for ensuring usability is to test actual users on a working system. Achieving a high level of usability requires focusing design efforts on the intended end-user of the system. There are many ways to determine who the primary users are, how they work, and what tasks they must accomplish. However, clients' schedules and budgets can sometimes prevent this ideal approach. Some alternative methods include user testing on system prototypes, a usability inspection conducted by experts, and cognitive modeling.

Where is Usability Applied?

Usability is one of the focuses of the field of Human-Computer Interaction. As the name suggests, usability has to do with bridging the gap between people and machines. A user interface (or human-computer interface) refers to the parts of a hardware and/or software system that allow a person to communicate with it. This includes output devices (the way the computer talks to a user) and input devices (the way a user talks to the computer). Typical "output devices" include computer monitors and the windowing systems that run on them, but also include speakers and other devices that provide feedback. "Input devices" include peripherals like keyboards, mice, and joysticks, but also include microphones and even eye movement devices. Each of these interface components has devices corresponding to the visual (sight), aural (sound), and haptic (touch) channels of the brain. Usability engineering studies these elements of the user's experience.

Much of the usability of a website often comes from adding JavaScript or VBScript interactivity to a site. But, just being able to find information and process it on a Web page makes it more usable than sites where information is not laid out according to likely use. Another form of usability is how the site connects pages and information flow between the pages. If you want to get a dialog started with your Web audience, you can use simple HTML forms to get the process started. Let's take a look at the HTML features that are relevant to forms generation and processing...

HTML Forms

This forms tutorial comes to us mainly thanks to our friends at www.tizag.com.

Forms are a vital tool for any webmaster to use to receive information from the Web surfer, including such basic information as: their name, email address, credit card, etc. A form will take input from the page visitor and, depending on your needs, let you store that data into a file, place an order via a database, gather organized user statistics, register the person to your Web forum, or perhaps subscribe them to your weekly newsletter.

Text Fields

Before we teach you how to make a complete form, let's start out with the basics of forms. Input fields are the main controls with which a Web visitor enters information for submittal back to a website. The <input> tag has a few attributes that you should be aware of:

• type - Determines what kind of input field it will be. Possible choices are text, submit, and password.
• name - Assigns a name to the given field so that you may reference it later.
• size - Sets the horizontal width of the field. The unit of measurement is in blank spaces.
• maxlength - Dictates the maximum number of characters that can be entered.

<form method="post" action="mailto:youremail@email.com">
Name: <input type="text" size="10" maxlength="40" name="name"> <br />

Password: <input type="password" size="10" maxlength="10" name="password">

</form>

Input Fields accept information as seen here:

Do not use the HTML password feature and think you have handled all your security concerns. The data entered in a password field is not encrypted and is not secure in any way. But, it does prohibit someone watching over your shoulder to see what you have typed by just watching a screen.

HTML Form Email

Now we will add the submit functionality to your form. Generally, the submit button should be the last item of your form and have its name attribute set to "Send" or "Submit". The Name attribute defines what the label of the button will be. In addition to adding the submit button within your form, we must also add a destination for this information so it can be sent using the Web and specify how we want it to travel to that place. Adding the following attributes to your <form> open tag will do just this:

• method - We will only be demonstrating the post functionality of method, which sends the data without displaying any of the information to the visitor. A get method is also available for showing the details of the data send.
• action - Specifies the address (in terms of a Unified Resource Locator, or URL) to send the data to. We will be sending our information to a fake email address (named youremail@email.com) for demonstration purposes.

<form method="post" action="mailto:youremail@email.com">
Name: <input type="text" size="10" maxlength="40" name="name"> <br />

Password: <input type="password" size="10" 
maxlength="10" name="password"><br />

<input type="submit" value="Send"> 
</form>

Email Forms work as follows:

Simply change the e-mail address to your own and you will have set up your first functional form (if you have registered a basic e-mail form with your Web browser)!

HTML Radio Buttons

Radio buttons are a popular form of interaction. You may have seen them on quizzes, questionnaires, and other websites that give the user a multiple choice question. Radio button groups only allow you to choose one option per group (or set). Below are a couple attributes you should know that relate to the radio button.

• value - specifies what will be sent if the user chooses this radio button. Only one value will be sent for a given group of radio buttons (see name for more information).
• name - defines which set of radio buttons that it is a part of. Below we have 2 groups: shade and size.

<form method="post" action="mailto:youremail@email.com">
What kind of shirt are you wearing? <br />
Shade: 

<input type="radio" name="shade" value="dark">Dark

<input type="radio" name="shade" value="light">Light <br />
Size:

<input type="radio" name="size" value="small">Small
<input type="radio" name="size" value="medium">Medium
<input type="radio" name="size" value="large">Large <br />
<input type="submit" value="Email Myself">
</form>

Radio Buttons work as follows:

If you change the email address to your own and "Email Myself" then you should get an email with "shade=(choice) size=(choice)".

HTML Check Boxes

Check boxes allow for multiple items to be selected for a certain group of choices. The check box's name and value attributes behave the same as a radio button.

<form method="post" action="mailto:youremail@email.com">
Select your favorite cartoon characters.
<input type="checkbox" name="toon" value="Goofy">Goofy
<input type="checkbox" name="toon" value="Donald">Donald
<input type="checkbox" name="toon" value="Bugs">Bugs Bunny
<input type="checkbox" name="toon" value="Scoob">Scooby Doo
<input type="submit" value="Email Myself">
</form>

Check Boxes work as follows:

HTML Drop Down Lists

Drop down menues are created with the <select> and <option> tags. <select> is the list itself and each <option> is an available choice for the user (the options are nested within the <select> and </select> tags).

<form method="post" action="mailto:youremail@email.com">
College Degree?
<select name="degree">
<option>Choose One</option>
<option>Some High School</option>
<option>High School Degree</option>

<option>Some College</option>
<option>Bachelor's Degree</option>
<option>Doctorate</option>
<input type="submit" value="Email Yourself">
</select>
</form>

Drop Down Lists work as follows:

HTML Selection Forms

Yet another type of form, a highlighted selection list. This form will post what the user highlights. Basically just another type of way to get input from the user.

The size attribute selects how many options will be shown at once before needing to scroll, and the selected option tells the browser which choice to select by default.

<form method="post" action="mailto:youremail@email.com">
Musical Taste
<select multiple name="music" size="4">
<option value="emo" selected>Emo</option>
<option value="metal/rock" >Metal/Rock</option>
<option value="hiphop" >Hip Hop</option>

<option value="ska" >Ska</option>
<option value="jazz" >Jazz</option>
<option value="country" >Country</option>
<option value="classical" >Classical</option>
<option value="alternative" >Alternative</option>

<option value="oldies" >Oldies</option>
<option value="techno" >Techno</option>
</select>
<input type="submit" value="Email Yourself">
</form>

Selection Boxes (also called scroll lists) work as follows:

HTML Upload Forms

First of all, to actually make the upload form function correctly you must know a scripting language of some sort. PHP and PERL work fine, Javascript is also an option. The HTML code for the upload form does nothing more than create an interface for the user to see and work with. Coding an upload script is beyond the scope of our course, but they are easy to Google on the Web to investigate further.

An upload form consists of three basic parts. The first being a hidden field. This hidden field does nothing more than limit the allowed file size of our uploaded file. The second part is the input field itself. In this field, the user has the option to type in the full local URL of the file or he/she may click the browse button to thumb through directory after directory. HTML codes this automatically when we place the type="file" attribute within the input tag.

<input type="hidden" name="MAX_FILE_SIZE" value="100" />
<input name="file" type="file" />

Upload Forms work as follows:

HTML Text Areas

Text areas serve as an input field for viewers to place their own comments onto. Forums and the like use text areas to post what you type onto their site using scripts. For this form, the text area is used as a way to write comments to somebody.

Rows and columns need to be specified as attributes to the <textarea> tag. Rows are roughly 12pixels high, the same as in word programs and the value of the columns reflects how many characters wide the text area will be. i.e. The example below shows a text area 5 rows tall and 20 characters wide. Another attribute to be aware of is the wrap. Wrap has 3 values.

• wrap=
• "off"
• "virtual"
• "physical"

Virtual means that the viewer will see the words wrapping as they type their comments, but when the page is submitted to you, the web host, the document sent will not have wrapping words.
Physical means that the text will appear both to you, the web host, and the viewer including any page breaks and additional spaces that may be inputed. The words come as they are.
Off of course, turns off word wrapping within the text area. One ongoing line.

<form method="post" action="mailto:youremail@email.com">
<textarea rows="5" cols="20" wrap="physical" name="comments">
Enter Comments Here
</textarea>
<input type="submit" value="Email Yourself">
</form>

Text Areas work as follows:

Also note that any text placed between the opening and closing textarea tags will show up inside the text area when the browser views it.

• Remember to set the name and value attributes for your forms so the document created will be neatly organized.
• Remember to place submit buttons with the form tags to submit the document correctly.