Archive for the 'Website' Category
DEMOKRASI DIGITAL WEB 2.0

Sekali-kali narsis gak apa kan? He he… Logo logo di atas itu merupakan parodi dari para peserta web di era Web 2.0. Ada yang kenal logo aslinya? Logo tersebut diturunkan dari logo Blogger, Feedburner, Bloglines, Technorati, Delicious, Flickr, Youtube, ShoutWire, Friendster, Myspace, Xanga, Skype, Wikipedia, dan MyBlogLog. Inilah salah satu bentuk “partisipasi” yang nyeleneh dan kurang kerjaan dari yang empu-nya web ini, judul yang betul seharusnya “Narsis 2.0″.
Oke, selamat datang di era baru penggunaan internet. Istilah Web 2.0 sendiri pertama kali dipopulerkan oleh O’Reilly Media pada tahun 2004. Web 2.0 bukanlah suatu sistem atau jenis program baru internet, tapi lebih pada sebuah era internet. Era dimana informasi yang diberikan tidak hanya dari satu sumber penyedia sebagaimana pada era sebelumnya Web 1.0, tetapi memasukkan unsur partisipasi oleh penerima informasi. Penerima informasi dapat memasukkan informasi baru bagi sumber penyedia sambil yang lainnya dapat mengubah, menambah, mengurangi informasi tersebut. Inilah era demokrasi digital dimana setiap individu web dapat saling berbagi informasi dan membentuk suatu komunitas yang lebih kuat.
Salah satu contoh yang tepat pada era partisipasi ini adalah Wikipedia. User dapat menambah, mengurangi, memperbaiki entry yang ada dalam ensiklopedi online ini. Sehingga perkembangan datanya berkembang dinamis. Bandingkan dengan Britannica Online yang data-data entry nya diatur oleh pengelola. Kelemahan dari sifat partisipasi ini, ada pihak-pihak yang memanfaatkan untuk kepentingan bisnis, memberikan informasi yang salah atau menjatuhkan suatu brand dalam entry tertentu.

Era ini juga ditandai dengan meningkatnya aktivitas blogging. Blog adalah personal web yang berisi tulisan-tulisan yang rutin disusun berdasarkan waktu dan kategori. Pengunjung dapat berpartisipasi dengan memberikan komentar untuk tiap tulisan sang blogger. Blog dapat berisi tulisan personal, artikel atau promosi barang/jasa. Untuk membuat blog gratisan dapat menyambangi Blogger dan banyak lagi yang lainnya. Atau mau yang lebih pro, dapat menggunakan fasilitas dari Wordpress.
Dalam era ini juga banyak melahirkan website-website komunitas. Website komunitas yang tidak asing di Indonesia adalah Friendster. Dari ABG, anak kuliahan, kantoran, hampir semua mengenalnya. Bertujuan untuk menjaring pertemanan antar sesama anggotanya, saling berkirim pesan dan komentar. Website sejenis ini yang populer di US adalah Myspace.

Kemampuan untuk berbagi dalam Web 2.0 memunculkan website yang menampung berbagai file seperti gambar, audio, video untuk saling di-share antar anggotanya. Flickr merupakan website untuk menampilkan dan men-share gambar atau foto dan saling memberikan komentar satu sama lain. Tiap tiap foto diberikan kata kata kunci yang relevan untuk memudahkan anggota lain mencarinya. Untuk saling share video dapat dilakukan pada web YouTube dan MetaCafe. Malah untuk video yang diunggah di Metacafe, bila telah dilihat sekitar 20.000 orang akan diganjar hadiah sebesar US$ 100, bila dilihat 2 juta penggemar akan diganjar US$ 10.000. Berminat?
Berbagi tidak hanya foto atau video. Informasi link web yang menarik dapat pula di-share pada komunitas. Hal ini yang dilakukan oleh Delicious, Digg, dan Magnolia. Kita dapat mem-bookmark halaman web atau sebuah posting untuk kemudian disimpan, dikategorikan, diberi kata kunci dan di-share. Contoh yang jelas untuk posting tulisan ini, pada bagian atas terdapat pilihan Bookmark, bila link itu dipilih maka otomatis akan masuk ke web delicious.
Eksponen Web 2.0 yang diuraikan di sini barulah sebagian saja. Bila ingin mengetahui lebih banyak tentang Web 2.0 dapat dilihat di AllThingsWeb2.0, yang tersusun dalam berbagai kategori. Dan berbanggalah, karena Anda, saya dan semua orang yang terlibat dalam era Web 2.0 ini dijadikan Person of the Year 2006 versi majalah Time minggu ini.
“You. Yes, you. You control the Information Age. Welcome to your world”
ACCESSIBILITY 2
Masalah aksesibilitas yang lain adalah masalah color blindness. 1 dari 12 orang di dunia ini tidak bisa menerima informasi visual yang baik karena masalah buta warna. Kebanyakan mereka tidak bisa membedakan warna Merah dan Hijau. Dan warna warna yang muncul cenderung lebih terang.
Orang yang tidak bisa menerima informasi warna Merah disebut Protanopia. Sedang yang tidak bisa menerima informasi warna Hijau disebut Deuteranopia. Ada juga yang tidak bisa menerima informasi warna Biru disebut Tritanopia, hanya kasus ini jarang terjadi.
Untuk itu, ketika mendesain jangan gunakan warna sebagai satu satunya petunjuk visual. Dan juga jangan mendesain dengan hanya warna merah atau hijau saja. Ada filter untuk Photoshop untuk pengecekan color blindness ini yang dapat diunduh di Vischeck.
Dan bila kita ingin mendesain dengan warna yang dapat dilihat oleh mata normal ataupun oleh yang buta warna, dapat digunakan palet warna berikut: protant.act dan deutan.act. Copykan kedua file ini di folder Program Files\Adobe\Adobe Photoshop\Presets\Color Swatches. Jalankan Photoshop, buka palet Swatches, pilih menu Load Swatches dengan pilihan Files of Type: Color Table (*.act). Warna warnanya berkisar antara warna biru dan kuning.
Normal View

