SlideShare a Scribd company logo
1 of 29
Interface Metaphors dan
                          Model Konseptual




Interface Metaphors              1
Pendahuluan


           ∗ Istilah Metafora umumnya dihubungkan dengan
             penggunaan bahasa.
           ∗ Saat kita ingin menyampaikan suatu konsep abstrak
             dalam bentuk yang umum dan mudah dipahami,
             sering kita terpaksa menggunakan pernyataan
             metafora (kiasan)




Interface Metaphors                  2
Pendahuluan
∗ Dalam perancangan antarmuka, kita juga melihat bagaimana
  metafora memegang peranan penting.
∗ Obyek pada layar, tipe interaksi yang dilakukan, cara sistem
  menanggapi, nama yang diberikan pada perintah, cenderung
  menggunakan istilah yang umum.
∗ Desktops, icon, menu, window, cutting, pasting, copying,
  merupakan bagian dari metafora antarmuka virtual.




Interface Metaphors             3
Metafora Verbal
    ∗ Saat berhadapan dengan suatu teknologi baru seperti
      komputer, pertama-tama orang akan membandingkan dengan
      mesin yang yang sudah diakrabi secara metafora.
    ∗ Contoh saat orang baru pertama kali menggunakan pengolah
      dokumen, maka yang pertama muncul dibenaknya adalah
      seberapa besar kemiripannya dengan mesin ketik.
    ∗ Dengan mengaktifkan skema tentang mesin ketik, maka mereka
      akan lebih siap untuk melakukan interpretasi dan prediksi
      tentang bagaimana pengolah dokumen berfungsi.
    ∗ Dengan melihat bahwa komputer mempunyai keyboard maka
      dapat ditarik kesimpulan bahwa komputer bekerja seperti
      tombol pada mesin ketik

Interface Metaphors             4
Metafora Verbal

∗ Link ini merupakan landasan dasar tempat pengguna membangun
  model mental tentang sistem komputer.
∗ Pengetahuan tentang elemen-elemen dan relasinya satu dengan
  yang lain dalam suatu domain yang familiar akan dipetakan ke
  elemen-elemen dan relasinya dalam domain yang belum dikenal.
∗ Elemen-elemen meliputi keyboard, spasi, dan tombol return.
∗ Relasi antar elemen meliputi “hanya satu tombol karakter dapat
  ditekan pada satu saat”, dan “penekanan tombol karakter akan
  menghasilkan satu huruf akan ditampilkan pada monitor”


 Interface Metaphors            5
Metafora Verbal


           ∗ Efek perubahan fungsi tersebut serta pengenalan
             cara baru, sering menyebabkan masalah pada
             pengguna pemula, karena bertentangan dengan
             harapan mereka tentang elemen dan relasinya.
           ∗ Namun perlu dicatat bahwa sekali pengguna
             menyadari ketidakcocokan dan perbedaan antara
             sistem yang lama dengan yang baru, maka mereka
             akan dapat membangun model mental yang baru.

Interface Metaphors                 6
Virtual Interface Methapors

     ∗ Salah satu perusahaan komputer yang pertama kali
       menyadari potensi yang sangat besar dalam perancangan
       antarmuka agar lebih mirip dengan kondisi sebenarnya yang
       telah familiar adalah Xerox.
     ∗ Keluarannya adalah antarmuka pengguna “Star”, dengan
       metafora antarmuka untuk membuat pasangan elektronis
       dari obyek fisik dalam kantor, yang berupa icon pada layar
       monitor.


Interface Metaphors               7
Antarmuka Berbasis Icon


           ∗ Selain menjadi entitas abstrak, dengan nama
             sembarang, file akan ditransformasikan kedalam
             representasi gambar, sehingga setiap orang dapat
             dengan mudah mengidentifikasi dan memahaminya.
           ∗ Dengan mempunyai pemahaman dasar ini akan
             terbangun suatu dasar dimana pengguna akan
             mengetahui bagaimana berinteraksi dengan icon.


Interface Metaphors                 8
Antarmuka Berbasis Icon


           ∗ Sejalan dengan penggunaan simbol-simbol dan tanda-
             tanda pada kehidupan sehari-hari, antarmukapun
             sering memanfaatkan simbol-simbol dan tanda-tanda
             ini untuk memberitahu pengguna akan kemampuan
             dan fasilitas yang dimiliki suatu program aplikasi.
           ∗ Ragam dialog yang banyak menggunakan simbol-
             simbol dan tanda-tanda untuk menunjukkan suatu
             aktifitas tertentu disebut dengan antarmuka berbasis
             ikon (icon-based user interface).

Interface Metaphors                  9
Antarmuka Berbasis Icon

∗ Secara teknis, antarmuka berbasis ikon umumnya merupakan
  variasi dari antarmuka berbasis menu.
∗ Perbedaannya terletak pada cara penyajian pilihan.
∗ Pada sistem menu, pilihan aktifitas dinyatakan secara tekstual,
  sementara pada antarmuka berbasis ikon, pilihan aktifitas
  dinyatakan dengan suatu tanda atau simbol yang disebut pictogram
  atau ikon.
∗ Disebukan sebagai metafora antarmuka virtual




 Interface Metaphors              10
Metafora Komposit

∗ Masalah dalam perancangan dengan pendekatan “metafora
  sebagai model” adalah bagaimana menggabungkan fungsi-fungsi
  tambahan yang bukan merupakan bagian dari metafora, namun
  akan membuat aplikasi menjadi lebih kuat (powerfull).
