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

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 tokobagus.com kompeten. tampilan pada sebagai ini situs situs anilis web yang

Dibawah dari

merupakan 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 :

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 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 bahwa berada Bantuan. tersebut menunjukan sedang

pengunjung pada

menu/halaman

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.

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

7. Simplicity
Desain dan menu-menu sebaiknya dibuat sesederhana mungkin sehingga dapat menyampaikan

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.

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.

Kemudian user akan langsung masuk kehalaman ini.

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 :

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 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 ini sudah memenuhi Prinsip

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 :

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 Bagus saja 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 :

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~