Pengantar
Halo! Baru kemaren-kemaren rasanya saya posting tugas IMK buat UTS, sekarang saya mau posting tugas kedua nih yaitu Graphical User Interface (GUI) Research. Kalo sekarang, kami diminta untuk menganalisis (termasuk memberi tanggapan baik kritik maupun komentar) terhadap satu jenis widget yang terdapat dalam aplikasi karya anak bangsa, mungkin belom bisa dibilang research juga kali ya hehe soalnya nggak sekompleks kemaren tahapannya. Tapi well, selamat membaca!
Graphical User Interface
Oke jadi sebelumnya, buat yang belum tau GUI itu apa, ada satu video yang menurut saya membantu banget buat memahami maknanya. I'll drop the video down below so you can watch it too!
Sumber: youtube.com/CrashCourse
Dalam ilmu komputer, istilah GUI adalah sebuah tampilan operasi visual yang ditampakkan oleh monitor kepada operator komputer [1]. GUI biasanya memiliki karakteristik umum seperti window, ikon, menu, dan push-buttons (WIMP). Secara keseluruhan, WIMP adalah penggambaran yang mewakili tindakan tertentu atau ruang lingkup tindakan. Pengguna dapat memberikan masukan atau perintah melalui GUI kepada aplikasi komputer. GUI biasanya memiliki 3 komponen, yaitu [2]: windowing system, imaging model, dan Application Program Interface (API). Windowing system membangun window, menu, dan kotak dialog yang muncul pada layar. Imaging model menentukan fon dan grafik yang muncul di layar. WIMP adalah gabungan dari kedua komponen ini. Terakhir, API adalah seperti apa pengguna mendeskripsikan bagaimana dan windows serta grafik apa saja yang ditampilkan di layar [3].
Button
Button merupakan salah satu elemen GUI yang memungkinkan pengguna melakukan tindakan atau membuat pilihan dengan sekali sentuh (single tap) [4]. Button mewakili tindakan yang dapat diambil oleh pengguna. Button biasanya ditempatkan di seluruh User Interface, pada tempat-tempat seperti:
- Dialog Box
- Modal Windows
- Form
- Cards
- Toolbars
Beberapa prinsip yang harus diterapkan dalam merancang sebuah button adalah button harus 1.) identifiable, yaitu harus dapat menegaskan bahwa mereka dapat memicu (trigger) sebuah aksi, 2.) findable, yaitu harus dapat dengan mudah ditemukan di antara elemen lain, termasuk button lain, dan 3.) clear, yaitu tindakan dan state yang dimiliki button harus jelas.
Button memiliki beberapa tipe yaitu:
 |
| Gambar 1 Tipe-tipe Button Sumber: Material.io |
- Text button dengan low emphasis biasa digunakan untuk aksi yang tidak begitu penting
- Outlined button dengan medium emphasis digunakan untuk penekanan yang lebih tinggi dibandingkan text button dengan adanya garis luar pada container
- Contained button dengan high emphasis digunakan untuk penekanan paling tinggi karena menggunakan warna isi dan bayangan
- Toggle button digunakan dengan mengelompokkan satu set aksi menggunakan layout dan spasi. Toggle button digunakan lebih jarang dibandingkan yang lain
Anatomi dari sebuah button terdiri dari 2 elemen yang dibutuhkan dan 1 elemen fungsional, yaitu text label atau icon, dan container. Text label pada button umumnya menggunakan huruf yang dikapitalisasi (untuk bahasa yang memungkinkan). Hal ini bertujuan membedakan text label dari teks sekitarnya. Jika tidak, perlu ada karakteristik lain untuk menjadi faktor pembeda seperti warna, ukuran, atau penempatan. Jika text label tidak digunakan, sebuah icon harus ditampilkan untuk menjelaskan apa aksi yang dipicu button tersebut.
 |
| Gambar 2 Anatomi Button Sumber: Material.io |
Keterangan:
A: Text label, B: Container, C: Icon
Hierarki dan penempatan
- Satu button yang menonjol: Layout harus memiliki satu button yang menonjol dan menegaskan bahwa button lain memiliki emphasis yang lebih rendah dalam hierarki. Button dengan high-emphasis harus dapat menarik paling banyak perhatian
 |
