RSS

Dasar-dasar WebSite

26 Apr

PENDAHULUAN

Web merupakan salah satu layanan yang di dapat oleh pemakai komputer yang terhubung dengan internet. Web pada awalnya merupakan ruang informasi dalam internet, dengan menggunakan teknologi hyperteks, pemakai dituntun untuk menemukan informasi dengan mengikuti link yang disediakan dalam dokumen web yang ditampilkan dalam browser web. Sekarang ini internet identik dengan web, karena kepopulerannya web sebagai standar interface pada layanan-layanan yang ada di internet (Sidik dan Pohan 2010:1) , kini banyak digunakan untuk keperluan komunikasi dari email sampai dengan chatting serta melakukan transaksi bisnis.

Sekarang ini web bukan lagi sesuatu yang sulit di jangkau, karena banyaknya web yang disediakan di intenet, maka muncullah keinginan untuk bagaimana mendesain web dengan baik. Banyak keterampilan yang harus dikuasai untuk menciptakan presentasi teks dan media yang disampaikan kepada penikmat web. Menurtut Darmansyah (2010: 232) dasar-dasar web desin yang baik mencakup konten yang baik, kegunaanm penampilan dan visibilitas. Agar dapat merancang web maka seseorang harus mengerti bagaimana web bekerja. Web terdiri dari dokumen – dokumern dan file yang ditulis dalam bentuk HTML (Hipertext Markup Language) yang mengkomunikasikan browser dengan browser. Menurut sidiq dan pohan (2010:4) web bekerja dengan cara sebagai berikut:

  1. Informasi web disimpan dalam dokumen yang disebut dengan halaman-halaman web (web pages)
  2. Web page adalah file-file yang disimpan dalam komputer yang disebut dengan server-server web (web server)
  3. Komputer – komputer membaca web page disebut sebagai web client
  4. Web client menampilkan page dengan menggunakan program yang disebut dengan browser web (web browser)
  5. Browse web yang popular adalah Internet Eksplorer  dan Mozzila

Kualitas situs sangat ditentukan oleh kualitas orang yang mendesainya, semakin banyak aplikasi yang dikuasai oleh seorang perancang web maka kualitas web yang dihasilkan juga akan semakin berkualitas dan sebaliknya. Perkembangan teknologi informasi dan komunikasi sangat pesat dirasakan saat ini , tenaga pendidik tidak dapat lagi menjauh dari keharusan meningkatkan kemampuannya terutama dalam pembelajaran berbasis ICT. Salah satunya yaitu kemampuan seorang guru untuk merancang pembelajaran berbasis WEB. Berikut beberapa uraian mengenai dasar-dasar web desain.

 PEMBAHASAN

 A. Kerangka Dasar HTML

Hipertext Markup Language (HTML) yaitu sebuah bahasan yang digunakan untuk menulis halaman Web atau dikenal juga dengan istilah web page. Dokumen HTML merupakan suatu dokumen teks biasa yang mengandung tanda-tanda (tag) tertentu untuk menentukan tampilan suatu teks dan tingkat kepentingan dari teks tersebut dalam suatu dokumen. Ciri utama dokumen  HTML adanya tag dan elemen. Elemen dalam dokumen HTML dikategorikan menjadi dua elemen yaitu elemen <HEAD>  yaitu untuk menuliskan keterangan tentang dokumen web yang akan ditampilkan, dan elemen <BODY> merupakan bagian utama dalam dokumen web. Dimana semua isi dokumen yang akan ditampilkan di dalam browser harus dituliskan misalnya list (daftar), tabel dan lain-lain. Tag ditandakan dengan tanda “<” tag awal , “>” tag akhir. Sebelum tag <BODY> di tuliskan bisa juga disisipkan tag <TITLE> untuk memberikan judul/informasi pada caption browser web tentang topic dari dokumen web yang akan ditampilkan dalam browser.  Berikut contoh program sederhana penggunaan tag dasar html

<html>

<head>

<title> mengenal dasar-dasar html </title>

<body>

<p> <b><center> NONA SUZANA </b>

<p> <b> <center> RINI SEFRIANI </b>

<p> <B> <center>TUGAS KELOMPOK </b>

<p> <b> <center >PEMBELAJARAN BERBASIS WEB </b> <br>

      <p> <b> <center >Dosen Pembina : DR. DARMANSYAH, S.T,

       M.Pd</b>

<h7><font color=”blue”><i><marquee>created by:kelompok 6 </marquee> </i></font></h7>

</body>

</html>

Program yang telah dibuat pada lembar kerja notepad disimpam dengan ektension .html, misalnya “index.html”

B. Prinsip-Prinsip Desain Web

Untuk mendapatkan web desain yang baik perlu bagi seorang desainer untuk dapat memahami dan mempedomani prinsip-prinsip dasar web desain. Karena akan ditampilkan di internet dan akan dilihat oleh banyak orang, agar menghasilkan tampilan yang menarik dan disenangi oleh penimat web. Bagaimana pemilihan warna yang tepat, tata letaknya sehingga dapat membantu pengguna dalam memahami berbagai informasi yang ditawarkan oleh pembuat web.

Menurut Schwier, R, & Misanchuk, E dalam Darmansayah (2010: 234) beberapa yang harus diperhatikan dalam desain garfish web

1.      Teori Desain Grafis Klasik

a. Prinsip desain

