AN OVERVIEW OF DEVELOPING A WEBSITE

DEVELOPING WEBSITE AT EARLY STAGE : IT ARABIA.COM HUMAN COMPUTER INTERACTION

By; ROSIADI BIN TAJUDIN MOHD. FIRDAUS MAT KAMIL

SCHOOL OF INFORAMTICS SCIENCE UNIVERSITY MALAYSIA SABAH LABUAN INTERNATIONAL CAMPUS

Table of Contents Page Chapter 1

Introduction

1

1.1 Goal 1.2 Objective 1.3 Target user

1 2 2

Analysis

3

2.1 Website Analysis 2.1.1 Understand User 2.1.2 The Use of Icon Image 2.1.3 The Use of Prompt Window 2.1.4 Media Resources 2.2 Website Content 2.2.1 News Page 2.2.2 Chat Page 2.2.3 Registration Page 2.2.4 Help Page 2.2.5 Search Button 2.2.6 About Us Page 2.2.7 Admin Page 2.3 User Task Information Model

3

10

Design

15

3.1 3.2 3.3

15 17 23

Chapter 2

Chapter 3

Screen Navigation Map Storyboard Example of Storyboard Screen Sketches 3.3.1 Main Page Sketches 3.3.2 Chat Page Sketches 3.3.3 Company Registration Page ketches 3.3.4 Company Page Sketches 3.3.5 News Page Sketches

6

Conclusions

26

References

27

CHAPTER 1 INTRODUCTION The rapid development of information technologies, make internet as the first medium to find information and any resources. Government and private sector were rushing to implement their own website to spread their services and products to peoples. Nowadays, there are millions of website which can be browse worldwide and they offered much kind of services. From selling and purchasing online, advertising and promoting, filling form and sharing information, the internet also act as a medium to get latest bulletin and news on what had happened around the world. By that, all of the news is always on our fingers. Peoples do not need to go to shop nearby their house early in the morning to buy newspaper. What they needs is only a computer which connected to internet and they can browse any information they want any time and anywhere. However, sometimes it becomes critical part for web designer to create a good design for website. This is due to the many requirements that need to be considered such as the user requirements; whose are our target user, and many more. The web designer need to consider the background of the user, language, culture and how the web site designed could attract user to stay with the site. Besides, one of the most important parts also is how the web designed could interact with the user following the principle of human computer interaction. So, through this group assignment we are trying to suggest a design for a new news website for a company which located in Saudi Arabia. 1.1

Goal

The news website is a kind of information website. News website is created to spread information to users (peoples) in a country and can be reached worldwide. So, our goal is to create a design of a news website for news readers which belong to a new company who has one publishing house for IT

magazine (IT Arabia) in Jeddah, Kingdom of Saudi Arabia. The website will be known as ITArabia.com. 1.2

Objective

The objective of this news website is to fulfill all the user requirements on the latest and up-to-date news regarding current technologies in Middle East. This website also aims to attract IT vendors in the market to publish their new devices and promote their products to end users. This website also was designed will provide multiple functions such as, enabled the administrator to edit everything in the web page and enabled chief editors and assistant editors to add and edit news on the web page. Besides, this website also will provide the online chat for the members of this system. 1.3

Target User

As being stated above, the most important part in developing any system online (dynamic website) is to know who our users were. The better we understanding our users the better website we may provide for them. For this news website, the target users are middle class people who live in Jeddah, Kingdom of Saudi Arabia. Most of them are educated and 60% to 70% were non-English speaker. They are peoples who shop regularly and from the surveyed most of them have a home personal computer with (56Kbps) internet connection.

CHAPTER 2 ANALYSIS In this analysis phase we will analyze the whole elements of the website that we are going to design. We will analyze each page in this website, the icons being use, the media resources for the information requirements, and the usage of every page. Besides, we will also suggest the user task-information models which will shows the way users might use this website. 2.1

Website Analysis

