IMPLEMENTATION OF USER CENTERED DESIGN METHODS TO

INCREASE USABILITY IN SOCIAL MEDIA APPLICATION CLIENT

(MICROBLOG) WEB-BASED

Sisfika Yanti Silalahi

10106422

Fakultas Teknik dan Ilmu Komputer

Jurusan Teknik Informatika - Universitas Komputer Indonesia
Jl. Dipati Ukur No.114-116, Bandung 40132
Email : [email protected]

ABSTRACT

Microblogging is a form of a blog that allows users to write brief text updates that are usually
less than 140 characters and make them public. Improved user is also encouraged by the
establishment of Micro-blogging social media micro-blogging site, one that is widely used today is
twitter. However, current users find web twitter microblogging is still minimal because the feature can
only update them in text format only. One solution to this problem is to build a web-based client
applications by applying UCD methods. UCD methods used to analyze the user needs to perform
activities of UCD are: questionnaires, interviews, modeling and prototyping tasks. From the analysis
results can be known limitations experienced by current users for example: users can not shorten a
link, upload images, and do the translation. So twitter client that is built not only limited to the
renewal in text format only.
Twitter client application development is supported by using the twitter API (Application
Programming Interface) as a feature of communication to build the client with the properties of micro-
blogging so you can add other services not yet provided a web twitter. Twitter client application can
be accessed with the availability of a good internet connection and users who already have an account
on twitter and understand how to work twitter. Thus users can use the twitter client application with
additional features that are the result of the UCD process that can improve the usability (usability)
twitter client built. This is evident because the user has to upload images, shortening the url, and do
the translation.

Keywords: microblogging, twitter client, API twitter, user centered design,usability

1. Background to see or restricted group chosen by the user.

Man with all the diverse activities that Improved user is also encouraged by the
gave birth to change the way we communicate establishment of Micro-blogging social media
to other human beings. Changes in these micro-blogging site, one that is widely used
communications is not just happening in the today is twitter. This is also shown by the
media used, but on the content of increasing twitter user. However, twitter web
communications made. The need for quick and itself is still minimal feature because users can
effective communication gave birth to a new only update them in text format only. Users
term called Microblogging. Microblogging is can not shorten a link, upload images, and do
a form of a blog that allows users to write the translation. This is one of the constraints
brief text updates that are usually less than experienced by the current user.
140 characters and publish them, either for all One solution to this problem is to build client

1
applications that meet those needs, but still use of social media microblogging client
clinging to the working principle of twitter. By (twitter), especially for users who already
adding a few features, so users feel less have a twitter account and understand how to
constraints faced so far. Facilitate the user in work Twitter, for example in the case of
interacting the client application is built based uploading images, shorten a link, and perform
on web due to ease of access, ie using only a translation
web browser (usually already available on
PC) so it does not need to install special client 2. Models, Analysis, Design And
application. Implementation
Client application development is done by
applying a user centered design (UCD), which 2.1.Models
is one method of design that became the basis Software development model in the making of
of planning, design, and construction this application using the waterfall model. The
applications. UCD took the concept that stages contained in the waterfall model based
development of a product be it hardware or on figure 1.1 is as follows:
software (including websites), user-oriented, a. System engineering
has proven to create better usability level as The first stage is done is to formulate a system
proposed by Frank Spiller in User Centered that we are building. It is intended that the
Design 101. UCD activities conducted in this developer really understood that we are
thesis is distributing questionnaires, building systems and measures as well as any
interviews, modeling and prototyping tasks. policy relating to the development of the
Development of client applications are system.
supported with the availability of twitter API b. Requirements analiysis
(Application Programming Interface) as a Conducting an analysis of the problems faced
feature of communication to build the client and set the software requirements.
with the properties of micro-blogging so you c. Design
can add other services not yet provided a web Produce designs that meet the requirements
twitter. specified during the requirements analysis
phase. The end result of a very detailed design
specifications, so easy to be realized at the
1.2. Problem Formulation time of programming.
From the description above background, then d. Coding (implementation)
the problem can be identified namely, how to Coding that implements the design into a code
apply the user centered design method for the or machine language understood by the
application client social media microblogging computer using a particular programming
(twitter)web-based. language.
e. Testing (testing)
1.3.Purpose And Objectives Testing program that produces truth. The
The purpose of the development application is testing process focuses on the internal logic of
to apply user centered design method for the the software, ensure that all statements have
application of social media web-based been tested and determine whether desired
microblogging client. The purpose of this results have been achieved or not.
application development, namely: f. Maintenance (maintenance)
1. Conducting studies in order to obtain an Dealing with the finished software to run
understanding of the usefulness (usability) by smoothly and avoid the disturbances that can
applying UCD methods. cause damage.
2. With UCD method is expected to increase
the usability (usability) of social media 2.2. Anlysis
application client microblogging (twitter)
web-based. 2.2.1. Anlysis System
3. Enhancing convenience and usability in the
2
In the analysis carried out decomposition of
the system of social media twitter 1. Use Case Diagram
microblogging namely by applying UCD
methods to improve usability. This was done to
identify and evaluate problems that are found
weaknesses, opportunities, barriers that occur
and needs, so it can be proposed improvement.
Perform analysis on running system intended
as the basis for design or repair the old
system. And analysis results can be known
weaknesses and shortcomings of the old
system and can be designed or improved into a
system more effective and efficient.

