Aspek user interface sangat penting untuk diperhatikan dalam penyajian suatu halaman website. Karena jika tampilan yang dilihat oleh pengguna tidak menarik bahkan membingungkan maka pengguna pun menjadi enggan untuk melakukan banyak aktivitas pada website tersebut.
<!–[if !supportLists]–>· <!–[endif]–>Home
Pada halaman utama situs ini bisa dilihat sedikit penjelasan singkat megenai yogurt jenis apa yang ditawarkan, seperti yang terlihat pada gambar. Tapi coba diperhatikan, apakah pengguna bisa langsung melihat tulisan ini saat pertama kali mengunjungi situs ini? Tulisan yang berada dibagian kiri dan secara vertikal terletak ditengah. Tulisan ini dibuat berwarna kuning, warna yang akan sangat sulit unutk dilihat di atas warna dasarnya yaitu wana putih, apalagi itu berupa tulisan akan sulit untuk dibaca yang walaupun diusahakan untuk dibaca akan membuat mata sakit. Dari halaman ini juga bisa dilihat proporsi penggunaan halaman yang tidak tepat. Ruang yang disediakan oleh halaman ini sangat banyak. Tapi tidak begitu halnya dengan content yang terdapat di dalamnya. Akibat dari hal tersebut adalah halaman ini terlihat begitu kosong dan tidak menarik.
Mungkin bisa ditambahkan menu ataupun bagian informasi yang bisa membuat website ini menjadi lebih menarik. Salah satu menu yang bisa ditambahkan pada halaman utama ini mungkin adalah menu yang berisi informasi yang memberitahukan mengenai nutrisi yang diperlukan oleh tubuh dan bagaimana yogurt ambil bagian dalam memenuhi kebutuhan tersebut.
Selanjutnya yang perlu diperhatikan dari tampilan halaman utama ini adalah bagian tengah dari halaman ini, yang mungkin bisa dikatakan sebagai logo dari produk ini, bisa dilihat pada gambar . Hal pertama yang perlu diperhatikan dari logo ini adalah masalah lokasi penempatan. Tidak seharusnya logo ini diletakan pada bagian tengah halaman utama. Dengan begitu untuk melanjutkan ke halaman lainnya logo ini tidak akan terlihat lagi karena akan digantikan dengan informasi-informasi sesuai dengan apa yang ditawarkan oleh masing-masing menu.
Selain itu pada bagian bawah logo ini samar-samar bisa kita lihat tulisan “Jakarta-Indonesia”. Tulisan ini terlihat tipis dan sangat tidak jelas, yang bisa saja akibat dari penggunaan pixel yang tidak sesuai, sehingga tulisan terlihat pecah. Berhubungan dengan hal penggunaan huruf pada halaman situs ini, bisa diperhatikan lagi cara menampilkan tulisan “YOGURT”. Tulisan ini memang terlihat jelas, tapi apakah dengan mudah bisa terbaca? Efek bergelombang dari tulisan ini mengakibatkan gangguan, yang berakibat tidak semua huruf bisa terlihat sebagaimana mestinya. Dalam kasus ini huruf yang tidak terbaca adalah huruf “Y”.
Saran yang bisa diberikan untuk bagian penempatan lokasi logo, akan lebih baik jika logo diletakkan disebelah kiri atas halaman. Sehingga pada saat berpindah ke halaman yang lain dari situs ini logo tetap dapat terlihat. Dan selanjutnya untuk bagian tengah dari halaman ini bisa diisi dengan penjelasan mengenai yogurt dan seberapa pentingnya konsumsi yogurt dilakukan. Selain informasi tentang pengenalan yogurt, bisa juga ditambahkan informasi tentang asal-usul dan sejarah dari yogurt itu sendiri. Untuk bagain tulisan “Jakarta-Indonesi” bisa diperbaiki dengan membuat tulisan dengan pixel yang sesuai, sehingga pada saat ditampilkan bisa terlihat dengan jelas. Selanjutnya saran untuk bagian kata “YOGURT” pada bagian bawah tulisan Monica. Tulisan ini mungkin bisa diperbaiki dengan membuat efek lurus saja tanpa gelombang sehingga huruf-huruf bisa terbaca dengan jelas sebagaimana mestinya.
<!–[if !supportLists]–>· <!–[endif]–>Product
Pada bagian utama halaman pruduct, seperti yang terlahit pada gambar.
Seperti tampilan pada halaman home, ukuruan yang tidak proporsional juga terlihat disini.
Bagian utama yang bisa langsung terlihat tidak sesuai adalah bagian tengah halaman ini, seperti terlihat pada gambar. Bagian ini sebenarnya tidak menyimpan informasi yang terlalu banyak, tetapi digunakan scroll umtuk bisa <!–[if gte vml 1]> <![endif]–><!–[if !vml]–><!–[endif]–>melihat informasi secara keseluruhan. Dalam hal ini pengembang website membuat frame kembali di bagian halaman utama menu product, yang sebenarnya tidak perlu dilakukan melihat halaman yang masih memiliki banyak ruang kosong. Saat pertama kali ingin membaca informasi yang tertulis pada bagian frame dalam, pengguna tidak seharusnya dibiarkan mencari letak dari informasi tersebut.
Seperti yang terlihat pada <!–[if gte vml 1]> <![endif]–><!–[if !vml]–><!–[endif]–>gambar , gambar dari produk yogurt tidak seharusnya berada disana. Hal ini dikarenakan pengguna sudah melihat tampilan gambar tersebut di halaman utama, jadi tidak perlu diletakan pada posisi tersebut. Mungkin bisa saja diletakkan tapi tidak dengan intensitas yang besar dalam menyita halaman bagian.
<!–[if gte vml 1]> <![endif]–><!–[if !vml]–><!–[endif]–>Pada bagian kiri halaman product terdapat tiga tombol untuk menunjukkan jenis, rasa, dan ukuran dari yogurt yang diproduksi, seperti pada gambar. Ada sedikti masalah pada bagian ini. Padding tidak ada, yang mengakibatkan tombol tersebut tidak terlihat sebagai tombol melainkan link yang berada pada suatu permukaan berwarna halaman situs. Akan lebih baik jika tombol-tombol tersebut diberi padding, sehingga bisa terlihat sebagai tombol.
<!–[if gte vml 1]> <![endif]–><!–[if !vml]–><!–[endif]–>
- Jenis
<!–[if gte vml 1]> <![endif]–><!–[if !vml]–><!–[endif]–> Saat meng-klik tombol jenis maka kita akan masuk ke bagian yang menunjukkan berbagai macam jenis yogurt yang diproduksi, seperti yang ditunjukkan pada gambar. Tetapi lagi-lagi pemborosan dalam pemakaian ruang yang dijumpai. Dengan frame yang dibuat pada bagian dalam. Padahal bisa kita lihat bahwa frame bagian dalam sangat tidak diperlukan. Informasi yang
diberikan mengenai jenis yogurt sangat sedikit untuk jelasnya bisa dilihat pada gambar, sehingga tidak ada gunanya scroll yang dibuat. Seperti kita ketahui bahwa tulisan saja akan kurang menarik minat jika tidak ditunjukkan bagaimana bentuknya. Begitu juga dalam kasus ini. Hanya tulisan saja yang diberikan untuk menggambarkan jenis dari yogurt. Saran untuk penyajian jenis dari yogurt sebaiknya disertai dengan gambar dari produk yang dimaksud. Dengan begitu pengguna ataupun konsumen yang melihat akan menjadi lebih tertarik untuk membeli. Untuk memberi nilai tambah selain dari gambar bentuk yang menunjukkan jenis produk yang ditawarkan akan lebih baik lagi jika ditambahkan informasi yang menjelaskan tentang jenis-jenis produk yang ditawarkan tersebut. Dalam penjelasan tersebut bisa saja ditambahkan informasi tentang kandungan dari jenis-jenis yogurt yang ditawarkan dan juga manfaat dari jenis yogurt tersebut.
- <!–[if gte vml 1]> <![endif]–><!–[if !vml]–><!–[endif]–>Rasa
<!–[if gte vml 1]> <![endif]–><!–[if !vml]–><!–[endif]–> Saat meng-klik tombol rasa maka halaman yang muncul adalah halaman seputar macam-macam rasa yogurt yang ditawarkan. Tampilannya adalah seperti yang ditunjukkan pada gambar.
Dalam halaman ini juga terjadi pemborosan ruang. Banyak bagian kosong yang tersisa. Dan terjadi pemakaian frame yang sebenarnya belum perlu untuk digunakan dalam halaman ini. Di bagian atas dan bawah frame masih banyak ruang kosong, jadi scroll yang ada sebenarnya dapat dihilangkan. Cara menampilkan ataupun menunjukkan macam-macam rasa yogurt yang ditawarkan juga tidak menarik. Hanya terdiri dari tulisan yang disusun dalam table. Seperti terlihat dalam gambar. Cara penyajian susunannya juga dianggap tidak bisa menarik perhatian konsumen. Dalam halaman ini untuk menunjukkan macam-macam rasa dari yogurt bisa ditambahkan gambar-gambar yang menunjukkan kandungan rasa dari yogurt yang dimaksud. Misalnya untuk rasa strawberry bisa diberikan gambar strawberry, untuk rasa sirsak diberikan gambar sirsak, untuk rasa mangga bisa diberikan gambar mangga, dan begitu juga dengan rasa yang lain. Selanjutnya dalam penyajiannya bisa dibuat dalam suatu tabel tanpa berada dalam suatu frame. Penyajian tabel mungkin bisa dibuat memanjang vertikal ke bawah. Dan bisa juga diberikan informasi mengenai manfaat khusus dari kandungan buah-buahan tertentu yang ada pada yogurt.
- Ukuran
<!–[if gte vml 1]> <![endif]–><!–[if !vml]–><!–[endif]–><!–[if gte vml 1]> <![endif]–><!–[if !vml]–><!–[endif]–> Saat meng-klik tombol ukuran halaman yang muncul adalah seperti yang ditunjukkan pada gambar.
Masih dengan halaman yang memiliki banyak ruang kosong (white space). Halaman ini memberikan informasi mengenai ukuran dari produk yogurt yang ditawarkan. Ukuran dari produk disajikan dalam bentuk terurut biasa tanpa table. Ukuran dari produk yogurt yang ditawarkan disajikan dalam suatu frame yang terdapat dalam halaman ini. Frame yang sebenarnya tidak terlalu diperlukan untuk dibuat dalam halaman ini. Gambar dari frame yang berisi ukuran produk bisa dilihat pada gambar. Dalam frame ini disajikan ukuran dari produk yogurt yang ditawarkan. Penyajian dalam bentuk tulisan. Dan bisa saja ada pengguna yang mungkin tidak bisa memperkirakan ukuran yang dimaksud. Dalam menyajikan informasi ukuran bisa dibuat tanpa mengunakan frame. Selain dari daftar yang memberitahu ukuran-ukuran yogurt yang tersedia, bisa juga datambahkan gambar-gambar dengan skala teretentu yang bisa menggambarkan ukuran dari produk yogurt yang dimaksud. Selain berupa ukuran dan juga gambar yang mewakili, bisa juga ditambahkan informasi yang berhubungan dengan takaran konsumsi yogurt yang dianjurkan. Takaran ini mungkin saja disesuaikan dengan usia, jenis kelamin, dan kesehatan dari konsumen.
- Distributor
Halaman menu selanjutnya adalah halaman distributor. Dalam halaman menu ini disajikan informasi mengenai tempat-tempat dimana produk yogurt bisa diperoleh. Gambar dari halaman ini bisa dilihat pada gambar. Halaman ini memiliki default alamat distributor di daerah Jakarta. Halaman ini disajikan masih dengan pemborosan dalam hal penggunaan ruang. Masih sangat banyak ruang kosong yang tidak terpakai. Informasi tentang distributor disajikan dalam suatu frame yang di buat di dalam halaman ini. Melihat informasi tentang distributor yang sebenarnya sedikit, sebenarnya tidak perlu dibuat frame ini. Apalagi ditambah dengan scroll. Dalam content informasi distributor juga terjadi ketidak konsistenan. Ada tempat <!–[if gte vml 1]> <![endif]–><!–[if !vml]–><!–[endif]–>yang mencantumkan nama orang yang bisa dihubungi beserta nomor teleponnya, tetapi ada yang hanya terdiri dari alamat dan nomor telepon saja. Ada juga yang sangat lengkap sampai dengan data e-mail. Sebagai saran dalam penyajian informasi mengenai distributor ini adalah sebaiknya tidak perlu dibuat frame yang berada di dalam halaman. Informasi tentang distributor bisa langsung disajikan dalam halaman tanpa frame kedua yang ada di bagian dalam. Dilihat dari daftar distributor yang ditampilkan sepertinya bisa dibuat kesimpulan bahwa usaha ini masih bersifat home industry, sehingga mungkin disamping alamat dari tempat distributor juga bisa ditampilkan gambar ataupun foto yang menunujukkan tempat tersebut.
Pada informasi distributor yang diberikan untuk daerah Bandung tidak lengkap. Hanya terdiri dari nama, nomor telepon, dan nama daerahnya. Tidak disebutkan alamat tempat secara spesifik. Bisa saja konsumen datang ketempat distributor tanpa membawa alat komunikasi. Dan jika sebelumnya konsumen sudah mengetahui alamat tempat distributor secara lebih spesifik pasti dia tidak akan mengalami kesulitan untuk menemukan tempat distributor produk yogurt ini. Sama seperti untuk informasi distributor di daerah Jakarta, informasi distributor pada wilayah Bandung juga sebaiknya dilengkapi dengan gambar dari tempat distributor yang dimaksud.
- Price List
<!–[if gte vml 1]> <![endif]–><!–[if !vml]–><!–[endif]–> Menu lain yang juga disediakan dalam website ini adalah halaman tampilan yang menunjukkan daftar harga produk yogurt. Seperti yang ditunjukkan pada gambar. Untuk warna tulisan pada bagian jenis-jenis produk tidak terdapat masalah. Tapi coba diamati warna huruf pada bagian ukuran dan juga warna tabel pada bagian ukuran tersebut. Kombinasi warna yang terjadi adalah gelap dan gelap. Sehingga hal ini mengakibatkan tulisan pada bagian ukuran tidak terbaca dengan jelas. Sebagai saran untuk bagian ini sebaiknya warna pada bagian ukuran produk dibuat kombinasi yang lebih bagus. Mungkin antara huruf berwarna hitam dengan warna tabel orange muda sehingga tulisan yang tertera akan lebih mudah terbaca. Disamping masalah warna ada juga masalah lainnya seputar tabel ini, yaitu masalah penulisan macam-macam rasa dengan ukuran yang sama sehingga harga yang ditawarkan juga serupa. Pada baris ketiga dari macam-macam rasa yang ditawarkan, buah murbey, aloevera, apple, dan orang ditulis secara bersamaan. Untuk beberapa konsumen mungkin akan tidak menyadari masalah ini, sehingga bisa saja dia salah tafsir masalah harga dari produk. Seharusnya walaupun memiliki ukuran yang sama dan berada pada tingkatan harga yang sama produk dengan rasa yang berbeda tidak boleh disatukan dalam satu baris. Solusi untuk masalah ini adalah memisahkan produk yogurt tersebut berdasarkan rasa juga. Selain informasi harga normal dari produk yogurt ini, mungkin distributor juga bisa menginformasikan masalah potongan harga atau diskon bagi konsumen yang membeli dalam jumlah banyak. Selain itu juga bisa diberi tahu juga informasi harga untuk pemesanan yang menggunakan jasa pengiriman, karena bisa saja konsumen dari luar daerah tertarik untuk membeli dalam jumlah banyak.
- News
<!–[if gte vml 1]> <![endif]–><!–[if !vml]–><!–[endif]–> Menu selanjutnya adalah news. Dalam halaman menu ini akan ditampilkan informasi tentang internet, testimonial, dan FAQ. Halaman masih seperti halaman pada menu lainnya dengan sedikit ruang pada bagian tengah untuk menunjukkan bagian-bagian pada halaman menu ini. Seperti yang ditunjukkan pada gambar. Yang jadi masalah lagi pada bagian ini adalah tulisan ketiga bagian yang bersifat statis dan bukan link. Tidak ada aktifitas yang bisa dilakukan pada bagian ini selain melihat judul ketiga bagian tersebut. Sebagai saran seharusnya setiap judul tersebut bisa dibuat dalam bentuk link yang akan mengarahkan pengguna kepada bagian sesuai yang digambarkan oleh judulnya.