The website that will be developed is ITArabia.com. It can be browse by log on to http://ITArabia.com from any web browsers or search it through any search engines. In developing this website, we have considered many things such as the target users, kinds of icons, and also the language to be used. 2.1.1 Understand User Since the target user is the people who lived in the Middle East, so we suggest this website to be build in two versions of languages. The first version is English and the Second Version is Arabic. This is important because from the surveyed 60%-70% of the people there are non-English speaker. So, if we developed 2 versions of website, this may help to attract user to browse and use services offered by this site. However, this website will make English Version as the default version. This is to enable peoples outside the Middle East to browse this website as long as English functions as an international language. 2.1.2 The Use of Icon Image

In the other context, the usage of icon image also important to enhance users understanding on certain phrase. The image being used usually will have similar to the functions of the image in the real life. This is called metaphor. In example we use dustbin image to show a place to throw programs or file which is useless, and this is likely the function of dustbin in real life where we use it to throw rubbish. So, in this website icon images are use for buttons. The descriptions are as below:

Button - Search

- News

Members Login

Company Login

- Chat

- Registration

- Help

Icon

Description The image of lens is use. This image is used because the lens functions in real life to look at the small specimen and we considered it as searching. The image of people reading papers. This image shows that this is the button that we need to click to read the papers. The image of key is used. As in real life we use key to unlock door or drawer. So, in this website key image show that to log in into the page we need a password. The image of key is used. As in real life we use key to unlock door or drawer. So, in this website key image show that to log in into the page we need a password. We used the image of 2 people and 2 direction arrow in the middle. The 2 direction arrow in the middle shows that the 2 peoples were sharing their opinion and information (chat). We used the image of pen writing on a paper. This image shows that users need to write down some information required (fill in the form) to use certain services. The symbol of question mark is used. Question mark is globally used to show we have query on certain thing. So, we would like to ask and getting help. So, it represent help in section in this website.

2.1.3 The Use of Prompt Windows The prompt window also used in this websites to enable user know that certain thing they have done is incorrect or they are wrongly key in certain information needed There are few of prompt windows being used in this websites such as: 1-

If users key in the wrong password or username while log in into company page or chat page the prompt window will exist and the sentences such as below will exist inside the prompt window. (“You have entered wrong username or password”).

2-

If users submit the registration form which not fills in properly then the prompt windows will exist as below: (“Please enter all the required information”).

3-

If users use the search button and the phrase or words they key in are not match with any phrase, words or image in this website, then the prompt windows will exist such as below: (“No results found for your search”).

2.1.4 Media Resources Media resources are using in this website to attract user attention to this site. In example the usage of flash media is in banner. So, user will not only see static text which is sometimes making bored. The flash media also used in presenting the advertisement. Besides flash media, we also use video elements in this website. One of the examples of the video usage is on the About Us page. There are video spaces, which will show a simple video of IT Arabia Company. Since this website is developed to enable outside company (IT vendors) to promote the news and product, we are also responsible to determine the kind of media resources that the companies can used. Besides, let the companies to post the picture or images of their product to be publish

in this website, we also let them to post a simple video. This can be seen in the company page where we provide a video space for the companies to send their video to us. We provide multiple format of video that they like to include in their advertisement. 2.2

Website Content

This website is divided into 6 main pages (refer to 3.1 Screen Navigation Map). The first page will be the front page (Home) which is the first interface that user will see after log on into this website. The first page also will link users to the other pages in this web site. The 5 other main pages are News page, Chat page, Registration page, Help page, About Us page and Admin page. This website also will provide user with search button. The main interface for this website such as illustrated on figure 2.1 will be constant for all of the other pages inside this website. This main interface will enabled user to navigate to other pages easier without going back to the Home pages.

Banner Button 1 Text 1

Text 2

Text 3

Button 2

Figure 2.1: Main interface for ITArabia.com

* refer to the explanation on the next page

The main interface descriptions are as below: Banner

