Diagram Struktur Situs (Site Structure Diagram)

4 HASIL DAN PEMBAHASAN

4.2 Formulasi Query 1 Karakteristik Mesin Pencar

4.4.3 Diagram Struktur Situs (Site Structure Diagram)

Diagram struktur situs adalah representasi arsitektur dari sebuah situs web berupa dokumen yang digunakan sebagai alat bantu untuk perancangan situs. Diagram struktur situs memiliki beberapa fungsi. Bagi klien, dokumen ini membantu untuk memberikan gambaran tentang skala situs dan untuk pengaturan sumber daya internal. Sementara bagi pengembang, dokumen tersebut adalah alat penting untuk memahami ruang lingkup situs web dan struktur keseluruhan. Diagram struktur situs menunjukkan struktur dan pengorganisasian konten atau informasi dalam suatu situs (helloUX 2013).

Informasi yang akan dimunculkan dalam situs layanan informasi Perpustakaan BPPT dapat dibagi menjadi empat kelompok, yaitu:

a. koleksi local content BPPT; b. kontak Perpustakaan BPPT; c. kliping; dan

d. link menuju website utama BPPT.

Diagram struktur situs layanan informasi Perpustakaan BPPT ditunjukkan dalam Gambar 7.

29 4.4.4 Navigasi dan Menu

Navigasi pada sebuah situs web membantu pengguna untuk berpindah dari satu halaman web ke halaman yang lain tanpa kehilangan orientasi. Morville dan Rosenfeld (2006) membedakan sistem navigasi dalam sebuah situs web menjadi tiga jenis, yaitu: sistem navigasi tertanam (embedded navigation system), sistem navigasi pelengkap (supplemental navigation system), dan pendekatan navigasi canggih (advanced navigation approach). Sistem navigasi yang dirancang untuk situs layanan informasi Perpustakaan BPPT adalah embedded navigation system dan supplemental navigation system.

Sistem navigasi tertanam (embedded navigation system) yang dirancang untuk situs layanan informasi Perpustakaan BPPT dapat diuraikan menjadi:

a. Navigasi global (Global navigation)

Navigasi global selalu muncul pada setiap halaman. Umumnya navigasi global diimplementasikan dalam bentuk panel navigasi dan ditempatkan di bagian atas halaman web (Gambar 8).

Gambar 8 Navigasi global

Navigasi global pada situs layanan informasi Perpustakaan BPPT membawa pengguna pada halaman-halaman berikut:

i. Beranda

Beranda adalah halaman utama situs layanan informasi BPPT. Pada halaman ini ditampilkan daftar koleksi muatan lokal BPPT. Tampilan halaman beranda dapat dilihat pada Gambar 9.

30

ii. Kliping

Halaman ini memuat kliping berita terbaru mengenai BPPT yang didapat dari mashup hasil pencarian berita Google, Yahoo dan Bing menggunakan Yahoo! Pipes. Tampilan halaman kliping ditunjukkan dalam Gambar 10.

Gambar 10 Kliping iii. Kontak

Halaman ini memuat alamat kontak Perpustakaan BPPT. Tampilan halaman kontak terlihat dalam Gambar 11.

31 iv. BPPT

