Bab ii perancangan e-commerce

8/17/2019 Bab ii perancangan e-commerce

1/30

BAB II

TINJAUAN PUSTAKA

2.1 Internet

Internet ( Interconnected Network ) terbentuk jaringan-jaringan

komputer yang saling terkoneksi satu sama lain. Internet

memungkinkan orang-orang atau perusahaan-perusahaan di seluruh

dunia untuk saling berkomunikasi satu sama lain secara efektif dan

murah. Dengan kata lain seseorang yang memiliki akses internetdapat berkomunikasi langsung dengan seseorang yang lain, membuat

informasi yang bermanfaat bagi orang lain, menemukan informasi-

informasi yang disediakan orang lain atau menjual dan membeli

produk-produk tertentu dengan biaya yang minimum dengan jaringan

yang terhubung secara global (Mcleod dan Schell, !!").

Menurut #umdiana dan Indrayani ( !!$), dalam

perkembangannya, internet mempunyai nilai bisnis antara lain %

• Menghasilkan pendapatan baru dari penjualan on-line.• Mengurangi biaya transaksi melalui penjualan on-line dan

dukungan pelanggan.• Menarik pelanggan baru melalui iklan dan pemasaran website

serta penjualan on-line.• Meningkatkan loyalitas pelanggan saat ini melalui perbaikan

dan dukungan.

Secara umum terdapat beberapa manfaat yang dapat diperolehapabila seseorang mempunyai akses ke internet. &erikut ini sebagian

dari apa yang tersedia di internet.• Informasi untuk kehidupan pribadi% kesehatan, rekreasi,

berbelanja, mencari informasi riset serta berita-berita terbaru,

melakukan transaksi-transaksi perbankan on-line , rohani, sosial

dan lain-lain.

'


2/30

• Informasi untuk kehidupan akademik, professional atau pekerja%

sains teknologi, perdagangan, saham, berita bisnis, asosiasiprofesi, asosiasi bisnis, berbagi forum komunikasi, diskusi-

diskusi ilmiah dan lain-lain. Satu hal yang paling menarik ialah

keanggotaan internet tidak mengenal batas negara, ras kelas

ekonomi, ideologi atau faktor-faktor lain yang biasanya dapat

menghambat pertukaran.


3/30

2.2 E-commerce2.2.1Defnisi E-commerce

. E-commerce merupakan suatu istilah yang sering

digunakan atau didengar saat ini yang berhubungan dengan

internet, dimana tidak seorangpun yang mengetahui jelas

penegertian dari e-commerce tersebut. &erikut akan dipaparkan

pengertian e-commerce menurut para ahli %

*erdagangan elektronik atau yang disebut juga e-commerce,

adalah penggunaan jaringan komunikasi dan komputer untuk

melaksanakan proses bisnis. *andangan populer dari e-

commerce adalah penggunaan internet dan komputer dengan

bro+ser eb untuk membeli dan menjual produk (Mcleod dan

Schell, !!")Menurut Vermaat ( ! ) E-commerce atau kependekan dari

electronic commerce (perdagangan secara elektronik),

merupakan transaksi bisnis yang terjadi dalam jaringan

elektronik, seperti internet. Siapapun yang dapat mengakseskomputer, memiliki sambungan ke internet, dan memiliki cara

untuk membayar barang-barang atau jasa yang mereka beli,

dapat berpartisipasi dalam e-commerce.Menurut ong ( ! !) pengertian dari electronic commerce

adalah pembelian, penjualan dan pemasaran barang serta jasa

melalui sistem elektronik. Seperti radio, tele isi dan jaringan

komputer atau internet.."

.$ /adi pengertian e-commerce adalah proses transaksi jual

beli yang dilakukan melalui internet dimana website digunakan

sebagai +adah untuk melakukan proses tersebut..0

2.7 2.2.2 Jenis-jenis E-commerce.' Menurut #idayat ( !!'), E-commerce dibedakan menjadi

beberapa jenis berdasarkan karakteristiknya yaitu %. &usiness to &usiness (& &)

. &usiness to &usiness memiliki karakteristik %


4/30

!

• Trading partners yang sudah saling mengetahui dan antara

mereka sudah terjalin hubungan yang berlangsung cukuplama. Informasi yang dimiliki hanya ditukar dengan partner

tersebut.• *ertukaran data dilakukan secara berulang-ulang dan berkala

dengan format data yang telah disepakati bersama.• Salah satu pelaku tidak harus menunggu rekan mereka

lainnya untuk mengirimkan data.• Model yang umum digunakan adalah peer to peer , dimana

processing intelligence dapat didistribusikan di kedua pelakubisnis.

. !. &eberapa contoh e-commerce dengan jenis Business to

Business (& &) adalah alibaba.com, ecpla1a.net, ecrobot.com,

foreign-trade.com dan sebagainya. *ada 2ambar . adalah

contoh halaman interface e-commerce jenis & & alibaba.com.

.2.13 Gambar 2.1 Conto E-commerce Jenis B2B a!ibaba."om

2.1#

. Business to Consumer (& 3)

. $ Business to Consumer memiliki karakteristik %• 4erbuka untuk umum, dimana informasi disebarkan secara

umum pula dan dapat diakses secara bebas.• Ser is yang digunakan bersifat umum, sehingga dapat

digunakan oleh orang banyak. Sebagai contoh, karena sistem

+eb sudah umum digunakan maka service diberikan dengan

berbasis +eb.


5/30

• Ser is yang digunakan berdasarkan permintaan. *rodusen

harus siap memberikan respon sesuai dengan permintaankonsumen.

• Sering dilakukan sistem pendekatan client-server .

. 0 &eberapa contoh e-commerce dengan jenis Business to

Consumer (& 3) adalah ama1on.com dan ebay.com. pada

2ambar . adalah contoh halaman interface e-commerce jenis

& 3 ebay.com.. 5

2.1$ Gambar 2.2 Conto E-commerce Jenis B2C eba%."om

. Consumer to Consumer (3 3)

. Dalam 3 3 seorang konsumen dapat menjual secara

langsung barangnya kepada konsumen lainnya, atau bisa

disebut juga orang yang menjual produk dan jasa ke satu sama

lain. 3ontohnya adalah ketika ada perorangan yang melakukan

penjualan di classi ed ads (misalnya, +++.classi6ed !!!.com )

http://www.classified2000.com/http://www.classified2000.com/


6/30

dan menjual properti rumah hunian, mobil, dan sebagainya.

Mengiklankan jasa pribadi di internet serta menjual

pengetahuan dan keahlian merupakan contoh lain 3 3.

Sejumlah situs pelelangan memungkinkan perorangan untuk

memasukkan item-item agar disertakan dalam pelelangan.

7khirnya, banyak perseorangan yang menggunakan internet

dan jaringan organisasi untuk mengiklankan item-item yang

akan dijual atau juga mena+arkan aneka jasa.. !

. !


7/30

". Customer to Business (3 &). Customer to Business adalah model bisnis dimana

konsumen (indi idu) menciptakan nilai, dan perusahaan

mengkonsumsi nilai ini. Sebagai contoh, ketika konsumen

menulis re ie+, atau ketika konsumen memberikan ide yang

berguna untuk pembangunan produk baru, maka indi idu ini

adalah yang menciptakan nilai bagi perusahaan, jika

perusahaan tersebut mengadopsi inputnya. Sebagai contoh,

*riceline.com merupakan situs yang memungkinkan seseorang

menjual barang kepada perusahaan. Dalam hal ini, internet

dapat digunakan sebagai sarana negosiasi..

2.2# 2.2.3 &an'aat E-commerce Da!am D(nia Bisnis. $ Manfaat dalam menggunakan E-commerce dalam suatu

perusahaan sebagai sistem transaksi adalah %• Dapat meningkatkan market e"posure (pangsa pasar)

. 0 4ransaksi on-line yang membuat semua orang di seluruh

dunia dapat memesan dan membeli produk yang dijual hanya

dengan melalui media computer dan tidak terbatas jarak dan

+aktu.• Menurunkan biaya operasional ( operating cost )

. 5 4ransaksi E-commerce adalah transaksi yang sebagian

besar operasionalnya deprogram di dalam komputer sehingga

biaya-biaya seperti sho+room, beban gaji yang berlebihan, dan

lain-lain tidak perlu terjadi.• Melebarkan jangkauan ( global reac# )

. ' 4ransaksi on-line yang dapat diakses oleh semua orang di

dunia tidak terbatas tempat dan +aktu karena semua orang

dapat mengaksesnya hanya dengan menggunakan media

perantara komputer.• Meningkatkan customer lo$alt$

. Ini disebabkan karena sistem transaksi e-commerce

menyediakan informasi secara lengkap dan informasi tersebut

dapat diakses setiap +aktu selain itu dalam hal pembelian juga


8/30

"

dapat dilakukan setiap +aktu bahkan konsumen dapat memilih

sendiri produk yang dia inginkan.. !

• Menigkatkan suppl$ management . 4ransaksi e-commerce menyebabkan penge6sienan biaya

operasional pada perusahaan terutama pada jumlah karya+an

dan jumlah stok barang yang tersedia sehingga untuk lebih

menyempurnakan penge6sienan biaya tersebut maka sistem

suppl$ management yang baik harus ditingkatkan..

2.33 2.2.# &an'aat E-commerce (nt() Pe!an**an. " E-commerce memungkinkan pelanggan untuk berbelanja

atau melakukan transaksi selama " jam sehari dari hampir setiap

lokasi dimana konsumen itu berada. *elanggan juga dapat memiliki

banyak pilihan barang yang ingin dibeli pada saat mengunjungi situs

dan melakukan perbandingan harga dengan perusahaan lain. *ada

saat membeli barang-barang secara online , pelanggan tidak perlu

mengantri untuk mendapatkan barang. 2ambaran ringkas

keuntungan e-commerce sebagai berikut %• 8fektif % konsumen dapat memperoleh informasi tentang produk

atau jasa yang dibutuhkannya dan berinteraksi dengan cara

yang cepat dan murah.• 7man secara 6sik % konsumen tidak perlu lagi mendatangi toko

secara langsung dan ini mungkin konsumen dapat bertransaksi

dengan aman, sebab daerah-daerah tertentu mungkin sangat

berbahaya jika berkendaraan dan memba+a uang tunai dalam jumlah besar.

• 9leksibel % konsumen dapat melakukan transaksi dari berbagai

lokasi, baik dari rumah, kantor, +arnet atau tempat lainnya.

2.35 2.2.+ Proses Pemba%aran E-commerce

. 0 *roses pembayaran e-commerce cukup rumit

karena banyaknya jenis alternatif debit dan kredit serta

lembaga keuangan dan perantara yang menjadi bagian dari


9/30

$

proses tersebut di antara proses pembayaran tersebut antara

lain %

. *roses pembayaran +eb % sistem pembayaran & 3.

. 894 ( Electronic %und Transfer ) contoh % 74M, 8*:S, atau *:S.

. *roses pembayaran dalam sistem ini memakai metode

pembayaran, yakni dengan transfer, 3:D ( cas# on deliver$ ) dan

kartu kredit (#umdiana dan Indriyani, !!$).

2.37 2.2., ambatan Im !ementasi E-commerce

. ' &elum terbentuknya #ig# trust societ$ atau tingkatkepercayaan yang tinggi terhadap situs-situs belanja online

yang ada. Ini disebabkan karena masih banyaknya penipuan-

penipuan yang terjadi pada saat konsumen berbelanja secara

online. *ada umumnya harga tidak bisa dita+ar lagi. 4idak

seperti pasar tradisional proses transaksi melalui proses ta+ar-

mena+ar. Masih sangat sedikit SDM yang memahami dan

menguasai dengan baik dan benar konsep dan implementasiteknologi e-commerce . /asa pengiriman pos masih memerlukan

pembenahan, sehinggan proses pengiriman barang tidak terlalu

lama sampai kepada tangan pembeli atau konsumen.

2.3 User Centered Design2.3.1 Pengertian User Centered Design

2.39 UCD ( User Centered Design ) merupakan paradigma baru dalam

pengembangan sistem berbasis web. Menurut Shahriar (2003) UCDdide!inisikan sebagai “efficiency” The practice of designing a product so that

users can perform required operation, service, and supportive tasks with a

minimum of stress and maximum of efficiency. "eran#angan $ang berbasis pada

kebutuhan pengguna UCD! adalah istilah $ang digunakan untuk

menggambarkan !il%s%!i peran#angan. &%nsep dari UCD adalah pengguna

sebagai pusat dari pr%ses pengembangan sistem dan tu'uan si!at si!at k%nteks

dan lingkungan sistem semua didasarkan dari pengalaman pengguna.2.*0


10/30

0

2.*+ "rinsip $ang harus diperhatikan dalam UCD adalah,

+. -%kus pada pengguna

2.*2 "eran#angan harus berhubungan langsung dengan pengguna

sesungguhn$a atau #al%n pengguna misaln$a melalui "nterview survey .

u'uann$a adalah untuk memahami k%gnisi karakter dan sikap pengguna serta

karakteristik.. /kti itas utaman$a men#akup pengambilan data analisis dan

integrasin$a ke dalam in!%rmasi peran#angan dari pengguna tentang

karakteristik tugas lingkungan teknis atau %rganisasi.2.*3

2.**2. "eran#angan terintegrasi

2.*1 "eran#angan harus men#akup antarmuka pengguna sistem bantuan

(#ara penggunaan) dan dukungan teknis seperti kebutuhan perangkat lunak dan

perangkat keras $ang dibutuhkan.

3. Dari awal berlan'ut pada penggu'ian pengguna

2.* Satu satun$a pendekatan $ang sukses dalam peran#angan sistem

$ang berpusat pada pengguna adalah se#ara empiris dibutuhkan %bser asi

tentang kelakuan pengguna e aluasi umpan balik $ang #ermat wawasan

peme#ahan terhadap masalah $ang ada dan m%ti asi $ang kuat untuk mengubah

ran#angan.

*. "eran#angan interakti!.

2.* Sistem $ang sedang dikembangkan harus dide!inisikan diran#ang

dan melakukan beberapa kali test. 4erdasarkan hasil test kelakuan dari !ungsi

maka 'uga akan dapat ditarik kesimpulan mengenai tingkat keberhasilan pr%duk

(aplikasi) tersebut.2.*5

2.3.2 Prinsip User centered Design

2.*9 Menurut /meri (2003) k%nsep utama dari UCD adalah “"n user

user#centered design, the users are the center focus.” Maksud dari pern$ataan di

atas adalah tu'uan si!at si!at si!at k%nteks penguna si!at k%nteks dan

lingkungan pr%duk semua didasarkan dari pengalaman penguna. Selan'utn$a


11/30

5

ditetapkan m%del peker'aan pengguna $ang akan didukung sistem sistem.

"rinsip6prinsip dalam meran#ang user interface adalah sebagai berikut ,

+. User fami$iarity mudah dikenali , menggunakan istilah $ang la7im digunakan

dan dikenali %leh pengguna se#ara umum misaln$a, untuk sistem perkant%ran

gunakan istilah $etters documents, fo$ders bukan directories, fi$e, identifiers .2. Consistency , &%nsisten dalam %perasi dan istilah $ang digunakan di seluruh

sistem sehingga tidak membingungkan.3. %inima$ surprise idak membuat pengguna terke'ut , 8perasi $ang ter'adi

dapat diprediksi %leh pengguna sesuai dengan perintah $ang ada.*. &ecovera'i$ity pemulihan , &ecovera'i$ity ada dua ma#am $aitu ,

confirmation of destructive action (k%n!irmasi terhadap aksi $ang merusak) atau

ketersediaan !asilitas pembatalan ( undo ).1. User guidance bantuan , /dan$a #ara penggunaan sistem sehingga pengguan

lebih mudah dalam men'alankan sistem.

2.10 Mengenai prinsip dari k%nsep User Centered Design se#ara

spesi!ik dalat dilihat pada ambar 2.3 dibawah ini.


12/30

'

2.1+

2.52 Gambar 2.3 Prinsip Perancangan UCD (Ameri, 2003)2.53

2.3.3 Aturan dalam UCD

2.1* erdapat beberapa aturan $ang harus dilakukan untuk

menerapkan met%de User Centered Design pada sistem $ang akan ber'alan. :al

ini akan membuat peran#angan pengembangan dan pembuatan sistem untuk

memastikan bahwa pr%duk hasiln$a akan tepat seperti harapan user . /turan

dalam UCD ( User Centered Design ) melputi sebagai berikut ,

+. "erspekti!

2.11 "engguna selalu benar. ;ika terdapat masalah dalam penggunakan

sistem maka masalah ada pada sistem dan bukan pengguna.

2.1


13/30

2.


14/30

!

3. S%lusi peran#angan $ang dihasilkan*. = aluasi peran#angan terhadap kebutuhan pengguna. (


15/30

tidak terstruktur dan dapat dilakukan melalui tatap muka maupun menggunakan

alat k%munikasi seperti telep%n.

*. Task %ode$$ing

2. * "r%ses menganalisis dan menggambarkan bagaimana pengguna

melaksanakan tugas tugasn$a pada sistem apa sa'a dapat $ang dilakukan dan

hal hal apa sa'a $ang perlu diketahui %leh pengguna. Memeriksa tugas tugas

pengguna untuk mengetahui dengan baik apa $ang dibutuhkan pengguna dari

interface dan bagaimana pengguna akan menggunakann$a.

+. rototyping

2. 1 rototipe adalah suatu pr%ses untuk membangun s%lusi peran#angan

$ang k%ngkrit $ang berawal dari pengguna dan kebutuhan pengguna. Mewakili

m%del pr%duk $ang akan dibangun mensimulasikan struktur !ungsi%nalitas

atau %perasi sistem. Dimungkinkan untuk mengimplementasikan sembarang

!ungsi%nalitas $ang riil. Dapat berupa -ow#fide$ity atau high#fide$ity. Memberi

gambaran tentang keseluruhan pr%duk atau bagian bagiann$a.2.

2. Prinsip&prinsip Dalam Desain Website2. Menurut Ut%m% (20+3) untuk membangun we'site $ang baik

peran#ang harus memperlihatkan prinsip prinsip $ang ada. /dapun prinsip

prinsip $ang harus diperhatikan antara lain ,

+. &eseimbangan2. 5 &eseimbangan adalah hasil susunan satu atau lebih elemen dari

desain $ang sama antara satu dengan $ang lainn$a. /da dua 'enis keseimbangan

$aitu ,• &eseimbangan Simetris (-%rmal)

2. 9 &eseimbangan simetris mempun$ai elemen $ang sama b%b%tn$a

pada dua sisi dari garis ertikal ima'iner pada halaman we'site . ata letak

simetris ini menghasilkan desain $ang statis dan berkesan d%rmal sederhana

dan mudah dalam pembuatann$a tetapi memb%sankan dan kurang menarik.

2.50


16/30

• &eseimbangan /simetris (in!%rmal)2.5+ &eseimbangan asimetris mempun$ai elem $ang tidak sama b%b%tn$a

pada dua sisi dari garis ertikal ima'iner halaman we'site . ata letak

desainn$a men'adi lebih dinamis untuk memakai ruang $ang masih k%s%ng.2. &%ntras2.52 &%ntras mudah dipahami $aitu dengan melihat dari dua %b'ek $ang

berlainan sehingga membuat kesan tampilan desain $ang men%n'%l dan menarik

perhatian. "emberian k%ntras pada suatu %bek haruslah p%siti! karena 'ika

k%ntras $ang diberikan negati! %b'ek tersebut men'adi samar samar atau tidak

terlihat terserap %leh 'ackground .3. &%nsistensi2.53 &%nsistensi dalam membuat pengun'ung merasa n$aman karena

men'ela'ah situs lebih mudah dan tidak membingungkan. &etika pengun'ung

membuka suatu halaman situs $ang k%nsisten dia langsung tahu kemana harus

pergi dan dia tahu berada dimana. &%nsistensi dapat diterapkan pada margin

tata letak hurus warna dan terutama na igasi. Dalam pembuatan na igasi harus

sama antara suatu halaman dengan halaman lain. Dalam penggunaan hurus

sebaikn$a gunakan satu sampai tiga 'enis sa'a. Sedangkan dalam penggunaanwarna gunakan tiga sampai empat warna.

*. >uang k%s%ng2.5* >uang k%s%ng biasan$a disebut ruang negati! suau istilah $ang

menggambarkan suatu ruang k%s%ng terbuka diantara elemen elemen desain.


17/30

biasan$a terkesan #eria dan men$enangkan seperti %range kuning hi'au. ?arna

perusahaan biasan$a bersih seperti biru putih da abu abu. ?arna anak biasan$a

terkesan #eria dan men%n'%l seperti merah kunng dan biru (warna primer).

+. /spek "sik%l%gis antara lain ,• :indari pemakaian warna $ang ta'am dan simultan. ?arna merah 'ingga

'uning dan hi'au dapat dilihat bersama sama tetapi #$an biru dan merah

tidak dapat dilihat se#ara serempak dengan mudah.• :indari warna biru murni untuk teks garis tipis dan bentuk $ang sangat

ke#il. "englihatan tidak disetting untuk memandang sesuatu $ang terperin#i

ta'am serta bergel%mbang pendek.• :indari warna berdekatan $ang han$a berbeda dalam warna biru.• "erlu pengaturan pen#aha$aan di dalam ruangan karena warna akan

berubah ketika #aha$a berubah.• :indari penempatan warna merah dan hi'au se#ara berseberangan pada

tampilan skala besar gunakan warna biru dan kuning.2. /spek perseptual tidak semua warna bisa diba#a se#ara umum warna latar

belakang senderung lebih gelap.3. /spek k%gniti! $aitu ,

• ;angan menggunakan warna $ang berlebihan• ?arna $ang sama membawa pesan $ang berbeda• Urutan warna sesuai dengan p%sisi prektraln$a• &e#erahan dan saturasi akan menarik perhatian• ?aspadalah terhadap manipulasi warna se#ara tak linier pada la$ar tampilan

dan bentuk #etakan.• /dapun !ungsi warna adalah sebagai ibrasi pada suatu desain tertentu

sehingga dapat mempengaruhi siapa sa'a $ang melihatn$a. (Ut%m% 20+3)2.5

2.


18/30

"

2.5.2 ip!gra*i

2.59 ip%gra!i adalah seni dalam huru! $ang meliputi pemilihan huru!

penentuan ukuran $ang tepat dimana teks dapat diputus spasi 'arak dan

bagaimana teks dapat dengan mudah diba#a. /dapun !akt%r $ang mempengaruhi

dalam hal tip%gra!i adalah sebagai berikut ,

+. "engaruh ;enis huru! 2.90 ;enis huru! sangat ban$ak tetapi se#ara garis besar dapat

dikateg%rikan men'adi lima $aitu ,a. Seri!

2.9+ ;enis huru! ini merupakan 'enis huru! tradisi%nal #irin$a mempun$ai

@kaki@ atau @ek%r@ misaln$a imes Aew >%man aram%nd "alatin%.

&arena bentuk huru!n$a $ang berkaki membuat garis tidak kelihatan ini

memudahkan mata pemba#a untuk menelusuri dan memba#a teks. ;adi huru!

ini #%#%k dipakai untuk teks $ang pan'ang dengan 'arak spasi $ang sedikit.

4entuk huru! ini memberikan kesan !%rmal intelektual anggun dan

k%nser ati!. C%#%k dipakai untuk %rganisasi pemerintahan pendidikan dan

perusahaan. 4erikut adalah #%nt%h dari !%nt 'enis seri! ,

2.#2 imes +e -!man2.93 Garamond

2./# P!atino b. Sans Seri!

2.91 Sans seri! $ang berarti tidak berkaki (bahasa "eran#is) misal 'enis

huru! ini adalah :el eti#a /rial erdana dan / ant arde. ;enis ini terlihat

sederhana dan tidak !%rmal sehingga #%#%k untuk 'udul dan sub 'udul. ;ika

ingin menggunakan 'enis ini untuk teks utama imbangi dengan memberikan

'arak spasi $ang agak lebar pada teks. 4erikut adalah #%nt%h dari !%nt 'enis

Sans Seri!.2.96 Arial Black

2.97 Verdana

2./$ A0ant Gra e#. Skrip

2.99 ;enis ini men$erupai tulisan tangan. ;enis ini 'uga sering disebut

kursi!. Dan 'angan terlalu ban$ak digunakan. 4entuk huru! ini memberikan

kesan keagungan sentuhan pribadi dan kepuasan. 4erikut adalah #%nt%h

huru! dengan 'enis skrip.


19/30

$

. !! &rush Script

2.1 1 K(enst!er S"ri td. Dek%rati! 2.+02 ;enis huru! $ang mempun$ai desain $ang rumit sesuatu $ang baru

dan men#iptakan suasana hati $ang membangkitkan em%si. ;adi 'angan

sampai digunakan untuk teks $ang pan'ang atau lebih dari isi halaman.

unakanlah untuk 'udul dan gra!ik namun 'angan terlalu ban$ak. 4erikut

adalah #%nt%h 'enis !%nt dek%rati!.. ! S48;3I<

e. M%n%spa#e2.+0* ;enis huru! $ang mempun$ai 'arak dan lebar sama pada setiap huru!

misaln$a #%urier m%n%spa#e.2.105 Courier New

2. "enggunaan :uru! Dalam Desain ?eb2.+0 /da beberapa tips agar huru! dapat diba#a dengan mudah dilihat

$aitu ,• 4uatlah k%ntras $ang tinggi antara teks dengan latar belakang atau antara

teks dengan gambar.• "ilihlah 'enis huru! $ang mudah diba#a biasan$a 'enis seri! dan sans seri!.

;enis huru! dek%rati! atau kursi! lebih sulit untuk diba#a biasan$a dipakai

untuk 'udul itupun harus berukuran besar.• erkadang 'enis huru! sans seri! mudah diba#a daripada seri! ketika karakter

$ang digunakan berukuran ke#il.• /turlah $eading dan kerning . -eading adalah spasi antara dua baris teks

sedangkan kerning adalah 'arak spasi antar huru!.• unakan huru! standar ang terdapat pada semua k%mputer atau 'rowser

seperti imes Aew >%man hel eti#a /rial dan Verdana. ;ika mengingatkan 'enis huru! lain $ang unik untuk keindahan 'adikan huru! tersebut sebagai

gra!ik (Ut%m% 20+3).2.+0

2.5.3 Layout ( ata eta/)2.+05 -ayout adalah pr%ses penataan dan pengaturan teks atau gra!ik pada

halaman. -ayout meliputi pen$usunan pembagian tempat dalam suatu halaman

pengaturan 'arak spasi pengel%mp%kan teks dan gra!ik serta penekanan pada suatu

bagian tertentu. Se#ara umum halaman web memakai lima 'enis $ayout dan pemilihan


20/30

0

la$%ut $ang disesuaikan dengan 'enis in!%rmasi $ang ditampilkan. /dapun lima 'enis

$ayout tersebut diantaran$a,a. M%del -ayout Top "ndex2.+09 4iasan$a digunakan untuk menampilkan llink $ang ban$ak ke situs

lain seperti search engine.

2.110 %!del !p nde2.111 anner atau /lan

2.112 Da*tar si atau

+a igasi2.113 !d4 atau !nten

( si)2.11 ain & lain

2.115

2.11" Gambar 2.5 %!del a4!ut !p nde (Ut!m!, 2013)2.11$

b. M%del -ayout ottom "ndex2.++5 4iasan$a m%del ini digunakan apabila isi dari halaman ban$ak

berhubungan dengan t%pik tunggal.

2.11# %!del !tt!m

nde2.120 anner atau

/lan2.121 Da*tar si atau

+a igasi2.122 !d4 atau

!nten ( si)2.123 ain & lain

2.12

2.125 Gambar 2." %!del a4!ut !tt!m nde (Ut!m!, 2013)2.12"

#. M%del -ayout -eft "ndex

2.+2 4iasan$a digunakan untuk la$ar dengan res%lusi $ang lebar sehinggamudah dalam pen$ediaan na igasi tanpa menimbulkan keka#auan pen$a'ian

in!%rmasi pada halaman utama.

2.12 %!del !tt!m nde2.12# Da*ta

r si

2.130 anner atau

/lan2.132 Da*tar si

atau +a igasi

2.13 !d4 atau


21/30

5

!nten ( si)2.13" ain & lain

2.13$2.13 Gambar 2.$ %!del a4!ut e*t nde (Ut!m!, 2013)

2.13#

d. M%del -ayout /pi$t 2.+*0 "ada m%del la$%ut ini halaman akan ter'aga keseimbangann$a.

2.1 1 %!del !tt!m nde

2.1 2

Da*tar si

2.1 3 anner

atau /lan2.1

Da*tar si2.1 " Da*tar

si atau +a igasi

2.1 ain & lain2.1 #

2.150 Gambar 2. %!del a4!ut 6pilt nde (Ut!m!, 2013)e. M%del -ayout 0$ternating "ndex2.+1+ 4iasan$a digunakan untuk halaman $ang ban$ak menampilkan

gra!ik !%t% dan pr%duk $ang disertai dengan teks berupa keterangan harga

'umlah dan lain lain.

2.152 %!del !tt!m nde2.153 e/s 7

da*tar isi

2.15 a

nner atau /lan2.155 Gamb

ar

2.15" Da

*tar isi 7 na*igasi2.15$ ain & lain

2.15 Gambar 2.# %!del a4!ut Alternating nde (Ut!m!, 2013)2.+19

2.1"0


22/30

'

2." Pengu8ian 'ebsite

2.+ + "engu'ian website adalah sederetan pengu'ian $ang dilakukan

pada website untuk memastikan apakah sistem ber'alan sesuai dengan

peren#anaan atau tidak. u'uann$a $aitu untuk men'alankan suatu pr%gram

dengan data $ang telah dipilih untuk men#ari kesalahan 'ika memang ada

("ressman +99 ).2.1"2

2.163 2.".1 Black Box Testing !unctional Testing

2.+ * "engu'ian !ungsi%nal atau pengu'ian k%tak hitam '$ack#'ox

testing! merupakan pendekatan pengu'ian $ang u'in$a diturunkan dari

spesi!ikasi pr%gram atau k%mp%nen. Sistem merupakan k%tak hitam $ang

perilakun$a han$a dapat ditentukan dengan mempela'ari input dan %utput $ang

berkaitan. Aama lain untuk #ara ini adalah pengu'ian !ungsi%nal karena pengu'i

han$a berkepentingan dengan !ungsi%nalitas dan bukan implementasi perangkat

lunak. ambar 2.+0 mengilustrasikan m%del sistem $ang diasumsikan pada

pengu'ian k%tak hitam.

2.+ 12.1"" Gambar 2.10 Pengu8ian Black Box

2.1"$ "endekatan ini dapat 'uga diterapkan pada sistem $ang disusun

sebagai !ungsi atau %b'ek. ;ika %utput bukan merupakan $ang diramalkan berarti u'i

tersebut telah berhasil mendeteksi masalah dengan perangkat lunak tersebut.

2.+ 5

2.16"


23/30

2.6.2 Usability Testing 2.6.2.1 Pengertian Usability Testing

2.+ 0 Menurut Dumas B >edish (+999) usa'i$ity dapat digunakan untuk mengukur tingkat pengalaman pengguna ketika berinteraksi dengan pr%duk sistem.

Se#ara umum usa'i$ity menga#u kepada bagaimana pengguna bisa mempela'ari dan

menggunakan pr%duk untuk memper%leh tu'uann$a dan seberapa puas pengguna

tersebut terhadap penggunann$a. Usa'i$ity adalah salah satu !akt%r kualitas $ang

mewakili suatu 'awaban dari sistem interaksi manusia dengan tekn%l%gi $ang digunakan

(Matera >i77% dan Carughi 200 ).2.+ + Menurut Aielsen (+999) k%nsep usa'i$ity testing ini diad%psi dari

ilmu teknik berbi#ara mengenai hubungan antara manusia dengan alat ( man#machine

interface ) dimana memungkinkan siapa sa'a dengan pengetahuan tersebut dapat

meng%perasikan suatu perangkat tekn%l%gi dengan mudah. Usa'i$ity testing merupakan

suatu teknik $ang digunakan untuk menge aluasi se'auh mana pr%duk memenuhi

keinginan pelanggan. Man!aat dilakukann$a usa'i$ity testing antara lain ,• Membuat #atatan ben#hmark mengenai usa'i$ity untuk masa depan.• Meminimalkan bia$a la$anan dan dukungan untuk kerusakan.• Meningkatan pen'ualan dan kemungkinan pen'ualan berulang.• "r%duk $ang usa'$e membuat k%nsumen puas.• Mendapatkan keuanggulan k%mpetiti!.• Meminimalkan resik%.2.+ 2

2.".2.2 U/uran ing/at Usability

2.+ 3 Menurut Dumas B >edish (+999) usa'i$ity menga#u kepada

bagaimana pengguna bisa mempela'ari dan menggunakan pr%duk untuk

memper%leh tu'uann$a dan seberapa puaskah mereka terhadap penggunaann$a.2.+ * De!enisi usa'i$ity menurut


24/30

!

2. =!isiensi ( 1fficiency ) dide!inisikan sebagai sumber da$a $ang dikeluarkan guna

men#apai ketepatan dan kelengkapan tu'uan.3. Mudah diingat ( %emora'i$ity ) dide!inisikan bagaimana kemampuan pengguna

mempertahankan pengetahuann$a setelah 'angka waktu tertentu kemampuan

mengingat didapatkan dari peletakan menu $ang selalu tetap.*. &esalahan dan keamanan ( errors ) dide!inisikan berapa ban$ak kesalahan

kesalahan apa sa'a $ang dibuat pengguna. kesalahan $ang dibuat penggua

men#akup ketidaksesuaian apa $ang pengguna pikirkan dengan apa $ang

sebenarn$a disa'ikan %leh sistem.1. &epuasan ( satisfaction ) dide!inisikan kebebasan dari ketidakn$amanan dan

sikap p%siti! terhadap penggunaan pr%duk atau ukuran sub'ekti! sebagaimana

pengguna merasa tentang penggunaan sistem.

2.+ 1

2.".2.3 Pengu/uran Usability dengan Use #uestionnaire

2.+ Salah satu paket kuesi%ner $ang dapat digunakan untuk

mengukur usa'i$ity adalah US=. US= dapat men#akup 3 dimensi pengukuran

usa'i$ity $aitu e!isiensi e!ekri!itas dan kepuasan. 4eberapa penelitian $ang

sudah dilakukan menun'ukan bahwa keban$akan e aluasi inter!a#e menga#u pada tiga dimensi tersebut $aitu usefu$ness, satisfaction dan ease of use . iga

dimensi tersebut merupakan parameter $ang paling mudah diamati dan

dibandingkan hasiln$a 'uga harus menge aluasi lebih dari satu inter!a#e.

&uisi%ner dibuat dalam bentuk sk%r lima p%int dengan m%del skala $ikert untuk

pengukuran tingkat persetu'uan user terhadap statement hasil pengukuran

kemudian di%lah dengan met%da statistik deskripti! dan dilakukan analisis baik

terhadap masing masing parameter atau terhadap keseluruhan parameter. Usemerupakan salah satu paket kuisi%ner n%n k%mersial $ang dapat digunakan

untuk penelitian usabilit$ sistem.2.+ Menurut Aielsen (+993) usa'i$ity adalah atribut kualitas $ang

men'elaskan atau mengukur seberapa mudah penggunaan suatu antar muka

(interface ). &ata usa'i$ity @ 'uga meru'uk pada suatu met%de untuk

meningkatkan kemudahan pemakaian selama pr%ses desain. Usabilit$ diukur


25/30

dengan lima kriteria $aitu, $earna'i$ity, efficiency, memora'i$ity, errors, dan

satisfaction .2.+ 5 -earna'i$ity mengukur tingkat kemudahan melakukan tugas

tugas sederhana ketika pertama kali menemui suatu desain . 1fficiency mengukur

ke#epatan menger'akan tugas tertentu setelah mempela'ari desain tersebut.

%emora'i$ity melihat seberapa #epat pengguna mendapatkan kembali

ke#akapan dalam menggunakan desain tersebut ketika kembali setelah beberapa

waktu. 1rrors melihat seberapa ban$ak kesalahan $ang dilakukan pengguna

separah apa kesalahan $ang dibuat dan semudah apa mereka mendapatkan

pen$elesaian. /atisfaction mengukur tingkat kepuasan dalam menggunakan

desain.2.+ 9

2.$ !!ls dan %!del Pengembangan 6istem2.+50 /nalisis dan peran#angan terstruktur menampilkan suatu pendekatan

$ang sistematis untuk meran#ang dan membangun kualitas sistem k%mputer. Di

sepan'ang tahap analisis dan peran#angan analis dapat melan'utkan ke tahap demi

tahap mendapatkan umpan balik dari pengguna dan menganalisis peran#angan untuk

mendeteksi kesalahan. 8leh karena itu analis memiliki se'umlah perangkat lunak $angdpat digunakan untuk membimbing atau sebagai a#uan dalam pengembangan sistem

(&endall 2003).2.+5+ /da berbagai alat ( too$s) $ang dapat dipakai untuk melakukan

kegiatan analisis dan peran#angan suatu sistem. M%del analisis harus dapat men#apai

tiga sasaran utama $aitu menggambarkan apa $ang dibutuhkan %leh pemakai

memangun dasar dalam pembuatan desain perangakat lunak membatasi serangkaian

pers$aratan $ang dapat di alidasi ketika peragkat lunak dibangun ( ad'amudin 2001).2.+52

2.$.1 Diagram !nte/s

2.+53 Diagram k%nteks adalah diagram $ang terdiri dari suatu pr%ses

dan menggambarkan ruang lingkup dari suatu sistem. Diaram k%nteks

merupakan le el tinggi dari D-D $ang menggambrkan keseluruhan input ke

sistem atau keseluruhan %utput dari sistem. Diagram k%nteks akan memberikan

gambaran keseluruhan sistem. Suatu sistem dibatasi %leh 'undary (digambarkan


26/30

dengan garis terputus). Dalam diagram k%nteks han$a terdapat satu pr%ses dan

tidak b%leh terdapat st%re dalam diagram k%nteks.2.+5*

2.$.2 D9D ( Data !lo$ Diagra% )

2.+51 Diagram arus data ( data f$ow diagram ) atau D-D adalah suatu

gambaran gra!is suatu sistem $ang menggunakan se'umlah bentuk bentuk

simb%l untuk menggambarkan bagaimana data mengalir melalui suatu pr%ses

$ang saling berkaitan. D-D mungkin #ara paling alamiah untuk

mend%kumentasi pr%ses (M#le%d B S#hell 200*)2.+5 Diagram alir data atau D-D merupakan m%del dari sistem untuk

menggambarkan pembagian sistem ke m%dul $ang lebih ke#il. Salah satukeuntungan diagram aliran data adalah memudahkan pemakai atau user $ang

kurang menguasai bidang k%mputer untuk mengerti sistem $ang akan diker'akan

( ad'amudin 2001). Mengenai simb%l $ang digunakan untuk membuat D-D

dapat dilihat pada abel 2.+.2.1 $ abel 2.1 6imb!l dan eterangan pada D9D

2.+552.+59

2.$.3 :-D ( &ntity 'elations(i) Diagra% )2.+90 Diagram hubungan entitas ( 1ntity &e$ationship Diagram ) atau =>D

merupakan n%tasi gra!ik dari sebuah m%del data atau sebuah m%del 'aringan $ang

men'elaskan tentang data $ang tersimpan ( storage data ) dalam sistem se#ara abstrak

( ad'amudin 2001). Dalam pengertian lain =>D ( 1ntity &e$ationship Diagram ) adalah


27/30

mend%kumentasikan data perusahaan dengan mengidenti!ikasi 'enis entitas dan

hubungan (M#le%d dan S#hell 200*). Simb%l simb%l =>D dapat dilihat pada abel 2.2.

2.1#1 abel 2.2 6imb!l dan eterangan pada :-D

2.+922.+93

2. 6!*t are Pendu/ung2.+9* Di dalam pembuatan aplikasi e #%mmer#e dibutuhkan berma#am

ma#am 'enis dari sebuah s%!tware $ang digunakan antara lain ,2. .1 Pemr!graman P;P

2.+91 ":" ( persona$ homer page too$s ) merupakan kependekatan dari

kata 2ypertext preprocessor . ":" terg%l%ng sebagai perangkat lunak %pen

s%ur#e $ang diatur dalam aturan genera$ purpose $incences ( " ) dan terg%l%ng

sebagai bahasa pemr%graman $ang berbasis ser er ( server side scripting ).

"emr%graman ":" sangat #%#%k dikembangkan dalam lingkungan web karena

":" bisa diletakan pada s#ript : M atau sebalikn$a. ":" dikhususkan untuk

pengembangan web dinamis maksudn$a ":" mampu menghasilkan we'site

$ang se#ara terus menerus hasiln$a bisa berubah sesuai permintaan c$ient

br%wsern$a (Supriant% 2005).2.+9

2. .2 %46<

2.+9 M$SE merupakan perangkat lunak $ang terg%l%ng sebagai

D4MS ( Data'ase %anagement /ystem ) $ang si!atn$a open source . 3pen

/ource men$atakan bahwa perangkat lunak ini dilengkapi dengan source code


28/30

"

(k%de $ang dipakai untuk membuat M$SE ) selain itu k%de tersebut dapat

langsung di'alankan dalam sistem %perasi dan dapat diper%leh dengan #ara

mend%wnl%ad di internet se#ara gratis. M$SE tersedia pada beberapa p$atform

(?ind%ws UniF inuF) 'uga mendukung perintah SE . Sebagaimana

diketahui SE merupakan standar dalam pengaksesan 'asis data relasi%nal.

"engetahuan akan SE dapat memudahkan untuk menggunakan M$SE dan

dapat 'uga digunakan melalui aplikasi web (&adir 2005).2.+95

2. .3 C%6 ( Content *anage%ent +yste% )

2.+99 CMS adalah suatu alat $ang dapat memusatkan kemampuan teknisdan men$ebarkan kemampuan n%n teknis kepada angg%ta tim untuk membuat

meng%lah mengubah mengel%la dan mempublish se'umlah content we'site dengan

aturan pr%ses dan alur ker'a $ang sudah baku sehingga we'site dapat terlihat sesuai

keinginan (>esha 2001).2.200 CMS dapat diartikan sebagai suatu sistem maupun aplikasi $ang

digunakan untuk mengel%la isi (C%ntent) dari suatu we'site $ang memungkinkan para

author maupun content manager, $ang mungkin tidak memiliki kemampuan teknis

seperti : M ataupun bahasa pemr%graman lainn$a untuk meng create, mem%di!ikasi

menghapus dan mengel%la in!%rmasi pada we'site mereka. CMS memudahkan end user

untuk menambahkan #%ntent baru berupa artikel artikel. /rtikel ini biasan$a berupa

p$ain text, mungkin 'uga dengan markup language untuk mengindikasikan dimana

sumber sumber lainn$a seperti misaln$a gambar gambar harus diletakan. Sistem ini

kemudian menggunakan aturan aturan $ang mengatur artikel $ang dapat memisahkan

tampilan dari content . :al ini memberikan ban$ak keuntungan ketika user men#%ba

untuk melihat ban$ak artikel. /khirn$a sistem ini menambahkan artikel ke kumpulan

k%leksi k%leksi lainn$a untuk diterbitkan (&urniawan 2003).2.20+

2. . =ampp dan P;P%4Admin2.202 Gampp merupakan perangkat lunak $ang dapat di d%wnl%ad se#ara

gratis dan didalam perangkat lunak ini berisi kumpulan kumpulan beberapa perangkat

lunak $ang dibutuhkan antara lain , ":" /pa#he M$SE dan ":"M$/dmin

memberikan kemudahan dalam pengeperasiann$a dan hampir semua web h%sting


29/30

$

men$ediakan ":"M$/dmin untuk para pen$ewa irtual h%st (Supriant% 2005).

"nterface penggunaan ":"M$/dmin dapat dilihat pada ambar 2.++.2.203

2.20 Gambar 2.11 ampilan ,nter-ace Pr!gram P;P%4Admin2.201

2. .5 %acr!media Dream ea er2.20 Ma#r%media Dreamwea er adalah sebuah aplikasi $ang digunakan

untuk membuat we'site . Dibuat dengan menggunakan k%mbinasi tampilan isual t%%ls

dikembangkan dengan ban$ak !itur aplikasi dan didukung dengan k%de editing di

desain untuk bisa disesuaikan dengan setiap tingkatan kemampuan pemakai.

Dreamwea er 5 dimasukan ban$ak kemampuan baru untuk membantu membuat dan

mengatur we'site baik dari pemula hingga tingkat lan'ut. /plikasi ini mendukung

dengan sangat praktis dan dilengkapi dengan tekn%l%gi terbaru. Dreamwea er 5 dapat

di'alankan pada 3perating /ystem ?ind%ws 2000 ?ind%ws G" dan Ma#int%sh Ma#

8S. Dreamwea er 5 tidak bisa di'alankan dengan wind%ws 95 wind%ws 2000 ser er

wind%ws 2003 ser er atau Ma#int%sh 8S +0.2.G atau dibawah seri ini. -ungsi #%ding

dreamwea er tidak han$a mendukung k%de : M tetapi 'uga CSS ( Cascading /ty$e

/heet ) ;a as#ript C%ld!usi%n /S" ( 0ctive /erver ages ) ;S" ( 4ava /erver age ) dan

Dreamwea er 'uga memungkinkan membangun we'site dengan ser er berbahasa

C-M ( Co$d 5usion %arkup -anguage ) /S".net /S" ;S" dan ":". Dreamwea er


30/30

0

'uga mempun$ai kemampuan untuk mendukung pemr%graman server side dan c$ient

side . /erver side untuk mempr%ses data $ang berhubungan dengan server misaln$a

peng%lahan data'ase . C$ient side merupakan bahasa pemr%graman tambahan sekaligus

sebagai pelengkap dari bahasa pemr%graman lainn$a (Mad#%ms 2005). "nterface

pemr%graman ma#r%media Dreamwea er 5 dapat dilihat pada gambar 2.+3.2.20

2.20 Gambar 2.12 ampilan ,nter-ace Pr!gram %acr!media Dream ea er 2.209

. !

Bab ii perancangan e-commerce

Documents

Transcript of Bab ii perancangan e-commerce