AN OVERVIEW OF DEVELOPING A WEBSITE

DEVELOPING WEBSITE AT EARLY STAGE : IT ARABIA.COM

HUMAN COMPUTER INTERACTION

By;

ROSIADI BIN TAJUDINMOHD. FIRDAUS MAT KAMIL

SCHOOL OF INFORAMTICS SCIENCEUNIVERSITY MALAYSIA SABAH

LABUAN INTERNATIONAL CAMPUS

Table of Contents

PageChapter 1

Chapter 2

Chapter 3

Introduction

1.1 Goal1.2 Objective1.3 Target user

Analysis

2.1 Website Analysis2.1.1 Understand User2.1.2 The Use of Icon Image2.1.3 The Use of Prompt Window 2.1.4 Media Resources

2.2 Website Content2.2.1 News Page2.2.2 Chat Page2.2.3 Registration Page2.2.4 Help Page2.2.5 Search Button2.2.6 About Us Page2.2.7 Admin Page

2.3 User Task Information Model

Design

3.1 Screen Navigation Map3.2 Storyboard3.3 Example of Storyboard Screen Sketches

3.3.1 Main Page Sketches3.3.2 Chat Page Sketches3.3.3 Company Registration Page ketches3.3.4 Company Page Sketches3.3.5 News Page Sketches

Conclusions

References

1

122

3

3

6

10

15

151723

26

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

http://ITArabia.com/

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 Icon Description

- Search 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.

- News The image of people reading papers. This image shows that this is the button that we need to click to read the papers.

- Members Login

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.

- Company Login

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.

- Chat 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).

- Registration 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.

- Help 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.

Figure 2.1: Main interface for ITArabia.com

Banner

Button 1

Text 2

Text 1

Button 2Text 3

* 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)

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

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

1Go to News Button

2Go to Chat Button

3Go to Registration Button

4Go to Help Button

5Go to Search Button

6Go to About Us Button

7Go to Company login space

0Log on to ITArabia.com

Plan 0.Do 1-6Choose any button to click

1.1Click on News title

1.2Read the News

1.3Click related image/ words

1.4Go to the other main Button

1Go to News Button

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

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

2.2Log in to Chat page

2.3Start chatting

2.4New User/ don’t have account

2.5Go to the other main button

2Go to Chat Button

2.1Key in username and password

2.4.3Go to the other main button

2.4.2Submit registration by click submit

2.4.1Click on register/ new user? To register

Plan 22.1→2.2→2.3 registered? → 2.4

When finish go to the main button 2.5

No

Yes

Plan 2.4Do 2.4.1-2.4.2When finish go to the main button 2.4.3

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

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

3Go to Registration Button

3.2Fill in the registration form

3.3Submit the form by click submit button

3.4Click on member registration


3.1Click on company registration

3.4.2Submit the form by click submit button


3.4.1Fill in the registration form



No

Yes

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

4.1Read the help content


4Go to Help Button

Plan 4Do 4.1 and after finish reading, do 4.2

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

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

5.1Key in word you like to search

5.2Key in word you like to search

5.3Read the description of you search


5Go to Search Button

Plan 5Do 5.1-5.2-.5.3When finish go to the main button 5.4

6.1Read about us content


6Go to About Us Button

Plan 6Do 6.1When finish go to the main button 6.2

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.

7.2Insert all data

7.3Click submit button

7.4New Company/ don’t have account


7Go to company log in space

7.1Key in username and password


7.4.2Submit registration by click submit

7.4.1Click on register/ new company? To register



No

Yes

Plan 7.47.4.1-7.4.2When finish go to the main button 7.4.3

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.

Figure 2.2: Screen Navigation Map for ITArabia.com

DatabaseServer

Admin

Maintained

About Us

Search

Help

Chat

Registration

Home News

Admin

User

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 Explanation

Page 1: Main Interface

The explanation for the

functions of the

particular things inside

the main interface is as

being stated in chapter

2 (refer 2.2 Website

Content).

Page 2: Home

Banner

Button 1

Text 1And

Picture

Text 2

Button 2

Additional Interface