| Gambar 3 Hierarki Button Sumber: Material.io |
- Button lain: Aplikasi dapat menampilkan lebih dari satu button secara bersamaan dengan cara mengiringi high emphasis button dengan medium atau low emphasis button. Pastikan bahwa available state masing-masing button tidak terlihat seperti disabled state button lain.
Pastikan bahwa available state masing-masing button tidak terlihat seperti disabled state button lain.
Gambar 4 State tiap jenis button
Sumber: Material.io
Tentang Aplikasi Go-Jek
Siapa yang nggak kenal Go-Jek? Disadur dari Wikipedia Indonesia, PT Aplikasi Karya Anak Bangsa atau yang lebih dikenal dengan GO-JEK merupakan sebuah perusahaan teknologi asal Indonesia yang melayani angkutan melalui jasa ojek. Perusahaan ini didirikan pada tahun 2010 di Jakarta oleh Nadiem Makarim. Saat ini, GO-JEK telah tersedia di 50 kota di Indonesia dan hingga bulan Juni 2016, aplikasi GO-JEK sudah diunduh sebanyak hampir 10 juta kali di Google Play pada sistem operasi Android dan bahkan telah disediakan untuk iOS, di App Store. Fitur terbaru yang diperkenalkan oleh Go-Jek adalah layanan pembayaran digital yaitu Go-Pay. Saat ini, Go-Jek sedang Terus melakukan ekspansi ke negara-negara di Asia Tenggara, dan kini sudah ada di Thailand dan Vietnam. Kabarnya Gojek akan merilis di Singapura dan Filipina selanjutnya.
GO-JEK is a technology company with a social mission to improve the welfare and livelihoods of workers in various informal sectors in Indonesia. GO-JEK champions 3 essential values: speed, innovation, and social impact. GO-JEK drivers say that since joining us as partners, they have seen their income increase and reached more customers through our app. They also have access to health and accident cover, financial services and insurance, as well as affordable automatic payments and many other benefits. (Deskripsi dari laman resmi Go-Jek )
Pembahasan
Keterangan:
Kotak Merah: Text button
Kotak Kuning: Outlined button
Kotak Biru: Contained button
(Mohon maaf karena urutannya jadi berantakan:( Padahal pas diedit nggak gini urutannya:( huhu)
Jadi gini urutan screenshotnya:
1: Turn on device location
2: Set pickup
3: See all
4: Edit favourites
5: View details
6: Hide details
Aplikasi Go-Jek menggunakan beberapa jenis button yaitu text button, outlined button, dan contained button. Aplikasi ini juga menggunakan icon button dan lain-lain namun pembahasan saya akan fokus pada tiga yang pertama. Contained button pada aplikasi tersebut dapat dengan mudah ditemukan dan dibedakan dibandingkan teks yang berada di sekelilingnya. Ini ditandai dengan faktor pembeda berupa kapitalisasi text label dan bayangan pada screenshot ketiga, serta warna pada screenshot kedua dan keenam. Warna pengisi dari contained button juga sudah merupakan warna solid dan perintah yang diberikan berada dalam satu baris yang sudah efisien. Masing-masing state yang dimiliki button ini juga jelas perbedaannya.
Outlined button pada screenshot keempat ditandai dengan container button yang memiliki garis luaran (outline) tanpa warna isi. Jenis button ini biasa digunakan untuk menandai aksi dengan medium-emphasis Artinya, aksi yang dilakukan oleh button tersebut penting, namun bukan aksi utama pada aplikasi tersebut. State yang dimiliki jenis button ini juga sudah jelas perbedaannya.
Text button pada screenshot pertama sudah baik karena dalam dialog box, sebaiknya digunakan text button untuk kedua pilihan aksi agar memberi kesan menyatukan antara text label pada button dengan teks pada dialog. Namun selebihnya, pada multiple button seperti itu biasanya diberikan hierarki dengan menggunakan button yang memiliki emphasis tinggi lalu diiringi button lain yang emphasis-nya lebih rendah. Ini tercermin pada screenshot kelima dan keenam dimana text button yang ber-emphasis rendah mengiringi contained button yang ber-emphasis tinggi. Namun, terkadang state pada text button di aplikasi ini kurang jelas utamanya saat membedakan apakah button sudah berada dalam state 'pressed' atau tidak.
Kesimpulan
Berdasarkan penilaian yang saya lakukan, elemen button yang terdiri dari text button, outlined button, dan contained button pada aplikasi Go-Jek sudah baik. Ini ditandai dengan prinsip-prinsip button yang terpenuhi yaitu identifiable, findable, dan clear. Kemudian, efisiensi tampilan button sudah baik dan faktor pembeda button yang digunakan seperti warna, huruf, dll juga telah berfungsi baik.
Daftar Pustaka
[1] Harding, Bruce A. Windows & Icons & Mice, Oh My! The Changing Face of
Computing. Frontiers in Education Conference 1989: 19th Annual: 337-342.
[2] Hayes, Frank and Nick Baran. A Guide to GUIs. Byte Vol. 4. (July 1989):250-257.
[3] Crow, D., and Jansen, B. J. 1998. Seminal works in computer human
interaction. SIGCHI Bulletin. 30(3), 24-28.
[4] Material Design. https://material.io/design/components/buttons.html. Diakses 11 November 2018, 18.46 WIB
[4] Material Design. https://material.io/design/components/buttons.html. Diakses 11 November 2018, 18.46 WIB
[5] Wikipedia. https://id.wikipedia.org/wiki/GO-JEK. Diakses 12 November 2018, 09.32 WIB
Penutup
Oooookeeeeee, saya rasa cukup dulu. Thanks for coming and see you very soon!xoxo
0 Comments