Post on 06-Jul-2018
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.
'
8/17/2019 Bab ii perancangan e-commerce
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.
8/17/2019 Bab ii perancangan e-commerce
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 %
8/17/2019 Bab ii perancangan e-commerce
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.
8/17/2019 Bab ii perancangan e-commerce
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/
8/17/2019 Bab ii perancangan e-commerce
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.. !
. !
8/17/2019 Bab ii perancangan e-commerce
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/17/2019 Bab ii perancangan e-commerce
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
8/17/2019 Bab ii perancangan e-commerce
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
8/17/2019 Bab ii perancangan e-commerce
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
8/17/2019 Bab ii perancangan e-commerce
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.
8/17/2019 Bab ii perancangan e-commerce
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
8/17/2019 Bab ii perancangan e-commerce
13/30
2.
8/17/2019 Bab ii perancangan e-commerce
14/30
!
3. S%lusi peran#angan $ang dihasilkan*. = aluasi peran#angan terhadap kebutuhan pengguna. (
8/17/2019 Bab ii perancangan e-commerce
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
8/17/2019 Bab ii perancangan e-commerce
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.
8/17/2019 Bab ii perancangan e-commerce
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.
8/17/2019 Bab ii perancangan e-commerce
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.
8/17/2019 Bab ii perancangan e-commerce
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
8/17/2019 Bab ii perancangan e-commerce
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
8/17/2019 Bab ii perancangan e-commerce
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
8/17/2019 Bab ii perancangan e-commerce
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"
8/17/2019 Bab ii perancangan e-commerce
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
8/17/2019 Bab ii perancangan e-commerce
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
8/17/2019 Bab ii perancangan e-commerce
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
8/17/2019 Bab ii perancangan e-commerce
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
8/17/2019 Bab ii perancangan e-commerce
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
8/17/2019 Bab ii perancangan e-commerce
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
8/17/2019 Bab ii perancangan e-commerce
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
8/17/2019 Bab ii perancangan e-commerce
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
. !