: Represent the banner of ITArabia.com; it will be in flash form (animated text). There also will be two navigations buttons to change the page language. The first button is Arabic Version and second button is English Version.

Button 1

: This is the navigation button which link user to the other pages in this website. It consists of Home, News, Registration, Chat, Help, and Search.

Text 1

: This is the advertisement space area.

Text 2

: This will be the dynamic text space which link user to the other sites out of this site. In example the sites of a company which have promote their product in this website.

Text 3

: This will be the copyright of ITArabia.com.

Button 2

: This is the navigation button. It consists of 2 buttons which is About Us and Admin. Users can surf the about us pages but can not log in to admin pages.

Blank area : The location of additional interface for certain pages. 2.2.1 News Page News page is the page in which user can read the latest news regarding technologies in Middle East. User can browse the news by simply click News button. Besides, user also can browse the news page through news space in the Home interface (refer to 3.1 Storyboard). In the news page the news will be listed in decreasing order. Means that the latest news will be on the top followed the previous news at the bottom. The list will show the title of the news and a brief content of the news (2-3 lines). So, if users are attracted to the news they can simply click the news title and the full page of the news will be opened. In the full page news the picture will also be present as related to the news.

2.2.2 Chat Page Chat page is the page which enabled registered members to chat with other member in this website. Users may like to share their opinion and experience about the news or product which being promoted. So, the chat page is the right page to do so. The chat page can be browse simply by click the chat button, then the chat login page will exist and users need to key in their name and password. After log in inside the chat page, user can start their chatting with others members of this website. However, for unregistered members they need to register first before joint the chat. The registration can be done through Registration Page (refer 2.2.3 Registration Page) or through Chat space in the Home interface (click new users? refer to 3.2 Storyboard). Then, the form same as at the registration page will exist and user need to fill in the information needed. 2.2.3 Registration Page Registration Page has two functions which are for company registration and chatting member registration. When user click the registration button the 2 sub button will come down. First is registration for company and second is registration for chatting member. Registration for company is used for companies who like to publish their latest news and promote their latest product to end users through this website. After clicking the company registration button the registration form will exist. Then, the company needs to fill in all the information required. After registered, the company can send their latest news, picture of their product or even simple video of their product to be published in this website. All of this can be done through company log in space in the Home interface (refer to story board). While, the functions of registration for chatting member button also same as company registration but the purpose is different. For the chatting member registration, user also will be ask to fill in the information required

and after approved they can start use the chat page to chatting with others members in this website.

2.2.4 Help Page The help page is the most important part which provides aids for users who don’t understand how to use this website well. Inside the help page user can read the term and condition the need to follow by using this website. Besides, help page also important for user to know how to joint a member and how to register their company so that the can well-understand some services offered by this website. The help page can be browse by click the help button. 2.2.5 Search Button Search button is a simple way to get what the user want as fast as possible. However, the functions of the search button limited to the information inside this website only. User just needs to key in the keyword regarding what they are looking for inside the search text box and click search. Then the things related to what they have key in will exist. In example if they key in “Hardware”, then the news which have the words hardware inside will listed and users can choose which news they means. User also can look for the image. In example the may key in “Computer Picture”, then the image which have name related to computer picture will be listed. However, if the words keyed in by users do not match with any news or image then the window “There is no pages match with your search” will be prompted.

2.2.6

About Us Page

About Us is the page which give the details information about the owner of the website. In this context the owner is ITArabia.com. It is the page which shows the history of the company, the administration chart and the list of services offered by ITArabia.com.

2.2.7

Admin Page

The admin page is the secured page which cannot be browseed by users. It is used for the purpose of ITArabia.com to manage and maintained the performance of this website. Through the admin page, the ITArabia.com administrator will receive and give approval of member’s registration and company registration. In this page also the administrator will edit the news they received from companies before publish it on ITArabia.com. This is also the page where ITArabia.com may edit their pages and databases. The admin page will has high security to block unauthorized users to log in into this page. Only authorized people will have password to log in into this page. 2.3