∗ Permasalahan di atas dapat diatasi dengan mengembangkan
  metafora komposit pada antarmuka (Carrol, 1988).
∗ Metafora desktop dapat digabungkan dengan metafora yang lain
  agar pengguna lebih fleksibel dalam menggunakan berbagai
  tindakan berbasis komputer.
∗ Salah satu contoh adalah scroll bar.

 Interface Metaphors           11
Metafora Komposit


           ∗ Obyek seperti scroll bar tidak pernah ada dalam
             kehidupan nyata.
           ∗ Tetapi secara metafora dirancang seperti konsep
             menggulung (scroll), jadi seakan-akan dapat
             menggulung dokumen ke atas (scroll up) atau
             menggulung ke bawah (scroll down).




Interface Metaphors                  12
Metafora Komposit

    ∗ Contoh lain dari metafora antarmuka yang berbasis pada
      obyek yang dikombinasikan dengan metafora desktop,
      adalah menu dan window.
    ∗ Keduanya mempunyai basis metafora sendiri yang berbeda
      dari konsep suatu kantor atau desk.
    ∗ Contoh lain adalah fungsi cut & copy yang digunakan untuk
      memindah dan menyalin teks yang berdasarkan pada proses
      yang digunakan dalam layout halaman pada percetakan.



Interface Metaphors              13
Ragam Dialog



Cara yang digunakan untuk mengorganisasikan
     berbagai teknik dialog disebut dengan
        ragam dialog (dialogue style).




                    14
Kategori Ragam Dialog Interaktif - Dialog
      berbasis perintah tunggal
∗ Command Line Language: Merupakan ragam yang paling
  konvensional.
∗ Dialog berbasis perintah tunggal adalah dialog yang
  bersifat inisiatif oleh pengguna
∗ Bahasa perintah harus dirancang sedemikian rupa
  sehingga mereka mempunyai sifat alamiah, yakni mudah
  dipelajari dan diingat oleh kebanyakan pengguna.




                          15
Kategori Ragam Dialog Interaktif - Dialog
       berbasis perintah tunggal


  ∗ Beberapa contoh sederhana yang bisa kita lihat
    antara lain adalah perintah-perintah yang dimiliki
    oleh DOS (Disk Operating System).
  ∗ Terbagi atas perintah dalam (internal command)
    yang tidak memerlukan suatu berkas .EXE atau
    .COM tertentu (ex:DIR, CLS) dan perintah luar
    (external command) yang memerlukan suatu
    berkas .EXE atau .COM tertentu (ex.FORMAT,
    DELTREE).
                            16
Kategori Ragam Dialog Interaktif - Dialog
       berbasis perintah tunggal


  ∗ Keuntungan dan kerugian penggunaan dialog
    berbasis perintah tunggal




                          17
Kategori Ragam Dialog Interaktif - Dialog
     berbasis bahasa pemrogaman
∗   Dalam keadaan tertentu, penggunaan dialog
    berbasis perintah tunggal sering tidak
    memadai, khususnya ketika pengguna harus
    memberikan sederetan perintah-perintah
    yang sama setiap kali ia menjalankan program
    aplikasi tersebut.
∗   Dialog berbasis bahasa pemrograman
    merupakan ragam dialog yang memungkinkan
    pengguna untuk mengemas sejumlah perintah
    ke dalam suatu berkas yan sering disebut
    dengan batch file. Contoh dBASE
                       18
Kategori Ragam Dialog Interaktif -
    Antarmuka berbasis bahasa alami


∗    Film fiksi ilmiah => komunikasi antara manusia
     dengan komputer lewat suatu bahasa ucapan yang
     secara jelas memanfaatkan bahasa alami (natural
     language).




                          19
Kategori Ragam Dialog Interaktif -
   Antarmuka berbasis bahasa alami
∗ Dengan melihat pada perbedaan bahasa yang digunakan
  oleh manusia dan komputer, maka sebuah sistem yang
  mengimplementasikan dialog berbasis bahasa alami
  perlu mempunyai sebuah sistem penterjemah yang
  dapat menterjemahkan suatu kalimat pada dua arah.
  ∗ Ketika manusia memberikan instruksi, sistem penterjemah harus
    menerjemahkan instruksi tersebut ke dalam format instruksi lain
    yang dapat dimengerti oleh komputer.
  ∗ Sebaliknya, ketika komputer akan memberikan jawaban, sistem
    penterjemah harus mampu menterjemahkan format instruksi
    komputer menjadi pesan yang dimengerti oleh manusia.
  ∗ Dari sisi pengguna, tentunya ia menginginkan keluwesan yang
    sebesar-besarnya dalam memberikan instruksi kepada komputer.
    Tetapi, dari sisi perancang sistem, semakin luwes bahasa alami
    yang dikehendaki oleh pengguna, semakin rumit pula sistem
    penterjemah yang harus disiapkan.
                                20
Kategori Ragam Dialog Interaktif –
           Sistem Menu


∗ Sistem menu merupakan pilihan yang tepat untuk
  menunjukkan kemampuan dan fasilitas yang dimiliki
  oleh sebuah program aplikasi kepada pengguna.
∗ Menu adalah daftar sejumlah pilihan dalam jumlah
  terbatas, yang biasanya berupa suatu kalimat atau
  kumpulan beberapa kata.
∗ Ditinjau dari teknik penampilan pilihan-pilihan pada
  sebuah sistem menu, dikenal dua jenis sistem menu:
  ∗ sistem menu datar
  ∗ sistem menu tarik (pulldown) yang berbasis pada struktur
    hirarki pilihan (struktur pohon pilihan).
                               21
