Gaya Interaksi Hypertext dan Hypermedia Pada Interaksi Manusia dan Komputer

Memahami Hypertext

n  Apa pengertian hyper?

¨ Konten yang kaya: grafik, audio, video, komputasi dan interaksi

n  Hypertext : adalah teks yang ditampilkan pada suatu komputer atau perangkat elektronik lainnya dengan referensi (hyperlink) menuju teks lain, sehingga pembaca dapat segera mengaksesnya, biasanya dengan klik mouse atau urutan tombol keyboard

Sumber: en.wiki pedia.org/wiki/Hypertext

Hypertext – tidak hanya linear

n  Struktur non-linear

¨ Blok dari teks-teks (halaman)

¨ Tautan (link) antar halaman menciptakan jaringan jala (mesh)

¨ Pengguna mengikuti jalannya sendiri melalui informasi

Hypermedia – tidak hanya teks

n  Sistem hypertext + media tambahan

¨ ilustrasi, fotografi, video dan suara

¨ Tautan/hotspots bisa di dalam media

¨ area dari gambar-gambar

¨ waktu dan lokasi di dalam video

n  Disebut juga multimedia

¨ Tetapi istilah ini digunakan juga untuk audio/video yang sederhana

Animasi

n  Menambahkan gerak pada gambar

¨ Untuk sesuatu yang berubah sesuai waktu

n  Wajah digital– perubahan detik ke saat berikutnya

n  Wajah analog – lengan mengayun di atas jam

n  Tampilan hidup : mis. Beban sistem saat ini

¨ Untuk menunjukkan status dan perkembangan (progress)

n  Kusor berkedip pada lokasi entri teks

n  Kursor sibuk (hour-glass, clock, spinning disc)

n  batang progress

¨ Untuk pendidikan dan pelatihan

n  Memungkinkan siswa melihat hal yang terjadi… juga bersifat menarik dan menghibur sesuai keinginan

¨ Untuk visualisasi data

n  Perubahan mendadak dan halus pada data multi dimensi ditampilkan menggunakan permukaan berwarna dan animasi

n  Molekul yang kompleks dan interaksinya lebih mudah dipahami pada saat dirotasi dan dilihat pada layar

¨ Untuk animasi karakter

n  wizards dan bantuan

Video dan audio

n  Sekarang menjadi mudah bagi pengarang

¨ Alat bantu untuk mengedit suara dan video dan membakar CD dan DVD

n  Mudah dipasang pada halaman web

¨ Format standard (QuickTime, MP3)

n  Ukuran masih besar… Tetapi semakin mudah dikelola

¨ memori OK … hand held MP3 players, TiVo etc.

¨ Tetapi perlu perhatian pada waktu mengunduh – jelaskan berapa besar ukurannya !

n  Sangat linear

¨ Sulit menambahkan tautan, seringkali sebaiknya clip kecil atau latar belakang

Hypermedia

n  Hypermedia adalah sistem penemuan informasi berbasis komputer yang memungkinkan pengguna mendapatkan atau menyediakan akses ke teks, rekaman audio dan video, fotografi dan grafik yang berhubungan dengan subjek tertentu.

n  Istilah hypermedia diciptakan oleh Ted Nelson.

en.wiki pedia.org/wiki/Hypermedia

n  Hypermedia adalah perluasan dari hypertext, di mana

¨ Grafik

¨ Audio

¨ Video

¨ Teks

¨ Hyperlink

Saling berjalin untuk menciptakan media informasi non linear

Multimedia vs Hypermedia

n  Multimedia :

¨ adalah istilah yang mempunyai pengertian lebih luas dibanding hypermedia

¨ Digunakan untuk menjelaskan presentasi linear non-interaktif

¨ Berhubungan dengan literatur elektronik

n  Contoh multimedia : film / sinema
(tidak ada hyperlink)

n  Contoh hypermedia : world wide web

Isu Audio

n  format

¨ format suara sebagaimana adanya (raw sound samples)

n  Ukuran file besar… digunakan untuk pencampuran dan penyuntingan (mixing and editing)

¨ MIDI

n  Kapan suatu nada dimainkan (just which notes played and when)

¨ MP3

n  menggunakan psychoacoustics – bagaimana cara telinga mendengar

n  issu

¨ Mengganggu jika tidak diinginkan

¨ Bahkan bisa lebih mengganggu bagi orang lain!

Menggunakan Animasi dan Video

n  potentially powerful tools

¨ note the success of television and arcade games

n  but …

¨ how to harness the full possibilities of such media

¨ different from ‘standard’ interfaces

¨ this technology when we have much more experience.

n  so …

¨ need to learn from film makers, dramatic theory, cartoonists, artists, writers

Komputasi, kecerdasan, dan interaksi