Prinsip – prinsip dasar desain dapat dikelompokkan ke dalam dua kategori yaitu; prinsip-prinsip dan elemen. Prinsip desain adalah kebenaran menyeluruh. Mereka mewakili asumsi dasar yang memandu dunia praktik desain, dan mempengaruhi susunan objek dalam komposisi. Sebagai bahan perbandingan, elemen-elemen desain merupakan komponen desain sendiri, objek yang akan diatur. Sekurang-kurangnya ada lima prinsip yang dapat dijadikan sebagai landasan dalam desain web yaitu (1) saldo, (2) rhythm, (3) proporso, (4) dominasi, (5) unity, (6) konsep terkait

b. Balance

Yaitu keseimbangan yang dihasilkan dari melihat bentuk dan menilainya berdasarkan struktur fisik khususnya sisi halaman.

 1) Asimetris, Keseimbangan asimetris terjadi ketika komposisi tidak merata di sekitar poros tengah. Ini melibatkan objek yang diatur denga ukuran yang berbeda-beda dalam suatu komposisi keseimbangan sehingga mereka satu sama lain memiliki proporsi visual masing-masing. Komposisi asimetris cenderung memiliki ketegangan visual yang lebih besar. Atau dikenal juga dengan keseimbangan informal.

 2)  Rhythm

Sering disebut juga dengan irama yang merupakan pengulangan atau silih bergantinya elemen dengan interval tertentu yang telah ditetapkan. Beberapa jenis irama yang biasanya ditentukan oleh perasaaan yang ditimbulkannya ketika melihat suatu objek. Misalnya regular, mengalir dan progresif

3) Proporsi

Yaitu perbandingan distribusi dimensi atau bentuk. Ini adalah hubungan dalam skala antara satu elemen dengan yang lainnya, atau antara seluruh objek dan salah satu bagiannya.

4) Dominance

Berkaitan dengan berbagai derajat penekanan dalam desain. Bagaimana menentukan bobot visual suatu komposisi, ruang, dan membentuk perspektif, dan sering menyelesaikan di mana mata tertuju pertama kali ketika melihat suatu desain.

5) Background

Yaitu objek yang diberikan unsure penekanan tersier paling berat secara visual yang biasanya dijadikan sebagai latarr belakang komposisi.

2. Unity (Kesatuan)

Konsep kesatuan menggambarkan hubungan antara satu objek dengan seluruh bagian-bagian dari suatu komposisi. Kesatuan dalam desain adalah khususnya yang berhubungan dengan bagaimana otak manusia mengorganisasi informasi visual ke dalam kategori, atau kelompok. Bagian-bagian dari kesatuan diantaranya yaitu penutupan (closure), kontinuitas, kesamaan (similarity). Adapun konsep tambahan yang terkait dengan prinsip-prinsip desain yaitu;

(1)   Kontras atau oposisi, aksentuasi, yang bertujuan untuk meningkatkan kedinamisan

(2)   Keseimbangan ruang positif dan negative. Mata akan letih jika terlalu banyak unsure yang akan dilihat pada desain, untuk menghindari diperlukan ruang kosong (white space) atau ruang negative.

(3)   Aturan Pertiga (aplikasi proporsi golden section). Alat yang digunakan untuk membuat komposusu dengan gagasan paling menarik di mana elemen utama berada di pusat

(4)   Pusat  visual

Penempatan visual secara alami, focus, dan tentu saja memudahkan menarik perhatian

 (5)   Warna dan Typography

Hal ini penting dalam sebuah desain web. Warna akan membrikan kejelasan, kenyamananm ketrtarikan pengguna. Sementara typoghrapy akan membuat kejelasan informasi dan kenyamanan membaca. Warna dan typoghrapy ini memberikan kontribusi terhadap kualitas desain web dan berujung pada kepuasan pengguna.

 3. Elemen Visual Desain

Yaitu unsure-unsut desain visual seperti

(1)   Garis (line)

(2)   Bentuk (shape & form)

Semua desain bermuara kepada pencarian bentuk (shape dan form). Shape adalah bentuk duadua dimensi sedangkan form adalah 3 d.

(3)   Tekstur (texture)

Unsure sensasi atau rasa permukaan suatu objek, bisa kasar, lembut, dan tajam.

(4)   Warna dan nada (tone)

Warna yang ditangkap mata manusia sebenarnya gelombang cahaya dengan spekrum tertentu. Dalam mendesain web keharmonisan warna sangat penting menjadi perhatian bagi desainer.

(5)   Ruang (space)

Pengertiang ruang pada bidang datar tidak sama dengan ruang tiga dimensi. Ruang-ruang yang tidak diisi atau kosong pada bidang datar disebut dengan ruang negatif. Ruang yang disi dengan gambar atau objek disebut dengan ruang positif. Tetapi ruang negatif Itu sama pentingnya dengan ruang positif, yaitu agar terjadi keseimbangan di antara kedua ruang ini. Kadang-kadang seniman membuat poton­gan-potongan yang tidak memiliki perbedaan antara ruang positif dan negatif.

 Ukuran & Lokasi Vertikal

Cara termudah menunjukkan kedalaman adalah untuk mengubah ukuran objek, dengan objek yang lebih dekat menjadi lebih besar dan lebih jauh benda-benda yang lebih kecil. Dan juga, kita melihat benda­benda yang lebih tinggi di garis depan gambar dan rendah sebagai tempat yang lebih jauh di bagian belakang

Overlapping

Ketika benda-benda yang setengah tertutup oleh benda-benda lain di depan mereka, kita melihat mereka sebagai lebih jauh lagi daripada benda-benda yang menutupi.

Perspektif Udara atau Atmosfer Perspektif)

Perspektif atmosfer menggunakan nilai warna dan kontras untuk menunjukkan kedalaman. Objek yang lebih jauh umumnya memiliki kurang jelas kontras mereka dapat memudar ke latar belakang atau menjadi tidak jelas daerah gelap.   Objek latar depan akan menjadi jelas dengan kontras yang lebih tajam.

 4. Teori Gestalt

