Bab 12 – Design Web

TI0051 – Interaksi Manusia dan Komputer

Hernawati Gohzali, S.Kom., M.TI.
Florida N.S. Damanik, S.T., M.M.

PRODI. TEKNIK INFORMATIKA (S-1)

Design web
* Langkah untuk membangun web :
1. Merumuskan tujuan
Berdasarkan isi maupun tujuan, suatu website biasanya dapat
digolongkan sebagai berikut :
* Website marketing : sebagai media presentasi dan pemasaran.
* Website customer service : sebagai media untuk melayani
konsumen.
* Website e-commerce : sebagai media transaksi online.
* Website informasi/berita : sebagai media informasi berita.
Design web
Langkah-langkah membangun halaman web :
1.1 Menentukan isi website
Faktor yang paling penting dalam suatu website adalah isi dari website itu
sendiri. Hal tersebut berkaitan dengan manfaat yang akan diperoleh
pengunjung dari sebuah website.
1.2 Menentukan target pengunjung
Meskipun suatu website mempunyai sifat terbuka dalam arti sebuah website
bebas dikunjungi oleh semua orang, namun alangkah baiknya apabila dalam
pembuatan website perlu dilakukan gambaran target yang akan dituju oleh
sebuah website. Alasan ini lebih didasarkan pada penggunaan hardware dan
aplikasi browser yang berbeda dengan setiap pengunjung.
Design web
1.3 Menentukan struktur website
Struktur website diperlukan untuk memberikan kemudahan dalam
mengelola suatu website. Tentunya struktur tersebut harus
disesuaikan dengan isi dari website. Dengan memiliki struktur yang
terorganisasi dengan baik, suatu website akan memberikan
kemudahan dalam navigasi, editing dan pemeliharaan website
tersebut.
Design web
2. Rancang web
Faktor keindahan desain tampilan dari suatu website merupakan
salah satu faktor yang paling penting dalam menentukan
keberhasilan suatu website, selain faktor kecepatan loading. Suatu
situs yang baik memiliki suatu kesatuan desain bisa dikatakan
memiliki kesamaan tema dalam halaman-halaman webnya.
Hal ini penting dalam hal estetika maupun segi navigasi. Kesamaan
desain yang biasanya dipertahankan antara lain kesamaan jenis font
yang digunakan, warna, tombol navigasi (menu), letak menu
dansebagainya.
Design web
Karena itu sangatlah penting bagi seorang designer web untuk
mengetahui aturan-aturan yang berlaku dalam mendesain suatu
website.
Hal ini diperlukan agar design web dari website yang akan dibangun
tidak terkesan sekedarnya. Adapun hal-hal penting yang perlu untuk
diketahui seorang designer web adalah :
1. Prinsip dasar design
2. Elemen design
3. Konsep design
4. Pembuatan layout
Prinsip Dasar Design
• Untuk membangun suatu website yang baik, seorang designer web
sebaiknya memperhatikan prinsip yang ada, terlepas dia
mempunyai bakat seni atau tidak. Adapun prinsip-prinsip yang perlu
diperhatikan antara lain :
1.Unik
Yang dimaksud dengan unik dalam mendesain suatu website
adalah kesadaran seorang designer untuk tidak meniru atau
menggunakan karya orang lain.
Prinsip Dasar Design
2. Komposisi
Untuk memperindah tampilan halaman web, seorang designer web harus
betul-betul memahami komposisi, baik bentuk maupun warna yang akan
digunakan dalam website.
3. Simple
Banyak dari seorang designer web yang memegang prinsip “keep it simple”.
Hal ini ditujukan agar tampilan website terlihat rapi, bersih dan informatif.
4. Semiotic
Semioticilmu yang mempelajari tentang tanda-tanda. Dalam hal ini
diharapkan pengunjung dapat dengan mudah dan cepat mengerti ketika
melihat tanda dan gambar yang terlihat dalam suatu website.
Prinsip Dasar Design
5. Ergonomic
Ergonomic dalam mendesain suatu website adalah kepunyaan yang
akan didapatkan pengunjung dalam membaca dan kecepatan yang
akan diperoleh pengunjung dalam mencari informasi.
Hal-hal yang perlu diperhatikan oleh seorang web designer untuk
mencapai prinsip ini adalah :
a. Pemilihan ukuran font yang tepat sehingga mudah dibaca.
b. Menempatkan link sedemikian rupa sehingga mudah dan cepat
untuk diakses dan yang lebih penting lagi adalah suatu website
terlihat lebih informatif.
Prinsip Dasar Design
c. Fokus
Fokus adalah hierarki prioritas dari pesan yang akan disampaikan.
Dengan adanya fokus tersebut, diharapkan pengunjung dapat
memahami pesan mana yang lebih dahulu harus dibaca atau dilihat.
d. Konsistensi
Konsistensi adalah pemilihan bentuk atau style yang digunakan pada
elemen-elemen perancangan web dan digunakan pada semua
halaman website. Website yang konsisten akan memberikan identitas
tersendiri dan mampu memperlihatkan visi serta misi dari website
tersebut.
Elemen – Elemen Design
• Design grafis khususnya dalam halaman-halaman web terdiri dari beberapa
elemen sebagai berikut :
1. Teks adalah bagian paling utama untuk menampilkan informasi.
2. Grafik atau image merupakan elemen yang dapat membantu menjelaskan
informasi. Dengan penggunaan grafik maupun image, orang lebih mudah
memahami suatu pesan.
3. Animasi merupakan sarana untuk menampilkan informasi dengan baik,
disamping itu animasi merupakan daya tarik yang mudah diingat
pengunjung.
4. Video dapat merupakan hasil suatu rekaman dengan kamera video, HP
maupun hasil pengolahan komputer.
Elemen – Elemen Design
5. Suara melengkapi desain web, memberikan efek khusus pada suatu
tampilan animasi serta memberikan kenyamanan bagi pengunjung
yang mendengarkannya.
6. Interaktif link dapat menggunakan button yang berupa teks, simbol,
grafik maupun image, yang berfungsi untuk memudahkan
pengunjung dalam menyelusuri suatu website.
Konsep Design
• Pada intinya konsep mendesain tampilan website sangat berkaitan
dengan desain grafis dan pada dasarnya mengikuti prinsip design grafis
secara umum. Oleh karena itu, alangkah baiknya jika dalam mendesain
halaman tampilan website juga memperhatikan prinsip design.
• Prinsip-prinsip design tersebut adalah
1. Komunikatif : prinsip komunikatif berhubungan dengan identitas, isi
pesan, serta audiens.
2. Estetis : memberikan suatu keindahan sehingga lebih menarik minat
pengunjung untuk lebih menggali informasi yang ditawarkan dari
suatu website.
Konsep Design
3. Ekonomis : design web harus memperhatikan faktor ekonomis
dalam arti ukuran file yang digunakan. Hal tersebut berkaitan erat
dengan kecepatan akses yang ditawarkan suatu website.
• Untuk mendapatkan design yang komunikatif, estetis dan ekonomis
hendaknya seorang designer web perlu memperhatikan pedoman-
pedoman yang ada untuk membuat tata letak suatu tampilan, yaitu
dalam mengatur elemen-elemen layout.
• Pedoman yang dimaksud adalah :
Konsep Design
1. Kesatuan, elemen-elemen layout dari halaman harus ditempatkan
sedemikian rupa sehingga merupakan kesatuan informasi pada satu
halaman atau beberapa halaman.
2. Balance, elemen-elemen layout dari halaman harus ditempatkan
sedemikian rupa sehingga terdapat keseimbangan secara
keseluruhan.
3. Kontras, diperlukan untuk menonjolkan bagian yang dianggap lebih
penting dari bagian lainnya. Kontras dapat dinyatakan dengan
membedakan ukuran serta warna dari elemen layout.
Konsep Design
4. Kontinyuitas, informasi lebih dimengerti oleh pengguna bila
mempunyai aliran-aliran yang baik, sedikit gangguan yang
menghambatnya. Suatu aliran informasi dapat dikatakan kontinyu
dan harmonis bila tampilannya mencerminkan kesinambungan dari
satu bagian ke bagian lainnya.
Kontinyuitas dapat dibuat dengan membuat halaman-halaman yang
mempunyai gaya, bentuk atau warna yang memberikan pengguna
merasakan kesinambungan dengan halaman lainnya.
Pembuatan Layout
• Bermacam-macam langkah yang digunakan untuk membuat layout
dari suatu website. Berikut ini merupakan proses yang secara umum
banyak dilakukan dalam pembuatan layout :
1.Membuat sketsa design
Seorang designer bisa saja menuangkan ide dalam pembuatan
interface dengan terlebih dahulu membuat sketsa diatas kertas.
Namun untuk kebanyakan orang, langkah ini biasanya dilewatkan dan
langsung pada langkah pembuatan layout design dengan
menggunakan software.
Pembuatan Layout
2. Membuat layout design
Banyak software yang dapat digunakan untuk membuat layout. Salah satu
diantaranya adalah macromedia, proses ini dikerjakan setelah pembuatan sketsa
design. Namun terkadang pembuatan layout merupakan proses pertama kali
dikerjakan.
3. Membagi gambar menjadi potongan-potongan kecil, proses ini diperlukan untuk
meng-optimize waktu download.
4. Membuat animasi, animasi diperlukan untuk menghidupkan atau menjadikan
website lebih interaktif.
5. Membuat HTML
Setelah merapikan layout design lengkap dengan tombol, image, teks, hal yang perlu
dilakukan adalah membuat layout ke dalam format HTML.
Usability
• Usability is a quality attribute that assesses how easy user interfaces
are to use. The word “usability” also refers to methods for improving
ease-of-use during the design process.
• Usability adalah atribut kualitas yang menjelaskan atau mengukur
seberapa mudah penggunaan suatu antar muka (interface). Kata
“Usability” juga merujuk pada suatu metode untuk meningkatkan
kemudahan pemakaian selama proses desain. Usability diukur dengan
lima kriteria, yaitu: Learnability, Efficiency, Memorability, Errors, dan
Satisfaction.
Usability
• Learnability : mengukur tingkat kemudahan melakukan tugas-tugas
sederhana ketika pertama kali menemui suatu desain.
• Efficiency : mengukur kecepatan mengerjakan tugas tertentu setelah
mempelajari desain tersebut.
• Memorability : melihat seberapa cepat pengguna mendapatkan kembali
kecakapan dalam menggunakan desain tersebut ketika kembali setelah
beberapa waktu.
• Errors : melihat seberapa banyak kesalahan yang dilakukan pengguna,
separah apa kesalahan yang dibuat, dan semudah apa mereka mendapatkan
penyelesaian.
• Satisfaction : mengukur tingkat kepuasan dalam menggunakan desain.
Hypertext
• Hypertext pertama kali diperkenalkan oleh Vannevar Bush, Juli
1945, pada artikel berjudul “As We May Think”.
• Bush mengemukakan:
• Akan adanya masalah luapan informasi.
• Perlu dibuat piranti yang memungkinkan acuan silang dalam
dokumen dan antardokumen dengan mudah.
• Usulan piranti eksplorasi informasi yang diberi nama Memex.
Hypertext
• Hypertext dan hypermedia adalah:
• Dokumen nonsekuensial dan nonlinear.
• Jaringan simpul (artikel, dokumen, file, kartu, halaman, frame,
layar) yang dihubungkan dengan link (acuan silang atau
citation).
• Hypertext: digunakan untuk menyebut aplikasi berisi hanya teks.
• Hypermedia: untuk menyampaikan keterlibatan media lain,
seperti suara dan video.
Hypertext
• Hypertext memperluas teks linear tradisional dengan:
 Kesempatan melompat ke berbagai artikel yang berhubungan.
 Backtracking yang memudahkan.
 Indeks dan daftar isi yang bisa diklik.
 Pencarian string.
 Bookmarks (favorites).
 Alat bantu navigasi lainnya.
