Perancangan Antar Muka Pelanggan

3. Perancangan Antar Muka Pelanggan

Antar muka login pelanggan M01 Ini adalah tampilan login pelanggan yang terdiri dari data masukan seperti email, password, tombol login dan tombol lupa password Header footer Beranda Produk Bantuan Tentang kami Kontak kami Keranjang belanja daftar | login Kategori -lemari -kursi -meja Layanan pembayaran Tranfer bank -no rekening - atas nama Internet payment - paypal M01 Alamat : Login pelanggan Email : Password : login Lupa password Navigasi : 1. Klik tombol beranda menuju tampilan M02 2. Klik tombol produk menuju tampilan M03 3. Klik link detail produk menuju tampilan M04 4. Klik tombol bantuan menuju tampilan M05 5. Klik tombol tentang kami menuju tampilan M06 6. Klik tombol kontak kami menuju tampilan M07 7. Klik link login menuju tampilan M01 Gambar 3-66 Tampilan Login Pelanggan Antar muka beranda M02 Ini adalah tampilan menu beranda yang terdiri dari tampilan produk, menu, tombol login, dan tombol daftar. Header footer Beranda Produk Bantuan Tentang kami Kontak kami Keranjang belanja slamat datang : ramdani | logout Kategori -lemari -kursi -meja Layanan pembayaran Tranfer bank -no rekening - atas nama Internet payment - paypal SELAMAT DATANG DI WEBSITE INDAH FURNITURE Chat Yahoo Messenger email Produk terbaru Produk terlaris Produk banyak dilihat Produk diskon M02 Detail produk Detail produk Detail produk Detail produk Nama produk harga Nama produk harga Nama produk harga Data pesanan Data retur Data akun Navigasi : 1. Klik tombol beranda menuju tampilan M02 2. Klik tombol produk menuju tampilan M03 3. Klik link detail produk menuju tampilan M04 4. Klik tombol bantuan menuju tampilan M05 5. Klik tombol tentang kami menuju tampilan M06 6. Klik tombol kontak kami menuju tampilan M07 7. Klik tombol data pesanan menuju tampilan M08 8. Klik tombol data retur menuju tampilan M09 9. Klik tombol data akun menuju tampilan M10 10. Klik tombol keranjang belanja menuju tampilan M11 11. Klik link login menuju tampilan M01 Gambar 3-67 Tampilan Beranda Antar muka produk M03 Ini adalah tampilan menu produk yang terdiri dari produk yang dijual, tombol detail produk, dan cari data Header footer Beranda Produk Bantuan Tentang kami Kontak kami Keranjang belanja selamat datang : ramdani | logout Kategori -lemari -kursi -meja Layanan pembayaran Tranfer bank -no rekening - atas nama Internet payment - paypal M03 Detail produk Detail produk Detail produk Detail produk Nama produk harga Nama produk harga Nama produk harga Nama produk harga cari Data pesanan Data retur Data akun Navigasi : 1. Klik tombol beranda menuju tampilan M02 2. Klik tombol produk menuju tampilan M03 3. Klik link detail produk menuju tampilan M04 4. Klik tombol bantuan menuju tampilan M05 5. Klik tombol tentang kami menuju tampilan M06 6. Klik tombol kontak kami menuju tampilan M07 7. Klik tombol data pesanan menuju tampilan M08 8. Klik tombol data retur menuju tampilan M09 9. Klik tombol data akun menuju tampilan M10 10. Klik tombol keranjang belanja menuju tampilan M11 11. Klik link login menuju tampilan M01 Gambar 3-68 Tampilan Produk Antar muka detail produk M04 Ini adalah tampilan detail produk yang terdiri dari produk, tombol simpan keranjang dan kembali Header footer Beranda Produk Bantuan Tentang kami Kontak kami Keranjang belanja selamat datang : ramdani | logout Kategori -lemari -kursi -meja Layanan pembayaran Tranfer bank -no rekening - atas nama Internet payment - paypal M04 Gambar produk Nama produk Kategori produk Diskon : Stok : Harga : Rp Keterangan : Jumlah pesanan qty : Simpan kekeranjang belanja kembali Data pesanan Data retur Data akun Navigasi : 1. Klik tombol beranda menuju tampilan M02 2. Klik tombol produk menuju tampilan M03 3. Klik link detail produk menuju tampilan M04 4. Klik tombol bantuan menuju tampilan M05 5. Klik tombol tentang kami menuju tampilan M06 6. Klik tombol kontak kami menuju tampilan M07 7. Klik tombol data pesanan menuju tampilan M08 8. Klik tombol data retur menuju tampilan M09 9. Klik tombol data akun menuju tampilan M10 10. Klik tombol keranjang belanja menuju tampilan M11 11. Klik link login menuju tampilan M01 12. Klik tombol kembali menuju tampilan M03 Gambar 3-69 Tampilan Detail Produk Antar muka bantuan M05 Ini adalah tampilan bantuan yang terdiri dari data bantuan cara berbelanja di website ini Header footer Beranda Produk Bantuan Tentang kami Kontak kami Keranjang belanja selamat datang : ramdani | logout Kategori -lemari -kursi -meja Layanan pembayaran Tranfer bank -no rekening - atas nama Internet payment - paypal M05 Bantuan Data pesanan Data retur Data akun Navigasi : 1. Klik tombol beranda menuju tampilan M02 2. Klik tombol produk menuju tampilan M03 3. Klik link detail produk menuju tampilan M04 4. Klik tombol bantuan menuju tampilan M05 5. Klik tombol tentang kami menuju tampilan M06 6. Klik tombol kontak kami menuju tampilan M07 7. Klik tombol data pesanan menuju tampilan M08 8. Klik tombol data retur menuju tampilan M09 9. Klik tombol data akun menuju tampilan M10 10. Klik tombol keranjang belanja menuju tampilan M11 11. Klik link login menuju tampilan M01 Gambar 3-70 Tampilan Bantuan Antar muka tentang kami M06 Ini adalah tapilan tentang kami yang berisi data perusahaan dan produk yang dijual. Header footer Beranda Produk Bantuan Tentang kami Kontak kami Keranjang belanja selamat datang : ramdani | logout Kategori -lemari -kursi -meja Layanan pembayaran Tranfer bank -no rekening - atas nama Internet payment - paypal M06 Tentang kami Data pesanan Data retur Data akun Navigasi : 1. Klik tombol beranda menuju tampilan M02 2. Klik tombol produk menuju tampilan M03 3. Klik link detail produk menuju tampilan M04 4. Klik tombol bantuan menuju tampilan M05 5. Klik tombol tentang kami menuju tampilan M06 6. Klik tombol kontak kami menuju tampilan M07 7. Klik tombol data pesanan menuju tampilan M08 8. Klik tombol data retur menuju tampilan M09 9. Klik tombol data akun menuju tampilan M10 10. Klik tombol keranjang belanja menuju tampilan M11 11. Klik link login menuju tampilan M01 Gambar 3-71 Tampilan Tentang Kami Antar muka kontak kami M07 Ini adalah tampilan kontak kami yang berisi no telepon dan cara pembayaran Header footer Beranda Produk Bantuan Tentang kami Kontak kami Keranjang belanja selamat datang : ramdani | logout Kategori -lemari -kursi -meja Layanan pembayaran Tranfer bank -no rekening - atas nama Internet payment - paypal M07 Kontak kami Data pesanan Data retur Data akun Navigasi : 1. Klik tombol beranda menuju tampilan M02 2. Klik tombol produk menuju tampilan M03 3. Klik link detail produk menuju tampilan M04 4. Klik tombol bantuan menuju tampilan M05 5. Klik tombol tentang kami menuju tampilan M06 6. Klik tombol kontak kami menuju tampilan M07 7. Klik tombol data pesanan menuju tampilan M08 8. Klik tombol data retur menuju tampilan M09 9. Klik tombol data akun menuju tampilan M10 10. Klik tombol keranjang belanja menuju tampilan M11 11. Klik link login menuju tampilan M01 Gambar 3-72 Tampilan Kontak Kami Antar muka data pesanan M08 Header footer Beranda Produk Bantuan Tentang kami Kontak kami Keranjang belanja selamat datang : ramdani | logout Kategori -lemari -kursi -meja Layanan pembayaran Tranfer bank -no rekening - atas nama Internet payment - paypal M08 Data pesanan Data pesanan Data retur Data akun No. pesanan tanggal status pesanan status pembayaran status pengiriman total belanja aksi √ Ξ X No pesanan cari Navigasi : 1. Klik tombol beranda menuju tampilan M02 2. Klik tombol produk menuju tampilan M03 3. Klik link detail produk menuju tampilan M04 4. Klik tombol bantuan menuju tampilan M05 5. Klik tombol tentang kami menuju tampilan M06 6. Klik tombol kontak kami menuju tampilan M07 7. Klik tombol data pesanan menuju tampilan M08 8. Klik tombol data retur menuju tampilan M09 9. Klik tombol data akun menuju tampilan M10 10. Klik tombol keranjang belanja menuju tampilan M11 11. Klik link login menuju tampilan M01 12. Klik tombol √ menuju tampilan M 13. Klik tombol Ξ menuju tampilan M 14. Klik tombol X untuk menghapus data pesanan Gambar 3-73 Tampilan Data Pesanan Antar muka data keranjang belanja M11 Ini adalah tampilan keranjang belanja yang terdiri dari data produk yang dibeli, tombol checkout dan tombol kembali Header footer Produk Bantuan Tentang kami Kontak kami Keranjang belanja selamat datang : ramdani | logout Kategori -lemari -kursi -meja Layanan pembayaran Tranfer bank -no rekening - atas nama Internet payment - paypal M09 Keranjang belanja Data pesanan Data retur Data akun Nama produk hapus diskon qty harga total hapus update Belanja lagi checkout Navigasi : 1. Klik tombol beranda menuju tampilan M02 2. Klik tombol produk menuju tampilan M03 3. Klik link detail produk menuju tampilan M04 4. Klik tombol bantuan menuju tampilan M05 5. Klik tombol tentang kami menuju tampilan M06 6. Klik tombol kontak kami menuju tampilan M07 7. Klik tombol data pesanan menuju tampilan M08 8. Klik tombol data retur menuju tampilan M09 9. Klik tombol data akun menuju tampilan M10 10. Klik tombol keranjang belanja menuju tampilan M11 11. Klik link login menuju tampilan M01 12. Klik tombol belanja lagi menuju tampilan M04 13. Klick tombol check out menuju tampilan M12 Gambar 3-74 Tampilan Data Keranjang Belanja Antar muka data checkout M12 Ini adalah tampilan checkout yang terdir dari data alamat pelanggan, tombol kembali, dan tombol konfirmasi pembelian Header footer Produk Bantuan Tentang kami Kontak kami Keranjang belanja selamat datang : ramdani | logout Kategori -lemari -kursi -meja Layanan pembayaran Tranfer bank -no rekening - atas nama Internet payment - paypal M12 Data pengiriman Data pesanan Data retur Data akun Kembali checkout Data pengiriman Alamat tujuan : Nama penerima : Alamat : Provinsi : Kabupaten kota : Kode pos : No telp hp : Keterangan : ……. Navigasi : 1. Klik tombol beranda menuju tampilan M02 2. Klik tombol produk menuju tampilan M03 3. Klik link detail produk menuju tampilan M04 4. Klik tombol bantuan menuju tampilan M05 5. Klik tombol tentang kami menuju tampilan M06 6. Klik tombol kontak kami menuju tampilan M07 7. Klik tombol data pesanan menuju tampilan M08 8. Klik tombol data retur menuju tampilan M09 9. Klik tombol data akun menuju tampilan M10 10. Klik tombol keranjang belanja menuju tampilan M11 11. Klik link login menuju tampilan M01 12. Klik tombol kembali menuju tampilan M11 13. 14. Klick tombol check out menuju tampilan M13 Gambar 3-75 Tampilan Data checkout Antar muka data selesai belanja M13 Ini adalah tampilan jika sudah selesai ber belanja Header footer Produk Bantuan Tentang kami Kontak kami Keranjang belanja selamat datang : ramdani | logout Kategori -lemari -kursi -meja Layanan pembayaran Tranfer bank -no rekening - atas nama Internet payment - paypal M13 selesai Data pesanan Data retur Data akun Terimakasi telah melakukan pemesanan Pesanan sudah kami terima, silahkan periksa email anda kami telah mengirimkan data pesanan ke email anda. Untuk melakukan pembayaran silahkan tunggu 1x24 jam dengan syarat sudah melakukan negoisasi ongkos kirim dengan pihak kami. Setelah 1x24jam pelanggan dapat melakukan pembayaran dengan cara klik tombol DATA PESANAN yang ada di menu bagian atas Navigasi : 1. Klik tombol beranda menuju tampilan M02 2. Klik tombol produk menuju tampilan M03 3. Klik link detail produk menuju tampilan M04 4. Klik tombol bantuan menuju tampilan M05 5. Klik tombol tentang kami menuju tampilan M06 6. Klik tombol kontak kami menuju tampilan M07 7. Klik tombol data pesanan menuju tampilan M08 8. Klik tombol data retur menuju tampilan M09 9. Klik tombol data akun menuju tampilan M10 10. Klik tombol keranjang belanja menuju tampilan M11 11. Klik link login menuju tampilan M01 12. Klik tombol kembali menuju tampilan M11 13. 14. Klick tombol check out menuju tampilan M13 Gambar 3-76 Tampilan Data selesai belanja

4. Perancangan Pesan