ER Approach to Website Design: An Urban University ...



ER APPROACH TO WEBSITE DESIGN:

AN URBAN UNIVERSITY TEACHING EXPERIENCE

P. Pete Chong

Department of Finance, Accounting, and CIS

University of Houston-Downtown

One Main Street

Houston, TX 77096

chongp@uhd.edu; 713.221.8920

Ming Chang

Department of Finance, Accounting, and CIS

University of Houston-Downtown

One Main Street

Houston, TX 77096

changm@uhd.edu; 713.221.8576

Ruth Robbins

Department of Finance, Accounting, and CIS

University of Houston-Downtown

One Main Street

Houston, TX 77096

robbinsr@uhd.edu; 713.221.8594

Abstract: This paper addresses a different view and approach to hopefully alleviate common problems in website development and management today. The proposed approach has been used to teach Computer Information Systems (CIS) students during their senior projects at University of Houston-Downtown (UHD), an urban university. This newly developed methodology translates development theories to concrete steps to develop websites and has been successful in serving the specific needs of students in this urban university setting.

Introduction

WITH E-COMMERCE BECOMING THE CENTER OF TODAY’S BUSINESS WORLD, A COMPANY LARGE OR SMALL REQUIRES SOME KIND OF INTERNET PRESENCE. THIS PRESENCE IS OFTEN EXPRESSED IN THE FORM OF A WEBSITE WHICH SERVES AS AN INFORMATION DISTRIBUTION CENTER AS WELL AN INTERFACE FOR THE COMPANY TO SERVE ITS CUSTOMERS. WITH THE ADVANCEMENT IN THE DEVELOPMENT OF AUTHORING TOOLS AND GRAPHIC-DESIGNING SOFTWARE, CREATING ATTRACTIVE WEB PAGES FOR THE WEBSITE IS EASIER THAN EVER. HOWEVER, TO REMEMBER THAT THESE ATTRACTIVE WEB PAGES ARE PART OF THE CUSTOMER INTERFACE AND THE PROPER COMPANY INFORMATION PROVIDED WOULD BRING BENEFITS TO THE CONSUMERS IS EVEN MORE IMPORTANT TODAY. FURTHERMORE, THE EASINESS OF CREATING WEB PAGES AND THE LOW DEVELOPMENT COST INVITE A PROLIFERATION OF PAGES TO OCCUPY A COMPANY WEBSITE REACHING TO ITS CRITICAL MASS AND CAUSES WEBSITE-MANAGEMENT PROBLEM, IF NOT A NIGHTMARE YET. THEREFORE, A MORE COMPREHENSIVE APPROACH TO THE DEVELOPMENT AND MANAGEMENT OF WEBSITES IS NEEDED. THIS PAPER WILL ADDRESS A DIFFERENT VIEW AND APPROACH TO HOPEFULLY ALLEVIATE WEBSITE DEVELOPMENT AND MANAGEMENT PROBLEMS ENCOUNTERED NOWADAYS.

The retrieval of information from a Website is analogous to that of information retrieval from a library or a database and therefore we perhaps may apply some already-established insights in database design and development to the Website design and development. Peter Chen’s (1976) Entity Relationship (ER) model has been used in designing databases for that last 25 years. In addition to enriching the modeling language, researchers have applied ER modeling concepts beyond databases (Chong, Chen, and Justis 1992a). Examples include the incorporation of business rules in databases (Chen, Segarra, and Chong 1992), information diffusion (Chong, Chen, and Pruett 1993), and Decision Support System/Expert System Integration Design (Chong, Chen, and Justis 1992b).

Input-Process-Output is the usual depiction of the major components of any information system. Since the ER model was originated to handle database design, it is clear that this modeling tool is most suitable for Input and Output – which are tangible elements – and for Processes where software engineers and system designers have used the Data Flow Diagram (DFD) to show the relationship between processes and their data source for a long time. This article presents a methodology for Website design that is based on concepts of the ER modeling and DFD. This approach has been used to teach Computer Information Systems (CIS) students during their senior projects at University of Houston-Downtown (UHD), an urban university. This methodology translates development theories to concrete steps to develop Websites and has been successful in serving the specific needs of students in this urban university setting.

The University Setting