2.2.2. Problem Analysis

Twitter as a micro-blogging is still minimal
because it only features it has features like Figure 2.2 Use Case Diagram
reply tweets, original retweet, favorite, direct
message and lists. Twitter also has its 2. Class Diagram
limitations because it can only do updates in
text format, can not display the information in
the format of the picture and do upload
pictures as well as shorten a link. This has
become one of the limitations in sharing
information because users can only share
information in text format only.

Figure 2.3 Class Diagram

3. Class Specifications

Table 2.1 Class Specification

No. Nama Kelas Jenis
Figure 2.1 UCD Proces
1 Twitteroauth Kontrol
2.2.3. Fungcional Analysis
When will build an application program, the 2 Twitese Kontrol
first step to do that is by studying and
analyzing the running system. Functional 3 Oauth_lib Kontrol
requirements on the twitter client application
that is built will be illustrated with several 4 Translate Kontrol
diagrams that use case diagrams, sequence
diagrams and class diagrams.
3
 L01 HOME 1. Pilih 1 shorten URL L13

5 Short_url Kontrol home Profile Help Logout

2. Pilih 2 Translation L14
3. Pilih 3 upload image L15
4.Pilih 4 Restore previous tweet
5. Pilih 5 sweep timeline untuk
What’s happening 1 2 3 4 5 6 140 menghilangkan tweet yang berada di
Foto profile urutan paling bawah dari timeline.
6. Pilih 6 Refresh the timeline untuk
Kolom posting
merefresh timeline tanpa harus
following followers menunggu periode waktu yang telah
ditentukan.
7.Isi kolom posting untuk
Posting tweet terakhir tweet mempublish tweet
8.Klik tweet jika ingin memposting

2.2.4. Non-Functional Analysis TWEET

ALL UPDATES

Home
tweet yang telah di isi pada kolom
posting
9.Klik Home untuk masuk ke halaman
home L01

Non-functional needs analysis is the

10. Klik profile untuk masuk ke
Show conversation mention halaman profile L02
11. Klik logout untuk keluar dari
9 10 11 12 13
Direct Message aplikasi ini.
12. Klik following untuk melihat

analysis needed to determine the system List

account yang telah anda ikuti L03
13. Klik followers untuk melihat
account yang telah mengikuti
Favorites anda.L03

requirements specification. This specification Retweets

14. Klik All Updates untuk masuk ke
halaman all updates L04
15. Klik Home untuk masuk ke
halaman home L01

also includes elements or components of what search

Trending topics
16. Klik Direct Message untuk masuk
ke halama Direct Message L06
17. Klik List untuk melihat list yang
telah anda miliki pada halaman list

is needed for the system to be built until the following

L07
18. Klik favorites untuk masuk ke
halaman favourites dan melhat tweet
yang anda favoritkan L08
19.Klik Retweets untuk melihat

system is implemented. This needs analysis retweet yang sudah anda lakukan L09
20. Klik 9 Replay untuk mereplay
tweet yang masuk di timeline
21.Klik 10 Retweet untuk meretweet

also determines the necessary input system 22. Klik 11New Retweet untuk
melakukan new retweet
23. Klik 12 Favorite untuk
memfavaforitkan tweet.

specifications, output will be produced systems 24. Klik 13 translate untuk

mentranslate tweet yang ada
ditimeline L14B
25.Klik search untuk pencarian L10

and processes needed to process the input to 26.Klik trending topics untuk melihat
topik yang sedang banyak dibicarakan
didunia L11
27.Klik mention untuk melihat replies
L05

produce a desired output. 28.Klik following untuk melihat account

yang anda ikuti L12.
29.Klik Help untuk meihat kembali
cara penggunaan aplikasi L20

In the analysis of non-functional system

Figure 2.3 Home Design Application
requirements is described analysis of the
hardware (hardware), software (software),
2.4 Implementation
and the user (users) as a material shortage
This stage is the stage where the system is
analysis and needs that must be met in the
ready for operation, which consists of a
design.
description of the implementation
environment, and program implementation.
2.3 Design And Implementation
A. Menu Structure A. Hardware Implementation
In designing an application that contains the The hardware used to implement the system
menu structure required menus and submenus are as follows:
that serves to facilitate users in using the a. Processor :Dual core Mobile
application. Here are described on the menu processor T4200
structure in this application: 2.0 GHz
b. Hard Disk : 250 GB.
c. Memory : 1 GB
d. Monitor :14.1” Resolusi
(1280 x 800)
e. VGA : 256 MB

