SCV 1203-01

HUMAN COMPUTER INTERACTION

UNIVERSITI TEKNOLOGI MALAYSIA

FACULTY OF COMPUTER SCIENCE & INFORMATION SYSTEM

GROUP ASSIGNMENT 2

STUDENTS:
MUTIA ARUM PRABANDARI AC 070308 3 SCI
SHINTA APRILIA AC 070318 3 SCI

LECTURER:
DR. NOR AZMAN BIN ISMAIL

SESSION/SEMESTER: 20102011/I
 COMMUNITY@UTM

I. Problem and Solution Overview

Students and lecturers are two main roles in education or university life. They should
establish certain interaction and communication in order to deliver information regarding
lectures materials. When a lecturer wants to add an online component to his face-to-face large
lecture class to have students engage in small group discussion over concepts from the class. He
also wants the students to have the opportunity to engage in conversation with him, something
that cannot happen in a large lecture class. This online Community@UTM is able to provide
them with not only group discussion; like forum, but also online group chat among each other, or
conference. This way they can meet their lectures and talk to them wherever they are. Besides,
this can be used by a group of students to coordinate a university project. If they want to use the
Internet to post drafts of project materials, schedule chat interviews with their lectures or
supervisors in remote locations, discuss the project as it evolves.

II. Contextual Inquiry Summary

The Community@UTM is aimed at people who have encountered university life

especially in Universiti Teknologi Malaysia such as; students, lecturers, staffs, alumni, etc.
Online interaction spaces and communities are set up to meet purposes such as discussing topics
like books, current events, news, etc. Besides, it can also be used to have information sharing
such as files and ideas, also relationship building and socializing.

In order to realize these goals, we decided to interview some target users which role as
students in Universiti Teknologi Malaysia. Having identified the target users, we were able to
find subjects for the contextual inquiry interviews at hostels and faculty at UTM. Keeping these
goals in minds, we chose to interview three individuals, which are all students called Hanan, Iin
and Keyka. There are in different courses such as Networking, Management and Marketing
respectively. They have been asked to fill the questionnaire given by us regarding the web
community in UTM. Each of them has their own purpose to use and implement the web
community. All of them agreed that the web community can help them in retrieving latest news
and information happening in UTM and also its events. The features and preferences that they
chose help us to decide the interface that we will create later on. We also have to care about the
participants habit in accessing the web because it is also one of important points in developing
interfaces of a websites.

III. Task Analysis Questions

1. Who are the users?

UTM community example, lecturer, student, staff, etc.
2. What tasks do they perform?
Fill in the questionnaire. We choose at least 3 random students.
3. Where are tasks performed?
Around UTM, Skudai.
4. Relationship between user and data?
all users will share the data with each other under community website.
5. How do users communicate with other?
The users communicate with each other directly such as chatting, sharing files (video,
music, picture) and etc.
6. Time constraints on tasks?
No time constraints.
7. What happens when things go wrong?
If the beam fails to connect, an error message will be displayed and help offered. If there are
no free-time matches within the specified constraints, the users will be notified. A possible
extention of this would be to allow the user to note events which can be ignored for the
purpose of scheduling an event.

IV. Interface Design

The Community@UTM will be structured like an online discussion forum or website.

They will able to share all information related university life. The main interface will consist of a
top menu bar, which features several tabs that correspond to various activities. Some example of
the tabs would be: “Home”, “News & Info”, “Events”, “Media”, “Communities”, and “About
Us”. The user especially visitor would then be able to push on whichever tab he/she wises to see
first. But in order to view “Communities” tab, the general user should Sign In or Sign Up first. It
is because these tabs are privileged to special users that can do posting, sharing, and giving
comments in that online forum.
 IV. a. Homepage

The main body of the page would be divided into three columns, with the side columns
being much narrower than the center column. The left column would contain information about
the latest events at UTM. The events will be listed briefly and in sort of date. Besides, it also
displays the calendar that easier for visitor to see the events or activities. Additional feature like
Links related to university such as elearning, web utm, faculties, and etc can also be seen in the
main menu.

Center column is the most important one, because users usually see it in the beginning of
opening the web community. There will be placed the most popular news happens in UTM, the
latest members who join the community@UTM, and also the current activities that the members
have done in this online web community.

The right column provides the login that require user to enter their username and
password which they usually used to login aimsweb utm. The name, password, and any
additional information can be edited easily by the users according to their preferences. On the
main page also provides general online chat activities so that everyone can post their comments
there.

