BAB 4 IMPLEMENTASI DAN EVALUASI 4.1. Implementasi kiosk Informasi 4.1.1 Spesifikasi Hardware dan Software yang diperlukan Hardware dan software yang dibutuhkan untuk mengoperasikan kiosk informasi Pondok Indah Mall 1 dan 2 ini terbagi menjadi hardware dan software back-end serta hardware dan software front-end. 1. Hardware a. Hardware Front-end (Kiosk Informasi) Hardware front-end yang di butuhkan untuk menjalankan kiosk informasi dengan optimal menggunakan spesifikasi sebagai berikut : Processor Pentium IV 2,8 GHZ Memori 1 GB atau lebih Hard disk minimal 1 GB Monitor Touch screen 19 dengan resolusi 1024 x 768 VGA card 256 MB Sound card onboard Directed speaker 88
89 b. Hardware Back-end (Server) Hardware back-end yang di butuhkan untuk menjalankan kiosk informasi dengan optimal menggunakan spesifikasi sebagai berikut : Processor Pentium IV 2,8 GHZ Memori 1 GB atau lebih Hard disk minimal 80 GB 2. Software a. Software Front-end Software front-end yang dibutuhkan untuk menjalankan kiosk informasi menggunakan spesifikasi sebagai berikut : sistem operasi Windows XP Adobe Flash Player 9.0.124.0 browser Mozilla Firefox 2.0.0.14 extension R-Kiosk 0.7.1 untuk browser Mozilla Firefox b. Software Back-end Software back-end yang dibutuhkan untuk menjalankan kiosk informasi menggunakan spesifikasi sebagai berikut : webserver Apache database mysql PHP 5
90 3. Perangkat Jaringan Kabel UTP dan RG 45 connector LAN card Switch Repeater 4. Pengguna (Brainware) a. Brainware Front-end Brainware yang mengoperasikan kiosk informasi ini adalah pengunjung Pondok Indah Mall 1 dan 2. b. Brainware Back-end Brainware yang mengoperasikan kiosk informasi ini adalah pegawai front office yang mengatur jadwal oprasional kegiatan mall.
91 4.2. Implementasi Jaringan Kiosk Informasi Pondok Indah Mall 1 dan 2 Admin Switch Repeater Repeater Kiosk 1 pada Podok Indah Mall 1 Kiosk 2 Pada Pondok Indah Mall 2 Gambar 4.1 Jaringan LAN Kiosk Informasi Pondok Indah Mall 1 dan 2 Gambar 4.1 merupakan topologi jaringan kiosk informasi pada Pondok Indah Mall 1 dan 2 di mana sistem ini menggunakan jaringan lokal (LAN). Dalam topologi ini disediakan 3 buah komputer. 1 buah Komputer berfungsi sebagai server dan pengontrolan admin, sedangkan dua buah komputer berfungsi sebagai komputer yang digunakan oleh pengguna (user). Untuk menghubungkan antara admin ke komputer kiosk 1 dan 2 dibutuhkan Kabel UTP, RG 45 connector, LAN card, switch dan repeater untuk memperkuat sinyal jaringan.
92 4.3. Implementasi Penempatan dan Rancangan Kiosk Informasi Pondok Indah Mall 1 dan 2 Komputer yang berfungsi sebagai server dan pengontrolan admin ditempatkan pada ruangan Manjemen Pondok Indah Mall 1 lantai 1. komputer untuk Kiosk Informasi di tempatkan di dekat eskalator lantai 2 pada Pondok Indah Mall 1 dan di lantai 3 Pondok Indah Mall 2. Rancangan hardware komputer untuk kiosk informasi dapat dilihat di bawah ini. Gambar 4.2 Rancangan Kiosk Informasi
93 4.4. Tampilan Layar User (Front End) Pada Kiosk Informasi Pondok Indah Mall 1 dan 2 4.4.1 Layar Directory Gambar 4.3 Tampilan Layar Directory Layar directory ini merupakan tampilan pertama kali dijalankan kiosk informasi Pondok Indah Mall 1 dan 2. pada layar home ini terdapat 4 menu utama yaitu : Search Map Event Cinema
94 Pada halaman utama user dapat melihat semua lantai yang ada pada Pondok Indah Mall 1 dan 2. kemudian user juga dapat melihat fasilitas umum mall seperti Musholla, WC, Smoking Area. User juga dapat berpindah lantai ke semua lantai di Pondok Indah Mall. Jika dirasa gambar kurang jelas maka, user dengan menggunakan tanda (+) pada icon di pojok kiri bawah hasil pemperbesar gambarnya seperti ini : Gambar 4.4 Tampilan Directory yang di zoom Pada halaman directory ini user dapat melihat shop detail dari berbagai toko yang ada disini dalam keadan peta yang di zoom atau normal, hasil shop detail pada suatu toko seperti ini.
95 Gambar 4.5 Tampilan layar Shop Detail pada Directory 4.4.2 Layar Search Gambar 4.6 Tampilan Menu Search
96 Pada halaman Search ini user dapat mencari toko-toko yang dicarinya. Semua toko-toko ini dikategorikan dan di simbolisasikan kedalam suatu tag. User dapat melihat animasi dari tag yang berjalan melingkar. Untuk melakukan pencarian user hanya perlu menekan salah satu tag yang dimaksud kemudian tekan tombol search pada bagian tengah sebelah kiri. Ketika tombol tersebut ditekan maka semua toko berdasrkan tag tersebut akan berkumpul semua. 4.4.3 Layar Event Gambar 4.7 Tampilan Menu Event Pada halaman Event ini user dapat mencari toko-toko yang mengadakan event-event seperti diskon dan sebagainya. Di samping itu user
97 dapat melihat berbagai macam event-event mall yang sedang berlangsung dan yang akan berlangsung. 4.4.4 Layar Cinema Gambar 4.8 Tampilan Menu Cinema Pada halaman Cinema ini user dapat melihat berbagai macam film yang diputar pada bioskop 21. User dapat melihat sinopsis dari film tersebut, serta melihat trailer pendek dari film tersebut juga, agar dapat menentukan pilihan film mana yang akan disaksikan.
98 Gambar 4.9 Tampilan Menu Sinopsis Cinema Gambar 4.10 Tampilan Menu Trailer Cinema
99 Pada gambar 4.8, user dapat membaca sinopsis mengenai film-film yang sedang tayang saat ini. Jika user masih penasaran akan film tersebut user dapat menonton trailer pendek filmnya seperti pada gambar 4.9. 4.5. Tampilan Layar Back End Pada Kiosk Informasi Pondok Indah Mall 1 dan 2 4.5.1 Layar Login Gambar 4.11 Tampilan Layar Login Pada tampilan ini admin memasukkan password dan username terlebih dahulu untuk memperoleh akses menuju editor aplikasi kiosk informasi Pondok Indah Mall. Setelah tombol submit ditekan, sistem akan melakukan pengecekan dari table User di database apakah username dan password yang dimasukkan valid atau tidak. Jika tidak valid, sistem akan meminta admin untuk memasukkan kembali username dan password-nya. Jika valid, sistem akan membawa admin menuju halaman Editor Toko.
100 4.5.2 Layar Editor Toko Gambar 4.12 Tampilan Layar Editor Toko Pada tampilan ini admin dapat memilih kavling-kavling tertentu untuk diisi datanya. Bentuk pengisian data seperti ini memudahkan admin dalam melakukan pengisian data karena admin dapat langsung mengisi data toko berdasarkan posisi kavlingnya. Setelah admin memilih kavling yang akan diisi datanya, admin akan dibawa menuju halaman Editor Detail Toko. 4.5.3 Layar Editor Detail Toko Gambar 4.13 Tampilan Layar Editor Detail Toko
101 Halaman ini merupakan bagian dari halaman Editor Toko. Pada halaman ini, admin melakukan pengisian data untuk kavling yang sebelumnya telah dipilih pada halaman Editor Toko. Data-data yang diperlukan untuk sebuah toko adalah nama toko, deskripsi toko, dan gambar toko. Setelah admin mengisi data dan menekan tombol Masukkan data toko, admin akan dibawa kembali menuju halaman Editor Toko. 4.5.4 Layar Editor Kategori Gambar 4.14 Tampilan Layar Editor Kategori Pada halaman ini, admin dapat memasukkan data-data kategori baru untuk keperluan pencarian toko. Data-data yang dapat dimasukkan adalah nama kategori, warna tag, dan icon tag. Setelah memasukkan data, admin
102 dapat melihat seperti apa tampilan tag baru pada aplikasi front-end dengan menekan tombol Preview. 4.5.5 Layar Editor Cinema Gambar 4.15 Tampilan Layar Editor Cinema Pada halaman ini, admin dapat memasukkan dan menghapus data film bioskop (cinema). Film yang ditampilkan disini mencakup film-film yang sedang ditayangkan dan yang akan datang. Data-data yang dapat dimasukkan adalah judul cinema, status penayangan, trailers, sinopsis, dan poster.
103 4.5.6 Layar Editor Event Gambar 4.16 Tampilan Layar Editor Event Pada halaman ini, admin dapat memasukkan dan menghapus data-data mengenai event-event yang sedang terjadi di Pondok Indah Mall seperti diskon maupun acara mall. Data-data yang dapat dimasukkan adalah lokasi event, deskripsi event, dan poster event.
104 4.6. Evaluasi Berdasarkan hasil kuisioner yang kami peroleh, dapat disimpulkan bahwa para responden menginkan aplikasi kiosk yang dapat menunjukan letak toko, event mall dan fasilitas mall serta pencarian toko dengan menggunakan icon yang dikemas secara multimedia interaktif. Berdasarkan hasil wawancara dengan pihak pengelola Pondok Indah Mall yang hanya familiar dengan Microsoft Office, maka dapat disimpulkan pembuatan maintenance data untuk pengelola mall harus yang mudah digunakan. Evaluasi dilakukan dengan membandingkan aplikasi ini dengan teori 8 Golden Rules. Hasil evaluasi tersebut menyimpulkan bahwa aplikasi ini telah memenuhi seluruh teori 8 Golden Rules, yaitu adanya konsistensi, adanya shortcut, adanya feedback yang informatif, adanya pusat kendali internal, adanya pencegahan kesalahan sederhana, pengurangan beban ingatan jangka pendek. dialog yang menghasilkan keadaan akhir, dan pembalikan aksi (undo) dengan mudah. 4.6.1 Konsistensi Aspek konsistensi dalam aplikasi ini dapat dilihat pada adanya kesamaan font, warna, tata letak, dan desain antar layar seperti dapat dilihat pada gambar dibawah ini.
105 Gambar 4.17 Konsistensi Font, Warna, Tata Letak, dan Desain Antar Layar 4.6.2 Penggunaan Shortcut Dalam aplikasi ini, terdapat empat buah tombol navigasi utama yang menyediakan akses langsung menuju empat halaman utama dari aplikasi ini yaitu peta, pencarian toko, event, dan film bioskop. Akses menuju empat halaman ini tidak dibatasi oleh adanya halaman induk (root) seperti halnya halaman Home atau Index sehingga dapat mempercepat akses pengguna menuju halaman yang diinginkan. Gambar 4.18 Shortcut Utama pada Kiosk Informasi Pondok Indah Mall
106 4.6.3 Umpan balik (feedback) yang informatif Dalam aplikasi front-end kiosk informasi ini, fasilitas pencarian digunakan dengan cara meng-klik tag-tag sebagai metafora dari kategori yang dipilih. Setelah meng-klik tag tersebut, tag akan dihilangkan dari layar. Sebagai umpan balik, sistem akan menampilkan kata kunci dari kategori yang dipilih sehingga pengguna tetap mendapatkan umpan balik yang informatif dan tidak merasa bingung karena mengira sistem tidak memberikan respon. Gambar 4.19 Umpan Balik dari Sebuah Pemilihan Tag pada Fasilitas Search Dalam aplikasi back-end, pengelola dapat menambahkan kata kunci pencarian sesuai dengan cara membuat tag baru. Untuk membantu pengelola dalam membuat tag baru, sistem dapat menampilkan seperti apa tampilan tag baru tersebut dalam aplikasi front-end.
107 Gambar 4.20 Tampilan Editor Kategori yang Menampilkan Preview dari Input 4.6.4 Dialog yang menghasilkan keadaan akhir Dalam aplikasi back-end aplikasi kiosk ini, setiap kali pengelola memulai proses memasukkan data baru, akan selalu ada keadaan akhir dari proses tersebut yang direpresentasikan oleh sebuah dialog box. Contoh dapat dilihat pada gambar 4.15 dibawah ini.
Gambar 4.21 Tampilan dialog box yang Memberikan Keadaan Akhir 108
109 4.6.5 Pencegahan dan penanganan kesalahan sederhana Dalam aplikasi back-end, data kategori yang dimasukkan harus sesuai dengan format tertentu. Untuk itu aplikasi back-end memberikan pencegahan kesalahan berupa petunjuk pengisian data seperti dapat dilihat pada gambar 4.16 dibawah ini. Gambar 4.22 Tampilan Pencegahan Kesalahan Berupa Petunjuk Pengisian Data Kategori Baru.
110 4.6.6 Pembalikan aksi Dalam proses pencarian, user dapat salah memilih kategori. Untuk itu jika user salah memilih kategori, aplikasi dapat mengembalikan user ke kondisi sebelumnya dengan cara mengklik daftar kategori yang dipilih. Gambar 4.23 Tampilan Layar ketika User Mengembalikan Tag yang Salah Dipilih 4.6.7 Pusat kendali internal (internal locus of control) Adanya tombol navigasi utama pada aplikasi kiosk informasi memberikan akses menuju seluruh fitur front-end kiosk informasi. Hal ini memberikan user rasa kuasa atas aplikasi. Gambar 4.24 Tampilan layar Seluruh Akses Kiosk Informasi
111 4.6.8 Mengurangi beban ingatan jangka pendek Aplikasi ini dirancang agar tidak membebani ingatan jangka pendek dari user. Pada aplikasi front-end, hal ini dapat dilihat dari kesederhanaan tampilan (tidak menggunakan animasi berlebihan yang tidak perlu), pemilihan warna yang tidak saling mendominasi, dan penggunaan suara yang lembut. Gambar 4.25 Penggunaan Tampilan yang Mengurangi Beban Ingatan Jangka Pendek. Pada aplikasi back-end, tombol halaman akan berwarna abu-abu memberikan petunjuk kepada user tentang posisinya saat ini didalam program sehingga user tidak perlu berusaha mengingat dimana posisinya didalam program.
112 Gambar 4.26 Penggunaan Warna pada Tombol Navigasi untuk Mengurangi Beban Ingatan Jangka Pendek.