Kategori Ragam Dialog Interaktif –
           Sistem Menu Datar


∗    Dalam sistem menu datar, kemampuan dan fasilitas
     yang dimiliki oleh suatu program aplikasi akan
     ditampilkan secara lengkap, dan biasanya
     menggunakan kalimat-kalimat yang cukup panjang.




                          22
Kategori Ragam Dialog Interaktif –
           Sistem Menu Tarik


∗    Sebuah menu tarik pada dasarnya adalah sistem menu
     yang pilihan-pilihannya dikelompokkan menurut
     menurut kategori tertentu atau menurut cara tertentu
     sehingga mereka membentuk semacam hirarki pilihan.
∗    Pada hirarki paling tinggi, pilihan-pilihan itu disebut
     dengan pilihan/menu utama. Sebagian atau semua
     pilihan/menu utama dapat mempunyai salah satu atau
     lebih subpilihan/submenu. Sebuah subpilihan/submenu
     dari suatu pilihan/menu utama dapat mempunyai satu
     atau labih sub-subpilihan, dan seterusnya. Struktur ini
     membentuk semacam struktur pohon.

                             23
Kategori Ragam Dialog Interaktif –
    Dialog berbasis pengisian borang


∗        Teknik dialog pengisian borang (form-filling dialogue)
         merupakan suatu penerapan langsung dari aktifitas
         pengisian borang dalam kehidupan sehari-hari dimana
         pengguna akan dihadapkan pada suatu bentuk borang
         yang ada di layar komputer yang mereka gunakan.
∗        Perlman membuat perbedaan antara menu dan
         borang.
     ∗      menu adalah dialog yang menampilkan sejumlah alternatif
            pilihan yang pilihan-pilihan itu dapat dipilih pengguna dengan
            cara tertentu pada setiap daur aktifitas.
     ∗      borang adalah tampilan dari sejumlah persyaratan
            (requirement) yang menampilkan sejumlah opsion dan
            berbagai nilai para meter yang telah ditentukan dan
            dintegrasikan ke dalam sebuah tampilan pada layar.

                                     24
Kategori Ragam Dialog Interaktif –
        Antarmuka berbasis ikon


∗    Antarmuka sering memanfaatkan simbol-
     simbol dan tanda-tanda ini untuk
     memberitahukan pengguna akan kemampuan
     dan fasilitas yang dimiliki oleh suatu program
     aplikasi.
∗    Ragam dialog yang banyak menggunakan
     simbol-simbol dan tanda-tanda untuk
     menunjukkan suatu aktifitas tertentu disebut
     dengan antarmuka berbasis ikon (icon-based
     user interface) .
                          25
Kategori Ragam Dialog Interaktif –
     Antarmuka berbasis ikon


∗ Secara teknis, antarmuka berbasis ikon boleh
  dikatakan merupakan variasi dari antarmuka
  berbasis menu.
  ∗ setiap ikon menunjukkan satu aktifitas sementara pada
    system menu, sebuah menu juga menunjukkan satu
    aktifitas.
  ∗ Perbedaannya terletak pada cara penyajian pilihan itu.
    Pada system menu, pilihan aktifitas dinyatakan secara
    tekstual, sementara pada antarmuka berbasis ikon,
    pilihan aktifitas dinyatakan dengan suatu tanda atau
    symbol yang disebut pictogram atau ikon.

                            26
Kategori Ragam Dialog Interaktif –
          Sistem Penjendelaan


∗    Secara umum yang disebut dengan jendela (window)
     adalah bagian dari layar yang digunakan untuk
     menampilkan suatu informasi. Informasi disini dapat
     berupa informasi tekstual maupun grafis. Untuk
     menunjukkan daerah yang digunakan untuk
     menampilkan suatu informasi, biasanya daerah yang
     umumnya berupa persegi panjang dibatasi dengan
     semacam garis pembatas dengan ketebalan tertentu.
∗    Sistem penjendelaan adalah sistem antarmuka yang
     memungkinkan pengguna untuk menampilkan berbagai
     informasi baik sendiri-sendiri maupun secara bersama-
     sama ke dalam bagian–bagian layar yang tidak saling
     mempengaruhi.

                            27
Kategori Ragam Dialog Interaktif –
          Manipulasi Langsung


∗ Karakteristik yang sangat penting dari ragam
  dialog ini adalah adanya penyajian langsung suatu
  aktifitas oleh sistem kepada pengguna sehingga
  aktifitas itu akan dikerjakan oleh sistem komputer
  ketika pengguna memberikan instruksi lewat
  manipulasi langsung dari semacam kenyataan
  maya (virtual reality) yang terpampang lewat
  tampilan yang muncul di layar.

                         28
Kategori Ragam Dialog Interaktif –
Antarmuka Berbasis Interaksi Grafis


∗   Secara umum cukup sulit membedakan antarmuka
    berbasis manipulasi langsung dengan antarmuka
    berbasis interaksi grafis.
∗   Pada program-program yang berkemampuan
    hypertext, program akan memberitahu pengguna
    bahwa pengguna dapat melakukan links ke teks
    atau dokumen yang lain. Ketika kursor mouse
    berada pada teks yang yang mempunyai link ke
    teks lain, maka bentuk kursor biasanya berubah
    (umumnya berubah menjadi bentuk tangan
    menunjuk).
                        29

More Related Content

What's hot

Teori bahasa-dan-otomata
Teori bahasa-dan-otomataTeori bahasa-dan-otomata
Teori bahasa-dan-otomataBanta Cut
 