Gestalt berpendapat bahwa suatu hal dipengaruhi oleh lingkungan dimana mereka berada dan apa yang mengelilinginya, sehingga lebih baik menggambarkan jumlah keseluruhan daripada bagian-bagian “Behrens, R 1984 dalm Darmansyah :2010: 246”. Prinsip gelstalt ada tiga hal yaitu gambar dan latar, kesamaan, kedekkatan atau persentuhan , kontinuitas serta penutupan, area, smietri

  • Gambar dan latar

Menurut Mullet dalam Darmansyah 2010:246, istilah gambar dan latar adalah bagaimana kita menggunakan unsure-unsur grafis yang mirip dalam rupa dan bentuk pada kelompoknya bersama-sama secara keseluruhan. Unsure –unsur serupa (gambar) yang berlawanan dengan unsure-unsur yang berbeda (latar) untuk member kesan keseluruhan

  • Kesamaan, kedekatan atau persentuhan, kontinuitas

Prinsip kedekatan atau persentuhan menyatakan ahwa hal-hal yang lebih dekat bersama-sama akan dipandang sebagai milik bersama. Mullet, &Sano, D (dalam Darmansyah:2010:247) meyatakan prinsip kesamaan menyatakan bahwa hal-hal yang memiliki karakteristik visual seperti bentuk, ukuran, warna, tekstur, nilai, atau orientasi akan dipandan sebagai milik. Prinsip kedekatan atau persentuhan menyatakan bahwa hal-hal yang lebih dekat bersama-sama akan dipandang sebagai milik bersama.

  • Penutup (closure)

Prinsip penutupan menurut Mullet, K. & Sano, D. (1995) berlaku ketika kita cenderung melihat angka-angka secara lengkap bahkan ketika sebagian informasi hilang.   Kita melihat tiga lingkaran hitam tertutup oleh segitiga putih, bahkan melalui hal itu bisa saja menjadi tiga lingkaran yang tidak lengkap bergabung bersama-sama. Pikiran kita bereaksi terhadap pola-pola yang akrab, meskipun kita sering menerima informasi yang tidak lengkap.

  • Area

Prinsip tentang area menyatakan bahwa daerah yang lebih kecil dari dua gambar yang saling tumpang tindih dianggap sebagai sosok sementara yang lebih besar dianggap sebagai latar.         Kita melihat persegi yang lebih kecil menjadi bentuk di atas gambar lain, sebagai lawan dari sebuah lubang dalam bentuk yang lebih besar.

  • Simetri

Prinsip simetri menggambarkan di mana seluruh bentuk dirasa­kan oleh individu daripada bagian-bagian yang membentuk gambar. Jika Anda memahami sesuai dengan prinsip simetri, Anda mungkin akan melihat dua berlian yang tumpang tindih

  •  Desain Interface

Ada tiga prinsip yang perlu dipertimbangkan dalam desain inter­face yaitu (1) memilih cara termudah, (2) mengenali keragaman, dan (3) mencegah kesalahan

a. Memilih Cara Termudah

“interface Design berusaha untuk menemukan cara yang paling efisien untuk merancang pesan elektronik agar mudah dimengerti” (Shneiderman:1998). Penelitian cabang ilmu komputer memberikan rekomendasi untuk perancangan yang tepat dari menu, ikon, bentuk, serta tampilan data dan entri layar. Browseryang Anda gunakan seka­rang adalah hasil dari desain antarmuka berbentuk tombol dan menu yang telah dirancang untuk memudahkan Anda mengakses Web.

b. Mengenali Keragaman

Dalam rangka untuk mengenali keragaman, perancang harus memperhitungkan pengguna sistem, mulai dari pengguna pemula, pengguna berpengetahuan atau pengguna ahli.         Setiap jenis peng­guna mengharapkan tata letak layar untuk mengakomodasi keinginan mereka. Para siswa membutuhkan banyak bantuan, para ahli ingin mendapatkan di mana mereka pergi secepat mungkin.

Shneiderman, B. (1998) menyatakan bahwa ada delapan keten­tuan dalam desain interface:

1) Berusaha untuk konsisten. Urutan tindakan konsisten harus dilakukan dalam situasi yang mirip.Terminologi yang identik harus digunakan pada prompt, menu, dan membantu tampilan Iayar.Konsisten dalam warna, tata letak, huruf besar, huruf kecil, dan sebagainya harus diterapkan di seluruh desain.

2) Memberikan kesempatan kepada pengguna untuk enggunakan cara pintas. Untuk meningkatkan kecepatan interaksi menggunakan singkatan, tombol khusus, perintah tersembunyi dan lain-lain.

3) Menawarkan umpan balik yang informatif. setiap tindakan pengguna, sistem harus menanggapi dengan cara tertentu (dalam Web desain, hal ini dapat dicapai dengan dengan HTML-misalnya, sebuah tombol akan membuat suara mengklik atau berubah warna saat diklik untuk menampilkan sesuatu yang telah terjadi kepada pengguna).

 c. Desain dialog untuk menghasilkan penutupan

Tindakan harus diatur dalam kelompok-kelompok yang memiliki awal, tengah, dan akhir. Umpan balik yang informatif pada penye­lesaian tindakan yang dilakukan sekelompok pengguna menunjukkan kegiatan mereka telah selesai dengan sukses.

d. Kesalahan menawarkan pencegahan dan penanganan kesala han yang sederhana

 e. Memberikan kesempatan pengguna untuk mengembalikan tindakan dengan mudah.

Dukungan lokus kontrol internal

