ANALISIS DESAIN INTERFACE WEB BASED

TWITTER

Ugik Bayu Nugroho (A12.2010.04105)

Gita Febrina Wulandari (A12.2010.04099)
Rima Dias Ramadhani (A12.2010.04098)
Indriyani Eka Sari (A12.2010.04120)
Febriana Irvinita Putri (A12.2010.04103)
Afif Gunarto (A12.2010.04653)

FAKULTAS ILMU KOMPUTER

UNIVERSITAS DIAN NUSWANTORO
SEMARANG
2013

0
 BAB I
Jejaring Sosial

Jejaring sosial adalah struktur sosial yang terdiri dari beberapa elemen individual atau
organisasi. Jejaring ini biasanya digunakan untuk saling berhubungan karena kesamaan sosialitas,
mulai dari teman sampai dengan keluarga. Istilah ini diperkenalkan oleh profesor J.A. Barnes
di tahun 1954.

Jejaring sosial merupakan situs dimana setiap orang bisa membuat web page pribadi,
kemudian terhubung dengan teman-teman untuk berbagi informasi dan berkomunikasi. Jejaring
sosial terbesar saat ini antara lain Facebook, Myspace, dan Twitter. Jika media tradisional
menggunakan media cetak dan media broadcast, maka media sosial menggunakan internet.

Jejaring sosial mempermudah interaksi dengan orang lain walaupun terpisah oleh jarak.
Karena kita dapat berkomunikasi secara langsung. Kemudahan dalam berinteraksi dapat
diciptakan menjadi sarana promosi suatu barang, komunitas, band dan lain-lain.

Salah satu survei suatu lembaga sosial menyatakan bahwa pengguna situs jejaring sosial
mayoritas adalah anak muda. Mereka menggunakan situs jejaring sosial untuk mencari teman
dunia maya, bahkan juga digunakan untuk mencari pasangan hidup. Seharusnya, para anak muda
yang menggunakan situs jejaring sosial menggunakan sarana ini dengan sewajarnya dan tidak
mengabaikan lingkungan sosial.

Web based application adalah segala bentuk aplikasi (grafis, word processor, chatting, mail)
yang dapat dijalankan hanya dengan satu syarat, yakni kita memiliki akses Internet. Jadi hanya
dengan memiliki akses internet kita sudah dapat menggunakan aplikasi berbasis web tersebut.

1
 BAB II
Landasan Teori
I User Interface
User Interface adalah suatu alat yang disediakan oleh sistem operasi (OS) sebagai sarana
untuk berinteraksi antara pengguna (user) dengan sistem operasi (OS), yang mana pengguna
(user) memberikan perintah kepada sistem operasi (OS) untuk kemudian di terima, diproses dan
di tampilkan oleh sistem operasi (OS).
Contoh konsep luas user interface mencakup aspek interaktif sistem operasi komputer, perkakas
tangan, operator kontrol mesin berat. dan proses kontrol. Pertimbangan desain yang berlaku saat
membuat user interface berkaitan dengan ergonomik dan psikologi.
User interface yang ada untuk berbagai sistem, dan menyediakan cara :
 Input, memungkinkan pengguna untuk memanipulasi sistem.
 Output, memungkinkan sistem untuk menunjukkan efek manipulasi pengguna.

Jenis Interface dalam Interaksi Manusia dan Komputer adalah :

a. Text Based

Merupakan jenis interface primitif yang menggunakan text based interface dalam suatu
kode program.
Contoh Text Based adalah :
Program Kalkulator yang menampilkan suatu interface yang mudah untuk dimengerti oleh user
karena memiliki judul, cara mengoperasikan program, help, dan intruksi lain.
Perintah “readln” dan “writeln” dalam Pascal

b. Graphic Based (GUI)

GUI adalah antar muka pada sistem operasi komputer yang menggunakan menu grafis. Menu
grafis ini maksudnya terdapat tampilan yang lebih ditekankan untuk membuat sistem operasi
yang user-friendly agar para pengguna lebih nyaman menggunakan komputer.

Contoh sistem operasi yang menggunakan GUI adalah :

 Linux dengan distro Mandriva menggunakan Desktop Environment (KDE)
 Sistem operasi Windows 7 Ultimate yang menggunakan GUI-nya sendiri.

