Perancangan Antarmuka Pengunjung Membangun Aplikasi E-Commerce Di Toko Bocah Cilik

2. Perancangan Antarmuka Pengunjung

Antarmuka Home P01 P01 BANNER HOME | PRODUK | CARA PEMESANAN | CARA PEMBAYARAN | SYARAT KONDISI | TESTIMONI FOOTER TESTIMONI PRODUK KATEGORI PRODUK TERLARIS Kategori Kategori Icon SHOPPING CART KOSONG PRODUK TERBARU Find Us on facebook Daftar Member Login Semua Produk Produk Terbaru Produk Diskon LAYANAN PENGIRIMAN Navigasi : - Klik menu Daftar Member untuk menuju P02 - Klik menu Login untuk menuju P03 - Klik menu Home untuk Menuju P01 - Klik menu Produk untuk menuju P04 - Klik menu Cara Pemesanan untuk menuju P05 - Klik menu Cara Pembayaran untuk menuju P06 - Klik menu Syarat Kondisi untuk menuju P07 - Klik menu Testimoni untuk menuju P08 - Klik tombol detail untuk menuju P09 - Klik tab Semua Produk untuk menampilkan semua data produk pada isi content tab. - Klik tab Produk Terbaru untuk menampilkan semua data produk pada isi content tab. - Klik tab Produk Diskon untuk menampilkan semua data produk pada isi content tab. - Dalam kondisi belum login, ketika klik tombol Beli akan tampiln P02 - Klik link Cari Lebih Detail untuk menuju P10 GAMBAR harga Beli Detail GAMBAR harga Beli Detail GAMBAR harga Beli Detail GAMBAR harga Beli Detail Isi Content Tab Cari Produk : cari [ Cari Lebih Detail ] LAYANAN PEMBAYARAN LINK INFO IBU DAN ANAK KONTAK KAMI Gambar 3. 60 Antarmuka Home P01 Perancangan Antarmuka Pendaftaran Member P02 P02 BANNER HOME | PRODUK | CARA PEMESANAN | CARA PEMBAYARAN | SYARAT KONDISI | TESTIMONI FOOTER TESTIMONI PRODUK TERLARIS Icon SHOPPING CART KOSONG PRODUK TERBARU Find Us on facebook Daftar Member Login Navigasi : - Klik menu Daftar Member untuk menuju P02 - Klik menu Login untuk menuju P03 - Klik menu Home untuk Menuju P01 - Klik menu Produk untuk menuju P04 - Klik menu Cara Pemesanan untuk menuju P05 - Klik menu Cara Pembayaran untuk menuju P06 - Klik menu Syarat Kondisi untuk menuju P07 - Klik menu Testimoni untuk menuju P08 - Klik link Cari Lebih Detail untuk menuju P10 - Jika fild belum terisi tampil MSG01 - Jika format penulisan email salah tampil MSG02 - Jika persetujuan belum disetujui tampil MSG03 - Klik tombol batal untuk mereset form - Klik tombol simpan untuk memproses pendaftaran. - Jika proses pendaftaran berhasil tampil MSG04 Cari Produk : cari [ Cari Lebih Detail ] PENDAFTARAN MEMBER Berikut ini adalah Formulir Pendaftaran Member www.toko-bocahcilik.com. Isi formulir pendaftaran ini dengan data yang benar. Pada groupbox informasi login Email harus diisi dengan email anda. Isikan data pribadi anda dengan lengkap dan benar pada groupbox informasi personal. Untuk informasi tentang Cara Pendaftaran, Keuntungan menjadi Member dan Fasilitas Member klik disini Email Password Ulang Password Informasi Login Submit Batal Nama Depanl Nama Belakang Jenis Kelamin Informasi Personal Alamat Provinsi Kota Kode Pos Isi dengan angka 0-9 No. telp Isi dengan angka 0-9 No. Handphone Isi dengan angka 0-9 Persetujuan Apakah anda setuju syarat dan kondisi tersebut Ya PRODUK KATEGORI Kategori Kategori LAYANAN PENGIRIMAN LAYANAN PEMBAYARAN LINK INFO IBU DAN ANAK KONTAK KAMI Gambar 3. 61 Antar Muka Pendaftaran Member P02 Perancangan Antarmuka Login Member P03 P03 BANNER HOME | PRODUK | CARA PEMESANAN | CARA PEMBAYARAN | SYARAT KONDISI | TESTIMONI FOOTER TESTIMONI PRODUK KATEGORI PRODUK TERLARIS Kategori Kategori Icon SHOPPING CART KOSONG PRODUK TERBARU Find Us on facebook Daftar Member Login LAYANAN PENGIRIMAN Navigasi : - Klik menu Daftar Member untuk menuju P02 - Klik menu Login untuk menuju P03 - Klik menu Home untuk Menuju P01 - Klik menu Produk untuk menuju P04 - Klik menu Cara Pemesanan untuk menuju P05 - Klik menu Cara Pembayaran untuk menuju P06 - Klik menu Syarat Kondisi untuk menuju P07 - Klik menu Testimoni untuk menuju P08 - Klik link Cari Lebih Detail untuk menuju P10 - Klik tombol login untuk memproses login. - Jika proses login gagal tampil MSG05 - Klik lupa password untuk menuju P11 Cari Produk : cari [ Cari Lebih Detail ] LAYANAN PEMBAYARAN LINK INFO IBU DAN ANAK KONTAK KAMI Gambar Login... Email : Password Login Jika anda belum menjadi member, silahkan klik DAFTAR Lupa password Gambar 3. 62 Perancangan Antarmuka Login Member P03 Perancangan Antarmuka Produk P04 P04 BANNER HOME | PRODUK | CARA PEMESANAN | CARA PEMBAYARAN | SYARAT KONDISI | TESTIMONI FOOTER TESTIMONI PRODUK KATEGORI PRODUK TERLARIS Kategori Kategori Icon SHOPPING CART KOSONG PRODUK TERBARU Find Us on facebook Daftar Member Login LAYANAN PENGIRIMAN Navigasi : - Klik menu Daftar Member untuk menuju P02 - Klik menu Login untuk menuju P03 - Klik menu Home untuk Menuju P01 - Klik menu Produk untuk menuju P04 - Klik menu Cara Pemesanan untuk menuju P05 - Klik menu Cara Pembayaran untuk menuju P06 - Klik menu Syarat Kondisi untuk menuju P07 - Klik menu Testimoni untuk menuju P08 - Klik tombol detail untuk menuju P09 - Dalam kondisi belum login, ketika klik tombol Beli akan tampiln P02 - Klik tombol detail untuk menuju P09 - Klik link Cari Lebih Detail untuk menuju P10 GAMBAR harga Beli Detail GAMBAR harga Beli Detail GAMBAR harga Beli Detail GAMBAR harga Beli Detail Cari Produk : cari [ Cari Lebih Detail ] LAYANAN PEMBAYARAN LINK INFO IBU DAN ANAK KONTAK KAMI HOME PRODUK Gambar 3. 63 Perancangan Antarmuka Produk P04 Perancangan Antarmuka Cara Belanja P05 P05 BANNER HOME | PRODUK | CARA PEMESANAN | CARA PEMBAYARAN | SYARAT KONDISI | TESTIMONI FOOTER TESTIMONI PRODUK KATEGORI PRODUK TERLARIS Kategori Kategori Icon SHOPPING CART KOSONG PRODUK TERBARU Find Us on facebook Daftar Member Login LAYANAN PENGIRIMAN Navigasi : - Klik menu Daftar Member untuk menuju P02 - Klik menu Login untuk menuju P03 - Klik menu Home untuk Menuju P01 - Klik menu Produk untuk menuju P04 - Klik menu Cara Pemesanan untuk menuju P05 - Klik menu Cara Pembayaran untuk menuju P06 - Klik menu Syarat Kondisi untuk menuju P07 - Klik menu Testimoni untuk menuju P08 - Klik link Cari Lebih Detail untuk menuju P10 Cari Produk : cari [ Cari Lebih Detail ] LAYANAN PEMBAYARAN LINK INFO IBU DAN ANAK KONTAK KAMI CARA BELANJA [Deskripsi] ................... Gambar 3. 64 Perancangan Antarmuka Cara Belanja Perancangan Antarmuka Cara Pembayaran P06 P06 BANNER HOME | PRODUK | CARA PEMESANAN | CARA PEMBAYARAN | SYARAT KONDISI | TESTIMONI FOOTER TESTIMONI PRODUK KATEGORI PRODUK TERLARIS Kategori Kategori Icon SHOPPING CART KOSONG PRODUK TERBARU Find Us on facebook Daftar Member Login LAYANAN PENGIRIMAN Navigasi : - Klik menu Daftar Member untuk menuju P02 - Klik menu Login untuk menuju P03 - Klik menu Home untuk Menuju P01 - Klik menu Produk untuk menuju P04 - Klik menu Cara Pemesanan untuk menuju P05 - Klik menu Cara Pembayaran untuk menuju P06 - Klik menu Syarat Kondisi untuk menuju P07 - Klik menu Testimoni untuk menuju P08 - Klik link Cari Lebih Detail untuk menuju P10 Cari Produk : cari [ Cari Lebih Detail ] LAYANAN PEMBAYARAN LINK INFO IBU DAN ANAK KONTAK KAMI CARA PEMBAYARAN [Deskripsi] ................... Gambar 3. 65 Perancangan Antarmuka Cara Pembayaran P06 Perancangan Antarmuka Syarat dan Kondisi P07 P07 BANNER HOME | PRODUK | CARA PEMESANAN | CARA PEMBAYARAN | SYARAT KONDISI | TESTIMONI FOOTER TESTIMONI PRODUK KATEGORI PRODUK TERLARIS Kategori Kategori Icon SHOPPING CART KOSONG PRODUK TERBARU Find Us on facebook Daftar Member Login LAYANAN PENGIRIMAN Navigasi : - Klik menu Daftar Member untuk menuju P02 - Klik menu Login untuk menuju P03 - Klik menu Home untuk Menuju P01 - Klik menu Produk untuk menuju P04 - Klik menu Cara Pemesanan untuk menuju P05 - Klik menu Cara Pembayaran untuk menuju P06 - Klik menu Syarat Kondisi untuk menuju P07 - Klik menu Testimoni untuk menuju P08 - Klik link Cari Lebih Detail untuk menuju P10 Cari Produk : cari [ Cari Lebih Detail ] LAYANAN PEMBAYARAN LINK INFO IBU DAN ANAK KONTAK KAMI SYARAT DAN KONDISI [Deskripsi] ................... Gambar 3. 66 Perancangan Antarmuka Syarat dan Kondisi P07 Perancangan Antarmuka Testimoni P08 P08 BANNER HOME | PRODUK | CARA PEMESANAN | CARA PEMBAYARAN | SYARAT KONDISI | TESTIMONI FOOTER TESTIMONI PRODUK KATEGORI PRODUK TERLARIS Kategori Kategori Icon SHOPPING CART KOSONG PRODUK TERBARU Find Us on facebook Daftar Member Login LAYANAN PENGIRIMAN Navigasi : - Klik menu Daftar Member untuk menuju P02 - Klik menu Login untuk menuju P03 - Klik menu Home untuk Menuju P01 - Klik menu Produk untuk menuju P04 - Klik menu Cara Pemesanan untuk menuju P05 - Klik menu Cara Pembayaran untuk menuju P06 - Klik menu Syarat Kondisi untuk menuju P07 - Klik menu Testimoni untuk menuju P08 - Klik link Cari Lebih Detail untuk menuju P10 Cari Produk : cari [ Cari Lebih Detail ] LAYANAN PEMBAYARAN LINK INFO IBU DAN ANAK KONTAK KAMI TESTIMONIAL [Deskripsi] ................... [ List testimoni ] Gambar 3. 67 Perancangan Antarmuka Testimoni P08 Perancangan Antarmuka Detail Produk P09 P04 BANNER HOME | PRODUK | CARA PEMESANAN | CARA PEMBAYARAN | SYARAT KONDISI | TESTIMONI FOOTER TESTIMONI PRODUK KATEGORI PRODUK TERLARIS Kategori Kategori Icon SHOPPING CART KOSONG PRODUK TERBARU Find Us on facebook Daftar Member Login LAYANAN PENGIRIMAN Navigasi : - Klik menu Daftar Member untuk menuju P02 - Klik menu Login untuk menuju P03 - Klik menu Home untuk Menuju P01 - Klik menu Produk untuk menuju P04 - Klik menu Cara Pemesanan untuk menuju P05 - Klik menu Cara Pembayaran untuk menuju P06 - Klik menu Syarat Kondisi untuk menuju P07 - Klik menu Testimoni untuk menuju P08 - Klik tombol detail untuk menuju P09 - Dalam kondisi belum login, ketika klik tombol Beli akan tampiln P02 - Klik tombol kembali untuk kembali ke halaman sebelumnya. - Klik link Cari Lebih Detail untuk menuju P10 Cari Produk : cari [ Cari Lebih Detail ] LAYANAN PEMBAYARAN LINK INFO IBU DAN ANAK KONTAK KAMI INFO DETAIL PRODUK Gambar produk Info Detail Produk Kode Barang : kode barang Nama Barang : nama barang Jenis Produk : jenis Merk Produk : merk Kategori : kategori Warna : warna Ukuran : ukuran Stok : x item Harga Satuan : harga Kembali Beli Berikut adalah ukuran dan stok yang tersedia Ukuran Stok Gambar 3. 68 Perancangan Antarmuka Detail Produk P09 Perancangan Antarmuka Pencarian Produk P10 P07 BANNER HOME | PRODUK | CARA PEMESANAN | CARA PEMBAYARAN | SYARAT KONDISI | TESTIMONI FOOTER TESTIMONI PRODUK KATEGORI PRODUK TERLARIS Kategori Kategori Icon SHOPPING CART KOSONG PRODUK TERBARU Find Us on facebook Daftar Member Login LAYANAN PENGIRIMAN Navigasi : - Klik menu Daftar Member untuk menuju P02 - Klik menu Login untuk menuju P03 - Klik menu Home untuk Menuju P01 - Klik menu Produk untuk menuju P04 - Klik menu Cara Pemesanan untuk menuju P05 - Klik menu Cara Pembayaran untuk menuju P06 - Klik menu Syarat Kondisi untuk menuju P07 - Klik menu Testimoni untuk menuju P08 - Klik link Cari Lebih Detail untuk menuju P10 Cari Produk : cari [ Cari Lebih Detail ] LAYANAN PEMBAYARAN LINK INFO IBU DAN ANAK KONTAK KAMI Jenis Produk harga kategori sd Cari Pencarian Produk Jenis Produk, Pilih Kategori, dan Masukan Kisaran Harga yang anda kehendaki kemudian Klik Tombol Cari. Gambar 3. 69 Perancangan Antarmuka Pencarian Produk P10

3. Perancangan Antarmuka Member