Perancangan Antarmuka Member Perancangan Antarmuka
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
163
3. Perancangan antarmuka About Us
Berikut perancangan antarmuka About Us dari aplikasi e-commerce di pada toko opticindo yang dapat dilihat pada gambar 3.40 dibawah ini:
LOGO TOKO OPTICINDO Cari Produk
cari
Categories
Customer Service
Social Network Payment
LOGO BANK LOGO BANK
M04
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
About Us
About Us
Gambar 3.40 Perancangan antarmuka About Us
164
4. Perancangan antarmuka Shipping and Payment
Berikut perancangan antarmuka Shipping and Payment dari aplikasi e- commerce pada toko opticindo yang dapat dilihat pada gambar 3.41 dibawah ini:
LOGO TOKO OPTICINDO Cari Produk
cari
Categories
Customer Service
Social Network Payment
LOGO BANK LOGO BANK
M05
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
Biaya Pengiriman Keterangan pengiriman
Keterangan Pembayaran Pembayaran
Gambar 3.41 Perancangan antarmuka Shipping and Payment
165
5. Perancangan antarmuka How to Order
Berikut perancangan antarmuka antarmuka How to Order dari aplikasi e- commerce pada toko opticindo yang dapat dilihat pada gambar 3.42 dibawah ini:
LOGO TOKO OPTICINDO Cari Produk
cari
Categories
Customer Service
Social Network Payment
LOGO BANK LOGO BANK
M06
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
How To Order
Cara Pemesanan
Gambar 3.42 Perancangan antarmuka How to Order
166
7. Perancangan antarmuka Tracking Berikut perancangan antarmuka Tracking dari aplikasi e-commerce pada
toko opticindo yang dapat dilihat pada gambar 3.43 dibawah ini:
LOGO TOKO OPTICINDO Cari Produk
cari
Categories
Customer Service
Social Network Payment
LOGO BANK LOGO BANK
M07
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
Tracking No resi :
Tracking
Gambar 3.43 Perancangan antarmuka Tracking
167
8. Perancangan antarmuka Cari Produk Berikut perancangan antarmuka Cari Produk dari aplikasi e-commerce
pada toko opticindo yang dapat dilihat pada gambar 3.44 dibawah ini:
LOGO TOKO OPTICINDO Cari Produk
cari
Categories
Customer Service
Social Network Payment
LOGO BANK LOGO BANK
M08
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
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 BACK
Daftar Pencarian Produk
BUY BACK
BUY
BACK BUY
BACK BUY
BACK BUY
BACK BUY
Gambar 3.44 Perancangan antarmuka Cari Produk
168
9. Perancangan antarmuka Info Produk Berikut perancangan antarmuka Info Produk dari aplikasi e-commerce
pada toko opticindo yang dapat dilihat pada gambar 3.45 dibawah ini:
LOGO TOKO OPTICINDO Cari Produk
cari
Categories
Customer Service
Social Network Payment
LOGO BANK LOGO BANK
M09
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
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 DETAIL
Product List
BUY DETAIL
BUY
DETAIL BUY
DETAIL BUY
DETAIL BUY
DETAIL BUY
Gambar 3.45 Perancangan antarmuka Info Produk
169
10. Perancangan antarmuka Kategori Produk Berikut perancangan antarmuka Kategori Produk dari aplikasi e-commerce
pada toko opticindo yang dapat dilihat pada gambar 3.46 dibawah ini:
LOGO TOKO OPTICINDO Cari Produk
cari
Categories
Customer Service
Social Network Payment
LOGO BANK LOGO BANK
M10
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
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 DETAIL
BUY DETAIL
BUY
DETAIL BUY
DETAIL BUY
DETAIL BUY
DETAIL BUY
Daftar produk berdasarkan kategori
Gambar 3.46 Perancangan antarmuka Kategori Produk
170
11. Perancangan antarmuka My Profile Berikut perancangan antarmuka My Profile dari aplikasi e-commerce pada
toko opticindo yang dapat dilihat pada gambar 3.47 dibawah ini:
LOGO TOKO OPTICINDO Cari Produk
cari
Categories
Customer Service
Social Network Payment
LOGO BANK LOGO BANK
M11
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
My Profile
Nama lengkap Jenis kelamin
Email Password
Provinsi Kotakabupaten
Alamat Kode pos
Nomor telpon Edit Profile
Edit Password
Gambar 3.47 Perancangan antarmuka My Profile
171
12. Perancangan antarmuka Edit Profil Berikut perancangan antarmuka Edit Profil dari aplikasi e-commerce pada
toko opticindo yang dapat dilihat pada gambar 3.48 dibawah ini:
LOGO TOKO OPTICINDO Cari Produk
cari
Categories
Customer Service
Social Network Payment
LOGO BANK LOGO BANK
M12
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
Edit Profile
Nama lengkap Jenis kelamin
Email Password
Provinsi Kota
Alamat Kode pos
Nomor telpon Simpan
Cancel
Gambar 3.48 Perancangan antarmuka Edit Profil
172
18. Perancangan antarmuka Alamat Pengiriman Berikut perancangan antarmuka Alamat Pengiriman dari aplikasi e-
commerce pada toko opticindo yang dapat dilihat pada gambar 3.49 dibawah ini:
LOGO TOKO OPTICINDO Cari Produk
cari
Categories
Customer Service
Social Network Payment
LOGO BANK LOGO BANK
M13
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
Alamat Pengiriman
Nama Provinsi
Kota Jenis Pengiriman
Alamat Kode pos
Telepon
Lanjutkan
Gambar 3.49 Perancangan antarmuka Alamat Pengiriman 19. Perancangan antarmuka Your Order
Berikut perancangan antarmuka Your Order dari aplikasi e-commerce pada toko opticindo yang dapat dilihat pada gambar 3.50 dibawah ini:
173
LOGO TOKO OPTICINDO Cari Produk
cari
Categories
Customer Service
Social Network Payment
LOGO BANK LOGO BANK
M14
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
Daftar Status Pesanan
Id Pesanan Tanggal
pemesanan Total
Bayar Status
Action
Gambar 3.50 Perancangan antarmuka Your Order 20. Perancangan antarmuka Detail Pesanan
Berikut perancangan antarmuka Detail Pesanan dari aplikasi e-commerce pada toko opticindo yang dapat dilihat pada gambar 3.51 dibawah ini:
174
LOGO TOKO OPTICINDO Cari Produk
cari
Categories
Customer Service
Social Network Payment
LOGO BANK LOGO BANK
M15
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
Pesanan Anda
Nama Produk
berat jumlah
harga Subtotal
Id pesanan Tanggal pesanan
Status Konfirmasi Status Pemesanan
Nama
Alamat Pengiriman
Daftar produk yang dipesan
Alamat Kota
Kode Pos
Jenis pembayaran via paypal atau bank
Kembali kepesanan No Telepon
Diskon
Gambar 3.51 Perancangan antarmuka Detail Pesanan 21. Perancangan antarmuka pembayaran bank
Berikut perancangan antarmuka pembayaran bank dari aplikasi e- commerce pada toko opticindo yang dapat dilihat pada gambar 3.52 dibawah ini:
175
LOGO TOKO OPTICINDO Cari Produk
cari
Categories
Customer Service
Social Network Payment
LOGO BANK LOGO BANK
M16
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
Silahkan konfirmasi pembayaran pesanan anda
Nama Produk
berat jumlah
harga Subtotal
Id pesanan Total pembayaran
Bank tujuan Atas nama penerima
Tanggal transfer
Konfirmasi pembayaran
Atas nama pengirim
konfirmasi cancel
Jumlah pembayaran Diskon
Gambar 3.52 Perancangan antarmuka pembayaran bank 22. Perancangan antarmuka konfirmasi pembayaran
Berikut perancangan antarmuka konfirmasi pembayaran dari aplikasi e- commerce pada toko opticindo yang dapat dilihat pada gambar 3.53 dibawah ini:
176
LOGO TOKO OPTICINDO Cari Produk
cari
Categories
Customer Service
Social Network Payment
LOGO BANK LOGO BANK
M17
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
Terima Kasih Atas Konfirmasinya
Gambar 3.53 Perancangan antarmuka konfirmasi pembayaran 23. Perancangan antarmuka Return a
Berikut perancangan antarmuka Return a dari aplikasi e-commerce pada toko opticindo yang dapat dilihat pada gambar 3.54 dibawah ini:
177
LOGO TOKO OPTICINDO Cari Produk
cari
Categories
Customer Service
Social Network Payment
LOGO BANK LOGO BANK
M18
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
Daftar produk yang dipesan
Nama Produk
Jumlah Jumlah yang
dikembalikan status
Action return
Kembali kepesanan
Gambar 3.54 Perancangan antarmuka Return a 24. Perancangan antarmuka Return b
Berikut perancangan antarmuka Return b dari aplikasi e-commerce pada toko opticindo yang dapat dilihat pada gambar 3.55 dibawah ini:
178
LOGO TOKO OPTICINDO Cari Produk
cari
Categories
Customer Service
Social Network Payment
LOGO BANK LOGO BANK
M19
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
Daftar produk yang dipesan
Nama Produk
Jumlah Jumlah yang
dikembalikan status
Action return
Minta persetujuan
Daftar produk yang ingin dikembalikan
cancel Nama barang
Jumlah Alasan dikembalikan
Gambar 3.55 Perancangan antarmuka Return b 25. Perancangan antarmuka Checkout
Berikut perancangan
an
tarmuka Checkout dari aplikasi e-commerce pada toko opticindo yang dapat dilihat pada gambar 3.56 dibawah ini:
179
LOGO TOKO OPTICINDO Cari Produk
cari
Categories
Customer Service
Social Network Payment
LOGO BANK LOGO BANK
M20
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
Daftar produk yang dipesan
Nama Produk
berat jumlah
harga diskon
kembali
Daftar produk yang ingin dikembalikan
Check out Nama
Kota tujuan Jenis pengiriman
Alamat tujuan Kode pos
No telepon subtotal
Gambar 3.56 Perancangan
an
tarmuka Checkout 26. Perancangan antarmuka Checkout finish
Berikut perancangan antarmuka Checkout finish dari aplikasi e-commerce pada toko opticindo yang dapat dilihat pada gambar 3.57 dibawah ini:
180
LOGO TOKO OPTICINDO Cari Produk
cari
Categories
Customer Service
Social Network Payment
LOGO BANK LOGO BANK
M21
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
Terima kasih ,silahkan melakukan pembayaran
Nama Produk
berat jumlah
harga diskon
Id pesanan Nama tujuan
Kota tujuan Alamat tujuan
Kode pos Total pembayaran
subtotal Tanggal pemesanan
Jasa pengiriman Tipe pengiriman
Gambar 3.57 Perancangan antarmuka Checkout finish 27. Perancangan antarmuka Histori Pesanan
Berikut perancangan antarmuka Histori Pesanan dari aplikasi e-commerce pada toko opticindo yang dapat dilihat pada gambar 3.58 dibawah ini:
181
LOGO TOKO OPTICINDO Cari Produk
cari
Categories
Customer Service
Social Network Payment
LOGO BANK LOGO BANK
M22
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
Daftar Status Pesanan
Id Pesanan Tanggal
pemesanan Total
Bayar Status
Action
Gambar 3.58 Perancangan antarmuka Histori Pesanan