10110578(Herdi julianto)

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



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

http://www.tokobagus.com/







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 :






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.



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 :











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



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



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



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.



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.



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 :



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



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



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



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



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



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



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






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



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~

10110578(Herdi julianto)

Documents

Transcript of 10110578(Herdi julianto)