THE UNIVERSITY OF HOUSTON SYSTEM ENCOMPASSES FOUR UNIVERSITIES. THE PRIMARY UNIVERSITY IS THE UNIVERSITY OF HOUSTON (UH), A DOCTORAL-DEGREE-GRANTING, RESEARCH UNIVERSITY THAT IS ONLY A FEW MILES AWAY FROM UHD. THE OTHER THREE UNIVERSITIES ARE UHD (A FOUR-YEAR UNDERGRADUATE UNIVERSITY WITH LIMITED GRADUATE PROGRAMS); AND THE UNIVERSITY OF HOUSTON-CLEAR LAKE AND THE UNIVERSITY OF HOUSTON-VICTORIA, THE LATTER TWO ARE UPPER DIVISION AND MASTERS’-LEVEL INSTITUTIONS. THE UH SYSTEM ALSO HAS CENTERS LOCATED AT SUGAR LAND AND AT CINCO RANCH. UHD BECAME AN ENTITY WITHIN THE UH SYSTEM IN 1979 WHEN IT BECAME THE UNIVERSITY OF HOUSTON DOWNTOWN COLLEGE, THE OPEN-ADMISSIONS COMPONENT OF THE UNIVERSITY OF HOUSTON SYSTEM. THE COMPUTER INFORMATION SYSTEMS DEPARTMENT IS A PART OF THE COLLEGE OF BUSINESS AND IN RECENT YEARS, THE NUMBER OF CIS MAJORS HAS GROWN TO BE ONE OF THE LARGEST MAJORS WITHIN THE UNIVERSITY. CURRENTLY UHD HAS THE SECOND HIGHEST ENROLLMENT WITH 10,974 STUDENTS IN THE UH SYSTEM (ACKERMAN 2003).

The UHD student body reflected the diverse population of Houston with 34% Hispanic, 28% Black, 25% White, 10% Asian, and the remainder American Indian, International, or do not specify. The average student age is 26 years old and 60% of students are female, many of them single parents. Slightly more than half the students (50.7%) began the semester as full time students, i.e., enrolled in 12 hours or more. This suggests that more than half of the students work either full-time or part-time.

Classes are held with instructors face-to-face with students, online via the Internet or via interactive television (ITV) sites. Students are located at one of several remote sites: in far north Houston at the University Center (located in the Woodlands next to the campus of Montgomery College campus of North Harris Montgomery Community College), in far west Houston at the West Houston Institute at Cinco Ranch, or in far South Houston at the Fort Bend/Sugarland Campus. Within this environment, UHD students bring to the classroom a wealth of experiences and there are very definite international influences since many of the students are from diverse countries throughout the world.

At UHD, the CIS program was initially modeled after the DPMA (Data Processing Management Association, now: Association of Information Technology Professionals) Model Curriculum and has continuously been updated to reflect the needs of industry – based upon recommendations made by an active CIS Advisory Board. Within the curriculum there is an ongoing attempt by faculty to maintain technical currency. It is within this environment that the ER Approach to the Systems Development Life Cycle is being utilized as an instructional tool for website design.

ER Approach to SDLC

THE SYSTEMATIC WAY TO CREATE A SOLUTION TO A PROBLEM FOLLOWS THE STEPS OF THE SYSTEM DEVELOPMENT LIFE CYCLE (SDLC). DEPENDING ON THE FOCUS OF DISCIPLINES, SDLC CAN HAVE MANY DIFFERENT DESCRIPTIONS. THE STEPS THAT WILL BE DISCUSSED IN THIS SECTION ARE ORIGINALLY USED FOR DATABASE DESIGN, SO IT WAS ORIGINALLY CALLED THE ENTITY-RELATIONSHIP (ER) APPROACH (CHONG AND CHEN 2000; CHONG, CHEN, AND JUSTIS 1992A). THE ER APPROACH TO SDLC CONSISTS OF FIVE STEPS: ENTERPRISE VIEW, REQUIREMENTS ANALYSIS, LOGICAL DESIGN, PHYSICAL DESIGN, AND IMPLEMENTATION AND TESTING. SINCE THESE STEPS CAN BE USED TO MANAGE ANY PROJECT, IT IS LATER RENAMED THE PICTORIAL APPROACH FOR BROADER APPEALS. THE FIVE STEPS OF THE ER APPROACH ARE DESCRIBED BELOW.

ENTERPRISE VIEW

The primary focus of this step is to identify the goal of the project as well as the benefit clients seek. Depending on the level of authority, the goals may be different for the same project. For example, if a manager must adhere strictly to the guideline of the upper management, the project specifications may become the primary goal. At the strategic level, assessing client needs may be the primary goal/focus and it may require quite a bit of work to even find out those hidden needs.

