Anda di halaman 1dari 21

Interaksi Manusia dan Komputer

Analisa WebSite Tokobagus.com

berdasarkan UI (User Interface)

WebSite Tokobagus.com berdasarkan UI ( User Interface ) Disusun oleh : IF-13_Herdi Julianto (10110578) Jurusan

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).

Seperti yang kita ketahui bahwa web yang beralamat www.tokobagus.com 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

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

Protection 16. Ease of Learning & ease of use – Interface di atas, saya akan mencoba

Interface di atas, saya akan mencoba untuk

prinsip

User

Berdasarkan

prinsip

menerapkannya

pada

situs

web

tokobagus.com

sebagai

anilis

yang

kompeten.

Dibawah

ini

merupakan

tampilan

dari

situs

web

Gambar : 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.

( designer ) atau developer tidak sama dengan user. Tampilan situs Www.tokobagus.com Dalam situs tokobagus.com,

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

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 :

pengunjung situs webnya. Seperti pada gambar di bawah ini : Dapat di lihat bahwa pada gambar

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 :

sesuai. Seperti yang tertampil dalam gambar di bawah ini : Barang yang di jual Pada gambar

Barang yang di jual

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 :

Spesifikasi kemudahan dalam situs web ini : a. Banner Gambar : Banner tokobagus.com Beberapa hal

Spesifikasi kemudahan dalam situs web ini :

a.

Banner

Spesifikasi kemudahan dalam situs web ini : a. Banner Gambar : Banner tokobagus.com Beberapa hal yang

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

3. Pada banner terdapat menu-menu utama. b. Menu Pada web tokobagus.com selain terdapat menu-menu utama pada

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 :

sebelum informasi yang di sajikan, seperti gambar berikut : Pada garis yang bercetak tebal merah tersebut

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.

Seharusnya Menunjukan sedang berada pada halaman Jual & Beli Aman.
Seharusnya Menunjukan
sedang berada pada
halaman Jual & Beli Aman.
sedang berada pada halaman Jual & Beli Aman. 4. Work Flow Compatibility Maksudnya adalah selalu

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

Bahwa Menu yang terdapat pada Banner memiliki warna tulisan hitam yang sesuai dengan tema background-nya

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 :

Mengganakan bahasa Indonesia yang baik
Mengganakan
bahasa Indonesia
yang baik

7.

Simplicity

Desain dan menu-menu sebaiknya dibuat sesederhana mungkin sehingga dapat menyampaikan

Simply menu
Simply menu

maksud dan tujuan sistem secara jelas dan mudah dipahami oleh pengguna yang bersangkutan.

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.

situs dalam menggali kelengkapan informasi yang ada. Desain situs ini sudah memenuhi The Simplicity Compability
situs dalam menggali kelengkapan informasi yang ada. Desain situs ini sudah memenuhi The Simplicity Compability

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 :

User mengakses menu Tentang TokoBagus sampai navigasi berubah warna menjadi merah.
User mengakses menu Tentang
TokoBagus sampai navigasi berubah
warna menjadi merah.
TokoBagus sampai navigasi berubah warna menjadi merah. Kemudian user akan langsung masuk kehalaman ini. User

Kemudian user akan langsung masuk kehalaman ini.

merah. Kemudian user akan langsung masuk kehalaman ini. User Terakses ke halaman Tentang TokoBagus dari menu

User Terakses ke halaman Tentang TokoBagus dari menu Tentang TokoBagus

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.

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 :

ini, user dapat leluasa ketika melihat informasi yang disediakan di web site ini. Seperti pada gambar

atau

ini, user dapat leluasa ketika melihat informasi yang disediakan di web site ini. Seperti pada gambar

Gambar di atas merupakan navigasi dimana user

ataupun akses melalui facebook dan twitter.

12. Responsiveness

dapat melakukan pendaftaran

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 :

sesuai yang dinginkan user. Seperti pada gambar berikut : Gambar : Bar pencarian Sebagai contoh user

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 :

user akan dihadapkan pada hasil pencarian sebagai berikut : Untuk hal ini respon merujuk ke halaman

Untuk hal ini respon merujuk ke halaman dimana tidak ada pencarian yang sesuai.

Menurut

Reponsiveness.

pengamatan,

sistem

dalam

situs

Tokobagus.com

ini

sudah

memenuhi

Prinsip

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

makan akan ada koreksi kesalahan yang ditujukan terhadap user. Lihat : gambar dibawah ini Gambar :

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 :

Alert dari sistem
Alert dari
sistem

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 Tokodan Bagussaja user dapat mengetahui bahwa situs web ini adalah penyedia layanan penjualan barang. Toko = menjual barang.

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 :

pada tampilan awal maupun Home. Seperti gambar berikut : Dengan adanya kemudahan bagi user untuk mempelajari
pada tampilan awal maupun Home. Seperti gambar berikut : Dengan adanya kemudahan bagi user untuk mempelajari

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.

yakni dengan : a. Klik Daftar atau Icon Facebook/Twitter. b. Kemudian akan menuju halaman ini. c.

b. Kemudian akan menuju halaman ini.

Icon Facebook/Twitter. b. Kemudian akan menuju halaman ini. c. Dengan meng-klik sign in with facebook maka

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~