Paradigma dan Desain Dasar Interaksi

Paradigma

dan

Desain Dasar

Interaksi

Pertemuan 07



Pada tahun 1940-an dan 1950-an,

komputer berkembang dengan

sangat pesat dalam bidang

teknologi perangkat keras.



Penyiaran ulang mekanika telah

digantikan oleh

tabung hampa

(Vacum Tube).



Tabung itu digantikan oleh

transistor



Transistor terintegrasi oleh

chip/IC



Berkembang menjadi

LSI (Large

Scale Integrated Circuit)

dan

sekarang menjadi

VLSI (Very

Large Scale Integrated Circuit)

Paradigma

Pada

Interaksi

Video Display Units - VDU

 Pada pertengahan 1950-an para

pene-liti melakukan uji coba dengan menam-pilkan dan memanipulasi informasi yang mungkin dari komputer dalam sebuah gambar di video display unit.

 Layar peraga ini dapat menyediakan

lebih banyak sarana dibandingkan hasil cetakan komputer

 Aplikasi ini pertama kali diperagakan

pada aplikasi militer, khususnya di Semi-Automatic Ground Environment (SAGE) proyek dari Angkatan Udara Amerika.

Paradigma

Pada

Interaksi

Personal Computing - PC



Programming toolkits

menyedia-kan alat untuk program

menghitu-ng yamenghitu-ng baik.



Dasawarsa tahun 1970-an tenaga

komputer mengarah ke banyak

kalangan



Salah satunya alat ini dapat

diakses dengan bahasa

pemrograman grafis untuk

memanggil bahasa LOGO.

Paradigma

Pada

Interaksi



Dengan munculnya dan

berhasilnya pemasaran PC.



Penekanan untuk meningkatkan

kegunaan teknologi komputing

yang memusatkan pada

pengguna tunggal dan

tersam-bung dalam sebuah dialog dengan

komputer untuk menyelesaikan

beberapa pekerjaan.

Paradigma

Pada

Interaksi

Sistem Window dan Interface WIMP



Interaksi yang berbasis di

windows, ikon-ikon, menu-menu

dan petunjuk-petunjuk – tampilan

WIMP - ialah hal yang biasa

sekarang ini.



Alat interaksi ini terlebih dulu

muncul di commercial marketplace

pada April 1981, waktu Xerox

Corporation diperkenalkan oleh

8010 Star Information System.



Tetapi banyak teknik interaksi

mendasari sistem window ini yang

dipergunakan pada kelompok

Engelbart di NLS dan di Xerox

PARC.

Paradigma

Pada

Interaksi

Metaphor/Kiasan



Dalam mengembangkan bahasa

LOGO untuk mengajarkan

anak-anak, Papert menggunakan

metafora seekor kura-kura yang

menyeret ekornya di tanah.

Anak-anak dapat dengan cepat

mengidentifikasi gejala dunia

yang sebenarnya dan seketika

mereka mengerti bagaimana

dapat membuat gambarnya.

Paradigma

Pada

Interaksi

Manipulasi Langsung

 Di awal 1980-an, para perancang mulai melihat bahwa produk mereka mrnjadi populerdengan menggunakan konten visual.

 Ben Shneiderman pada tahun 1982

membandingkan sistem interaktif berbasis grafis seperti Sketchpad dan Xerox Alto & Star. Dia menyoroti fitur berikut yang memanipulasi langsung interface:

1. Visibilitas objek yang menarik

2. Meningkatkan aksi di interface dengan umpan balik

3. Membalikkan semua aksi, agar pemakai dianjurkan menjelajahi tanpa terkena sangsi 4. Keakuratan sintak semua aksi, agar setiap aksi si

pemakai adalah operasi sebuah aturan yang legal 5. Penggantian dari penguasaan bahasa yang

kompleks dengan aksi untuk menggerakkan secara langsung benda yang terlihat (dinamakan manipulasi langsung).

Paradigma

Pada

Interaksi

Bahasa vs Aksi

 Interface manipulasi langsung dapat

membuat beberapa tugas menjadi lebih mudah dan melaksanakannya dengan baik itu benar.

 Sebuah tampilan diproyeksikan untuk

manipulasi langsung dimana mengganti interface agar user tertarik akan hal itu.

 Paradigma aksi dan bahasa tidak dapat

dipisahkan.

 Sebuah kombinasi yang menarik atas dua

kejadian di dalam programming dengan contoh kalau seorang pemakai bisa melakukan beberapa tugas rutin di

paradigma aksi dan sistem record sebagai prosedur umum.

 Dalam arti, sistem ialah tafsiran dari aksi

user sebagai bahasa yang kemudian bisa diikuti.

Paradigma

Pada

Interaksi

The World Wide Web



Mungkin perkembangan baru yang

paling berarti di perkomputeran

interaktif ialah the World Wide

Web atau WWW.



WEB dibangun untuk

menyempunakan internet, dan

menawarkan kemudahan