Menu ini adalah link menuju situs web utama BPPT (http://www.bppt.go.id)

b. Navigasi lokal (Local navigation)

Pada banyak situs web, navigasi global dilengkapi dengan sistem navigasi lokal yang akan membantu pengguna mengeksplorasi area situs yang lebih luas dan dalam. Navigasi lokal pada situs layanan informasi BPPT merupakan pengelompokan menu berdasarkan task yang dilakukan oleh pengguna, yaitu:

i. Pencarian

Kelompok menu pencarian terdiri dari pencarian sederhana dan pencarian canggih. Tampilan menu pencarian ditunjukkan dalam Gambar 12.

Gambar 12 Menu pencarian ii. Penelusuran

Kelompok menu penelusuran menuntun pengguna untuk melakukan penelusuran koleksi local content Perpustakaan BPPT berdasarkan subyek, jenis dokumen, pengarang serta tahun terbit. Tampilan menu penelusuran dapat dilihat pada Gambar 13.

Gambar 13 Menu Penelusuran iii. Permohonan Informasi

Kelompok menu permohonan informasi terdiri dari prosedur dan formulir permohonan informasi. Tampilan menu permohonan informasi terlihat pada Gambar 14.

32

c. Navigasi kontekstual (Context navigation)

Beberapa relasi antar halaman web tidak sesuai jika dimasukkan ke dalam struktur navigasi global atau lokal sehingga diperlukan adanya navigasi kontekstual berupa link dari bagian konten sebuah halaman web menuju ke halaman web, dokumen atau obyek lainnya. Contoh navigasi kontekstual dapat dilihat dalam Gambar 15.

Gambar 15 Navigasi kontekstual

Selain sistem navigasi tertanam (embedded navigation system), jenis sistem navigasi yang juga dirancang untuk situs layanan informasi Perpustakaan BPPT adalah sistem navigasi pelengkap (supplemental navigation system), yaitu sistem pencarian (search). Sistem pencarian memungkinkan pengguna memilih sendiri kata kunci dalam pencarian informasi. Sistem pencarian yang dirancang untuk situs layanan informasi Perpustakaan BPPT terdiri dari:

a. Pencarian sederhana

Tampilan antarmuka pengguna untuk pencarian sederhana dapat dilihat pada Gambar 16.

Gambar 16 Pencarian sederhana b. Pencarian canggih

Tampilan antarmuka pengguna untuk pencarian canggih dapat dilihat pada Gambar 17.

33

Gambar 17 Pencarian canggih c. Pencarian khusus pada subyek tertentu

Tampilan pencarian khusus pada subyek tertentu dapat dilihat pada Gambar 18.

Gambar 18 Pencarian khusus dalam subyek tertentu d. Pencarian khusus pada jenis dokumen tertentu

Tampilan pencarian khusus pada jenis dokumen tertentu dapat dilihat pada Gambar 19.

34

4.4.5 Layout

Layout situs layanan informasi Perpustakaan BPPT terdiri dari lima komponen, yaitu header, navigation, content, sidebar dan footer. Tata letak komponen-komponen tersebut dapat dilihat pada Gambar 20.

Gambar 20 Layout situs

Detail dari kelima komponen tersebut diuraikan sebagai berikut:

a. Header

Header merupakan komponen yang terletak di bagian paling atas dan umumnya mengandung informasi tentang identitas situs seperti nama, logo, tagline, dll. Tampilan header dapat dilihat pada Gambar 21.

35

b. Navigation

Komponen navigation berada pada posisi di bawah header, merupakan tempat untuk meletakkan navigasi global situs. Gambar 22 menunjukkan tampilan komponen navigation.

Gambar 22 Navigation

c. Content

Sesuai dengan namanya, bagian ini adalah wadah untuk menempatkan informasi berupa konten utama dari halaman situs web. Contoh tampilan untuk komponen ini dapat dilihat pada Gambar 23.

Gambar 23 Content

d. Sidebar

Sidebar umumnya digunakan sebagai tempat meletakkan sub konten atau sub navigasi. Posisinya dapat berada di sebelah kiri atau kanan konten utama. Pada situs layanan informasi Perpustakaan BPPT komponen sidebar diletakkan di sisi sebelah kanan konten. Tampilan sidebar terlihat dalam Gambar 24.

36

Gambar 24 Sidebar

e. Footer

Footer terletak pada bagian paling bawah dan berfungsi sebagai penanda bahwa pengguna sudah sampai pada akhir halaman situs. Pada umumnya bagian footer mengandung informasi kontak dan hak cipta. Gambar 25 menunjukkan tampilan footer.

Gambar 25 Footer 4.4.6 Pengaturan Lebar Layout

Tidak ada standar khusus untuk menentukan lebar sebuah situs web. Dalam desain web perlu diperhatikan bahwa resolusi layar tidak identik dengan resolusi peramban. Elemen peramban seperti taskbar, toolbar dan ekstensi dapat mengurangi ruang konten dalam peramban.Ukuran ruang konten dalam peramban penting diketahui untuk menentukan lebar sebuah situs web.

Teknik pengaturan lebar layout halaman sebuah situs web secara umum dapat dibedakan menjadi dua jenis, yaitu fixed atau fluid. Perbandingan antara kedua jenis pengaturan lebar layout tersebut dapat dilihat dalam Tabel 14. Desain situs layanan informasi Perpustakaan BPPT dalam penelitian ini menggunakan gabungan antara fixed dan fluid. Lebar layout untuk desktop ditetapkan sebesar 960 pixel. Lebar 960 umum digunakan oleh perancang situs web karena banyaknya faktor pembagi yang dimiliki angka 960 memungkinkan perancang

37 untuk memiliki banyak pilihan layout dan jumlah kolom. Lebar 960 dapat dengan mudah dibagi menjadi 2,3,4,5,6,8 kolom dst.

Tabel 14 Perbandingan antara pengaturan lebar layoutfixed dan fluid

Fixed Fluid

Karakteristik  Lebar tetap

 memakai satuan pixel  Diatur pada posisi tetap dan

tidak bergerak

 Tidak terpengaruh oleh pengaturan layar atau peramban pengguna

 Lebarnya menyesuaikan dengan resolusi layar pengguna atau lebar browser  lebar komponen layout web

dinyatakan dengan prosentase (%)

Kelebihan  Lebih mudah untuk dibuat dan memberikan jaminan bahwa apa yang dilihat perancang sama dengan apa yang dilihat oleh pengguna  Perancang memiliki kontrol

yang lebih besar terhadap penempatan elemen-elemen desain, konten dan navigasi  Mengurangi kerumitan

layout konten yang mempunyai lebar tetap seperti gambar, video, formulir

 lebih user friendly karena menyesuaikan dengan pengaturan layar browser pengguna

 jika dirancang dengan baik dapat menghilangkan horizontal scroll bar untuk tampilan di layar kecil.

Kekurangan  Dapat menimbulkan adanya “white space” yang

berlebihan pada layar dengan resolusi tinggi sehingga mengganggu keseimbangan desain secara keseluruhan.

 Resolusi layar yang lebih kecil akan menyebabkan keharusan pemakaian horizontal scroll bar.

 perancang memiliki lebih sedikit kontrol terhadap tampilan yang dilihat oleh pengguna. Ada kemungkinan perancang tidak melihat masalah yang timbul karena hasil desain web pada resolusi layar tertentu terlihat baik- baik saja.

 kurangnya konten dapat menciptakan white space yang berlebihan dan mengurangi estetika pada layar dengan resolusi yang sangat besar.  Konten seperti gambar, video,

dan jenis konten yang memerlukan lebar tertentu harus diatur dengan beberapa ukuran untuk mengakomodasi resolusi layar yang berbeda

38