3.2.3.1.3 Perancangan Antar Muka Member
1. Perancangan antar muka setelah login berhasil
Gambar pada 3.73 di bawah ini merupakan perancangan antar muka setelah login berhasil pada member yang berfungsi sebagai halaman utama setelah
member login.
M01
Header
footer
Beranda Keranjang
belanja Profil
Perusahaan Cara
Pemesanan Cara
Pembayaran Retur Barang Tanya Jawab
Ongkos Hubungi
Kami
Logo dan Nama Toko
Hallo ...
Kategori Produk Best Seller
Keranjang Belanja
Chat With Me
Transfer gambar
gambar Gambar logo
Gambar yahoo ...item
Sub total... Gambar
cart
Bahan cvc Bahan full katun
History Pemesanan Alamat Utama
Nama Layar : M01
Ukuran Layar : 1024 X 768
Font : arial
Warna Backgroud : putih, abu-abu
Klik beranda menuju
M13
Klik keranjang belanja menuju M15
Klik profil perusahaan
menuju PN03
Klik cara pemesanan menuju PN04
Klik cara pembayaran
menuju PN05
Klik retur barang menuju PN06
Klik tanya jawab
menuju PN07
Klik ongkos menuju PN08
Klik hubungi kami
menuju PN09
Klik gambar cari menuju PN10
Klik kategori menuju
PN11
Klik gambar menuju M14
Klik history
pemesanan menuju M02
Klik alamat utama
menuju M03
Klik kontak anda menuju M04
Klik ganti password
menuju M05
Klik komentar anda menuju M06
Klik informasi menuju
M07
Klik logout menuju M08
cari
Gambar cari
Hallo ... Silahkan pilih menu disebelah kiri anda
Kontak Anda Ganti Password
Komentar Anda Informasi
Logout
Gambar 3.73 Perancangan Antar Muka Setelah Login Berhasil
2. Perancangan antar muka lupa password
Gambar pada 3.74 di bawah ini merupakan perancangan antar muka lupa password pada member yang berfungsi sebagai halaman untuk lupa password
pada member.
M12
Header
footer
Beranda Keranjang
belanja Profil
Perusahaan Cara
Pemesanan Cara
Pembayaran Retur Barang Tanya Jawab
Ongkos Hubungi
Kami
Logo dan Nama Toko
Login Member
Kategori
Produk Best Seller Keranjang Belanja
Chat With Me
Transfer gambar
gambar Gambar logo
Gambar yahoo ...item
Sub total... Gambar
cart
Bahan cvc Bahan full katun
Email Password
login reset
Anda lupa password ? Jadi member baru
Nama Layar : M12
Ukuran Layar : 1024 X 768
Font : arial
Warna Backgroud : putih, abu-abu
Klik beranda menuju
PN01
Klik keranjang belanja menuju PN02
Klik profil perusahaan
menuju PN03
Klik cara pemesanan menuju PN04
Klik cara pembayaran
menuju PN05
Klik retur barang menuju PN06
Klik tanya jawab
menuju PN07
Klik ongkos menuju PN08
Klik hubungi kami
menuju PN09
Klik gambar cari menuju PN10
Klik kategori menuju
PN11
Klik jadi member baru menuju PN12
Klik anda lupa
password ? Menuju M12
Klik gambar menuju
M14
Klik proses menuju M12
Klik reset menuju M12
cari
Gambar cari
Anda lupa kehilangan password Email
Hitung
proses reset
3+2
Gambar 3.74 Perancangan Antar Muka Lupa Password
3. Perancangan antar muka history pemesanan
Gambar pada 3.75 di bawah ini merupakan perancangan antar muka history pemesanan pada member yang berfungsi sebagai halaman untuk melihat
pemesanan yang telah dilakukan oleh member.
M02
Header
footer
Beranda Keranjang
belanja Profil
Perusahaan Cara
Pemesanan Cara
Pembayaran Retur Barang Tanya Jawab
Ongkos Hubungi
Kami
Logo dan Nama Toko
Hallo ...
Kategori Produk Best Seller
Keranjang Belanja
Chat With Me
Transfer gambar
gambar Gambar logo
Gambar yahoo ...item
Sub total... Gambar
cart
Bahan cvc Bahan full katun
History Pemesanan Alamat Utama
Nama Layar : M02
Ukuran Layar : 1024 X 768
Font : arial
Warna Backgroud : putih, abu-abu
Klik beranda menuju
M13
Klik keranjang belanja menuju M15
Klik profil perusahaan
menuju PN03
Klik cara pemesanan menuju PN04
Klik cara pembayaran
menuju PN05
Klik retur barang menuju PN06
Klik tanya jawab
menuju PN07
Klik ongkos menuju PN08
Klik hubungi kami
menuju PN09
Klik gambar cari menuju PN10
Klik kategori menuju
PN11
Klik gambar menuju M14
Klik history
pemesanan menuju M02
Klik alamat utama
menuju M03
Klik kontak anda menuju M04
Klik ganti password
menuju M05
Klik komentar anda menuju M06
Klik informasi menuju
M07
Klik logout menuju M08
Klik proses menuju
M12
cari
Gambar cari
History pemesanan
Kontak Anda Ganti Password
Komentar Anda Informasi
Logout Tampilkan pesanan berdasarkan :
kode Tgl pesan
Kota tujuan
rupiah dollar
pembayaran
status aksi
proses
Gambar 3.75 Perancangan Antar Muka History Pemesanan
4. Perancangan antar muka alamat utama
Gambar pada 3.76 di bawah ini merupakan perancangan antar muka alamat utama pada member yang berfungsi sebagai halaman ubah alamat utama member.
M03
Header
footer
Beranda Keranjang
belanja Profil
Perusahaan Cara
Pemesanan Cara
Pembayaran Retur Barang Tanya Jawab
Ongkos Hubungi
Kami
Logo dan Nama Toko
Hallo ...
Kategori Produk Best Seller
Keranjang Belanja
Chat With Me
Transfer gambar
gambar Gambar logo
Gambar yahoo ...item
Sub total... Gambar
cart
Bahan cvc Bahan full katun
History Pemesanan Alamat Utama
Nama Layar : M03
Ukuran Layar : 1024 X 768
Font : arial
Warna Backgroud : putih, abu-abu
Klik beranda menuju
M13
Klik keranjang belanja menuju M15
Klik profil perusahaan
menuju PN03
Klik cara pemesanan menuju PN04
Klik cara pembayaran
menuju PN05
Klik retur barang menuju PN06
Klik tanya jawab
menuju PN07
Klik ongkos menuju PN08
Klik hubungi kami
menuju PN09
Klik gambar cari menuju PN10
Klik kategori menuju
PN11
Klik gambar menuju M14
Klik history
pemesanan menuju M02
Klik alamat utama
menuju M03
Klik kontak anda menuju M04
Klik ganti password
menuju M05
Klik komentar anda menuju M06
Klik informasi menuju
M07
Klik logout menuju M08
Klik proses menuju
M03
cari
Gambar cari
Ganti alamat utama
Kontak Anda Ganti Password
Komentar Anda Informasi
Logout
Alamat Provinsi
Kota Kode pos
Proses
Gambar 3.76 Perancangan Antar Muka Alamat Utama
5. Perancangan antar muka kontak anda
Gambar pada 3.77 di bawah ini merupakan perancangan antar muka kontak anda pada member yang berfungsi sebagai halaman ganti kontak member.
M04
Header
footer
Beranda Keranjang
belanja Profil
Perusahaan Cara
Pemesanan Cara
Pembayaran Retur Barang Tanya Jawab
Ongkos Hubungi
Kami
Logo dan Nama Toko
Hallo ...
Kategori Produk Best Seller
Keranjang Belanja
Chat With Me
Transfer gambar
gambar Gambar logo
Gambar yahoo ...item
Sub total... Gambar
cart
Bahan cvc Bahan full katun
History Pemesanan Alamat Utama
Nama Layar : M04
Ukuran Layar : 1024 X 768
Font : arial
Warna Backgroud : putih, abu-abu
Klik beranda menuju
M13
Klik keranjang belanja menuju M15
Klik profil perusahaan
menuju PN03
Klik cara pemesanan menuju PN04
Klik cara pembayaran
menuju PN05
Klik retur barang menuju PN06
Klik tanya jawab
menuju PN07
Klik ongkos menuju PN08
Klik hubungi kami
menuju PN09
Klik gambar cari menuju PN10
Klik kategori menuju
PN11
Klik gambar menuju M14
Klik history
pemesanan menuju M02
Klik alamat utama
menuju M03
Klik kontak anda menuju M04
Klik ganti password
menuju M05
Klik komentar anda menuju M06
Klik informasi menuju
M07
Klik logout menuju M08
Klik proses menuju
M04
cari
Gambar cari
Ganti kontak
Kontak Anda Ganti Password
Komentar Anda Informasi
Logout
Handphone Telepon
Fax simpan
Gambar 3.77 Perancangan Antar Muka Kontak Anda
6. Perancangan antar muka ganti password
Gambar pada 3.78 di bawah ini merupakan perancangan antar muka ganti password pada member yang berfungsi sebagai halaman ganti password member.
M05
Header
footer
Beranda Keranjang
belanja Profil
Perusahaan Cara
Pemesanan Cara
Pembayaran Retur Barang Tanya Jawab
Ongkos Hubungi
Kami
Logo dan Nama Toko
Hallo ...
Kategori Produk Best Seller
Keranjang Belanja
Chat With Me
Transfer gambar
gambar Gambar logo
Gambar yahoo ...item
Sub total... Gambar
cart
Bahan cvc Bahan full katun
History Pemesanan Alamat Utama
Nama Layar : M05
Ukuran Layar : 1024 X 768
Font : arial
Warna Backgroud : putih, abu-abu
Klik beranda menuju
M13
Klik keranjang belanja menuju M15
Klik profil perusahaan
menuju PN03
Klik cara pemesanan menuju PN04
Klik cara pembayaran
menuju PN05
Klik retur barang menuju PN06
Klik tanya jawab
menuju PN07
Klik ongkos menuju PN08
Klik hubungi kami
menuju PN09
Klik gambar cari menuju PN10
Klik kategori menuju
PN11
Klik gambar menuju M14
Klik history
pemesanan menuju M02
Klik alamat utama
menuju M03
Klik kontak anda menuju M04
Klik ganti password
menuju M05
Klik komentar anda menuju M06
Klik informasi menuju
M07
Klik logout menuju M08
Klik simpan menuju
M05
cari
Gambar cari
Ganti password
Kontak Anda Ganti Password
Komentar Anda Informasi
Logout
Password sekarang Password baru
Konfirmasi password simpan
Gambar 3.78 Perancangan Antar Muka Ganti Password
7. Perancangan antar muka komentar anda
Gambar pada 3.79 di bawah ini merupakan perancangan antar muka komentar anda pada member yang berfungsi sebagai halaman komentar pada
barang.
M06
Header
footer
Beranda Keranjang
belanja Profil
Perusahaan Cara
Pemesanan Cara
Pembayaran Retur Barang Tanya Jawab
Ongkos Hubungi
Kami
Logo dan Nama Toko
Hallo ...
Kategori Produk Best Seller
Keranjang Belanja
Chat With Me
Transfer gambar
gambar Gambar logo
Gambar yahoo ...item
Sub total... Gambar
cart
Bahan cvc Bahan full katun
History Pemesanan Alamat Utama
Nama Layar : M06
Ukuran Layar : 1024 X 768
Font : arial
Warna Backgroud : putih, abu-abu
Klik beranda menuju
M13
Klik keranjang belanja menuju M15
Klik profil perusahaan
menuju PN03
Klik cara pemesanan menuju PN04
Klik cara pembayaran
menuju PN05
Klik retur barang menuju PN06
Klik tanya jawab
menuju PN07
Klik ongkos menuju PN08
Klik hubungi kami
menuju PN09
Klik gambar cari menuju PN10
Klik kategori menuju
PN11
Klik gambar menuju M14
Klik history
pemesanan menuju M02
Klik alamat utama
menuju M03
Klik kontak anda menuju M04
Klik ganti password
menuju M05
Klik komentar anda menuju M06
Klik informasi menuju
M07
Klik logout menuju M08
cari
Gambar cari
Komentar anda
Kontak Anda Ganti Password
Komentar Anda Informasi
Logout
Pada tanggal ….. Gambar barang
Komentar ……..
Gambar 3.79 Perancangan Antar Muka Komentar Anda
8. Perancangan antar muka informasi
Gambar pada 3.80 di bawah ini merupakan perancangan antar muka informasi pada member yang berfungsi sebagai halaman informasi toko Granitex.
M07
Header
footer
Beranda Keranjang
belanja Profil
Perusahaan Cara
Pemesanan Cara
Pembayaran Retur Barang Tanya Jawab
Ongkos Hubungi
Kami
Logo dan Nama Toko
Hallo ...
Kategori Produk Best Seller
Keranjang Belanja
Chat With Me
Transfer gambar
gambar Gambar logo
Gambar yahoo ...item
Sub total... Gambar
cart
Bahan cvc Bahan full katun
History Pemesanan Alamat Utama
Nama Layar : M07
Ukuran Layar : 1024 X 768
Font : arial
Warna Backgroud : putih, abu-abu
Klik beranda menuju
M13
Klik keranjang belanja menuju M15
Klik profil perusahaan
menuju PN03
Klik cara pemesanan menuju PN04
Klik cara pembayaran
menuju PN05
Klik retur barang menuju PN06
Klik tanya jawab
menuju PN07
Klik ongkos menuju PN08
Klik hubungi kami
menuju PN09
Klik gambar cari menuju PN10
Klik kategori menuju
PN11
Klik gambar menuju M14
Klik history
pemesanan menuju M02
Klik alamat utama
menuju M03
Klik kontak anda menuju M04
Klik ganti password
menuju M05
Klik komentar anda menuju M06
Klik informasi menuju
M07
Klik logout menuju M08
cari
Gambar cari
Teks
Informasi toko granitex
Kontak Anda Ganti Password
Komentar Anda Informasi
Logout
Gambar 3.80 Perancangan Antar Muka Informasi
9. Perancangan antar muka logout
Gambar pada 3.81 di bawah ini merupakan perancangan antar muka logout pada member yang berfungsi sebagai halaman apabila member telah melakukan
logout.
M08
Header
footer
Beranda Keranjang
belanja Profil
Perusahaan Cara
Pemesanan Cara
Pembayaran Retur Barang Tanya Jawab
Ongkos Hubungi
Kami
Logo dan Nama Toko
Kategori Produk Best Seller
Keranjang Belanja
Chat With Me
Transfer gambar
gambar
Gambar logo Gambar yahoo
...item Sub total...
Gambar cart
Bahan cvc Bahan full katun
Nama Layar : M08
Ukuran Layar : 1024 X 768
Font : arial
Warna Backgroud : putih, abu-abu
Klik beranda menuju
PN01
Klik keranjang belanja menuju PN02
Klik profil perusahaan
menuju PN03
Klik cara pemesanan menuju PN04
Klik cara pembayaran
menuju PN05
Klik retur barang menuju PN06
Klik tanya jawab
menuju PN07
Klik ongkos menuju PN08
Klik hubungi kami
menuju PN09
Klik gambar cari menuju PN10
Klik kategori menuju
PN11
Klik gambar menuju PN14
Klik login akan menuju
M01
Klik reset akan menuju M08
Klik jadi member baru
akan menuju PN12
cari
Gambar cari
Anda sudah keluar log
Login member email
password login
reset
Teks
Apakah anda pelanggan baru
Jadi member baru Anda lupa password ?
Gambar 3.81 Perancangan Antar Muka Logout
10. Perancangan antar muka detail history pemesanan Gambar pada 3.82 di bawah ini merupakan perancangan antar muka detail
history pemesanan pada member yang berfungsi sebagai halaman detail history pemesanan.
M12
Header
footer
Beranda Keranjang
belanja Profil
Perusahaan Cara
Pemesanan Cara
Pembayaran Retur Barang Tanya Jawab
Ongkos Hubungi
Kami
Logo dan Nama Toko
Hallo ...
Kategori Produk Best Seller
Keranjang Belanja
Chat With Me
Transfer gambar
gambar Gambar logo
Gambar yahoo ...item
Sub total... Gambar
cart
Bahan cvc Bahan full katun
History Pemesanan Alamat Utama
Nama Layar : M12
Ukuran Layar : 1024 X 768
Font : arial
Warna Backgroud : putih, abu-abu
Klik beranda menuju
M13
Klik keranjang belanja menuju M15
Klik profil perusahaan
menuju PN03
Klik cara pemesanan menuju PN04
Klik cara pembayaran
menuju PN05
Klik retur barang menuju PN06
Klik tanya jawab
menuju PN07
Klik ongkos menuju PN08
Klik hubungi kami
menuju PN09
Klik gambar cari menuju PN10
Klik kategori menuju
PN11
Klik gambar menuju M14
Klik history
pemesanan menuju M02
Klik alamat utama
menuju M03
Klik kontak anda menuju M04
Klik ganti password
menuju M05
Klik komentar anda menuju M06
Klik informasi menuju
M07
Klik logout menuju M08
cari
Gambar cari
Detail pesanan
Kontak Anda Ganti Password
Komentar Anda Informasi
Logout
Tabel detail pesanan
Keterangan harga dollar
Gambar 3.82 Perancangan Antar Muka Detail History Pemesanan
11. Perancangan antar muka beranda Gambar pada 3.83 di bawah ini merupakan perancangan antar muka beranda
pada member yang berfungsi sebagai halaman beranda.
M13
Header
footer
Beranda Keranjang
belanja Profil
Perusahaan Cara
Pemesanan Cara
Pembayaran Retur Barang Tanya Jawab
Ongkos Hubungi
Kami
Logo dan Nama Toko
Kategori Produk Best Seller
Keranjang Belanja
Chat With Me
Transfer Semua Produk
gambar
gambar
gambar gambar
gambar
gambar gambar
gambar
gambar
selengkapnya selengkapnya
selengkapnya selengkapnya
selengkapnya
selengkapnya selengkapnya
selengkapnya selengkapnya
gambar gambar
Gambar logo Gambar ym
...item Sub total...
gambar
Bahan cvc Bahan full katun
Nama Layar : M13
Ukuran Layar : 1024 X 768
Font : arial
Warna Backgroud : putih, abu-abu
Klik beranda menuju
M13
Klik keranjang belanja menuju M15
Klik profil perusahaan
menuju PN03
Klik cara pemesanan menuju PN04
Klik cara pembayaran
menuju PN05
Klik retur barang menuju PN06
Klik tanya jawab menuju
PN07
Klik ongkos menuju PN08
Klik hubungi kami
menuju PN09
Klik gambar cari menuju PN10
Klik kategori menuju
PN11
Klik gambar menuju M14
Klik history pemesanan
menuju M02
Klik alamat utama menuju M03
Klik kontak anda menuju
M04
Klik ganti password menuju M05
Klik komentar anda
menuju M06
Klik informasi menuju M07
Klik logout menuju M08
Klik selengkapnya
menuju M14
cari
Gambar cari
Hallo ... History Pemesanan
Alamat Utama Kontak Anda
Ganti Password Komentar Anda
Informasi Logout
Gambar 3.83 Perancangan Antar Muka Beranda
12. Perancangan antar muka detail barang Gambar pada 3.84 di bawah ini merupakan perancangan antar muka detail
barang pada member yang berfungsi sebagai halaman detail barang.
M14
Header
footer
Beranda Keranjang
belanja Profil
Perusahaan Cara
Pemesanan Cara
Pembayaran Retur Barang Tanya Jawab
Ongkos Hubungi
Kami
Logo dan Nama Toko
Kategori Produk Best Seller
Keranjang Belanja
Chat With Me
Transfer Bahan full katun stone
gambar gambar
Gambar logo Gambar ym
...item Sub total...
gambar
Bahan cvc Bahan full katun
Nama Layar : M14
Ukuran Layar : 1024 X 768
Font : arial
Warna Backgroud : putih, abu-abu
Klik beranda menuju
M13
Klik keranjang belanja menuju M15
Klik profil perusahaan
menuju PN03
Klik cara pemesanan menuju PN04
Klik cara pembayaran
menuju PN05
Klik retur barang menuju PN06
Klik tanya jawab menuju
PN07
Klik ongkos menuju PN08
Klik hubungi kami
menuju PN09
Klik gambar cari menuju PN10
Klik kategori menuju
PN11
Klik gambar menuju M14
Klik history pemesanan
menuju M02
Klik alamat utama menuju M03
Klik kontak anda menuju
M04
Klik ganti password menuju M05
Klik komentar anda
menuju M06
Klik informasi menuju M07
Klik logout menuju M08
Klik gambar keranjang
menuju M15
cari
Gambar cari
Hallo ... History Pemesanan
Alamat Utama Kontak Anda
Ganti Password Komentar Anda
Informasi Logout
Gambar barang Deskripsi barang
1 komentar beri komentar
Button share ukuran harga diskon stok
Gambar keranjang
Gambar 3.84 Perancangan Antar Muka Detail Barang
13. Perancangan antar muka keranjang belanja Gambar pada 3.85 di bawah ini merupakan perancangan antar muka
keranjang belanja pada member yang berfungsi sebagai daftar belanja barang yang sedang dipesan.
M15
Header
footer
Beranda Keranjang
belanja Profil
Perusahaan Cara
Pemesanan Cara
Pembayaran Retur Barang Tanya Jawab
Ongkos Hubungi
Kami
Logo dan Nama Toko
Kategori Produk Best Seller
Keranjang Belanja
Chat With Me
Transfer Keranjang belanja anda
gambar gambar
Gambar logo Gambar yahoo
messenger ...item
Sub total... gambar
Bahan cvc Bahan full katun
Nama Layar : M15
Ukuran Layar : 1024 X 768
Font : arial
Warna Backgroud : putih, abu-abu
Klik beranda menuju
M13
Klik keranjang belanja menuju M15
Klik profil perusahaan
menuju PN03
Klik cara pemesanan menuju PN04
Klik cara pembayaran
menuju PN05
Klik retur barang menuju PN06
Klik tanya jawab menuju
PN07
Klik ongkos menuju PN08
Klik hubungi kami
menuju PN09
Klik gambar cari menuju PN10
Klik kategori menuju
PN11
Klik gambar menuju M14
Klik history pemesanan
menuju M02
Klik alamat utama menuju M03
Klik kontak anda menuju
M04
Klik ganti password menuju M05
Klik komentar anda
menuju M06
Klik informasi menuju M07
Klik logout menuju M08
Kembali berbelanja
menuju M13
Klik update keranjang menuju M15
Klik selesai berbelanja
menuju M09
cari
Gambar cari
Hallo ... History Pemesanan
Alamat Utama Kontak Anda
Ganti Password Komentar Anda
Informasi Logout
hapus detail harga diskon jumlah rupiah dollar total harga
kembali berbelanja Selesai berbelanja
Update keranjang gambar
barang Sub total bayar
Gambar 3.85 Perancangan Antar Muka Keranjang Belanja
14. Perancangan antar muka pilih alamat tujuan pengiriman Gambar pada 3.86 di bawah ini merupakan perancangan antar muka pilih
alamat tujuan pengiriman pada member yang berfungsi sebagai pilihan alamat tujuan pengiriman barang yang sudah dipesan.
M09
Header
footer
Beranda Keranjang
belanja Profil
Perusahaan Cara
Pemesanan Cara
Pembayaran Retur Barang Tanya Jawab
Ongkos Hubungi
Kami
Logo dan Nama Toko
Kategori Produk Best Seller
Keranjang Belanja
Chat With Me
Transfer gambar
gambar Gambar logo
Gambar yahoo ...item
Sub total... Gambar
cart
Bahan cvc Bahan full katun
Nama Layar : M09
Ukuran Layar : 1024 X 768
Font : arial
Warna Backgroud : putih, abu-abu
cari
Gambar cari
Alamat tujuan pengiriman
Alamat utama Hallo ...
History Pemesanan Alamat Utama
Kontak Anda Ganti Password
Komentar Anda Informasi
Logout
Klik beranda menuju
M13
Klik keranjang belanja menuju M15
Klik profil perusahaan
menuju PN03
Klik cara pemesanan menuju PN04
Klik cara pembayaran
menuju PN05
Klik retur barang menuju PN06
Klik tanya jawab
menuju PN07
Klik ongkos menuju PN08
Klik hubungi kami
menuju PN09
Klik gambar cari menuju PN10
Klik kategori menuju
PN11
Klik gambar menuju M14
Klik history
pemesanan menuju M02
Klik alamat utama
menuju M03
Klik kontak anda menuju M04
Klik ganti password
menuju M05
Klik komentar anda menuju M06
Klik informasi menuju
M07
Klik logout menuju M08
Klik alamat utama
menuju M091
Klik alamat baru menuju M092
Alamat baru Gunakan alamat utama
sebagai alamat pengiriman Gunakan alamat baru
sebagai alamat pengiriman
Gambar 3.86 Perancangan Antar Muka Pilih Alamat Tujuan Pengiriman
15. Perancangan antar muka alamat utama Gambar pada 3.87 di bawah ini merupakan perancangan antar muka alamat
utama pada member yang berfungsi sebagai tujuan pengiriman barang menggunakan alamat utama member.
M091
Header
footer
Beranda Keranjang
belanja Profil
Perusahaan Cara
Pemesanan Cara
Pembayaran Retur Barang Tanya Jawab
Ongkos Hubungi
Kami
Logo dan Nama Toko
Kategori Produk Best Seller
Keranjang Belanja
Chat With Me
Transfer gambar
gambar Gambar logo
Gambar yahoo ...item
Sub total... Gambar
cart
Bahan cvc Bahan full katun
Nama Layar : M091
Ukuran Layar : 1024 X 768
Font : arial
Warna Backgroud : putih, abu-abu
cari
Gambar cari
Alamat tujuan pengiriman
Alamat utama
Kembali ke keranjang lanjutkan
teks Hallo ...
History Pemesanan Alamat Utama
Kontak Anda Ganti Password
Komentar Anda Informasi
Logout
Klik beranda menuju
M13
Klik keranjang belanja menuju M15
Klik profil perusahaan
menuju PN03
Klik cara pemesanan menuju PN04
Klik cara pembayaran
menuju PN05
Klik retur barang menuju PN06
Klik tanya jawab
menuju PN07
Klik ongkos menuju PN08
Klik hubungi kami
menuju PN09
Klik gambar cari menuju PN10
Klik kategori menuju
PN11
Klik gambar menuju M14
Klik history
pemesanan menuju M02
Klik alamat utama
menuju M03
Klik kontak anda menuju M04
Klik ganti password
menuju M05
Klik komentar anda menuju M06
Klik informasi menuju
M07
Klik logout menuju M08
Klik kembali ke
keranjang menuju M15
Klik lanjutkan menuju
M10
Gambar 3.87 Perancangan Antar Muka Alamat Utama
16. Perancangan antar muka alamat baru Gambar pada 3.88 di bawah ini merupakan perancangan antar muka alamat
baru pada member yang berfungsi sebagai tujuan pengiriman barang dengan menggunakan alamat baru.
M092
Header
footer
Beranda Keranjang
belanja Profil
Perusahaan Cara
Pemesanan Cara
Pembayaran Retur Barang Tanya Jawab
Ongkos Hubungi
Kami
Logo dan Nama Toko
Kategori Produk Best Seller
Keranjang Belanja
Chat With Me
Transfer gambar
gambar Gambar logo
Gambar yahoo ...item
Sub total... Gambar
cart
Bahan cvc Bahan full katun
Nama Layar : M092
Ukuran Layar : 1024 X 768
Font : arial
Warna Backgroud : putih, abu-abu
cari
Gambar cari
Alamat tujuan pengiriman
Alamat baru
kembali ke keranjang Lanjutkan
Hallo ... History Pemesanan
Alamat Utama Kontak Anda
Ganti Password Komentar Anda
Informasi Logout
Klik beranda menuju
M13
Klik keranjang belanja menuju M15
Klik profil perusahaan
menuju PN03
Klik cara pemesanan menuju PN04
Klik cara pembayaran
menuju PN05
Klik retur barang menuju PN06
Klik tanya jawab
menuju PN07
Klik ongkos menuju PN08
Klik hubungi kami
menuju PN09
Klik gambar cari menuju PN10
Klik kategori menuju
PN11
Klik gambar menuju M14
Klik history
pemesanan menuju M02
Klik alamat utama
menuju M03
Klik kontak anda menuju M04
Klik ganti password
menuju M05
Klik komentar anda menuju M06
Klik informasi menuju
M07
Klik logout menuju M08
Klik kembali ke
keranjang menuju M15
Klik lanjutkan menuju
M10
Nama lengkap Alamat
Provinsi Kota
Kode pos Handphone
Telepon
Gambar 3.88 Perancangan Antar Muka Alamat Baru
17. Perancangan antar muka form pembayaran Gambar pada 3.89 di bawah ini merupakan perancangan antar muka form
pembayaran pada member yang berfungsi sebagai halaman form pembayaran.
M10
Header
footer
Beranda Keranjang
belanja Profil
Perusahaan Cara
Pemesanan Cara
Pembayaran Retur Barang Tanya Jawab
Ongkos Hubungi
Kami
Logo dan Nama Toko
Kategori Produk Best Seller
Keranjang Belanja
Chat With Me
Transfer gambar
gambar Gambar logo
Gambar yahoo ...item
Sub total... Gambar
cart
Bahan cvc Bahan full katun
Nama Layar : M10
Ukuran Layar : 1024 X 768
Font : arial
Warna Backgroud : putih, abu-abu
cari
Gambar cari
Formulir pembayaran Hallo ...
History Pemesanan Alamat Utama
Kontak Anda Ganti Password
Komentar Anda Informasi
Logout
Klik beranda menuju M13
Klik keranjang belanja
menuju M15
Klik profil perusahaan menuju PN03
Klik cara pemesanan
menuju PN04
Klik cara pembayaran menuju PN05
Klik retur barang menuju
PN06
Klik tanya jawab menuju PN07
Klik ongkos menuju
PN08
Klik hubungi kami menuju PN09
Klik gambar cari menuju
PN10
Klik kategori menuju PN11
Klik gambar menuju
M14
Klik history pemesanan menuju M02
Klik alamat utama
menuju M03
Klik kontak anda menuju M04
Klik ganti password
menuju M05
Klik komentar anda menuju M06
Klik informasi menuju
M07
Klik logout menuju M08
Klik ganti alamat tujuan menuju M09
Klik bayar dan selesai
menuju M11
Klik bayar nanti selesai menuju M11
Detail barang dan detail harga barang Alamat tujuan
Rincian biaya
ganti alamat tujuan Form jenis
pembayaran dengan paypal
Bayar nanti Selesai Bayar dan selesai
Form jenis pembayaran transfer bank dan COD
Gambar 3.89 Perancangan Antar Muka Form Pembayaran
18. Perancangan antar muka konfirmasi pemesanan Gambar pada 3.90 di bawah ini merupakan perancangan antar muka
konfirmasi pemesanan pada member yang berfungsi sebagai halaman konfirmasi telah melakukan pemesanan.
M11
Header
footer
Beranda Keranjang
belanja Profil
Perusahaan Cara
Pemesanan Cara
Pembayaran Retur Barang Tanya Jawab
Ongkos Hubungi
Kami
Logo dan Nama Toko
Kategori Produk Best Seller
Keranjang Belanja
Chat With Me
Transfer gambar
gambar Gambar logo
Gambar yahoo ...item
Sub total... Gambar
cart
Bahan cvc Bahan full katun
Nama Layar : M11
Ukuran Layar : 1024 X 768
Font : arial
Warna Backgroud : putih, abu-abu
cari
Gambar cari
teks
Terima kasih telah berbelanja
Hallo ... History Pemesanan
Alamat Utama Kontak Anda
Ganti Password Komentar Anda
Informasi Logout
Klik beranda menuju
M13
Klik keranjang belanja menuju M15
Klik profil perusahaan
menuju PN03
Klik cara pemesanan menuju PN04
Klik cara pembayaran
menuju PN05
Klik retur barang menuju PN06
Klik tanya jawab
menuju PN07
Klik ongkos menuju PN08
Klik hubungi kami
menuju PN09
Klik gambar cari menuju PN10
Klik kategori menuju
PN11
Klik gambar menuju M14
Klik history
pemesanan menuju M02
Klik alamat utama
menuju M03
Klik kontak anda menuju M04
Klik ganti password
menuju M05
Klik komentar anda menuju M06
Klik informasi menuju
M07
Klik logout menuju M08
Gambar 3.90 Perancangan Antar Muka Konfirmasi Pemesanan
3.2.3.1.4 Perancangan Antar Muka Pengunjung