• Langkah pertama dalam membentuk hypertext yang efektif adalah memilih proyek yang
memenuhi Aturan Emas Hypertext (The Golden Rules of Hypertext):
 Ada badan informasi besar yang diorganisasikan menjadi beberapa fragmen.
 Fragmen-fragmen tersebut saling berhubungan.
 Pemakai hanya memerlukan sebagian kecil dari fragmen pada suatu waktu.
Hypertext
• Perancangan buruk hypertext yang sering ditemui (Rivlin et al.):
• Terlalu banyak link.
• Rantai link yang panjang untuk mencapai materi yang relevan.
• Terlalu banyak artikel panjang yang membosankan.
• Fitur-fitur yang perlu didukung oleh alat bantu pembuatan hypertext:
Aksi Objek
Import An article or node
Edit A link
Export Collections of articles or nodes
Print Webs of links
Search Entire hypertext
Fitur-fitur Alat Bantu Pembuatan Situs Web
• Fitur-fitur yang perlu dipertimbangkan dalam alat bantu pembuatan
situs Web:
• Macam fungsi edit yang tersedia.
• Ketersediaan daftar link.
• Verifikasi link.
• Macam perintah pemformatan tampilan.
• Ketersediaan fungsi search and replace.
• Kendali atas warna.
• Kemampuan untuk berpindah dengan mudah dari mode author ke browser.
Fitur-fitur Alat Bantu Pembuatan Situs Web
• Ketersediaan fasilitas grafik dan video.
• Kemungkinan kolaborasi.
• Kompresi data.
• Kontrol keamanan.
• Enkripsi.
• Kehandalan.
• Kemungkinan untuk integrasi dengan software dan hardware
lain.
• Impor dan ekspor format pertukaran standar.
Membuat Dokumen untuk Hypertext
• Dalam membuat dokumen untuk hypertext perlu diperhatikan:
• Kenali pemakai dan tugasnya.
• Pastikan struktur yang berarti terpenting. Dasari pada
presentasi informasi dan bukan teknologi.
• Terapkan keterampilan yang beraneka ragam: spesialis
informasi, spesialis isi, dan teknologis.
• Hargai pemilahan. Atur informasi menjadi bongkah-bongkah
yang membahas satu topik, tema, atau ide.
Membuat Dokumen untuk Hypertext (Lanj.)
• Tunjukkan hubungan yang ada. Terlalu sedikit link
membosankan; terlalu banyak membuat kewalahan.
• Pastikan penjelajahan sederhana.
• Rancang setiap layar dengan hati-hati. Fokus perhatian jelas,
judul memandu, link menjadi panduan yang berguna.
• Gunakan beban kognitif yang rendah. Minimalkan beban
ingatan jangka pendek.
World Wide Web
• Banyaknya halaman Web menghasilkan:
• Komentar distopian tentang banjir informasi.
• Visi utopian tentang memanfaatkan banjir informasi itu untuk
hal-hal yang membangun.
• Desain untuk situs Web yang baik
10 kesalahan utama desain Web
10 pedoman terpenting usability homepage
Desain untuk Situs Web yang Baik
• Menurut Patrick Lynch, 1995
• Menyeimbangkan struktur dan hubungan dari menu atau
home page dengan halaman isi atau grafik dan dokumen
yang di-link.
• Tujuannya membangun hierarki menu dan halaman yang
berasa alami dan terstuktur dengan baik bagi pemakai,
dan tidak mengganggu pemakaian situs Web atau
menyesatkan mereka.
10 Kesalahan Utama Desain Web
• Top Ten Mistakes of Web Design (Jakob Nielsen, 1996)
 Penggunaan frame.
 Penggunaan teknologi baru dengan serampangan.
 Gerakan teks dan animasi yang berjalan terus.
 URL yang kompleks.
 Halaman yatim.
 Halaman yang terlalu panjang gulungannya. Isi terpenting dan navigasi harus tampak