User Task-Information Model

The user task information model refer to the process of analyzing on the way people (user) perform their job (task), the things they do, the things they act and the things they need to know. This also we call task analysis techniques. The task analysis techniques we used to suggest the way user may use this website is Hierarchical task analysis (HTA). In HTA, the outputs of user jobs will be present in hierarchy of tasks and subtasks and also plans that describing in what order and under what conditions subtasks are performed. The user task information model by using HTA techniques as shown below:

a)

HTA for Log on to ITArabia.com Site, Parent Task (Plan 0)

0 Log on to ITArabia.com Plan 0. Do 1-6 Choose any button to click

1 Go to News Button

b)

2 Go to Chat Button

3 Go to Registra tion Button

4 Go to Help Button

5 Go to Search Button

6 Go to About Us Button

7 Go to Company login space

HTA for Click the News Button, Subtask (Plan 1)

1 Go to News Button

Plan 1. Do 1.1-1.2-1.3 When finish go to the main button 1.4 1.1 Click on News title

c)

1.2 Read the News

1.3 Click related image/ words

1.4 Go to the other main Button

HTA for Click the Chat Button, Subtask (Plan 2)

2 Go to Chat Button

No Plan 2 2.1→2.2→2.3 registered? → 2.4 Yes

When finish go to the main button 2.5

2.1 Key in username and password

2.2 Log in to Chat page

2.3 Start chatting

2.4 New User/ don’t have account

2.5 Go to the other main button

Plan 2.4 Do 2.4.1-2.4.2 When finish go to the main button 2.4.3 2.4.1 Click on register/ new user? To register

d)

2.4.2 Submit registration by click submit

2.4.3 Go to the other main button

HTA for Click the Registration Button, Subtask (Plan 3)

3 Go to Registration Button

No Plan 3 3.1→3.2→3.3 registered? → 3.4 Yes

When finish go to the main button 3.5

3.1 Click on company registration

3.2 Fill in the registration form

3.3 Submit the form by click submit button

3.4 Click on member registration

3.5 Go to the other main button

Plan 3.4 Do 3.4.1-3.4.2 When finish go to the main button 3.4.3

3.4.1 Fill in the registration form

e)

3.4.2 Submit the form by click submit button

3.4.3 Go to the other main button

HTA for Click the Help Button, Subtask (Plan 4) 4 Go to Help Button

Plan 4 Do 4.1 and after finish reading, do 4.2

4.1 Read the help content

f)

4.2 Go to the other main button

HTA for Using the Search Box, Subtask (Plan 5)

5 Go to Search Button

Plan 5 Do 5.1-5.2-.5.3 When finish go to the main button 5.4 5.1 Key in word you like to search

g)

5.2 Key in word you like to search

5.3 Read the descripti on of you search

5.4 Go to the other main button

HTA for Click the About Us, Subtask (Plan 6)

6 Go to About Us Button

Plan 6 Do 6.1 When finish go to the main button 6.2 6.1 Read about us content

h)

6.2 Go to the other main button

HTA for Click the Company Log in Space, Subtask (Plan 7)

7 Go to company log in space

No Plan 7 7.1→7.2→7.3 registered? → 7.4 Yes

When finish go to the main button 7.5

7.1 Key in username and password

7.2 Insert all data

7.3 Click submit button

7.4 New Company/ don’t have account

7.5 Go to the other main button

Plan 7.4 7.4.1-7.4.2 When finish go to the main button 7.4.3 7.4.1 Click on register/ new company? To register

7.4.2 Submit registration by click submit

7.4.3 Go to the other main button

All of the Hierarchical Task Analysis above is arranged following the subtask division respectively. User will log on into ITArabia.com first (Plan 0), which is the parent tasks and then they will choose which subtask they like to do after. In some subtasks there also may another subtask below it. In example HTA of Plan 7 (Company log in space), some user (company) might not yet been registered so they need to followed the subtasks 7.4 first before they can use the services. Besides, all the subtask will be end by go to the other main button. This is show that when user finish browsing that page, the may go to any other page in this website.