Pengguna perpengalaman ingin bekerja, karena itu usahakan sistem yang ada tidak membosankan urutan entri data, kesulitan dalam memperoleh informasi yang diperlukan, dan ketidakmampuan untuk menghasilkan tindakan yang diinginkan yang menimbulkan kecemasan dan ketidakpuasan.

f. Mengurangi beban memori jangka pendek

Suatu studi menunjukkan bahwa manusia dapat menyimpan hanya 7 potongan informasi (plus atau minus 2) dalam memori jangka pendek mereka.  Anda dapat mengurangi beban memori jangka pendek dengan merancang layar di mana pilihan yang jelas terlihat, atau menggunakan menu pulldown dan ikon.

Mencegah Kesalahan

Prinsip ketiga adalah untuk mencegah kesalahan bila memung­kinkan. Langkah-langkah tertentu dapat diambil untuk desain agar mengurangi kesalahan yang mungkin terjadi, dengan menggunakan metode seperti mengatur menu layar secara fungsional, merancang layar yang berbeda dan menimbulkan kesulitan bagi pengguna untuk melakukan tindakan ireversibel. Salah seorang peneliti yang telah berkontribusi secara luas untuk bidang desain interface adalah Donald Norman. Menurut Norman, desain harus menggunakan kedua pengetahuan di dunia nyata dan pengetahuan di kepala.

Bagaimana kita dapat menghubungkan rekomendasi dari pene­litian desain interface langsung ke desain Web? Terapkanlah saran yang dikemukakan Norman (1988) berikut ini:

a) Kenali Keragaman

b) Membuat navigasi utama menjadi lebih cepat dan memudah­kan pengguna untuk mengulang

c) Memberikan penjelasan rinci tentang topik, simbol, dan pili­han navigasi untuk pengguna baru

d) Menyediakan indeks teks untuk akses cepat ke semua hala­man situs

e) Memastikan halaman dapat dibaca dalam berbagai format, untuk mengakomodasi pengguna yang buta atau tuli, peng­guna dengan browserversi lama, penggunaan Modem yang lambat atau gambar-gambar yang tidak bergerak Konsistensi dalam:

  • menu
  • layar
  • Warna
  • Tata kapitalisasi Font
  • Urutan tindakan
  • Menawarkan umpan balik-tombol rollover, suara ketika diklik

f.  Mencegah kesalahan dalam formulir online

g.  Penggunaan kontrol sebanyak mungkin

h.  Beban memori jangka pendek dengan menyediakan menu, tombol atau ikon. Jika Anda menggunakan ikon, pastikan Anda memiliki bagian yang menjelaskan apa yang mereka maksud.

i. Konvensi Web seperti link digarisbawahi, perubahan warna link untuk halaman yang dikunjungi, istilah umum dan lain­lain

j. Suatu model situs konseptual dengan menggunakan peta situs atau indeks

 C. Desain Web Site

1.  Dasar-dasar Hypermedia

Nama hypertext atau hypermedia menurut Ayersman (1996), telah diterapkan untuk jaringan (artikel, dokumen, file, kartu, halaman, frame, layar) yang berisi informasi dalam teks, grafik, video, suara, dan seterusnya yang dikaitkan oleh link (termasuk pointer, lintas-referensi, kutipan). Hypertext umumnya diterapkan pada teks, sedangkan aplikasi hypermedia digunakan untuk menyampaikan keterlibatan media lain, terutama audio dan video.

Hypertext digunakan untuk memperluas teks linear tradisional dengan memberi kesempatan untuk melompat ke beberapa artikel terkait.      Mengklik indeks dan tabel isi, string pencarian, bookmark, dan alat navigasi lain sangat mengubah pengalaman pembaca. Penulis hypertext perlu memilih proyek yang tepat, untuk mengatur artikel mereka yang sesuai, dan untuk menyesuaikan gaya tulisan mereka dengan media baru ini.

Dalam meninjau pembelajaran berbasis hypermedia, Ayersman (1996) mendiskusikan empat penelitian dan pembelajaran hypermedia:

(1) Penelitian didasarkan pada persepsi atau sikap tentang hypermedia; (2) penelitian didasarkan pada perbedaan-perbedaan individual atau gaya belajar; (3) penelitian tentang analisis sistem (yang mengkaji cara paling efektif untuk struktur hypermedia), dan, (3) penelitian berdasarkan kinerja yang berkisar antara penggunaan pradesain perangkat lunak untuk pembangunan perangkat lunak sendiri.

Shneiderman (1998) memberikan panduan berikut untuk mencip­takan hypertext.

a.Mengetahui user dan tugas-tugas mereka.

b. Pastikan bahwa struktur bermakna lebih dulu.

c. Terapkan beragam keterampilan (dengan memasukkan spe­sialis informasi, spesialis konten dan ahli teknologi pada tim proyek).

d.Mengorganisasikan informasi ke dalam bagian yang ber­hubungan dengan satu  topik, tema atau ide.

e. Menunjukkan keterkaitan (dengan menggunakan link ke ar­tikel terkait).

f. Pastikan kesederhanaan dalam universal. Desain struktur link navigasi dibuat lebih  sederhana dan konsisten di seluruh sistem

g. Desainlah setiap layar dengan hati-hati.

 2. Metafora Kategorisasi Web

Salah satu cara untuk membuat situs Web dipahami dan lebih mudah untuk menggunakannya adalah dengan melibatkan penggunaan metafora. Dua metafora yang membuat halaman Web lebih mudah untuk dipahami adalah melibatkan ide-ide browsing dan Searching. Kedua metafora ini telah memberikan pemahaman kepada kita tentang bagaimana Anda menemukan buku di perpustakaan.

