LOMBA KONTEN & TATA KELOLA (KOTAK) WEBSITE 2017 Kementerian Pekerjaan Umum dan Perumahan Rakyat RI www.pu.go.id Presented by Zeembry
Penjelasan Lomba Arsitektur Desain & Tata Kelola Situs Unit PUPR 2017
PENGANTAR
Pengantar • Lomba ini diadakan sebagai sarana pembelajaran untuk pengelola situs agar memahami seperti apa kriteria situs yang baik. • Lomba ini juga sebagai sarana sosialisasi kebijakan peraturan mengenai konten apa saja yang harus ada di situs unit.
Landasan Lomba • Undang Undang Keterbukaan Informasi Publik No. 14 Tahun 2008 • Permen PUPR No 17.PRT.M.2016 Penyelenggaran TIK • KEPMEN 450 - Informasi Wajib • KEPMEN 451 - Informasi Dikecualikan
Penilaian UU (10%) • Permen PUPR No 17.PRT.M.2016 Penyelenggaran TIK / Lampiran III. / Bab 6.4. – Penataan subdomain untuk Unit Organisasi dan Unit Kerja di bawahnya: 1) Unit Organisasi : eselonI.pu.go.id 2) Unit Kerja : eselonI.pu.go.id/eselonII
Kategori Penilaian Expert (90%) • • • • •
ARSITEKTUR WEB DESAIN - 30% DESAIN ANTARMUKA - 15% TATA KELOLA - 40% KEAMANAN WEB - 10% SEARCH ENGINE OPTIMIZATION (SEO) - 5%
Kemudahan Pengunjung Mencari Informasi adalah Penting. Menentukan Prioritas sehingga Cepat & Mudah Ditemukan
ARSITEKTUR WEB DESAIN
Kriteria 1. Otomatis desain website menyesuaikan dengan perangkat yang digunakan (Mobile, Tablet, Desktop PC). 2. Fitur pencarian tidak hanya diperuntukkan untuk kategori tertentu saja, misalkan hanya berita saja. Tetapi harus bisa menampilkan dokumen lain seperti artikel, ebook, video,dll. 3. Tersedia fitur untuk media cetak (print) dan tombol share ke sosial media. 4. Menyediakan Peta Situs (Sitemap) yang bisa diakses dengan mudah oleh pengunjung. 5. Menyediakan F.A.Q yang bisa diakses dengan mudah oleh pengunjung. 6. Tampilan halaman depan website di berbagai browser sama baiknya (Internet Explorer, Firefox, Chrome, Safari, Opera) 7. Nama Unit (tidak di singkat) dapat ditemukan dengan cepat dan mudah. Bila nama unit terlalu panjang, boleh menggunakan singkatan tetapi tetap ada terlihat kepanjangannya di bawah singkatan. 8. Performa website minimal Grade C yang diuji dengan tools.pingdom.com dari Melbourne, Australia.
ARSITEKTUR INFORMASI
Otomatis desain website menyesuaikan dengan perangkat yang digunakan (Mobile, Tablet, Desktop PC).
Terlihat mana yang benar mana yang salah. Biasanya desain Mobile hanya 1 kolom saja.
01 SCORE
?
ARSITEKTUR INFORMASI
Fitur pencarian tidak hanya diperuntukkan untuk kategori tertentu saja, misalkan hanya berita saja. Tetapi harus bisa menampilkan dokumen lain seperti artikel, ebook, video,dll.
Konten Download, Ebook bila tersedia di website, harus bisa ditemukan melalui fitur pencarian. Kalau tidak ada berarti fitur pencarian tidak menjangkau semua konten di website.
02 SCORE
?
ARSITEKTUR INFORMASI
Sudah jelas!
Tersedia fitur untuk (print) danuntuk tombol share ke sosial media. Fitur pencarian tidakmedia hanyacetak diperuntukkan kategori tertentu saja, misalkan hanya berita saja.
02 03 SCORE
?
ARSITEKTUR INFORMASI
Menyediakan peta situs/sitemap yang bisa diakses di halaman depan
Ini seperti halaman daftar isi sebuah buku. Dengan melihat ini, maka kita bisa mengetahui isi seluruh website.
04 SCORE
?
ARSITEKTUR INFORMASI
Menyediakan F.A.Q yang bisa diakses dengan mudah oleh pengunjung.
Dengan fitur ini, pengunjung bisa melihat pertanyaan mana yang paling sering diajukan atau yang penting untuk mereka tahu.
05 SCORE
?
ARSITEKTUR INFORMASI
Tampilan halaman depan website di berbagai browser yang sama baiknya
Sudah jelas, silahkan dicoba di 6 jenis browser tersebut.
06 SCORE
? http://www.w3schools.com/browsers/browsers_stats.asp
ARSITEKTUR INFORMASI
Nama Unit (tidak di singkat) dapat ditemukan dengan cepat dan mudah. Bila nama unit terlalu panjang, boleh menggunakan singkatan tetapi tetap ada terlihat kepanjangannya di bawah singkatan.
07 SCORE
Sudah Jelas
?
Sebaiknya ada kepanjangannya Di bawah (kecil dan terbaca)
ARSITEKTUR INFORMASI
Performa website minimal Grade C yang diuji dengan tools.pingdom.com dari Melbourne, Australia.
08 SCORE
? Hati-Hati Jangan Salah Pilih Lokasi karena akan memperlambat Performa Website.
Kenyamanan Pengunjung Website adalah Penting
DESAIN INTERFACE
Kriteria 1. Tidak menggunakan HURUF BESAR pada seluruh judul atau deskripsi. 2. Jarak antara konten (tulisan, gambar) harus memiliki jarak yang cukup dan tidak terkesan saling berdempetan atau terlalu longgar. 3. Tulisan harus jelas dan kontras dengan latar belakang sehingga mudah dibaca. 4. Desain dan Navigasi harus konsisten di setiap halaman websit. 5. Gambar atau foto harus jelas (tidak blur) dan proporsional, tidak ditarik (gepeng) ke samping atau ke atas.
DESAIN INTERFACE
Tidak menggunakan HURUF BESAR pada seluruh judul atau deskripsi.
Terlalu banyak huruf besar lebih susah dibaca.
01 SCORE
?
DESAIN INTERFACE
Jarak antara konten harus memiliki jarak yang cukup dan tidak terkesan saling berdempetan sehingga sulit untuk dibaca oleh pengunjung.
Jaga jarak antar konten sehingga mata nyaman membacanya. Silahkan melihat perbandingan di bawah ini.
02 SCORE
?
Font lebih dari dua jenis sehingga terlihat berantakan.
DESAIN INTERFACE
Tulisan harus jelas dan kontras dengan latar belakang sehingga mudah dibaca.
Sudah jelas, jangan menggunakan latar belakang yang membuat tulisan tidak terbaca.
03 SCORE
?
DESAIN INTERFACE
04
Desain dan Navigasi harus konsisten di setiap halaman website.
Setiap halaman harus konsisten desainnnya, jangan setiap kita klik menu mempunyai halaman yang berbeda-beda. Halaman Profile > Struktur Organisasi
Header
Judul
Cari & Aplikasi
Halaman Artikel > Makalah Kimia
Header
Judul
Cari & Aplikasi
SCORE
?
DESAIN INTERFACE
Gambar atau foto harus jelas (tidak blur) dan proporsional, tidak ditarik (gepeng) ke samping atau ke atas.
05 SCORE
Gambar yang tidak proporsional akan membuat desain website keseluruhan menjadi tidak nyaman dilihat.
?
BLUR
Pelayanan Pengunjung adalah Utama
TATA KELOLA
Kriteria Tata Kelola 1. 2.
Ada form kontak yang bisa digunakan untuk menghubungi. Ada autoresponse yang tampil di website berupa ucapan terimakasih ketika pengunjung mengirim email melalui form kontak. 3. Terdapat keterangan pada gambar yang berisi informasi berita. 4. Terdapat keterangan tanggal pada semua berita, artikel dan dokumen yang dipublikasi. 5. Ada Pembaharuan Berita dan Kegiatan disertai tanggal pembaharuannya minimal 1 (satu) minggu sekali. 6. Terdapat Infografis mengenai kinerja sesuai Tusi Unit. Infografis harus menarik dan mudah dipahami oleh pengunjung . 7. Konten unduh (download) seperti pdf, zip harus disertai judul, deskripsi/abstrak yang jelas dan mudah dipahami pengunjung sebelum mereka mengunduh. 8. Tidak ada Broken Link (www.brokenlinkcheck.com) 9. Tersedia Konten Profil meliputi Sejarah, Tugas & Fungsi, Struktur Organisasi (bagan), Info Pejabat, Lokasi Kantor yang diletakkan di menu Profil. 10. Terdapat Konten Produk meliputi Renstra, Rencana program, Pengelolaan anggaran (DIPA, RKAKL, ringkasan laporan keuangan, lakip, dll), Peraturan perundang-undangan, Info kepegawaian (SDM), SNI/Pedoman yang dapat ditemukan dengan mudah di bagian menu/sub menu Produk atau kategori tautan-tautan di footer atau tautan-tautan berupa tulisan/banner di halaman beranda. 11. Terdapat Konten Produk (Khusus UNOR) meliputi Data statistik, Pemetaan/GIS, Kamus/istilah (Glossary) yang dapat ditemukan dengan mudah di bagian menu/sub menu Produk atau kategori tautan-tautan di footer atau tautan-tautan berupa tulisan/banner di halaman beranda. 12. Tersedia Konten Informasi Publik meliputi Informasi Wajib disediakan dan diumumkan secara Berkala, Serta Merta, dan Setiap Saat yang mengacu kepada UU KIP no. 14 tahun 2008 yang dapat ditemukan dengan mudah di bagian menu/sub menu Produk atau kategori tautan-tautan di footer atau tautan-tautan berupa tulisan/banner di halaman beranda.
TATA KELOLA
Sudah Jelas
Ada form kontak yang bisa digunakan untuk menghubungi.
1 SCORE
?
TATA KELOLA
Ada autoresponse yang tampil di website berupa ucapan terimakasih ketika pengunjung mengirim email melalui form kontak.
02 SCORE
Sudah Jelas
? Ada Autorespon di Website
Ada Autorespon di Email
TATA KELOLA
Sudah Jelas
Terdapat keterangan pada gambar yang berisi informasi berita.
03 SCORE
?
TATA KELOLA
Sudah Jelas
Terdapat keterangan tanggal pada semua berita, artikel dan dokumen yang dipublikasi.
04 SCORE
?
TATA KELOLA
Ada Pembaharuan Berita dan Kegiatan disertai tanggal pembaharuannya minimal 1 (satu) minggu sekali.
1 MINGGU SEKALI ada Berita Baru.
05 SCORE
?
TATA KELOLA
Sudah Jelas
Terdapat Infografis mengenai kinerja sesuai Tusi Unit. Infografis harus menarik dan mudah dipahami oleh pengunjung .
06 SCORE
?
TATA KELOLA
Sudah Jelas
Konten unduh (download) seperti pdf, zip disertai judul, deskripsi/abstrak yang jelas dan mudah dipahami.
07 SCORE
?
TATA KELOLA
Sudah Jelas
Tidak ada Broken Link (www.brokenlinkcheck.com)
08 SCORE
?
TATA KELOLA
Tersedia Konten Profil meliputi Sejarah, Tugas & Fungsi, Struktur Organisasi (bagan), Info Pejabat, Lokasi Kantor yang diletakkan di menu Profil.
Penamaan disamakan sesuai yang tertulis di peraturan untuk memudahkan pencarian.
09 SCORE
?
TATA KELOLA
Terdapat Konten Produk meliputi Renstra, Rencana program, Pengelolaan anggaran (DIPA, RKAKL, ringkasan laporan keuangan, lakip, dll), Peraturan perundang-undangan, Info kepegawaian (SDM), SNI/Pedoman yang dapat ditemukan dengan mudah di bagian menu/sub menu Produk atau kategori tautan-tautan di footer atau tautan-tautan berupa tulisan/banner di halaman beranda. Penamaan disamakan sesuai yang tertulis di peraturan untuk memudahkan pencarian. Header
MENU KONTEN WEBSITE
KONTEN WEBSITE
TAUTAN TEKS
BANNER
TAUTAN TEKS
Link di Footer
BANNER
10 SCORE
?
TATA KELOLA
Terdapat Konten Produk (Khusus UNOR) meliputi Data statistik, Pemetaan/GIS, Kamus/istilah (Glossary) yang dapat ditemukan dengan mudah di bagian menu/sub menu Produk atau kategori tautan-tautan di footer atau tautan-tautan berupa tulisan/banner di halaman beranda. Penamaan disamakan sesuai yang tertulis di peraturan untuk memudahkan pencarian.
Header
MENU KONTEN WEBSITE
KONTEN WEBSITE
TAUTAN TEKS
BANNER
TAUTAN TEKS
Link di Footer
BANNER
11 SCORE
?
TATA KELOLA
Tersedia Konten Informasi Publik meliputi Informasi Wajib disediakan dan diumumkan secara Berkala, Serta Merta, dan Setiap Saat yang mengacu kepada UU KIP no. 14 tahun 2008 yang dapat ditemukan dengan mudah di bagian menu/sub menu Produk atau kategori tautan-tautan di footer atau tautantautan berupa tulisan/banner di halaman beranda. Penamaan disamakan sesuai yang tertulis di peraturan untuk memudahkan pencarian. Header
MENU KONTEN WEBSITE
KONTEN WEBSITE
TAUTAN TEKS
BANNER
TAUTAN TEKS
Link di Footer
BANNER
12 SCORE
?
Keamanan Dasar sebuah Website
KEAMANAN WEB
Kriteria 1. Halaman broken link dimodifikasi (cek dengan mengetik http://kemkes.go.id/error) agar menampilkan pemberitahuan kepada pengunjung kesalahan mereka sekaligus disediakan tautan terkait yang akan membantu pengunjung seperti F.A.Q atau Sitemap atau Informasi lainnya yang sering dicari. 2. Tidak meletakkan tautan-tautan internal ke halaman publik seperti webmail, e-office, login internal, intranet, dll.
KEAMANAN WEB
Halaman broken link dimodifikasi (cek dengan mengetik http://kemkes.go.id/error) agar menampilkan pemberitahuan kepada pengunjung kesalahan mereka sekaligus disediakan tautan terkait yang akan membantu pengunjung seperti F.A.Q atau Sitemap atau Informasi lainnya yang sering dicari.
01 SCORE
?
KEAMANAN WEB
Tidak meletakkan tautan-tautan internal ke halaman publik seperti webmail dan login ke data pegawai.
02 SCORE
?
KEAMANAN WEB
URL Admin CMS (Content Management System) tidak mudah ditebak seperti menggunakan folder admin, administrator, wp-admin, cms.
03 SCORE
?
• Wordpress install Plugin “Protect Wp Admin”. • Joomla install Extention “Admin Exile”. • Custom Coding harus tidak menggunakan /Admin , /Administrator , /CMS.
Optimasi Artikel, Nama Layanan, Berita untuk Mesin Pencari
OPTIMISASI MESIN PENCARI
Kriteria 1. Terdapat judul artikel, publikasi dan layanan dengan kata kunci (keywod) populer sesuai dengan Tusi (Tugas dan Fungsi). 2. Struktur URL halaman website harus SEO Friendly
SEO
Terdapat judul artikel, publikasi dan layanan dengan kata kunci (keywod) populer sesuai dengan Tupoksi Unit Kerja.
01 SCORE
? • •
Nama Unit (Tidak Disingkat) Nama Unit (Disingkat)
SEO
Struktur URL halaman website harus SEO Friendly
02 SCORE
?
Timeline Lomba • Sosialisasi/Pelatihan : 28 Agustus 2017 • Deadline Questioner: 31 Agustus 2017 ke
[email protected] • Perbaikan 21 Hari: 30 Agustus - 20 September 2017 • Penilaian 40 Hari : 21 September - 30 Oktober 2017 • Pengumuman : 3 Desember 2017
[email protected]
