Jumat, 14 Mei 2010

Desain Grafis

Sumber : http://fenni.staff.gunadarma.ac.id/Downloads/files/11017/Desain+Grafis.pdf

Dalam Desain Grafis para prgorammer dituntut bukan hanya menampilkan gambar yang menarik bagi suatu aplikasi, akan tetapi juga kenyamanan, kemudahan dipahami dan terlebih lagi tidak memberatkan kinerja komputer dalam pemrosesan grafik dalam aplikasi tersebut.

Ada 6 Prinsip dalam Desain grafis yaitu :
Metaphor (Metafora)
Adalah aplikasi dari nama atau deskripsi istilah objek lain yang tidak dapat diartikan secara harafiah. Menghubungkan presentasi dan elemen-elemen visual dengan item-item yang berkaitan. www.worldwidestore.com :
Situs ini adalah sebuah pusat perbelanjaan besar dalam dunia maya, walaupun cenderung lebih kepada toko barang-barang antik. Situs ini menampilkan barang-barang antik yang menjadi kebanggaannya di main page, kemudian situs ini mengelompokkan barang-barang antiknya sesuai dengan kategorinya. Kategori barang-barang antik tersebut yaitu asal barang-barang tersebut, seperti dari mesir, eropa, yunani, cina dll. Dan juga kategori jenis benda tersebut seperti barang pecah belah, patung, pedang, coin dsb.

Selain itu, tiap kategori mempunyai ruang sendiri seperti main level, lower level, dan upper level. Tiap level mempunyai kelompok kategori sendiri mirip dengan supermarket yang tiap lantainya ditujukan untuk barang yang berbeda-beda. Dan tak lupa ada kotak search engine yang membantu pengunjung menemukan barang yang dimaksud.

Clarity (Kejelasan)
Harus ada alasan yang kuat/masuk akal mengapa kita menggunakan setiap elemen yang berada dalam suatu interface yang kita buat. Penggunaan yang sedikit akan lebih baik.
www.schwab.com :
Dalam situs schwab.com terdapat sebuah prinsip clarity yaitu backround website yang putih polos. White Space:
- Berperan penting bagi mata.
- Menyediakan simetris dan keseimbangan melalui penggunaannya.
- Memperkuat dampak pesan.
- Membiarkan mata beristirahat dari setiap kegiatan elemen.
- Digunakan untuk mengembangkan kesederhanaan, keanggunan, kemewahan, dan kemurnian.
Dengan backround putih pengunjung situs dapat melihat dengan jelas tiap elemen website yang ditampilkan. Pemakaian backround putih ternyata dipakai oleh banyak situs terkenal seperti www.google.com, www.yahoo.com, www.youtube.com, dll.

Dalam situs inipun warna putih di bubuhi campuran warna-warna hangat dan sejuk sehingga tidak membuat mata lelah seperti, jingga, biru muda, dan beberapa warna pastel seperti warna-warna cat tembok rumah yang membuat yang biasanya dibaut sejuk atau hangat untuk dilihat.

Consistency (Ketetapan)
Konsistensi dalam tampilan, pewarnaan, gambar, ikon, typography, teks, dll. Harus ada konsistensi baik dalam layar maupun antar layar. Dan harus selalu ada metafora dimanapun juga. Setiap platform mungkin memiliki panduannya. http://www.santafean.com/: Situs ini menampilkan tentang seni, ruang makan, dan beberapa aspek tentang perumahan, atau bisa lebih dikonotasikan sebagai situs sebuah kota. Konsistensi memang harus dilihat setelah situs sudah lam dipublish dan kita amati dari tahun ke tahun perubahan apa saja yang terjadi. Atau mungkin situs yang lebih umum adalah situs pencari google, yang dari dulu sampai sekarang homepagenya adalah berupa lambang google dan kotak ketik untuk pencarian, sisanya hanya berupa backround putih dan beberapa option.

Konsistensi diperlukan agar para pengunjung/pengguna tetap tidak bingung dalam mengoperasikan/bersluncur dalam sebuah web/aplikasi. Sehingga para pengguna tetap merasa nyaman walaupun terdapat perbedaan-perbedaan dalam sebuah situs. Memang sebuah situs pun tidak baik halamnannya tetap dari tahun ke tahun walaupaun ada perubahan bisa disiasati dengan cara melakukan perubahan secara perlahan-lahan dan tidak secara berangsur-angsur.

Contrast (Keserasian Tampilan)
Membuat anda tertarik, memandu mata anda melihat keseluruhan interface. Keuntungan dari keserasian adalah untuk memperkuat fokus atau untuk memperkuat suatu interface.
Contrast dapat digunakan untuk membedakan aktifitas kendali. Juga dapat digunakan untuk men-set item yang paling utama. Item yang paling utama diberi highlight. Gunakan geometri untuk membantu pengurutan. www.delta.com :
Dalam situs ini beberapa bar penting seperti login, informasi penerbangan, ataupun beberapa informasi penting untuk berwisata seperti perencanaan, travel, hotel dll. Bahkan detail kecil pun dapat dilihat dari situs ini yaitu peringatan (alert) berwarna merah yang kontras dengan backround berwarna putih.

Sebenarnya masih ada beberapa prinsip dalam desain grafis untuk dibahas tapi mungkin akan dilanjutkan lain kali. Demikian postingan kali ini semoga bermanfaat.

Minggu, 02 Mei 2010

WEBSITE

Sumber : http://www.bakawan.com/log/4-prinsip-dasar-desain/
http://febriani.staff.gunadarma.ac.id/Downloads/files/11023/Website.pdf
www.bakawan.com/log/100-tehnik-usability-website/

WEBSITE


Dalam pembuatan sebuah website seorang programmer harus mengetahui aspek-aspek yang diperhatikan agar situs yang dibuatnya bisa dinikmati oleh pengguna internet dan terlihat menarik. Adapun aspek-aspek tersebut yaitu :

Perilaku Pemakai
Perlu dicermati bahwa seorang pengguna interface website
dalam berinteraksi memiliki kebiasaan-kebiasaan yang secara
global dilakukan oleh seorang pengguna suatu interface pada
saat pengguna tersebut berada dalam internet.
Kebiasaan tersebut dijabarkan secara singkat dalam perilaku
pengguna interface di bawah ini:

Search
Pengguna interface website terbiasa untuk beraktivitas di
dalam internet dengan melakukan pencarian untuk
menemukan item tertentu, dapat berupa fakta atau
potongan informasi. Untuk contoh dalam penggunaannya
dapat dianalogikan pada saat membuka search engine,
seperti google, vivisimo, dsb.
Aktifitas lainnya yang mungkin digunakan seorang
pengguna dapat melakukan promosi, pembelian produk,
membuat riset, downloading perangkat lunak, dsb.

Browsing
Hal lainnya yang dilakukan seorang pengguna interface
website dengan membaca secara sekilas item yang
menarik, fakta atau potongan informasi. Hal tersebut terjadi
dikarenakan banyak sekali informasi yang ditampilkan
bahkan dalam satu halaman website, maka daya pikat juga
menjadi suatu peran penting. Surfing, membuat riset, dan
kegiatan lainnya.
Membangun Sebuah Situs
Untuk memulai dengan suatu rancangan situs yang baik
diperlukan beberapa hal yang harus terdapat didalamnya, antara
lain pada tahapan Proses Model

Mengidentifikasi Sasaran Akhir
Dalam membangun suatu situs tentunya diperlukan
sasaran akhir dari pemakai interface, mengapa demikian?,
karena sering suatu lokasi jaringan situs digunakan untuk
menguraikan suatu organisasi administratif, melainkan
tidak untuk memberi pemakai hal apa yang mereka
inginkan.
Menjabarkan Daftar dari Topik-topiknya
Melakukan pengungkapan pendapat apapun atau
brainstorming (pendapat yang masih mentah).
Contoh dari komputasi Perguruan Tinggi;
classes equipment awards
people directions unique points
faculty programs table of contents
students degrees index
administrators mission contact
staff undergraduates information
graduates map

Mengorganisir Isi
Kelompokan item atau materi kedalam suatu kategori:
People
Faculty
Students
Undergraduates
Graduates
Staff
Isi dari struktur yang dicontohkan tersebut dapat dilihat urutannya dilakukan dengan menyempitkan bagian dari sebuah kategori.

Menyediakan Struktur
Setelah materi diorganisir dengan baik, maka materi atau
item tersebut diuraikan dengan ringkas dengan
menempatkannya pada tingkatan-tingkatan untuk
mengikuti kategori dalam sebuah organisasi. Perubahan Bentuk Isi
Dimulai dengan melakukan transisi ke dalam sebuah
halaman, teks, gambaran, interaksi, dll. Dalam suatu situs,
gunakan sketsa/rancangan untuk mendaftar dalam
melakukan pekerjaan menggambar dan prosesi
storyboards atau rancangan kasar. Setelah proses tersebut
telah dilalui, maka akan terbentuklah suatu garis besar
yang akan sangat membantu dalam melakukan
pengorganisasian pemikiran dan rencana.
Lima Atribut/Komponen Penunjang:
Isi Textual
Isi adalah bagian yang sangat spesifik, dianjurkan untuk
memuat suatu informasi yang sesuai pada halaman suatu
situs berdasarkan temanya. Membaca informasi dalam
halaman situs membuat para pengguna situs menjadi lebih
canggung dan lebih lambat dari monitor dibanding dari
membaca melalui media catatan/kertas. Maka dibuatkanlah
bagi para penguna situs tulisan untuk mengisi halaman
web atau header dari halaman situs, selain itu dibuatkan
juga highlights untuk menyoroti teks atau paragraph yang
dibaca atau yang terpilih.
Desain grafis
Semua prinsip dalam desain grafis yang dibahas pada
kesempatan ini membahas pada tingkatan lebih awal
masih berupa metafora, clarity, consistency, alignment,
contrast, proximity.
Navigasi
Permasalah dalam kaitan dengan:
- Para pemakai interface website tidak mengetahui
daerah atau dalam hal ini lembaran-lembaran pada
situs.
- Struktur lokasi tidak dapat ditemukan.
Pemakai interface situs seharusnya diberikan suatu
pemahaman dari struktur yang menyangkut dari suatu
ruang dari informasi tersebut. Maka sebaiknya disiapkan:
- Tabel Index (Peta Lokasi)
- Index
- Navigasi
- Fasilitas Pencarian (Search)
Struktur
Hubungan, kepadatan, faktor bercabang, panjang dari
halaman, nomor dari suatu link (mata rantai). Strukturnya
dapat berupa struktur yang Linier, Hierarchy, Non-Linier,
Gabungan. Halaman utama (main/index) adalah penting,
tetapi struktur dasar untuk semua halaman yang lain juga
sangat penting, karena berkaitan dengan isi dari suatu
informasi dalam sebuah situs.
Link
Tingkat keberhasilan suatu link tergantung pada:
- Seberapa baik pengguna interface situs dapat
meramalkan arah dari link.
- Seberapa baik pengguna interface situs dapat
membedakan antara link yang satu dengan link yang
lain yang menghubungkannya.
- Isi yang sesuai pada akhir link.
Pastikan bahwa link-link tersebut berhasil.
Macam-macam link:
- Singkat, padat dan langsung pada tujuan
Contoh: Prices
- Penjelasan tekstual yang panjang bahkan mungkin
diikuti dengan klarifikasi non-link
Contoh: Listing of car prices – Current suggested
price
Rancangan Yang Buruk
- Semua teks mengunakan huruf kapital
- Gulungan menyamping
- Ukuran teks dibuat dengan ukuran yang amat kecil, terutama
di dalam huruf yang dicetak miring.
- Link/Mata rantai tidak berfungsi atau tidak tersambung
- Memberitahukan kepada penguna interface situs bagaimana
cara menetapkan browser
- Kontras terlalu rendah di dalam warna text untuk bagian
background
- Typeface besar
- Animasi berputar terus menerus tanpa henti
- Hal-hal yang kelihatan seperti tombol tetapi padahal bukan
- Ada pesan “Under construction/Di bawah konstruksi”
- Melalaikan tombol ALT untuk gambar
- Tidak menandakan ukuran gambar
- Tidak terdapat halaman home
- Tidak ada tombol untuk menuju lokasi sebelumnya atau
menuju lokasi sesudahnya.
- Situs dituntut untuk browser tingkat atas
Sebab banyak hal yang terjadi:
- Tidak mengetahui sasaran untuk pengguna situs
- Memiliki platform dengan komposisi yang lemah
- Tidak memberikan kenyamanan User Interface Standard
- Tampil dengan interface yang tidak menarik
- Isi yang ketinggalan jaman atau tidak akurat
- Isinya tidak berbobot
- Halaman yang diakses lambat
- Susah untuk dipelihara
- Tingkat keamanan yang lemah
- Strategi iklan tidak baik

Adapun menurut bakawan ada 4 prinsip dasar dalam mendesain sebuah website

Kontras (Contrast)

Maksud prinsip kontras adalah menghindari elemen desain dalam halaman yg tampak serupa. Apabila elemen (jenis tulisan, warna, ukuran, tebal tulisan, spasi, etc) tidak diingkan serupa maka buat elemen desain tsb saling membedakan. Kadang, dalam sebuah halaman, kontras menjadi visualisasi yg paling menarik perhatian. Kontras adalah penyebab awal pembaca membaca halaman tsb.

Repetisi (Repetition)

Elemen visual yg berulang dalam sebuah desain. Kamu dapat mengulang ulang warna, bentuk, teksture, ketebalan garis, jenis tulisan, ukuran, konsep grapis, etc. Pengulangan elemen visual ini mengembangkan komposisi dan memperkuat desain dalam kesatuan komposisi.

Alignment

Jangan meletakkan elemen desain apapun tanpa sebab. Setiap elemen visual harus memiliki hubungan dengan elemen visual lain yg berada dalam halaman. Penggunaan alignmen yg tepat akan melahirkan efek tampilan bersih, berkelas, dan segar.

Kedekatan (Proximity)

Setiap elemen desain yg saling berhubung seharusnya dikelompokkan bersama sama. Saat elemen desain saling berdekatan, mereka lebih terlihat sebagai satu unit visual daripada unit visual terpisah. Penggunaan promity yg tepat akan mengorganisasikan informasi, mengurangi kekacauan, dan memberikan pembaca struktur tampilan yg jelas.

Dan ada teknik dalam mendesain web

Berikut ini adalah beberapa hal yg sy tau berdasar pengalaman menjadi blogger dgn blog yg (anehnya) memiliki pembaca hahahah. Sementara ide lain berasal dari penelitian kecil kecilan via google analytic. Dan sisanya dari bacaan online dan diskusi offline dengan teman. Prinsip usability ini bersifat relatif. Jadi bisa menjadi tata cara yg benar. Akan tetapi bisa juga menjadi sesuatu yg debatable.

100 perinsip website usability yg sy yakini :

  • User akan melihat teks sebelum melihat gambar

    Aneh memang tapi beginilah adanya psikologi pembaca online. Kebanyakan orang membuka halaman website untuk mendapatkan informasi berupa teks dan bukannya gambar.
  • Fokus mata user dimulai dari sudut kiri atas halaman web

    Tidaklah mengherankan hal ini sebenarnya karena pada dasarnya orang orang yg menulis tulisan latin itu membaca dari kiri ke kanan. Jadi, gerakan mata saart membaca konten online juga mengikuti pattern ini. Mereka membaca sesuai gaya tulisan. Tentu saja, hal ini berlaku terbalik bila tulisan dalam huruf arab dan huruf kanji. Orang arab dan orang jepang akan mengikuti pattern baca yg berbeda pula.
  • Mulanya gerakan mata dimulai dari kiri atas sampai bagian atas terbaca sebelum bergerak ke bawah dan akhirnya ke samping kanan

    Umumnya user itu membaca dgn cepat. Atau istilah usabilitynya, scanning. Pembaca menscan halaman web mengikuti pattern yg mirip huruf F. Dimulai dari sudut kiri dan dinajutkan menscan keseluruhan header dan akhirnya kembali ke bagian kiri dan kemudian ke samping kanan. Begitu seterusnya sampai ke bagian bawah.

    Oelh karenanya, kita hrus meletakkan headline, sub headline, list daftar, highlight text pada bagian ini agar pembaca lebih mudah menemukannya.
  • Pembaca mengabaikan banner

    Pembaca itu pintar. Mereka tau mana yg merupakan iklan dan mana sekedar promosi. Jadi bila iklan online itu adalah sumber pemasukan website, maka harus diperhatikan psikologi ini. Salah satu kesimpulan Penelitian eye tracking adalah pengunjung mengabaikan iklan dan segala yg memiliki ciri yg sama dengannya.
  • Teks dgn Formatting dan Fonts yg keren itu rutin diabaikan

    Kebanyakan user berasumsi kalau mereka itu iklan dan tidak memiliki informasi yg mereka butuhkan.

    Malah, penelitian membuktikan kalau pengunjung sukar menemukan informasi pada teks berwarna berukuran besar karena alam sadar mereka menguruh untuk mengabaikan teks tsb.visual mereka mengabaikannya. Oleh karenanya, pertahankan jalur baca imajiner situs kita dan hindari kemungkinan hal hal yg tidak penting menjadi pengalih perhatian pembaca. Siapapun pasti tidak ingin adanya distraksi saat baca kan ?
  • Tampilkan angka dengan angka (dan bukan huruf)

    Kayaknya bagi siapapun, lebih mudah untuk menemukan informasi dalam sebuah website bila kita menulis dalam format angka dan bukannya huruf. Apalagi, umumnya user itu scanning dan bukan baca perlahan lahan. Jadi usahakan agar mereka mudah menemukan apa yg bisa membuat mereka tetap tertarik untuk membaca.
  • Ukuran Font mempengaruhi prilaku baca pembaca

    Apakah kamu ingin mengubah psikologi baca pengunjung ? Maka ubah ukuran font. Seandainya konten memiliki font kecil maka pembaca akan lebih fokus membaca.Sementara, bila teks memiliki font besar maka pembaca cenderung scanning (membaca cepat). Tergantung kebutuhan, kamu perlu menimbang apakah konten kamu itu lebih cocok untuk dibaca perlahan atau cepat. Tapi itninya tetap sama, yaitu kamu harus menyediakan konten berkualitas.
  • Pengunjung sudi baca subtitle bila menarik.

    Jangan membuat headline demi mentaati skema penulisan tertentu. Misalnya yg biasa ada di penulisan ilmiah yg selalu dimulai dgn title abstrak dan diakhiri dgn seubheadline referensi. Kita harus memastikan kalau subheadline kita itu menarik dan relevan.
  • Umumnya pembaca cuma scan bagian bawah halaman

    Selalu ingat pattern F dan bukannya pola huruf E. Iser jarang menyentuh bagian bawah seperti footer. Oleh karenanya bila hendak mendesain bagian footer, kita harus memperhatikan kemudahan menemukan informasi di bagian terpojok halaman web ini.
  • Paragraph pendek lebih bagus daripada yg panjang

    Informasi harus didesain untuk bisa dibaca cepat. Otomatis paragraph pun harus pendek pendek mengikuti tuntutan ini. Satu satunya alasan menulis panjang lebar adalah bila konteks memungkinkan.
  • Layout satu kolom lebih baik bagi mata daripada yg memiliki muti kolom

    Jangan membombardir user dengan terlalu banyak informasi. Biasanya website yg sederhana itu lebih baik daripada yg beribet. Kolo, yg terlalu rame umumnya dihindari pembaca karena mereka sukar membacanya.
  • Iklan pada bagian atas dan kiri halaman web akan mendapat lebih banyak perhatian .

    Bila kamu ingin menampilkan iklan maka tidak ada cara yg lebih baik daripada mengatur posisinya disebelah kiri atas karena bagian tsb biasanya mendapat perhatian paling banyak.

    Tentu saja, sekali pun diletakkan di sana, bukan berarti pengunjung pasti akan mengklik iklan tsb. Sangat konyol untuk mengorbankan desain demi meletakkan iklan. Jadi pertimbangkan baik baik dimana kamu ingin memposisikan iklan tsb.
  • Iklan yg diletakkan disebelah konten terbaik itu lebih rutin di lihat pembaca.

    Bila kamu ingin iklan yg terpasang itu terlihat dan memiliki kemungkinan diklik orang lain, maka coba buat iklan tsb menyatu dgn desain. Letakkan mereka pada bagian paling menarik dalam artikel kamu. Nantinya, pembaca masih bisa menemukan apa yg dicarinya dan kamu memperoleh keuntungan lebih melalui iklan.
  • Text Ads lebih mungkin diperhatikan di banding tipe iklan lain

    Seperti yg dijelaskan barusan, kebanyakan user internet itu tidak ingin menghabiskan waktu membaca sesuatu yg mirip dengan iklan. Oleh karenanya, text ads itu pilihan bijak di banding yg lain.

    Text ads juga lebih mudah disatukan dengan desain keseluruhan web. Jelas saja, penyatuan ini membuat iklan tidak membebani desain dan membuat pengunjung kesal :D
  • Gambar Ukuran besar lebih menarik Perhatian

    Bila gambar abstrak itu dibenci, maka gambar yg berukuran besar itu disenangi. Kebanyakan orang lebih tertarik melihat image yg besar dimana mereka bisa melihat secara detail informasi yg disediakan. Pastikan kalau image tsb juga relean. Tp pertimbangkan trend pengguna internet yg memiliki bandwidth kecil. Umumnya mereka memblok iklan adsense.
  • Image yg concrete lebih cocok daripada yang gambar abstrak

    Umumnya orang tidak suka sesuatu yg tidak dapat dengan mudah mereka pahami. Jadi prinsip yg sama jga berlaku dalam penggunaan image. Semakin abstrak gambar yg ita pakai, maka semakin membingungkan pesan yg hendak disampaikan.
  • Heading selalu mengarahkan pembaca

    Headline adalah bagian pertama yg dicari user. Bila mereka berasal dari search engine, maka minimalnya redaksi headline itu harus mirip dengan apa yg tertulis di halaman SERP. Jadi pembaca yg baru dihadapkan dengan halaman web baru tidak mengalami kebingungan. Mereka dapat dengan mudah menemukan apa yg mereka cari. Oleh karenanya, pilihan nan bijak laksana bila kita mendesain headline yg warna dan ukuran font berbeda drastis dengan keseluruhan isi web.
  • Umumnya user mudah mengenali tombol dan menu itu sebagai bagian navigasi

    User yg biasa hidup di dunia dekstop (terutama dekstop windows ) terbiasa melihat tombol dan menu. Kedua elemen ini dikenali memiliki tugas khusus. Bila klik, maa akan begini dan begitu. Intinya, bila user tertarik dgn tulisan kita maka mereka akan mencari tombol dan menu yg mereka butuhkan. Misalnya tombol berpindah ke halaman lain atau menu untuk menitip komentar.
  • Daftar teks menggunakan . dan
  • itu mampu lebih lama menarik perhatian pembaca

    Salah satu tehnik memotong paragraph yg kepanjangan itu dengan menyajikan informasi dlm daftar panjang. Format list adalah tehnik HTML yg mudah untuk digunakan saat menulis dan mendesain. Format list ini bisa membuat konten kita lebih mudah diterawang sehingga user bisa menemukan informasi lebih cepat.
  • Paragraph panjang itu sebaiknya dihindari

    Penelitian menunjukkan kalau rata rata pengunjung itu tidak punya cukup waktu untuk membaca teks teks dalam ukuran besar. Kita perlu memotong teks teks ini ke dalam paragrap yg lebih pendek atau menghilangkannya sama sekali.
  • Format tulisan mampu menarik perhatian

    Untuk menghindari kemungkinan user cuma scimming atau menscroll mpuse dengan cepat, kita perlu memberi format tertenu pada kalimat penting dalam paragrap. Kita bisa menggunakan bold, italic, atau underline. Perlu dicatat, jangan menggunakan format yg berlebihan karena bisa membuat pembaca malas membaca nya. Efek “kontras” tulisan itu pasti menghilang an dianggap bukan sesuatu yg penting.
  • Space kosong itu penting

    Meskipun sangat menggoda untuk memenuhi layar monitor dgn segala infomasi, kita tetap perlu membuat desing tsb berkesan clean atau elegan. Kita perlu mempertahankan space atau ruang dimana user merasa bebas mengistirahatkan mata.
  • Tombol navigasi itu bekerja lebih baik saat diletakkan di bagian header

    Navigasi bisa diletakkan di samping kanan atau kiri dan bisa juga diletakkan di bagian bawah. Akan tetapi penelitian membuktikan kalau tempat terbaik meletakkan navigasi itu di atas. Dalam konteks wordpress, kita mengenal page navigation. Umumnya designer meretakkan di bagian bawah, akan tetapi, lebih bagus bila diletakkan di bagian atas saja dekat dengan header.
  • Brainstroming Kami

    Sebagaimana terjemahan bahasa indonesia, istilah brainstroming itu merujuk pada pertanyaan pertanyaan belum bisa saya dan teman teman jawab. Seandainya ada yg bisa mungkin bisa memberi opini :

  • Apakah prinsip usability di atas berlaku juga saat konten dilihat menggunakan handphone ? iya mobi dan layar monitor mereka yg kecil ?
  • Apakah kekurangan eye tracking study yg rutin menjadi patokan research usability ?
  • Bila mereka yg menulis dgn huruf latin membangun pola scanning mirip huruf F karena mereka membaca dari kiri ke kanan. Lalu bagaimana dengan yg membaca arabic dan kanji yg memiliki pola yg sama sekali berbeda. Kira kira pattern yg terbentuk akan jadi huruf apa ?
  • Ada satu prinsip dalam desain, yaitu kebebasan mendobrak konvensi. Misalnya, contoh yg paling mudah, warna link url itu biasanay biru. Tp designer memilik warna pink. Untuk contoh ekstrim ialah meletakkan comment blog pada bagian header sementara keumuman diletakkan dibawah konten. Prinsip Usability cuma bisa berdiri di mentaati konvensi. Sementara design yg bagus bisa stand out bila mendobrak konvensi. Jadi apa yg harus dilakukan ?
  • Sy percaya “prilaku user itu berubah ubah secepat berubahnya trend dan keyword“. Jadi apa bagian website atau blog yg akan konsisten membutuhkan tehnik usability yg serupa ?
  • Mengenai cara baca user yg mirip huruf F, apakah ini mutlak ? Menurut artikel yg sy baca, kita bisa mempengaruhi arah baca ini bila kita memiliki kontruksi desain tertentu. Nantinya kontruksi ini adakan memandu pembaca ke dalam aliran baca tertentu. Konsekuensi F ini kan membuat sidebar berada di posisi kanan. So, harga mati kah ?
  • Audio dan Agent

    Audio dan Agent

    Audio
    Pengertian Media Komunikasi dan Audio-Visual
    Media berarti wadah atau sarana. Dalam bidang komunikasi, istilah media yang sering kita sebut sebenarnya adalah penyebutan singkat dari media komunikasi. Media komunikasi sangat berperan dalam mempengaruhi perubahan masyarakat. Televisi dan radio adalah contoh media yang paling sukses menjadi pendorong perubahan. Audio-visual juga dapat menjadi media komunikasi. Penyebutan audio-visual sebenarnya mengacu pada indra yang menjadi sasaran dari media tersebut. Media audiovisual mengandalkan pendengaran dan penglihatan dari khalayak sasaran (penonton). Produk audio-visual dapat menjadi media dokumentasi dan dapat juga menjadi media komunikasi. Sebagai media dokumentasi tujuan yang lebih utama adalah mendapatkan fakta dari suatu peristiwa. Sedangkan sebagai media komunikasi, sebuah produk audio-visual melibatkan lebih banyak elemen media dan lebih membutuhkan perencanaan agar dapat mengkomunikasikan sesuatu. Film cerita, iklan, media pembelajaran adalah contoh media audio-visual yang lebih menonjolkan fungsi komunikasi. Media dokumentasi sering menjadi salah satu elemen dari media komunikasi. Karena melibatkan banyak elemen media, maka produk audio-visual yang diperuntukkan sebagai media komunikasi kini sering disebut sebagai multimedia.

    Pada masyarakat yang masih terbelakang (belum berbudaya baca-tulis) elemenelemen multimedia tidak seluruhnya secara optimal menunjang komunikasi. Masyarakat terbelakang hanya mengenal gambar dan suara. Pada masyarakat modern seluruh elemen multimedia menjadi sangat vital dalam membangun kesatuan dan memperkaya informasi. Suara, teks, gambar statis, animasi dan video harus diperhitungkan sedemikian rupa penampilannya, sehingga dapat menyajikan informasi yang sesuai dengan ciri khas masyarakat modern yakni efektif dan efisien. Untuk kepentingan efektifitas dan efisiensi inilah kemudian muncul istilah multimedia yang bersifat infotainment (informatif sekaligus menghibur) dan multilayer (beberapa lapis tampil pada saat yang sama). Saat menyaksikan tayangan TV masyarakat telah terbiasa melihat sinetron sambil mencermati tambahan berita dalam bentuk teks yang bergerak di bagian bawah layar TV, dan sesekali melirik logo perusahaan TV di pojok atas.

    Agent
    AGENT dan Lingkungannya
    • Agents adalah segala sesuatu yang dapat melihat/ mengartikan/ mengetahui (perceiving) linkungannya melalui alat sensor (sensors) dan bertindak (acting) melalui alat aktuator (actuators)
    • Manusia sebagai agent : mata, telinga dan organ lainnya sebagai sensors; tangan, kaki, mulut dan bagian tubuh lainnya sebagai actuators
    • Robot sebagai agent : kamera dan pejejak infra merah sebagai sensors; berbagai motor pengerak sebagai actuators
    • Software sebagai agent : tekanan pada keyboard, isi file dan paket-paket pada jaringan sebagai masukan sensors; tampilan pada layar, penulisan file dan pengiriman paket jaringan sebagai keluaran actuators

    Fungsi agent (f) adalah pemetaan dari urutan persepsi (percept) menjadi tindakan (actions)
    [f: P* ???? A]
    • Program agent berjalan pada arsitektur fisik untuk menghasilkan fungsi agent (f) agent = architecture + program

    Agent types
    1. goal-based
    Tujuan-tujuan tertentu dapat dicapai dengan cara-cara berbeda.
    – Beberapa lebih baik, memiliki manfaat yang lebih tinggi.
    • Fungsi utililas memetakan urutan kedudukan (a sequence of states) dengan
    angka real.
    • Meningkatkan tujuan-tujuan :
    – Memilih tujuan dari tujuan-tujuan yang berbenturan
    – Memilih dengan tepat beberapa tujuan memiliki kemungkinan berhasil.

    2. utility-based
    Agent membutuhkan tujuan untuk mengetahui situasi mana yang
    diharapkan.
    – Akan menjadi sulit ketika urutan yang panjang dari tindakan tindakan
    (actions) dibutuhkan untuk mencari tujuan.
    • Typically investigated in search and planning research.
    • Major difference: future is taken into account
    • Is more flexible since knowledge is represented explicitly and can be manipulated.

    3.learning
    Semua program-program agent terdahulu mendeskripsikan
    metode untuk memilih tindakan-tindakan (actions).
    – Yet it does not explain the origin of these programs.
    – Learning mechanisms can be used to perform this task.
    – Teach them instead of instructing them.
    – Advantage is the robustness of the program toward initially
    unknown environments.
    • Learning element: introduce improvements in performance
    element.
    – Critic provides feedback on agents performance based on
    fixed performance standard.
    • Performance element: selecting actions based on percepts.
    – Corresponds to the previous agent programs
    • Problem generator: suggests actions that will lead to new and
    informative experiences.
    – Exploration vs. exploitation

    Karakteristik Agent
    • Autonomy
    Untuk mencapai tujuan dalam melakukan tugasnya secara mandiri, agent harus memiliki kemampuan kontrol terhadap setiap aksi yang mereka perbuat, baik aksi keluar maupun kedalam. Dan satu hal penting lagi yang mendukung autonomy adalah masalah intelegensi (intelligence) dari agent.
    • Intelligence, Reasoning, dan Learning
    Dalam konsep intelligence, ada tiga komponen yang harus dimiliki: internal knowledge base, kemampuan reasoning berdasar pada knowledge base yang dimiliki, dan kemampuan learning untuk beradaptasi dalam perubahan lingkungan.
    • Mobility dan Stationary
    Khusus untuk mobile agent, dia harus memiliki kemampuan yang merupakan karakteristik tertinggi yang dia miliki yaitu mobilitas. Berkebalikan dari hal tersebut adalah stationary agent.
    • Delegation
    Agent bergerak dalam kerangka menjalankan tugas yang diperintahkan oleh user. Fenomena pendelegasian (delegation) ini adalah karakteristik utama suatu program disebut agent.
    • Reactivity
    Karakteristik agent yang lain adalah kemampuan untuk bisa cepat beradaptasi dengan adanya perubahan informasi yang ada dalam suatu lingkungan (enviornment).
    • Proactivity dan Goal-Oriented
    Sifat proactivity boleh dikata adalah kelanjutan dari sifat reactivity. Agent tidak hanya dituntut bisa beradaptasi terhadap perubahan lingkungan, tetapi juga harus mengambil inisiatif langkah penyelesaian apa yang harus diambil dan selalu berorientasi kepada tujuan yang diembannya (goal-oriented).
    • Communication and Coordination Capability:
    Agent harus memiliki kemampuan berkomunikasi dengan user dan juga agent lain. Masalah komunikasi dengan user adalah masuk ke masalah user interface dan perangkatnya, sedangkan masalah komunikasi, koordinasi, dan kolaborasi dengan agent lain adalah masalah sentral penelitian Multi Agent System (MAS). Bagaimanapun juga untuk bisa berkoordinasi dengan agent lain dalam menjalankan tugas, perlu bahasa standard untuk berkomunikasi.

    Visualisasi Informasi

    Sumber : http://agungsr.staff.gunadarma.ac.id/Downloads/files/5633/Visualisasi+Informasi.doc

    Visualisasi Informasi


    Dalam dunia "perkomputeran" semua yang mengalir dan berproses adalah kumpulan-kumpulan data yang berupa angka biner, oktal, desimal, atau heksadesimal dan huruf. Pada awalnya user yang memberikan data yang akan diproses oleh komputer yang akan berubah menjadi informasi. Informasi inilah yang diperlukan oleh user untuk kepentingannya dalam mengambil sebuah keputusan.

    Akan tetapi, bagaimanakah cara agar user bisa langsung memahami informasi yang dia dapatkan? Tidak mungkin semua user adalah orang ahli yang mengerti informasi yang ditampilkan oleh komputer. Dalam visualisasi informasi programmer dituntut agar penyajian informasi sebuah data bisa menjadi user frendly bagi user awam sekaligus tidak menghilangkan detail penting bagi user ahli.

    Materi yang lengkap dibawah ini :


    • Apa itu "Informasi ?"

    - Item-item, entity-entity, hal-hal yang tidak memiliki korespondensi fisik secara langsung.

    - Dugaan abstrak dari entity penting juga.

    · Apa itu "Visualisasi ?"

    - Penggunaan komputer-pendukung, penggambaran data visual interaktif untuk memperkuat pengamatan. Dari [Card,Mackinlay Shneiderman ' 98]

    MANTRA : ikhtisar dulu, tingkatkan dan menyaring kemudian permintaan detail -- Ben Shneiderman

    • Inti :

    - Mengambil materi tanpa suatu penyesuaian fisik dan memetakannya ke suatu 2-d atau 3-d ruang fisik

    - Memberi informasi tentang suatu penyajian visual yang bermanfaat untuk analisa dan pengambilan keputusan

    • Visual membantu kita berpikir

    - Pengamatan eksternal

    - menyediakan suatu kerangka acuan, tempat penyimpanan sementara

    • Tujuan visualisasi adalah pengertian yang mendalam, bukan gambar

    - Pengertian yang mendalam

    Penemuan, Pengambilan keputusan, Penjelasan

    Domains: Teks, Statistik, keuangan/ data bisnis, internet, informasi, perangkat lunak,
    • Analisis Data

    - Data item dengan atribut atau variabel

    - Menghasilkan tabel-tabel data

    • Struktur-struktur visual

    - Substrate mengenai ruang, tanda, properti tanda grafis

    • UI dan interaksi

    Tugas analitik untuk dilakukan

    Komponen Studi

    • Search (pencarian)

    - Menemukan suatu potongan informasi yang spesifik

    Berapa banyak game yang braves menangkan di tahun1995?

    Novel apa yang pengarangnya ian fleming?

    • Browse

    - Melihat atau memeriksa sesuatu dengan cara kebetulan, mencari informasi yangmenarik

    Belajar tentang kristalografi

    Apa yang telah jane lakukan belakangan ini?

    • Analysis (analisis)
    • Comparison-Difference (perbandingan-perbedaaan)
    • Outliers, extremes (ekstrim)
    • Patterns (pola)
    • Assimilate (asimilasi)
    • Categorize (menggolongkan)
    • Locate (menempatkan)
    • Identify (mengidentifikasi)
    • Rank (peringkat)
    • Associate (rekanan)
    • Reveal (mengungkapkan)
    • Monitor (monitor)
    • Maintain awareness (melihara kesadaran)


    • PENGUMPULAN JUMLAH

    - Mengakumulasi elemen individual ke dalam sebuah unit yang lebih besar untuk menghadirkannya seperti sesuatu yang utuh/lengkap.

    • OVERVIEW DAN DETAIL

    - Menyediakan baik tinjauan global maupun kemampuan detail zooming.

    • FOKUS + KONTEKS

    - Menunjukkan detail dari satu atau lebih daerah di dalam sebuah konteks global yang lebih besar (eg, fisheye).

    • DRILL-DOWN

    - Memilih item individual atau set yang lebih kecil dari sebuah tampilan untuk sebuah pendapat detail / analisis.

    • BRUSHING
    Memilih atau menunjuk / memspesifikasikan nilai, kemudian melihat item yang tepat di tempat lain pada tampilan.

    Pokok Persoalan


    · Desain Grafik

    - sangat penting dalam informasi fisualisasi

    - mensti menampilkan data dan hubungan-hubungannya(relationship), menjelaskannya

    - lampiran buku-buku menyediakan banayak baris pedoman/petunjuk

    · Stabilitas

    - menampilkan informasi menjadi sangat menarik sebagai ukuran dari perkembangandata

    - menyelesaikan piksel-piksel pada beberapa titik

    - membutuhkan pengumpulan, navigasi(pembelajara lebih lanjut)

    · Interaksi

    - computer menyediakan kemampuan interaktif yang kita tidak peroleh pada halaman cetak

    kerap kali, harus menelusuri(mempelajari) dan berlatih tentang tampilan-tampilan data yang berbeda untuk menambah wawasan.

    Penggambaran secara hierarki
    • Definifsi

    Urutan dari item-item dimana item tertentu merupakan induk atau moyang dari item lainnya.

    • Contoh : Sistem Berkas

    Folder / direktori dengan folder / subdirektori dan berkas didalamnya.

    • Variasi dari teknik Hirarki
    Tradisional tree views, alternative, views ruang pemberkas.
    • Representasi isi ruang dikembangkan oleh Shneiderman dan Johnson
    • Anak tergambar dalam orang tua mereka / Anak “dikandung” dibawah orang tua
    • Horisontal dan Vertikal alternatif mengiris pada setiap tingkat kesuksesan