Pada pertemuan ini dibahas prinsip dasar desain situs web.

(1)

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/

FAKULTAS ILMU-ILMU KESEHATAN

Prodi : Manajemen Informasi Kesehtan

Modul

: 10

Matakuliah

: Teknologi Informasi Kesehatan 7

Dosen

: Kundang K.Juman, Ir, MMSI

(2)

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

(3)

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)

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,

(5)

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.

(6)

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

.

(7)

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 :

(8)

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

(9)

 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