Model mental adalah model yang didasarkan pada pemahaman pengguna yang telah dibangunnya sesuai dengan pengalamannya di sebuah situs. Pengguna dapat akrab dengan versi kertas katalog namun mungkin tidak yakin bagaimana versi online sesuai dengan pemahamannya.

 D.  Desain Web Page

Beberapa prinsip-prinsip umum yang diturunkan dari desain multimedia menurut Schwier, R., & Misanchuk, E. (1993) meliputi:

1. Prinsip Desain Multimedia dan Halaman Web

Dalam desain multimedia dan halaman Web ada lima hal yang perlu dipertimbangkan yaitu;

a. Kesederhanaan

Meskipun kelengkapan pesan perlu mendapatkan perhatian khusus dalam proses komunikasi, tetapi harus tetap menjaga pesan Anda sesederhana mungkin Schwier, R., & Misanchuk, E. (1993). Lebih lanjut ia menyarankan:

1)   Gunakan teks dan grafik sejumlah yang diperlukan untuk mendapatkan pemahaman yang lebih baik

2)   Grafik berlebihan dapat mengganggu pemahaman

3)   Font atau warna yang berlebihan dapat mengalihkan perhatian dan tidak banyak membantu belajar.

b. Konsistensi

Menjaga tata letak halaman yang inkonsistensi memaksa orang untuk menghabiskan waktu ekstra untuk mencoba mencari cara me­navigasi, atau untuk menemukan di mana jawaban pertanyaan-perta­nyaan mereka akan meningkatkan usaha kognitif. Schwier dan Misanchuk (1993) menyatakan bahwa anda harus berusaha untuk konsisten dalam:

1) Gaya presentasi dari satu bagian ke bagian lain atau dari uru­tan satu ke urutan  yang lain.

2) Penempatan sesuatu seperti orientasi informasi, perangkat navigasi, input pengguna, umpan balik, atau petunjuk pen­goperasian

3)  Penggunaan warna (termasuk’abu-abu “dalam hitam dan pu­tih)

4) Mengakses struktur seperti judul

5) Penggunaan isyarat (font, termasuk ukuran dan gaya huruf tebal, huruf  miring, dan warna)

6)  Gaya grafis

7) Terminologi (petunjuk, prompt, menu, dan layar)

8) Nama perintah  dan cara  memunculkannya

9) Perilaku interaksi yang diperlukan dalam situasi yang mirip.

c. Kejelasan (Kontras)

Agar pesan inti sampai kepada peserta didik dengan jelas perlu mengetahui dan mempertimbangkan aturan berikut untuk memperbaiki kejelasan:

1)  Menyampaikan pembelajaran menggunakan bahasa yang yang cocok dengan apa yang dipahami peserta didik.

2)   Hindari jargon dan terlalu banyak menggunakan bahasa il­miah.

3)   Ide yang ringkas dengan menjaga prosa ramping.

4)   Jaga kalimat pendek.

5)   Gunakan “bentuk titik”

6)   Gunakan kalimat aktif, bukan pasif.

7)   Tinggalkan pernyataan negatif jika mungkin; menghindari negatif ganda.

8)  Gunakan bahasa informal.

 9) Gunakan kata ganti orang.

10) Gunakan contoh yang akrab dengan peserta didik.

11) Gunakan bahasa inklusif (yaitu, non-sexist, non-rasial).

d. Keseimbangan)

Untuk memahami keseimbangan, pikirkan balok keseimbangan. Ketika objek dari bobot yang sama memiliki keseimbangan. Jika Anda memiliki beberapa benda kecil di satu sisi, mereka dapat diimbangi dengan objek besar di sisi lain.           Keseimbangan layar bekerja dalam cara yang sama.  Ini dapat dipengaruhi tidak hanya oleh ukuran benda, tetapi juga nilainya (misalnya terang atau gelap, disebut visual berat).

• Keseimbangan Formal

Keseimbangan formal biasanya lebih mudah untuk dirancang. Dapat juga dibuat item yang lebih kecil diletakkan lebih jauh dari pusat layar daripada benda yang lebih besar. Satu item gelap mungkin perlu diimbangi dengan beberapa item yang lebih ringan.

Kesimbangan Informal

Mullet dan Sano (1995) mendiskusikan, banyak desainer tipografi abad 20 menemukan vitalitas dan inheren lebih besar daya tarik visual yang disediakan oleh layout asimetris aktif. Tetapi mereka mengingatkan bahwa menciptakan layout asimetris jauh lebih sulit untuk dilakukan dan memerlukan penempatan yang hati-hati untuk mengimbangi perbedaan ukuran, posisi dan nilai dari unsur-unsur utama dari suatu desain.

• Harmoni & Kesatuan

Anda harus merancang halaman atau situs menggunakan konsistensi dan pengulangan agar menciptakan harmoni dan ke­satuan.

Harmoni dipengaruhi oleh:

1) Font dan warna serupa.

2) Gambar yang sesuai dengan topik.

3) Graft yang sama dalam nada.

Kesatuan dapat dipelihara dengan cara:

1)      Memastikan bahwa semua item yang terdapat pada halaman muncul untuk

 milik bersama.

2)      Halaman berbeda dalam situs harus mirip isi dan desain.

 2. Riset Desain Layar

Hannafin, M. J, & Hooper, S. (1989) menyatakan bahwa desain layar yang baik harus memenuhi hal-hal berikut:

1) Memusatkan perhatian pada informasi penting

2) Menarik dan mempertahankan minat Anda

3) Mempromosikan integrasi informasi baru dengan hal-hal yang telah Anda pelajari sebelumnya

4)Membantu Anda mencari, mengatur, dan melakukan navigasi informasi dengan mudah Topik desain layar yaitu;

a) Grid Layar dan Tata Letak