c. Web Based
Contoh dari Web Based adalah :
o Personal Website (Blog)
Setiap orang tentu memiliki personal website. Biasanya di dalam web atau blog tersebut
berisi tentang informasi-informasi.
o Website Dagang (E-Commerce)
Situs-situs yang memperdagangkan barang dagangan secara online sering dijumpai pada
website- website tertentu.

2
 d. Mobile Based

Contoh dari Mobile Based adalah :

o Short Message Services (SMS) Solution

Dengan adanya SMS, biaya yang dikeluarkan untuk berkomunikasi lebih efektif dan
efisien. Dalam mendapatkan informasi , dengan adanya SMS, informasi yang didapatkan
lebih up-to-date dengan fitur teknologi Push dan Pull. SMS juga dapat terintegrasi dengan
baik dalam proses bisnis, atau proses kunci yang dapat mempersingkat waktu dalam
menanggapi klebutuhan.
o Mobility Enabled Business Applications
Sekarang ini semakin marak alat komunikasi yang diperkenalkan untuk menciptakan
pergeseran pemikiran dalam cara melakukan bisnis secara signifikan. Mengingat sifat
mobilitas yang dibutuhkan dalam kebutuhan bisnis saat ini dan tuntutan dari pelanggan
untuk informasi yang mana saja dan kapan saja, ada kebutuhan untuk mengambil
penyebaran informasi ke tingkat berikutnya yaitu melalui Mobility-enabled Aplikasi Bisnis.

II. Prinsip Design User Interface

Dalam perancangan User Interface, terdapat beberapa prinsip yang harus diperhatikan,
antara lain adalah :

1. User Compatibility

Seorang perancang sistem harus benar-benar paham tentang pengetahuan, cara berpikir dan
cara menerima informasi dari user sehingga sistem yang nantinya akan digunakan
oleh user dapat membuatuser lebih produktif. Dan yang harus diperhatikan juga adalah bahwa
perancang (designer) ataudeveloper tidak sama dengan user

2. Product Compatibility

Selalu memperhatikan dan mempertahankan kompatibilitas antar produk, misalnya mampu

mengorbankan User Interface yang memungkinkan sistem lebih kompatibel.

3. Task Compatibility

Rancanglah interface sistem sesuai dengan tugas dari user, jangan samapi user kesulitan
untuk menggunakannya, karena hal ini dapat menyebabkan aplikasi yang kita buat tidak akan
terpakai dan akhirnya tidak dapat membantu pekerjaan / tugas user.

4. Work Flow Compatibility

Selalu mengorganisasikan setiap fungsinya sesuai dengan kategori fungsinya sehingga dapat
memfasilitasi segala perubahan tugas user.

3
5. Consistency

Prinsip ini sudah jelas, bahwa sistem harus konsisten terhadap fungsionalitas / kegunaan dari
sistem tersebut. Contoh sederhananya adalah ketika user menekan tombol “save” maka proses
yang terjadi adalah penyimpanan bukan hapus data.

6. Familiarity

Gunakanlah konsep, terminologi dan pengaturannya yang mudah dipahami oleh user.
Seperti ikon atau gambar “Recycle Bin” pada Sistem Operasi Windows, ini membuktikan
bahwa fokus user terhadap gambar tersebut adalah file-file yang sudah dihapus sebelumnya.

7. Simplicity

Kompleksitas suatu aplikasi akan menimbulkan frustasi pada user itu sendiri, maka dari itu
gunakansystem default pada aplikasi yang dirancang. Maksudnya adalah sediakan dan
utamakanlah fungsi – fungsi yang benar-benar sesuai dengan tugas dari user. Usahakan agar
tidak menampilkan semua fungsionalitasnya.

8. Direct Manipulation

Maksud dari prinsip ini adalah user dapat langsung menyaksikan aksi sistem pada suatu
objek. Contoh sederhana, pada saat kita menekan mengetikkan huruf “A” maka di layar akan
langsung muncul huruf“A”.

9. Control

Sistem yang digunakan oleh user jangan sampai membuat user merasa frustasi dan dikontrol
oleh user. Seperti memberikan komentar pada saat user melakukan kesalahan dengan bahasa
yang tidak membuat user merasa dikontrol oleh sistem tersebut.