Protanopia View (Red)

Deuteranopia View (Green)

Tritanopia View (Blue)
ACCESSIBILITY 1
Menurut Tim Berners-Lee, W3C Director dan penemu World Wide Web, kekuatan dari web itu adalah universalitasnya, dapat diakses oleh semua orang termasuk oleh orang yang mempunyai kemampuan berbeda (difabel). Wow, tujuannya mulia. Ini teorinya, tapi prakteknya ketika saya merancang web, masih kurang memperhatikan topik ini, semoga di masa depan hal ini semakin diperhatikan lagi.
Di dunia ini, orang yang mengakses internet dengan perbedaaan jenis & ukuran monitor, jenis & versi browser, Operating System, spesifikasi komputer dan tentu saja orang dengan kemampuan, preferensi, pandangan yang berbeda pula. Mungkin saja apa yang kita lihat atau yang kita rancang dengan baik pada tampilan kita, akan berbeda dengan pengunjung di sisi lain bumi ini. Ada beberapa tips untuk masalah aksesibilitas.
- Coba test web anda di berbagai ukuran monitor. Test untuk ukuran 800×600 pixel dan 1024×768 pixel. Biasanya ketika kita mendesain pada monitor 1024×768 dengan ukuran lebar 1000 pixel misalnya, akan menyebabkan munculnya horizontal scroll pada browser untuk monitor ukuran 800×600. Lebih baik mendesain dengan ukuran lebar 750an pixel. Horisontal scroll ini agak mengganggu. Tidak semua orang punya monitor terbaru dengan jenis wide screen, banyak yang masih punya monitor 14 inci yang setingannya 800×600. Tapi hal ini kembali ke selera desain desainernya dan kebijakan yang punya web juga.
- Test di berbagai jenis browser dan versi. Mozilla, IE, Opera, Netscape. Dan coba test dengan versi jadul-nya. Soalnya kita tidak tau apakah pengakses web kita menggunakan jenis browser dan versinya. Ada beberapa script javascript, tidak bisa jalan di browser tertentu.
- Mendesain di PC dan Mac berbeda hasilnya, juga bila kita mendesain dengan monitor CRT dan LCD. Sebaiknya monitornya di kalibrasi dulu.
- Masalah teknologi terbaru yang memerlukan plug in. Misalnya animasi flash yang memerlukan plugin Flash Player untuk menampilkannya. Saya penggemar Flash dan sering memasukkan unsur ini, biasanya saya merancang dengan setingan player yang lebih rendah seperti Flash 5 atau 6 dimana kebanyakan browser terbaru masih mensupportnya tanpa download plugin terbaru.
- Gunakan Alternative Text (alt) pada image untuk memberikan keterangan pada image, agar jika pengunjung me-nonaktifkan visualnya, mereka dapat mengerti maksud dari image yang ada.
WRITING CONTENT
Saya gak tau apa hal ini akan diprotes para blogger yang suka nulis panjang-panjang. Tapi pada dasarnya menulis di web beda dengan menulis untuk hasil cetak. Menurut penelitian beberapa tahun yang lalu (masih valid gak ya?) orang cenderung untuk men-scan teks pada monitor. Lebih susah membaca di depan monitor dibanding buku kan? Coba deh, kalo baca buku semalaman satu buku novel tebel bisa dilalap, tapi coba kalo baca teks di monitor semalaman, mana tulisannya imut imut, dijamin bakal jadi model iklan obat tetes mata, he he he.
Terus untuk blog blog yang tulisannya bisa 10 kali scroll vertikal itu gimana? Sepanjang topik yang ditampilkan menarik, daya tahan mata yang baca yahud, monitor yang dipake buat adem di mata (ada gak ya?) saya rasa oke oke aja. Tapi gak semuanya punya fasilitas seperti ini kan? Nah, ini ada beberapa tips untuk menulis content, dengan asumsi untuk pengunjung yang general bukan yang spesifik (seperti orang yang lagi cari bahan tesis, penelitian, novel, atau semacamnya)
- Singkat dan padat, jangan bertele tele. Gunakan kalimat yang pendek dengan struktur kalimat yang jelas.
- Gunakan paragraf untuk membagi suatu bagian topik dengan yang lainnya, Gunakanlah ruangan kosong (white space) secara bijak.
- Gunakan huruf tebal untuk menekankan suatu kata. Hal ini semacam oase bagi mata setelah mem scan teks teks yang panjang dengan font regular dan akhirnya menemukan font yang gemuk.
- Gunakan list atau point untuk menjelaskan secara per bagian.
- Perhatikan masalah font, baik bentuk, warna, maupun ukuran. Apa yang baik buat kita belum tentu baik pula buat orang lain. Untuk background gelap, jangan pake font yang gelap juga, begitu juga untuk background terang.
- Untuk teks yang mengandung link, gunakan underline atau warna yang berbeda.
- Jangan gunakan huruf kapital semua, susah bacanya.
- Gunakan Header & Sub Header untuk pengaturan struktur penulisan yang enak di mata.
- Tambahkan gambar yang relevan dengan tulisan agar ada semacam ruang pengkait antara teks dan gambarnya.
NAVIGASI
Membangun suatu situs yang baik tidaklah mudah, jadi wajar dong kalo desainer webnya dibayar mahal, he he.. Navigasi website adalah bagian yang penting dalam proses pembuatan website ini. Ibaratnya bila kita berada di bandara, stasiun atau terminal yang baru pertama kali kita kunjungi. Di tempat yang baru itu kita diharapkan cepat beradaptasi dengan lingkungan dan kita perlu mengetahui keberadaan kita sekarang dan tujuan kita selanjutnya akan kemana. Untuk itu dibutuhkan sign-age, petunjuk arah bagi orang agar gak kesasar. Petunjuk itu biasanya jelas, simpel, dan peletakannya strategis.
Hal ini juga sama dengan mendesain navigasi. Bagi pembuatnya, tidak masalah untuk pergi menuju suatu bagian ke bagian halaman yang lainnya, karena dia sudah terbiasa dengan struktur navigasinya. Namun bagi seorang yang pertama kali melihat website itu dan ingin pindah ke bagian yang lain, dibutuhkan waktu beradaptasi untuk selanjutnya melakukan interaktifitas. Semakin cepat seseorang melakukan proses adaptasi ini, berarti sistem navigasi yang dibuat desainernya sudah mumpuni. Sistem navigasi website ini membantu orang untuk mengetahui dimana mereka berada dan kemana mereka akan pergi di situs bersangkutan.
- Gunakan navigasi link utama di bagian atas atau bagian samping dari badan web. Untuk link tambahan dapat diletakkan di bagian bawah.
- Buat judul yang jelas untuk tiap halaman, misalnya halaman kontak: Contact Us, halaman produk: Our Products
- Buatlah secara konsisten, artinya jangan sampai navigasi untuk halaman awal, beda dengan halaman kontak, nyusahin orang.
- Gunakan breadcrumbs, untuk mengetahui keberadaan halaman dan sub halaman, contohnya: home > project > multimedia. Untuk menunjukkan kita berada pada halaman multimedia, yang merupakan sub halaman project. Bila orang ingin kembali ke parent directory nya tinggal klik link project.
- Pastikan ada link ke halaman home, atau halaman awal dari web. Baik itu berupa link maupun image ikon rumah.
- Untuk teks yang berupa link, pastikan mempunyai warna yang berbeda atau mempunyai underline.
- Untuk gambar yang berupa link pastikan gambar ini memuat informasi yang cukup, bila perlu tambahkan keterangan teks di samping gambar link itu.
- Bila ada beberapa bagian link, buatlah group link, pengelompokan ini dapat berupa tipe teks yang berbeda atau image yang berbeda. Sehingga pola pikir yang melihatnya menjadi terstruktur untuk melihat sistem navigasinya.
- Buatlah halaman khusus untuk sitemap, untuk mengetahui struktur link utama dan sublinknya yang ada di dalam keseluruhan website.