di bagian atas.
 Kurangnya dukungan navigasi..
 Warna link yang tidak standar.
 Informasi yang basi.
 Waktu download yang terlalu lama. Pemakai kehilangan minat dalam 10-15 detik.
10 Pedoman Terpenting Usability Homepage
• Top Ten Guidelines of Homepage Usability (Jakob Nielsen, 2002)
• Buat maksud homepage jelas: Siapa Anda dan apa yang Anda lakukan.
• Sertakan tagline satu kalimat.
• Tulis judul window dengan ketertampakan yang baik pada search engine
dan bookmark.
• Kelompokkan informasi perusahaan dalam tempat yang dapat dibedakan.
• Bantu pemakai menemukan yang dibutuhkan.
• Tegaskan tugas prioritas tertinggi situs.
• Sertakan kotak input pencarian.
• Singkapkan isi situs.
• Tampilkan contoh isi situs.
• Awali nama link dengan kata kunci terpenting.
• Tawarkan akses yang mudah untuk fitur homepage terbaru.
10 Pedoman Terpenting Usability Homepage
(Lanj.)
• Gunakan desain visual untuk meningkatkan desain interaksi,
bukan mendefinisikan.
• Jangan memformat isi kritis secara berlebihan, misalnya
area navigasi.
• Gunakan gambar yang berarti.
Genre dan Tujuan bagi Perancang
• Cara mengategorikan situs Web:
• Berdasarkan pendiri: individu, kelompok, universitas, perusahaan, organisasi
nirlaba, badan pemerintah.
• Berdasarkan tujuan pendiri: menjual produk, mengiklankan produk, memberi
informasi dan pengumuman, menyediakan akses, menawarkan jasa, membuat
diskusi, mendidik masyarakat.
• Berdasarkan jumlah halaman atau informasi yang tersedia. Mis.:
• 1-10: biografi, ringkasan proyek.
• 5-50: makalah ilmiah, konferensi.
• 50-500: buku, laporan tahunan.
• Berdasarkan ukuran keberhasilan.
• Bagi individu: mencari pekerjaan, mencari teman.
• Bagi perusahaan: jumlah pengunjung per hari.
• Bagi penyedia akses: jumlah waktu pemakaian.
• Bagi lainnya: promosi.
Model Antarmuka Objek-Aksi untuk
Perancangan Situs Web
• Model OAI mendorong perancang situs web memfokuskan empat
komponen dalam dua bidang:
• Tugas
• Objek informasi terstruktur (hierarki, jaringan).
• Aksi informasi (pencarian, linking).
• Antarmuka
• Metafora untuk objek informasi (rak buku, ensiklopedia).
• Penanganan aksi (query, zoom).
• Strategi agregasi informasi
• Hal-hal yang mempengaruhi kepuasan subjektif awal pemakai
• Pengujian dan pemeliharaan situs web
Strategi Agregasi Informasi
• Daftar pendek tak terstruktur: fitur pedoman kota, divisi organisasi,
proyek terbaru.
• Struktur linear: kalender peristiwa.
• Larik atau tabel: jadual penerbangan.
• Hierarki, tree: benua-negara-kota.
• Multitree, faceted retrieval: foto diurutkan berdasarkan tanggal,
jurufoto, lokasi, topik.
• Jaringan: World Wide Web, kutipan jurnal.
Hal-hal yang Mempengaruhi Kepuasan
Subjektif Awal Pemakai
• Kepuasan subjektif awal pemakai sangat kuat ditentukan oleh
hal-hal berikut (Horton et al., 1996):
 Kekompakan dan faktor percabangan. Panjang halaman dan
jumlah link.
 Pengurutan, pengelompokan, dan penegasan.
 Dukungan akses universal.
 Desain grafis yang baik.
 Dukungan navigasi.
Pengujian dan Pemeliharaan Situs Web
• Disarankan uji usability.
• Uji pada lingkungan yang realistik.
• Uji in-house dini dengan jumlah pemakai terbatas.
• Uji medan yang intensif.
• Proses peluncuran bertahap.
• Log pemakaian berguna.
• Umpan balik pemakai.
• Ekspektasi pemakai dan kebijakan organisasi memandu tingkat
perubahan.
 ???
Sekian...