MAKALAH Perancangan User Interface dan

Analisis Website Toko Bagus

(www.tokobagus.com)

Di susun oleh:

Novi Endah P L200110019

Dian Setiawan L200110020

JURUSAN TEKNIK INFORMATIKA

FAKULTAS KOMUNIKASI DAN INFORMATIKA

UNIVERSITAS MUHAMMADIYAH SURAKARTA

2013

DAFTAR ISI

HALAMAN JUDUL ………………………………………………………………………

DAFTAR ISI ……………………………………………………………………………..

BAB I

1.1 PENDAHULUAN ……...………………………………………………………….

1.2 Pengertian Prinsip desain interface ……………………………………..

1.3 Prinsip-Prinsip desain ui ………………………….............…………….

BAB II

2.1 Analisis website

tokobagus .......................................................

BAB III

3.1 Kelebihan

….............................................................

.....................................

3.2 Kekurangan

..............................................................

....................................

3.3

Saran ........................................................

.......................................................

DAFTAR

PUSTAKA ...................................................................

............

BAB I

1.1 PendahuluanPenerapan sistem informasi berbasis komputer seringkali

tidak berhasil mencapai tujuan utamanya, yaitu mempermudahpengguna dalam menjalankan tugasnya. Tidak berhasil dapatberarti tidak mampu memenuhi kebutuhan pengguna, baik dari segikinerja, kemudahan ataupun dari segi keamanan. Kegagalantersebut dapat terjadi karena berbagai faktor, diantaranyaadalah karena tidak adanya panduan atau standar yang dijadikanacuan dalam mengembangkan perangkat lunak sehingga penggunamendapatkan produk yang sulit digunakan.Salah satu aspek yangperlu diperhatikan untuk meningkatkan kemudahan penggunaanaplikasi adalah antarmuka aplikasi dengan pengguna. Adanyastandar antar muka diharapkan dapat meningkatkan kemudahanpenggunaan aplikasi, karena pengguna akan terbiasa denganantarmuka yang seragam.

Dari tahun ketahun, tekhnologi berkembang sangat pesat,terutama dibidang informatika. Dengan perkembangan tekhnologitersebut , manusia semakin dipermudah dalam pekerjaanya. Salahsatu dampak dari perkembangan tersebut adalah hubungan antaramanusia dan komputer atau yang sering disebut HCI ( HumanComputer Interface ).Atas dasar tersebutlah menjadi hal yang sangatpenting bagi seorang analyst atau perancang sebuah software padasaat akan menciptakan sebuah software harus memperhatikan kaidah– kaidah atau prinsip – prinsip dalam penyusunan  rancangansebuah interface tersebut,  tentunya  yang User Friendly dan UserOriented. Hal ini dikarenakan perkembangan tekhnologi danpersaingan bisnis yang sangat pesat serta tuntutan user yangmenghendaki berbagai kenyamanan dan kemudahan dalammenggunakan sebuah aplikasi.

1.2 Pengertian tentang prinsip desain antarmuka( interface )

Interface adalah Tampilan dari sebuah program Antarmuka (Interface) adalah penghubung dan sarana

interaksi antara hardware, software dan brainware. Antarmuka/User Interface (UI) merupakan bagian dari komputer

dan perangkat lunaknya yang dapat dilihat, didengar,

disentuh, dan diajak bicara, baik secara langsung maupundengan proses pemahaman tertentu.

Interface merupakan peralatan atau program yang digunakanuntuk menghubungkan dua alat yang tidak sama, yaitudengan mengubah bentuk sinyal yang lewat antara diaantara dua peralatan dalam sistem komputer sehinggamasing-masing dapat saling berkomunikasi.

Diantara 4 definisi diatas user interface(UI) akan sangatpenting bagi programmer, engineer, system analyst dan consultant untukmengelola hubungan antara hardware, software dan brainware. UserInterface yang baik adalah UI yang tidak disadari, maksudnyaadalah pada saat user berhadapan atau menemui suatu sistem diamampu menjalankan sistem itu tanpa adanya hambatan, sehinggadengan mudahmengetahui fungsi-fungsi yang ada dalam sistemtersebut.  Sebaliknya, jika interface dari suatu sistem sulituntuk digunakan oleh user, ini akan mengakibatkan user frustasiuntukmenggunakannya, yang pada akhirnya, sistem yang telahdibangun dan dilengkapi dengan berbagai fungsional tidak akanterpakai.

Tidak hanya itu, UI yang baik juga memungkinkan pengguna fokuspada informasi dan task tanpa perlu mengetahui mekanisme untukmenampilkan informasi dan melakukan task tersebut. Usahakan usermerasa betah dalam menggunakannya. Interface yang baik jugamerupakan media untuk mengetahui kemampuan sistem dankemampuan user. Berikut hasil penelitian terhadap suatu Interfacedari suatu sistem :

