BAB 3 ANALISIS DAN PERANCANGAN SISTEM
3.2 Perancangan Sistem
3.2.3 Perancangan Antarmuka
3.2.3.5 Perancangan Antarmuka Member
Perancangan antarmuka member dalam aplikasi yang dibuat memiliki beberapa bagian sebagai berikut :
1. Perancangan Antarmuka Beranda Member
· Klik Beranda menuju TME01
· Klik Daftar Produk menuju TME02
· Klik Produk Terlaris menuju TME03
· Klik Produk Terbaru menuju TME04
· Klik Keranjang Pemesanan menuju TME06
· Klik Informasi Order menuju TME016
· Klik Halaman Member menuju TME010
· Klik Logout untuk keluar sebagai member
· Klik Ubah Login menuju TME018
· Klik Ubah Profil menuju TME017 · Klik Histori Pemesanan menuju TME010 · Klik Konfirmasi Pembayaran menuju TME012
· Klik History Retur menuju TME014
· Klik Detail Menuju TME05 TME01
Selamat datang <nama_member> Cari Produk
Ubah Login | Ubah Profile | History Pemenasan | Konformasi Bayar | History Retur Beranda | Daftar Produk | Produk terlaris | Produk Terbaru | Keranjang Pemesanan | Informasi order | Halaman Member | LogOut
Ukuran Layar : 1024 x 768 Jenis Font : Arial Warna Latar : #ffffff gambar Produk Diskon DETAIL <nama_produk> <harga> <gambar_produk> Produk Terbaru Rekomendasi Produk <nama_produk> <harga> <gambar_produk> <nama_produk> <harga> <gambar_produk> <nama_produk> <harga> <gambar_produk> <nama_produk> <harga> <gambar_produk> <nama_produk> <harga> <gambar_produk> <nama_produk> <harga> <gambar_produk> <nama_produk> <harga> <gambar_produk> <nama_produk> <harga> <gambar_produk> <nama_produk> <harga> <gambar_produk> <nama_produk> <harga> <gambar_produk> <nama_produk> <harga> <gambar_produk> <nama_produk> <harga> <gambar_produk> <nama_produk> <harga> <gambar_produk> <nama_produk> <harga> L O G O
2. Perancangan Antarmuka Daftar Produk
· Klik Beranda menuju TME01
· Klik Daftar Produk menuju TME02
· Klik Produk Terlaris menuju TME03
· Klik Produk Terbaru menuju TME04
· Klik Keranjang Pemesanan menuju TME06
· Klik Informasi Order menuju TME016
· Klik Halaman Member menuju TME010
· Klik Logout untuk keluar sebagai member
· Klik Ubah Login menuju TME018
· Klik Ubah Profil menuju TME017 · Klik Histori Pemesanan menuju TME010 · Klik Konfirmasi Pembayaran menuju TME012
· Klik History Retur menuju TME014
· Klik Detail Menuju TME05 · Klik Tambahkan Keranjang menuju TME05 TME02 Cari Produk
Selamat datang <nama_member> Cari Produk
Ubah Login | Ubah Profile | History Pemenasan | Konformasi Bayar | History Retur Beranda | Daftar Produk | Produk terlaris | Produk Terbaru | Keranjang Pemesanan | Informasi order | Halaman Member | LogOut
gambar
Ukuran Layar : 1024 x 768 Jenis Font : Arial Warna Latar : #ffffff Daftar Produk <gambar_produk> DETAIL Kategori Produk <nama_kategori> Tambahkan Keranjang <nama_produk> <harga> <nama_produk> Tambahkan Keranjang <harga> <gambar_produk> <nama_produk> Tambahkan Keranjang <harga> <gambar_produk> <gambar_produk> Tambahkan Keranjang <nama_produk> <harga> <nama_produk> Tambahkan Keranjang <harga> <gambar_produk> <nama_produk> Tambahkan Keranjang <harga> <gambar_produk> <gambar_produk> Tambahkan Keranjang <nama_produk> <harga> <nama_produk> Tambahkan Keranjang <harga> <gambar_produk> <nama_produk> Tambahkan Keranjang <harga> L O G O
3. Perancangan Antarmuka Produk Terlaris
· Klik Beranda menuju TME01
· Klik Daftar Produk menuju TME02
· Klik Produk Terlaris menuju TME03
· Klik Produk Terbaru menuju TME04
· Klik Keranjang Pemesanan menuju TME06
· Klik Informasi Order menuju TME016
· Klik Halaman Member menuju TME010
· Klik Logout untuk keluar sebagai member
· Klik Ubah Login menuju TME018
· Klik Ubah Profil menuju TME017 · Klik Histori Pemesanan menuju TME010 · Klik Konfirmasi Pembayaran menuju TME012
· Klik History Retur menuju TME014
· Klik Detail Menuju TME05
· Klik Tambahkan Keranjang menuju TME05 TME03
Selamat datang <nama_member> Cari Produk
Ubah Login | Ubah Profile | History Pemenasan | Konformasi Bayar | History Retur Beranda | Daftar Produk | Produk terlaris | Produk Terbaru | Keranjang Pemesanan | Informasi order | Halaman Member | LogOut
gambar
Ukuran Layar : 1024 x 768 Jenis Font : Arial Warna Latar : #ffffff Produk Terlaris <gambar_produk> DETAIL Kategori Produk Tambahkan Keranjang <nama_produk> <harga> <nama_produk> Tambahkan Keranjang <harga> <gambar_produk> <nama_produk> Tambahkan Keranjang <harga> <gambar_produk> <gambar_produk> Tambahkan Keranjang <nama_produk> <harga> <nama_produk> Tambahkan Keranjang <harga> <gambar_produk> <nama_produk> Tambahkan Keranjang <harga> <gambar_produk> <gambar_produk> Tambahkan Keranjang <nama_produk> <harga> <nama_produk> Tambahkan Keranjang <harga> <gambar_produk> <nama_produk> Tambahkan Keranjang <harga> <nama_kategori> L O G O
4. Perancangan Antarmuka Produk Terbaru
· Klik Beranda menuju TME01
· Klik Daftar Produk menuju TME02
· Klik Produk Terlaris menuju TME03
· Klik Produk Terbaru menuju TME04
· Klik Keranjang Pemesanan menuju TME06
· Klik Informasi Order menuju TME016
· Klik Halaman Member menuju TME010
· Klik Logout untuk keluar sebagai member
· Klik Ubah Login menuju TME018
· Klik Ubah Profil menuju TME017 · Klik Histori Pemesanan menuju TME010 · Klik Konfirmasi Pembayaran menuju TME012
· Klik History Retur menuju TME014
· Klik Detail Menuju TME05 · Klik Tambahkan Keranjang menuju TME05 TME04 Cari Produk
Selamat datang <nama_member> Cari Produk
Ubah Login | Ubah Profile | History Pemenasan | Konformasi Bayar | History Retur Beranda | Daftar Produk | Produk terlaris | Produk Terbaru | Keranjang Pemesanan | Informasi order | Halaman Member | LogOut
gambar
Ukuran Layar : 1024 x 768 Jenis Font : Arial Warna Latar : #ffffff Produk Terbaru <gambar_produk> DETAIL Kategori Produk <nama_kategori> Tambahkan Keranjang <nama_produk> <harga> <nama_produk> Tambahkan Keranjang <harga> <gambar_produk> <nama_produk> Tambahkan Keranjang <harga> <gambar_produk> <gambar_produk> Tambahkan Keranjang <nama_produk> <harga> <nama_produk> Tambahkan Keranjang <harga> <gambar_produk> <nama_produk> Tambahkan Keranjang <harga> <gambar_produk> <gambar_produk> Tambahkan Keranjang <nama_produk> <harga> <nama_produk> Tambahkan Keranjang <harga> <gambar_produk> <nama_produk> Tambahkan Keranjang <harga> L O G O
5. Perancangan Antarmuka Detail Produk
· Klik Beranda menuju TME01
· Klik Daftar Produk menuju TME02
· Klik Produk Terlaris menuju TME03 · Klik Produk Terbaru
menuju TME04 · Klik Keranjang
Pemesanan menuju TME06 · Klik Informasi Order
menuju TME016 · Klik Halaman Member
menuju TME010 · Klik Logout untuk keluar
sebagai member · Klik Ubah Login menuju
TME018
· Klik Ubah Profil menuju TME017
· Klik Histori Pemesanan menuju TME010 · Klik Konfirmasi
Pembayaran menuju TME012
· Klik History Retur menuju TME014
· Klik Tambahkan Keranjang menuju TME06 · Klik Voting untuk memberi
rating kepada produk · Klik Komentar untuk mengirim membuat komentar tentang produk TME05
Ukuran Layar : 1024 x 768 Jenis Font : Arial Warna Latar : #ffffff Rating Produk <warna> Warna : <stok> Jumlah : Tambah Penjualan Komentar Produk Tambah Komentar Tambah Komentar….
Selamat datang <nama_member> Cari Produk
Ubah Login | Ubah Profile | History Pemenasan | Konformasi Bayar | History Retur Beranda | Daftar Produk | Produk terlaris | Produk Terbaru | Keranjang Pemesanan | Informasi order | Halaman Member | LogOut
gambar
<gambar_produk>
<gambar_produk>
Informasi Produk
Kode Produk : <kode_produk> Nama Produk : <nama_produk> Warna Produk : <warna> Diskon : <diskon> Harga : <harga> Berat : <berat> Stok : <stok> Diskon : <diskon>
Silahkan melakukan pembelian terlebih Dahulu untuk melakukan rating produk ini.
L O G O
Gambar 3. 88 Perancangan Antarmuka Detail Produk
6. Perancangan Antarmuka Keranjang Pemesanan
· Klik Beranda menuju TME01 · Klik Daftar Produk menuju TME02 · Klik Produk Terlaris menuju
TME03
· Klik Produk Terbaru menuju TME04
· Klik Keranjang Pemesanan menuju TME06
· Klik Informasi Order menuju TME016
· Klik Halaman Member menuju TME010
· Klik Logout untuk keluar sebagai member
· Klik Ubah Login menuju TME018 · Klik Ubah Profil menuju TME017 · Klik Histori Pemesanan menuju
TME010
· Klik Konfirmasi Pembayaran menuju TME012
· Klik History Retur menuju TME014 · Klik menuju TME07 · Klik untuk hapus keranjang
belanja dan menuju TME05 · Klik Kembali menuju TME05 · Klik Selesai Belanja menuju TME08 TME06
Ukuran Layar : 1024 x 768 Jenis Font : Arial Warna Latar : #ffffff
KERANJANG BELANJA
Item Produk Berat Harga Tindakan
<nama_produk> <ukuran> <berat> <gambar_produk>
Kembali Banyak <bynk> Diskon (%) <diskon> Total <grand_total> <gambar_produk> Selesai Belanja
<nama_produk> <ukuran><gambar_produk> <berat> <gambar_produk> <bynk> <diskon> <grand_total>
Biaya Pemesanan : <grand_total>
(Biaya diatas belum ditambah dengan biaya pengiriman
Selamat datang <nama_member> Cari Produk
Ubah Login | Ubah Profile | History Pemenasan | Konformasi Bayar | History Retur Beranda | Daftar Produk | Produk terlaris | Produk Terbaru | Keranjang Pemesanan | Informasi order | Halaman Member | LogOut
gambar
<gambar_produk>
L O G O
7. Perancangan Antarmuka Edit Keranjang Belanja
· Klik Beranda menuju TME01
· Klik Daftar Produk menuju TME02
· Klik Produk Terlaris menuju TME03 · Klik Produk Terbaru
menuju TME04 · Klik Keranjang
Pemesanan menuju TME06 · Klik Informasi Order
menuju TME016 · Klik Halaman Member
menuju TME010 · Klik Logout untuk keluar
sebagai member · Klik Ubah Login menuju
TME018
· Klik Ubah Profil menuju TME017
· Klik Histori Pemesanan menuju TME010 · Klik Konfirmasi
Pembayaran menuju TME012
· Klik History Retur menuju TME014
· Klik Tambahkan Keranjang menuju TME06 · Klik Komentar untuk
mengirim membuat komentar tentang produk
Ukuran Layar : 1024 x 768 Jenis Font : Arial Warna Latar : #ffffff TME07 <warna> Warna : <stok> Jumlah : Tambah Penjualan Komentar Produk Tambah Komentar Tambah Komentar….
Selamat datang <nama_member> Cari Produk
Ubah Login | Ubah Profile | History Pemenasan | Konformasi Bayar | History Retur Beranda | Daftar Produk | Produk terlaris | Produk Terbaru | Keranjang Pemesanan | Informasi order | Halaman Member | LogOut
gambar
<gambar_produk>
<gambar_produk>
Informasi Produk
Kode Produk : <kode_produk>
Nama Produk : <nama_produk>
Warna Produk : <warna>
Diskon : <diskon> Harga : <harga> Berat : <berat> Stok : <stok> Diskon : <diskon> L O G O Rating Produk
Silahkan melakukan pembelian terlebih Dahulu untuk melakukan rating produk ini.
8. Perancangan Antarmuka Simpan Pemesanan
· Klik Beranda menuju TME01 · Klik Daftar Produk menuju
TME02
· Klik Produk Terlaris menuju TME03
· Klik Produk Terbaru menuju TME04
· Klik Keranjang Pemesanan menuju TME06
· Klik Informasi Order menuju TME016
· Klik Halaman Member menuju TME010 · Klik Logout untuk keluar
sebagai member · Klik Ubah Login menuju
TME018
· Klik Ubah Profil menuju TME017
· Klik Histori Pemesanan menuju TME010 · Klik Konfirmasi
Pembayaran menuju TME012
· Klik History Retur menuju TME014
· Beri tanda pada samakan dengan alamat pemesanan untuk menyamakan alamat pengiriman
· Pilih Jenis Pembayaran tranfer Bank menuju TME052 · Pilih jenis pembeyaran
Paypal Payment menuju Paypal.com untuk pembayaran online · Klik Kembali menuju TME06 · Klik Check Out Pemesanan
menuju TME09
TME08
SIMPAN PEMESANAN
Ukuran Layar : 1024 x 768 Jenis Font : Arial Warna Latar : #ffffff
Selamat datang <nama_member> Cari Produk
Ubah Login | Ubah Profile | History Pemenasan | Konformasi Bayar | History Retur Beranda | Daftar Produk | Produk terlaris | Produk Terbaru | Keranjang Pemesanan | Informasi order | Halaman Member | LogOut
<gambar> ALAMAT PEMESAN Nama Depan : Nama Belakang : Provinsi : Kota : Alamat : Kode Pos : Telp : ALAMAT PENGIRIMAN Nama Depan : Nama Belakang : Provinsi : Kota : Alamat : Kode Pos : Telp :
Samakan dengan alamat pemesanan
PEMBAYARAN
Silahkan pilih jasa pengiriman beserta cara pembayaran sesuai keinginan anda
Jasa Pengiriman Jenis Pengiriman
Item Produk Berat Harga
<nama_produk> <ukuran> <berat> <gambar_produk> Banyak <bynk> Diskon (%) <diskon> Total <grand_total> <gambar_produk>
Total Belanja : <sub_total>
Total Berat : <berat>
Ongkos Kirim : <ongkos_kirim>
Grand Total : <grand_total>
Kembali Check Out Pemesanan
L O G O
9. Perancangan Antarmuka Rekening History Pemesanan
· Klik untuk keluar dari informasi rekening dan menuju TME06
Ukuran Layar : 1024 x 768 Jenis Font : Arial Warna Latar : #ffffff
TME09
History Penjualan Menu Member
Ubah Akun Login Ubah Alamat Pengguna Konfirmasi Pembayaran Riwayat Penjualan Riwayat Return Penjualan ID Penjualan Tgl Transaksi Biaya Status
G0
Cari Produk
Selamat datang, ….... Ubah Login | Ubah Profile | History Pemenasan | Konformasi Bayar | History Retur Beranda | Daftar Produk | Produk terlaris | Produk Terbaru | Keranjang Pemesanan | Informasi order | Halaman Member | LogOut
Kode Pemesanan Anda : <id_order>
Jumlah Uang yang harus Ditranfer : <grand_total>
Terima Kasih anda telah melakukan pembelian pada Distro Hybrid Sktewear
Logo bank
Nomor Rekening : xxx xxxx xxx
Atas Nama : nama nasabah
L O G O
Gambar 3. 92 Perancangan Antarmuka Rekening History Pemesanan
10.Perancangan Antarmuka History Pemesanan
· Klik Beranda menuju TME01 · Klik Daftar Produk menuju TME02 · Klik Produk Terlaris menuju TME03 · Klik Produk Terbaru menuju TME04 · Klik Keranjang Pemesanan menuju
TME06
· Klik Informasi Order menuju TME016 · Klik Halaman Member menuju TME010 · Klik Logout untuk keluar sebagai
member
· Klik Ubah Login menuju TME018 · Klik Ubah Profil menuju TME017 · Klik Histori Pemesanan menuju
TME010
· Klik Konfirmasi Pembayaran menuju TME012
· Klik History Retur menuju TME014 · Klik Ubah Akun Login menuju TME018 · Klik Ubah Alamat Pengguna menuju
TME017
· Klik Konfirmasi pembayaran menuju TME012
· Klik Riwayat Penjualan menuju TME010
· Klik Riwayat Retur Penjualan menuju TME014
· Klik menuju TME011 TME010
.
Ukuran Layar : 1024 x 768 Jenis Font : Arial Warna Latar : #ffffff
Menu Member Ubah Akun Login Ubah Alamat Pengguna Konfirmasi Pembayaran Riwayat Penjualan Riwayat Retur Penjualan History Penjualan
ID Penjualan Tgl Transaksi Biaya Status
Selamat datang <nama_member> Cari Produk
Ubah Login | Ubah Profile | History Pemenasan | Konformasi Bayar | History Retur Beranda | Daftar Produk | Produk terlaris | Produk Terbaru | Keranjang Pemesanan | Informasi order | Halaman Member | LogOut
gambar
L O G O
11.Perancangan Antarmuka Informasi Detail Pemesanan
· Klik Beranda menuju TME01 · Klik Daftar Produk menuju
TME02
· Klik Produk Terlaris menuju TME03
· Klik Produk Terbaru menuju TME04
· Klik Keranjang Pemesanan menuju TME06 · Klik Informasi Order menuju
TME016
· Klik Halaman Member menuju TME010 · Klik Logout untuk keluar
sebagai member · Klik Ubah Login menuju
TME018
· Klik Ubah Profil menuju TME017
· Klik Histori Pemesanan menuju TME010 · Klik Konfirmasi
Pembayaran menuju TME012
· Klik History Retur menuju TME014
· Klik Kembali menuju TME010
· Klik Ajukan Retur menuju TME013
TME011
.
Ukuran Layar : 1024 x 768 Jenis Font : Arial Warna Latar : #ffffff
Informasi Detail Pemesanan
Jenis Pengiriman : <nama_jenis_pengiriman> Tanggal Pengiriman : Nomor Pengiriman :
ALAMAT PEMESAN
Nama Depan : <nama_depan> Alamat : <alamat>
Nama belakang : <nama_belakang> Kode Pos : <kode_pos>
Provinsi : <nama_provinsi> Telp. : <telp>
Kota : <nama_kota>
Nama Depan : <nama_depan2> Alamat : <alamat2>
Nama belakang : <nama_belakang2> Kode Pos : <kode_pos2>
Provinsi : <nama_provinsi2> Telp. : <telp2>
Kota : <nama_kota2> ALAMAT PENGIRIMAN
Order ID : <id_order> Ongkos Kirim : <ongkos_kirim>
Tanggl : <date> Grand Total : <grand_total>
Pembayaran : <jenis_pembayaran> Order Status : <status>
Sub Total : <sub_total> ALAMAT PENGIRIMAN
Nama Produk Harga Banyak Sub Total Diskon Total
<harga> <bnyk> <sub_total> <diskon> <grand_total>
Kembali <gambar_pro
duk>
Kode Produk : <id_produk> Nama Produk : <nama_produk>
Sub Total : <grand_total> Selamat datang <nama_member> Cari Produk
Ubah Login | Ubah Profile | History Pemenasan | Konformasi Bayar | History Retur Beranda | Daftar Produk | Produk terlaris | Produk Terbaru | Keranjang Pemesanan | Informasi order | Halaman Member | LogOut
Ajukan Retur
L O G O
Gambar 3. 94 Perancangan Antarmuka Informasi Detail Pemesanan
12.Perancangan Antarmuka Konfirmasi Pembayaran
· Klik Beranda menuju TME01 · Klik Daftar Produk menuju TME02 · Klik Produk Terlaris menuju TME03 · Klik Produk Terbaru menuju TME04 · Klik Keranjang Pemesanan menuju
TME06
· Klik Informasi Order menuju TME016 · Klik Halaman Member menuju TME010 · Klik Logout untuk keluar sebagai
member
· Klik Ubah Login menuju TME018 · Klik Ubah Profil menuju TME017 · Klik Histori Pemesanan menuju TME010 · Klik Konfirmasi Pembayaran menuju
TME012
· Klik History Retur menuju TME014 · Klik Ubah Akun Login menuju TME018 · Klik Ubah Alamat Pengguna menuju
TME017
· Klik Konfirmasi pembayaran menuju TME012
· Klik Riwayat Penjualan menuju TME010 · Klik Riwayat Retur Penjualan menuju
TME014
· Klik Simpan Konfirmasi Pembayaran untuk menyimpan konfirmasi pembayaran TME012
.
Ukuran Layar : 1024 x 768 Jenis Font : Arial Warna Latar : #ffffff Konfirmasi Pembayaran <id_order> Nomor Pemesanan <nama_bank> Dari Pembayaran <nominal>
Jumlah Nominal Pembayaran
<nama_nasabah> Atas Nama Pembayaran
<nomer_transaksi> Nomor Bukti Pembayaran
<nama_bank> Tujuan Pembayaran
<tgl_transfer> Tanggal Pembayaran
Simpan Konfirmasi Pembayaran
Selamat datang <nama_member> Cari Produk
Ubah Login | Ubah Profile | History Pemenasan | Konformasi Bayar | History Retur Beranda | Daftar Produk | Produk terlaris | Produk Terbaru | Keranjang Pemesanan | Informasi order | Halaman Member | LogOut
gambar
Menu Member Ubah Akun Login Ubah Alamat Pengguna Konfirmasi Pembayaran Riwayat Penjualan Riwayat Retur Penjualan
L O G O
13.Perancangan Antarmuka Ajukan Retur
· Klik Beranda menuju TME01 · Klik Daftar Produk menuju
TME02
· Klik Produk Terlaris menuju TME03
· Klik Produk Terbaru menuju TME04
· Klik Keranjang Pemesanan menuju TME06 · Klik Informasi Order menuju
TME016
· Klik Halaman Member menuju TME010
· Klik Logout untuk keluar sebagai member · Klik Ubah Login menuju
TME018
· Klik Ubah Profil menuju TME017
· Klik Histori Pemesanan menuju TME010 · Klik Konfirmasi Pembayaran
menuju TME012 · Klik History Retur menuju
TME014
· Beri tanda ceklis pada ajukan retur dan alasan retur barang untuk mengajukan retur pemsanan
· Klik Kembali menuju TME011 · Klik Ajukan Retur Pemesanan
menuju TME014
TME013
.
Ukuran Layar : 1024 x 768 Jenis Font : Arial Warna Latar : #ffffff
Pengajuan Retur Pemesanan
Ajukan Retur
Selamat datang <nama_member> Cari Produk
Ubah Login | Ubah Profile | History Pemenasan | Konformasi Bayar | History Retur Beranda | Daftar Produk | Produk terlaris | Produk Terbaru | Keranjang Pemesanan | Informasi order | Halaman Member | LogOut
Kembali
Nama Produk Alasan Retur Barang
Kode Produk : <id_produk> Nama Produk : <nama_produk>
Ukuran Produk : <ukuran> <gambar_pr
oduk>
Barang Rusak / Catat / Robek Barang Tidak Sesuai
Ajukan Retur Pemesanan
L O G O
Gambar 3. 96 Perancangan Antarmuka Ajukan Retur
14.Perancangan Antarmuka History Retur
· Klik Beranda menuju TME01 · Klik Daftar Produk menuju TME02 · Klik Produk Terlaris menuju TME03 · Klik Produk Terbaru menuju
TME04
· Klik Keranjang Pemesanan menuju TME06
· Klik Informasi Order menuju TME016
· Klik Halaman Member menuju TME010
· Klik Logout untuk keluar sebagai member
· Klik Ubah Login menuju TME018 · Klik Ubah Profil menuju TME017 · Klik Histori Pemesanan menuju
TME010
· Klik Konfirmasi Pembayaran