Perancangan Antarmuka Pengunjung Perancangan Antarmuka

151 3. Perancangan antar muka menu Login Member Berikut perancangan antar muka menu Login Member dari aplikasi e- commerce di pada toko opticindo yang dapat dilihat pada gambar 3.28 dibawah ini: LOGO TOKO OPTICINDO Cari Produk cari Categories Customer Service Social Network Payment LOGO BANK LOGO BANK P03 LOGO SPONSOR About us | Shipping and payment | How to order | Login Member .:HOME .:PRODUCT .:LOGIN MEMBER .:RESET PASSWORD .:REGISTER SLIDE SHOW Kurs Form Login Login Email : Password : Reset klik menu home menuju P01 klik produk menuju P02 klik login member menuju P03 klik reset password menuju P04 klik register menuju P05 kllik about us menuju P06 klik shipping and payment menuju . P07 klik how to order menuju P08 klik cari menuju P09 klik detail menuju P10 klik kategori menuju P11 Gambar 3.28 Perancangan antar muka menu Login Member 152 1. Perancangan antarmuka menu Reset Password Berikut perancangan antarmuka menu Reset Password dari aplikasi e-commerce di pada toko opticindo yang dapat dilihat pada gambar 3.29 dibawah ini: LOGO TOKO OPTICINDO Cari Produk cari Categories Customer Service Social Network Payment LOGO BANK LOGO BANK klik menu home menuju P01 klik produk menuju P02 klik login member menuju P03 klik reset password menuju P04 klik register menuju P05 kllik about us menuju P06 klik shipping and payment menuju . P07 klik how to order menuju P08 klik cari menuju P09 klik detail menuju P10 klik kategori menuju P11 P04 LOGO SPONSOR About us | Shipping and payment | How to order | Login Member .:HOME .:PRODUCT .:LOGIN MEMBER .:RESET PASSWORD .:REGISTER SLIDE SHOW Kurs RESET PASSWORD Keterangan reset password Saya setuju Alamat Email : Send Reset Gambar 3.29 Perancangan antarmuka menu Reset Password 153 5. Perancangan antarmuka menu Register Berikut perancangan antarmuka menu Register dari aplikasi e- commerce pada toko opticindo yang dapat dilihat pada gambar 3.30 dibawah ini: LOGO TOKO OPTICINDO Cari Produk cari Categories Customer Service Social Network Payment LOGO BANK LOGO BANK P05 LOGO SPONSOR About us | Shipping and payment | How to order | Login Member .:HOME .:PRODUCT .:LOGIN MEMBER .:RESET PASSWORD .:REGISTER SLIDE SHOW Kurs Form register Nama Lengkap Ulang Password Daftar Reset Jenis Kelamin Email Password Provinsi Kota Alamat Kode Pos No telepon klik menu home menuju P01 klik produk menuju P02 klik login member menuju P03 klik reset password menuju P04 klik register menuju P05 kllik about us menuju P06 klik shipping and payment menuju . P07 klik how to order menuju P08 klik cari menuju P09 klik detail menuju P10 klik kategori menuju P11 Gambar 3.30 Perancangan antarmuka menu Register 154 6. Perancangan antarmuka menu About Us Berikut perancangan antarmuka antarmuka menu About Us dari aplikasi e- commerce pada toko opticindo yang dapat dilihat pada gambar 3.31 dibawah ini: LOGO TOKO OPTICINDO Cari Produk cari Categories Customer Service Social Network Payment LOGO BANK LOGO BANK klik menu home menuju P01 klik produk menuju P02 klik login member menuju P03 klik reset password menuju P04 klik register menuju P05 kllik about us menuju P06 klik shipping and payment menuju . P07 klik how to order menuju P08 klik cari menuju P09 klik detail menuju P10 klik kategori menuju P11 P06 LOGO SPONSOR About us | Shipping and payment | How to order | Login Member .:HOME .:PRODUCT .:LOGIN MEMBER .:RESET PASSWORD .:REGISTER SLIDE SHOW Kurs About Us About Us Gambar 3.31 Perancangan antarmuka menu About Us 155 7. Perancangan antarmuka menu Shipping and Payment Berikut perancangan antarmuka menu Berita dari aplikasi e-commerce pada toko opticindo yang dapat dilihat pada gambar 3.32 dibawah ini: LOGO TOKO OPTICINDO Cari Produk cari Categories Customer Service Social Network Payment LOGO BANK LOGO BANK klik menu home menuju P01 klik produk menuju P02 klik login member menuju P03 klik reset password menuju P04 klik register menuju P05 kllik about us menuju P06 klik shipping and payment menuju . P07 klik how to order menuju P08 klik cari menuju P09 klik detail menuju P10 klik kategori menuju P11 P07 LOGO SPONSOR About us | Shipping and payment | How to order | Login Member .:HOME .:PRODUCT .:LOGIN MEMBER .:RESET PASSWORD .:REGISTER SLIDE SHOW Kurs Shipping and Payment Pengiriman Pembayaran Gambar 3.32 Perancangan antarmuka menu Shipping and Payment 156 8. Perancangan antar muka menu How to Order Berikut perancangan antar muka menu How to Order dari aplikasi e- commerce pada toko opticindo yang dapat dilihat pada gambar 3.33 dibawah ini: LOGO TOKO OPTICINDO Cari Produk cari Categories Customer Service Social Network Payment LOGO BANK LOGO BANK klik menu home menuju P01 klik produk menuju P02 klik login member menuju P03 klik reset password menuju P04 klik register menuju P05 kllik about us menuju P06 klik shipping and payment menuju . P07 klik how to order menuju P08 klik cari menuju P09 klik detail menuju P10 klik kategori menuju P11 P08 LOGO SPONSOR About us | Shipping and payment | How to order | Login Member .:HOME .:PRODUCT .:LOGIN MEMBER .:RESET PASSWORD .:REGISTER SLIDE SHOW Kurs How To Order Cara pemesanan Gambar 3.33 Perancangan antar muka menu How to Order 157 9. Perancangan antarmuka menu Cari Produk Berikut perancangan antarmuka menu Cari Produk dari aplikasi e- commerce pada toko opticindo yang dapat dilihat pada gambar 3.34 dibawah ini: LOGO TOKO OPTICINDO Cari Produk cari Categories Customer Service Social Network Payment LOGO BANK LOGO BANK Gambar produk Harga Nama produk keterangan Gambar produk Harga Nama produk keterangan Gambar produk Harga Nama produk keterangan Gambar produk Harga Nama produk keterangan Gambar produk Harga Nama produk keterangan Gambar produk Harga Nama produk keterangan klik menu home menuju P01 klik produk menuju P02 klik login member menuju P03 klik reset password menuju P04 klik register menuju P05 kllik about us menuju P06 klik shipping and payment menuju . P07 klik how to order menuju P08 klik cari menuju P09 klik detail menuju P10 klik kategori menuju P11 P09 LOGO SPONSOR About us | Shipping and payment | How to order | Login Member .:HOME .:PRODUCT .:LOGIN MEMBER .:RESET PASSWORD .:REGISTER SLIDE SHOW Kurs DETAIL DETAIL DETAIL DETAIL DETAIL DETAIL Daftar Pencarian Produk Gambar 3.34 Perancangan antarmuka menu Cari Produk 158 1. Perancangan antarmuka menu Info Detail Produk Berikut perancangan antarmuka menu Info Detail Produk dari aplikasi e- commerce pada toko opticindo yang dapat dilihat pada gambar 3.35 dibawah ini: LOGO TOKO OPTICINDO Cari Produk cari Categories Customer Service Social Network Payment LOGO BANK LOGO BANK klik menu home menuju P01 klik produk menuju P02 klik login member menuju P03 klik reset password menuju P04 klik register menuju P05 kllik about us menuju P06 klik shipping and payment menuju . P07 klik how to order menuju P08 klik cari menuju P09 klik detail menuju P10 klik kategori menuju P11 P10 LOGO SPONSOR About us | Shipping and payment | How to order | Login Member .:HOME .:PRODUCT .:LOGIN MEMBER .:RESET PASSWORD .:REGISTER SLIDE SHOW Kurs Info Produk Gambar produk Harga Back Nama produk keterangan Gambar 3.35 Perancangan antarmuka menu Info Detail Produk 159 11. Perancangan antarmuka menu kategori produk Berikut perancangan antarmuka menu kategori produk dari aplikasi e- commerce di pada toko opticindo yang dapat dilihat pada gambar 3.36 dibawah ini: LOGO TOKO OPTICINDO Cari Produk cari Categories Customer Service Social Network Payment LOGO BANK LOGO BANK klik menu home menuju P01 klik produk menuju P02 klik login member menuju P03 klik reset password menuju P04 klik register menuju P05 kllik about us menuju P06 klik shipping and payment menuju . P07 klik how to order menuju P08 klik cari menuju P09 klik detail menuju P10 klik kategori menuju P11 P11 LOGO SPONSOR About us | Shipping and payment | How to order | Login Member .:HOME .:PRODUCT .:LOGIN MEMBER .:RESET PASSWORD .:REGISTER SLIDE SHOW Kurs PRODUK BERDASARKAN KATEGORI Gambar produk Harga Info Nama produk keterangan Gambar produk Harga Info Nama produk keterangan Gambar produk Harga Info Nama produk keterangan Gambar produk Harga Info Nama produk keterangan Gambar produk Harga Info Nama produk keterangan Gambar produk Harga Info Nama produk keterangan Gambar 3.36 Perancangan antarmuka menu kategori produk 160