pengguna



Sebagian besar WWW

menggunakan graphical interface

Paradigma

Pada

Interaksi

Ubiquitous Computing



Ada suatu penambahan angka dari

contoh computing devices di skala

berbeda ini.



Komputer laptop adalah tentu ada

dimana-mana, tapi komputer tablet

atau prototipe penelitian, seperti

storybook interaktif mulai

bermunculan



Ada berbagai bentuk layar yang

resolusinya tinggi dan masih

sebagi-an besar dipergunaksebagi-an sebagai

pre-sentasi pertunjukan alat atau pesan

tetap

Paradigma

Pada

Interaksi

halaman-skala interactive

PDA

Mobile Phone

Pocked-size elektronic bible



Kenali para pemakai disain



Siapa saja para pemakai

disain



Kemungkinan tidak seperti

kita



Berkomunikasi dengan

pemakai



Memantau para pemakai



Gunakan imajinasi

Fokus

Pemakai /

User



Skenario adalah cerita

untuk disain.



Skenario memaksa kita

untuk memikirkan desain

secara detail dan catatan

masalah potensial sebelum

disain itu dibuat.



Skenario dapat membantu

untuk menjelaskan bahwa

disain akan membuat

pengguna lebih mengerti.



Sebagai tambahan, skenario dapat

digunakan untuk :

 Komunikasi dengan yang lain  Komunikasi dengan disainer yang

lain, beberapa klien, atau para pemakai

 Validasi model lain

 Sebuah skenario yang detail dapat

meyajikan tampilan yang lebih formal seperti beberapa model tugas atau dialog dan model navigasi

 Menyampaikan dinamika  Gambaran individu untuk

memberikan sebuah pengertian dari yang dilihat seperti apa sebuah sistem, tetapi bukan bagaimana suatu sistem akan bekerja.

Skenario



Ketika kita berfokus pada objek

dari disain tidak hanya sebuah

sistem komputer atau

perangkatnya, tetapi

teknikal-sosial intervensi secara

keseluruhan harus diperhatikan.



Bagaimanpun kemajuan disain,

dapat dinilai dan disain lebih

terukur lagi.



Ibaratkan diri kita menggunakan

sebuah pengolah kata. Kita akan

melakukan beberapa kegiatan

tertentu dan mengatur sesuai

dengan tujuan.

Desain

Navigasi



Sekarang kita memfokuskan

kedalam sistem komputer saja.

Anda dapat berinteraksi pada

beberapa tingkatan yaitu :

 Widgets, Pilihan yang sesuai

dengan susunan kata dalam tombol dan menu yang akan membantu untuk mengetahui bagaimana cara menggunakan pilihan tersebut.

 Layar atau jendela, Untuk

menentukan ke dalam layar, dan pengelompokan tombol yang logis agar dapat digunakan.

Desain

Navigasi



Sekarang kita memfokuskan

kedalam sistem komputer saja.

Anda dapat berinteraksi pada

beberapa tingkatan yaitu :

 Navigasi dalam aplikasi, Harus

mengerti apa yang akan terjadi ketika suatu tombol ditekan, untuk hal

tersebut maka dilakukan interaksi.

 Lingkungan, Mesin pengolah kata

telah membaca dokumen dari disk, mungkin beberapa pada pengontrol jaringan, Anda dapat menukar

beberapa aplikasi, mungkin memotong, atau melekatkannya.

Desain

Navigasi



Disain navigasi adalah gaya

atau layar utama di dalam

suatu sistem dan bagaimana

mereka berinteraksi.



Untuk mendapat suatu

gagasan, langkah awal

mempertimbangkan struktur

dari suatu aplikasi :



Siapa yang akan menggunakan

aplikasi tersebut?



Bagaimana cara mereka

memikirkan hal itu?



Apa yang akan mereka lakukan

dengan hal itu?

.

Desain

Navigasi



Pada bagian ini kita akan

mempertimbangkan dua

macam isu utama:



Struktur lokal

melihat dari satu tampilan

atau halaman luar



Struktur Global

struktur dari lokasi,

bergerak diantara layar

Desain

Navigasi

 Untuk mencapai suatu keberhasilan,

tiap bagian dari sistem atau tiap tampilan yang dibutuhkan untuk memberikan pemakai pengetahuan yang cukup dari apa yang dilakukan untuk meraih suatu keberhasilan.

 Untuk mendapatkan sesuatu yang telah

dimulai, pada bagian ini ada empat hal yang dibutuhkan ketika memperhatikan suatu halaman web tunggal, bagian atau tampilan dari suatu perangkat.

 Ketahui Dimana kamu berada

 Ketahui Apa yang kamu dapat lakukan  Ketahui kemana kamu pergi – atau apa

yang akan terjadi

 Ketahui dimana telah terjadi – atau apa yang telah terjadi

Struktur

Lokal

 Tampilan, halaman web atau tampilan