n  computers??
          don’t just show things … dothings

n  examples:

¨ search – the HCI book web site

n  not just exercises, table of contents … also search

¨ interaction

n  embedded applications (e.g, puzzle square)

¨ adaption:

n  e-commerce sites suggest other things to buy

Interaksi dalam hypertext Professor Alan’s puzzle square

Teknologi delivery

n  on the computer

¨ help systems installed on hard disk with applications

¨ CD-ROM or DVD based hypermedia

¨ on the web

¨ really ubiquitous!

n  in many countries, near universal internet access

¨ not just web pages!

n  e.g. many applications have web-base documentation

n  … and on the move …

n  platforms

¨ mobile phones, PDAs, laptop computers

¨ delivery

¨ CD-ROM or DVD (like desktop)

¨ cached content (e.g. AvantGo)

¨ WiFi access points or mobile phone networks

¨ WAP – for mobile phone, tiny web-like pages

¨ context – who and where

¨ tourist guides, directed advertising

Area aplikasi

n  rapid prototyping

¨ create live storyboards

¨ mock-up interaction using links

¨ help and documentation

¨ allows hierarchical contents, keyword search or browsing

¨ just in time learning

n  what you want when you want it

n  (e.g. technical manual for a photocopier)

¨ technical words linked to their definition in a glossary

¨ links between similar photocopiers

n  education

¨ animation and graphics allow students to see things happen

¨ sound adds atmosphere and means diagrams can be looked at while hearing explanation  

¨ non-linear structure allows students to explore at their own pace

¨ e-learning

n  letting education out of the classroom!!

n  e.g. eClass

Gaya Interaksi Manipulasi Langsung Pada Interaksi Manusia dan Komputer

Contoh ragam dialog  : Manipulasi Langsung

n  Contoh manipulasi langsung:

¨  Menggeser berkas ke kotak sampah

¨  Menggunakan game simulasi mengemudi

n  Ben Shneiderman (1982)  adalah orang Yang mengusulkan istilah manipulasi langsung

n  Menurut  Shneiderman ada 3 elemen manipulasi langsung :

1. Penyajian visual dari objek yang akan dimanipulasi
2. Tindakan fisik sebagai pengganti teks masukan
3. Reaksi langsung yang dapat dilihat

n  Definisi manipulasi langsung:

¨  Mengklik dan menggeser obyek pada layar tampilan → manipulasi visual

n  Sifat manipulasi langsung

¨  1. sederhana

¨  2. langsung

¨  3. mudah digunakan

¨  4. mudah diingat

¨  5. hanya berkuasa penuh atas sebuah obyek

n  Ide utama dari manipulasi langsung:

¨  Kenampakan obyek dan tindakan pengguna

¨  Cepat, dapat dibatalkan, tindakan meningkat

¨  Tindakan menunjuk ke obyek yang diinginkan (Preece, 1994)

Definisi manipulasi langsung

n  Dalam ilmu komputer, manipulasi langsung adalah gaya interaksi manusia-komputer yang melibatkan representasi terus menerus dari obyek yang menarik dan cepat, reversibel, dan tindakan tambahan dan umpan balik.

n  Berbeda dengan gaya interaksi lain, misalnya, bahasa perintah, maksud manipulasi langsung adalah untuk memungkinkan pengguna untuk memanipulasi obyek virtual yang disajikan kepadanya, menggunakan tindakan yang sesuai setidaknya mirip ke manipulasi benda-benda fisik.

n  Contoh langsung manipulasi

¨  mengubah ukuran bentuk grafis, seperti persegi panjang, dengan menyeret sudut atau tepi dengan mouse.

 Sumber : en.wiki pedia.org/wiki/Direct_manipulation_interface

Aspek Kognitif pada Manipulasi Langsung

n  Manipulasi langsung : kesan tentang antar muka

n  Dua aspek manipulasi langsung:

1.       Aspek jarak : antara yg dipikirkan pengguna dengan kebutuhan fisik

2.       Aspek keterlibatan secara kualitatif
Contoh: permainan solitaire / kartu

n  Sebelum antar muka berbasis grafik:

1.       Berdasarkan metafor percakapan

2.       Pengguna kontak langsung dg stuktur bahasa

n  Setelah antar muka berbasis grafik :

1.       Pengguna memanipulasi obyek secara langsung

2.       Metafor model-dunia

3.       Menyajikan obyek nyata

4.       Ikon sebagai bahasa keluaran

Manipulasi Program vs Manipulasi Isi

n  Manipulasi langsung ada 2 macam

1.       Manipulasi program

¨  Cara menggunakan program aplikasi

¨  Tindakan : menekan tombol & menggulung

¨  Tidak memerlukan keahlian khusus

¨  Contoh : Excel, Power Point, Word

2.       Manipulasi isi

