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 … do things

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