Fathiah, S.T.,M.Eng Universitas Ubudiyah Indonesia

Slides:



Advertisements
Presentasi serupa
Dasar-dasar Web Design
Advertisements

Desain Web R0312 – Grafik Komputer.
Minggu 6 Prinsip & Konsep Desain
Perancangan Perangkat Lunak lanjutan Kuliah - 7
Prinsip Perancangan Multimedia
PERANCANGAN ANTARMUKA - 2
Manual Tercetak, Petunjuk Online dan Tutorial
Mata Kuliah INTERAKSI KOMPUTER - MANUSIA
Interaksi Manusia dan Komputer
DASAR-DASAR MULTIMEDIA INTERAKTIF (MMI).
Perancangan Tampilan.
PENGANTAR TEKNIK INFORMATIKA
MEMAHAMI ETIMOLOGI MULTIMEDIA
Sistem Multimedia.
Pemrograman multimedia
MEMAHAMI RAGAM DIALOG.
ELEMEN – ELEMEN MULTIMEDIA
Graphical User Interface (GUI) dan Multimedia
Pertemuan <<12-13>> VISUALISASI INFORMASI
Interaksi Manusia dengan Komputer
PENGEMBANGAN APLIKASI MULTIMEDIA
UNIT 1 Pengembangan APLIKASI MULTIMEDIA
Pencarian dan Visualisasi Informasi
komponen antarmuka pengguna
KONSEP USER INTERFACE.
Analisa & Perancangan sistem
Interaksi Manusia & Komputer Desain
Graphical User Interface (GUI) dan Multimedia
Interaksi Manusia dan Komputer
Alat Bantu Eksplorasi Informasi
Pemrograman Visual Oleh : Erni Fatmawati.
TEMU BALIK INFORMASI Multimedia Dalam Temu Balik Informasi.
Interaksi Manusia & Komputer Ragam Dialog
Interface Metaphors dan Model Konseptual
KONSEP INTERFACE
MEDIA PEMBELAJARAN KUIS BERBASIS MACROMEDIA FLASH 8.0
Interaksi Manusia & Komputer Audio dan Agent
M2. Produksi konten Multimedia 1
Prototyping
Interaksi Manusia & Komputer Visualisasi Informasi
Produksi Konten Multimedia (lanjutan)
DIALOG.
1.
Perancangan Tampilan.
Modul II Bab 5: Manajemen Sumber Daya Data
KOMPUTER/MEDIA GRAFIS
APLIKASI WEB INFORMASI PENERBANGAN DOMESTIK Ricky Christiando
Interaksi Manusia dan Komputer
Perancangan Tampilan.
Pengenalan Borland Delphi 7.0
Graphical User Interface (GUI) dan Multimedia
Animasi dan Suara Pertemuan 02
ELEMEN – ELEMEN MULTIMEDIA
Pertemuan 3 RAGAM DIALOG.
STMIK AKAKOM YOGYAKARTA
Interaksi.
PENGANTAR KOMPUTER DAN TEKNOLOGI INFORMASI 1B
Perancangan Tampilan.
Prototyping Deskripsi Desain  Bagaimana kita menyatakan dengan cepat gagasan-gagasan desain ?  Tidak ada koding.
This presentation uses a free template provided by FPPT.com ETIMOLOGI MULTIMEDIA Oleh : Putrie Fortuna RGP.
Perancangan Tampilan.
Perancangan Tampilan.
Perancangan Tampilan.
DASAR-DASAR MULTIMEDIA INTERAKTIF (MMI). Multimedia is the combination of the following elements: text, color, graphics, animations, audio, and video.
Perancangan Tampilan.
Fathiah, S.T.,M.Eng Universitas Ubudiyah Indonesia
Perancangan Tampilan.
APLIKASI PENGENALAN FOTOGRAFI MENGGUNAKAN MACROMEDIA FLASH MX 7
KONSEP USER INTERFACE PENGANTAR KOMPUTER DAN TEKNOLOGI INFORMASI 1B.
Modul 5 Kegiatan Belajar 4: DESAIN MULTIMEDIA INTERAKTIF Kelompok 4: Nur Awaludin Warjito Totok Hermawan.
Transcript presentasi:

Fathiah, S.T.,M.Eng Universitas Ubudiyah Indonesia fathiah@uui.ac.id Visualisasi Informasi Fathiah, S.T.,M.Eng Universitas Ubudiyah Indonesia fathiah@uui.ac.id 2015

Data, Data di mana-mana Dunia kita sedang sibuk di dalam data Komputer, internet dan jaringan telah memberikan akses yang lebih mengenai data kepada orang-orang ( tetapi hal ini telah ada di sini sampai saat ini)   Bagaimana cara kita mempertimbangkan hal ini? Bagaimana cara kita memanfaatkan data di dalam proses pengambilan keputusan?

Tiga Pendekatan Software Agents - agen komputasional yang menyelesaikan permintaan pemakai Pencari Data (Data Mining) - Software yang meneliti database dan memecahkan kemampuan yang "menarik" Informasi Visualisasi - Perkakas (Tools) yang dapat dilihat untuk membantu para pemakai untuk pengujian yang lebih baik mengenai data tersebut

Komputer adalah alat bantu pencarian yang baik, tetapi antarmuka pemakai tradisional menghalangi pemakai pemula: Perintah yang kompleks. Operator Boolean. Konsep yang menyulitkan. Model antarmuka objek-aksi membantu perancangan alat bantu eksplorasi informasi: Memisahkan konsep tugas dari konsep antarmuka. Memisahkan isu antarmuka tingkat tinggi dengan tingkat rendah. Supaya tampilan tampak menarik bagi user maka sangat perlu diperhatikan visualisasi Informasi sebagai bagian akhir dari Evaluasi dari User Interface yang dibuat

Pencarian Dokumen Multimedia Photo search Query by Image Content: mencari berdasarkan profil. Koleksi terbatas lebih berhasil. Map search Koordinat lintang dan bujur. Kota, jadual penerbangan, cuaca. Design or diagram search Pencarian elemen desain. Sound search Mengenali senandung pemakai. Mengedit not pada paranada. Mencari kata pada percakapan. Video search Mencari frame tertentu. Zooming dan panning. Dapat didukung dengan database teks. Animation search Mencari jenis animasi. Mencari transisi pada presentasi.

Kereta Bawah Tanah London

VISUALISASI INFORMASI Pengertian Visualisasi Informasi adalah rekayasa dalam pembuatan gambar, diagram atau animasi untuk penampilan suatu system informasi. Visualisasi dalam bentuk gambar baik yang bersifat abstrak maupun nyata telah dikenal sejak awal dari peradaban manusia. Contohnya struktur tree dan grafik

Visualisasi adalah (McCormick et al., 1987): Metode penggunaan komputer untuk mentransformasi simbol menjadi geometrik. Memungkinkan peneliti mengamati simulasi dan komputasi. Memberikan cara untuk melihat yang tidak terlihat. Memperkaya proses penemuan ilmiah dan mengembangkan pemahaman yang lebih dalam dan tak diduga. Dalam berbagai bidang telah merevolusikan cara ilmuwan meneliti sains. Pepatah mengatakan “Sebuah gambar bernilai seribu kata”. Untuk beberapa tugas, presentasi visual — seperti peta atau foto — secara dramatis lebih mudah digunakan atau dipahami daripada deskripsi tekstual atau laporan yang diucapkan. Mantra pencarian informasi visual: Overview dulu, Zoom dan filter, Lalu details on demand.

Prinsip Visualisasi Fokus pada konten Perbandingan Integritas Resolusi tinggi Utilisasi konsep terdahulu dan teruji melewati waktu.

Menyampaikan informasi yang ada dalam gambar tersebut. Tujuan Visualisasi Mengekspor Mengeksplor sebuah gambar untuk mengetahui lebih dalam informasi yang tersirat didalamnya 2. Menghitung Menghitung sebuah gambaran dalam hal perhitungan apapun yang terdapat dalam gambar Menyampaikan Menyampaikan informasi yang ada dalam gambar tersebut.