Analisis Leksikal - P4
Analisis Leksikal - P4Analisis Leksikal - P4
Analisis Leksikal - P4ahmad haidaroh
 
Tugas mandiri struktur data
Tugas mandiri struktur dataTugas mandiri struktur data
Tugas mandiri struktur dataAsep Jaenudin
 
Kerangka kerja interaksi
Kerangka kerja interaksiKerangka kerja interaksi
Kerangka kerja interaksiAriev Kusuma
 
Rpl 10-perancangan user interface
Rpl 10-perancangan user interfaceRpl 10-perancangan user interface
Rpl 10-perancangan user interfacef' yagami
 
Jenis dan proses interupsi
Jenis dan proses interupsiJenis dan proses interupsi
Jenis dan proses interupsilaurensius08
 
Proses di Sistem Operasi
Proses di Sistem OperasiProses di Sistem Operasi
Proses di Sistem Operasieddie Ismantoe
 
Teori bahasa formal dan Otomata
Teori bahasa formal dan OtomataTeori bahasa formal dan Otomata
Teori bahasa formal dan OtomataRisal Fahmi
 
Algoritma Pemrograman (Flowchart) - Logika dan Algoritma
Algoritma Pemrograman (Flowchart) - Logika dan AlgoritmaAlgoritma Pemrograman (Flowchart) - Logika dan Algoritma
Algoritma Pemrograman (Flowchart) - Logika dan AlgoritmaAri Septiawan
 
Evolusi Antarmuka Komputer
Evolusi Antarmuka KomputerEvolusi Antarmuka Komputer
Evolusi Antarmuka KomputerAndhi Pratama
 
Intermediate code kode antara
Intermediate code   kode antaraIntermediate code   kode antara
Intermediate code kode antaraGunawan Manalu
 
materi imk Menu
materi imk Menumateri imk Menu
materi imk MenuKukuh Aji
 
Interaksi manusia dan komputer
Interaksi manusia dan komputerInteraksi manusia dan komputer
Interaksi manusia dan komputerdonasiilmu
 
Ms excel presentasi
Ms excel presentasiMs excel presentasi
Ms excel presentasiErvi Ervi
 
Pemrograman C++ - Fungsi dan Prosedur
Pemrograman C++ - Fungsi dan ProsedurPemrograman C++ - Fungsi dan Prosedur
Pemrograman C++ - Fungsi dan ProsedurKuliahKita
 

What's hot (20)

Teori bahasa-dan-otomata
Teori bahasa-dan-otomataTeori bahasa-dan-otomata
Teori bahasa-dan-otomata
 
Algoritma penjadwalan proses
Algoritma penjadwalan prosesAlgoritma penjadwalan proses
Algoritma penjadwalan proses
 
Analisis Leksikal - P4
Analisis Leksikal - P4Analisis Leksikal - P4
Analisis Leksikal - P4
 
Tugas mandiri struktur data
Tugas mandiri struktur dataTugas mandiri struktur data
Tugas mandiri struktur data
 
Normalisasi Basis Data
Normalisasi Basis DataNormalisasi Basis Data
Normalisasi Basis Data
 
Kerangka kerja interaksi
Kerangka kerja interaksiKerangka kerja interaksi
Kerangka kerja interaksi
 
Rpl 10-perancangan user interface
Rpl 10-perancangan user interfaceRpl 10-perancangan user interface
Rpl 10-perancangan user interface
 
Jenis dan proses interupsi
Jenis dan proses interupsiJenis dan proses interupsi
Jenis dan proses interupsi
 
Proses di Sistem Operasi
Proses di Sistem OperasiProses di Sistem Operasi
Proses di Sistem Operasi
 
Teori bahasa formal dan Otomata
Teori bahasa formal dan OtomataTeori bahasa formal dan Otomata
Teori bahasa formal dan Otomata
 
Algoritma Pemrograman (Flowchart) - Logika dan Algoritma
Algoritma Pemrograman (Flowchart) - Logika dan AlgoritmaAlgoritma Pemrograman (Flowchart) - Logika dan Algoritma
Algoritma Pemrograman (Flowchart) - Logika dan Algoritma
 
Evolusi Antarmuka Komputer
Evolusi Antarmuka KomputerEvolusi Antarmuka Komputer
Evolusi Antarmuka Komputer
 
Intermediate code kode antara
Intermediate code   kode antaraIntermediate code   kode antara
Intermediate code kode antara
 
materi imk Menu
materi imk Menumateri imk Menu
materi imk Menu
 
Interaksi manusia dan komputer
Interaksi manusia dan komputerInteraksi manusia dan komputer
Interaksi manusia dan komputer
 
FileditOR VI
FileditOR VIFileditOR VI
FileditOR VI
 
Ms excel presentasi
Ms excel presentasiMs excel presentasi
Ms excel presentasi
 
Pemrograman C++ - Fungsi dan Prosedur
Pemrograman C++ - Fungsi dan ProsedurPemrograman C++ - Fungsi dan Prosedur
Pemrograman C++ - Fungsi dan Prosedur
 
SLIDE KE:5 NFA
SLIDE KE:5 NFASLIDE KE:5 NFA
SLIDE KE:5 NFA
 
Sistem bus komputer
Sistem bus komputerSistem bus komputer
Sistem bus komputer
 

Viewers also liked

Interaksi Manusia & Komputer Part 2 & 3
Interaksi Manusia & Komputer Part 2 & 3Interaksi Manusia & Komputer Part 2 & 3
Interaksi Manusia & Komputer Part 2 & 3Raga Gapilau Jatsuma
 
