2.7. Ribbon pada Embarcadero Delphi 2010
Ribbon adalah suatu bentuk antarmuka interface yang memuat suatu set toolbar yang ditempatkan pada suatu tab pada tab bar. Contoh aplikasi yang menggunakan
teknologi Ribbon ini adalah Microsoft Office 2007 dan Microsoft Office 2010. Antarmuka Ribbon ini menyediakan fungsionalitas berdasarkan hal yang sedang
dikerjakan oleh pengguna. Antarmuka Ribbon ini menyediakan pengguna sebuah antarmuka dengan toolbar yang besar yang berisi representasi grafis dari elemen-
elemen kontrol yang dikelompokkan berdasarkan fungsi yang berbeda.
Embarcadero Delphi 2010 menyediakan fungsi untuk mengimplemenasikan Ribbon pada perangkat lunak. Selain itu, Delphi sendiri juga menawarkan berbagai
macam kelebihan-kelebihan lainnya, seperti mudah digunakan, karena berdasarkan bahasa Pascal,m enyediakan IDE Intergrated Development Kit, mendukung database
MySQL, dan komponen tambahan lainnya.
Universitas Sumatera Utara
BAB 3
ANALISIS DAN PERANCANGAN ANTARMUKA
3.1 Analisis Usability
Tidak ada yang lebih penting daripada kepuasan pengguna setelah melalui pengalaman dalam menggunakan sebuah perangkat lunak. Walaupun sebuah
perangkat lunak bekerja dengan baik dan benar, tetapi apabila tampilan perangkat lunak yang tidak memikat dan menyusahkan pengguna, maka pengguna tidak akan
tertarik untuk menggunakan perangkat lunak tersebut kedepannya. Antarmuka sebuah aplikasi adalah penghubung perangkat lunak dengan pengguna. Sebuah perangkat
lunak yang memiliki usability yang baik, akan memberikan pengguna pengalaman berinteraksi yang berkesan, meningkatkan produktifitas pengguna, dan menghasilkan
sebuah perangkat lunak yang lebih baik lagi.
Sebuah perangkat lunak yang memiliki usability yang baik, harus memenuhi 5 komponen dasar usability menurut Jakob Nielsen, antara lain:
1. Learnability kemudahan pembelajaran
Seberapa mudahkan pengguna menyelesaikan tugas sederhana pada saat pertama kali penggunaan desain?
2. Efficiency efesiensi
Setelah pengguna mempelajari desain perangkat lunak, seberapa cepatkah mereka dapat menyelesaikan tugas?
3. Easy to remember mudah diingat
Ketika pengguna tidak menggunakan desain setelah beberapa waktu, seberapa mudahkan mereka mengembalikan keahlian mereka?
4. Error prevention pencegahan kesalahan
Berapa kali pengguna membuat kesalahan, seberapa parahkah kesalahan tersebut, dan bagaimana mereka dapat memperbaiki kesalahan tersebut?
Universitas Sumatera Utara
5. Satisfying memuaskan
Seberapa memuaskankah desain tersebut menurut pengguna?
3.1.1 Kemudahan Pembelajaran Learnability
3.1.1.1 Ribbon
Firefly Project Manager didesign dengan menggunakan antarmuka Ribbon, yang sudah familiar diantara pengguna Microsoft Office. Antarmuka Ribbon sendiri
didesign sedemikian rupa, sehingga pengguna dapat menemukan tools yang diperlukan pada tab yang ada. Setiap tombol juga dikelompokkan ke dalam tab group
berdasarkan fungsinya.
Gambar 3.1 Ribbon pada Aplikasi
3.1.1.2 Tombol Bantuan
Disamping penggunaan Ribbon yang sudah akrab dengan pengguna, Firefly Project Manager juga menyediakan bantuan untuk pengguna. Untuk mengakses
bantuan, pengguna dapat menavigasikan Ribbon ke tab Pengguna, dan tombol Bantuan ada pada tab group Lain-lain. Atau pengguna juga dapat langsung mengakses
tombol shortcut kecil yang terdapat pada sisi kanan atas Ribbon yang disimbolkan dengan tanda tanya biru kecil.
Universitas Sumatera Utara
Gambar 3.2 Bantuan pada Aplikasi
Pengaksesan bantuan akan menampilkan sebuah file bantuan yang berekstensi CHM. File CHM ini, atau Compiled Windows HTML Help, dirancang sedemikian
rupa untuk membantu pengguna dalam penggunaan perangkat lunak Firefly Project Manager. File CHM ini berisi panduan singkat, padat dan jelas mengenai setiap
elemen dalam aplikasi. File bantuan ini juga menyediakan opsi bantuan bila terjadi kesalahan, dan langkah-langkah pengaturan untuk pemakaian pertama oleh pengguna.
Gambar 3.3 File CHM Bantuan
Universitas Sumatera Utara
3.1.1.3 Bantuan Tidak Langsung
Selain file bantuan, pengguna juga mendapatkan bantuan secara tidak langsung pada saat pengguna menempatkan cursor mouse pada isian yang tidak dimengerti. Contoh,
ketika pengguna menyorotkan cursor mouse pada kotak isian Login ID, akan keluar sebuah bantuan sederhana dibawah kotak isian tersebut, yang berbunyi “Masukkan
nama ID login”. Fasilitas bantuan tidak langsung ini tersedia untuk setiap komponen di dalam perangkat lunak Firefly Project Manager, mulai dari tombol-tombol pada
Ribbon, hingga isian-isian pada sidebar.
Gambar 3.4 Bantuan Tidak Langsung
3.1.1.4 Penggunaan Bahasa Indonesia
Perangkat lunak manajemen proyek Firefly Project Manager memakai Bahasa Indonesia pada antarmuka aplikasi. Penggunaan Bahasa Indonesia mendorong
kemudahan dalam pembelajaran dibandingkan dengan program serupa yang menggunakan Bahasa Inggris.
3.1.2 Effisiensi Efficiency
3.1.2.1 Focus Control
Focus control adalah salah satu cara cepat dalam mempercepat penggunaan aplikasi. Dengan menggunakan focus control, pengguna dapat dengan mudah menavigasi
antara suatu kotak isian yang satu dengan kotak isian lainnya hanya menggunakan keyboard, dan pada saat yang bersamaan, menghemat penggunaan mouse.
Universitas Sumatera Utara
Gambar 3.5 Focus Control pada Form Login
Pada Gambar 3.5 terlihat focus control pada Form Login. Cara pengaksesan fasilitas focus control ini adalah dengan menekan kombinasi tombol Alt dan huruf
yang bergaris bawah pada komponen yang kita inginkan. Contoh pengguna ingin menavigasi ke kotak isian Login ID, pengguna cukup menekan dan menahan tombol
Alt dan tombol O. Demikian juga dengan kotak isian Kata Kunci, pengguna cukup menekan dan menahan tombol Alt dan tombol K. Untuk menekan tombol Login,
pengguna cukup menekan dan menahan tombol Alt dan tombol L. Untuk menekan tombol Batal, pengguna cukup menekan dan menahan tombol Alt dan tombol B.
Demikian focus control dapat menghemat waktu dengan menyediakan shortcut untuk melakukan suatu tugas.
3.1.2.2 Key Tips
Fasilitas lain yang dapat meningkatkan efektifitas pengguna dalam melakukan navigasi pada aplikasi adalah key tips. Key tips adalah shortcut yang dapat diakses
ketika pengguna menekan tombol Alt.
Gambar 3.6 Key Tips pada Ribbon 1
Universitas Sumatera Utara
Terlihat pada Gambar 3.6 adalah tampilan Ribbon ketika pengguna menekan tombol Alt. Pengguna dapat mengakses menu aplikasi dengan menekan tombol F, tab
Proyek dengan menekan tombol P, tab Pengguna dengan menekan tombol G, dan tab Pengaturan dengan menekan tombol T.
Gambar 3.7 Key Tips pada Ribbon 2
Gambar 3.7 memperlihatkan tampilan aplikasi ketika tombol P yang ditekan. Aplikasi akan menampikan key tips tambahan untuk membantu pengguna dalam
memilih tombol mana yang akan dipilih pengguna. Tombol B akan membuat proyek baru, tombol O akan membuka proyek lama, tombol T akan menutup proyek, tombol
S untuk menampilkan persen, tombol N untuk menampilkan nama, dan tombol K untuk menampilkan kalender.
3.1.3 Kemudahan Diingat Easy to Remember
3.1.3.1 Tab
Ribbon merupakan antarmuka pengganti menu dan toolbar pada aplikasi Microsoft Office. Penggunaan Ribbon membantu pengguna dalam mengingat letak tombol-
tombol ataupun tools yang diperlukan dalam menjalankan aplikasi karena tombol- tombol tersebut dikelompokkan berdasarkan fungsinya kedalam tab yang ada.
Gambar 3.8 Tab pada Ribbon
Universitas Sumatera Utara
Gambar 3.8 memperlihatkan tiga tab pada Ribbon yang terdiri dari Proyek, Pengguna, dan Pengaturan. Jadi pengguna mudah mengingat tab mana yang harus
diakses untuk melakukan fungsi tertentu. Contoh pengguna ingin melakukan pengaturan pangkalan data, pengguna cukup melakukan navigasi ke tab Pengaturan,
dan memilih tombol Pengaturan Pangkalan Data.
3.1.3.2 Tab Group
Tab group adalah pengelompokkan lebih lanjut dari pengelompokkan yang telah ada pada tab dalam Ribbon. Ribbon dikelompokkan berdasarkan fungi ke dalam beberapa
tab, dan kemudian tab ini dibagi lagi berdasarkan pengelompokkan fungsi yang lebih mendalam.
Gambar 3.9 Tab Group pada Tab Pengguna
Pada Gambar 3.9 dapat dilihat bahwa tab Pengguna dibagi berdasarkan beberapa tab group, yaitu tab group Login, tab group Lain-lain, dan tab group
Keluar. Masing-masing tab group berafiliasi dengan tombol-tombol yang berada pada tab group yang ada.
3.1.4 Pencegahan Kesalahan Error Prevention
Ada dua jenis pesan pencegahan kesalahan pada perangkat lunak manajemen proyek Firefly Project Manager, yaitu:
Universitas Sumatera Utara
3.1.4.1 Pesan Informasi
Gambar 3.10 Pesan Informasi
Pesan informasi berfungsi untuk memberitahukan pengguna bahwa pengguna akan melakukan sesuatu yang tidak dianjurkan, tetapi masih dapat ditolelir. Contoh:
pengguna membiarkan kata kunci proyek kosong, maka aplikasi akan langsung memunculkan sebuah kotak dialog pesan kesalahan seperti pada gambar 3.10, untuk
menginformasikan pengguna bahwa kotak isian kata kunci kosong. Pesan informasi dapat dilanjutkan dengan menekan tombol Ya, tapi jika pengguna ingin kembali dan
memberikan kata kunci pada proyek, pengguna dapat menekan tombol Tidak.
Pencegah kesalahan tipe pesan informasi berciri-ciri memiliki tampilan sebuah gambar huruf i, yang melambangkan informasi, di sisi kiri kotak dialog. Pesan
informasi ini akan dimunculkan aplikasi bila pengguna melakukan kesalahan kecil yang tidak berbahaya dan tidak menimbulkan dampak yang besar.
3.1.4.2 Pesan Peringatan
Gambar 3.11 Pesan Peringatan
Universitas Sumatera Utara
Pesan peringatan akan dimunculkan aplikasi jika pengguna melakukan kesalahan yang fatal dan apabila pengguna tidak memperbaiki kesalahan yang ada,
maka pengguna tidak dapat melanjutkan. Contoh: pengguna salah memasukkan kata kunci proyek ketika pengguna hendak membuka proyek yang telah ada. Pengguna
tidak dapat melanjutkan membuka proyek, sampai pengguna memasukkan kata kunci yang tepat.
Pencegah kesalahan tipe pesan peringatan berciri-ciri memiliki tampilan sebuah segitiga kuning dengan tanda seru didalamnya, yang melambangkan
peringatan. Pesan kesalahan tipe ini tidak dapat dilalui jika pengguna tidak memperbaiki kesalahan yang telah dilakukan sebelumnya.
3.1.5 Kepuasan Satisfying
Untuk menambah kepuasan pengguna dalam berinteraksi dengan aplikasi, perangkat lunak Firefly Project Manager dilengkapi dengan sepuluh pilihan tema yang dapat
diganti-ganti, sesuai dengan keinginan pengguna. Masing-masing tema memiliki warna dasar sendiri. Pengguna dapat bereksperimen sendiri menentukan warna yang
cocok dan sesuai dengan kepribadian pengguna.
Gambar 3.12 Pengaturan Tema
Universitas Sumatera Utara
3.2 Perancangan Antarmuka