REQUIREMENTS ANALYSIS

Three tools may be used in this stage: interview, documents and forms, and the primary goal of this stage is to identify what it takes to achieve that goals set by clients. Although meetings with clients are apparently essential to achieving the goals, they are often difficult to be arranged due to scheduling conflicts and time commitments needed. To minimize the need of meetings, descriptive documents (such as memo, policy, and user’s manuals) and existing forms (such as application forms, reports, handouts, and flyers) from clients may be used for preliminary assessment. In general, the nouns in documents are sources of potential “ingredients” (i.e., input and output) and verbs “processes” in a system (Chen 1979, 1983). It is obvious that the application forms and reports contain important input/output information.

LOGICAL DESIGN

In this step, the focus is to organize these identified factors (attributes) into a solution system that makes sense on paper. The purpose of organization is to make the system more efficient. In database design, it is often pointed out that the 3NF tables contain “one theme” each – in other words data can be organized by relevance. Usage pattern is also important in determining which attributes to include, as in when denormalization is actually preferred. In fact, one may argue that since relevance is often dictated by usage pattern, the whole process must be based on usage analysis. Typically Entity Relationship Diagrams (ERDs) are produced to depict the need of cross-reference among tables.

PHYSICAL DESIGN

Once the system is designed on paper, the “right” tools will be selected for implementing the system. “Right” tools are those that are available and someone in the organization knows how to use them. After the tools are selected, the “system on paper” may need to be modified to accommodate the chosen tool.

IMPLEMENTATION AND TESTING

This is the stage where actual coding and debugging takes place. It should also include user training.

Advantages of ER-Approach to SDLC

THESE FIVE STEPS ARE LOOPED WITH FEEDBACK PATHS. THAT IS, WE MAY EVEN REASSESS THE GOAL OF THE PROJECT AND REVISE THE REQUIREMENTS. IT IS ESPECIALLY IMPORTANT TO CONSTANTLY EXAMINE WHETHER SOLUTIONS DEVISED AT THE LOWER LEVEL CONTRADICT WITH THE ENTERPRISE VIEW. FOR EXAMPLE, IF THE GOAL OF THE PROJECT IS TO MAKE THE SYSTEM EASIER TO USE, WE NEED TO PAUSE AND PONDER WHEN SOMEONE PROPOSES A SECURITY SYSTEM THAT WOULD ADD EXTRA 20 STEPS TO THE OPERATION,

Because CIS is part of the business school, we focus on problem analysis rather than the pure technical implementation. This ER Approach has two great advantages. First, there is a separation of managerial and technical problems. Business managers can handle the first three steps themselves without basic computer knowledge, while the technical people handle the last two steps without knowing how the business is run (Chong and Chen 2000; Chong, Chen, and Justis 1992a). Second, the result from the Logical Design (the “solution on paper”) is proven to be a stable and portable solution.

It is “stable” because business goals may not be changed as rapidly or drastically as the tools, thus the first three steps may require less effort the second time around. In terns of “portable” we mean that the result of the Logical Design can be implemented on many platforms. For example, if the conclusion of our logical design requires the summation of one thousand numbers, the actual work can be done using calculator, spreadsheet, or an abacus. In other words, the solution may be implemented on many different platforms, and a manager may have more choices from which to choose tools that are “right” for the company.

An Illustration of the Process

This section will use a student project as an example.

ENTERPRISE VIEW AND REQUIREMENTS ANALYSIS

Although the Enterprise View needs to be assessed first before “what does it take” can be determined, there are gives-and-takes in these two stages. Typically, a less experienced student would just follow the direction of their clients for the contents and organization, but a more experienced student may actually provide advises to their clients as to what to include to achieve those goal. At times students may even help clients to identify the true goals of the business. This separates a “technician” from “consultant,” and students are reminded that the CIS degree provides them the business knowledge to become “consultants” in the future. Figure 1 is a list of suggested questions for students to use during the interviews.

Figure 1: Handout for Enterprise View and Requirements Analysis stages

