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
1.2 Objective 2
1.3 Target user 2
Chapter 2
Analysis 3

2.1 Website Analysis 3

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 6
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 10

Chapter 3 Design 15

3.1 Screen Navigation Map 15

3.2 Storyboard 17
3.3 Example of Storyboard Screen Sketches 23
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

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 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 The image of key is used.
Login 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 The image of key is used.
Login 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.

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

2 3 4 5 6 7
1 Go to Go to Go to Go to Go to Go to
Go to Chat Registra Help Search About Company
News tion Us login
Button Button Button space
Button Button Button

b) 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 1.2 1.3 1.4

Click on Read Click Go to the
related other
News the
image/ main
title News Button
words

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

 2
Go to
Chat
Button Plan 2 No
2.1→2.2→2.3 registered? → 2.4
Yes

When finish go to the main button 2.5

2.1 2.4 2.5

2.2 2.3
Key in New User/ Go to the
username Log in to Start don’t have other main
and Chat page chatting account button
password

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

2.4.1 2.4.2
2.4.3
Click on Submit
Go to the
register/ registration
other main
new user? by click
button
To register submit

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

 3
Go to
Registration
Button Plan 3 No
3.1→3.2→3.3 registered? → 3.4
Yes

When finish go to the main button 3.5

3.1 3.2 3.3 3.4 3.5

Click on Fill in the Submit the Click on Go to the
company registration form by member other main
registration form click registration button
submit
button

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

3.4.1 3.4.2 3.4.3

Fill in the Submit the Go to the
registration form by other main
form click button
submit
button

e) 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 4.2
Read Go to the
the help other
main
content
button

f) 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 5.2 5.3 5.4

Key in Key in Read the Go to the
word you word you descripti other
like to like to on of you main
search search search button

g) 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 6.2
Read Go to the
about us other main
content button

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

 7
Go to
company No
Plan 7
log in
7.1→7.2→7.3 registered? → 7.4
space
Yes

When finish go to the main button 7.5

7.1 7.3 7.4

Key in 7.2 New 7.5
Click Go to the
username Insert all Company/
and
submit don’t have other main
data
password button account button

Plan 7.4
7.4.1-7.4.2
When finish go to the main button 7.4.3

7.4.1 7.4.2
7.4.3
Click on Submit
Go to the
register/ registration
other main
new by click
button
company? submit
To register

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 Maintained

Admin
Admin

Figure 2.2: Screen Navigation Map for ITArabia.com

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
Banner
functions of the
Button 1 particular things inside
the main interface is as
Text 1 being stated in chapter
And Additional Interface
2 (refer 2.2 Website
Picture
Content).

Text 2

Text 3 Button 2

Page 2: Home
 Text 4:
Banner
List of news in
Button 1 decreasing order. User
needs to click the title
Text 1 Log in of the news to read the
And space 1
full news pages.
Picture
Text 4 Log in space 1:
This is a space for a
Log in company to log in into
Text 2 space 2 the company pages.
Log in space 2:
Text 3 Button 2 Space for chatting
member log in to enter
the chat pages.
Story Board Explanation
Page 3: News
Text 4 and Picture:
Banner
Show the full news that
Button 1 users want to read. It
also comes with picture
Text 1 related to the news.
And
Button 3:
Picture
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 Button 2

Page 4: Registration (Company)

 Form 1:
Banner
The registration form
Button 1 that a company needs
to fill in before they can
Text 1 post any news, movie or
And
picture to be publish in
Picture
Form 1 this website.
Button 3:
This is the submit
Text 2 button. User need to
Button 3 click it after fill in all the
Text 3 Button 2 information required.
This button will send
users information to
database server. Then,
administrator Will make
decision either to
approve or disapprove
the user (company)

Story Board Explanation

Page 5: Registration (Chatting Member)
Form 1:
Banner
The registration form
Button 1 that user needs to fill in
before they can join
Text 1 chatting in chat pages.
And
Button 3:
Picture
Form 1 This is the submit
button which user need
to click to sends their
Text 2 application form to the
Button 3 website admin.
Text 3 Button 2
Page 6: Chat
Text Box 1:
Banner
The box which contain
Button 1 the particular things
post by user (chatting).
Text 1 It wills shows the sender
And Text Box 1
e-mail address and time
Picture
it was posted.
Text Box 2:

Text Box 2 The input box in which

Text 2 user use to post their
Button 3 opinion or any topics
Text 3 Button 2
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 Explanation
Page 7: Help
Text 4:
Banner
Show the list of
Button 1 information on how to
use this website
Text 1 properly.
And
Button 3:
Picture
Text 4 This is the going up and
down button which
enabled user to browse
Text 2 that page up and down.
Button 3
Text 3 Button 2

Page 8: Search (Text)

Text 4:
Banner
It will show the list of
Button 1 information which
contains the phrase that
Text 1 the users search for.
And
User can click which of
Picture
Text 4 the list they want to
browse that page the
search for.
Text 2 Button 3:
Button 3 The navigation button in
Text 3 Button 2 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.

Story Board Explanation

Page 9: Search (Image)
Picture 1, 2, 3, 4, 5,
Banner
6:
Button 1 The picture that will
exist related to the file
Text 1 name which matches
Picture 1 Picture 2 Picture 3
And
with the user search.
Picture
Button 3:
The navigation button
Picture 4 Picture 5 Picture 6
which enabled the user
Text 2 to go to the other pages
Button 3 (in form of number) if
Text 3 Button 2 the results of the user
search found many
image matches with the
Page 10: About Us words keyed in.
Text 4 or Chart:
Banner
Show the information
Button 1 about IT Arabia
Company and the
Text 1 organization chart of
And Picture 1
the company.
Picture
Text 4 or Chart Picture 1:
Show the picture of IT
Video 1 Arabia Company
Text 2 Video 1:
Show a simple video on
Text 3 Button 2 IT Arabia Company.

Story Board Explanation

Page 11: Company Page
 Text Box 1;
Banner
The box which ask the
Button 1 company to enter the
company ID and
Text Box 1
Text 1 company name.
And
Text Box 2:
Picture Image Box 1
Text Box 2 The box in which
company type the news
the want to publish in
Video Box 1
Text 2 this website.
Button 3 Image Box 1 and
Text 3 Button 2 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
Button 1 administrator or the
chief editor needs to fill
Text 1 in to log on into this
And
website resources and
Picture
databases. This is the
Form 1
high security pages
which enabled only
Text 2 authorized people to
browse inside. There
Text 3 Button 2 also a button to log in.

3.3 Example of Storyboard Screen Sketches.

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