Dukungan Komputer Dalam Proses Visualisasi Informasi Menyimpan Data Komputer. Komputer memungkinan teknik penyimpnan data yang lebih murah dibandingkan dengan cara konvensional (menggunakan kertas). Data-data bisa disimpan dalam bentuk digital Proses Komputasi. Komputer dapat meningkatkan kecepatan akses pada data digital yang tersimpan untuk keperluan eksplorasi. Penyajian Informasi. Komputer memungkinkan penyajian informasi ke dalam berbagai bentuk yang dapat disesuaikan dengan keinginan.

Teknik Visualisasi Informasi Pengumpulan Jumlah Mengakumulasikan elemen individual ke dalam sebuah unit yang lebih besar untuk menghadirkannya seperti sesuatu yang utuh atau lengkap 2. Overview dan Detail Menyediakan baik tinjauan global maupun kemampuan detail zooming Fokus dan Konteks Menunjukkan detail dari satu atau lebih daerah di dalam sebuah konteks global yang lebih besar Drill – Down Memilih item individual atau set yang lebih kecil dari sebuah tampilan untuk sebuah pendapat detail atau analisis Brushing Memilih atau menunjuk / menspesifikasikan nilai , kemudian melihat item yang tepat di tempat lain pada tampilan

Audio dan agent AUDIO Audio sering disebut sebagai media komunikasi. Audio dalam sistem komunikasi bercirikan video, sinyal elektrik digunakan untuk membawa unsur bunyi. Contohnya pada radio dan televisi. Audio terbagi 2 yaitu : Audio Speech Specch dalam interface berguna untuk keadaan : Tangan user sibuk, mata user harus memperhatikan sesuatu kondisi yang tidak memungkinkan menggunakan keyboard. Audio Non Speech Audio Non Speech digunakan sebagai alarm dan warning, atau status information. Penampilan informasi yang redundan dapat meningkatkan kinerja user. Contohnya, user dapat mengingat suara yang mencerminkan icon tertentu, tapi bukan tampilan visualnya.

Perbedaan speech dan non-speech: User harus mendengarkan keseluruhan kalimat sebelum mengerti maksudnya, sehingga membutuhkan waktu yang panjang. Non – speech Dapat diasosiasikan dengan kejadian khusus, dan waktu yang dibutuhkan lebih pendek

AGENT Agents adalah segala sesuatu yang dapat melihat, mengartikan, mengetahui (perceiving) linkungannya melalui alat sensor (sensors) dan bertindak (acting) melalui alat aktuator (actuators) Manusia sebagai agent : mata, telinga dan organ lainnya sebagai sensors; tangan, kaki, mulut dan bagian tubuh lainnya sebagai actuators Robot sebagai agent : kamera dan pejejak infra merah sebagai sensors; berbagai motor pengerak sebagai actuators Software sebagai agent : tekanan pada keyboard, isi file dan paket-paket pada jaringan sebagai masukan sensors; tampilan pada layar, penulisan file dan pengiriman paket jaringan sebagai keluaran actuators

Tipe – Tipe Agent Goal - based Tujuan - tujuan tertentu dapat dicapai dengan cara-cara berbeda. b. Utility – based Agent membutuhkan tujuan untuk mengetahui situasi mana yang diharapkan. Akan menjadi sulit ketika urutan yang panjang dari tindakan tindakan (actions) dibutuhkan untuk mencari tujuan. Learning Semua program-program agent terdahulu mendeskripsikan metode untuk memilih tindakan-tindakan (actions).

USER INTERFACE AGENT Agent membantu user dalam penggunaan interface. Jenis-jenis agent antara lain: Manipulasi langsung. User memulai tindakan dan menggunakan agent secara langsung. Manajemen tidak langsung. Proses kerja sama dimana manusia dan komputer bersama-sama memulai tindakan. Personal assistant merupakan agent yang termasuk autonomous agent yang membantu user untuk menyelesaikan tugas. Sifat personal assistant antara lain: Tingkatannya bisa diubah Menggunakan petunjuk Menggunakan inisiatif

Visualisasi Informasi (Lanj.) Tipe data berdasarkan Taksonomi Tugas: Tipe data 1-D: Linear data Data linear seperti dokumen teks, program source code, daftar nama yang sekuensial. Mis.: TileBars, Document Lens, SeeSoft, Information Mural. 2-D: Map data Data bidang atau peta mencakup peta geografis, denah, tata letak suratkabar. Mis.: GIS, Tampilan spasial koleksi dokumen. 3-D: World Objek dunia nyata seperti molekul, tubuh manusia, bangunan. Pemakai harus mengatasi pemahaman posisi dan orientasi. Mis.: WebBook, VRML CAD, Visible Human Explorer.