Websites can be used to serve internal and external clients, and they may target either existing or potential customers. In either case, clients’ needs can be identified primarily from the records of previous requests via phone logs or company correspondence and memos. For potential customers (i.e., use the Website as a marketing tool), students are asked to look into current marketing tools (i.e., commercials, advertisements, flyers, etc.) to identify things that may attract new customers. It may also require students to conduct interviews to the targeted demographic groups or to surf the Website of similar businesses. At the end of the stage, students should produce a laundry list of items that are deemed necessary to be included on the Website. Students will need to check their final Websites against list for consistency. The ideal Website should be necessary and sufficient.

Note that what users want from a Website may not be what designers expect. That is why it is important for students to interview their clients’ clients.

LOGICAL DESIGN

Using the laundry list from the Requirements Analysis stage, students will begin to organize those data according to relevance and usage. They will need to consult their clients as well as draw ideas from how other similar sites. However, note that the usage pattern may be quite unique for the company. Students need to look at those piles and consider the balance. A more balanced distribution of information among categories will reduce the number of layers needed, resulting in fewer clicks.

Once the data are organized into piles, students will use 11x8.5 blank papers to design their storybook using the concept of DFD. Figure 2 is the direction for generating the storybook. Figure 3 is an illustration of what the context diagram (i.e., the homepage) and 1.0 may look like. Note that each of these diagrams should be on separate pages. Each page will be divided into two parts. The top part will be a hierarchical chart for that page. That is, the links to other pages that will be provided in this page. Any external link should be considered as outside of the project boundary and not included in this hierarchical chart. The bottom half shows how the page may look like. Students are not required to use computers to create these diagrams. Figure 3 shows that the filenames for the pages are on the top right corner, but in reality they are added in the Physical Design stage.

Figure 2: Handout for Logical Design Stage

By the end of this process, students should have one paper page per web page, they will have to check to see if these pages are “necessary and sufficient” to achieve the goals set forth at the Enterprise View stage. Note that half of a regular 11x8.5 paper is about the same perspective of a computer screen, so the students can have a preview to balance the contents of all pages.

PHYSICAL DESIGN

Students will be asked to generate a list of tools that will be used in this project. These tools may include hardware, software, human resources, and infrastructures. Hardware includes computer, scanner, digital camera, printers, etc. Software may include operating systems, graphics tools, authoring tools, networking and Internet software, etc. Human resources include the person from the company who will begin to take over the project (i.e., as part of the exit strategy), etc. Infrastructure includes the Web server, Web services, Internet connection, etc.

Once the “right” tools are determined, students will need to provide names to all files to complete the diagrams. Some of the features may have to be excluded because of the limitation of the tools or resources, and some new ideas may be added due to the capability of the tools selected. Hopefully a proper domain name will be obtained as well. In either case, at the end of the Physical Design stage students are asked to declare their project “feature complete” and proceed to Implementation and Testing stage.

IMPLEMENTATION AND TESTING

Students may use any tools to create these Web pages. Since Logical Design stage has provided a comprehensive blueprint of the Website, these pages can be created independent of each other. That is, some students may have to create several hundred pages, but they may train and in the mean time use the help from their clients to meet the requirements. Thus, the implementation stage includes training clients so the students can exit at the end of the project. Periodical walkthrough will help to correct problems. Whenever a page is finished, students may upload them to Web servers for further testing.

Students are asked to find internal testers as well as external testers. The purpose of internal tester is to validate the information listed on the Website, while the external testers (i.e., clients’ clients) are needed to confirm that the contents of the Website are helpful (i.e., “necessary and sufficient”). External testers can also help the looks and feels of the Website navigation.

3(a) 3(b)

[pic]

Figure 3: Two Pages from Logical Design Report

Result and Conclusion

THE CONCEPT AND CONCRETE STEPS FOR SDLC DESCRIBED IN THIS ARTICLE HAS BEEN USED FOR TEACHING SENIOR PROJECTS AT UHD. GIVEN THE BACKGROUND OF THE STUDENTS, INSTRUCTORS HAVE BEEN ABLE TO HIGHLIGHT THE IMPORTANCE OF WHY CIS IS PART OF THE BUSINESS SCHOOL (ANSWER: SO STUDENTS CAN CARRY OUT THE TASKS IN THE FIRST THREE STAGES) AND FOR THEM TO KNOW ABOUT TECHNOLOGIES (ANSWER: SO THEY CAN CARRY OUT THE TASKS IN THE LAST TWO STAGES). BY USING THIS APPROACH, STUDENTS HAVE INCREASED THEIR UNDERSTANDING OF THE SENIOR PROJECT. AS A RESULT, 100-PAGE WEBSITES HAVE BECOME COMMONPLACE FOR SENIOR PROJECTS. FOR MORE ADVANCED STUDENTS, DYNAMIC PAGES HAVE BEEN DEVELOPED TO HANDLE THE LARGE NUMBER OF DATA.