a) Pengguna bekerja 20% lebih produktif dengan layar yangsederhana.

b) Pengguna layar yang dimodifikasi menyelesaikan transaksi25% lebih cepat dan error berkurang 25% dari sebelumnya.

c) Window yang didesain dengan efektif menghemat $20,000dalam 1 tahun.

d) Fungsi searching yang diperbaiki dapat meningkatkansuccess rate hingga 15% dan waktu pencarian 50% lebihcepat.

1.3 PRINSIP-PRINSIP DESAIN INTERFACE

1. Merefleksikan model mental user :Merefleksikan kombinasi pengalaman dunia riil, pengalamandari software lain dan penggunaan komputer secara umum.

2. Explicit and Implicit Action :Explicit Action adalah kondisi yang jelas dalammemberikan petunjuk untuk memanipulasi suatu obyek.Implicit Action adalah kondisi yang hanya memberikankesan visual untuk memanipulasi obyek.

3. Direct Manipulation :User mendapatkan dampaknya dengan segera setelahmelakukan suatu aksi.

4. User Control :Mengijinkan user mengontrol dan menginisialisasi aksi.

5. Feedback and Communication :Selalu memberitahukan user apa yang terjadi dari suatuaksi.

6. Consistency :User dapat mentransfer pengetahuan dan kemampuan darisuatu aplikasi ke aplikasi lain.

7. WYSYWIG (What You See Is What You Get) :Tidak ada perbedaan antara yang dilihat di layar denganhasil outputnya.

8. Aesthetic Integrity :Informasi diorganisasikan dengan baik dan konsistendengan prinsip desain visual yang baik.

BAB II

3.1 ANALISIS PRINSIP-PRINSIP INTERFACE WEB TOKOBAGUS

1.AccessibilityDari segi aspek Accessibility dalam website tokobagus sudah cukup

terpenuhi, karena website ini menyediakan versi mobile. Sehingga parapengunjung yang ingin mengakses situs tokobagus dapat dilakukan melaluihandphone. Hanya saja website tokobagus tidak menyediakan versi Englishbagi pengunjung mancanegara. 

accessibility

2. Esthetically Pleasing Penempatan menu sudah sangat baik. Menu berada di bagian kanan atas, samping kiri dan bawah. Perpaduan warnanya begitu bagus dantidak terlalu berlebihan. sehingga kalau dilihat dari segi estetika terlihat sangat elegan.

esthetically pleasing

3.Availability Website tokobagus ini jika dilihat dilihat dari segi aspek availability sudah terpenuhi. Hal ini dapat dilihat dari tampilan utamanya yang menyediakan banyak menu, kolom pencarian dan penggolonganobjek berdasarkan kategori, sehingga lebih memudahkan pengunjung untuk menemukan barang yang ingin dicari.

4. Clarity Website ini sudah cukup memenuhi criteria tersebut. Contohnya terdapat pada setiap iklan yang dipasang di tokobagus memiliki deskripsi tentang spesifikasi pada produk tersebut. Sehingga spesifikasi produk-produk yang diposting di tokobagus dapat terlihat dengan jelas. 

Clarity

 5.Compatibility Website ini sudah cukup compatible, karena dapat dijalankan di berbagai browser. Dalam hal ini, saya mencoba di Mozilla Firefox, Opera , Netscape Navigator, Safari dan Google Chrome. Di semuaweb browser tersebut didapatkan tampilan yang tidak berbeda jauh hanya saja kurang support di browser Netscape dan Opera.

6. ConfigurabilityDari segi aspek configurability  website tokobagus bersifat semi

dynamic, artinya user dapat menentukan dan memodifikasi sendiri tentangiklan yang akan diposting, tetapi tidak dapat melakukan konfigurasi penuh terhadap website tersebut. 

7. ConsistencyDilihat dari segi tampilannya, website ini sangat konsisten.

Terbukti dari design tampilan dan perpaduan warna yang sama di hampir semua bagian menu. Kemudian penggunaan warna yang sesuai dan proporsional serta tidak berlebihan.

 8. Control

Website tokobagus memiliki control yang baik, semua tombol dapat berfungsi dengan baik tidak ada tombol yang tidak berfungsi dan dapat digunakan dengan baik.

 9. Directness

Website tokobagus sudah memenuhi prinsip-prinsip directness. Misalnya pada saat user telah terdaftar menjadi anggota tokobagus, userdapat memiliki halaman pribadi didalam tokobagus yang disebut "tokosaya". 

10. EfficiencySaya rasa website tokobagus cukup efisien. Contohnya seperti

dalam penempatan menu yang ada di (kanan atas,kiri dan bawah) sudah

cukup proporsional sehingga lebih memudahkan pengguna untuk merujuk ke menu tanpa harus menggeserkan scroolbar. Ditambah lagi semua objek(produk) disusun berdarkan kategori sehingga memudahkan visitor dalam pencarian objek.

