Jurnal Teknologi Maklumat & Multimedia 4(2007): 115-135
Web Form Design Checklist Based on the Three-Layer Model
NORSHUHADA SHIRATUDDIN, ZANARIAH IDRUS
ABSTRACT
The objectives of end users visiting web site are generally for information retrieval whereas for web application, users have specific goals, which are to complete tasks successfully. Nevertheless, some online job applications do not meet task-based orientation design and this resulted in users’ frustration.
Therefore, for the purpose of reducing the frustration and providing guide- lines, a form design checklist based on the Three-Layer Model (TLM) was developed. In addition, an investigation of the current state of web form design among developers in Malaysia was also conducted. A four-step methodology was followed; understand the TLM concept, develop checklist based on guidelines, collect and identify existing Malaysian web forms, and finally, validate the checklist and compare the collected web forms with the three-layer model. In validating the checklist, 15 respondents performed three sets of tasks: pre-TLM, post-TLM and comparing of three pre-selected online forms. Findings indicated that participants designed better web forms after learning about the TLM and this suggests that the checklist provided guidance in designing better web form. Results also pointed out that the current state of web form designed by Malaysian seems to suggest that it does not meet task-based orientation design.
Keywords: Web Application, Web Form Design
ABSTRAK
Objektif pengguna melayari halaman web secara umumnya adalah untuk mencapai maklumat, manakala pengguna aplikasi web mempunyai tujuan tertentu iaitu menyempurnakan tugasan dengan jayanya. Walaupun begitu, sesetengah aplikasi permohonan pekerjaan atas talian tidak memenuhi ciri- ciri rekabentuk berorientasikan tugas lalu ini menyebabkan pengguna berasa kecewa. Justeru itu, untuk mengurangkan kekecewaan dan menyediakan garis panduan, senarai semak untuk merekabentuk borang web berasaskan Model Tiga-Lapisan (MTL) dibangunkan. Selain itu, kajian ke atas borang web sedia ada yang dihasilkan oleh pembangun-pembangun yang berada di
Malaysia juga dilaksanakan. Empat langkah metodologi diikuti iaitu:
memahami konsep MTL, membangunkan senarai semak berdasarkan garis panduan, mengumpul dan mengenalpasti borang web yang dicipta pembangun- pembangun di Malaysia, dan akhir sekali mengesahkan senarai semak dengan membandingkan borang yang dikumpul dengan model MTL. Untuk mngesahkan senarai semak tersebut, 15 responden diminta menjalankan tiga set tugasan: pra-MTL, ujian-selepas-MTL dan membandingkan dengan tiga borang yang telah dipilih. Hasil kajian menunjukkan para peserta merekabentuk borang web yang lebih baik selepas mempelajari MTL, dan ini menyarankan bahawa senarai semak yang dibangunkan berjaya memberi garis panduan dalam merekabentuk borang web yang lebih baik. Hasil kajian juga menunjukkan borang web sedia ada yang direka oleh pembangun di Malaysia tidak memenuhi ciri-ciri rekabentuk berasaskan tugas.
Katakunci: Aplikasi Web, Rekabentuk Borang Web
INTRODUCTION
Today, the evolution of information access through the Internet is changing the way people live. In actual fact, the introduction of World Wide Web enables people of all ages to use the computer as the service agent to fulfill their information needs. In addition, the emergence of the wireless technol- ogy and easier global networking access is a credit to web application.
Web–based applications are becoming the essential information sources to many people from all walks of life. Web applications are different from traditional content-centric web sites because they focus on the application part and the primary purpose of all web applications is to facilitate the completion of one or more tasks (Fowler & Stanwick 2004). Unlike tradi- tional and content-centric web sites, users of web applications have set their specific goals, tasks and expectations.
Web applications with task-based orientation must ensure that they are capable of calling attention to themselves and completing the tasks. They have also provided users with diversity of objectives and goals and acknowl- edge users of the task completion. Baxley (2003) dictates that “Web applica- tion contains a one-to-one relationship that allows users to establish unique session and relationship with the application”. It requires users to exclusively identify themselves, normally through the identification such as username, password or personalized content. In contrast, content-based web sites or desktop applications do not offer this type of relationship. Also, “web application has the ability to permanently modify data where it allows users to create, manipulate and permanently store data” (Baxley 2003).
In web applications, form becomes the main interface where users input the data. Online forms should have a clear step-by-step procedure to the user.
In comparison with content-centric web sites, the form designer must ensure it is fundamentally clear to the user and the application itself. It also should play a subservient role to the users work. The relevance of a good form design does affect these online applications.
This article first discusses the problem and possible solution of form design in web application. The research questions and objectives are also put forward here. The literature review section outlines existing form design guidelines and previous case studies, and models. Next, the research method- ology section elaborates the methodology used in achieving the objectives and evaluating the task completion activities. Results gathered during the testing are discussed in the finding section and finally, the significant of study section explains the contribution of this research.
PROBLEMS AND PROPOSED SOLUTION IN WEB FORM DESIGN
Web application, as described by Wroblewski and Rantanen (2001), is task- oriented that describes its capability to complete tasks and allow users to understand questions and provide with error free answers. Varieties of guidelines and models in web applications assist the overall web application design starting from design architecture to implementation. However, some of the Graphical User Interface (GUI) guidelines do not cover the behavioral web application patterns as it is broadly used around the world. In addition, the available web design guidelines are not flexible enough to fulfill the requirements of new level interaction within web applications. This is because, today, companies are combining the application and services in their web applications. In parallel, web application users’ motivations are different from a Web site users’ goal. Web site users’ objectives generally are for information retrieval whereas web application users have a specific goal, which is to complete tasks successfully. Therefore, here lies the challenge, to design forms using a flexible and usable form design guidelines in web application (Wroblewski & Rantanen 2001).
Pertinent to the above topics of discussions is an issue that needs attention especially to online job application. According to statistics by the Economic Planning Unit (EPU), the rate of jobless Malaysians will maintain at 3.5%. It means that currently there are more than 350,000 Malaysians who are jobless.
Out of this, current statistics of job seekers registered in the Work Enforcement Department (WED) database is 62,219, where 27,049 are graduates and 35,170 are non-graduates (Bakar 2005). It shows that job seeking is one of the active activities in Malaysia where people find jobs through any medium available including snail mail, electronic mail and online job applications. However, some online job applications do not meet task-based orientation design and this resulted in users’ frustration (Jarrett 2000).
The lack of the appearance, relationship and conversational elements in the web application forms gives negative impact to users such as dissatisfaction and reduces motivation (Jarrett 2004a). Also, web forms can be considered as one of the complicated elements for beginners in web development. It allows a two-way communication by asking input, provides feedback and processes them. Therefore, for the purpose of evaluating these issues and providing guidelines, the following research questions were formed.
1. How to assist web application developers in designing task-based ori- ented forms?
2. Have local web application developers adopted the task-based oriented form design?
PROPOSED SOLUTION
As mentioned earlier, web site users’ objectives generally are for information retrieval whereas web application users have a specific goal, which is to complete tasks successfully. The key issue under study here is designing forms that will allow users to complete tasks successfully with limited hassle as possible. A form design model proposed by Jarrett (2000) is seen as the most appropriate for the purpose of tackling the issue of task-based oriented form design. No other study is found to provide similar assistance. Thus, Jarrett’s model was selected and applied to accomplish the following research objectives:
1. To produce a design checklist conforming to a task-based oriented form guidelines
2. To investigate whether the local web application developers have adopted task-based oriented form design
REVIEWS ON WEB FORM DESIGN
Design methodologies aim to create user interface that are usable, which can be used with ease and efficiently. However, an even more basic requirement is that the user interface be useful by allowing the user to complete relevant tasks. General principles of good display design include the following areas of concern: consistency, coherence, information placement, information cod- ing, color and text clarity. Various functions, interface controls and data can dynamically be put into the web application but the important thing is to ensure it can pleasantly be used together (Tidwell 2006). Furthermore, it is impossible to design effective experience without taking human emotion into consideration. The design should avoid frustration of inefficiency and obsta- cle where eventually people will go for a choice that provides the most positive feeling. Thus, usable and effective design in web application is essential to determine the successfulness of data collection and completion of
tasks. An effective visual communication do not “speak” loudly, it quietly educates and guides the audience through the Internet (Wrobleweski 2003).
FORM DESIGN
Form design used to be limited to elements such as buttons, checkboxes and text fields. However, with the increasing of interactivity, web forms now show signs of “intelligence” where users’ input, choices and responses can be customized. Web forms have to be differentiated with web application forms.
Web forms are simpler, whereas web application forms require lots of information with normally more than two screens (Cohen 2003). This evolution of form makes information interaction easier.
Form primarily combines interface, descriptions, navigation, buttons, rollovers, typography, text and placement of pixel on page. Web applications that have forms are different from the static or interactive service providing web sites. Jarrett (2004b) and Tillman (2005) believe that web forms are becoming increasingly important to most business but the form design is frequently ignored. Forms support the business and government but if the design is ignored, it creates much antagonism. Hence, users feel upset by forms, questions are difficult to understand or answer and forms are often ugly (Jarrett 2004a). Therefore, design issues of form are study areas that require urgent investigation.
FORM DESIGN GUIDELINES
In designing forms, it is better to keep it simple, consisting of only a few controls and should not require too much of cognitive processing such as thinking how to answer the posed questions or performing repetitive physical movements to complete the forms (Baker, 2001). However, some users prefer one long form rather than filling a few pages of forms since pages take a while to download (Tillman 2005).
An existing model in form design such as by Wrobleweski (2003) provides usable guidance. Generally, components in web application consist of form layouts, buttons, input text fields, pull-down list boxes, checkboxes and labels. Many guidelines have been produced for all these components in order to ensure usable application.
The above discussed guidelines are generic guidelines often found in textbooks. To date, only one study can be found to discuss specifically on web form design guideline, the Three-Layer Model (TLM). This model attempts to explain forms in terms of the appearance, relationship in task structure and question-and-answer ordering. It helps to improve usability by identifying these interface elements by layers. More explicitly, Jarrett (2000) introduced the TLM of a form as Perceptual (Appearance) Layer, Conversa- tional Layer and Relationship Layer. Perceptual Layer presents the form
layout with page elements, page furniture, instructions and prompts. Conver- sational Layer provides the questions and users respond by giving the answers. This layer focuses on organizing the question and answers by creating meaning, finding the answer, placing the answer, unity of topic and order of topics. The third layer, Relationship Layer represents one step in an overall relationship between the organization issuing it and the user complet- ing it. It explains the information exchange and the power relationship.
Hence, by combining these three layers will ensure of task completion.
Jarrett and Minott (2004) conducted a study meant for LoanBright that provides a web business for mortgage providers. Changes to a few interface design based on the TLM resulted in significant differences. Improvements in lined with TLM with tidy and organized design, clear, short and neat arrangement statement are found better than longer forms. Users also pre- ferred different changes and variants of the same form each usage time.
Guidelines are essential to web designers in designing usable web forms.
Jarrett introduced six steps in designing TLM forms; define information requirement, understand the relationship, write questions, create a conversa- tion, design an appropriate appearances and finally, perform the testing. She goes on to suggest one of the methods in designing the TLM forms is by using the vertical and horizontal grid lines. Positioning the elements (instructions, logo, text box etc) on the form orderly will create attractive appearances.
More guidelines can be found in Jarrett (2006), Lumsden (2005), Wrobleweski (2008) and Norman et al. (2000) .
In another case study, Jarret had conducted a study for Open University.
The Open University has over 150 students. Every semester, students com- plete a Registration Agreement to confirm their course choices and pay their fees. The evaluation uses the Forms Usability techniques. During the testing, students filled in the forms while the staffs were being interviewed and recorded on video. Followed by the testing, amendments were made to the forms by simplifying the wording. Results showed that the reworked forms helped to focus on meeting the needs of students and staff. The changes that were made to the forms were found helpful.
Other examples of good and bad forms design can be found in the following instances. Good forms give satisfaction to users. An example taken of an online application is the State of Tennessee Employment Application (personal.jsp” https://www.tennesseeanytime.org/tnjobs/ personal.jsp). The form is easy to use and conform to the three-layer concept with clear instructions, good interaction with users, organized page furniture, able to validate answers and provide save options in each sections. Aurora Univer- sity provides online application with various types of forms such as the Undergraduate Admission for Aurora Campus (https://www.aurora.edu/ap- ply/ugapp-aur.htm), however the form is not easy to be used by users. The form instructions are too long, page elements and furniture arrangements
unorganized, answer space are inadequate and save options in each sections are not provided.
In short, most researchers agree that good design will eventually result in good outcomes. Gratefulness, new methods, models and guidelines are among various contributions in order to achieve these objectives.
DESCRIPTIONS OF STUDY
A four-step methodology was followed in accomplishing the research objec- tives. Steps used in the study are depicted in Figure 1.
UNDERSTAND THE TLM GUIDELINES
The TLM design guidelines were used as the basis for the checklist develop- ment. Each step was studied, components involved were identified and methods to produce the components were determined. The following six-step of TLM was introduced by Jarrett (2000):
1. Define the information requirement 2. Understand the relationship 3. Write questions
4. Create conversation
5. Design an appropriate appearance 6. Testing
From the six steps Relationship, Conversational and Perceptual elements were outlined.
FIGURE 1. Overview of research methodology
Understanding
forms
THREE-LAYER CONCEPT UNDERSTANDING
In understanding the gist of the TLM, related materials of form design in web application are reviewed. Articles from web site at www.effortmark.co.uk and www.formsthatwork.com are important resources that provide the knowl- edge of this concept. Available online forum was also included. Few exam- ples of case study describing the implementation of the TLM in real situation were also studied.
To further learn about the three-layer model, Caroline Jarrett, the person who coined the model was contacted through emails. She had kindly contributed ideas and latest materials on the TLM.
DEVELOPMENT OF CHECKLIST BASED ON GUIDELINES
The checklist development went through three processes; understand the
TLM guidelines; identify the criteria and list out the form design checklist components.
1. Identify Criteria
Criteria involved in each layer were identified (Appendix) and grouped according to sections. The Relationship explains elements that contribute to the ease of communication; Conversational is about easy on brain and the Perceptual focus on easy to the eyes.
2. The Form Design Checklist Components
The checklist components were formed and these include three sections with subtotal for each section and a diagrammatic section for easier guidelines.
The components explain details in simple words for users to understand.
Users need to agree to a “Yes” or “No” option. “Yes” option equals to 1 point and “No” option equals to 0 point. The total of the points were calculated at the “Total”. If the total is equal or more than 75 percent (30 points) of the overall points (40 points), then the form design is assumed to conform to the
TLM, otherwise, the design does not follow the TLM and needs improvements.
When developing the checklist, a pilot test was conducted taking two students as the sample. This pilot test required students to design a web form and used the checklist as the form evaluation tool. They gave feedback and explained how they understood the checklist questions or arrangement of questions. Their comments were noted and used to enhance the checklist. The acceptance and validation of this checklist will be further discussed in the coming sections.
COLLECT AND IDENTIFY EXISTING WEB FORMS
Among the popular Malaysia online job applications, three forms were selected. The Google search engine (www.google.com) was used to find the list and pick the three forms from the list. The following three were selected because they were the top three Google results. Therefore, Open University Malaysia (OUM), JobStreet and Suruhanjaya Perkhidmatan Awam (SPA) forms were selected. OUM offers full time and part time positions where in 2004 more than 10,000 applications were received (telephone conversation, August 24, 2005). JobStreet is a job center channel for companies and job seekers in Malaysia and currently JobStreet had 800,000 registered jobseekers in Malaysia (JobStreet FY04 2005), while SPA offers positions in the government sectors. In 2004, SPA received 423,907 job applications and 98,663 were undergraduates (Berita Harian, 25 July, 2005).
The selected online job forms were downloaded and were benchmarked against the TLM in the compare with the TLM phase.
VALIDATE CHECKLIST
In validating the checklist, 15 respondents who are students were recruited.
They were gathered in a lab that was equipped with the Dell Pentium 4 computers with 256 RAM, Macromedia Dreamweaver 5, Macromedia Dreamweaver MX, Microsoft FrontPage, Adobe Illustrator, Adobe Photoshop and Internet connection. This is to ensure that respondents were able to use their preferred software for designing and editing, searching for resources and performing the test.
The time estimated was three and a half hours. Students were required to perform three tasks: pre-TLM, post-TLM and compare three pre-selected online forms. Before performing the test, respondents were given a form design questionnaire to capture respondents’ personal, education and web design knowledge information. Then only they proceeded with the three tasks:
1. Pre-TLM
Respondents were given a printed web form template (Application for Undergraduate Admission Aurora Campus Online Form). Participants were asked to design a more usable Aurora application form using their existing web design knowledge. Respondents could start from scratch, design from the beginning or they could download the form source code from https://
www.aurora.edu/apply/ugapp-aur.htm and redesign it.
Time given was one hour and a half. During the testing, they were allowed to ask questions. If the respondents finished up early, they may proceed to the pre-TLM evaluation. Otherwise, if the respondents could not finish on time, they may extend the time until the form is completed. In the
pre-TLM evaluation, a pre-test checklist was utilized to evaluate the form design. Total points were calculated and jotted down.
2. Post-TLM
Fifteen minutes were allocated for educating the respondents with the form design conforming to the TLM. To ensure their understanding, researchers asked questions to each respondent.
Next, respondents were required to perform the post-TLM tasks. The main purpose of this test was to evaluate the respondents’ understanding and learnability of the TLM, and whether the knowledge could be used to design a better web form in line with the relationship, conversational and perceptual concept. Respondents were given another one hour to redesign and edited their previous Aurora University web form. Some respondents requested to extend the time and some had completed the form earlier. Once completed, a second version of the form design checklist was utilized. The total points were calculated.
COMPARISON WITH THE TLM
Since respondents had gained new knowledge of the TLM, it was assumed that they were qualified to proceed to the next step, which was to use the knowledge to evaluate local web forms design. Respondents were asked to compare the three selected forms and evaluate the forms using the TLM checklist. Total points for each form were calculated. This was to determine whether the current local web form design meet the TLM concept; relationship, create conversation and have the appropriate appearance.
To sum up, the developed checklist was utilized for three purposes:
• evaluate respondents’ pre-TLM design
• evaluate respondents’ post-TLM design
• evaluate three existing forms designed by local designers in Malaysian organizations
FINDINGS
The participants that turned up comprised of six female and six male with different education backgrounds including Multimedia, Information Technol- ogy (IT) and Graphics. Out of the 12, three were considered advanced designers since they have web design experiences.
1. Pre-TLM
The participants were able to design forms based on the tasks and instructions given. Time was recorded and expert respondents were able to complete earlier or on time. However, only one of them was able to design a good web
TABLE 1. Points accumulated during Pre-TLM
Respondent Web Design Total Points Time Taken
Experience on Checklist Percentage (Hours)
(YES) (%)
1 No 22 55.0 2:10
2 Yes 24 60.0 1:28
3 No 26 65.0 1:35
4 No 22 55.0 1:55
5 No 25 62.5 1:45
6 No 27 67.5 1:38
7 No 21 52.5 2:15
8 Yes 23 57.5 1:25
9 No 23 57.5 2:25
10 No 21 52.5 2:15
11 No 29 72.5 1:50
12 Yes 30 75.0 1:30
form, conforming to at least 75 % of the checklist components (Table 1). This result suggests that 91.7 % of the participants fail to produce TLM-based web forms.
2. Post-TLM
After getting training for developing TLM-based web form, the participants were again asked to produce web forms. Points were again accumulated and interestingly results showed that only one participant failed to achieve the 75
% mark level. All the participants managed to get higher points indicating some learning activities. It also showed that the students designed better web forms after learning about the TLM. This confirmed that the checklist provided guidance in designing the web form. Table 2 shows the points increments.
3. Comparison of the Pre-TLM and Post-TLM results
Pre-TLM and post-TLM results were compared for further analysis. The highest increment was 32.5% while the lowest was 17.5%. Results also indicated that advanced participants are the group who benefited the most by using the checklist. The least experienced participant who accumulated the lowest points for both pre and post-TLM, although did not get the 75% pass level, increased his points by 20% (Table 3).
Concisely, this shows that participants had increased their points in the post-TLM. Figure 2 illustrates a clearer view of the percentage increment between the pre-TLM and post-TLM. All participants had increased their design points and the minimum increment was 17.5%.
4. Comparison on the OUM, JobStreet and SPA forms
The comparison shows all but one participant gave highest points for the Job Street form (91.7%). A similar pattern can be seen for SPA and OUM, which are ranked second (83.3%) and third (75%) respectively. These results seem to suggest that the checklist is used consistently as a guideline, thus validat- ing its reliability.
Though, JobStreet form is better than SPA and OUM, it indicated that all the three pre-selected forms do not meet the TLM requirements. The percent- age shows that OUM and SPA scores are below the passing level (75 %) for all respondents. Then again, two of the respondents credited JobStreet with 75 % and 85 %. However, when referring to the median, all the three forms
TABLE 2. Points accumulated during post-TLM
Respondent Total Points on Checklist Percentage Time Taken
(YES) (%) (Minutes)
1 34 85.0 2:00
2 37 92.5 1:30
3 35 87.5 1:30
4 31 77.5 2:00
5 32 80.0 1:50
6 36 90.0 1:40
7 29 72.5 2:00
8 34 85.0 1:20
9 31 77.5 2:00
10 31 77.5 1:40
11 36 90.0 1:30
12 37 92.5 1:15
FIGURE 2. Pre-TLM and post-TLM results
did not passed the passing level (75%). These results seem to suggest that from the viewpoints of the participants in this study, the current state of local web form design does not meet task-based orientation design (see Table 4).
TABLE 3. Comparison of the pre- and post-TLM YES Total Points YES Percentage
Pre-TLM Post-TLM Increase Post-TLM Pass Respondent Pre-TLM Post-TLM (%) (%) (%) (≥ 75%)
1 22 34 55.0 85.0 30.0 Yes
2 24 37 60.0 92.5 32.5 Yes
3 26 35 65.0 87.5 22.5 Yes
4 22 31 55.0 77.5 22.5 Yes
5 25 32 62.5 80.0 17.5 Yes
6 27 36 67.5 90.0 22.5 Yes
7 21 29 52.5 72.5 20.0 No
8 23 34 57.5 85.0 27.5 Yes
9 23 31 57.5 77.5 20.0 Yes
10 21 31 52.5 77.5 25.0 Yes
11 29 36 72.5 90.0 17.5 Yes
12 30 37 75.0 92.5 17.5 Yes
TABLE 4. Comparison on the OUM, JobStreet and SPA forms
OUM JobStreet SPA OUM JobStreet SPA
Respondent Total Points Total Points Total Points (%) (%) (%)
1 21 *(3) 25 *(2) 26 *(1) 52.5 62.5 65.0
2 28 *(2) 34 *(1) 27 *(3) 70.0 85.0 67.5
3 23 *(3) 29 *(1) 24 *(2) 57.5 72.5 60.0
4 22 *(3) 25 *(1) 23 *(2) 55.0 62.5 57.5
5 24 *(3) 27 *(1) 25 *(2) 60.0 67.5 60.0
6 21 *(2) 26 *(1) 21 *(2) 52.5 65.0 52.5
7 24 *(3) 30 *(1) 27 *(2) 60.0 75.0 67.5
8 20 *(3) 25 *(1) 22 *(2) 50.0 62.5 55.0
9 23 *(3) 27 *(1) 25 *(2) 57.5 67.5 62.5
10 21 *(3) 27 *(1) 24 *(2) 52.5 67.5 60.0
11 24 *(2) 28 *(1) 22 *(3) 60.0 70.0 55.0
12 25 *(2) 27 *(1) 25 *(2) 62.5 67.5 62.5
Total 276 330 291 690.0 825.0 725.0
Median 23.0 27.5 24.3 57.5 68.8 60.4
Note - *( ) indicates form ranking between the three forms
Figure 3. Shows the pattern between OUM, JobStreet and SPA forms for each respondent. The pattern is likewise the same for each respondent except for respondent number 1, but the difference is insignificant.
FIGURE 3. Comparison between OUM, JobStreet and SPA forms respondent
Total Marks
DISCUSSION
The findings show interesting results in the pre-TLM, post-TLM and compari- son on the three selected forms. Basically, only one respondent passed the margin level by utilizing his existing web form design knowledge in the pre-
TLM. However, improvements were seen on all participants in the post-TLM, indicating learning gained due to the proposed checklist.
Participants were also fairly confident in utilizing the checklist to evaluate “web form design conformance” of three pre-selected web forms designed by local developers. This further suggests that the proposed check- list can be used as a guide to enhance web application form design that emphasizes on task-based oriented design.
CONCLUSION
A form design checklist was developed based on the TLM. The purpose is to provide web designers with guidelines in designing a better web form, satisfying both users and organization issuing the forms. Findings suggest that web designers designed better web forms after learning about the TLM
and the checklist indeed had provided guidance in designing better web form.
Consequently, it can be put forward that the main contribution of this study is the proposed checklist that should guide future designers in designing enhanced online web application forms utilizing Perceptual, Conversational
and Relationship layers. The TLM form design checklist can help the produc- tion of better and usable online forms specifically for web application.
Furthermore, it can also be used as an evaluation tool.
In carrying out the checklist development and evaluation, a number of constraints were faced. First, the small number of participants who were willing to sit through hours of testing. Had more participants turned up, more significant findings could have been obtained. Second, literatures on web or online form designs are highly scarce; making this study lack in theoretical significance and highly depended on online articles. Third and finally, although the main expert who coined the TLM model provided her best support and guidance, virtual communications were difficult to administer.
Investigation of the current state of web form design among Malaysian developers also seems to suggest that the current state of local web form design does not meet task-based orientation design. This should be further investigated by conducting more experiments with larger number of forms and participants. One possible root of this failure could be contributed to syllabus designed in colleges and higher institutions. Being members of two of Malaysian higher learning institutions, we can confidently say that form design is just taught very briefly in classes. Perhaps, future studies could also be targeted at investigating how TLM design ought to be integrated into the course syllabus.
APPENDIX 1
Web Form Design Checklist Based On TLM (FoDeC-TLM)
FoDeC-TLM is a checklist that allows web application designers/developers to check whether their web forms conform to the Three-Layer Model (TLM) Guidelines. Using FoDeC-TLM is easy and simple. First, have your web form ready. Then, go through each criterion listed in the FoDeC-TLM. Tick ¸ for YES if your form meets the criteria.
Otherwise, tick O for NO. Each YES answer gives you 1 point. When all questions are answered, add ALL YES points. Then, count its percentage value. Finally, use the following guide to measure your form conformance level.
REFERENCES
Bakar, A. B. 2005. Job Carnival Launch: Ministry of Human Resources Malaysia.
(online). http://www.mohr.gov.my/mygoveg/makluman/spdm26.htm (22 June 2006).
Baker, A. 2001. Effective Use of Forms on Web sites. (online). http://www.merges.net/
theory/20010301.html (7 July 2005).
Baxley, B. 2003. What is a Web Application? Boxes and Arrows. (online). http://
www.boxesandarrows.com/archives/what_is_a_web_application.php (7 July 2005).
Berita Harian. 2005. SPA Keluarkan 252 Jawatan penuhi 70000 Kekosongan, 25 July.
Cohen, J. 2003. The Unusually Useful Web Book. Indiana: New Riders.
Fowler, S.L. & Stanwick, V.R. 2004. Web Application Design Handbook: Best Practices for Web-Based Software, London: Morgan Kaufman.
Jarrett, C. & Minott, C. 2004. Making a Better Web Form. Forms That Work. (online).
http://www.formsthatwork.com/ftp/BetterForm.pdf (3 July 2005).
Jarrett, C. 2000. Designing Usable Forms: The Three-Layer Model of the Form.
Forms That Work. (online). http://www.formsthatwork.com/ftp/
DesigningUsableForms.pdf (3 July 2005).
Jarrett, C. 2003. Designing Easy and Accurate users Dialogs. (online). http://
www.stc.org/50thConf/Session_Materials/datashow.asp?ID=44#21 (12 July 2005).
Jarrett, C. 2004a. Hooray, I’m Doing the Form. Intercom 2004.
Jarrett, C. 2004b. Imperfectly Formed. Infoconomy (online) http://www.infoconomy.com/
pages/M-iD/group101315.adp (26 July 2005).
Jarrett, C. 2006. Usability and On-line Forms: How to get the data you need. (online).
http://www.nycupa.org/past_events/formsthatwork-for-nyc.pdf (2 July 2007).
JobStreet 2005. JobStreet FY04 net at RM9.3m. The Edge. (online). http://
my.jobstreet.com/aboutus/mreports1055.htm (27 July 2005).
Lumsden, J. 2005. Guidelines for the Design of Online-Questionnaires, National Research Council Canada.
Norman, K. L., Friedman, Z., Norman, K. D., & Stevenson, R. (2000). Navigational issues in the design of on-line self administered questionnaires. Behaviour and Information Technology, 20: 37-45.
Tidwell, J. 2006. Designing Interfaces, CA: O’Reilly.
Tillman, J. 2005. User Interface Design for Web Applications: It’s a Different World from Web Site Design. Digital Web Magazines. (online). http://www.digital- web.com/articles/user_interface_design_web_applications/ (2 July 2006).
Wrobleweski, L. & Rantanen, E. M. (2001). Design Considerations for Web-based Applications. LukeW Interface Design. (online). http://www.lukew.com/ re- sources/articles/web_applications.html (2 July 2005).
Wrobleweski, L. 2003. Visible Narratives: Understanding Visual Organization. Boxes
& Arrows. (online). http://www.lukew.com/resources/articles/visible_narratives.html (2 July 2005).
Wrobleweski, L. 2008. Web Form Design Best Practices. Brooklyn: Rosenfeld Media.
Norshuhada Shiratuddin Zanariah Idrus
Faculty of Information Technology Universiti Utara Malaysia
06010 Sintok, Kedah shuhada@uum.edu.my zanaidrus@yahoo.com