Although this ER-approach is described in terms of Website design, similar concept and concrete steps have been used for database design in senior projects as well.

Reference

ACKERMAN, T., “TSU, UH SEE RECORD NUMBERS OF STUDENTS: COLLEGE ENROLLMENT INCREASES STATEWIDE,” HOUSTON CHRONICLE, SEPTEMBER 26, 2003. AVAILABLE . RETRIEVED SEPTEMBER 27, 2003.

Chen, P., “English Sentence Structure and Entity-Relationship Diagrams,” Information Sciences, Vol. 29, 1983, pp.127-149

Chen, P.P., “The Entity-Relationship Model: Toward a Unified View of Data,” ACM Trans. on Database Systems, Vol.1, No.1, March 1976, pp. 1-36.

Chen, P., “Entity-Relationship Diagrams and English Sentence Structure,” The Proceedings of ER Conference, Los Angeles, 1979, pp. 13-14.

Chong, P.P. and J.C.H. Chen, Building Decision Support Systems Using Visual IFPS/Plus, Simon & Schuster Custom Publishing, 2ed., 2000.

Chong, P., Y.S. Chen, and J.M. Pruett, “Information Technology Transfer in Econometric Forecasting: A Pictorial Approach,” Journal of Information Technology, Vol. 8, Number 1, March 1993, pp. 3-13.

Chen, Y.S., G. Segarra, and P. Chong, “Visualizing Business Rules in Corporate Databases,” Industrial Management & Data Systems, Vol. 92, No. 7, 1992, pp. 3-8.

Chong, P., Y.S. Chen and R.T. Justis, “A Venture Capital Data Model Using CASE,” Data Resource Management, Winter 1992, pp. 55-67.

Chong, P., Y.S. Chen and R.T. Justis, “A PC-Based Decision Support and Expert System for Labor Market Analysis,” Journal of Microcomputer Applications, (1992) 15, pp. 253-266.

Office of Institutional Research & Planning in cooperation with Information Technology at University of Houston Downtown, Spring 2003 Semester – Fact Sheet (20th Day Preliminary Reports). uhd.edu/about/irp/fact_book/FactBook_02_03.pdf

-----------------------

Enterprise View

What are the goals? How do you assess these goals? What are the benefits?

What decisions need to be made? What type of reports will be needed? What decisions will be made based on these reports? Who determines the usefulness of these reports?

Who are your clients? Who are the customers of your clients? What do the customers of your clients need to make their decisions? What do your clients need to make their decisions?

Eventually we will have to determine the scope of the project. Consider the time that will be necessary to complete your project, including training your replacement. Think exit strategy early.

Requirements Analysis

Interview

Who will be assisting the work? What is the primary business of your clients? Who will take over the project at the end of the semester?

Document-Centered Approach

They are descriptive in nature, such as company mission statement, company description, product description, memo, project description, and user’s manuals, etc.

Form-Centered Approach

Lists, brochures, pamphlets, flyers, pictures; input (applications, invoices, etc.) and output (reports, receipts, summaries, etc.) forms.

Include all materials that you have used to collect “requirements.” Create a list of data/information you will need to include in your project. Highlight the source and include them in your stage report. Keep record of your interviews, including the date, time, names of person you interviewed, their contact information, and highlight the transcription where you obtain the essential materials.

Logical Layout

Basically use the concept of DFD to show different levels of logical structure. The context diagram could be considered to be your homepage. Each page on this storyboard represents one physical page on your Website. Each page should contain two parts. The top part has the index (e.g., 2.1.1), file name, the “hierarchy chart” of the physical page. The bottom part is the actual layout of the links and items (i.e., how it should look like). The filenames of the graphics should be shown as well.

Make sure that everything you have listed in your requirements analysis is incorporated in the storyboard.

Physical Layout

It is how the actual files are organized on your Web server. Please name your filenames systematically, with balance between information and length. The commonly used graphics (e.g., company logo) should be kept in a separate directory under the root, while the graphics that are needed specifically for a Web page (e.g., a picture of a specific product) should be kept in the same directory as much as possible

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download