Pada postingan sebelumnya kita sudah membahas mengenai web usability pada bagian homepage. Kini kita akan melanjutkan kajian website indo-fashion ini.
6. Search
Pada web ini terdapat fungsi search yang langsung mudah ditemukan karena letaknya yang berada ditengah-atas tepat pada pandangan mata kita. Saat kita melakukan pencarian yang tidak ditemukan maka akan muncul pesan seperti yang terlihat dibawah:
Pesan yang keluar tersebut masih ambigu , kurang jelas dan komunikatif. Di pesan itu seolah-olah menerangkan kepada “jdskfnksj” bahwa yang dia cari tidak ditemukan. Jadi “jdskfnksj” lebih seperti username. Sebaiknya pesan yang keluar: “ ‘jdskfnksj’ tidak ditemukan”. Pesan ini jauh lebih singkat dan jelas maksudnya.
7. Contact
Sebuah website yang baik harus ada kontak dan informasi mengenai perusahaan tersebut. Website ini juga mempunyai contact bagi pelanggan atau pengguna yang ingin menghubungi perusahaan.
8. Site Map
Website ini menyediakan site map, yaitu peta situs sehingga mencegah pengunjung tersesat di website ini. Mereka bisa melihat seluruh task yang terdapat di website ini.
Melanjutkan postingan sebelumnya, kali ini saya akan langsung membahas mengenai kajian web usability dari situs www.indo-fashion.com .
Menurut konsultan usability, Jakob Nielsen, usability adalah atribut pengukur untuk menilai seberapa mudah suatu user interface dapat digunakan. Usability meliputi :
Learnability: seberapa mudah bagi pengguna untuk melakukan task dasar di suatu interface saat mereka pertama kali menggunakannya?
Efficiency: Setelah pengguna terbiasa dengan antarmuka, seberapa cepat mereka melakukan suatu kegiatan?
Memorability: Saat pengguna kembali menggunakan antarmuka tersebut setelah beberapa lama tidak menggunakan, seberapa mudah mereka dapat kembali terbiasa?
Errors: Berapa banyak kesalahan yang dilakukan pengguna, seberapa parah kesalahan tersebut, dan seberapa mudah mereka dapat mengatasi kesalahan tersebut?
Satisfaction: Seberapa nyamankah pengguna menggunakan antarmuka tersebut?
Menurut Nielsen (2005) kesalahan terbesar pada desain web adalah:
1. Legibility problems, meliputi fonts yang kecil dan tidak kontrasnya antara text dan backgrounds.
2. Nonstandard presentation of links.
3. Annoying use of Flash.
4. Content that has not been written for the Web.
5. Poor search facilities.
6. Browser incompatibilities.
7. Cumbersome forms to fill out.
8. No contact or other company information included.
9. Frozen layouts with fixed page widths resulting in cutting off the side of a page.
10. Inadequate photo enlargement.
Dalam mengkaji situs ini saya berpedoman pada hal-hal tersebut diatas.
Diatas adalah homepage dari indo-fashion. Setelah mengamati web tersebut ada beberapa hal yang akan saya komentari, yaitu bagian-bagian yang sudah saya beri tanda biru:
Menurut Steve Krug dalam bukunya yang berjudul Don’t Make Me Think, penting untuk memberi tahu user ‘situs apa ini?’ Hal tersebut sudah terjawab dengan adanya logo dan nama websitenya di pojok kiri-atas yang tempatnya sudah sesuai dan ukurannya cukup besar, sehingga langsung dapat terlihat oleh pengguna begitu membuka website tersebut.
Saat pertama membuka web ini saya tidak menemukan adanya menu navigasi yang bisa membantu saya mengetahui apa saja yang dapat saya temukan dan saya lakukan di situs ini? Hal tersebut membuat pengunjung yang baru pertama membuka web tersebut-seperti saya, merasa bingung karena tidak dituntun untuk menjelajahi web tersebut dengan alur yang jelas. Tapi, saat sudah masuk atau memilih suatu menu, maka muncul breadcrumb seperti yang terlihat dibawah:
Karena tidak adanya menu navigasi di web ini, maka pengunjung akan langsung fokus pada daftar produk-produk yang ditawarkan di sebelah kiri yang sangat jelas terlihat. Karena web ini memang sebuah web belanja online, maka hal tersebut sangat membantu pengunjung menemukan apa yang dicarinya. Hal itu sangat baik karena dengan begitu maka tujuan dari web ini sebagai online store sudah tercapai. Pada kategori produk yang ditawarkan terlihat bahwa masih ada beberapa kesalahan pada grouping. Kita bisa lihat bahwa kategori oblong masih dipisah-pisah menjadi beberapa kategori. Sebaiknya kategori oblong ini dijadikan satu kategori saja atau jika memang harus dipisah, maka seharusnya posisinya berdekatan. Kategori produk-produk ini juga sebaiknya di-list sesuai abjad.
Pada bagian ini saya merasa sedikit terganggu. Saya merasa bingung saat pertama melihat tulisan ‘Selamat Datang, Masuk’ karena sesaat saya tidak mengerti maksud dari kata ‘Masuk’. Biasanya bagian itu diisi dengan nama pengunjung setelah pengunjung melakukan login. Dengan demikian pengguna akan berfikir klo ‘Masuk’ adalah sebuah nama. Namun, ternyata ‘Masuk’ tersebut adalah suatu menu untuk login atau sign up, padahal dibawahnya sudah ada form login. Menurut saya akan lebih baik jika kata ‘Masuk’ dihilangkan saja. Nanti setelah login baru username-nya ditampilkan, sedangkan login dan sign up bisa dilakukan diform yang sudah disediakan. Atau kata-kata tersebut dihilangkan saja dan langsung diganti dengan sign up dan login.
Pada bagian ini sudah menjelaskan ‘Apa kegunaan situs ini?’ sebagai salah satu syarat yang dibutuhkan dalam suatu homepage menurut Steve Krug
Tulisan saya kali ini ditujukan untuk memenuhi tugas mata kuliah “ Interaksi Manusia-Komputer (Human-Computer Interaction)”. Pada tugas ini saya diminta untuk mengkaji sebuah situs dari segi Web Usability-nya. Situs yang akan saya kaji kali ini adalah www.indo-fashion .com.
Berikut adalah halaman awal dari situs tersebut :
Situs tersebut merupakan sebuah situs belanja online untuk produk-produk pakaian, khususnya kaos. Di situs ini kita dapat memesan online produk yang ditawarkan baik secara eceran maupun grosir. Produk-produk yang ditawarkan disertai dengan gambar dari produk yang bisa diperbesar atau dilihat detailnya dengan tambahan informasi berupa rincian harga, ukuran, warna, bahan dan desain.
Pada postingan kali ini saya akan mengulas tentang 5 hal yang menjadi alasan saya memilih topik “Silverlight” pada posting sebelumnya. Berikut adalah kelima alasan tersebut :
Membuat tampilan web lebih hidup dan menarik.
Silverlight merupakan tools yang dilengkapi dengan fitur-fitur yang dapat membuat tampilan web lebih menarik dan dapat dilengkapi dengan gambar character yang hidup. Dengan ini, developer dapat menggabungkan video streaming, audio, dan animasi ke dalam halaman web.
Silverlight sangat tangguh untuk menampilkan antar muka pengguna (user interface) yang interaktif.
Pada silverlight 1.0 fasilitas yang tersedia masih sangat terbatas, hanya dapat digunakan untuk menggambar vektor, animasi dan multimedia. Pada Silverlight 2.0 sudahada kontrol baik yang “out of the box”telah tersedia maupun kontrol yang dibuat sendiri. Silverlight 3 akan menyediakan image yang tajam, integrasi dengan Office Live Workspace untuk upload multi file, dan kemampuan share dan edit dokumen secara bersamaan secara real time.
3.Mudah didownload dan diinstal.
Silverlight dapat didownload dalam waktu 10 detik. Setelah selesai didownload, klik aja 2 kali untuk mengeksekusi programnya. Setelah selesai, maka browser yang telah didukung SilverLight telah mampu untuk menampilkan kecanggihan yang dimiliki oleh situs yang menggunakan SilverLight.
Input Interface
Mampu menangani semua input dari perangkat seperti keyboard, mouse dan layar sentuh ( touch screen ).
Kemiripan Silverlight dengan Flash
Jika dilihat sekilas, sepertinya Silverlight memang menyerupai Flash. Tidak heran jika banyak orang menyebut Silvrlight sebagai pesaing Flash. Microsoft dengan platform Web Video / Animation menjanjikan beberapa upgrade fitur di versi terbarunya yang akan mampu mengangkat Silverlight ke tingkat persaingan yang lebih dekat dengan Flash.
Itulah kelima hal yang menurut saya menarik dari Silverlight, sehingga saya memilih topik ini. Sekian...
Di era Web 2.0 sekarang, kita bisa mengunjungi website yang dilengkapi dengan video, animasi, suara, dan fitur-fitur interaktif lainnya. Media player Microsoft Silverlight, pesaing Adobe Flash versi berikutnya telah hadir di web. Dalam hal ini, silverlight mempunyai kemiripan dengan adobe flash. Silverlight mensyaratkan developer dan user web untuk mendownload sebuah aplikasi client. Tanpanya, web browser tidak dapat memproses Silverlight. Dengan itu, developer dapat menggabungkan video streaming, audio, dan animasi ke dalam halaman web. Runtime Silverlight 3 final untuk user dan software development kit (SDK) untuk programmer telah dipublikasikan di web. Untuk SDK dapat diperoleh di website Microsoft , sedangkan untuk player dapat di-download di www.microsoft.com/silverlight/resources/install.asp x
SilverLight adalah sebuah tool berbasis web yang digunakan untuk menyajikan User Interface yang menarik dan kaya akan konten. Bila kita ingin mengakses sebuah website yang menggunakan SilverLight, maka kita harus terlebih dahulu menginstal SilverLight tersebut ke dalam komputer kita. Seperti halnya dengan YouTube, maka sebenarnya player pada YouTube tidak akan dapat dilihat jika browser anda belum memiliki Add-On dari Adobe Corporation yaitu Flash Player. Konsep yang sama juga terjadi dengan SilverLight.
Cara instal SilverLight sendiri cukup mudah. Setelah anda download, klik aja 2 kali untuk mengeksekusi programnya. Setelah selesai, maka browser yang telah didukung SilverLight (saat ini IE) secara otomatis akan mampu untuk menampilkan kecanggihan yang dimiliki oleh situs yang menggunakan SilverLight.
Rich Internet Application ( RIA ).
Meski dibuat sebagai ekstensi proyek lainnya dari Microsoft lainnya, aplikasi silverlight berdiri sendiri. Microsoft mempromosikan Silverlight sebgai teknologi cross-platform dan cross-browser. Sebuah proyek open source dengan nama Mono membuka jalan bagi Silverlight untuk di install di linux.
WPF dan XAML
Dalam Silverlight, Microsoft menyertakan teknologi Microsoft Windows Presentation Foundation (WPF) dan dukungan untuk eXtensible Application markup Languange (XAML). Developer dapat menggunakan keduanya ( WPF dan XAML) untuk membuat aplikasi web. Keduanya bekerja di dalam Framework .NET. Microsoft mengembangkan WPF karena keterbatasan yang dimiliki oleh HTML, web browser mampu mengeksekusi fungsi-fungsi yang terlalu kompleks bagi HTML.
Arsitektur Silverlight
Arsitektur platform silverlight terbagi menjadi dua komponen utama, dengan sebuah installer tambahan dan elemen untuk updating. Kedua komponen utama ini mencakup Framework inti dan Framework .NET untuk silverlight. Framework inti presentasi berisi hal-hal berikut :
User Interface (UI) rendering engine, yang meng-generate semua tampilan grafis, animasi, dan teks di dalam aplikasi.
Input Interface, yang menangani semua input dari perangkat seperti keyboard, mouse dan layar sentuh ( touch screen ).
Media engine, yang mendukung beberapa format audio video
Digital right management, yang memungkinkann developer untuk mengontrol media yang ada di aplikasi.
Dukungan untuk mengontrol aplikasi.
Dukungan untuk layout UI yang dinamis, yang memungkinkan developer mengubah tampilan UI secarareal-time.
Dukungan untuk data binding, yang menghubungkan elemen UI dengan objek data di dalam aplikasi.
XAML parser.
Framework .NET mencakup fitur-fitur di bawah ini :
Dukungan untuk fitur Languange Integrated Query (LINQ), yang memungkinkan developer mengitegrasikan data dari berbagai sumber yang berbeda.
Class library, yang mendukung fungsi-fungsi dasar pemrograman seperti kriptografi.
Seperangkat fitur yang disebut Windows Communication Foundation ( WCF), yang di desain untuk memudahkan aplikasi mengakses data dan layanan remote.
Dynamic Languange Runtime (DLR), elemen yang mendukung aplikasi yang ditulis dalam berbagai bahasa pemrograman.
Common Languange Runtime (DLR), komponen yang menangani manajemen memory dan fungsi-fungsi kritikal lainnya.
Framework inti presentasi dan .NET di atas berinteraksi satu sama lain melalui XAML. Dalam hal ini, XAML bertindak sebagai jembatan antara dua komponen.
See all Silverlight Features :
Smooth Streaming & Sketchflow
Extensible media Format Support & Perspective 3D Graphics