10. WYSIWYG

WYSIWYG (What You See Is What You Get), artinya adanya korespondensi satu ke satu
antara informasi di layar dengan informasi di printed-output atau file. Contoh, pada saat kita
membuat laporan menggunakan Microsoft Office lalu mencetaknya (print out) laporan
tersebut, maka hasil print outharus sama dengan yang ada pada lembar kerja Microsoft Office.

11. Flexibility

Prinsip ini merupakan prinsip yang sangat penting bagi user dengan keterbatasan fisik. Ini
berarti mengijinkan banyak kontrol dari user yang mendukung untuk menggunakan aplikasi
yang kita rancang dan mampu mengakomodir kemampuan user yang lain. Seperti aplikasi
yang dapat didukung oleh perangkat lain (mouse, keyboard, joystick,trackball).

12. Responsiveness

Sistem harus selalu merespon dengan cepat apa yang di inputkan oleh user. Seperti
menampilkanProgress Bar.

13. Invisible Technology

4
 Menyembunyikan detail teknis dari suatu sitem merupakan hal yang sangat
direkomendasikan dalam membuat User Interface. Sehingga user tidak memiliki rasa
khawatir dan ketakutan untuk menggunakan aplikasinya.

14. Robustness

Sistem harus mampu mentolerir kesalahan manusia baik disengaja maupun tidak disengaja
dan yang umunya tidak dapat dihindari. Menyediakan Recovery System merupakan hal yang
baik untuk mengimplementasikan prinsip ini.

15. Protection

Prinsip ini berbeda dengan prinsip Robustness, karena pada prinsip ini sistem seharusnya
memproteksi kesalahan-kesalahan umum manusia. Seperti pada saat kita menutup lembar
kerja Microsoft Office yang belum kita simpan sebelumnya, maka Office akan secara
otomatis memberikan konfirmasi untuk menyimpannya atau tidak.

16. Ease of Learning

Buatlah sistem yang mudah dipelajari bagi user novice (awam). Hal ini akan memberikan
motivasi kepada user tersebut untuk menggunakannya.

17. Ease of Use

Buatlah sistem yang mudah digunakan untuk expert user. Sehingga sistem yang kita bangun
tidak hanya dipakai untuk novice user tetapi bisa juga dipakai untuk user yang sudah ahli
(berpengalaman).

5
 BAB III
Twitter Sebagai Media Jejaring Sosial

Cara Menggunakan Twitter :

1. Buka halaman website untuk melakukan pendaftaran Twitter di sini https://twitter.com.

Jika user sudah mempunyai akun twitter, maka user langsung mengisi pada form Sign in.

2. Jika user belum mempunyai akun twitter , user harus membuat akun twitter terlebih dahulu
dengan mengisi form Sign Up.

6
3. Selanjutnya silahkan isi semua data-data yang diminta twitter seperti nama lengkap, alamat
email, password serta username. Diwajibkan semua data-data harus benar seperti terlihat pada
contoh gambar dibawah. Setelah selesai mengisi semua data dengan benar maka selanjutnya
silakan klik tombol “Create My Account” untuk segera melakukan verifikasi akun twitter.

Maka akan muncul tampilan halaman utama :

7
4. Untuk membuat status di twitter, tulis status yang di inginkan di dalam kotak yang tersedia
seperti gambar dibawah ini, lalu klik “tweet”, bisa juga dengan menggunakan “compose new
twet” yang terletak dipojok kanan atas. Status tidak boleh lebih dari 140 karakter jika lebih
maka tombol tweet tidak akan aktif.

5. Untuk keluar dari account twitter anda , anda bisa klik tanda icon setting lalu pilih Sign Out.

8
 Berikut akan dijelaskan beberapa fungsi icon dan fitur-fitur penting yang terdapat pada Twitter.

6 10 3

1 2

5 8

12

Tampilan HOME

7
11
11
1
9

Tampilan PROFILE

9
1. Laman Utama (Home)

Pada halaman utama kita bisa melihat kicauan yang dikirimkan oleh orang-orang yang
menjadi teman kita. Halaman utama disebut juga sebagai Timeline

2. Isi Kicauan
Merupakan kicauan pengguna yang sering dituliskan pada twitter.