Figure 1 - HomePage
IV. b. News and Information

This tab is really necessary for visitors or users to update the latest news and information
that happen in university. The news can be about the achievements UTM got recently, the
changes of UTM’s rules and regulations, or the hottest news that happens in UTM. The users
can also create their own group discussion to talk about the news which they read there. Below
is the sample of the News&Info tab.

Figure 2 – News and Information

IV. c. Events

In this tab we can see any events like ceremony, convention, party, invitation and etc held
by UTM. This event can be scheduled by the privileged users that will be sent to the certain
users or to anyone who wants to join the events. Even the Event is displayed in the Homepage,
this Events tab provides more detail information regarding certain chosen event. They can see
the avenue, the time, and the list of activities in that event. Only members can be notified in the
page whether they are willing to join or not. Sample page of Event is displayed below.
 Figure 3 – Events

IV. d. Media

This tab is divided into further pages such as Pictures, Musics and Videos. For each page
of them, the users who already the members can both upload or download the files existed there.
The layouts for Media pages are all similar to each other. Each pages is divided into three
columns which the left one is the directory that you want to choose whether Picture, Music, or
Video. The center column displays the main elements of the selected directory. For example the
user is willing to choose the videos directory, so the center one will display several videos in the
view of screenshots. The users have to click certain video to play it. If the user wants to
download the video or any files there, he/she has to log in the system first so that they can do
what they want.
 Figure 4 – Media: Videos

IV. e. Communities
This tab shows the list of users that are registered to the website. It will display the basic
information of a few users, as well as their display picture. Users will also know whether the
user which are displayed are online or offline as there will be a status bar which shows the
online status of the user.
 Figure 5 – Media: Videos

IV. f. About Us

About Us tab will explain about the university in details like vision, mission, and
purpose. It also has organization structure, staff directory, facts and reports and etc. The sample
page will be displayed below.
Figure 6 – About UTM
Name: Course/Year:

SURVEY FOR STUDENTS OF FACULTY OF COMPUTER SCIENCES &

INFORMATION SYSTEMS, UTM SKUDAI

Students of subject Human Computer Interaction section 1 would like to know the
knowledge of students about community web service. The purpose of this questionnaire is to
discover the general knowledge of student about the community website in other to develop
UTM@Community website.

A web community is a web site (or group of web sites) that is a virtual community. A
web community may take the form of a social network service, an Internet forum, a group of
blogs, or another kind of social software web application.

Please check ( / ) in the space provided for your response.

1. Do you have heard about UTM community website?

( ) Yes ( ) No

2. Do you thing the UTM community website is useful?

( ) Yes ( ) No

3. Do you plan to use UTM community web after graduate?

( ) Yes ( ) No

4. What is the purpose of using UTM community web?

( ) Make new friends
( ) Stay connected with members
( ) Study purpose (Share materials or notes)
( ) Get latest news/informations and events
( ) Others ____________________

5. What are the features you would like to have in UTM community web?
( ) News and Information ( ) Chat
( ) Event Calendar ( ) Gallery
( ) Sharing File and Video ( ) User Profile
( ) Groups ( ) Others ____________________
 As we know, UTM does not have any web community. So, for this problem we create
web community interfaces for UTM based on we search and compare the existing web
community from other university. We did some comparison with several existing community
such as ITB (Institut Teknologi Bandung), UI (Universitas Indonesia), University of Oxford and
Emory Alumni. Links for all the existing web that we have been compared is as below:
 ITB (Institut Teknologi Bandung): http://alumni.sbm.itb.ac.id/index.php?
option=com_content&view=frontpage&Itemid=1
 UI (Universitas Indonesia):
https://secure.www.alumniconnections.com/olc/pub/EMR/event/showEventForm.jsp?
form_id=8609
 University of Oxford: http://www.alumni.ox.ac.uk/alumni_networks/index.html
 Emory Alumni: http://komunitas.ui.ac.id/

After doing the research and comparison with the websites of the links above, we finally
made up our mind in preparing the questionnaire, flowchart, as well as the interface for the web
community page for UTM.

We choose web community for UTM as our title. A set of questionnaire was used as our
instrument to gather data and some opinions. At least three students will be selected as our
respondents. The respondents are UTM students. The flow diagram for the website is as below:

Figure 7: Flow Diagram Community@UTM