53
Berisikan komponen yang umum digunakan seperti text untuk menampilkan teks, img untuk menampilkan gambar, image gallery
untuk menampilkan kumpulan gambar dalam bentuk slideshow, checkbox untuk membuat ceklis, checkbox group untuk membuat
ceklis, flip switch umumnya digunakan pada menu konfigurasi, untuk mengaktifkan atau tidak suatu fitur, input untuk membaca input dari
user, radio button, radio button group, select untuk menampilkan daftar pilihan, slider dan textarea untuk membaca input user banyak baris.
- Media
Berisikan komponen untuk menampilkan multimedia menggunakan HTML5 seperti audio, video, youtube, vimeo, iframe dan file input.
- Other
Ini merupakan komponen tambahan yang diberikan oleh Intel XDK juga
54
dari fitur baru HTML5, dapat digunakan untuk menampilkan peta google maps dan yandex maps, iklan admob, tampilan layar console console
widget, justgage, webrtc-connect, webrtc-login, dan webrtc-video.
b. Menambahkan Komponen Teks
Komponen teks ini merupakan komponen yang dapat digunakan untuk menampilkan informasi pada user. Cara menambahkannya ke viewer, klik dan
tahan icon Text pada controls dan pindahkan ke viewer dan lepaskan. Cobalah atur properti dan styles dari komponen text menjadi sebagai berikut.
Properti -
Text: Hello World Styles
- Klik pada style Text kemudian klik New...
-
Pada window yang muncul, isikan nama kelas dengan judul.
55
- Pada properti style judul yang tersedia berikan nilai properti sesuai
gambar berikut.
- Jika sesuai hasilnya akan terlihat seperti gambar berikut.
56
c. Menambahkan Komponen Tombol
Berikut ini merupakan langkah-langkah untuk menambahkan komponen tombol sebagai berikut.
-
Klik dan tahan tombol pada Controls Buttons Button arahkan ke
area Viewer.
- Aturlah properti dari Button sebagai berikut.
o Label: OK -
Jika berhasil akan terlihat seperti berikut ini.
57
e. Menambahkan Komponen Gambar
Melalui ini kita dapat menambahkan visualisasi berupa gambar pada halaman web. Berikut ini merupakan langkah-langkahnya.
- Drag-n-Drop icon IMG pada Controls ke area tampilan aplikasi.
58
-
Buka lokasi file proyek di komputer melalui mode CODE klik kanan pada file index.html dan pilih Show in explorer.
59
-
Cari gambar dan salin filenya ke folder images.
- Kembali ke mode DESIGN di Intel XDK dan pilih komponen IMG yang
ditambahkan tadi. -
Pada bagian PROPERTIES dari IMG pada bagian src cari gambar yang telah disalin ke folder images sebelumnya.
60
E. Studi Kasus
Buatlah sebuah tampilan untuk halaman login suatu sistem informasiaplikasi dengan informasi loginnya adalah usernameemail dan password?
F. Rangkuman
Desain antarmuka yang baik dapat menjadi jembatan komunikasi yang efektif dan efisien antara user dan sistem. Prinsip-prinsip dalam merancang antarmuka
yang baik adalah user familiriaty, consistency, minimal surprise, recoverability, user guidance dan user diversity. Penyajian informasi dapat berupa penyajian
langsung dari input user ataupun dalam bentuk grafik. Berikutnya pewarnaan dapat digunakan untuk menambah dimensi pada antarmuka dan mewarnai hal-
hal khusus. Terakhir user support sangat berguna sebagai referensi bagi user.
G. Umpan Balik
1. Apakah anda
memahami perlunya
desain antarmuka
dalam pengembangan aplikasi?
2. Apakah anda sudah dapat membuat desain antarmuka yang memperhatikan prinsip-prinsip desain?
61
62