Semikonduktor
SemikonduktorSemikonduktor
Semikonduktorrisal07
 
Contoh interface yang baik
Contoh interface yang baikContoh interface yang baik
Contoh interface yang baikHibaten Wafiroh
 
Interaksi Manusia dengan Komputer
Interaksi Manusia dengan KomputerInteraksi Manusia dengan Komputer
Interaksi Manusia dengan KomputerAntonio Fly
 
Contoh Interface Website yang baik
Contoh Interface Website yang baikContoh Interface Website yang baik
Contoh Interface Website yang baikLilik Maysarah
 
Perancangan dan Analisa Sistem
Perancangan dan Analisa SistemPerancangan dan Analisa Sistem
Perancangan dan Analisa Sistemguestb7aaaf1e
 

Viewers also liked (9)

Interaksi Manusia & Komputer Part 2 & 3
Interaksi Manusia & Komputer Part 2 & 3Interaksi Manusia & Komputer Part 2 & 3
Interaksi Manusia & Komputer Part 2 & 3
 
Seminar tesis final
Seminar tesis finalSeminar tesis final
Seminar tesis final
 
Antropometri
AntropometriAntropometri
Antropometri
 
1 pengenalan-konsep-imk
1 pengenalan-konsep-imk1 pengenalan-konsep-imk
1 pengenalan-konsep-imk
 
Semikonduktor
SemikonduktorSemikonduktor
Semikonduktor
 
Contoh interface yang baik
Contoh interface yang baikContoh interface yang baik
Contoh interface yang baik
 
Interaksi Manusia dengan Komputer
Interaksi Manusia dengan KomputerInteraksi Manusia dengan Komputer
Interaksi Manusia dengan Komputer
 
Contoh Interface Website yang baik
Contoh Interface Website yang baikContoh Interface Website yang baik
Contoh Interface Website yang baik
 
Perancangan dan Analisa Sistem
Perancangan dan Analisa SistemPerancangan dan Analisa Sistem
Perancangan dan Analisa Sistem
 

Similar to 3 interface metaphors dan model konseptual-donz

Similar to 3 interface metaphors dan model konseptual-donz (20)

Antarmuka Berbasis Interaksi Grafis
Antarmuka Berbasis Interaksi GrafisAntarmuka Berbasis Interaksi Grafis
Antarmuka Berbasis Interaksi Grafis
 
Bab iv ragam dialog
Bab iv ragam dialogBab iv ragam dialog
Bab iv ragam dialog
 
Interaksi manusia dan komputer
Interaksi manusia dan komputerInteraksi manusia dan komputer
Interaksi manusia dan komputer
 
Ragam dialog
Ragam dialog Ragam dialog
Ragam dialog
 
Ragam Dialog
Ragam DialogRagam Dialog
Ragam Dialog
 
Ragam dialog
Ragam dialogRagam dialog
Ragam dialog
 
ppt_IMK-design-interface
ppt_IMK-design-interfaceppt_IMK-design-interface
ppt_IMK-design-interface
 
Rpl 8-ui desain
Rpl 8-ui desainRpl 8-ui desain
Rpl 8-ui desain
 
technik kompilasi
technik kompilasitechnik kompilasi
technik kompilasi
 
Ragam dialog
Ragam dialogRagam dialog
Ragam dialog
 
Paradigma,proses desain dan rekayasa daya guna
Paradigma,proses desain dan rekayasa daya gunaParadigma,proses desain dan rekayasa daya guna
Paradigma,proses desain dan rekayasa daya guna
 
Teknologi informasi & komunikasi bab 3
Teknologi informasi & komunikasi bab 3Teknologi informasi & komunikasi bab 3
Teknologi informasi & komunikasi bab 3
 
Hci pert52
Hci pert52Hci pert52
Hci pert52
 
Daskom 4
Daskom 4Daskom 4
Daskom 4
 
Spm 2322 w2
Spm 2322 w2Spm 2322 w2
Spm 2322 w2
 
Pemrograman Desktop VB
Pemrograman Desktop VBPemrograman Desktop VB
Pemrograman Desktop VB
 
Tugas IMK : Ragam Dialog
Tugas IMK : Ragam DialogTugas IMK : Ragam Dialog
Tugas IMK : Ragam Dialog
 
Ragam dialog
Ragam dialogRagam dialog
Ragam dialog
 
Rpl 015 - interface user
Rpl   015 - interface userRpl   015 - interface user
Rpl 015 - interface user
 
Notasi dialog dan desain
Notasi dialog dan desainNotasi dialog dan desain
Notasi dialog dan desain
 

More from Stevie Principe (20)

Laporan kerja praktek
Laporan kerja praktekLaporan kerja praktek
Laporan kerja praktek
 
Contoh proposalskripsi
Contoh proposalskripsiContoh proposalskripsi
Contoh proposalskripsi
 
Rs sisflow
Rs sisflowRs sisflow
Rs sisflow
 
Rs sisflow
Rs sisflowRs sisflow
Rs sisflow
 
Payroll
PayrollPayroll
Payroll
 
Rekrutmen and seleksi
Rekrutmen and seleksiRekrutmen and seleksi
Rekrutmen and seleksi
 
Payroll
PayrollPayroll
Payroll
 
Payroll
PayrollPayroll
Payroll
 
Payroll
PayrollPayroll
Payroll
 
Payroll
PayrollPayroll
Payroll
 
Payroll
PayrollPayroll
Payroll
 