Grid layar dapat digunakan sebagai cara untuk menjamin kon­sistensi antara halaman dalam sebuah situs. Lynch, P. & Horton, S. (1997) menyatakan bahwa Grid dapat digunakan untuk menetapkan bahwa area tertentu pada layar harus digunakan untuk tujuan tertentu (mis. tombol navigasi atau hyperlink ditemukan di atas, bawah atau samping kiri halaman, informasi teks ditempatkan di tengah, setengah dari layar dengan ruang putih yang ditemukan di kedua sisinya).

Kepadatan Layar

Sebuah presentasi dalam konferensi oleh Jared Spool tentang profil penelitian internet baru-baru ini menemukan bahwa pengguna menilai situs dengan jumlah besar teks berspasi jarang “terlalu rumit, terlalu rinci, visual membingungkan, tidak jelas dan “tidak menarik”.

Pemilihan Font

Para peneliti yang melakukan penelitian terhadap ukuran Font yang optimal menggunakan Macintosh Centris, 14 inci memantau dan menemukan bahwa Font TrueType Times preferensi untuk Font 14-16 poin lebih baik dari Font 10-12. Karena hasil penelitian ini bertentangan dengan banyak temuan dari penelitian berbasis cetak, maka mereka menyimpulkan bahwa “ukuran Fontyang direkomendasikan berdasar­kan media cetak tidak memadai” Chen, M., Jackson, W, Parson, C., Sindt, K., Summerville, J., Tharp, D., Ullrich, R., & Caffarella, E.: 1996).

Web Font

Microsofts home page termasuk bagian mengenai “Tipografi di Web” meliputi beberapa Fontyang bebas didistribusikan. Dengan munculnya Cascading Style Sheets, desainer dapat menetapkan bahwa Font ini dapat digunakan pada halaman Web untuk meningkatkan ke­terbacaan (Veen, J. (1998).

 Teks Justifikasi

Konvensi tipografi di majalah dan surat kabar biasanya menggunakan teks justfikasi (penuh) dibenarkan, namun penelfian menunjukkan bahwa teks justifikasi ditujukan agar teks lebih mudah dibaca (Muncer, SJ, Gorman, BS, Gorman, S:, dan Bibel, D., 1986; Trollip, SR, & Penjualan, G., 1986). Justifikasi membutuhkan beberapa persyaratan antara lain adanya keselarasan margin termasuk menyisakan ruang di antara huruf atau kata-kata (jarak huruf mungkin tidak sama).

Ikon Buttons

Dalam desain multimedia dan Web, perhatian besar perlu diberikan pada antarmuka navigasi, sarana di mana pengguna dapat menavigasi dari satu lokasi ke lokasi lain. Navigasi dimulai dengan menggunakan ikon, tombol atau menu.

Button dan Box

Desain tombol agak sedikit rumit, karena Anda harus menggambarkan secara grafis, dirancang sendiri dan membuatnya tampak seperti tombol (tepi miring memberikan efek 3D yang membuat gambar tampak seperti sesuatu yang akan tekan).

Berikan umpan balik kepada pengguna bahwa pelaksanaan ini terjadi setelah tombol ditekan. Ini lebih sulit di masa lalu, tetapi dengan penambahan Javascript untuk Web Browser yang lebih baru, ikon akan berkedip atau berubah warna ketika ditekan, pengguna memberikan arti bahwa sesuatu akan terjadi.

Ada banyak sumber di Web untuk tombol yang telah dirancang. Berikut adalah beberapa alamat situs yang disarankan:

1) Jelane’s Web Graphics

2) Andy’s Art Attack-Buttons

3) Reallybig. com

4) Alat Netscape Dada-Buttons

 Ikon

Ikon sangat berguna untuk merancang alat bantu navigasi, te­tapi juga memiliki kesulitan tersendiri. Keuntungan menggunakan ikon antara lain (Horton, 1994):

1) Untuk membantu pengguna bekerja dengan lebih cerdas me­ningkatkan produktivitas dan reliabilitas dengan mengguna­kan tanda-tanda dapat membaca kata dua kali lebih banyak dan menggunakan hanya separuh waktu.

2) Mewakili bentuk visual dan spasial tentang konsep-konsep seperti bentuk, warna, posisi, sudut, ukuran, tekstur, dan pola.

3)  Untuk menghemat ruang dalam menampilkan layar yang penuh sesak

4) Untuk mempercepat pencarian (kita dapat mengenali ikon jauh lebih cepat daripada membaca daftar kata-kata) lebih baik dan segera mudah diingat (Baik Braden dan Horton men­gutip studi di mana grafis dapat diingat hampir 100% akurat)

5) Memberikan kemudahan fungsi kepada pengguna yang buta huruf atau setengah buta huruf

6) Untuk meningkatkan akses ke halaman Web atau produk multimedia.

Shneiderman (1998) memberikan pedoman penggunaan ikon mencakup beberapa hal sebagai berikut:

1) Mewakili objek atau tindakan dalam suatu cara yang akrab dan dikenali.

2) Membatasi jumlah ikon yang berbeda.

3) Membuat ikon menonjol dan latar belakang .

4) Mempertimbangkan secara cermat ikon tiga dimensi karena disamping dapat menangkap mata secara cepat juga dapat mengganggu

5)  Memastikan bahwa satu ikon yang dipilih terlihatjelas ketika dikelilingi oleh ikon lain

6) Membuat setiap ikon berbeda

7) Menjamin harmonisasi setiap ikon sebagai anggota keluarga ikon yang lain.

 Warna