CHAPTER 3 DESIGN In the design phase we will present the ITArabia.com website in form of storyboard. Each page inside ITArabia.com will be present briefly to give examples (sketches) to IT Arabia Company on how their website will look like. Before explaining the website design into storyboard, we also provide the screen navigation map so that the IT Arabia Company will understand the way the website functions. 3.1

Screen Navigation Map The screen navigation map on the net page show the way the website

(ITArabia.com) can be browse by users. There are two subdivisions, the first one is users and the second one is admin. Admin is separated from user’s page means that users have no access to admin page. Inside the page which can be surf by users, users may go to any other pages inside ITArabia.com through Home pages except for admin pages. While, admin can browse all of the pages through the Home pages and maintained the databases. The database server represent that all of the information inside this website are stored in a database server. When users browse this website means they ask something (page) from server and when users fill in the form or e-mail the ITArabia.com means the post something (information) to the server that will be stored in databases. While, for admin they are responsible to manage and maintain the database server. Admin may edit everything inside the website, give permission and approval of user’s application to join chat or to join member to publish their news and product in this website and also to delete membership of certain people. Admin also may edit the news sends by assistant editor (company) to be published in ITArabia.com and have right to publish the news sent in two versions of languages.

•

The structure of screen navigation map can be seeing on the next page.

Home

User

News

Registration

Chat Database Server

Help

Search

About Us

Admin

Admin

Figure 2.2: Screen Navigation Map for ITArabia.com

Maintained

3.2

Storyboard

The storyboard illustrated below will describe the interface which will be applied for the pages in this website. The main interface as shown in page 1 will be constant for all pages inside this website. Story Board Page 1: Main Interface

Explanation The explanation for the

Banner

functions of the particular things inside

Button 1

the main interface is as

Text 1 And Picture

Additional Interface

being stated in chapter 2 (refer 2.2 Website Content).

Text 2 Text 3 Page 2: Home

Button 2

Text 4:

Banner

List

of

news

in

decreasing order. User

Button 1

needs to click the title

Text 1 And Picture

Log in space 1

of the news to read the full news pages. Log in space 1:

Text 4

This is a space for a

Log in space 2

Text 2

company to log in into the company pages. Log in space 2:

Text 3

Button 2

Space

for

chatting

member log in to enter the chat pages. Explanation

Story Board Page 3: News

Text 4 and Picture:

Banner

Show the full news that users want to read. It

Button 1

also comes with picture

Text 1 And Picture

related to the news. Button 3:

Text 4 and Picture

The navigation button which enable user to going up and down on

Text 2

the news they read.

Button 3 Text 3 Page 4: Registration (Company)

Button 2

Form 1:

Banner

The

registration

form

that a company needs

Button 1

to fill in before they can

Text 1 And Picture

post any news, movie or picture to be publish in this website.

Form 1

Button 3: This

Text 2

is

the

submit

button. User need to

Button 3 Button 2

Text 3

click it after fill in all the information

required.

This button will send users

information

to

database server. Then, administrator Will make decision

either

to

approve or disapprove the

Story Board Page 5: Registration (Chatting Member)

Banner

user

(company)

Explanation Form 1: The registration form that user needs to fill in

Button 1

before they can join

Text 1 And Picture

chatting in chat pages. Button 3: This is the submit

Form 1

button which user need to click to sends their

Text 2

application form to the

Button 3 Text 3

Button 2

website admin.

Page 6: Chat Text Box 1:

Banner

The box which contain the

Button 1

particular

things

post by user (chatting).

Text 1 And Picture

It wills shows the sender

Text Box 1

e-mail address and time it was posted. Text Box 2: The input box in which

Text Box 2

Text 2

user use to post their

Button 3 Text 3

Button 2

opinion or any topics inside the text box 1. Button 3: The post button which enable

the

user’s

opinion or topic to be sent to text box 1.

Story Board Page 7: Help

Explanation Text 4:

Banner

Show the list of information on how to

Button 1

use this website

Text 1 And Picture

properly. Button 3: This is the going up and

Text 4

down button which enabled user to browse

Text 2

that page up and down.

Button 3 Button 2

Text 3 Page 8: Search (Text)

Text 4:

Banner

It will show the list of information

Button 1

which

contains the phrase that

Text 1 And Picture

the

users

search

for.

User can click which of the list they want to

Text 4

browse that page the search for.

Text 2

Button 3:

Button 3 Text 3

Button 2

The navigation button in form of number. If there are many result found related

to

search navigation

the

then button

user this will

exist to enabled user to go to the next pages of the search results.

Story Board

Explanation

Page 9: Search (Image) Picture 1, 2, 3, 4, 5,

Banner

6: The picture that will

Button 1

exist related to the file

Text 1 And Picture

Picture 1

Picture 2

Picture 3

name which matches with the user search. Button 3:

Picture 4

Picture 5

Picture 6

Text 2

The navigation button which enabled the user to go to the other pages

Button 3 Button 2

Text 3

(in form of number) if the results of the user search found many image matches with the words keyed in. Text 4 or Chart:

Page 10: About Us

Banner

Show

the

about

Button 1

information IT

Company

Text 1 And Picture

Picture 1

Arabia and

organization

chart

the of

the company. Picture 1:

Text 4 or Chart

Show the picture of IT

Video 1 Text 2

Arabia Company Video 1: Show a simple video on

Text 3

Story Board Page 11: Company Page

Button 2

IT Arabia Company.

Explanation

Text Box 1;

Banner

The box which ask the company to enter the

Button 1

company ID and

Text Box 1

Text 1 And Picture

company name.

Image Box 1 Text Box 2

Text Box 2: The box in which company type the news

Video Box 1

Text 2

Button 3 Button 2

Text 3

the want to publish in this website. Image Box 1 and Video Box 1: The box in which company put the picture/ video they want to include with the news the have provide. Button 3: The submit button which will send all the

Page 12: Admin

Form 1:

Banner

The log in form that the administrator or the

Button 1

chief editor needs to fill

Text 1 And Picture

in to log on into this website resources and databases. This is the

Form 1

high security pages which enabled only

Text 2

authorized people to browse inside. There

Text 3 3.3

Button 2

Example of Storyboard Screen Sketches.

also a button to log in.

3.3.1 Main Page Sketches

3.3.2 Company Registration Page Sketches

3.3.3 Company Page Sketches

3.3.5 News Page Sketches

CONCLUSION

In designing website, there is lots of thing to be considered. The most important thing is studying on the users requirements so that the websites that being developed are attractive, users friendly and achieve the objectives of the website development. As being discussed on the previous chapter in

this report, we need to understand our target user first before we go to developing phase. Thus, in this report a lot of things have been discussed so that it fulfills the demands of IT Arabia Company to implement a news website for the user and IT vendor in the Middle East. All design was present in form of storyboard and some sketches of certain pages were also presented. To make IT Arabia Company understand on the way the websites functions, page by page explanation also given in website analysis and web site content (Chapter2). Besides, we also present the user task analysis model which shows how user may use this site and what is going on during their surfing. The task information analysis being used is Hierarchical Task Analysis (HTA), in which all the task that might be done by users represents in form of sequentially planning. At the end, hopefully this suggestion of website design could be used by IT Arabia Company to built their own website and expand their services on line.

References Alan Dix, Janet Finlay, Gregory D. Abowd and Russell Beale. Human Computer Interaction: Third Edition. Pearson: United Kingdom. 2004 Gary P. Schneider and Jessica Evans. The Internet 2005 Update: 5th Edition. Thomson: USA. 2006

H.M. Deitel, P.J Deitel and A.B Goldberg. Internet and World Wide Web: Third Edition. Pearson: New Jersey. 2004