Introduction to Web Session 01

1. Subject : L0182 / Web & Animation Design Year : 2009 Introduction to WebSession 01

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

3. 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

4. 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.

5. 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

6. 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

7. 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

8. User Interface • UserInterface 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

9. 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)

10. 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

11. 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

12. 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

13. 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

14. 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)

15. 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)