Visualisasi Informasi (Lanj.) Temporal data Time line. Ada waktu awal dan akhir, boleh overlap. Tugas tambahan: menjadi kejadian sebelum, sesudah, dan pada periode tertentu. Mis.: Perspective Wall, Microsoft Project, Macromedia Flash, Lifeline. Multi-dimensional data Kebanyakan database relasional dan statistik. Mis.: DataSplash, Starfield. Tree data Koleksi item dengan setiap item terhubung dengan parent. Mis.: Windows Explorer, Treemaps Network data Data terhubung dengan sembarang jumlah item lain. Mis.: NetMap, WebMap, SeeNet, Butterfly, Visualisasi WWW lainnya.

Visualisasi Informasi (Lanj.) TileBars Timeline pada Macromedia Flash MX

Visualisasi Informasi (Lanj.) DataSplash dari the University of California at Berkeley, menunjukkan perubahan ranking Fortune 100 tahun 1994 (vertikal) vs 1995 (horizontal). Ukuran bintik menunjukkan profit keseluruhan.

Visualisasi Informasi (Lanj.) Treemap dari HCI Lab, University of Maryland at College Park menunjukkan isi hard disk. Jenis link: Internal, tree Internal, non-tree Eksternal, tree Eksternal, non-tree WebMap dari University of Frankfurt

Visualisasi Informasi (Lanj.) 13 / 24 - 12 Tugas Overview Memperoleh ringkasan seluruh koleksi. Zoom Melihat lebih dekat item-item yang menarik. Filter Menyaring item-item yang tidak menarik. Details-on-demand Pilih item atau kelompok dan mengambil rinciannya. Relate Melihat hubungan antaritem. History Memungkinkan undo, replay, perbaikan progresif. Extract Ekstraksi subkoleksi dan parameter query.

Pemfilteran Lanjut Dynamic queries (direct-manipulation queries): Pemakai menyetel numeric range sliders, alphasliders, atau tombol untuk seperangkat kecil kategori. Menggunakan konsep aksi (sliders atau tombol) dan objek (hasil query pada tampilan domain tugas). Perlu ditemukan bagaimana melakukan: Memilih seperangkat sliders dari seperangkat besar atribut. Menyebutkan lebih kecil, lebih besar, atau lebih kecil dan lebih besar. Menangani kombinasi Boolean dari pengaturan slider. Memilih highlighting dengan warna, titik-titik atau lebih terang, daerah, berkedip, dsb. Mengatasi puluhan ribu butir informasi. Memungkinkan pembobotan kriteria.

Pemfilteran Lanjut (Lanj.) Sistem penarikan informasi komersial: Contoh: DIALOG atau FirstSearch. Memungkinkan ekspresi Boolean yang rumit, tetapi sulit digunakan. Metafora baru untuk mengatasi kompleksitas: diagram Venn dan tabel keputusan. Metafora aliran air dengan filter. Bisa menggunakan AND, OR, NOT. Mudah digunakan dan membantu pemakai pemula. Himpunan kata kunci yang dibangun pemakai. Pemakai membuat profil dan media dipindai. Versi modern dari selective dissemination of information (SDI). Himpunan kata kunci untuk filter informasi. Pemfilteran kolaboratif. Kelompok pemakai mengombinasikan evaluasi untuk membantu menemukan informasi dalam database besar. Pemakai memberikan vote untuk nilai.

contoh

Hirarki Visualisasi Hierarki visualisasi merupakan urutan dari item – item dimana item tertentu merupakan induk atau moyang dari item lainnya. Contoh system berkas Bentuk – bentuk hierarki visualisasi antara lain: Tree ( Pohon ) Akar berada di puncak, daun – daun berada di paling bawah ( dasar ) Ide lain (Alternativ) Cheops, Hiperbolik dan Pohon Kerucut Representasi isi ruang / Treemap

Tree

Ide lain (Alternativ)

Representasi isi ruang / Treemap

The End