¨  Pembentukan, modifikasi, pemindahan data/obyek

¨  Memerlukan keahlian khusus

¨  Contoh : Corel Draw, Adobe Photoshop

n  Lima variasi pada manipulasi program

1.       Pemilihan

2.       Geser dan jatuhkan

3.       Manipulasi

4.       Pengubahan bentuk, pengubahan ukuran, dan pengaturan kembali posisi obyek

5.       Sarana untuk menghubungkan sejumlah obyek

Fase pada Proses Manipulasi Langsung

n  Fitur antar muka manipulasi langsung

1.       Kenampakan obyek

2.       Tindakan memanipulasi obyek

3.       Tindakan bertahap dg umpan balik

4.       Kebenaran sintaksis tindakan

5.       Semua tindakan dapat dibatalkan

¨  Metafor meja kerja : menunjukkan ketangguhan antar muka manipulasi langsung

¨  Tiga fase manipulasi langsung

¨  Fase bebas : sebelum tindakan

¨  Fase aktivasi : melakukan pergeseran

¨  Fase penghentian : melepas tombol

Umpan Balik Visual

n  Kunci keberhasilan manipulasi langsung :
adanya umpan balik visual yang lengkap

n  Contoh umpan balik visual :

¨  Kursor bebas

¨  Kursor aktivasi  ®bentuk tangan

¨  Menahan kunci meta (mis tombol : Ctrl)
 ®tanda + kecil

¨  Digeser : kursor terlihat menggeser seluruh obyek

Peranti Penunjuk

n  Tetikus (mouse) : paling banyak digunakan sebagai peranti penunjuk

n  Tetikus digunakan untuk

¨  Menempatkan kursor

¨  Menggambar

n  Jumlah tombol tetikus

¨  1 tombol ®hanya 1 kombinasi : 1

¨  2 tombol ® bisa 3 kombinasi : 01 10 11

¨  3 tombol ® bisa 7 kombinasi : 001 010 100 011 101 110 111

Menggunakan Mouse

n  Apple Macintosh : 1 tombol

¨  Sederhana bagi pengguna mula

¨  Mengorbankan kemampuan pengguna lain

n  Microsoft : 2 tombol

¨  Tombol kanan ® menu konteks

n  Unix / Sun Microsystem : 3 tombol

¨  Tombol tengah jarang digunakan

¨  Dicadangkan untuk aplikasi tertentu

n  Tombol Kiri

¨  Selalu digunakan untuk melakukan fungsi manipulasi langsung

¨  Kegunaan : pengaktifan / pemilihan

n  Tombol Kanan

¨  Merupakan tambahan / opsional

¨  Dipelopori oleh Borland

¨  Windows 95 : tindakan berdasarkan konteks

n  Tombol Tengah

¨  Jarang dimanfaatkan

¨  Untuk tombol singkat

Menunjuk dan Mengklik Menggunakan Mouse

n  Ada 2 operasi dasar mouse :

1.       Memindahkan mouse untuk menunjuk

2.       Mengklik sebuah tombol yang tersedia

n  Ada 4 operasi utama mouse :

1.       Menunjuk

2.       Mengklik

3.       Mengklik dan menggeser

4.       Mengklik-ganda

n  Ada 6 operasi lengkap mouse

1.       Menunjuk

2.       Klik (tunjuk – klik – lepas)

3.       Klik & geser (tunjuk – klik – geser – lepas)

4.       Klik ganda (tunjuk – klik – lepas – klik – lepas)

5.       Klik nada (tunjuk – klik – klik tombol lain – lepas – lepas)

6.       Geser ganda (tunjuk – klik – lepas – klik – geser – lepas)

n  Tombol meta (Ctrl, Shift, Alt) dapat mengubah tindakan mouse

Penerapan Manipulasi Langsung

n  Kontrol proses

n  Editor teks
(what you see is what you get, WYSIWYG)

n  Simulator

n  Kontrol lalu lintas penerbangan

n  Perancangan terbantu computer
(Computer Aided Design, CAD)

Keuntungan dan Kerugian Manipulasi Langsung

Keuntungan

1. Mempunyai analogi yang jelas dengan suatu pekerjaan nyata
2. Mengurangi waktu pembelajaran
3. Memberikan tantangan untuk eksplorasi pekerjaan yang nyata.
4. Penampilan visual yang bagus.
5. Mudah dioperasikan.
6. Tersedia berbagai perangkat bantu untuk merancang ragam dialog manipulasi langsung.

Kerugian

1. Memerlukan program yang rumit dan berukuran besar.
2. Memerlukan tampilan grafis berkinerja tinggi.
3. Memerlukan peranti masukan seperti mouse, trackball.
4. Memerlukan perancangan tampilan dengan kualifikasi tertentu.