Pertemuan 07. Paradigma dan Desain Dasar Interaksi

(1)

Paradigma

dan

Desain Dasar

Interaksi

(2)

Paradigma adalah seperangkat asumsi, konsep, nilai dan praktik yang di terapkan dalam memandang realitas dalam sebuah komunitas yang sama khususnya dalam disiplin intelektual.

(3)

• _{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

(4)

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

(5)

Personal Computing - PC

• _{Programming toolkits menyedia-kan}

alat untuk program menghitu-ng yang

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

(6)

Sistem Window dan Interface WIMP

• _{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

(7)

• _{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

(8)

Metaphor

• _{Metapora di artikan sebagai kiasan sebuah} objek yang di gambarkan seolah-olah mirip dengan benda lain. Secara umum istilah metaforik dapat diartikan sebagai gambaran visual (simbol) terhadap sesuatu atribut perangkat lunak yang disesuaikan dengan fungsi atribut tersebut.

• _{Misal, ikon berkas pada windows explorer} merujuk pada folder yang terdapat dalam sebuah sistem. Atau ikon Tong Sampah yang di gunakan sebagai folder atau tempat pembuangan bagi file-file yang di anggap tidak di butuhkan lagi.

• _{Metapora juga digunakan untuk mengajarkan} konsep baru, dimana konsep tersebut telah di pahami sebelumnya, misalnya spreadsheet adalah metafora dari akuntansi.

Paradigma

Pada

Interaksi

(9)

Ikon tong sampah di gunakan sebagai

metapora dari folder yang berfungsi

menampung file yang di anggap tidak

berguna

Ikon berkas di gunakan untuk merujuk folder yang terdapat pada suatu

sistem

Ikon kertas di gunakan sebagai metafora dari file

berisi infosmasi berupa teks

(10)

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

(11)

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

(12)

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

(13)

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 dipergunakan sebagai pre-sentasi

pertunjukan alat atau pesan tetap

Paradigma

Pada

Interaksi

(14)

(15)

(16)

PDA

Mobile Phone

Pocked-size elektronic bible

(17)

• _{Kenali para pemakai disain}

• Siapa saja para pemakai disain

• Kemungkinan tidak seperti

kita

• Berkomunikasi dengan

pemakai

• Memantau para pemakai

• _{Gunakan imajinasi}

Fokus

Pemakai /

User

(18)

• 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.

Skenario

(19)

• 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

(20)

• 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

(21)

• _{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

(22)

• _{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

(23)

• 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

(24)

• _{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

(25)

• 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

(26)

• 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

(27)

• 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

(28)

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 Ketenangan Yang Lebih Yang Lebih Luas Luas

(29)

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

(30)

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

Tampilan

(31)

3. Penampilan yang sesuai

•Mempresentasikan informasi •Estetika dan kegunaan

•Membuat sebuah media dengan warna & 3 dimensi

•Lokalisasi/internasionalisasi

Desain

Layar dan

Tampilan

(32)

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