• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Presentasi kelompok 7
 

Presentasi kelompok 7

on

  • 336 views

presentasi IMK kelompok 7

presentasi IMK kelompok 7
- widiajie Ramadhan
- Fitranto F
- Ferdinan A
- Revando LR
- Pandi S

Statistics

Views

Total Views
336
Views on SlideShare
336
Embed Views
0

Actions

Likes
0
Downloads
6
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Presentasi kelompok 7 Presentasi kelompok 7 Presentation Transcript

    • Choose the Proper Screen-Based ControlsMemilih kontrol-kontrol (elemen) layar yang tepatIlmu Komputer – Institut Pertanian BogorInteraksi Manusia dan Komputer© 2013 Kelompok 71
    • Anggota Kelompok Fithranto FaturakhmanG64124002 Ferdinan Andreas G64124016 Revando Lumbanraja G64124029 Pandi SianturiG64124050 Widiajie RamadhanG641240592
    • Review(The User Interface DesignProcess) Step 1 - Know Your User and ClientParadigmanya itu bahwa kita membuatsistem untuk user. Ini yang palingpenting.Fokus utamanya, kenali:- bagaimana orang berinteraksi dengankomputer- karakteristik, experience, skillpengguna yang berbeda-beda- pekerjaan mereka yang akan diadopsi3
    • Review(The User Interface DesignProcess) Step 2 - Understand the BusinessFunction- Kenali lebih mendalam proses bisnisyang terjadi dan dapatkan goals-nya- Pecah-pecah dan deskripsikanproses tersebut dalam task analysisbeserta activities-nya4
    • Review(The User Interface DesignProcess) Step 3 - Understand the Principles ofGood Screen DesignPahami prinsip-prinsip desain yangbaik, dimana:- mampu mencapai tujuan &kebutuhan pengguna- sistem mudah digunakan- mencapai tujuan bisnis itu sendiri- mulai merancanglayouting, rules, dsb5
    • Review(The User Interface DesignProcess) Step 4 - Develop System Menus andNavigation Schemes- Menyampikan informasi yang jelassecara general menuju spesifik salahsatunya lewat menu- Kenali jenis-jenis menu yang ada- Menentukan struktur, fungsi, danformat dari menu yang akan dibuat6
    • Review(The User Interface DesignProcess) Step 5 - Select the Proper Kinds ofWindows- Antar platform memiliki karakteristikwindow yang berbeda-beda- Kenali jenis-jenis window yang ada- Tentukankarakteristik, komponen, caramengoperasikan window7
    • Review(The User Interface DesignProcess) Step 6 - Select the Proper DeviceBased-Controls (Input Device)- Seiring evolusi dari graphicalsystem, alat input yang digunakan ikutsemakin berkembang juga- Kenali alat input terkini yang ada- Tentukan alat input yang tepat untuksistem yang dikembangkan8
    • SUMMARY / RINGKASANApa yang menjadi poin penting pada bab ini? Menjelaskan ke arah lebih spesifik dari 6step sebelumnya (level activity) Menjabarkan elemen-elemen pada layarsebagai alat kontrol untukberinteraksi, seperti:- mengisi atau memilih data- mengubah data- menampilkan data dalam bentukteks, gambar, dll- mengirimkan perintah untuk melakukanaksi tertentu9
    • Pendahuluan Ketepatan dalam memilih device-basedcontrols (alat input) dan screen-basedcontrols (elemen layar) menentukankesuksesan sebuah sistem. Contoh:fingerprint untuk absensi Sebuah alat kontrol harus:- terlihat apa yang ia kerjakan- bekerja sebagaimana mestinya- bekerja sesuai dengan desain yangditentukan- disajikan secara standar dan konsisten- menampilkan dengan jelas bahwa elementersebut adalah alat kontrol 10
    • Contoh aturan kontrol yangditetapkan Microsft Elemen yang timbul dapat diakses(button) Elemen yang tersembunyi tidak dapatdiakses Elemen dengan berlatar belakang warnaputih dapat dibuka, diedit, dandipindahkan (textbox) Pada dasarnya, silahkan berkreasisebebasnya namun patuhi ketetapanyang sudah ditentukan agar sistemoptimal dan tidak mengurangi nilai UX 11
    • Operable Controls Fokus utamanya melakukan:- entry (textbox),- selection (dropdown,radio,etc),- changing (text),- editing value (textbox),- cause a command to be performed (button) Dikategorikan menjadi:- Button- Text entry/read-only- Selection- Combination entry/selection- Other specialized controls12
    • Button Berbentuk mirip persegi, persegipanjang, dan sejenisnya yang disertaidengan keterangan yang menjelaskan aksiapa yang akan dilakukan Labelnya bisa berupa teks, gambar, ataukeduanya13
    • Button Tujuannya:- melakukan aksi tertentu- menampilkan menu popup Tepat digunakan untuk:- Aksi yang mengarah kepada windowdan sering digunakan- Menampilkan window lain- Menampilkan menu dari sebuahoptions- Menentukan mode dari suatu nilai14
    • Button Command button, biasanya labelnya diisidengan teks saja Button bar / toolbar, biasanya labelnyadilengkapi teks dan gambar Symbol button, biasanya labelnyadilengkapi dengan gambar saja15
    • Button Ukuran- Gunakan ukuran yang relatif besar- Jaga kekonsistenan tinggi dan lebarnya- Khusus untuk label yang cukup panjangdiperbolehkan untuk lebih lebar Dalam sebuah window, jumlah sebuah button yangdisarankan 0-6 button16
    • Text Boxes Berisi teks yang dimasukkan olehpengguna melalui keyboard. Bisa juga berisi teks dengan kebutuhanuntuk ditampilkan saja Dilengkapi dengan caption untukmendeskripsikantujuannya17
    • Text Boxes Tujuannya:- Menampilkan, mengisi, mengubah informasitekstual- Menampilkan informasi yang untuk dibacasaja (read-only) Tepat digunakan untuk:- Data yang cakupannya besar- Data yang sulit untuk dikategorikan- Data yang memiliki panjang yang berbeda-beda- Ketika tidak memungkinkan menggunakanselection list18
    • Text Boxes Untuk texbox single field, posisicaption sebelah kiri dengan dibatasititik dua dengan texbox di sebelahkanannya Atau textbox single field, dapat dibuatposisi caption dan titik dua di atastextbox Untuk texbox multiple field posisicaption dan titik dua di atas beberapatextbox dengan19
    • Single field ke kananSingle field ke bawahMultiple field20
    • Text Boxes Ukuran- Ukuran suatu textbox disesuaikandengan perkiraan inputan yangbiasanya dimasukkan- Teks box harus cukupmemperlihatkan semua data (fixedlength)- Teks box harus cukupmemperlihatkan data yang penting(variable length)21
    • REVANDOLUMBANRAJASelection Controls [Radio Buttons] –Selection Controls [Palettes]22
    • Selection ControlSelection Control terdiri dari: Radio buttons Check boxes List boxes Drop-down/pop-up list boxes Palettes.23
    • Radio Buttons Radio button biasanya digunakan untukmenetapkan satu pilihan dari beberapapilihan yang saling eksklusif. Metode tampilan umum terdiri dari sebuahlingkaran yang terkait dengan setiapdeskripsi pilihan.24
    • Radio Buttons Keuntungan :◦ Mudah diakses◦ Mudah untuk membandingkan pilihan.◦ Disukai oleh pengguna. Kekurangan:◦ Jumlah pilihan terbatas Deskripsi pilihan :◦ Ditampilkan dalam satu baris teks.◦ Posisi deskripsi di sebelah kanan tombol dan dipisahkansetidaknya satu ruang dari tombol.◦ Bila pilihan tidak tersedia untuk seleksikondisional, tampilkan deskripsi pilihan berwarna abu-abuatau redup.25
    • Radio Buttons Contoh radio button conditional :26
    • Radio Buttons Size :◦ Menampilkan minimal dua pilihan dan maksimal delapan.27
    • Radio Buttons Structure:◦ Tombol berada di sebelah kiri deskripsi◦ Jika ruang vertikal di layar terbatas, orientasi tombolhorizontal.28
    • Radio Buttons Structure:◦ Memberikan pemisahan yang memadai antara pilihansehingga tombol yang berhubungan dengan deskripsitepat.◦ Menyertakan border untuk memperkuat hubungan antarpilihan29
    • Radio Buttons30
    • Radio Buttons Organization◦ Untuk pilihan yang tersusun dari atas ke bawah, mulaipengorderan dari atas.◦ Untuk pilihan yang tersusun dari kiri ke kanan, mulaipengorderan dari kiri.◦ Jika dalam kondisi tertentu pilihan tidak tersedia, dapatditampilkan dengan gradasi warna yang kurang terangdibandingkan pilihan yang lain.31
    • Radio Buttons Related control◦ Posisi setiap kontrol terkait dengan radio button berada disebelah kanan deskripsi pilihan.◦ Gunakan tanda panah (>) pada akhir deskripsi jikadeskripsi pilihan pada radio button juga bertindak sebagailabel32
    • Radio Buttons Caption◦ Radio Buttons dengan orientasi kolom33
    • Radio Buttons◦ Radio Buttons dengan orientasi horisontal34
    • Radio Buttons Keyboard Equivalentsmenentukan mnemonic denganmenggarisbawahi huruf dalamdeskripsi pilihan.35
    • Check Boxes Check box berbeda dari radio buttons, userdimungkinakan memilih lebih dari satu alternatif Setiap opsi/pilihan bertindak sebagai switch. Check box terdiri dari kotak persegi dan deskripsipilihan.36
    • Check Boxes Advantages◦ Mudah digunakan◦ Mudah untuk mengcompare pilihan Disadvantages◦ Penggunaan ruang layar cukup besar.◦ Jumlah pilihan Terbatas. Deskripsi Pilihan◦ Deskripsi pilihan sepenuhnya dieja jelas menggambarkannilai-nilai atau efek yang ditetapkan oleh check box.◦ Tampilkan dalam satu baris teks.◦ Posisi deskripsi di sebelah kanan check box.◦ Ketika pilihan tidak tersedia untuk seleksikondisional, tampilkan deskripsi pilihan dengan visualredup.37
    • Check BoxesContoh check box conditional :38
    • Check Boxes Sizeminimal satu pilihan, maksimaldelapan39
    • Check Boxes Structure◦ pengelompokan Check Boxes yang terkait.◦ Rata kiri Check Boxes dan deskripsi pilihan.40
    • Check Boxes Captions- Orientasi Kolom41
    • Check Boxes Captions- Orientasi Horizontal42
    • Check Boxes Keyboard Equivalentsmenentukan mnemonic denganmenggarisbawahi huruf dalamdeskripsi pilihan.43
    • Palletes Kontrol yang terdiri dari serangkaian alternatifgrafis. Pilihan itu sendiri bersifat deskriptif, yangterdiri dari warna, pola, atau gambar. Selain menjadi kontrol layar standar, palet jugadapat disajikan pada menu pull-down atau pop-upatau toolbar.44
    • Palletes45
    • Palletes Advantages:◦ Penggunaan gambar yang membantu pemahaman.◦ Mudah mencompare pilihan.◦ Penggunaan ruang/space layar lebih sedikit Disadvantages:◦ Jumlah pilihan yang ditampilkan terbatas◦ Membutuhkan keterampilan dan waktu untuk merancang representasigrafis yang bermakna dan atraktif. Graphical Representations◦ Memberikan arti yang akurat, dan jelas ilustrasi yang jelas◦ Buat gambar dengan ukuran yang sama◦ menguji ilustrasi sebelum menerapkannya.46
    • Palletes Size◦ kemampuan perangkat keras dalam menciptakan tampilanilustrasi yang jelas.◦ Keterbatasan dalam kemampuan orang untukmembedakan jenis representasi grafis secara akurat Organization◦ Untuk palet tersusun atas ke bawah, pengorderan dimulaidari atas◦ Untuk palet tersusun atas ke bawah, pengorderan dimulaidari atas◦ Jika dalam kondisi tertentu pilihan tidak tersedia, dapatditampilkan dengan gradasi warna yang kurang terangdibandingkan pilihan yang lain.47
    • Palletes48
    • Palletes Orientasi Kolom49
    • Palletes Orientasi Horizontal50
    • WIDIAJIE RAMADHANSelection Controls [List Boxes] –Combination Entry/Selection Controls [Combo Boxes]51
    • List Box List box adalah sebuah kotak persegipanjang yang ditampilkan secarapermanen yang berisikan daftar nilaiatau atribut dari suatu pilihan tunggalmaupun beragam / banyak. List box juga dapat dilakukan scrolluntuk melihat list yang sangat besar /panjang dan user dapat memilihdengan melakukan klik menggunakanmouse52
    • List Box Contoh :53
    • List BoxTujuan Penggunaan :- Untuk menampilkan koleksi itemtermasuk :1. Mutually exclusive options2. Non - Mutually exclusive options54
    • List BoxKelebihan / Keunggulan:- Jumlah Pilihan yang tanpa batas- Membantu mengingatkan penggunaakan pilihan apa saja yang tersedia- Kotak selalu terlihat55
    • List BoxKekurangan / Kelemahan:- Membutuhkan ruang layar : semakinbanyak menu / list maka semakinbanyak layar yang digunakan- Sering membutuhkan tindakanscrolling untuk dapat melihat semuapilihan yang ada56
    • List BoxDigunakan untuk keperluan:- Pemilihan nilai atau atribut- Untuk pemilihan yang bersifat :a. Mutually exclusive(hanya satu yang dapat dipilih)b. Non-mutually-exclusive(dapat satu atau lebih dari satuyang dapat dipilih).- Saat ruang layar tersedia57
    • List Box(Lanj) Digunakan untuk keperluan:- Untuk data dan pilihan yang :> Dapat diwakilkan dengan tekssecara baik> Tidak sering dipilih> Mudah diingat> Besar jumlahnya58
    • Pedoman Umum Membuat ListBox1. Tentukan Deskripsi akan isi darilist box> Harus jelas dan bermakna> Pemilihan harus dari kiri ke kanankolom> representasi grafis harus jelasmewakili pilihan59
    • Pedoman Umum Membuat ListBox2. List Size> Tidak ada batasan aktual dalamukuran> Tampilkan seluruh alternatif yangtersedia> Tidak lebih dari 40 page-downuntukmencari daftar60
    • Pedoman Umum Membuat ListBox3. Ukuran Box> Harus panjang, setidaknya cukup untuk 6 - 8 daftarpilihan tanpa scrollingKecuali jika :- terdapat kendala pada ukuran layar yang adamaka kotak dapat dikurangi ukuranyasehingga dapat menampilkan setidaknya 3daftar pilihan.> Harus cukup lebar untuk menampilkan pilihan yangmungkin terpanjang, jika tidak cukup maka pilihanyang panjang dapat dipersingkat denganmenggunakan tanda (…)61
    • Pedoman Umum Membuat ListBox3. Ukuran Box62
    • Pedoman Umum Membuat ListBox4. Organization> Pengurutan list harus logis dandapatdipahami sehingga list dapatdapat dicari dengan mudah63
    • Pedoman Umum Membuat ListBox5. Layout dan Separasi / pembatasBerikan warna solid untuk border pembatasdalam box agar memudahkan dalam membaca isidari list tersebut serta memberikan fungsi sebagaipembatas antara batas kiri maupun batas kananlist serta pembatas antara box dengan caption.64
    • Pedoman Umum Membuat ListBox5. Layout dan Separasi / pembatas (lanj) warna pembatas (border) harus sama denganwarna deskripsi yang dipilih Tinggalkan satu posisi karakter kosong diantarapilihan dengan border kiri Tinggalkan satu posisi karakter kosong diantaradeskripsi pilihan terpanjang di kanan border jikamemungkinkan65
    • Pedoman Umum Membuat ListBox6. CaptionsTampilan berupa teks / huruf penjelasketerangan yang penempatannyabiasanya disebelah kiri kotak (untukkasus tertentu diperbolehkanpenempatan berada di bawah atausisi kanan kotak)66
    • Pedoman Umum Membuat ListBox7. DisablingBila kotak sedang tidak diaktifkan , tampilkanisi list dalam kotak tersebut dengan warnaredup (misal abu-abu) untuk menandakanbahwa kotak tersebut sedang tidak difungsikan67
    • Pedoman Umum Membuat ListBox8. Pemilihan Metode dan Indikasi1. Pointing :Berikan highlight pada bagian yang sedangdisorot oleh pointer (sedang ditunjuk olehpointer)68
    • Pedoman Umum Membuat ListBox8. Pemilihan Metode dan Indikasi(lanj)2. SeleksiBerikan highlight pada bagian yang sedang diseleksi / dipilih. Highlight dapat berupa warnaterang.69
    • Pedoman Umum Membuat ListBox8. Pemilihan Metode dan Indikasi(lanj)3. AktivasiDibutuhkan penekanan tombol atau pemberianperintah untuk memilih item pada list70
    • Pedoman Umum Membuat ListBox9. Single-Selection List BoxesDigunakan dalam list box untuk memilih hanya 1 itemdari daftar tersebut, single selection ini dapatmenangani lebih banyak item list71
    • Extended and Multiple-Selection List Boxes multiple selection list box memungkinkan untukmemilih banyak item dari daftar yang panjang terdapat operasi non-exclusive yang miripdengan check box. intinya ini sebagai List box yang dapatmenangani sejumlah list item yang sangatbanyak secara efisien. Multiple selection ini dioptimalkan untukpemilihan item yang independen72
    • Pedoman Umum DesainExtended and Multiple-SelectionList Boxes1. Pilih Indikasi yang ada- Gunakan tanda check- Berikan tanda misal "X" atau cheklis untukmenandai pada seblah kiri list.73
    • Pedoman Umum DesainExtended and Multiple-SelectionList Boxes1. Pilih Indikasi yang ada (lanj)Kelompokan list yang sudah dipilih atau diberitanda pada satu tempat baru74
    • Pedoman Umum DesainExtended and Multiple-SelectionList Boxes1. Pilih Indikasi yang ada (lanj)- Gunakan tombol / keterangan pilih danbatalkan- Berikan keterangan akan jumlah dari listyang sudah dipilih / diberi tanda75
    • List View Controls List view control adalah special extended-selection dari list box yang menampilkan isidari masing-masing item yang terdiri dari icondan label. List view control dapat berisikan daftar is dari4 pandangan yang berbeda seperti : iconbesar, icon kecil, list, dan report.76
    • List View ControlsContoh :77
    • Drop-down/Pop-up List Boxesmerupakan bidang persegi panjang tunggaldengan tombol kecil pilihan disampingnya danberisikan daftar tersembunyi terkait pilihantersebut- Ketika tompol tersebut dipilih, maka akanmuncul box berukuran besar yang berisiikandaftar yang haris dipilih salah satu.- seleksi menggunakan mouse untuk memilihdan klik.- teks yang panjang tidak dapat dituliskan disini.78
    • Drop-down/Pop-up List BoxesDigunakan pada saat :Digunakan untuk memilih satu dari banyak daftar /list disaat terdapat keterbatasan ukuran layarKelebihan :- Jumlah pilihan yang tak terbatas- Mengingatkan user akan pilihan yangtersedia- Menghemat ukuran layar79
    • Drop-down/Pop-up List BoxesKekurangan :- Membutuhkan aksi tambahan untukmenampilkan daftar pilihan- Saat ditampilkan, semua pilihan mungkintidak langsung terlihat, dibutuhkan scrolling80
    • Drop-down/Pop-up List BoxesContoh :Figure 7.70 Drop-down list boxes. There are four unopened boxes.Figure 7.71 Drop-down list box opened for Country.81
    • Prompt ButtonDigunakan untuk memberikan isyarat berupavisual bahwa di dalam kotak tersebut terdapatsuatu isi / pilihan yang akan terlihat setelahtanda panah penunjuk kebawah tersebutditekanContoh :82
    • Combination Entry/SelectionControls 1. Spin Boxesadalah salah satu komponen antar muka grafis yangdigunakan untuk mengatur suatu nilaipeubah, biasanya bertipe numerik, denganmenambahkan atau mengurangkannya dengan suatunilai tertentu. Dalam spin box nilai maksimum danminimum peubah harus dinyatakan denganjelas, supaya tombol ini tidak memutar (spining) terusmenerus.Spin boxes.83
    • Combination Entry/SelectionControls 2. Combo BoxAdalah sebuah kotak persegi panjang yangmemiliki isididalamnya dan kotak pada isi (list)merupakan kotakberbentuk persegi panjang yang lebih besar(menyerupai dropdown list box) .84
    • Combination Entry/SelectionControls 2. Combo Box (lanj)85
    • Combination Entry/SelectionControls 2. Combo Box (lanj)Kegunaan :Combo Box berguna untuk memilih objek atauatribut pengaturan yang mutually exclusive.Keuntungan : - Jumlah entri dan piilihan yang tanpa batas- Mengingatkan user akan pilihan yang ada- FlexibleKerugian : - Memakan banyak tempat- Semua pilihan dalam list box tidak selaluterlihat,harus menggunakan scrolling86
    • PANDI SIANTURICombination Entry/Selection Controls [Drop Down] –Presentation Controls [Column Headings]87
    • Drop-down/Pop-up ComboBoxes Deskripsi- Sebuah kotak teks persegi panjang dengan tombol kecil disampingnya.- Tombol memberikan isyarat visual bahwa kotak tekstersebut terkait tersedia pilihan yang tersembunyi. TujuanUntuk mengentri atau seleksi dari daftar pilihan dalam kotakteks sesuai kebutuhan. Keuntungan- Tidak terbatasnya jumlah entri dan pilihan.- Mengingatkan pengguna akan pilihan yang tersedia.- Fleksibel, memungkinkan pemilihan atau entri pengetikan.- Entri tidak terbatas88
    • Drop-down/Pop-up ComboBoxes Kekurangan- Butuh langkah tambahan untuk menampilkan daftar pilihan.- Bila ditampilkan, semua pilihan kotak mungkin tidak selaluterlihat, membutuhkan scroll.- Pengguna mungkin mengalami kesulitan dalam mengingat apayang harus diketik.- Isi Daftar dapat berubah, sehingga sulit untuk menemukan item.- Daftar dapat dipesan dengan cara yang tak terduga, sehingga sulituntuk menemukan item. Penggunaan yang benar- Untuk memasuki atau memilih objek atau nilai-nilai atau atributpengaturan.- Untuk informasi yang saling eksklusif (hanya satu yang dapatdimasukkan atau dipilih).- Ketika pengguna mungkin merasa praktis untuk memilih jenisinformasi dari pada memilih jenis informasi dari daftar.89
    • Drop-down/Pop-up ComboBoxes- Pengguna dapat mengingat dan mengetikkan informasi lebih cepatdari pada memilih dari daftar.- Menyarankan pengguna untuk mengingat pilihan yangtersedia.- Data harus dimasukkan karena tidak terdapat dalam daftar pilihan.- Ruang layar terbatas.- Untuk data dan pilihan yang:• Terbaik diwakili tekstual.• Agak akrab atau dikenal.• Sering berubah.• besar jumlahnya.• Variabel atau panjang daftar yang tetap.90
    • Drop-down combo box, tertutup.Drop-down combo box, terbuka.Drop-down combo box, tertutup.91
    • Slider Keterangan- Sebuah skala memperlihatkan tingkatankualitas pada sebuah kontinum.- Termasuk sebagai berikut:• Sebuah poros atau bar.• Sebuah rentang nilai dengan label yangsesuai.• Sebuah kelompok yang menunjukkanpengaturan relatif melalui lokasinya diporos.• Opsional, sepasang tombol untukmemungkinkan gerakan tambahan sliderkelompok.• Opsional, kotak teks untuk mengetikatau menampilkan nilai yangpasti. 92
    • Slider• Opsional, posisi detent untuk nilai-nilai khusus.- Dapat berorientasi vertikal maupun horizontal.- Dipilih dengan menggunakan mouse untuk:• Scroll di skala sampai nilai yang diinginkan tercapai.• Tombol “point at” di salah satu ujung skala danmengklik untuk mengubah nilai. Tujuan:- Untuk membuat pengaturan ketika penyesuaian kualitatifterus menerus dapat diterima, makaberguna untuk melihat nilai saat ini relatif terhadap rentangnilai yang mungkin. Keuntungan:- Representasi spasial pengaturan relatif.- Visual khas.93
    • Slider Kekurangan:- Tidak tepat sebagai indikasi alfanumerik.- Membutuhkan ruang layar.- Biasanya lebih kompleks daripada kontrol lainnya. Penggunaan yang benar:- Untuk mengatur atribut.- Untuk pilihan saling eksklusif.- Ketika sebuah objek memiliki rentang yang terbatasdari pengaturan yang mungkin.- Ketika rentang nilai adalah kontinu.- Bila pilihan dapat meningkatkan atau menurunkandalam beberapa hal yang dikenal, diprediksi, danmudah dipahami.- Ketika representasi ruang akan meningkatkanpemahaman dan penafsiran.- Bila menggunakan slider memberikan akurasi yangmemadai.94
    • Slider95
    • Tabs Keterangan:- Sebuah jendela yang berisi pembagi tab yangmembuat halaman atau bagian. Tujuan:- Untuk menyajikan informasi yang dapat secara logisdiatur dalam halaman atau bagian dalam jendela yangsama. Keuntungan:- Menyerupai berbasis kertas yang sama.- Secara visual terlihat berbeda.- Efektif mengatur tidak terjadinya pengulangan daninformasi yang berhubungan. Kekurangan:- Secara visual terlihat rumit.96
    • Tabs Proper penggunaan:- Untuk menyajikan informasi yang berlainan, secaralogis terstruktur, memiliki keterkaitan.- Untuk menyajikan pilihan pengaturan yang bisaditerapkan pada suatu objek.- Ketika label tab yang pendek bisa menjelaskan isi tab.- Ketika urutan penggunaan informasi bervariasi.97
    • Tabs from Microsoft Windows.98
    • Date Picker Keterangan:- Sebuah daftar drop-down box yang menampilkankalender 1 bulan di list box drop-down.- Bulan yang ditampilkan dapat diubah melalui tombolperintah menekan dengan kiri dan kanan menunjukpanah.- Sebuah tanggal untuk list box dapat dipilih darikalender drop-down. Tujuan:- Untuk memilih tanggal dalam kotak daftar drop-down. Keuntungan:- Menyediakan representasi dari kalender fisik.- Pencatatan kalender dalam cara yang diprediksi.- Secara visual terlihat berbeda.99
    • Date Picker Kekurangan:- Membutuhkan langkah tambahan untuk menampilkankalender.- Bila ditampilkan, semua pilihan bulan tidakterlihat, membutuhkan bentuk scrolling untukmengakses pilihan yang diinginkan. Proper penggunaan:- Untuk memilih dan menampilkan satu tanggal dalamjarak dekat bulanan ke default bulan disajikan padakotak daftar drop-down.A date-picker control.100
    • Tree View Keterangan:- Sebuah kotak control list khusus yangmenampilkan satu set objek sebagai kerangkateridentasi.- Tercakup, opsional, tombol yang membuka danmenutup garis besarnya.• Sebuah tombol bertuliskan tanda tambah(+)• Sebuah tombol bertuliskan tanda kurang (-)- Elemen yang opsional dapat ditampilkanadalah:• Ikon.• Graphics, seperti kotak centang.• Garis untuk menggambarkan hubunganhirarki. Tujuan dan penggunaan yang tepat: 101
    • A tree view control.102
    • Scroll Bars Keterangan:- Sebuah persegi panjang yang terdiri dari:• Sebuah daerah scroll.• Sebuah kotak slider di dalamnya.• Tombol tanda panah atau anchor di kedua ujung.- Tersedia jika diperlukan di jendela primer dansekunder untuk melakukan pengendalian.- Dapat berorientasi vertikal atau horizontal di tepijendela atau halaman. Tujuan:- Untuk mencari dan melihat informasi yangmembutuhkan lebih banyak ruang daripada tampilanyang diberikan. Keuntungan:- Memungkinkan melihat data ukuran terbatas.103
    • Scroll Bars Kekurangan:- Membutuhkan ruang layar.- Bisa merepotkan untuk dioperasikan. Tepat digunakan:- Ketika informasi yang tersedia lebih banyak daripadaruang jendela untuk menampilkannya.- Jangan gunakan untuk menetapkan nilai.Scroll bar.104
    • Static Text Fields Keterangan:- Hanya bacaan informasi tekstual. Tujuan:- Untuk mengidentifikasi kontrol denganmenampilkan caption kontrol.- Untuk memperjelas layar dengan memberikanpetunjuk atau informasi .- Untuk menyajikan informasi deskriptif. Proper penggunaan:- Untuk menampilkan teks keterangan kontrol.- Untuk menampilkan informasi instruksional.- Untuk menampilkan informasi deskriptif.105
    • Aturan Pembuatan Static TextFields Sertakan titik dua (:) sebagai bagian darijudul. Sertakan mnemonic untuk akseskeyboard. Ketika kontrol terkaitdinonaktifkan, menampilkannya redup. Ikuti semua petunjuk yang disajikanuntuk penyajian keterangan dan layout. Tampilan dalam gaya font yang unik dankonsisten untuk pengenalan yang mudahdan sebagai pembedaan.106
    • Static text field.107
    • Group Boxes Keterangan:- Sebuah bingkai persegi panjang yangmengelilingi sebuah kontrol atau kelompokkontrol.- Sebuah keterangan opsional dapat dimasukkandalam pojok kiri atas bingkai. Tujuan:- Untuk visual menghubungkan elemen kontrol.- Untuk visual menghubungkan sekelompokkontrol terkait. Penggunaan yang benar:- Untuk memberikan batas sekitar radio buttonatau check box.- Untuk memberikan batas sekitar dua atau lebihkontrol terkait fungsional.108
    • Group Boxes Pedoman:- Label atau heading:• Biasanya, menggunakan frase nominaatau kata benda untuk label atauheading.• Memberikan label singkat atau heading,sebaiknya satu atau dua kata.• Kaitkan label atau konten headingterhadap isi kotak kelompok.• Mendayagunakan huruf pertama darisetiap kata yang signifikan.• Jangan menyertakan dan mengakhirititik dua (:).- Ikuti semua petunjuk yang disajikan untukkontrol dan perbatasan bagian.109
    • Group Box.110
    • Column Headings Keterangan:- Hanya Informasi tekstual yang berfungsi sebagaisebuah heading di atas kolom teks atau angka.- Dapat dibagi menjadi dua bagian atau lebih. Tujuan:- Untuk mengidentifikasi kolom informasi dalam sebuahtabel. Proper penggunaan:- Untuk menampilkan heading di atas kolom informasidalam sebuah tabel. Pedoman:- Heading:• Memberikan sebuah heading singkat.• Dapat mencakup teks dan gambar grafis.• Mendayagunakan huruf pertama dari setiap kata yangsignifikan.111
    • Column Headings • Jangan menyertakan titik dua (:).- Lebar kolom harus sesuai dengan ukuran rata-rataentri kolom.- Tidak mendukung akses keyboard.Column heading Column part.112
    • FITHRANTOFATURAKHMANPresentation Controls [Tool Tips] –Selecting Proper Controls [Choosing a Control Form]113
    • TOOL TIPDeskripsi:Sebuah jendela pop-up kecil berisi teks deskriptif yangmuncul ketika pointer digerakkan di atas kontrol atauelemen .Tujuan :Untuk memberikan informasi deskriptif tentang suatukontrol atau elemen layar.Contoh ToolTip114
    • TOOL TIPKeuntungan:-Mengidentifikasi kontrol jika tidak teridentifikasi.-Mengurangi kekacauan layar mungkin disebabkanoleh keterangan kontrol dan deskriptifKerugian :- Tidak jelas, karena harus di telaah- Penampilan yang sengaja dapat menggangu115
    • BALLON TIPDeskripsi:Sebuah jendela pop-up kecil yang berisi informasidalam balon kata. Letaknya berdekatan dengan itematau elemen yang diterapkan.Tujuan:Untuk memberikan informasi deskriptif atau statustambahan tentang elemen layar.Contoh Balloon Tip ------>116
    • BALLON TIPKeuntungan:- Menyediakan pengingat berguna dan informasistatus.Kerugian:- Dapat merusak penampilan jika digunakanberlebihan .Penggunaan yang ideal:-Gunakan sebagai pengingat informasi.117
    • PROGRESS INDICATORDeskripsi:Sebuah persegi panjang yang mengisi sebagai suatuproses yang sedang dilakukan, yang menunjukanpersentasi proses yang telah selesaiTujuan:- memberikan feedback terhadap proses yang telahberjalanContoh progress Indicator --- ->118
    • Sample BoxDeskripsi:Sebuah kotak menggambarkan apa yang akanmuncul di layar berdasarkan parameter yang dipilih.Tujuan:Untuk memberikan representasi dari isi layar yangsebenarnya berdasarkan parameter yang dipilih.-Contoh Sample Box --------- >119
    • Scrolling TickersDeskripsi:Teks yang secara horizontal tampil melalui jendelacontainer.Tujuan:- Untuk memberikan informasi secara sekilas.-Contoh Scrolling Tickers---- >120
    • Seleksi Kontrol yang TepatSurvei terlebih dahulu beberapa studi penetlitiantentang seleksi kontrol.Hasil penelitian tersebut dimasukan menjadi pedomanseperti yang dibahas sebelumnya.Kriteria dalam pemilihan kontrol di ringkas, danbeberapa panduan seleksi disajikan.121
    • Memilih Tipe kontrolUntuk data yang sudah dikenal, gunakan tipe kontrolyang memiliki keystrokes sedikit.Untuk data yang tidak dikenal dan rentan terhadapkesalahan, gunakan teknik seleksi.Aided vs Unaided Entry- Menyediakan entri bantuan bila memungkinkan.- Mengurangi setiap penekanan tombol ekstra yangtidak perlu.- Memberikan sinyal pemberitahuan bahwaautocomplete telah dilakukan.122
    • Comparison of GUI ControlsDirect Manipulation1. Drag and dropitem di seret ke lokasi item yang diinginkan2. Drag and drop beetwenitem diseret ke lokasi antara dua item yangdiinginkan.Selection1. Iconikon diposisikan antara setiap pasangan item.2. Radio ButtonsItem yang disajikan dalam bentuk matrix123
    • Comparison of GUI Controls (continue)Selection (continue)3. Drop downketika dropdown aktif maka item yang terdapatpadalokasi tersebut terpilih.Entry1. One entry areakolom teks tunggal2. Four entry area4 kolom teks.124
    • Kriteria dalam pemilihan kontrol1. Data consideration2. Task consideration3. User consideration4. Display consideration125
    • Kontrol seperti apa yang harus dipilihJohn esgard et all, 1995Keterangan lebih lanjut terdapat pada buku galitz hal 504-506Task Best Control If Screen SpaceConstraint ExistMutually exclusive Radio button DropdownNot mutually exclusive Check boxes Multiple-selection boxSelect or type a valuetext entry fieldRadio button withotherDropdown /combo boxSetting a value withina rangeSpin button Text box126
    • SEKIAN..TERIMA KASIH..Semoga bermanfaat..127