perangkat yang membuat jelas dimana Anda berada atau bagian dari sistem.

 Selain itu penting juga untuk

mengetahui apa yang dapat Anda lakukan – apa yang dapat diklik untuk ke suatu tempat.

 Untuk mengetahui kemana Anda pergi

ketika Anda mengklik sebuah tombol atau apa yang akan terjadi.

 Dalam sebuah sistem informasi, ada

suatu keterkaitan untuk mengetahui dimana telah terjadi. Ini membantu Anda untuk mengerti navigasi dari sistem informasi Anda.

Struktur

Lokal

 Secara keseluruhan struktur dari

sebuah aplikasi merupakan tampilan, halaman atau bagian perangkat link ke halaman yang lainnya.

 Untuk mengorganisir sebuah sistem

dengan menggunakan beberapa format dari hierarki.

 Dalam Interaksi Manusia dan Komputer

kata ‘dialog’ digunakan untuk mengacu kepada pola tujuan dari interaksi antara pemakai dan sebuah sistem.

 Interaksi/dialog manusia dengan

komputer secara keseluruhan

merupakan pola dari pergerakan antara bagian utama dari sebuah perangkat atau jendela dalam sebuah aplikasi PC, tapi secara detail berbeda pada saat proses berlangsung.

Struktur

Global

Ada beberapa implikasi:

Isu gaya, Kita sebaiknya secara normal menyesuaikan terhadap standar tempat, seperti posisi untuk menu dalam sebuah aplikasi PC, untuk memastikan konsistensi antar aplikasi. Contohnya, dalam diri para pemain film kita usulkan sebaiknya menggunakan standar yang sesuai dengan jadwal, bermain dan berhenti sementara.

Isu fungsional, Dalam sebuah aplikasi PC kita membutuhkan ketersediaan untuk berinteraksi dengan file-file, membaca standar format dan ketersediaan untuk mengatur potongan adegan (cut) dan melanjutkannya kembali (paste).

Isu navigasi Kita mungkin membutuhkan dorongan hubungan antar aplikasi.

Ketenangan Yang Lebih

Prinsip dasar pada tingkatan layar tanggapan pengguna dalam area yang berbeda dari disain interaksi:

Pertanyaan

Apakah yang pengguna lakukan?

Pemikiran

Apakah informasi yang dihasilkan? Apakah perbandingan yang mungkin dibutuhkan pemakai untuk membuat

sebuah sistem infotmasi?

Disain

Format mengikuti fungsi: interaksi yang diperlukan untuk mengendalikan tampilan.

Desain

Layar dan

Tampilan

1. Peralatan untuk tampilan

Kita mempunyai sebuah peralatan visual yang tersedia untuk membantu kita menyarankan kepada pemakai desain untuk membaca dan berinteraksi dengan layar atau peralatan.

Pengelompokan dan struktur

Pesananan dari kelompok dan materinya

Dekorasi

Perataan

Jarak antar ruang

2. Tindakan pemakai dan kontrol •Memasukan informasi

•Mengetahui apa yang dilakukan •Mengusahakan suatu hal

Desain

Layar dan

3. Penampilan yang sesuai •Mempresentasikan informasi •Estetika dan kegunaan

•Membuat sebuah media dengan warna & 3 dimensi

•Lokalisasi/internasionalisasi

Desain

Layar dan

Tampilan

Iterasi dan pembuatan prototipe

Iterasi dan pembuatan prototipe adalah diterima universal melalui pendekatan ‘praktek terbaik’ untuk disain intraksi.

Bagaimanapun, ada beberapa kesukaran utama dari pembuatan prototipe, jarang dinyatakan dalam literatur. Pembuatan prototipe adalah sebuah contoh dari apa yang dikenal sebagai pendekatan

Jika Anda memulai disain dengan konsep disain yang buruk Anda mungkin berakhir pada sesuatu ide buruk

Dari permasalahan tersebut kita dapat

melihat dua hal dalam urutan untuk

membuat metode pembuatan prototipe :

1.Memahami apa yang salah dan bagaimana

meningkatkannya.

2.Memulai dengan awal yang baik

Seorang perancang yang baik mungkin

mengira suatu disain awal yang baik

berdasarkan pada pertimbangan dan

pengalaman.

1. Pada slide 2, cari image yang dicetak tebal.

2. Berdasarkan pengamatan tugas Anda masing-masing setiap page yang Anda amati merupakan desain

navigasi Struktur Lokal atau Struktur Global – slide 22

3. Berdasarkan pengamatan tugas Anda masing-masing setiap page yang Anda amati merupakan desain navigasi pada tingkatan apa saja – slide 19

Tugas :

Kerjakan tugas Anda lalu kirimkan

ke email :

dosen.

fakom

2009@

gmail.

com

Kiriman tugas Anda ditunggu hari ini tanggal 15 April 2011

Setelah Anda mengirimkan tugas ke email tersebut, Hubungi Maz Oka untuk minta tanda