Bahan harus dirancang dalam nuansa abu-abu, hitam dan putih untuk tahap pertama, kemudian ditambahkan dengan warna lain yang dapat menambahkan efektifitas pembelajaran. Berikut adalah beberapa alasan mengapa menggunakan warna tertentu (Schaeffer, R. & Bateman, W.:1996):

 Pedoman Berdasarkan Sifat-sifat Fisiologis Warna

Murch (1995) membahas penggunaan layar warna berdasarkan sifat-sifat fisiologis mata, membahas bagaimana jumlah dan distribusi batang dan kerucut di mata mempengaruhi persepsi garis dan warna.

Penggunaan Warna-Afektif, Struktural& Kognitif

Schaeffer & Bateman (1996) membahas peran warna dari segi afektif, menggunakan struktural dan kognitif. Peran warna terhadap afektif menyangkut bagaimana warna dapat digunakan untuk memoti­vasi atau menghasilkan Respons emosional.

Struktur warna melibatkan makna fungsional untuk berbagai warna atau warna lain sebagai petunjuk dan pesan kesalahan dalam warna ketiga, sehingga dapat membantu pengguna untuk membeda­kan antara berbagai fungsi pesan teks.Warna juga dapat digunakan untuk menarik perhatian pengguna menyampaikan pesan-pesan yang harus ditangani dengan cepat.

Melibatkan Kognitif, penggunaan warna dapat dijelaskan sebagai berikut:

Pett dan Wilson (1996) memiliki daftar beberapa saran di bawah ini dalam penggunaan warna:

1) Gunakan warna untuk menambah nyata suatu informasi.

2) Gunakan warna untuk membedakan antara unsur-unsur vi­sual .

3) Gunakan warna untuk memusatkan perhatian pada petunjuk yang relevan.

4) Gunakan kode warna dan link secara logis tentang unsur-un­sur yang terkait.

5) Konsisten secara umum di seluruh warna pada bahan yang te­lah dipilih.

6) Gunakan warna seperti merah sangat jenuh dan ungu untuk menarik perhatian dan menciptakan Respons emosional.

7)   Gunakan warna yang sangat jenuh bahan-bahan yang dituju­kan untuk anak-anak.

8)   Perhatikan makna umum warna yang diterima seperti merah dan kuning yang hangat, hijau dan biru yang sejuk, merah be­rarti berhenti, hijau berarti  jalan, dan lain-lain.

