Introduction to WebSession 01

Subject : L0182 / Web & Animation Design

Year : 2009

Bina Nusantara

Learning Outcomes

Di akhir sesi, mahasiswa akan mampu :• Memahami dasar dari perancangan web yang baik

Bina Nusantara

Course Outlines

• Hypertext dan Hypermedia• User Interface• Disain Interaksi yang baik• World Wide Web• Home Page• Website• Top Ten Mistakes in Web Design• Keuntungan Menggunakan Web

Bina Nusantara

Pengantar

• Hypertext pertama kali diperkenalkan oleh Vannevar Bush, pada Juli 1945, dalam tulisannya yang berjudul “As We May Think”.

• Bush mengatakan bahwa:– Akan ada banyak informasi dihasilkan– Kebutuhan membangun alat yang memungkinkan kemudahan

referensi silang di dalam atau antar dokumen– Alat untuk mengeksplorasi informasi yang diusulkan dinamakan

dengan Memex.

Bina Nusantara

Hypertext dan Hypermedia

• Hypertext adalah:– Sekumpulan potongan teks yang dihubungkan dengan links

yang memungkinkan pembaca mengakses informasi dengan lebih bebas

• Hypermedia adalah:– Dihasilkan dari hypertext, merupakan pengayaan dari link

hypertext yang memungkinkan untuk menghubungkan obyek-obyek multimedia, termasuk suara, video, dan virtual reality

Bina Nusantara

Hypertext dan Hypermedia

• Hypertext memperkaya teks linier tradisional dengan :– Kemungkinan untuk melompat ke artikel yang terhubung– Mudah untuk backtracking (melacak ulang)– Index dan Daftar Isi yang dapat diklik– Pencarian String (kata-kata)– Bookmarks (favorites)– Alat navigasi lainnya

Bina Nusantara

Hypertext

• Langkah pertama membangun hypertext yang efektif adalah dengan memilih proyek yang melingkupi The Golden Rules of Hypertext :– Ada body of information (bagian isi informasi) yang besar dan

diorganisasikan ke banyak bagian– Tiap bagian saling berhubungan dengan bagian lainnya– User hanya membutuhkan sebagian kecil informasi pada saat

tertentu

Bina Nusantara

User Interface• User Interface adalah penghubung antara manusia dan sistem yang

memungkinan manusia untuk berinteraksi dengan sistem tersebut• User interface menyediakan alat untuk :

– Input, memungkinkan user mengirim informasi ke sistem– Output, memungkinkan sistem menampilkan informasi ke user

sesuai Input yang diberikan user• Saat ini, tipe user interface yang paling umum adalah

– Graphical User Interface (GUI) menerima input melalui alat seperti keyboard dan mouse dan menyediakan tampilan grafis pada monitor

– Web User Interface (WUI) menerima input dan menyediakan tampilan dengan membuat halaman web yang ditransmisikan melalui internet oleh user dengan menggunakan web browser

Bina Nusantara

Disain Interaksi Yang Baik

• Untuk mengembangkan kegunaan dari suatu aplikasi, sangat penting untuk memiliki interface yang dirancang dengan baik

• "Eight Golden Rules of Interface Design" dari Ben Shneiderman :– Strive for consistency (Konsistensi)– Enable frequent users to use shortcuts (Menyediakan shortcuts)– Offer informative feedback (Memberikan feedback yang informatif)– Design dialog to yield closure (Adanya dialog yang mencerminkan

penutupan)– Offer simple error handling (Adanya penanganan kesalahan)– Permit easy reversal of actions (Memungkinkan pembalikan aksi)– Support internal locus of control (User dapat mengatur aplikasi)– Reduce short-term memory load (Tidak membebani memori user)

Bina Nusantara

Disain Interaksi Yang Baik

• Menurut Patrick Lynch, 1995– Menyeimbangkan struktur dan hubungan antara menu atau

home page dengan isi page atau antara grafik dan dokumen yang terhubung

– Tujuannya adalah untuk membangun hirarki menu atau halaman yang natural dan terstruktur dengan baik untuk user dan tidak mengalihkan fungsi dari situs web

Bina Nusantara

World Wide Web

• World Wide Web (biasanya disingkat dengan Web) adalah sistem atau dokumen hypertext yang saling terhubung dan diakses melalui internet

• Dengan Web browser, user melihat halaman-halaman web yang bisa berisi teks, image, video, dan multimedia lainnya dan bernavigasi diantaranya melalui hyperlinks

Bina Nusantara

Home Page

• Home Page adalah halaman utama dari suatu situs Web• Biasanya, home page menampilkan index atau daftar isi

dari dokumen-dokumen yang disimpan di situs tersebut

Bina Nusantara

Website (Situs Web)

• Website (Situs Web) adalah suatu situs (lokasi) di World Wide Web

• Setiap situs Web berisi home page, yang merupakan dokumen pertama yang dilihat user saat user mengakses situs

• Situs dapat juga berisi dokumen dan file tambahan• Setiap situs dimiliki dan diatur baik oleh individual,

perusahaan atau organisasi

Bina Nusantara

Top Ten Mistakes in Web Design• Top Ten Mistakes in Web Design oleh Jakob Nielsen (2005) :

– Legibility Problems (masalah penggunaan font)– Non-Standard Links (links yang tidak standar)– Flash (penggunaan flash)– Content that is not Written for the Web (Isi yang tidak sesuai untuk

Web)– Bad Search (Fasilitas pencarian yang buruk)– Browser Incompatibility (Browser tidak kompatibel)– Cumbersome Forms (Form yang berantakan)– No Contact Information or Other Company Info (Tidak ada

informasi tentang pemilik)– Frozen Layouts with Fixed Page Widths (Lebar halaman yang

tidak flexible)– Inadequate Photo Enlargement (Pembesaran foto yang tidak baik)

Bina Nusantara

Keuntungan Menggunakan Web

• Global audience (Pembaca global)• Operates 24 hours, 7 days a week (Dioperasikan sepanjang waktu)• Relatively inexpensive (Relative murah)• Product advertising (Pengiklanan)• Distribute product catalogs (Distribusi katalog)• Online surveys (Survei online)• Announcements (Pengumuman)• Online discussion forums (Forum diskusi online)• Obtain customer feedback (Mendapat feedback)• Immediate distribution of information (Distribusi informasi cepat)• Multimedia• Formatting capabilities (Kemampuan Format)

Bina Nusantara

Bina Nusantara

Bina Nusantara