FAKULTAS ILMU-ILMU KESEHATAN Prodi : Manajemen Informasi Kesehtan
Modul Matakuliah Dosen TA
: 10 : Teknologi Informasi Kesehatan 7 : Kundang K.Juman, Ir, MMSI : 2012-2013
Pokok Bahasan DASAR – DASAR DESAIN SITUS WEB Pada pertemuan ini dibahas prinsip dasar desain situs web. Tujuan , : 1. Agar Mahasiswa dapat mendesain halaman situs web secara benar dan seimbang 2. Agar Mahasiswa dapat memahami prinsip dasar desain situs web Daftar pustaka : 1. O’Brien, Tim, E-Commerce Handbook, Melbourne: Tri-Obi Production, 2000 2. www./designworld.master.web.id/
PRINSIP DASAR DESAIN SITUS WEB
Prinsip / pegangan utama sebuah desain adalah kualitas atau karakteristik bawaan dalam berbagai bentuk seni, seperti keseimbangan, keserasihan, kontras, konsistensi, variasi, ruang kosong dan gerak. Dengan prinsip - prinsip desain diharapkan dapat menghasilkan desain yang baik dan efektif, yang kemudian menghasilkan desain yang mudah dibaca dan cepat dimengerti. Pembahasan prinsip desain diantaranya adalah :
1.
Keseimbangan Keseimbangan adalah hasil susunan satu atau lebih elemen
dari desain yang sama antara yang satu dengan lainnya. Ada dua jenis keseimbangan, yaitu : a. Keseimbangan Simetris (Formal) Keseimbangan simetris mempunyai elemen yang sama bobotnya pada dua sisi dari garis vertikal imajiner pada halaman web. Tata letak simetris ini menghasilkan desain yang statis dan berkesan formal, sederhana dan mudah dalam pembuatanya, tapi membosankan dan kurang menarik. b. Keseimbangan Asimetris (Informal) Keseimbangan simetris mempunyai elemen yang tidak sama bobotnya pada dua sisi dari garis vertikal imajiner pada halaman web. Tata letak desainya menjadi lebih dinamis untuk memakai ruang yang masih kosong. 2.
Kontras Kontras mudah dipahami yaitu dengan melihat dari dua
objek yang berlainan, sehingga membuat kesan tampilan desain yang menonjol dan menarik perhatian. Pemberian kontras pada suatu objek haruslah kontras positif, karena jika kontras yang diberikan negatif, objek tersebut menjadi samar-samar atau tidak terlihat, terserap oleh background. 3.
Konsistensi Konsistensi dapat membuat pengunjung merasa nyaman,
karena
mejelajah
situs
lebih
mudah
dan
tidak
membingungkan. Ketika pengunjung membuka suatu halaman situs yang konsisten, dia langsung tahu ke mana harus pergi dan dia tahu berada di mana. Konsistensi dapat diterapkan pada margin, tata letak, huruf, warna dan terutama navigasi. Dalam pembuatan navigasi harus sama antara satu halaman dengan halaman lain. Dan dalam penggunaan huruf sebaiknya gunakan satu sampai tiga jenis saja. Sedangkan dalam penggunan warna, gunakan tiga sampai empat warna, itu sudah cukup. Penggunaan grafik yang konsisten bisa menambah kecepatan penampilan halaman lainnya, karena ketika
browser menampilkan grafik, browser akan menyimpan sementara (cache) informasi grfik tersebut pada harddisk. Konsistensi biasanya sangat efektif
digunakan untuk
membangun brand suatu perusahaan. Dan brand itu bukan hanya logo, tapi sekumpulan attribut, yaitu logo, slogan, warna dan kualitas emosional yang diasosiasikan dengan perusahaan dan produk layanannya, atribut -atribut tersebut memberikan identitas dan kepribadian individu, organisasi atau perusahaan.
4.
Ruang Kosong
Ruang kosong biasanya disebut dengan ruang negatif, suatu istilah yang menggambarkan suatu ruang terbuka di antara elemen - elemen desain. Ini bisa di temukan di antara kata, paragraf, huruf dari teks, bisa juga diantara gambar dan elemen di halaman web. Ini membantu dalam mengarahkan mata pembaca dari satu titik ke titik lainnya
B. Dasar - Dasar Desain Web Warna merupakan sensitivitas yang berhubungan dengan indra. Warna dapat merebut perhatian, menarik, menolak, menggemaskan bahkan warna bisa mempengaruhi emosi. Warna dapat menimbulkan kesan pertama pada pengunjung ketika menjelajah sebuah situs web. Warna modern biasanya terkesan bersih dan bercahaya, seperti biru dan kuning. Warna bersahabat biasanya terkesan ceria dan menyenangkan, seperti orange, kuning, hijau. Warna perusahaan biasanya bersih, seperti biru, putih dan abu - abu. Warna anak - anak biasanya terkesan ceria dan menonjol, seperti merah, kuning dan biru (warna primer).
C. Usability Usability
adalah
sebagai
suatu
pengalaman
pengguna
dalam
berinteraksi dengan aplikasi atau situs web sampai pengguna dapat mengoperasikannya dengan mudah dan cepat. Web site harus memenuhi lima syarat untuk mencapai tingkat usability yang ideal, antara lain : 1.
Mudah untuk dipelajari Letakkan isi yang paling penting pada bagian atas halaman, agar pengunjung dapat mendapatknya dengan cepat.
2.
Efisien dalam penggunaan Jangan menggunakn link yang terlalu banyak, sediakan seperlunya
dan
hantarkan
pengunjung
untuk
menncapai
informasi yang diperlukan dengan cepat dan mudah.
3.
Mudah untuk diingat Situs jangan terlalu banyak melakukan peruban yang terlalu mencolok khususnya pada navigasi.
4.
Tingkat Kesalahan rendah Hindari link yang tidak berfungsi (broken link) atau halaman masih dalam proses pembuatan (under construction).
5.
Kepuasan Pengguna Kepuasan adalah hal yang penting untuk diperhatikan untuk keberlngsungan web site.
Beberapa tip untuk membuat navigasi yang baik, yaitu : ■ Buatlah navigasi yang jelas dan ringkas. ■ Umumnya, navigasi diletakan di sebelah kiri atau di atas sebuah halaman web. ■ Navigasi bisa berbentuk teks atau grafik. Apabila navigasi berbentuk grafik sertakan pula teks pada grafik tersebut. ■ Berikan ruang antara navigasi. ■ Hindari pemakaian frame untuk navigasi, karena membuat desain terlihat statis. ■ Jaga konsistensi. Letakan pada tempat yang sama di tiap halaman, gunakan warna yang sama, dan tempatkan pada tempat yang mudah untuk dilihat.
Beberapa tip untuk membuat link yang standar, yaitu : ■ Gunakan garis bawah untuk menandai sebuah link. Dan hindari garis bawah teks yang bukan link. ■ Bedakan warna sebuah link yang belum pernah dikunjungi dengan yang sudah. ■ Jangan sampai link yang tidak berfungsi (broken link). Dan link yang belum ada isinya, jangan dicantumkan. ■ Gunakan breadcrumb untuk mempermudah pengunjung untuk menjelajahi situs dengan cepat. Beberapa tip untuk menghindari warna buta (warna yang jelek), yaitu : ■ Hindari menggunakan hanya warna hijau dan warna merah saja dalam desain. Karena kebanyakan orang tidak bisa membedakan antara bayangan warna merah dan warna hijau. ■ Jangan
menggunakan
warna
sebagai
petunjuk.
Lebih
baikgunakan petunjuk lain yang lebih dimengerti.
■ Buatlah kontras yang tinggi antar teks dengan background. Beberapa tip untuk mempercepat ksesgrafik dalam sebuh situs, yaitu: ■ Menggunakan grafik dengan hemat dan secukupnya. ■ Gunakan grafik ukuran kecil dan gunakan fasilitas optimize pada program pengolah grafik. ■ Gunakan gambar format gif, karena ukuran filenya lebih kecil. Tetapi jika menggunakn warna yang komplek seperti foto,
gunakan format jpeg. ■ Jangan
menggunakan
grafik
untuk
navigasi
yang
menggunakan beberapa bahasa yang berlainan, karena sulit untuk pemeliharaan dan pengembanganya. ■ Gunakan atribut Width dan Height dalam tag img src, ini akan mempercepat akses. ■ Gunakan atribut border=0 pada tag src karena beberapa browser akan menampilkan border biru di sekeliling gambar apabila gambar dipakai sebagai link. ■ Gunakan
atribut
alt
dalam tag
img
src
karena tidak
semua pengunjung memiliki browser yang dapat menampilkan grafik. Beberapa tip untuk membuat situs terlihat sederhana, yaitu : ■ Gunakan judul dan subjudul untuk memisahkan bagian teks. ■ Gunakan ruang kosong secukupnya. ■ Tulikan isi dengan ringkas dan singkat. ■ Berikan tanda terang pada kalimat yang dianggap penting. ■ Gunakan background yang terang dengan teks yang gelap atau sebaliknya. ■ Hindari warna yang tidak serasi. ■ Jangan terlalu tergantung pada teknologi baru, karena user akan kehilangan waktunya untuk mengakses plug-in terbaru. Beberapa tip untuk membuat konsistensi pada situs, yaitu:
■ Menjaga letak elemen desain berada di lokasi yang sama pada setiap halaman. ■ Pada umumnya logo diletakan di ujung atas sebelah kiri halaman. ■ Pergunakan jenis huruf yang sama (maksimal tiga jenis huruf). ■ Pergunakan j enis huruf yang standar.
■ Jangan memakai terlalu banyak warna yang berbeda. Desain situs E-Commerce 1. Desain Untuk Resolusi Monitor Yang Berbeda Desainlah situs E-Commerce yang dapat tampil baik pada resolusi yang kini sering dipergunakan (800×600/1024×768). Anda dapat menggunakan satuan % (persen) pada tabel layout untuk tampilan situs yang resizeable pada berbagai resolusi, namun pertimbangkan juga mengenai konsekuensi perubahan layout bila dilihat pada monitor dengan resolusi yang lebih besar atau lebih kecil dari resolusi yang Anda gunakan saat mendesain. Bila tidak, gunakan satuan pixel pada tabel layout agar tampilan fixed namun optimasikan pada resolusi yang lebih kecil/sering digunakan misalnya 800X600. 2. Batasi Panjang Baris (Teks) Untuk Kemudahan Membaca Bila situs yang Anda desain memiliki teks yang cukup panjang, batasi panjang teks Anda sekitar 70 karakter. Bila teks tersebut disimpan didalam tabel, beri tabel tersebut ukuran sekitar 480 pixel agar tidak memanjang.
3. Beri Label pada Grafis Beri label pada setiap grafis yang Anda gunakan di situs Anda. Hal ini untuk memudahkan pengunjung yang melihat situs Anda dengan cepat (tidak mau menunggu seluruh gambar dalam situs terdownload) atau bila tampilan grafis di-disabled. Pada browser teks seperti Lynx, label akan tampil sebagai pengganti image. 4. Pergunakan URL pendek dan mudah diingat Pergunakan URL yang pendek dan mudah diingat pada setiap seksi atau bagian
dalam
situs
Anda,
misalnya;
www.berjualan.com/buku,
www.berjualan.com/vcd, dan lain-lain. 5. Pergunakan Font Standar yang Terinstall di Kebanyakan Komputer
Font-font yang digunakan untuk web didesain untuk kemudahan membaca pada layar monitor. Pergunakan font-font standar agar kompatible bila digunakan pada browser yang berbeda atau bahkan pada sistem operasi yang berbeda pula. 6. Pergunakan Link Standar Gunakan warna-warna link yang standar dan biasa digunakan. Biru untuk link yang belum dikunjungi dan ungu bila telah dikunjungi. Lebih baik pergunakan link standar dari pada beresiko membingungkan pengunjung Anda dengan mengubah warna link
7. Cantumkan ukuran file pada file yang dapat di download Cantumkan ukuran file pada file-file yang di didownload oleh pengunjung, hal ini bertujuan agar pengunjung dapat memperkirakan waktu downloading pada kecepatan akses yang ia gunakan. Pengunjung biasanya kesal bila telah mendownload
konten
(seperti
PDF)
dan
ternyata
cukup
lama
untuk
menunggunya terdownload. 8. Jangan buat pengunjung men-scroll halaman
Orang tidak membaca situs Web, namun hanya men-scan. Artinya, mereka akan langsung mengalihkan perhatian pada konten yang mereka lihat pertama kali menarik perhatian dan langsung mengkliknya, padahal dihalaman bawah yang tidak tampil di browser terdapat konten yang ia cari atau lebih menarik dan bermanfaat.
9. Kesederhanaan Kunci Utama
Desain yang sederhana tidak hanya cepat didownload, namun juga sangat nyaman untuk dilihat, dan yang terpenting mudah untuk digunakan. Background sebaiknya berwarna terang dan beri warna kontras dengan konten. Anda juga harus membatasi jumlah warna yang Anda gunakan untuk mempertahankan kesederhanaan. Ada pemeo yang berbunyi “Keep it simple, stupid!” dari sebuah artikel lain yang saya baca.Demikianlah,
tip
desain
untuk
situs
E-Commerce.
Semoga
bermanfaat untuk Anda yang akan mendesain situs E-Commerce.
Beberapa contoh halaman situs e-commerce :
Gambar situs e-commerce
Gambar situs e-commerce www.bhineka.com
Gambar situs e-commerce www.jakartanotbook.com
Research on Learning with Hypermedia In a review of hypermedia-based learning, Ayersman [1] discussed four strands of research into learning and hypermedia: research based on perceptions or attitudes about hypermedia; research based on individual differences or learning styles; research based on system analyses (which examined the most effective ways to structure hypermedia); and, research based on performance which ranged from use of pre-made software to the construction of one's own software. His conclusions:
positive attitude for hypermedia
multimode hypermedia can address different learning styles more effectively than single-mode teaching
hypermedia is at least as effective as lecture and especially effective with remedial and learning-disabled students
having students construct their own hypermedia had benefits which go much further than the acquisition of content; one study reported increases in many higher level cognitive processes such as "finding and interpreting information,
articulating
and
communicating
knowledge,
and
using
computers as cognitive tools" (p. 516). As a counterbalance to this optimistic review of the potential of hypermedia for learning, McKnight, Dillon & Richardson [2] provide a different viewpoint. After reviewing various studies on learning and hypermedia, they conclude:
few significant differences between results for linear instruction and hypermedia
need to focus less on the process of learning and more on the outcomes (student achievement)
an evolutionary approach to design based on user-centered task-based design should be taken.
Guidelines for Hypertext Creation Shneiderman [3] provides the following guidelines for creating hypertexts:
Know the user and their tasks.
Ensure that meaningful structure comes first.
Apply diverse skills (by including information specialists, content specialists and technologists on the project team).
Respect chunking. Organize information into chunks that deal with one topic, theme or idea.
Show interrelationships (by using links to related articles).
Ensure simplicity in traversal. Design the link structure so that navigation is simple and consistent throughout the system
Design each screen carefully.
Reduce cognitive load by minimizing the burden on the user's short term memory. You can do this by providing on-screen prompts such as icons or menus rather than requiring the user to memorize terms or codes. The goal is to enable users to concentrate on the contents while the computer vanishes (p. 558-559). Some new research into issues surrounding hypermedia can be found at the Hypermedia Development Workshop Series
TUGAS : Jawablah pertanyaan dibawah ini : 1. Jelaskan hal-hal apa saja yang perlu diperhatikan saat kita akan mendesain/ membuat layout halaman website 2. Jelaskan cara membuat navigasi halaman web secara benar