Isi Kicauan menurut Pear Analytics.

 Celoteh tidak berarti - 40%

 Percakapan - 38%
 Nilai lewat-terus (pass-along) - 9%
 Promosi diri - 6%
 Berita - 4%
 Spam - 4%
3. Profil

Pada halaman ini yang akan dilihat oleh seluruh orang mengenai profil atau data diri serta
kicauan yang sudah pernah dikirim-tampil.

4. Pengikut (Follower)

Pengikut adalah pengguna lain yang ingin menjadikan kita sebagai teman. Bila pengguna lain
menjadi pengikut akun seseorang, maka kicauan seseorang yang ia ikuti tersebut akan masuk
ke dalam halaman utama.

5. Mengikuti(Following)

Kebalikan dari pengikut, ikutan adalah akun seseorang yang mengikuti akun pengguna lain
agar kicauan yang dikirim oleh orang yang diikuti tersebut masuk ke dalam halaman utama.

6. Gamitan(Mentions)

Biasanya konten ini merupakan balasan dari percakapan agar sesama pengguna bisa langsung
menandai orang yang akan diajak bicara.

7. Favorit

Kicauan ditandai sebagai favorit agar tidak hilang oleh halaman sebelumnya.

8. Retweet (RT)

Fungsinya adalah untuk mentweet kembali apa yang telah di tweet orang lain. terkadang juga
RT digunakan untuk membalas tweet orang lain.

10
9. Pesan Langsung (Direct Message)

Fungsi pesan langsung lebih bisa disebut SMS karena pengiriman pesan langsung di antara
pengguna tanpa ada pengguna lain yang bisa melihat pesan tersebut kecuali pengguna yang
dikirimi pesan.

10. Tagar(Hashtag)

Tagar yang ditulis di depan topik tertentu agar pengguna lain bisa mencari topik yang sejenis
yang ditulis oleh orang lain juga

11. Senarai(List)

Pengguna twitter dapat mengelompokkan ikutan mereka ke dalam satu grup atau senarai
sehingga memudahkan untuk dapat melihat secara keseluruhan para nama
pengguna (username) yang mereka ikuti (follow).

12. Topik Hangat (Trending Topic)