9) Ketika memproduksi bahan bagi orang-orang dari berbagai budaya mempen`.imbangkan makna atribut warna mereka.

Warna yang Tepat

Desain konservatif, mungkin dimulai dengan hitam dan, putih. Tidak membuat warna menjadi satu-satunya cara untuk membedakan berbagai pilihan. Menggunakannya dengan tepat untuk melayani keperluan kejelasan dan fungsionalitas.

 3. Ukuran dan Resolusi Layar

Banyak rekomendasi yang diberikan untuk tata letak dalam penelitian desain layar berkaitan dengan tata letak layar CAI (Computer Asisted Instruction) atau multimedia. Web menghadirkan tantangan unik untuk desainer karena beberapa alasan. Karena Web dapat digunakan pada banyak platform, dengan berbagai resolusi layar (dari 640 x 480 up to 1048 x 760) dan dengan kedalaman warna bervariasi dari hitam dan putih semua cara menjadi 32 bit warna, seorang desainer harus sangat berhati-hati dalam cara mereka desain tata letak mereka. Beberapa rekomendasi yang diberikan untuk layer:

4. Gaya Menulis

Pada tahun 1997, Morkes dan Nielsen melakukan 3 penelitian yang melihat cara orang membaca di Web. Temuannya adalah:

(1) Pengguna meringkas dan menggunakan gaya piramida ter­balik seperti yang digunakan oleh wartawan, di mana informasi yang paling penting pertama disajikan dalam sebuah artikel

(2) Pengguna menghargai tempat yang dapat membantu mereka un­tuk memindai dan menemukan informasi yang menarik

(3) Pengguna tidak menghargai penulisan berbagai bunga-bunga atau “marketese” dan meinginkan halaman Web lebih ringkas (5) Menulis sederhana dan informal adalah lebih disukai daripada gaya penulisan formal

 5. Multimedia

Sebagaimana telah disinggung sebelumnya bahwa multimedia memiliki peranan yang sangat penting dalam desain Web. Internet tidak mungkin mengabaikan peran multimedia desain karena ketergantungan penyampaian informasi terhadap multimedia. Pokok­pokok bahasan yang akan dipaparkan dalam multimedia ini adalah (1) penelitian multimedia, (2) grafik dan gambar, (3) animasi, (4) video (4) audio dan waktu respon.

a) Riset Multimedia

Bagian ini akan membicarakan penelitian tentang penggunaan elemen multimedia dalam perangkat lunak tradisional dan multimedia. Bagaimana persepsi pengguna tentang hubungan animasi, suara, teks, dan gambar bersama di halaman Web. Penelitian multimedia juga terkait dengan link berbagi unsur tersebut secara bersama­sama.

Penelitian persepsi, animasi, dan saluran komunikasi ganda berisi temuan-temuan yang mungkin penting untuk Web desain. Bebe­rapa studi yang dilakukanAnglin, dkk. (1996) menunjukkan bahwa in­formasi bergambar jauh lebih mudah diingat daripada teks. Lebih lanjut ia mengusulkan teori pengkodean ganda yang menyatakan bahwa orang menyimpan informasi dalam dua cara yaitu lisan atau informasi bergambar. Karena teks disertai dengan gambar atau animasi sebenarnya menyimpan informasi dalam dua cara terpisah di otak, (disandikan secara verbal dan sebagai gambar) terdapat lebih banyak kemungkinan bahwa orang akan mengingat informasi jika disajikan dalam kedua format.

Ketika menggabungkan modalitas yang berbeda (gambar, teks,audio, animasi) secara bersamaan perlu ada pertimbangan tertentu. Kombinasi tersebut dapat membanjiri kapasitas pengolahan informasi dalam otak.

b) Grafik dan Gambar

Bagian ini membahas penelitian tentang penggunaan elemen grafis dan multimedia perangkat lunak pendidikan. Penelitian ilustrasi statis dan dinamis di dalam teks dan pembelajaran berbasis komputer dapat memberikan panduan mengenai bagaimana grafis digunakan apakah penggunaannya berguna atau mengganggu dalam desain Web.

1. Fungsi Grafik dalam Pembelajaran

Levie dan Lentz 1982 mengidentifikasi empat fungsi untuk grafik:

1) Grafik atau gambar menarik perhatian pada materi atau men­garahkan

perhatian dalam bahan, pada gilirannya dengan menggunakan grafik dengan cara ini akan meningkatkan ke­mungkinan pengguna mengingat mated.

2) Gambar afektif meningkatkan kenikmatan atau mempenga­ruhi emosi dan sikap.

3) Secara kognitif melibatkan penggunaan grafis dan gambar dapat meningkatkan pemahaman (misalnya, memberikan elaborasi untuk penjelasan teks), untuk meningkatkan ingatan dan retensi, atau memberikan informasi yang sulit dijelaskan dengan teks.

4) -Penggunaan gambar mengurangi ketidakjelasan informasi dan  membantu pembaca memecahkan kode teks yang sulit.

2. Penggunaan Grafik yang Tepat

Anglin, Towers dan Levie (1996) menemukan pada penelitiannya tentang penggunaan grafis dan gambar dalam teks pembelajaran dan memperoleh kesimpulan sebagai berikut: yang bisa Anda gunakan pada halaman Web Anda. Tetapi perlu pertimbangan karena umumnya gambar besar memerlukan waktu cukup lama untuk men-down load nya. Oleh karena itu, perlu ada pertimbangan   matang dalam memilih gambar clan ukurannya. Faktor budaya-mungkin saja pengguna dari budaya lain akan meli­hat situs kita, penting memastikan bahwa penggunaan warna-warna tertentu atau grafis tidak menyinggung pengguna dari budaya lain. Horton (1993) memberikan rekomendasi tentang menggunakan graf­is dalam cara yang peka budaya.

 Animasi

Bagian ini membahas animasi clan kapan harus digunakan. In­formasi berikut adalah penelitian tentang animasi atau gerak dalam behan pembelajaran. Hasil penelitian tentang animasi atau gerak da­lam bahan pengajaran menyatakan (Anglin, G., Towers, R., & Levie, H.:1996).:

• Animasi (gerak) dapat mengakibatkan efek positif terhadap pembelajaran jika menyajikan konsep kritis.

Animasi (gerak) bisa meningkatkan kualitas pembelajaran suatu tu­gas prosedural yang kompleks. Gerak atau tindakan yang digunakan untuk meningkat-kan realisme presentasi tampaknya tidak berpengaruh signifikan pada pembelaja­ran.

 Menurut Nielsen (1995) yang cocok untuk menggunakan animasi meliputi:

1) Menunjukkan kesinambungan dalam transisi,

2) Menunjukkan dimensi dalam transisi ,

3) Menggambarkan perubahan dari waktu ke waktu,

4) Multiplexing layar menunjukkan lebih dari satu potong-an informasi di lokasi yang sama,

5) Memperkaya representasi grafis.

 Video

Bagian ini membahas kapan video harus digunakan dalam halaman Web Anda. Karena pembatasan Bandwidth, penggunaan video tidak disarankan untuk menggunakan video dalam halaman Web pembelajaran.  Ketika video digunakan, biasanya nilai produksi rendah dan mengecewakan bagi pengguna.  Jendela video yang dihasilkan sangat kecil sehingga sulit untuk melihat detail.  Nielsen (1995) menunjukkan video yang digunakan dalam cara yang terbatas untuk alasan berikut:

1) Untuk mempromosikan acara televisi,

2) Pengguna memberi kesan kepribadian seorang pembicara,

3)  Menunjukkan hal-hal yang bergerak seperti klip balet atau demo produk yang perlu menunjukkan gerakan.

Audio

Bagian ini membahas audio, kapan dan bagaimana cara mengu­nakan. Manfaat utama dari audio dapat menyediakan saluran yang terpisah dari tampilan. Ucapan dapat digunakan untuk memberikan komentar atau membantu penjelasan tanpa menutupi informasi di la­yar.

 Waktu Respons

Penelitian tentang waktu respon Nielsen, J. (1993) tentang operasi komputer telah melalui proses waktu yang panjang. Menurut Nielsen, penelitian tentang berbagai sistem hypertext menunjukkan bahwa pengguna memerlukan waktu respon kurang dari satu detik ketika bergerak dari satu halaman ke halaman lain, jika mereka ingin bernavigasi secara bebas melalui ruang informasi. Oleh karena itu, jika mempertimbangkan waktu respon halaman Web harus dirancang di mana pengguna harus mendapatkan sasaran yang ditujunya dalam waktu tidak lebih dari sepuluh detik, karena itulah batas kemampuan orang-orang untuk menjaga fokus perhatian mereka sambil menunggu kecepatan.

Sumber Referensi

Darmansyah. 2010.Pembelajaran berbasis WEB teori konsep daplikasi.Padang.UNP Press

Sidik dan Pohan. 2010. HTML. Bandung. Andi

 
Leave a comment

Posted by on April 26, 2012 in Pembelajaran Berbasis Web

 

Tags:

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: