KELOMPOK 9

PEDOMAN PENGUJIAN
INTERFACE APLIKASI BERBASIS WEB

Muhammad Ishak Nurdhiansyah 0810960056 Heikal Mahendra Rukmana 0810963046 Rully Ayu Dwi 0810963070 Amirul Mukminin 0810963030 Nandra Adhi Yusuf 0810963056 Jack Abdoula Arifeen 0810964002

2011

UNIVERSITAS BRAWIJAYA

DAFTAR ISI
Daftar Isi............................................................................................................................2 Mukadimah........................................................................................................................4 Latar Belakang...................................................................................................................4 Tujuan................................................................................................................................4 Part I: NAVIGASI.............................................................................................................4 1. MENENTUKAN KONSEP...................................................................................5 2. LETAK NAVIGASI...............................................................................................5 3. KONSISTEN..........................................................................................................5 4. SITEMAP DAN LINK PADA SETIAP HALAMAN............................................5 5. CUSTOMER SUPPORT........................................................................................5 Part II: IINTERFACE........................................................................................................6 1. MEMBUAT KEPUTUSAN DESAIN....................................................................6 2. KEMUDAHAN PENGGUNAAN.........................................................................6 3. TAMPILAN YANG ATRAKTIF..........................................................................7 4. ADAPTABILITAS................................................................................................8 5. FORGIVENESS.....................................................................................................8 5.1 PESAN KESALAHAN....................................................................................8 Part III: LAYOUT..............................................................................................................9 1. MENU...................................................................................................................9 1.1 PERILAKU MENU.....................................................................................................9 1.2 PEMBERIAN JUDUL MENU..................................................................................10 1.3 PENGGUNAAN SIMBOL DALAM MENU............................................................10 1.4 PENGELOMPOKAN ITEM DALAM MENU..........................................................10 1.5 HIERARCHICAL MENU (SUBMENU)...................................................................10 2. TEKS..................................................................................................................11 2.1 MENYISIPKAN SPASI ANTARA KALIMAT........................................................11 2.2 KAPITALISASI LABEL ELEMEN INTERFACE DAN TEKS...............................11 3. ICON...................................................................................................................11 3.1 GENRE DAN KELUARGA ICON...........................................................................11 3.2 ICON TOOLBAR......................................................................................................12 3.3 POINTER...................................................................................................................12 4. BUTTON............................................................................................................12 4.1 PUSH BUTTON........................................................................................................12 2

4.2 PELABELAN PUSH BUTTON................................................................................12 4.3 BUTTON ICON.........................................................................................................12 4.4 PENGGUNAAN BUTTON ICON............................................................................13 4.5 ISI BUTTON ICON DAN PELABELAN.................................................................13 5. WARNA.............................................................................................................13 Part IV : PERFORMANCE.............................................................................................13 1. KINERJA............................................................................................................13 2. KEAMANAN.....................................................................................................14 2.1 OTENTIKASI............................................................................................................14 2.2 KENDALI APLIKASI...............................................................................................14 2.3 KETERSEDIAAN DAN KERAHASIAAN DATA..................................................14 3. INTEROPERABILITAS.....................................................................................14 4. CHANGE RESOLUTION..................................................................................14 5. PENGOLAHAN DATA.....................................................................................14 6. ADVERTISING..................................................................................................15 Part V: CONTENT..........................................................................................................15 1. TATA LETAK....................................................................................................15 1.1 KOLOM PENCARIAN.............................................................................................15 1.2 KOLOM OTENTIKASI............................................................................................15 2. LINK...................................................................................................................15 2.1 PERUBAHAN WARNA PADA LINK.....................................................................15 2.2 LINK YANG TIDAK BERJALAN...........................................................................15 2.3 TERLALU BANYAK LINK.....................................................................................16 TABEL PENGUJIAN...............................................................................................16

Mukadimah
3

1. LATAR BELAKANG Desain antarmuka (interface), khususnya pada aplikasi basis web, merupakan hal krusial yang perlu menjadi salah satu perhatian utama bagi para pengembang aplikasi web dan desainer web. Antarmuka merupakan hal penting yang menentukan eksistensi suatu aplikasi. Seiring dengan perkembangan dunia teknologi yang semakin pesat, terlebih dalam industri software yang semakin giat menawarkan pilihan software, tentu saja diperlukan pengetahuan khusus untuk memilih software mana yang layak untuk digunakan, selain dari segi manfaat perlu adanya pertimbangan dari segi yang lain, khususnya dalam segi penampilan alias desain antar muka yang telah disebutkan di awal paragraf. Dengan mengetahui kenyataan tersebut, maka pengguna jelas membutuhkan sebuah dasar yang terangkum dalam sebuah pedoman pengujian interface aplikasi berbasis web. 2. TUJUAN Sebagai sebuah pedoman untuk menguji kelayakan desain interface dalam aplikasi berbasis web.

Part I Navigasi
Navigasi adalah petunjuk posisi dan arah perjalanan. Di dalam dunia web, navigasi dianggap penting agar user yang sedang berada di dalam halaman tertentu tidak tersesat dan mudah menemukan halaman-halaman lain dalam website. Biasanya, pada sebuah website, navigasi tertampil pada menu dan link yang terstruktur. Seringkali, saat kita membuka sebuah website, kita merasa kesal karena tidak mendapatkan halaman website yang dicari dikarenakan navigasi yang tidak jelas. Beberapa hal yang perlu diperhatikan dalam pembuatan suatu navigasi yang baik : 1. MENENTUKAN KONSEP

Sebuah web yang akan di bangun harus memiliki konsep, yaitu garis besar navigasi dari sebuah website yang akan dibuat. Konsep tersebut memuat navigasi dasar yang sering kami
4

sebut bentuk "tree view" (bercabang dan beranting). Artinya konten bersifat general/umum atau konten bersifat hingga mendetail. 2. LETAK NAVIGASI Pada halaman utama, kita sebut index memuat menu-menu pokok yang bersifat umum. Ada baiknya buat shortcut-shortcut atau quicklinks sehingga pengunjung bisa langsung masuk ke halaman yang dimaksud. Menu-menu yang sering dijadikan shortcut misalnya, welcome note, products, news/article, gallery, livechat, links, contact. Shortcut-shortcut yang dibuat pun tergantung pada jenis website apakah company profile atau product cataloque, dll. Biasanya shortcut dibuat untuk menonjolkan suatu produk atau konten tertentu. Mengikuti "tree view" yang sudah di jelaskan di atas, maka percabangan dari menu-menu utama diletakkan pada halaman-halaman cabang dari index. 3. KONSISTEN Letak menu pada setiap halaman sebuah website sebisa mungkin tidak berubah sehingga pengunjung tidak kebingungan mencari-cari menu pada halaman yang berbeda. Misalnya pada halaman index, menu utama berada diatas, pada halaman cabang, dapat di tampilkan menu utama diatas pula setelah itu pada halaman-halaman cabang yang terdapat sub-menu bisa di tampilkan di sebelah kiri atau kanan halaman. Atau bisa menampilkan drop down/pull down menu, hal ini dilakukan pada setiap halaman dari index sampai pada halaman cabang dan ranting. 4. SITEMAP DAN LINK PADA SETIAP HALAMAN Pastikan pada setiap halaman website Anda memiliki link antar halaman, antar menu terutama link ke halaman index. Ini akan memudahkan dan mempersingkat pencarian halamanhalaman oleh pengunjung jika website Anda dibangun dalam struktur menu dan submenu yang kompleks. 5. CUSTOMER SUPPORT Tentunya Anda membangun sebuah website agar informasi atau produk Anda lebih dikenal orang, bahkan Anda berharap dapat menjaring si pengunjung untuk terus berkunjung ke website Anda dan membeli produk Anda. Maka ada baiknya di website tersebut, tinggalkan alamat, email dan no. kontak Anda agar mereka bisa menghubungi Anda secara langsung atau melalui surat elektronik, Anda juga bisa melakukan feedback terhadap mereka, karena

informasi tentang mereka telah Anda dapatkan saat mereka melakukan submit di halaman Contact Us.

Part II Interface
1. MEMBUAT KEPUTUSAN DESAIN Ketika membuat keputusan desain mengenai fitur dalam aplikasi Anda, penting untuk mempertimbangkan biaya, tidak semua yang keuangan, dengan manfaat potensial. Setiap kali Anda menambahkan fitur untuk aplikasi anda, hal-hal berikut dapat terjadi: Aplikasi Anda akan lebih besar. Aplikasi Anda akan lebih lambat. Aplikasi Anda antarmuka manusia itu menjadi lebih kompleks. Anda menghabiskan waktu untuk mengembangkan fitur baru daripada menyempurnakan fitur yang ada. Dokumentasi aplikasi Anda dan membantu menjadi lebih luas. Anda menjalankan risiko memperkenalkan perubahan yang buruk dapat mempengaruhi fitur yang ada. Anda meningkatkan waktu yang diperlukan untuk memvalidasi perilaku aplikasi Anda. Bagian berikut ini beberapa faktor tambahan mempertimbangkan sebelum menambahkan fitur untuk produk Anda. Hindari Fitur Cascade Terapkan Solusi 80 Persen 2. KEMUDAHAN PENGGUNAAN Berikut ini beberapa panduan yang perlu diingat saat merancang untuk kemudahan pengguna: Dalam desain antarmuka, gunakan kiasan-kiasan yang jelas dan mudah diterapkan atau dimengerti oleh pengguna.

 Fokus pada solusi, bukan hanya fitur. Hindari menambahkna fitur yang kurang bermanfaat bagi pengguna. Tetapkan pengaturan default untuk program Anda, hindari proses konfigurasi yang panjang. Akan tetapi tambahkan pilihan pengaturan / preferensi sesuai keinginan pengguna. Bundle aplikasi Anda, menyederhanakan proses instalasi dan memudahkan dalam distribusi. Plug and Play, memudahkan device / perangkat keras yang digunakan dalam aplikasi Anda tanpa harus melakukan penginstallan device driver. Berikan pesan kesalahan yang berguna bagi pengguna ketika terjadi sesuatu yang tidak wajar/bermasalah. Pesan kesalahan tersebut harus berisi informasi teantang apa yang terjadi, mengapa hal itu terjadi, dan menawarkan solusi jika tersedia dan melakukan pencegahan hilangnya data pengguna. Ijinkan pengguna menjelajahi fitur Anda tanpa harus takut melakukan kerusakan permanen pada data, gunakan fasilitas undo-redo untuk mengembalikan data. Berikan pengaturan tentang bahasa yang digunakan, menambahkan kenyamanan pengguna apabila program tersebut menggunakan bahasa asli pengguna. 3. TAMPILAN YANG ATRAKTIF Desain yang stylish dan penampilan yang menarik merupakan salah satu nilai lebih dari sebuah sistem perangkat lunak. Biasanya, aplikasi ini memiliki resolusi tinggi yang mencakup warna 32-bit serta dapat melakukan transparansi, tujuan terpentingnya adalah untuk menyampaikan informasi yan relevan kepada pengguna. Berikut ini adalah beebrapa panduan yang diingat ketika merancang tampilan perangkat lunak: Kemas desain antarmuka Anda dengan tampilan yang profesional, gunakan grafis Gunakan elemen-elemen antarmuka seperti control, menu dan dialog. Gunakan warna dengan resolusi 32-bit untuk memberikan kinerja yang terbaik. Buat teks dan gambar menggunakan API modern seperti Quartz, Kakao, ATSUI yang tinggi serta icon-icon yang menarik.

dan OpenGL. Hindari penggunaan penggambaran legacy API seperti QuickDraw.

7

4. ADAPTABILITAS Kesesuaian interface dengan kultur budaya atau kebiasaan pengguna. Berpengaruh dalam kemudahan pengguna dalam menyesuaikan diri dengan aplikasi sesuai dengan kultur yang berlaku di daerah pengguna.. 5. FORGIVENESS Orang perlu merasa bahwa mereka dapat mencoba hal-hal tanpa merusak sistem atau membahayakan data mereka. Gunakan perintah aman, seperti Undo dan Revert untuk perintah penyimpanan, sehingga orang akan merasa nyaman dalam belajar dan menggunakan produk Anda. Peringatkan pengguna ketika mereka akan memulai tugas yang akan menyebabkan hilangnya data permanen (tidak dapat dikembalikan lagi). Jika peringatan sering muncul, hal itu dimungkinkan karena produk tersebut memiliki beberapa kelemahan dalam desain. Ketika pilihan disajikan secara jelas dan umpan balik tepat waktu, menggunakan aplikasi harus relatif bebas kesalahan. Antisipasi terjadinya masalah umum dan peringatkan pengguna terhadap potensi efek samping. Memberikan umpan balik yang luas dan komunikasi di setiap tahap sehingga pengguna merasa bahwa mereka memiliki informasi yang cukup untuk membuat pilihan yang tepat.
1. 2. 3. 4. 4.1. PESAN KESALAHAN

Pesan kesalahan untuk pengguna sangat membantu jika ada data yang salah dimasukkan atau tidak lengkap. Ini memudahkan pengguna jika ingin mencoba semua fitur yang ada di aplikasi tanpa takut terjadi kesalahan pada data atau aplikasi ketika kita salah mengklik atau memasukkan data sehingga mereka bisa merasa aman untuk mencoba fitur yang ada tanpa membahayakan data atau aplikasi dan akan segera menyadari jika terjadi kesalahan.

Part III Layout

1. MENU Menu menampilkan daftar dari item-perintah, atribut, atau status dimana pengguna dapat memilihnya sendiri. Menu berdasarkan prinsip dari interface dan terdapat poin-poin. Pengguna tidak perlu mengingat perintah atau opsi yang disediakan karena mereka dapat melihat setiap saat. Kata yang terdapat pada menu harus mampu memberikan petunjuk yang jelas dan singkat. Nama menu mewakili isi konten. Gunakan istilah-istilah yang umum, singkat, dan mudah dipahami. Misal: Home, About Us, Services, Products, News, Articles, Contact Us. Selain itu Menu harus dibuat menonjol atau eye-catching agar mudah dikenali. Hal ini harus digabungkan dengan unsur estetika sehingga menu-menu tadi dapat sejalan dengan konsep web yang dibuat.
1.1. PERILAKU MENU

Ketika orang menggunakan menu, mereka biasanya membuat pilihan dalam data mereka dan kemudian memilih item menu. Perilaku ini mengikuti paradigma melihatdan-titik, mengidentifikasi apa yang harus dilakukan dan kemudian menetapkan tindakan dengan memilih item menu. Untuk memilih salah satu item dalam menu, posisi pointer pengguna pada judul menu dan menyeret ke item yang diinginkan. Setiap item disorot karena dipilih. Tidak ada tindakan yang terjadi sampai user melepaskan tombol mouse dengan pointer di atas sebuah item menu. Orang dapat memindahkan pointer dari menu, sebelum melepaskan tombol mouse tanpa melakukan tindakan apapun. Mereka bisa terbuka dan memindai menu untuk mengetahui fitur apa saja yang tersedia tanpa harus benar-benar melakukan tindakan. Sebagai aturan umum, hindari menciptakan menu yang panjang. menu yang panjang sulit bagi user untuk memindai dan mengerti. Jika Anda menemukan bahwa ada terlalu banyak item dalam menu tunggal, cobalah untuk mengelompokkannya, Anda mungkin menemukan bahwa beberapa item lebih cocok dalam menu lain. Penempatan menu yang disediakan untuk pengguna seharusnya berada diatas sebuah aplikasi web. Hal ini dilakukan agar pengguna mengetahui dengan mudah menu-menu

yang disediakan oleh developer. Karena penempatan yang berada diatas akan langsung terlihat oleh pengguna ketika mereka membuka aplikasi web.
1.2. PEMBERIAN JUDUL MENU

Judul menu dan submenu yang tepat harus mewakili item dalam menu. Hindari menggunakan ikon untuk judul menu. Buat judul menu sesingkat mungkin tanpa kehilangan maknanya.
1.3. PENGGUNAAN SIMBOL DALAM MENU

Ada beberapa simbol standart yang dapat kita gunakan untuk menunjukkan informasi tambahan dalam menu yang mewakili perintah pada aplikasi web. Toggled Menu Items Sebuah perubahan item menu toggle antara dua state setiap kali pengguna memilih. Ada tiga jenis item menu toggle: 1. 2. 3. Satu set dua menu state yang berlawanan Satu menu item changes untuk mencerminkan kondisi saat ini Sebuah item menu yang memiliki tanda cek di sebelahnya ketika berlaku

1.4. PENGELOMPOKAN ITEM DALAM MENU

Logika pengelompokan item menu adalah aspek yang paling penting untuk mengatur menu anda. Pengelompokan item dalam menu, membuatnya lebih mudah dan cepat untuk menemukan perintah dari tugas-tugas yang terkait. Secara umum, tempat item yang paling sering digunakan berada di bagian atas menu, tapi membuat grup item yang terkait lebih baik daripada mengatur mereka dengan frekuensi penggunaan. Sebagai contoh, Find Next atau Find Again perintah ini dapat jarang digunakan, dan harus tampil dibawah perintah Find. Dalam sebuah menu yang berisi tindakan dan atribut, jangan sekali-kali memasukkan action dan atribute di grup yang sama.
1.5. HIERARCHICAL MENU (SUBMENU)

Kamu dapat menggunakan hierarchical menu untuk menawarkan pilihan menu item tambahan tanpa menyita lebih banyak ruang di menu bar. Ketika poin pengguna ke item dengan indikator submenu, muncul submenu. Submenu memiliki semua ffitur menu, termasuk cara pintas keyboard, status markers(seperti checkmarks), dan seterusnya.

10

Karena submenu menambah kompleksitas antarmuka dan secara fisik lebih sulit untuk digunakan, Anda harus menggunakan hanya ketika anda memiliki menu lebih besar dari ukuran di menu bar atau untuk perintah yang berhubungan erat. Gunakan hanya satu tingkat submenu. Jika submenu berisi lebih dari lima item, pertimbangkan untuk memberikan menu sendiri. 2. TEKS Teks lazim digunakan pada seluruh interface sebagai nama pada tombol, label menu pop-up, pesan pada kotak dialog, dan bantuan yang muncul pada layar. Komponen yang paling penting dari desain interface adalah menggunakan teks secara konsisten. Pada Tim pengembang produk yang anda buat, anda harus memasukkan penulis ahli yang bertanggung jawab untuk mengkaji teks yang terlihat oleh pengguna pada layar serta dokumentasi instruksional.
1. 2. 2.1. MENYISIPKAN SPASI ANTARA KALIMAT

Jika terdapat bagian pada aplikasi user interface anda yang menampilkan dua atau lebih kalimat dalam paragraf, pastikan untuk menyisipkan satu spasi antara tanda baca akhir dengan kata pertama pada kalimat selanjutnya.
2.2. KAPITALISASI LABEL ELEMEN INTERFACE DAN TEKS

Semua label elemen interface harus dikapitalisasi baik gaya atau gaya kalimat judul. Judul gaya berarti Anda membesarkan setiap kata, kecuali: 1. 2. Artikel (a, an, the) Koordinasi konjungsi (and, or) dari frase kata kerja, seperti dalam " Starting Up the Computer. " 3. ICON
1. 2. 3. 3.1. GENRE DAN KELUARGA ICON

3. Preposisi dari empat atau kurang huruf, kecuali jika preposisi merupakan bagian

11

Genre Icon membantu mengkomunikasikan apa yang pengguna dapat lakukan dengan aplikasi sebelum mereka menjalankannya. Dengan mempunyai gambat icon yang sesuai dengan perintah yang akan dilakukan.

3.2. ICON TOOLBAR Ikon Toolbar merupakan perintah yang sering digunakan dalam aplikasi. Biasanya, ikon toolbar tidak begitu kaya akan detail dan photo-realism seperti ikon jenis lain, karena mereka dimaksudkan untuk menjadi kecil, efisien representasi objek spesifik aplikasi dan tugas. 3.3. POINTER Pointer standar dirancang untuk memberikan umpan balik kepada pengguna. Untuk mempertahankan pengalaman pengguna yang konsisten, penting bahwa Anda menggunakannya hanya untuk tujuan mereka. Setiap pointer memiliki hot spot bagian dari pointer yang harus diposisikan di atas objek layar sebelum klik mouse memiliki efek pada objek. Hot spot harus intuitif, seperti ujung sebuah penunjuk panah atau titik tengah crosshair. Layar objek memiliki zona-panas yang pointer hot spot itu harus berada dalam rangka untuk klik agar berpengaruh. 4. BUTTON Tombol merupakan suatu perintah yang harus terlaksana. Jika tombol memulai proses yang tak tentu, maka tombol harus nonaktif / redup sampai proses selesai, dan suatu umpan balik status harus disediakan.
1. 2. 3. 4.

4.1. PUSH BUTTON Sebuah tombol push melakukan tindakan sesaat, seperti menyimpan dokumen, menyelesaikan operasi dapat didefinisikan oleh sebuah dialog, atau sebuah pesan kesalahan. 4.2. PELABELAN PUSH BUTTON
12

Sebuah tombol push selalu berisi teks, tidak mengandung gambar. Jika Anda perlu menampilkan ikon atau lainnya gambar pada tombol, gunakan tombol bevel. Label pada tombol push harus menjadi frase verba atau kata kerja yang menggambarkan tindakan. Label tombol push harus memiliki kapitalisasi judul-gaya 4.3. BUTTON ICON Sebuah tombol ikon berperilaku seperti tombol bevel, tetapi tidak memiliki tepi kotak yang terlihat di sekitarnya. Dengan kata lain, seluruh tombol diklik, bukan hanya ikon. Contohnya icon copy, menunujukkan dengan jelas bahwa perintah copy adalah untuk menyalin teks ataupun dokumen digambarkan dengan 2 dokumen yang sama.
4.4. PENGGUNAAN BUTTON ICON

Jika Anda ingin menggunakan tombol ikon pada toolbar , hindari mencampurnya dengan gayasegi empat atau gaya kapsul toolbar kontrol. Ikon tombol tidak boleh digunakan di panel bawah.
4.5. ISI BUTTON ICON DAN PELABELAN

Ikon tombol terdiri ikon-ikon, di samping itu, mereka dapat menampilkan label teks yang pengguna dapat memilih untuk melihat. Ikon tombol juga dapat berisi panah ke bawah menunjuk tunggal, yang menunjukkan adanya menu pop-up. 5. WARNA Jika Aplikasi web anda bekerja dengan banyak warna , anda mungkin akan memerlukan cara bagi pengguna untuk memasukkan informasi warna. Dengan menyediakan standar warna pada aplikasi web anda.

Part IV Performance
1. KINERJA Hal yang perlu diperhatikan adalah : Gunakan metrik untuk mengidentifikasi masalah kinerja. Hindari menunggu sampai akhir siklus pengembangan, untuk melakukan

tuning kinerja.

13

Gunakan API modern, gunakan teknologi dan informasi design untuk performa Pilih teknologi yang sesuai untuk tugas yang dihadapi. Gunakan Threads untuk meningkatkan respon kode Anda. Menghilangkan I/O operasi yang tidak perlu. Hindari loading sumber daya hingga benar-benar dibutuhkan oleh perangkat

terbaik.

lunak anda.

2. KEAMANAN
1. 2. 2.1. OTENTIKASI

Untuk aplikasi yang membutuhkan atau mengandung informasi yang bersifat privasi dan tidak sama antar pengguna harus disertakan kolom otentikasi yang membutuhkan username dan password.
2.2.KENDALI APLIKASI

Pembatasan akses layanan aplikasi oleh vendor sehingga ada pengaturan hak akses untuk aplikasi tersebut dan bisa dipantau aktivitas apa saja yang ada didalamnya.
2.3.KETERSEDIAAN DAN KERAHASIAAN DATA

Data yang mungkin akan dibutuhkan oleh user sebaiknya dilindungi untuk semua informasi baik berupa data, program dan segala hal yang dianggap penting agar tidak dihapus atau dirubah orang lain yang tidak berhak 3. INTEROPERABILITAS Kemampuan aplikasi dalam berinteraksi atau berintegrasi dengan berbagai macam aplikasi. Jika kemampuan integrasi makin tinggi, maka makin nyaman digunakan oleh berbagai pengguna yang menggunakan bermacam-macam platform. 4. CHANGE RESOLUTION Dengan banyaknya computer yang memiliki resolusi yang berbeda-beda maka web yang baik adalah web yang memiliki suatu menu untuk merubah sebuah resolusi web seperti halnya menu zoom. Atau web tersebut memiliki suatu bentuk web yang tetap atau konsisten
14

pada resolusi yang dimiliki, jadi website tidak terpengaruh oleh resolusi oleh setiap computer yang dimiliki.
5. PENGOLAHAN DATA

Web site yang baik memiliki suatu data mengenai pengujung yang datang untuk mengakses web tersebut. dengan pengelolahan data yang baik maka pengunjung akan merasa lebih gampang untuk mengakses web tersebut, semisal penyediaan fasilitas member. Maka web tersebut harus dapat menyimpan atau mengelola data member tersebut sebaikbaiknya. Dengan demikian jika member web tersebut ingin mengakses web menggunakan fasilitas member, mereka tidak kesulitan untuk mendaftar ulang untuk mengakses web tersebut.

6. ADVERTISING Pengelolahan advertising dapa suatu web sangatlah penting, dikarenakan jika suatu web memiliki banyak advertising yang terdapat pada web tersebut dan di munculkan bersamaan, akan mengakibatkan semakin lama pengunjung menunggu (loading) untuk dapat menggunakan fasilitas yang disediakan web tersebut.

Part V Content
1. TATA LETAK Dalam menyusun logo, materi, icon, dan navigasi sebaiknya diperhatikan pengaturan tata letaknya agar terjadi keselarasan sehingga memudahkan pengguna dalam menggunakan aplikasi tersebut.
1.1. KOLOM PENCARIAN

Kolom ini dapat disediakan untuk memudahkan pengguna dalam menemukan konten yang dibutuhkan. Dapat ditempatkan di bagian kanan atas layout.
1.2. KOLOM OTENTIKASI

15

Dapat ditempatkan di samping atau tepat dibawah kolom pencarian sehingga memudahkan pengguna 2. LINK
1. 2. 2.1. PERUBAHAN WARNA PADA LINK

Umumnya, web browser kurang baik dalam mendukung navigasi pengguna, tetapi mereka menyediakan satu fitur penting dalam navigasi. Mereka mengijinkan pengembang untuk mengubah warna di tiap halaman saat pengguna telah mengunjunginya. Saat ini 74% web menggunakan pendekatan desain yang seperti ini, sehingga hal ini menjadi konvensi umum yang diharapkan pengguna.
2.2. LINK YANG TIDAK BERJALAN

Link pada sebuah web merupakan faktor kunci dalam proses navigasi. Pengguna bisa berhenti menggunakan link yang terbukti tidak berhasil dikunjungi sebelumnya. Sebaliknya, mereka mungkin kembali mengunjungi link yang telah membantu mereka sebelumnya.
2.3. TERLALU BANYAK LINK

Jumlah link yang ditampilkan dalam sebuah halaman biasanya ditentukan oleh kompleksitas dari web itu sendiri. Riset terhadap menu menunjukkan bahwa jumlah link yang berada pada suatu halaman dapat ditentukan dari pengelompokkan elemennya. Jika tidak ada pengelompokkan elemen batas link yang diijinkan adalah 4-8 link. Sedangkan jika terdapat pengelompokkan elemen link diperbolehkan hingga 18-24 buah. Tetapi, sebagian ahli dalam web desain menyarankan hanya 8-12 link saja. Jumlah link yang terlalu sedikit juga meningkatkan kemungkinan terlihat seperti pengumuman. Ini tidak diperlukan untuk menyebutkan semua fitur dari sebuah web dalam semua halaman. Untuk mengurangi jumlah link batasi agar hanya menampilkan content web yang paling penting atau fitur-fitur yang berguna saja.

Tabel Pengujian
16

Testing Checklist
Parameter Navigasi Hierarchy arsitektur Informasi

Ketersediaan
Ya/Ada Tidak 1 2

Skor
3 4 5

Penempatan Navigasi yang baik Konsisten dalam peletakan

Icon link Interface Kemudahan Penggunaan

Kemampuan menarik minat pengguna Kesesuaian dengan budaya daerah pengguna Kemampuan analisis kesalahan pengguna Kemampuan koreksi kesalahan pengguna

Layout Menu Mudah dibaca oleh pengguna Ketepatan pemberian judul Penggunaan symbol Pengelompokan item Penggunaan submenu

Teks Pemilihan font Kesesuaian font dengan isi Ketepatan penggunaan huruf kapital

Icon Kesesuaian ikon dengan genre

17

Kesesuaian ikon dengan maksud kinerja

Button Perilaku button Kesesuaian button dengan kinerjanya

Pewarnaan

Harmonisasi warna yang digunakan Performance Kinerja Penggunaan teknologi sesuai kebutuhan Kecepatan respon Kecepatan loading sumber daya

Keamanan Otentikasi Pemantauan hak akses aplikasi Kerahasiaan data Ketersediaan data

Kompatiblitas pada browser

o o o o

Firefox IE Opera Chrome

Change Resolusi Penataan advertising

18

Content Tata letak

Link
o o

Perubahan warna Link Semua Link berjalan

19