Secara garis besar adalah topik yang sedang banyak dibicarakan banyak pengguna dalam
suatu waktu yang bersamaan. Kemudian secara spesifik yaitu sebuah kata, frase atau yang
ditandai dengan tagar (#) yang dilepaskan dengan kecepatan lebih tinggi serta unggul dalam
jumlah daripada kata, frase atau yang ditandai dengan tagar lainnya, hal ini biasa dikatakan
menjadi Topik Hangat (Trending Topic) dan menjadi populer baik yang melalui upaya
terpadu oleh pengguna atau karena suatu peristiwa yang mendorong orang untuk berbicara
tentang satu hal tertentu tersebut. Topik-topik tersebut membantu Twitter dan pengguna untuk
memahami apa yang terjadi di dunia. Terkadang topik-topik tersebut merupakan hasil dari
kesengajaan dan upaya bersama oleh fans selebriti tertentu ataupun karena fenomena budaya.
Ada 2 jenis Topik Hangat (Trending Topic) yang menjadi acuan pengguna di Indonesia,
yaitu Topik Hangat Seantero Dunia (Trending Topic World Wide / TTWW) dan Topik Hangat
Indonesia (Trending Topic Indonesia / TTI), kemudian yang terjadi di Indonesia khususnya
terutamanya adalah karena hal-hal yang sedang banyak peminatnya pada kala itu, semisal
fenomena lagu Keong Racun, Ariel Peterpan (dikenal sebagai Arielpeterporn), Ashilla
Zahrantiara (dikenal sebagai Shilla, Ashilla Z dan AshillaBlink), Justin Bieber (Beliebers),
Twilight, Harry Potter dan lainnya, atau juga hal-hal yang tidak biasa seperti
#7KulinerSbyPalingWuenak

11
 BAB IV
Analisis
1. Familiarity
Pemilihan bahasa yang umum yang banyak di gunakan.

Contohnya seperti kita bisa membalas tweet teman kita menggunakan “Reply” (arti dalam
bahasa Indonesia “Balas”) pada tweet yang diposting oleh teman kita.
Tidak hanya dalam dunia twitter, “Reply” juga sering digunakan dalam membalas pesan
singkat di handphone maupun di email.

Gambar Reply Tweet

2. Flexibility
Sistem tidak terlalu fleksibel. Untuk pengguna dengan user awam, karena sistem tidak
terdapat panduan dalam menggunakan fungsionalitas serta maksud dari fungsionalitas itu
sendiri. Contohnya adalah fungsi retweet, user awam belum memahami fungsi retweet.

12
3. Responsiveness
Sistem responsive terhadap postingan-postingan tweet yang baru muncul di timeline. Terbatas
hanya visual textual.

4. Control
User secara penuh dapat mengatur/mengontrol semua tweet, following atau follower, serta
aksi dari user terhadap sistem cepat.

Contohnya dalam mengatur followers, user dapat melakukan block, report as spam, unfollow,
dsb terhadap followers

5. Simplicity
Desain simpel tetapi hampir mencakup seluruh tujuan dari microblogging.

13
6. Consistency
Tampilan dari sistem konsinsten dengan kesamaan tampilan, dan fungsionalitas tidak berubah
walaupun telah diganti tampilannya.

Contohnya adalah jika user mengganti background home page, yang berubah hanya tampilan
background sedangkan icon dan fungsi-fungsi yang ada pada twitter tidak berubah.

Gambar tampilan Homepage sebelum background di ganti

Gambar Tampilan Homepage setelah background diganti

14
7. Direct Manipulasi

User dapat mengatur sendiri settingan dari home screen dan profile page pada page
“SETTING”, tapi terbatas hanya penggantian warna, foto twitter (avatar), header,
background.

Gambar Tampilan Setting

8. Robustness

Sistem harus mampu mentolerir kesalahan manusia baik disengaja maupun tidak disengaja
dan yang umunya tidak dapat dihindari. Menyediakan Recovery System merupakan hal yang
baik untuk mengimplementasikan prinsip ini.
Contoh:

Postingan tweet dapat di remove kembali jika terjadi kesalahan dengan cara klik saja
DELETE pada tweet yang akan dihapus..

15
9. Protection

Prinsip ini berbeda dengan prinsip Robustness, karena pada prinsip ini sistem seharusnya
memproteksi kesalahan-kesalahan umum manusia. Seperti Dalam melakukan postingan
terbatas 140 karakter, saat dilakukan pengetikan terdapat angka yang menunjukan jumlah
karakter tersisah. Jika melebihi maka tombol untuk posting (Tweet) tidak dapat
digunakan.dan jika account twitter tidak di gunakan selama 3 bulan , maka twitter anda akan
terblokir dengan sendirinya.

Gambar jika membuat tweet lebih dari 140 karakter

16
 BAB V
Kesimpulan

Berdasarkan analisis menggunakan prinsip desain user interface di atas :

a. Prinsip yang terpenuhi
o Familiarity
o Responsiveness
o Control
o Simplicity
o Consistency
o Direct Manipulasi
o Robustness
o Protection
Kehandalan dari sisi desain tampilan adalah kesederhanaan (kesan yang sama dapat
dilihat di mesin pencari google) ke sederhanaan ini membuat pengguna merasakan
fungsionalitas yang responsif dan terfokus. Sehingga twitter menjadi sarana berkomunikasi
secara lebih simpel antar pengguna.

b. Prinsip yang tidak terpenuhi

 Flexibility
Twitter tidak terlalu friendly untuk user yang baru (terlebih pengguna facebook) mungkin
akan terasa sulit. Contoh lainnya seperti fungsi CONNECT yang terdapat pada menu utama.
Dengan prinsip kesederhanaan yang dianut mereka melepas user mengeksplor sendiri
fungsionalitas yang ada karena tidak terdapat petunjuk pengunaan.

Opini terhadap Twitter (kesan dan saran)

Dari sisi tampilan grafis sudah sangat baik, tujuan sebuah microblogging tercapai dengan di
dukungnya tampilan website yang menunjang. Akan tetapi ketersediaan layanan yang belum
memuaskan dikarenakan meningkatnya pengguna (twitter terkadang tidak dapat di
akses/overcapasity).

17