Text 3

Text 4:

List of news in

decreasing order. User

needs to click the title

of the news to read the

full news pages.

Log in space 1:

This is a space for a

company to log in into

the company pages.

Log in space 2:

Space for chatting

member log in to enter

the chat pages.Story Board Explanation

Page 3: News

Text 4 and Picture:

Show the full news that

users want to read. It

also comes with picture

related to the news.

Button 3:

The navigation button

which enable user to

going up and down on

the news they read.

Page 4: Registration (Company)

Banner

Button 1

Text 1And

Picture

Text 2

Log in space 1

Log in space 2

Button 2

Text 4

Banner

Button 1

Text 1And

Picture

Text 2

Button 2

Text 4 and Picture

Button 3

Text 3

Text 3

Form 1:

The registration form

that a company needs

to fill in before they can

post any news, movie or

picture to be publish in

this website.

Button 3:

This is the submit

button. User need to

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 user (company)


Page 5: Registration (Chatting Member)

Banner

Button 1

Text 1And

Picture

Text 2

Button 2

Form 1

Button 3

Text 3

Form 1:

The registration form

that user needs to fill in

before they can join

chatting in chat pages.

Button 3:

This is the submit

button which user need

to click to sends their

application form to the

website admin.

Page 6: Chat

Text Box 1:

The box which contain

the particular things

post by user (chatting).

It wills shows the sender

e-mail address and time

it was posted.

Text Box 2:

The input box in which

user use to post their

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.


Page 7: Help

Banner

Button 1

Text 1And

Picture

Text 2

Button 2

Banner

Button 1

Text 1And

Picture

Text 2

Button 2

Text Box 1

Form 1

Button 3

Button 3

Text Box 2

Text 3

Text 3

Text 4:

Show the list of

information on how to

use this website

properly.

Button 3:

This is the going up and

down button which

enabled user to browse

that page up and down.

Page 8: Search (Text)

Text 4:

It will show the list of

information which

contains the phrase that

the users search for.

User can click which of

the list they want to

browse that page the

search for.

Button 3:

The navigation button in

form of number. If there

are many result found

related to the user

search then this

navigation button will

exist to enabled user to

go to the next pages of

the search results.


Page 9: Search (Image)

Banner

Button 1

Text 1And

Picture

Text 2

Button 2

Banner

Button 1

Text 1And

Picture

Text 2

Button 2

Text 4

Text 4

Button 3

Button 3

Text 3

Text 3

Picture 1, 2, 3, 4, 5,

6:

The picture that will

exist related to the file

name which matches

with the user search.

Button 3:

The navigation button

which enabled the user

to go to the other pages

(in form of number) if

the results of the user

search found many

image matches with the

words keyed in.Page 10: About Us

Text 4 or Chart:

Show the information

about IT Arabia

Company and the

organization chart of

the company.

Picture 1:

Show the picture of IT

Arabia Company

Video 1:

Show a simple video on

IT Arabia Company.


Page 11: Company Page

Banner

Button 1

Text 1And

Picture

Text 2

Button 2

Banner

Button 1

Text 1And

Picture

Text 2

Picture 1

Video 1

Button 2

Text 4 or Chart

Picture 1 Picture 2 Picture 3

Picture 4 Picture 5 Picture 6

Button 3

Text 3

Text 3

Text Box 1;

The box which ask the

company to enter the

company ID and

company name.

Text Box 2:

The box in which

company type the news

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:

The log in form that the

administrator or the

chief editor needs to fill

in to log on into this

website resources and

databases. This is the

high security pages

which enabled only

authorized people to

browse inside. There

also a button to log in.

3.3 Example of Storyboard Screen Sketches.

Banner

Button 1

Text 1And

Picture

Text 2

Button 2

Form 1

Banner

Button 1

Text 1And

Picture

Text 2

Button 2

Text Box 1

Text Box 2Image Box 1

Video Box 1

Button 3

Text 3

Text 3

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

AN OVERVIEW OF DEVELOPING A WEBSITE

Documents

Transcript of AN OVERVIEW OF DEVELOPING A WEBSITE