Header
Main Menu
Login
Yahoo Messenger facebook
Produk Terlaris
Produk Terbaru A05
Registrasi Email :
Password : Konfirmasi password :
Daftar
Registrasi
Nama Lengkap : Alamat :
No Tlp : Propinsi :
Kota : Halaman utama
Tentang Kami Konfirmasi Pembayaran
Produk
Hubungi kami Download Katalog
Klik Halaman Utama menuju A01 Klik Produk menuju A02
Klik Tentang Kami Menuju A03 Klik Hubungi Kami menuju A04
Klik Register menuju A05 Klik download katalog menuju A08
Klik Login menuju A06
Gambar 3.37 Perancangan antarmuka menu Registrasi
3.2.2.2 Perancangan Antarmuka Pelanggan
1. Perancangan Antarmuka Menu Login Berikut dapat dilihat perancangan antarmuka menu login dari
pembangunan aplikasi pemesanan online di distro Blo-on yang tercantum pada gambar 3.38 di bawah ini :
Header
Main Menu
Login
Yahoo Messenger facebook
Produk Terlaris
Produk Terbaru A06
Klik Halaman Utama menuju A01 Klik Produk menuju A02
Klik Tentang Kami Menuju A03 Klik Hubungi Kami menuju A04
Klik Register menuju A05 Klik Login menuju A06
Klik Download Katalog menuju A08 Klik Lupa Password menuju A07
Registrasi
Login Email :
Password : Lupa Password
Login Halaman utama
Tentang Kami Konfirmasi Pembayaran
Produk
Hubungi kami Download Katalog
Gambar 3.38 Perancangan antarmuka menu login 2. Perancangan Antar Muka Menu Lupa Password
Berikut dapat dilihat perancangan antarmuka menu about us dari pembangunan aplikasi pemesanan online di distro Blo-on yang tercantum pada
gambar 3.39 di bawah ini:
Header
Main Menu
Login
Yahoo Messenger facebook
Produk Terlaris
Produk Terbaru A07
Registrasi Email :
Kirim Lupa Password
Halaman utama Tentang Kami
Konfirmasi Pembayaran Produk
Hubungi kami Download Katalog
Klik Halaman Utama menuju A01 Klik Produk menuju A02
Klik Tentang Kami Menuju A03 Klik Hubungi Kami menuju A04
Klik Register menuju A05 Klik Login menuju A06
Klik Download Katalog menuju A08 Klik kirim menuju A06
Gambar 3.39 Perancangan antarmuka menu lupa password 3. Perancangan Antar Muka Menu Halaman Utama Pelanggan
Berikut dapat dilihat perancangan antarmuka menu halaman utama dari pembangunan aplikasi pemesanan online di distro Blo-on yang tercantum
pada gambar 3.40 di bawah ini :
Header
Gambar
Akun Saya
Profil Saya Ganti Password
Catatan Pemesanan Keranjang 0
Logout Text
Produk Terlaris
Produk Terbaru Yahoo Messenger
Anda login sebagai xxxmail.com B01
Klik Halaman Utama menuju B01 Klik Produk menuju B02
Klik Tentang Kami Menuju B03 Klik Hubungi Kami menuju B04
Klik Konfirmasi pembayaran B05 Klik profil saya menuju B06
Klik ganti password menuju B07 Klik catatan pemesanan menuju B08
Klik keranjang belanja menuju B09 Klik logout menuju A01
Main Menu
facebook Halaman utama
Tentang Kami Konfirmasi Pembayaran
Produk Hubungi kami
Download Katalog Catatan Belanja
Verifikasi Penerimaan
Gambar 3.40 Perancangan antarmuka menu halaman utama 4. Perancangan Antar Muka Menu Profil Saya
Berikut dapat dilihat perancangan antarmuka menu profil saya dari pembangunan aplikasi pemesanan online di distro Blo-on yang tercantum pada
gambar 3.41 di bawah ini :
Header
Akun Saya
Produk Terlaris
Produk Terbaru Yahoo Messenger
Anda login sebagai xxxmail.com B07
Main Menu
facebook Nama :
Email : Alamat :
Kota :
Ubah Nomor Telepone :
Halaman utama Tentang Kami
Konfirmasi Pembayaran Produk
Hubungi kami Download Katalog
Profil Saya Klik Halaman Utama menuju B01
Klik Produk menuju B02 Klik Download Katalog B03
Klik Tentang Kami Menuju B04 Klik Hubungi Kami menuju B05
Klik Konfirmasi pembayaran menuju B06 Klik profil saya menuju B07
Klik Ubah menuju B08 Klik ganti password menuju B09
Klik Catatan belanja menuju B10 Klik catatan pemesanan menuju B11
Klik Verifikasi menuju B12 Klik keranjang belanja menuju B13
Klik Retur menuju B15 Klik logout menuju A01
Profil Saya Ganti Password
Catatan Pemesanan Keranjang 0
Logout Catatan Belanja
Verifikasi Penerimaan Retur
Gambar 3.41 Perancangan antarmuka menu profil saya
5. Perancangan Antar Muka Ubah Profil Saya Berikut dapat dilihat perancangan antarmuka menu ubah profil saya
dari pembangunan aplikasi pemesanan online di distro Blo-on yang tercantum pada gambar 3.42 di bawah ini :
Header
Akun Saya
Produk Terlaris
Produk Terbaru Yahoo Messenger
Anda login sebagai xxxmail.com B08
Main Menu
facebook Nama
Email Alamat
Kota Simpan
Nomor Telepone : Halaman utama
Tentang Kami Konfirmasi Pembayaran
Produk Hubungi kami
Download Katalog Profil Saya
Batal Klik Halaman Utama menuju B01
Klik Produk menuju B02 Klik Download Katalog B03
Klik Tentang Kami Menuju B04 Klik Hubungi Kami menuju B05
Klik Konfirmasi pembayaran menuju B06 Klik profil saya menuju B07
Klik Simpan menuju B07 Klik ganti password menuju B09
Klik Catatan belanja menuju B10 Klik catatan pemesanan menuju B11
Klik Verifikasi menuju B12 Klik keranjang belanja menuju B13
Klik Retur menuju B15 Klik logout menuju A01
Profil Saya Ganti Password
Catatan Pemesanan Keranjang 0
Logout Catatan Belanja
Verifikasi Penerimaan Retur
Gambar 3.42 Perancangan antarmuka ubah profil saya 6. Perancangan Antarmuka Menu Ganti Password
Berikut dapat dilihat perancangan antarmuka menu ganti password dari pembangunan aplikasi pemesanan online di distro Blo-on yang tercantum
pada gambar 3.43 di bawah ini :
Header
Akun Saya
Produk Terlaris
Produk Terbaru Yahoo Messenger
Anda login sebagai xxxmail.com B09
Main Menu
facebook Password Lama
Masukkan Password Baru update
Konfirmasi Password Ganti Password
Halaman utama Tentang Kami
Konfirmasi Pembayaran Produk
Hubungi kami Download Katalog
Profil Saya Ganti Password
Catatan Pemesanan Keranjang 0
Logout Catatan Belanja
Verifikasi Penerimaan Klik Halaman Utama menuju B01
Klik Produk menuju B02 Klik Download Katalog B03
Klik Tentang Kami Menuju B04 Klik Hubungi Kami menuju B05
Klik Konfirmasi pembayaran menuju B06 Klik profil saya menuju B07
Klik ganti password menuju B09 Klik Catatan belanja menuju B10
Klik catatan pemesanan menuju B11 Klik Verifikasi menuju B12
Klik keranjang belanja menuju B13 Klik logout menuju A01
Gambar 3.43 Perancangan antarmuka menu ganti password 7. Perancangan Antarmuka Menu Catatan Pemesanan
Berikut dapat dilihat perancangan antarmuka menu catatan pemesanan dari pembangunan aplikasi pemesanan online di distro Blo-on yang tercantum
pada gambar 3.44 di bawah ini :
Header
Akun Saya
Produk Terlaris
Produk Terbaru Yahoo Messenger
Anda login sebagai xxxmail.com B11
Main Menu
facebook No
Kode Pesanan Tanggal
Jam Pembayaran
Status Catatan Pemesanan
Halaman utama Tentang Kami
Konfirmasi Pembayaran Produk
Hubungi kami Download Katalog
Klik Halaman Utama menuju B01 Klik Produk menuju B02
Klik Download Katalog B03 Klik Tentang Kami Menuju B04
Klik Hubungi Kami menuju B05 Klik Konfirmasi pembayaran menuju B06
Klik profil saya menuju B07 Klik ganti password menuju B09
Klik Catatan belanja menuju B10 Klik catatan pemesanan menuju B11
Klik Verifikasi menuju B12 Klik keranjang belanja menuju B13
Klik Retur menuju B15 Klik logout menuju A01
Profil Saya Ganti Password
Catatan Pemesanan Keranjang 0
Logout Catatan Belanja
Verifikasi Penerimaan Retur
Gambar 3.44 Perancangan antarmuka menu catatan pemesanan
8. Perancangan Antarmuka Menu Produk Berikut dapat dilihat perancangan antarmuka menu Produk dari
pembangunan aplikasi pemesanan online di distro Blo-on yang tercantum pada gambar 3.45 di bawah ini :
Header
Akun Saya
Produk Terlaris
Produk Terbaru Yahoo Messenger
Anda login sebagai xxxmail.com B02
Klik Halaman Utama menuju B01 Klik Produk menuju B02
Klik Download Katalog B03 Klik Tentang Kami Menuju B04
Klik Hubungi Kami menuju B05 Klik Konfirmasi pembayaran menuju B06
Klik profil saya menuju B07 Klik ganti password menuju B09
Klik Catatan belanja menuju B10 Klik catatan pemesanan menuju B11
Klik Verifikasi menuju B12 Klik keranjang belanja menuju B13
Klik Retur menuju B15 Klik logout menuju A01
Main Menu
facebook Gambar Produk
Detail Ukuran harga
Ukuran harga Ukuran harga
Gambar Produk
Detail Ukuran harga
Ukuran harga Ukuran harga
Gambar Produk
Detail Ukuran harga
Ukuran harga Ukuran harga
Gambar Produk
Detail Ukuran harga
Ukuran harga Ukuran harga
Halaman utama Tentang Kami
Konfirmasi Pembayaran Produk
Hubungi kami Download Katalog
Produk Profil Saya
Ganti Password Catatan Pemesanan
Keranjang 0 Logout
Catatan Belanja Verifikasi Penerimaan
Retur
Gambar 3.45 Perancangan antarmuka menu Produk 9. Perancangan Antarmuka Menu Pemesanan
Berikut dapat dilihat perancangan antarmuka menu data pengiriman dari pembangunan aplikasi pemesanan online di distro Blo-on yang tercantum
pada gambar 3.46 di bawah ini :
Header
Akun Saya
Produk Terlaris
Informasi
Produk Terbaru Yahoo Messenger
Anda login sebagai xxxmail.com B14
Main Menu
facebook Gambar Produk
Kode produk : Harga
Ukuran QTY
Beli Halaman utama
Tentang Kami Konfirmasi Pembayaran
Produk Hubungi kami
Download Katalog Klik Halaman Utama menuju B01
Klik Produk menuju B02 Klik Download Katalog B03
Klik Tentang Kami Menuju B04 Klik Hubungi Kami menuju B05
Klik Konfirmasi pembayaran menuju B06 Klik profil saya menuju B07
Klik ganti password menuju B09 Klik Catatan belanja menuju B10
Klik catatan pemesanan menuju B11 Klik Verifikasi menuju B12
Klik keranjang belanja menuju B13 Klik Retur menuju B15
Klik logout menuju A01 Profil Saya
Ganti Password Catatan Pemesanan
Keranjang 0 Logout
Catatan Belanja Verifikasi Penerimaan
Retur
Gambar 3.46 Perancangan antarmuka menu Menu Pemesanan 10. Perancangan Antarmuka Keranjang Belanja
Berikut dapat dilihat perancangan antarmuka Keranjang Belanja dari pembangunan aplikasi pemesanan online di distro Blo-on yang tercantum pada
gambar 3.47 di bawah ini :
Header
Akun Saya
Produk Terlaris
Produk Terbaru Yahoo Messenger
Anda login sebagai xxxmail.com B13
Main Menu
facebook No
Nama Barang Harga
QTY Jumlah
Lanjut Belanja Total Belanja :
Jenis Pengiriman REG
YES Pilih Kota Tujuan
[Pilih Kota]
Ongkos Kirim
Total Pembayaran
Pilih Cara Pembayaran Via Paypal
Via Rekening Checkout
Batalkan Keranjang
Halaman utama Tentang Kami
Konfirmasi Pembayaran Produk
Hubungi kami Download Katalog
Klik Halaman Utama menuju B01 Klik Produk menuju B02
Klik Download Katalog B03 Klik Tentang Kami Menuju B04
Klik Hubungi Kami menuju B05 Klik Konfirmasi pembayaran menuju B06
Klik profil saya menuju B07 Klik ganti password menuju B09
Klik Catatan belanja menuju B10 Klik catatan pemesanan menuju B11
Klik Verifikasi menuju B12 Klik keranjang belanja menuju B13
Klik Retur menuju B15 Klik logout menuju A01
Profil Saya Ganti Password
Catatan Pemesanan Keranjang 0
Logout Catatan Belanja
Verifikasi Penerimaan Retur
Gambar 3.47 Perancangan antarmuka Keranjang Belanja 11. Perancangan Antarmuka Catatan Belanja
Berikut dapat dilihat perancangan antarmuka catatan belanja dari pembangunan aplikasi pemesanan online di distro Blo-on yang tercantum pada
gambar 3.48 di bawah ini :
Header
Akun Saya
Produk Terlaris
Produk Terbaru Yahoo Messenger
Anda login sebagai xxxmail.com B10
Main Menu
facebook Sub Jumlah
No Nama Barang
Harga QTY
Jumlah Catatan Belanja
Halaman utama Tentang Kami
Konfirmasi Pembayaran Produk
Hubungi kami Download Katalog
Ongkos Kirim Subtotal
No. Transaksi : Tanggal Pesan :
Jam Pesan : Pembayaran :
Kode Pemesanan :
Tanggal Bayar : Jenis Pengiriman :
Nama : Email :
Alamat : Klik Halaman Utama menuju B01
Klik Produk menuju B02 Klik Download Katalog B03
Klik Tentang Kami Menuju B04 Klik Hubungi Kami menuju B05
Klik Konfirmasi pembayaran menuju B06 Klik profil saya menuju B07
Klik ganti password menuju B09 Klik Catatan belanja menuju B10
Klik catatan pemesanan menuju B11 Klik Verifikasi menuju B12
Klik keranjang belanja menuju B13 Klik Retur menuju B15
Klik logout menuju A01 Profil Saya
Ganti Password Catatan Pemesanan
Keranjang 0 Logout
Catatan Belanja Verifikasi Penerimaan
Retur
Gambar 3.48 Perancangan antarmuka catatan belanja 12. Perancangan Antarmuka Verifikasi Penerimaan
Berikut dapat dilihat perancangan antarmuka verifikasi penerimaan dari pembangunan aplikasi pemesanan online di distro Blo-on yang tercantum
pada gambar 3.49 di bawah ini :
Header
Akun Saya
Produk Terlaris
Produk Terbaru Yahoo Messenger
Anda login sebagai xxxmail.com B12
Main Menu
facebook Sub Jumlah
No Nama Barang
Harga QTY
Jumlah Catatan Belanja
Halaman utama Tentang Kami
Konfirmasi Pembayaran Produk
Hubungi kami Download Katalog
Ongkos Kirim Subtotal
No Kode Pesanan
Tanggal kirim Aksi
Diterima Detail Barang
Ya Tidak
Klik Halaman Utama menuju B01 Klik Produk menuju B02
Klik Download Katalog B03 Klik Tentang Kami Menuju B04
Klik Hubungi Kami menuju B05 Klik Konfirmasi pembayaran menuju B06
Klik profil saya menuju B07 Klik ganti password menuju B09
Klik Catatan belanja menuju B10 Klik catatan pemesanan menuju B11
Klik Verifikasi menuju B12 Klik keranjang belanja menuju B13
Klik Retur menuju B15 Klik logout menuju A01
Profil Saya Ganti Password
Catatan Pemesanan Keranjang 0
Logout Catatan Belanja
Verifikasi Penerimaan Retur
Gambar 3.49 Perancangan verifikasi penerimaan 13. Perancangan Antarmuka Konfirmasi Pembayaran
Berikut dapat dilihat perancangan antarmuka konfirmasi pembayaran dari pembangunan aplikasi pemesanan online di distro Blo-on yang tercantum
pada gambar 3.50 di bawah ini :
Header
Akun Saya
Produk Terlaris
Produk Terbaru Yahoo Messenger
Anda login sebagai xxxmail.com B12
Main Menu
facebook Sub Jumlah
No Nama Barang
Harga QTY
Jumlah Catatan Belanja
Halaman utama Tentang Kami
Konfirmasi Pembayaran Produk
Hubungi kami Download Katalog
Ongkos Kirim Subtotal
No Kode Pesanan
Tanggal kirim Aksi
Diterima Detail Barang
Ya Tidak
Klik Halaman Utama menuju B01 Klik Produk menuju B02
Klik Download Katalog B03 Klik Tentang Kami Menuju B04
Klik Hubungi Kami menuju B05 Klik Konfirmasi pembayaran menuju B06
Klik profil saya menuju B07 Klik ganti password menuju B09
Klik Catatan belanja menuju B10 Klik catatan pemesanan menuju B11
Klik Verifikasi menuju B12 Klik keranjang belanja menuju B13
Klik Retur menuju B15 Klik logout menuju A01
Profil Saya Ganti Password
Catatan Pemesanan Keranjang 0
Logout Catatan Belanja
Verifikasi Penerimaan Retur
Gambar 3.50 Perancangan konfirmasi pembayaran
14. Perancangan Antarmuka Retur Berikut dapat dilihat perancangan antarmuka retur dari pembangunan
aplikasi pemesanan online di distro Blo-on yang tercantum pada gambar 3.51 di bawah ini :
Header
Akun Saya
Produk Terlaris
Produk Terbaru Yahoo Messenger
Anda login sebagai xxxmail.com B15
Main Menu
facebook Kode Pesanan :
Opsi Retur : Proses
Retur
Halaman utama Tentang Kami
Konfirmasi Pembayaran Produk
Hubungi kami Download Katalog
Klik Halaman Utama menuju B01 Klik Produk menuju B02
Klik Download Katalog B03 Klik Tentang Kami Menuju B04
Klik Hubungi Kami menuju B05 Klik Konfirmasi pembayaran menuju B06
Klik profil saya menuju B07 Klik ganti password menuju B09
Klik Catatan belanja menuju B10 Klik catatan pemesanan menuju B11
Klik Verifikasi menuju B12 Klik keranjang belanja menuju B13
Klik Retur menuju B15 Klik proses menuju detail retur B16
Klik logout menuju A01
Profil Saya Ganti Password
Catatan Pemesanan Keranjang 0
Logout Catatan Belanja
Verifikasi Penerimaan Retur
Gambar 3.51 perancangan antarmuka retur 15. Perancangan Antarmuka Detail Retur
Berikut dapat dilihat perancangan antarmuka detail retur dari pembangunan aplikasi pemesanan online di distro Blo-on yang tercantum pada
gambar 3.52 di bawah ini :
Header
Akun Saya
Produk Terlaris
Produk Terbaru Yahoo Messenger
Anda login sebagai xxxmail.com B16
Main Menu
facebook Tanggal :
No. Retur Kode Pemesanan :
Opsi Retur Status Retur
Halaman utama Tentang Kami
Konfirmasi Pembayaran Produk
Hubungi kami Download Katalog
Retur Klik Halaman Utama menuju B01
Klik Produk menuju B02 Klik Download Katalog B03
Klik Tentang Kami Menuju B04 Klik Hubungi Kami menuju B05
Klik Konfirmasi pembayaran menuju B06 Klik profil saya menuju B07
Klik Ubah menuju B08 Klik ganti password menuju B09
Klik Catatan belanja menuju B10 Klik catatan pemesanan menuju B11
Klik Verifikasi menuju B12 Klik keranjang belanja menuju B13
Klik Retur menuju B15 Klik logout menuju A01
Nama Barang Harga
QTY Yang di retur
Proses Batal
Profil Saya Ganti Password
Catatan Pemesanan Keranjang 0
Logout Catatan Belanja
Verifikasi Penerimaan Retur
Gambar 3.52 perancangan antarmuka detail retur
3.2.2.3 Perancangan Antarmuka Administrator