11. FamiliarityPrinsip familiarity sudah terpenuhi pada website tokobagus.

Contohnya seperti design logo tokobagus yang simple dan unik pada halaman website tersebut membuat para visitor menjadi familiar.

Familiarity

12. Flexibility

Prinsip flexibility sudah terpenuhi pada website tokobagus. Contohnya seperti rancangan pada websitenya sudah diatur dan disesuaikan untuk kemudahan para visitor, supaya para visitor website tokobagus dapat melakukan transaksi dengan mudah jika berkunjung ke situs tersebut.

13. Forgiveness

Website ini sudah menerapkan prinsip forgiveness. Yaitu dengan cara website tokobagus menyediakan kolom bantuan sehingga memudahkan website tersebut dalam penaganan kesalahan.

 

Forgiveness

14. ImmersionWebsite tokobagus sudah mengandung prinsip immersion. Dilihat

dari tampilan awal pada saat pertama kali diakses, sudah langsung menampilkan halaman untuk promosi produk, sehingga para visitor dapat langsung melihat barang yang ingin dia beli.

15. ObviousnessWebsite tokobagus sudah memunuhi aspek obvious, karena para

visitor dapat dengan mudah mengetahui dan memahami apa yang akan dilakukan pada saat melihat tampilan di web tersebut.

16. OperabilitySelain website tokobagus dapat dioperasikan atau diakses lewat PC

maupun laptop dan website tokobagus juga menyediakan versi mobile bagi para pengguna yang ingin mengakses lewat handphone.

  17. Perceptibility

website tokobagus telah memenuhi prinsip perceptibility. Hal ini dikarenakan dengan melihat halaman website user akan cepat memahami danberadapatasi dengan website tersebut .18. Predictability

Saya rasa tokobagus telah menerapkan aspek predictability, contohnya seperti website tokobagus telah memperhitungkan secara matangdengan menyediakan fitur tokosaya yang diperuntukan untuk para member yang ingin memasang iklan serta mendagangkan produk jualannya, sehinggamemudahkan dalam proses transaksi.

                                                                Predictability

 19. Recovery

Website ini sudah dapat recovery bila terjadi kesalahan. Misalnyasaat User ingin login di tokobasgus bila belum mendaftar sebagai memberdi website tersebut maka akan muncul validasi “Anda belum terdaftar”.

                                                             Recovery

20. Responsiveness

Website tokobagus memiliki respon yang baik terhadap user, hampirsemua tool dan tombol ketika di klik dapat memberikan respon balik terhadap user.

21. Safety

Dalam hal ini website tokobagus sudah menerapkan prinsip safety yaitu dengan cara website menyediakan ketentuan-ketentuan dan tips caraaman bertransaksi pada websitenya sehingga memberikan pengetahuan dan keamanan tentang tata cara bertransaksi. 

                                                            Safety

BAB III

3.1 Kelebihan Website TokoBagus :1. Tampilan halaman website konsisten dengan pengaturan warna

dan backgroundnya.2. Beritanya selalu diperbarui.3. Setiap menu saling terhubung dengan link yang tersedia.4. Memiliki sifat-sifat informasi yang baik sehingga memudahkan

user .5. Memiliki konten yang menarik serta penjelasan secara

mendetail.6. Memiliki fitur kontak dan kolom pencarian.7. Memiliki fitur sitemap yang memudahkan user mengetahui

konten-konten dari website tersebut.8. Terdapat menu login pengguna.

3.2 Kekurangan Website TokoBagus :1. Memiliki banyak link untuk menu atau konten yang sama.2. Navigation bar hanya terdapat pada halaman utama web, jika

memasuki salah satu menu di bagian kiri, maka untuk kembali user bisa memilih  menu home di pojok kiri atas halaman.

3. Sulit untuk menemukan halaman atau fasilitas forum tanya jawab (FAQ).

4. Tidak adanya fitur ratting serta kebebasan berkreasi didalamnya.

4.3 Saran untuk Website TokoBagus :1. Seharusnya website ini menyediakan fitur alih bahasa pada

menu utama agar memudahkan semua user untuk mengakses website tersebut.

2. Toko bagus akan terlihat lebih baik apabila terdapat wide space untuk mengistirahatkan mata para pembaca.

3. Seharunya terlihat adanya aktifitas jual beli atau diskusi antara penjual dan pembeli agar kelihatan lebih menyakinkan.

 

DAFTAR PUSTAKA

1. 2013. ‘Website toko bagus’ (online), (http://www.tokobagus.com/, diakses pada tanggal 7 Oktober 2013).

2. http://jurnal.sttgarut.ac.id/index.php/algoritma/article/view/50

3. http://en.wikipedia.org/wiki/User_interface_design