Upload
kuminato-diez
View
196
Download
0
Embed Size (px)
Citation preview
5/16/2018 10110578(Herdi julianto) - slidepdf.com
http://slidepdf.com/reader/full/10110578herdi-julianto 1/21
Interaksi Manusia dan Komputer
Analisa WebSite Tokobagus.com
berdasarkan UI (User Interface)
Disusun oleh :
IF-13_Herdi Julianto (10110578)
Jurusan Teknik Informatika
Fakultas Teknik & Ilmu Komputer
Universitas Komputer Indonesia
2011-2012
5/16/2018 10110578(Herdi julianto) - slidepdf.com
http://slidepdf.com/reader/full/10110578herdi-julianto 2/21
PENDAHULUAN
Situs web merupakan hal yang sudah sangat di butuhkan oleh berbagai kalangan di
zaman modern yang serba digital sekarang ini.Sebauh website di buat tidak lain adalah
bertujuan untuk memberikan sebuah pelayanan Information atau apapun yang bersifat
Learning, Service, Aducation dan hal lainnya. Untuk mencapai tujuan yang di kehendaki oleh
pemilik sebuah situs web, maka dalam hal ini sebauh website harus memperhatikan
beberapa hal yang harus di perhatikan agar pembuatan sebuah Situs Web lebih efektif dan
efisien sehingga informasi yang ingin di sampaikan tepat sasaran kepada pengunjung. Salah
satu faktor yang harus di perhatikan tersebut adalah UI (User Interface).
Untuk melihat sebuah website sudah dikatakan baik atau sudah memenuhi kriteria
dari prinsip – prinsip UI (User Interface), maka harus dilakukan dengan cara mengalisanya.
Dalam hal ini, saya bertujuan untuk menganalisa sebuah situs web yang beralamat
www.tokobagus.com. Analisa ini di latar belakangi untuk memenuhi salah satu tugas dari
mata kuliah Human-Computer Interaction (HCI/IMK).
www.tokobagus.comSeperti yang kita ketahui bahwa web yang beralamat adalah
salah satu website yang dibuat untuk pelayanan penjualan/pembelian barang secara online.
PEMBAHASAN
Prinsip-prinsip umum Perancangan UI adalah sebagai berikut :
1. User Compatibility
2. Product Compatibility
3. Task Compatibility
4. Work Flow Compatibility
5. Consistency
6. Familiarity
7. Simplicity
5/16/2018 10110578(Herdi julianto) - slidepdf.com
http://slidepdf.com/reader/full/10110578herdi-julianto 3/21
8. Direct Manipulation
9. Control
10. WYSIWYG
11. Flexibility
12. Responsiveness
13. Invisible Technology
14. Robustness
15. Protection
16. Ease of Learning & ease of use
Berdasarkan prinsip – prinsip User
Interface di atas, saya akan mencoba untuk
menerapkannya pada situs web
tokobagus.com sebagai anilis yang
kompeten. Dibawah ini merupakan
tampilan dari situs web
www.tokobagus.com :
5/16/2018 10110578(Herdi julianto) - slidepdf.com
http://slidepdf.com/reader/full/10110578herdi-julianto 4/21
Gambar : Tokobagus.com
Mengapa saya mengambil situs web ini ? Karena situs web ini merupakan situs web yang
menurut saya menarik, karena situs ini menyediakan pelayanan penjualan maupun pembelian
barang atau jasa secara online. Dengan adanya pelayanan yang mudah dan ringan kemajuan
teknologi semakin menjadi lebih meningkat, apa lagi dilakukan secara online. Karena seperti yang
telah kita ketahui, bahwa di masa modern ini tingkat kecanduan terhadap dunia internet sudah
merajalela baik dikalangan muda ataupun tua. Hampir semua orang di seluruh dunia pasti sudah
tahu dengan yang namanya teknologi digital, mengakses internet melalu komputer maupun mobile.
Setiap informasi pastinya di dapat dari sebuah situs web. Dan untuk itu perlu kita untuk tahu
apakah sebuah situs web yang sering kita kunujungi itu ,sudah memenuhi prinsip – prinsip dari yang
di sebut UI (user interface). Sebagai acuan utama dari penilaian sebuah situs web yang baik dan di
minati oleh banyak pengunjung.
5/16/2018 10110578(Herdi julianto) - slidepdf.com
http://slidepdf.com/reader/full/10110578herdi-julianto 5/21
Analisa Situs web www.tokobagus.com
berdasarkan UI (User Interface)
1. User compability
Dapat diartikan bahwa 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 membuat user lebih produktif. Dan yang harus
diperhatikan juga adalah bahwa perancang (designer ) atau developer tidak sama dengan user.
Tampilan situs Www.tokobagus.com
Dalam situs tokobagus.com, pemilihan tema dan isi sangatlah bagus karena begitu
kita tahu nama alamat situs web tersebut kita sudah tahu bahwa situs web ini adalah
penyedia pelayanan penjualan. Sesuai dengan yang tertera pada logo yang di sediakan
pada situs web ini :
5/16/2018 10110578(Herdi julianto) - slidepdf.com
http://slidepdf.com/reader/full/10110578herdi-julianto 6/21
Gambar : Logo
Untuk segi dalam pengetahuan pembuat situs web ini, pembuat sangan konsisten
dalam kategori apa saja yang banyak di butuhkan oleh pengunjung situs webnya. Seperti
pada gambar di bawah ini :
Dapat di lihat bahwa pada gambar di samping,
menunjukan berbagai kategori barang – barang yang
di jual pada situs web ini. Dan ketegori tersebut sudah
termasuk barang kebutuhan yang sering banyak orang
perlukan, itu termasuk pemilihan yang sangat
konsisten dan efisien bagi para pengunjung yang
mengunjungi situs web ini.
2. Product Compatibility
Product compalility ini dimaksudkan untuk Selalu memperhatikan dan mempertahankan
kompatibilitas antar produk, misalnya mampu mengorbankan User Interface yang
memungkinkan sistem lebih kompatibel. Terkadang sebuah situs web menyajikan hal yang
berbeda dengan apa yang harusnya di informasikan pada situs web tersebut. Namun utnuk situs
5/16/2018 10110578(Herdi julianto) - slidepdf.com
http://slidepdf.com/reader/full/10110578herdi-julianto 7/21
web tokobagus.com, isi yang disajikan dan isi informasikan sekaligus yang di berikan kepada
user / pengunjung sudah sesuai. Seperti yang tertampil dalam gambar di bawah ini :
Pada gambar di atas terlihat barang – barang yang di jual pada situs web ini. Dengan
demikian situs web ini sudah memenuhi prinsipProduct Compability, karena apa yang disajikan
sesuai dengan user interface.
3. Task Compability
Yang di maksud dari Task Compability disisni adalah setiap rancangan interface sistem harus
sesuai dengan tugas dari user , jangan sampai user menjadi kesulitan untuk menggunakannya,
karena hal ini dapat menyebabkan situs web yang kita buat tidak akan terpakai dan akhirnya tidak
dapat membantu pekerjaan / tugas user .
Untuk yang satu ini saya kira situs web tokobagus.com sudah memenuhinya dengan baik. Karena
ketika pengunjung pertama kali melihat tampilan awal dari situs web ini pengunjung dapat dengan
mudah melakukan interksi. Seperti gambar di bawah ini :
Barang yang di jual
5/16/2018 10110578(Herdi julianto) - slidepdf.com
http://slidepdf.com/reader/full/10110578herdi-julianto 8/21
Spesifikasi kemudahan dalam situs web ini :
a. Banner
Gambar : Banner tokobagus.com
Beberapa hal yang dibahas berkaitan dengan banner pada web tokobagus.com, yaitu :
1. Pada banner terdapat logo dan nama perusahaan yang sudah diletakkan dengan
tepat, di tempat yang secara cepat bisa diketahui pengunjung yakni berada di pojok
kiri atas (tempat terbaik untuk metode membaca dari kiri ke kanan). Logo tidak perlu
terlalu besar. Dan pemilihan warnapun sangat sesuai dan tidak membuat perpaduan
logo danbackground tidak sinkron.
2. Gambar logo dan warna tulisan nama perusahaan sangat sesuai dengan tema
beckgroundnya. Dan pada tampilan awal maupun tampilan pada menu lain logo
5/16/2018 10110578(Herdi julianto) - slidepdf.com
http://slidepdf.com/reader/full/10110578herdi-julianto 9/21
tetap dengan gambar sebelumnya. Hal ini dapat meyakinkan bahwa pengunjung
masih berada pada situs web tersebut.
3. Pada banner terdapat menu-menu utama.
b. Menu
Pada web tokobagus.com selain terdapat menu-menu utama pada banner juga tersedia
menu pada bagian bawah body. Peletakan menu-menu utama pada web tokobagus.com
sudah tepat karena fokus mata pengguna dalam mengamati sesuatu dimulai dari bagian
atas, kiri, kanan, dan terakhir adalah bagian bawah. Selain itu, menu utama merupakan
informasi penting yang memberitahu user tentang apa saja yang ditawarkan web ini. Menu
yang tersedia pada bagian bawah body merupakan menu tambahan. Beberapa hal yang
dibahas berkaitan dengan menu pada web Tokobagus.com, yaitu :
1. Saat user memilih salah satu menu, tampilan dari menu yang dipilih tidak mengalami
perubahan (misalnya perbedaan gradasi warna) yang menunjukan bahwa user
sedang berada di menu tersebut. Walau demikian web ini mencantumkannya pada
bagian atas sebelum informasi
yang di sajikan, seperti gambar
berikut :
Pada garis yang bercetak tebal
merah tersebut menunjukan
bahwa pengunjung sedang
berada pada menu/halaman
Bantuan.
5/16/2018 10110578(Herdi julianto) - slidepdf.com
http://slidepdf.com/reader/full/10110578herdi-julianto 10/21
2. Ketika pengunjung memilih menu Jual & Beli Aman, terdapat ke ganjalan yakni pada
menu tersebut menampilkan halaman Tips Bertransaksi di Tokobagus.com. Hal inilah
yang membuat pengunjung kan bungung.
4. Work Flow Compatibility
Maksudnya adalah selalu mengorganisasikan setiap fungsinya sesuai dengan kategori
fungsinya sehingga dapat memfasilitasi sega perubahan tugas user .
Dalam hal ini, web Tokobagus.com selalu melakukan update. Setiap beberapa waktu
informasi yang disajikan akan selalu bertambah dengan kata lain terupdate teurs dengan baik.
Sehingga pengunjung tidak akan merasa bosan melihat informasi penjualan yang terdapat pada
web Tokobagus.com ini. Apa lagi dengan adanya pemberitahuan setiap barang yang sudah
terjual dan barang baru yang akan dijual pada situs ini.
5. Consistency
Dalam hal ini tokobagus.com sudah sangat konsisten dalam hal penampilan kerena dapat di lihat
Seharusnya Menunjukansedang berada pada
halaman Jual & Beli Aman.
5/16/2018 10110578(Herdi julianto) - slidepdf.com
http://slidepdf.com/reader/full/10110578herdi-julianto 11/21
Bahwa Menu yang terdapat pada Banner memiliki warna tulisan hitam yang sesuai dengan
tema background-nya yakni berwarna putih. Serta pada gambar yang di beri cetak tebal merah
diatas atas merupakan navigasi yang sangat effisien bagi para pengunjung untuk bisa langsung
mencari apa yang pengunjung inginkan.
6. Familiarity
Dalam ketegory ini menjelaskan bahwa penggunaan bahasa maupun penyampaian informasi
sudah sangat familiar karena menggunakan bahasa Indonesia dan tidak bercampur campur dengan
bahasa lain. Selain itu dilakukaannya penggunaan bahasa sehari - hari dalam setiap informasi yang
di berikan. Contoh pada navigasi menu dan kategori :
5/16/2018 10110578(Herdi julianto) - slidepdf.com
http://slidepdf.com/reader/full/10110578herdi-julianto 12/21
7. Simplicity
Desain dan menu-menu sebaiknya dibuat sesederhana mungkin sehingga dapat menyampaikan
maksud dan tujuan sistem secara jelas dan mudah dipahami oleh pengguna yang bersangkutan.
Simply menu
Mengganakan
bahasa Indonesia
yang baik
5/16/2018 10110578(Herdi julianto) - slidepdf.com
http://slidepdf.com/reader/full/10110578herdi-julianto 13/21
Desain dan peletakan menu sudah dirancang secara sederhana sehingga tidak membingungkan
pengguna. Peletakan menu sebagai navigasi utama di bagian kanan situs cukup memudahkan
pengguna untuk melakukan navigasi dalam sistem ini. Selain itu adanya beberapa menu tambahan
di bagian kanan yakni berupa Kategori juga sangat membantu pengakses situs dalam menggali
kelengkapan informasi yang ada.
Desain situs ini sudah memenuhi The Simplicity Compability karena rancangan tampilan situs
dibuat dengan warna dan desain yang sederhana dan tidak membingungkan pengguna. Dengan
demikian, fungsi dari sistem dapat dijalankan dengan baik tanpa adanya hal-hal lain yang
membingungkan pengguna.
8. Direct Manipulation
Yang dimaksudkan pada prinsip Direct Manipulation adalah dimana seorang user dapat
mengakses segala sistem yang ada pada situs web tersebut. Seperti halnya pada web
Tokobagus.com ini, Navigasi menu yang berada pada banner. Ketika User ingin mengakses
5/16/2018 10110578(Herdi julianto) - slidepdf.com
http://slidepdf.com/reader/full/10110578herdi-julianto 14/21
pada opsi menu tentang Tentang TokoBagus, maka secara otomatis si user akan segera
beralih menuju halaman yang di inginkan tadi. Seperti pada gambar berikut :
Kemudian user akan langsung masuk kehalaman ini.
Dalam hal ini web Tokobagus.com ini sudah memenuhi prinsip dari Direct Manipulation.
Karena pengunjung benar – benar dapat mengakses segala navigasi yang sesuai dengan
yang tercantum di web Tolobagus.com ini. User -pun tidak akan merasa bingung setelah
mengaksesnya karena terdapat penjelasan dari apa yang diakses oleh user, seperti yang
bercetak tebal di atas.
User mengakses menu Tentang
TokoBagus sampai navigasi berubah
warna menjadi merah.
User Terakses ke halaman
Tentang TokoBagus dari
menu Tentang TokoBagus
5/16/2018 10110578(Herdi julianto) - slidepdf.com
http://slidepdf.com/reader/full/10110578herdi-julianto 15/21
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 adalah sebuah singkatan dari “What u see is What u get!” yang dimana dalam
pembahasan ini dapat di artikan sebagai isi yang di tampilkan atau informasi yang di berikan
dari sebuah website harus lah sama dengan apa yang kita dapat contohnya ketika kita ingin
men-Print data dari sebuah situs web, dan hasil yang kita print haruslah sama dengan apa
yang kita lihat pada halaman website tersebut. Pada situs web Tokobagus ini, isi yang
disajikan sudah memenuhi dengan prinsip WYSIWYYG.
Selain itu situs web TokoBagus.com merupakan web pelayanan penjualan barang
sehingga dapat di pastikan, bahwa informasi yang tercantum adalah benar sehingga
pengunjung tidak akan merasa ragu.
11. Flexibility
Tokobagus.com di desain dengan sangat fleksibel, karena setiap user dapat mengakses website
ini dengan mudah dan tidak mendapatkan kebingungan. Selain itu User dapat mengakses situs web
TokoBagus.com ini dengan menggunakan Account facebook. Seperti yang kita ketahui Facebook
merupakan jejaring sosial yang sangat diminati oleh semua kalangan. Dengan adanya akses melalui
Facebook ini, user dapat leluasa ketika melihat informasi yang disediakan di web site ini. Seperti
pada gambar berikut :
atau
5/16/2018 10110578(Herdi julianto) - slidepdf.com
http://slidepdf.com/reader/full/10110578herdi-julianto 16/21
Gambar di atas merupakan navigasi dimana user dapat melakukan pendaftaran
ataupun akses melalui facebook dan twitter.
12. Responsiveness
Pada website Tokobagus.com terdapat bar yang dinamakan dengan Searching Bar .
Dengan adanya Bar ini user dapat mengakses sebuah informasi penjualan dengan cara
mencari sendiri barang yang di innginkan yakni dengan mengetikan kata kunci sesuai yang
dinginkan user. Seperti pada gambar berikut :
Gambar : Bar pencarian
Sebagai contoh user ingin melakukan pencarian dengan kategori Handphone dengan jenis
kata pencarian adalah Samsung Galaxi Ace dan provinsi Jawa Barat , dengan mengklik
“CARI” maka user akan dihadapkan pada hasil pencarian sebagai berikut :
Untuk hal ini respon merujuk ke halaman dimana tidak ada pencarian yang sesuai.
Menurut pengamatan, sistem dalam situs Tokobagus.com ini sudah memenuhi Prinsip
Reponsiveness.
Dalam situs ini, kita dapat melakukan pencarian informasi dengan cukup mudah karena adanya
kolom pencarian. Namun demikian karena toleransi yang begitu besar, pada saat melakukan
5/16/2018 10110578(Herdi julianto) - slidepdf.com
http://slidepdf.com/reader/full/10110578herdi-julianto 17/21
pencarian kata-kata tertentu, hasil yang sitampilkan akan sangat banyak hanya karena mengandung
kata yang mirip dengan kata kunci yang kita masukkan.
.
13. Invisible Technology
Desain pada sebuah website perlulah memperhatikan sebagian teknis yang tidak boleh di
jangkau oleh seorang User. Karena jika ada sebah opsi yang tidak boleh di akses oleh user itu muncul
atau tampil pada website, hal ini akan membuat user yang mengunjungi website tersebut merasa
bingung ketika mengaksesnya.
Pada saat ini, situs web Tokobagus.com hanya menampilkan hal yang perlu di akses oleh user
saja, maka prinsip Invisible Technology sudah terpenuhi di dalam website ini.
14. Robustness
Desain sebaiknya dirancang untuk dapat fleksibel dan dapat melakukan toleransi terhadapi
kesalahan. Hal ini berguna untuk mengurangi resiko dan akibat yang timbul dari kesalahan maupun
penyalahgunaan sistem yang ada oleh pengguna.
Pada situs Tokobagus.com ini sudah memenuhi prinsip Robustness, karena pada situs ini
terdapat navigasi pencarian yang dimana ketika user melakukan pencarian, dan pencarian tersebut
tidak mendapatkan hasil apapun, makan akan ada koreksi kesalahan yang ditujukan terhadap user.
Lihat gambar dibawah ini :
Gambar : Koreksi kesalahan
5/16/2018 10110578(Herdi julianto) - slidepdf.com
http://slidepdf.com/reader/full/10110578herdi-julianto 18/21
15. Protection
Prinsip ini sangatlah berbeda dengan prinsip Robustness, karena pada prinsip ini sistem
seharusnya memproteksi kesalahan-kesalahan umum manusia. Seperti ketika user mencoba untuk
memilih navigasi Toko Saya yang di akibatkan ketidak tahuan user mengenai fungsi utama navigasi
tersebut. Maka user akan mendapatkan peringatan dari sistem situsweb tersebut seperti gambar
berikut :
Dengan ini, meyakinkan bahwa Tokobagus.com memenuhi Prinsip Protection. Karena
hanya user yang terdaftar saja yang bisa masuk kedalam navigai halaman Toko Saya.
16. Ease of Learning
Dalam hal ini lebih di tekankan pada informasi yang diberikan terhadap user. Desain
yang baik akan membuat user akan lebih mdah dalam mempelajari dan mengakses setiap
Fitur – fitur yang di sediakan di dalam website.
Pada situs web Tokobagus.com, user dapat mengetahui dengan mudah apa yang
disajikan pada website ini. Sesuai dengan nama alamat yang sangat mudah diingat yakni
www.tokobagus.com, dengan mengetahui kata “Toko”dan Bagus” saja user dapat
mengetahui bahwa situs web ini adalah penyedia layanan penjualan barang. Toko = menjual
barang.
Alert dari
sistem
5/16/2018 10110578(Herdi julianto) - slidepdf.com
http://slidepdf.com/reader/full/10110578herdi-julianto 19/21
Selain itu, setiap navigasi yang di sediakan sangatlah sederhana, sehingga user dapat
mempelajarinya dengan mudah. Serta adanya Gambar – gambar iklan barang yang sedang
dijual pada tampilan awal maupun Home. Seperti gambar berikut :
Dengan adanya kemudahan bagi user untuk mempelajari setiap kesediann pada situs
web Tokobagus.com, maka situs ini sudah memenuhi Prinsip Ease of Learning.
17. Ease of use
Sebuah situs web, haruslah memperhatikan tampilan yang mudah untuk digunakan oleh
User. Dengan desain yang sederhana maka tidak akan membuat user pemula menjadi
merasa bingung dan susah untuk menggunakan Fitur yang disediakan pada sebuah website.
Pada website Tokobagus.com, segala fitur dan navigasi maupun menu dan link – link
yang disediakan sangatlah mudah untuk di akses oleh setiap kalangan User.
Terkadang seorang user ingin menjadi account dari sebuah web, sama halnya pada web
Tokobagus.com. Seorang User dapat menjadi Member dengan mudah karena adanya
5/16/2018 10110578(Herdi julianto) - slidepdf.com
http://slidepdf.com/reader/full/10110578herdi-julianto 20/21
feature “Sign in with Facebook atau Sign In with Twitter ” . Di zaman modern dan serba
digital ini pastilah setiap orang mempunyai jejaring sosial sendiri salah satunya adalah
Facebook atau Twitter. Kemungkinan sebagai user untuk ingin menjadi member di web
Tokobagus.com sangatlah mudah yakni dengan :
a. Klik Daftar atau Icon Facebook/Twitter.
b. Kemudian akan menuju halaman ini.
c. Dengan meng-klik sign in with facebook maka user akan secara otomatis
terdaftar menjadi member Tokobagus.com.
Pada penjelasan diatas membuktikan bahwa Tokobagus.com sudah memenuhi Prinsip Easy of Use.
~Alhamdulillah Tamat~