Payroll
PayrollPayroll
Payroll
 
20100325 1 pengenalankonsepimk
20100325 1 pengenalankonsepimk20100325 1 pengenalankonsepimk
20100325 1 pengenalankonsepimk
 
Chapter1 introduction to hci
Chapter1 introduction to hciChapter1 introduction to hci
Chapter1 introduction to hci
 
4 piranti interaktif - new
4   piranti interaktif - new4   piranti interaktif - new
4 piranti interaktif - new
 
Penulisan syntax vb
Penulisan syntax vbPenulisan syntax vb
Penulisan syntax vb
 
Fungsi string vb
Fungsi string vbFungsi string vb
Fungsi string vb
 
Fungsi date vb
Fungsi date vbFungsi date vb
Fungsi date vb
 
Fungsi date vb
Fungsi date vbFungsi date vb
Fungsi date vb
 
Ho peramalan oktober 2009 new 11
Ho peramalan oktober 2009 new 11Ho peramalan oktober 2009 new 11
Ho peramalan oktober 2009 new 11
 

3 interface metaphors dan model konseptual-donz

  • 1. Interface Metaphors dan Model Konseptual Interface Metaphors 1
  • 2. Pendahuluan ∗ Istilah Metafora umumnya dihubungkan dengan penggunaan bahasa. ∗ Saat kita ingin menyampaikan suatu konsep abstrak dalam bentuk yang umum dan mudah dipahami, sering kita terpaksa menggunakan pernyataan metafora (kiasan) Interface Metaphors 2
  • 3. Pendahuluan ∗ Dalam perancangan antarmuka, kita juga melihat bagaimana metafora memegang peranan penting. ∗ Obyek pada layar, tipe interaksi yang dilakukan, cara sistem menanggapi, nama yang diberikan pada perintah, cenderung menggunakan istilah yang umum. ∗ Desktops, icon, menu, window, cutting, pasting, copying, merupakan bagian dari metafora antarmuka virtual. Interface Metaphors 3
  • 4. Metafora Verbal ∗ Saat berhadapan dengan suatu teknologi baru seperti komputer, pertama-tama orang akan membandingkan dengan mesin yang yang sudah diakrabi secara metafora. ∗ Contoh saat orang baru pertama kali menggunakan pengolah dokumen, maka yang pertama muncul dibenaknya adalah seberapa besar kemiripannya dengan mesin ketik. ∗ Dengan mengaktifkan skema tentang mesin ketik, maka mereka akan lebih siap untuk melakukan interpretasi dan prediksi tentang bagaimana pengolah dokumen berfungsi. ∗ Dengan melihat bahwa komputer mempunyai keyboard maka dapat ditarik kesimpulan bahwa komputer bekerja seperti tombol pada mesin ketik Interface Metaphors 4
  • 5. Metafora Verbal ∗ Link ini merupakan landasan dasar tempat pengguna membangun model mental tentang sistem komputer. ∗ Pengetahuan tentang elemen-elemen dan relasinya satu dengan yang lain dalam suatu domain yang familiar akan dipetakan ke elemen-elemen dan relasinya dalam domain yang belum dikenal. ∗ Elemen-elemen meliputi keyboard, spasi, dan tombol return. ∗ Relasi antar elemen meliputi “hanya satu tombol karakter dapat ditekan pada satu saat”, dan “penekanan tombol karakter akan menghasilkan satu huruf akan ditampilkan pada monitor” Interface Metaphors 5
  • 6. Metafora Verbal ∗ Efek perubahan fungsi tersebut serta pengenalan cara baru, sering menyebabkan masalah pada pengguna pemula, karena bertentangan dengan harapan mereka tentang elemen dan relasinya. ∗ Namun perlu dicatat bahwa sekali pengguna menyadari ketidakcocokan dan perbedaan antara sistem yang lama dengan yang baru, maka mereka akan dapat membangun model mental yang baru. Interface Metaphors 6
  • 7. Virtual Interface Methapors ∗ Salah satu perusahaan komputer yang pertama kali menyadari potensi yang sangat besar dalam perancangan antarmuka agar lebih mirip dengan kondisi sebenarnya yang telah familiar adalah Xerox. ∗ Keluarannya adalah antarmuka pengguna “Star”, dengan metafora antarmuka untuk membuat pasangan elektronis dari obyek fisik dalam kantor, yang berupa icon pada layar monitor. Interface Metaphors 7
  • 8. Antarmuka Berbasis Icon ∗ Selain menjadi entitas abstrak, dengan nama sembarang, file akan ditransformasikan kedalam representasi gambar, sehingga setiap orang dapat dengan mudah mengidentifikasi dan memahaminya. ∗ Dengan mempunyai pemahaman dasar ini akan terbangun suatu dasar dimana pengguna akan mengetahui bagaimana berinteraksi dengan icon. Interface Metaphors 8
  • 9. Antarmuka Berbasis Icon ∗ Sejalan dengan penggunaan simbol-simbol dan tanda- tanda pada kehidupan sehari-hari, antarmukapun sering memanfaatkan simbol-simbol dan tanda-tanda ini untuk memberitahu pengguna akan kemampuan dan fasilitas yang dimiliki suatu program aplikasi. ∗ Ragam dialog yang banyak menggunakan simbol- simbol dan tanda-tanda untuk menunjukkan suatu aktifitas tertentu disebut dengan antarmuka berbasis ikon (icon-based user interface). Interface Metaphors 9
  • 10. Antarmuka Berbasis Icon ∗ Secara teknis, antarmuka berbasis ikon umumnya merupakan variasi dari antarmuka berbasis menu. ∗ Perbedaannya terletak pada cara penyajian pilihan. ∗ Pada sistem menu, pilihan aktifitas dinyatakan secara tekstual, sementara pada antarmuka berbasis ikon, pilihan aktifitas dinyatakan dengan suatu tanda atau simbol yang disebut pictogram atau ikon. ∗ Disebukan sebagai metafora antarmuka virtual Interface Metaphors 10
  • 11. Metafora Komposit ∗ Masalah dalam perancangan dengan pendekatan “metafora sebagai model” adalah bagaimana menggabungkan fungsi-fungsi tambahan yang bukan merupakan bagian dari metafora, namun akan membuat aplikasi menjadi lebih kuat (powerfull). ∗ Permasalahan di atas dapat diatasi dengan mengembangkan metafora komposit pada antarmuka (Carrol, 1988). ∗ Metafora desktop dapat digabungkan dengan metafora yang lain agar pengguna lebih fleksibel dalam menggunakan berbagai tindakan berbasis komputer. ∗ Salah satu contoh adalah scroll bar. Interface Metaphors 11
  • 12. Metafora Komposit ∗ Obyek seperti scroll bar tidak pernah ada dalam kehidupan nyata. ∗ Tetapi secara metafora dirancang seperti konsep menggulung (scroll), jadi seakan-akan dapat menggulung dokumen ke atas (scroll up) atau menggulung ke bawah (scroll down). Interface Metaphors 12
  • 13. Metafora Komposit ∗ Contoh lain dari metafora antarmuka yang berbasis pada obyek yang dikombinasikan dengan metafora desktop, adalah menu dan window. ∗ Keduanya mempunyai basis metafora sendiri yang berbeda dari konsep suatu kantor atau desk. ∗ Contoh lain adalah fungsi cut & copy yang digunakan untuk memindah dan menyalin teks yang berdasarkan pada proses yang digunakan dalam layout halaman pada percetakan. Interface Metaphors 13
  • 14. Ragam Dialog Cara yang digunakan untuk mengorganisasikan berbagai teknik dialog disebut dengan ragam dialog (dialogue style). 14
  • 15. Kategori Ragam Dialog Interaktif - Dialog berbasis perintah tunggal ∗ Command Line Language: Merupakan ragam yang paling konvensional. ∗ Dialog berbasis perintah tunggal adalah dialog yang bersifat inisiatif oleh pengguna ∗ Bahasa perintah harus dirancang sedemikian rupa sehingga mereka mempunyai sifat alamiah, yakni mudah dipelajari dan diingat oleh kebanyakan pengguna. 15
  • 16. Kategori Ragam Dialog Interaktif - Dialog berbasis perintah tunggal ∗ Beberapa contoh sederhana yang bisa kita lihat antara lain adalah perintah-perintah yang dimiliki oleh DOS (Disk Operating System). ∗ Terbagi atas perintah dalam (internal command) yang tidak memerlukan suatu berkas .EXE atau .COM tertentu (ex:DIR, CLS) dan perintah luar (external command) yang memerlukan suatu berkas .EXE atau .COM tertentu (ex.FORMAT, DELTREE). 16
  • 17. Kategori Ragam Dialog Interaktif - Dialog berbasis perintah tunggal ∗ Keuntungan dan kerugian penggunaan dialog berbasis perintah tunggal 17
  • 18. Kategori Ragam Dialog Interaktif - Dialog berbasis bahasa pemrogaman ∗ Dalam keadaan tertentu, penggunaan dialog berbasis perintah tunggal sering tidak memadai, khususnya ketika pengguna harus memberikan sederetan perintah-perintah yang sama setiap kali ia menjalankan program aplikasi tersebut. ∗ Dialog berbasis bahasa pemrograman merupakan ragam dialog yang memungkinkan pengguna untuk mengemas sejumlah perintah ke dalam suatu berkas yan sering disebut dengan batch file. Contoh dBASE 18
  • 19. Kategori Ragam Dialog Interaktif - Antarmuka berbasis bahasa alami ∗ Film fiksi ilmiah => komunikasi antara manusia dengan komputer lewat suatu bahasa ucapan yang secara jelas memanfaatkan bahasa alami (natural language). 19
  • 20. Kategori Ragam Dialog Interaktif - Antarmuka berbasis bahasa alami ∗ Dengan melihat pada perbedaan bahasa yang digunakan oleh manusia dan komputer, maka sebuah sistem yang mengimplementasikan dialog berbasis bahasa alami perlu mempunyai sebuah sistem penterjemah yang dapat menterjemahkan suatu kalimat pada dua arah. ∗ Ketika manusia memberikan instruksi, sistem penterjemah harus menerjemahkan instruksi tersebut ke dalam format instruksi lain yang dapat dimengerti oleh komputer. ∗ Sebaliknya, ketika komputer akan memberikan jawaban, sistem penterjemah harus mampu menterjemahkan format instruksi komputer menjadi pesan yang dimengerti oleh manusia. ∗ Dari sisi pengguna, tentunya ia menginginkan keluwesan yang sebesar-besarnya dalam memberikan instruksi kepada komputer. Tetapi, dari sisi perancang sistem, semakin luwes bahasa alami yang dikehendaki oleh pengguna, semakin rumit pula sistem penterjemah yang harus disiapkan. 20
  • 21. Kategori Ragam Dialog Interaktif – Sistem Menu ∗ Sistem menu merupakan pilihan yang tepat untuk menunjukkan kemampuan dan fasilitas yang dimiliki oleh sebuah program aplikasi kepada pengguna. ∗ Menu adalah daftar sejumlah pilihan dalam jumlah terbatas, yang biasanya berupa suatu kalimat atau kumpulan beberapa kata. ∗ Ditinjau dari teknik penampilan pilihan-pilihan pada sebuah sistem menu, dikenal dua jenis sistem menu: ∗ sistem menu datar ∗ sistem menu tarik (pulldown) yang berbasis pada struktur hirarki pilihan (struktur pohon pilihan). 21
  • 22. Kategori Ragam Dialog Interaktif – Sistem Menu Datar ∗ Dalam sistem menu datar, kemampuan dan fasilitas yang dimiliki oleh suatu program aplikasi akan ditampilkan secara lengkap, dan biasanya menggunakan kalimat-kalimat yang cukup panjang. 22
  • 23. Kategori Ragam Dialog Interaktif – Sistem Menu Tarik ∗ Sebuah menu tarik pada dasarnya adalah sistem menu yang pilihan-pilihannya dikelompokkan menurut menurut kategori tertentu atau menurut cara tertentu sehingga mereka membentuk semacam hirarki pilihan. ∗ Pada hirarki paling tinggi, pilihan-pilihan itu disebut dengan pilihan/menu utama. Sebagian atau semua pilihan/menu utama dapat mempunyai salah satu atau lebih subpilihan/submenu. Sebuah subpilihan/submenu dari suatu pilihan/menu utama dapat mempunyai satu atau labih sub-subpilihan, dan seterusnya. Struktur ini membentuk semacam struktur pohon. 23
  • 24. Kategori Ragam Dialog Interaktif – Dialog berbasis pengisian borang ∗ Teknik dialog pengisian borang (form-filling dialogue) merupakan suatu penerapan langsung dari aktifitas pengisian borang dalam kehidupan sehari-hari dimana pengguna akan dihadapkan pada suatu bentuk borang yang ada di layar komputer yang mereka gunakan. ∗ Perlman membuat perbedaan antara menu dan borang. ∗ menu adalah dialog yang menampilkan sejumlah alternatif pilihan yang pilihan-pilihan itu dapat dipilih pengguna dengan cara tertentu pada setiap daur aktifitas. ∗ borang adalah tampilan dari sejumlah persyaratan (requirement) yang menampilkan sejumlah opsion dan berbagai nilai para meter yang telah ditentukan dan dintegrasikan ke dalam sebuah tampilan pada layar. 24
  • 25. Kategori Ragam Dialog Interaktif – Antarmuka berbasis ikon ∗ Antarmuka sering memanfaatkan simbol- simbol dan tanda-tanda ini untuk memberitahukan pengguna akan kemampuan dan fasilitas yang dimiliki oleh suatu program aplikasi. ∗ Ragam dialog yang banyak menggunakan simbol-simbol dan tanda-tanda untuk menunjukkan suatu aktifitas tertentu disebut dengan antarmuka berbasis ikon (icon-based user interface) . 25
  • 26. Kategori Ragam Dialog Interaktif – Antarmuka berbasis ikon ∗ Secara teknis, antarmuka berbasis ikon boleh dikatakan merupakan variasi dari antarmuka berbasis menu. ∗ setiap ikon menunjukkan satu aktifitas sementara pada system menu, sebuah menu juga menunjukkan satu aktifitas. ∗ Perbedaannya terletak pada cara penyajian pilihan itu. Pada system menu, pilihan aktifitas dinyatakan secara tekstual, sementara pada antarmuka berbasis ikon, pilihan aktifitas dinyatakan dengan suatu tanda atau symbol yang disebut pictogram atau ikon. 26
  • 27. Kategori Ragam Dialog Interaktif – Sistem Penjendelaan ∗ Secara umum yang disebut dengan jendela (window) adalah bagian dari layar yang digunakan untuk menampilkan suatu informasi. Informasi disini dapat berupa informasi tekstual maupun grafis. Untuk menunjukkan daerah yang digunakan untuk menampilkan suatu informasi, biasanya daerah yang umumnya berupa persegi panjang dibatasi dengan semacam garis pembatas dengan ketebalan tertentu. ∗ Sistem penjendelaan adalah sistem antarmuka yang memungkinkan pengguna untuk menampilkan berbagai informasi baik sendiri-sendiri maupun secara bersama- sama ke dalam bagian–bagian layar yang tidak saling mempengaruhi. 27
  • 28. Kategori Ragam Dialog Interaktif – Manipulasi Langsung ∗ Karakteristik yang sangat penting dari ragam dialog ini adalah adanya penyajian langsung suatu aktifitas oleh sistem kepada pengguna sehingga aktifitas itu akan dikerjakan oleh sistem komputer ketika pengguna memberikan instruksi lewat manipulasi langsung dari semacam kenyataan maya (virtual reality) yang terpampang lewat tampilan yang muncul di layar. 28
  • 29. Kategori Ragam Dialog Interaktif – Antarmuka Berbasis Interaksi Grafis ∗ Secara umum cukup sulit membedakan antarmuka berbasis manipulasi langsung dengan antarmuka berbasis interaksi grafis. ∗ Pada program-program yang berkemampuan hypertext, program akan memberitahu pengguna bahwa pengguna dapat melakukan links ke teks atau dokumen yang lain. Ketika kursor mouse berada pada teks yang yang mempunyai link ke teks lain, maka bentuk kursor biasanya berubah (umumnya berubah menjadi bentuk tangan menunjuk). 29