3.2.1.2 Perancangan Antarmuka Member

1. Perancangan antarmuka menu Utama Berikut perancangan antarmuka Menu Utama dari aplikasi e-commerce pada toko opticindo yang dapat dilihat pada gambar 3.37 dibawah ini: LOGO TOKO OPTICINDO Cari Produk cari Categories Customer Service Social Network Payment LOGO BANK LOGO BANK M01 YOUR SHOPPING CHART .:HOME .:PRODUCT .:SHOPPING CHART .:YOUR ORDER .:HISTORY .:LOGOUT SLIDE SHOW Kurs Gambar produk Harga detail Nama produk keterangan Gambar produk Harga detail Nama produk keterangan Gambar produk Harga detail Nama produk keterangan Gambar produk Harga detail Nama produk keterangan Gambar produk Harga detail Nama produk keterangan Gambar produk Harga detail Nama produk keterangan buy buy buy buy buy buy Newest Product Best selling product Most view products klik menu home menuju M01 klik produk menuju M02 klik shopping cart menuju M03 klik about us menuju M04 klik shipping and payment menuju . M05 kllik how to order menuju M06 klik tracking menuju M07 klik cari menuju M08 klik kategori menuju M10 klik my profile menuju M11 klik your order menuju M14 klik history menuju M22 klik logout menuju P01 About us | Shipping and payment | How to order | Tracking | My Profile Gambar 3.37 Perancangan antarmuka menu Utama 161 2. Perancangan antarmuka menu Produk Berikut perancangan antarmuka menu Produk dari aplikasi e-commerce pada toko opticindo yang dapat dilihat pada gambar 3.38 dibawah ini: LOGO TOKO OPTICINDO Cari Produk cari Categories Customer Service Social Network Payment LOGO BANK LOGO BANK M02 YOUR SHOPPING CHART .:HOME .:PRODUCT .:SHOPPING CHART .:YOUR ORDER .:HISTORY .:LOGOUT SLIDE SHOW Kurs Gambar produk Harga detail Nama produk keterangan Gambar produk Harga detail Nama produk keterangan Gambar produk Harga detail Nama produk keterangan Gambar produk Harga detail Nama produk keterangan Gambar produk Harga detail Nama produk keterangan Gambar produk Harga detail Nama produk keterangan buy buy buy buy buy buy Product List klik menu home menuju M01 klik produk menuju M02 klik shopping cart menuju M03 klik about us menuju M04 klik shipping and payment menuju . M05 kllik how to order menuju M06 klik tracking menuju M07 klik cari menuju M08 klik kategori menuju M10 klik my profile menuju M11 klik your order menuju M14 klik history menuju M22 klik logout menuju P01 About us | Shipping and payment | How to order | Tracking | My Profile Gambar 3.38 Perancangan antarmuka menu Produk 162 3. Perancangan antarmuka menu Shopping cart Berikut perancangan antarmuka menu Shopping cart dari aplikasi e- commerce di pada toko opticindo yang dapat dilihat pada gambar 3.39 dibawah ini: LOGO TOKO OPTICINDO Cari Produk cari Categories Customer Service Social Network Payment LOGO BANK LOGO BANK M03 YOUR SHOPPING CHART .:HOME .:PRODUCT .:SHOPPING CHART .:YOUR ORDER .:HISTORY .:LOGOUT SLIDE SHOW Kurs klik menu home menuju M01 klik produk menuju M02 klik shopping cart menuju M03 klik about us menuju M04 klik shipping and payment menuju . M05 kllik how to order menuju M06 klik tracking menuju M07 klik cari menuju M08 klik kategori menuju M10 klik my profile menuju M11 klik your order menuju M14 klik history menuju M22 klik logout menuju P01 About us | Shipping and payment | How to order | Tracking | My Profile Berbelanja Kembali Hitung Kembali Proses Produk Total Harga Batal Jumlah Harga Diskon Total Petunjuk belanja Shopping Chart Gambar 3.39 Perancangan antarmuka menu Shopping cart