B. Software Implementation
The software used to implement the system are
as follows:
a. Operating system: Windows 7 Ultimate 32
bit
b. For this software development using PHP,
Javascript, by utilizing the Twitter API,
twkl.in, and Img.ly, google translate, UCD
methods and security protocol OAuth
Figure 2.3 Menu Structure authentication with the design method using
the Unified Modeling Language (UML).
B. Home Design Applications c. A good internet connection to support
communication with the server application
twitter and some servers that use services such
as twkln.in and img.ly. It is very important

4
because applications can not run on the local 4. Conclusions And Suggestions
host. 4.1 Conclusion
Based on the analysis and testing has been
C. Interface Implementation done in this thesis it can be taken several
Implementation of interface is done by each conclusions, among others:
display program built and encoding in the 1. By applying UCD methods in social media
form of program files. application client microblogging (twitter
client) has been to improve the usability
3. Results Discussion (usability) social media client and in
From analysis and design that has been done, accordance with the characteristics of
the results of the application that was built to learnibility usability, efficiency, satisfaction,
look like the following view: memorability, and errors.
2. Twitter client application built was pretty
easily understood and used properly by the
user.
3. Twitter client application that is built can be
one choice in the use of microblogging twitter
with some additional features that give users
flexibility in sharing information because
users have to upload images, doing
translations and shorten a link (url). However,
the twitter client application that was built is
still limited to users who already have an
account on twitter and understand how to
work twitter.

Figure 4.1 Views Welcome Page 4.2 Suggestions

Based on the above conclusions, the
suggestions can be presented for input on this
thesis is as follows:
1. Building a mobile version to be accessible
via mobile phones.
2. Developing a translation feature so as not
limited to translation of a standard language
course.
3. Develop a twitter client application that
Figure 4.2 Views Login provides a setting in various types of language
to be used by anyone, anywhere.
4. For the future you can add features in
accordance with the development needs of the
user.

5. Bibliography
[1] Karat, J. (1997). User-Centered Software
Evaluation Methodologies. Handbook of
human Computer
Interaction.M.G.Halander,Elsevier Science.
Figure 4.3 Views Home [2] Hariyanto, Bambang.2004.Rekayasa
Sistem Berorientasi Objek. Bandung :
Informatika.
5
[3] Interaksi Manusia dan Komputer.(2007) [15]Pengertian Application Programming
http://mti.ugm.ac.id/~yudhistira/ResourceMTI/ Interface.(2010).
UAS/IMK(22-07-07)/9%20- http://pdfdatabase.com/search/pengertian-
%20Prinsip%20UCD.pdf, 8-10-2010, application-programming-interface.html, 12-
11:00 10-2010 , 21:00
[4]Atha.(2008). Rancangan Sistem Pameran [16] Oauth.http://oauth.net, 2-10-2010 , 21:30
Online Menggunaka Metode UCD (User [17] What is Usability.(2010)
Centered Design). http://www.upassoc.org/usability_resources/ab
http://onlytha.blogspot.com/2008/12/rancanga out_usability/definitions_of_usability.html12-,
n-sistem-pameran-online.html 5-10-2010, 10-2010, 17:00
19:00 [17] What is Usability.(2010)
[5] Pengertian Prototyping.(2008) http://www.upassoc.org/usability_resources/ab
http://www.google.com/url?sa=t&source=web out_usability/definitions_of_usability.html12-,
&cd=1&ved=0CBUQFjAA&url=http://fenni.s 10-2010, 17:00
taff.gunadarma.ac.id/Downloads/files/11018/P
rototyping.pdf&ei=DeoFTZTqA8LJrAeGqIm
RD, 8-10-2010, 11:30
[6] PHP. (2008).http://id.wikipedia.org/PHP ,
12-10-2010 , 22:00
[7] Fauzi,Ahmad. 2009. All About Twitter.
Jakarta: Yureka.
[8] Application Programming Interface.(2009)
api-http://ipangsan.web.id/api-application-
program-interface/, 12-10-2010, 19:00
[9] Ahira,Anne. (2010). Apa Itu Google
Translate.http://www.anneahira.com/google-
translate.htm, 12-10-2010 , 21:20

[10]Baskoro,Wiku.(2010).Another Bigs News

From Twitter.
http://dailysocial.net/2010/03/01/another-big-
news-from-twitter/, 5-10-2010, 22:00
[11] Indonesia Peringkat Tertinggi Pengguna
Twitter.
http://www.pramborsfm.com/new/index.php?o
ption=com_content&view=article&id=6006:in
donesia-peringkat-tertinggi-penggunaan-
twitter&catid=166:news-jakarta&Itemid=378,
13-10-2010 , 09:00
[12] Manfaat Twitter dan Dampak
Negatifnya.(2010).
http://besteasyseo.blogspot.com/2010/09/manf
aat-twitter-dampak-negatif-twitter.html
12-10-2010, 18:20
[13]MediaSosial.(2010).http://id.wikipedia.org
/wiki/Media_sosial,12-10-2010, 17:30
[14]
Mikroblog.(2010).http://id.wikipedia.org/wiki/
Mikroblog, 12-10-2010 , 17:50