![Page 1: INTERAKSI MANUSIA DAN MESIN Prinsip Desainbudhiirawan.staff.telkomuniversity.ac.id/files/2017/02/Materi-4... · 4. Dialog memiliki lingkup tertentu. 5. ... SKENARIO •Apa yang akan](https://reader031.vdocuments.site/reader031/viewer/2022022419/5a78d4cf7f8b9a70648d8ba7/html5/thumbnails/1.jpg)
INTERAKSI MANUSIA DAN MESIN
Prinsip Desain
Budhi Irawan, S.Si, M.T
![Page 2: INTERAKSI MANUSIA DAN MESIN Prinsip Desainbudhiirawan.staff.telkomuniversity.ac.id/files/2017/02/Materi-4... · 4. Dialog memiliki lingkup tertentu. 5. ... SKENARIO •Apa yang akan](https://reader031.vdocuments.site/reader031/viewer/2022022419/5a78d4cf7f8b9a70648d8ba7/html5/thumbnails/2.jpg)
DASAR PERANCANGAN INTERAKSI
A. Desain : Apa itu ?, Intervensi, Tujuan, Kendala, Batasan
B. Proses Desain : Apa yang terjadi jika ?
C. User : Siapa Mereka ?, Apa yang mereka sukai ?
D. Scenarios : Desain Alur Lengkap
E. Navigation : Menelusuri semua bagian sistem
F. Iterasi dan Prototipe
A. never get it right first time!
![Page 3: INTERAKSI MANUSIA DAN MESIN Prinsip Desainbudhiirawan.staff.telkomuniversity.ac.id/files/2017/02/Materi-4... · 4. Dialog memiliki lingkup tertentu. 5. ... SKENARIO •Apa yang akan](https://reader031.vdocuments.site/reader031/viewer/2022022419/5a78d4cf7f8b9a70648d8ba7/html5/thumbnails/3.jpg)
A. DESAIN
![Page 4: INTERAKSI MANUSIA DAN MESIN Prinsip Desainbudhiirawan.staff.telkomuniversity.ac.id/files/2017/02/Materi-4... · 4. Dialog memiliki lingkup tertentu. 5. ... SKENARIO •Apa yang akan](https://reader031.vdocuments.site/reader031/viewer/2022022419/5a78d4cf7f8b9a70648d8ba7/html5/thumbnails/4.jpg)
PRINSIP DESAIN ANTARMUKA
Prinsip Desain merupakan serangkaian panduan yang akan membantudesainer didalam mengambil keputusan perancangan selama prosestersebut berjalan.
Prinsip desain juga merupakan petunjuk secara umum yang dihasilkandari para pakar desainnever get it right first time!
![Page 5: INTERAKSI MANUSIA DAN MESIN Prinsip Desainbudhiirawan.staff.telkomuniversity.ac.id/files/2017/02/Materi-4... · 4. Dialog memiliki lingkup tertentu. 5. ... SKENARIO •Apa yang akan](https://reader031.vdocuments.site/reader031/viewer/2022022419/5a78d4cf7f8b9a70648d8ba7/html5/thumbnails/5.jpg)
BEBERAPA PRINSIP DESAIN ANTARMUKA
1. Ben Shneiderman’s dengan
“Eight Golden Rules of Dialog Design”
2. Deborah J. Mayhew’s dengan
“General Principles of User Interface Design”
3. IBM’s dengan
“Design Principels for Tomorrow”
![Page 6: INTERAKSI MANUSIA DAN MESIN Prinsip Desainbudhiirawan.staff.telkomuniversity.ac.id/files/2017/02/Materi-4... · 4. Dialog memiliki lingkup tertentu. 5. ... SKENARIO •Apa yang akan](https://reader031.vdocuments.site/reader031/viewer/2022022419/5a78d4cf7f8b9a70648d8ba7/html5/thumbnails/6.jpg)
1. EIGHT GOLDEN RULES OF DIALOG DESIGN
1. Upayakan untuk tetap konsisten.
2. Gunakan short cut pada bagian yang sering digunakan.
3. Sediakan feedback yang informatif.
4. Dialog memiliki lingkup tertentu.
5. Sediakan penanganan kesalahan yang sederhana.
6. Perbolehkan user melakukan aksi mundur atau pembatalan.
7. Berikan kontrol internal.
8. Kurangi aktifitas mengingat.
![Page 7: INTERAKSI MANUSIA DAN MESIN Prinsip Desainbudhiirawan.staff.telkomuniversity.ac.id/files/2017/02/Materi-4... · 4. Dialog memiliki lingkup tertentu. 5. ... SKENARIO •Apa yang akan](https://reader031.vdocuments.site/reader031/viewer/2022022419/5a78d4cf7f8b9a70648d8ba7/html5/thumbnails/7.jpg)
2. GENERAL PRINCIPLES OF USER INTERFACE DESIGN
1. User compatibility2. Product compatibility3. Task compatibility4. Work flow compatibility5. Consistency6. Familiarity7. Simplicity8. Direct manipulation9. Control
10.WYSIWYG11.Flexibility12.Responsiveness13.Invisible technology14.Robusteness15.Protection16.Ease of learning17.Ease of use
![Page 8: INTERAKSI MANUSIA DAN MESIN Prinsip Desainbudhiirawan.staff.telkomuniversity.ac.id/files/2017/02/Materi-4... · 4. Dialog memiliki lingkup tertentu. 5. ... SKENARIO •Apa yang akan](https://reader031.vdocuments.site/reader031/viewer/2022022419/5a78d4cf7f8b9a70648d8ba7/html5/thumbnails/8.jpg)
3. DESIGN PRINCIPELS FOR TOMORROW
1. Kesederhanaan : tidak mengabaikan usability demi fungsionalitastertentu
2. Support : pengguna tetap terkendali melalui panduan proaktif
3. Familiarity : bangun pemahaman pengguna
4. Obviousness : buat objek fungsinya dapat terlihat dan intuitif
5. Encouragement : buat aksi dapat diperkirakan hasilnya dan dapatdibatalkan
![Page 9: INTERAKSI MANUSIA DAN MESIN Prinsip Desainbudhiirawan.staff.telkomuniversity.ac.id/files/2017/02/Materi-4... · 4. Dialog memiliki lingkup tertentu. 5. ... SKENARIO •Apa yang akan](https://reader031.vdocuments.site/reader031/viewer/2022022419/5a78d4cf7f8b9a70648d8ba7/html5/thumbnails/9.jpg)
3. DESIGN PRINCIPELS FOR TOMORROW
6. Satisfaction : berikan pencapaian progress
7. Accessibility : buat semua object dapat di akses setiap saat
8. Safety : pastikan pengguna terbebas dari masalah
9. Versatility : berikan alternatif teknik interaksi
10. Personalization : berikan kesempatan pengguna untuk kustomisasi
11. Affinity : sesuaikan objek dengan kehidupan nyata melalui desain visual.
![Page 10: INTERAKSI MANUSIA DAN MESIN Prinsip Desainbudhiirawan.staff.telkomuniversity.ac.id/files/2017/02/Materi-4... · 4. Dialog memiliki lingkup tertentu. 5. ... SKENARIO •Apa yang akan](https://reader031.vdocuments.site/reader031/viewer/2022022419/5a78d4cf7f8b9a70648d8ba7/html5/thumbnails/10.jpg)
B. PROSES DESAIN
![Page 11: INTERAKSI MANUSIA DAN MESIN Prinsip Desainbudhiirawan.staff.telkomuniversity.ac.id/files/2017/02/Materi-4... · 4. Dialog memiliki lingkup tertentu. 5. ... SKENARIO •Apa yang akan](https://reader031.vdocuments.site/reader031/viewer/2022022419/5a78d4cf7f8b9a70648d8ba7/html5/thumbnails/11.jpg)
PROSES DESAIN
what iswanted
analysis
design
implementand deploy
prototype
interviewsethnography
what is therevs.
what is wanted
guidelinesprinciples
dialoguenotations
precisespecification
architecturesdocumentation
help
evaluationheuristics
scenariostask analysis
![Page 12: INTERAKSI MANUSIA DAN MESIN Prinsip Desainbudhiirawan.staff.telkomuniversity.ac.id/files/2017/02/Materi-4... · 4. Dialog memiliki lingkup tertentu. 5. ... SKENARIO •Apa yang akan](https://reader031.vdocuments.site/reader031/viewer/2022022419/5a78d4cf7f8b9a70648d8ba7/html5/thumbnails/12.jpg)
KARAKTERISTIK DESAIN
Karakteristik Desain menurut Carroll dan Rosson :
Desain adalah proses, bukan keadaan.
Proses desain nonhierarkis.
Proses desain transformasional secara radikal.
Perancangan secara intrinsik melibatkan penemuan tujuan-tujuanbaru.
![Page 13: INTERAKSI MANUSIA DAN MESIN Prinsip Desainbudhiirawan.staff.telkomuniversity.ac.id/files/2017/02/Materi-4... · 4. Dialog memiliki lingkup tertentu. 5. ... SKENARIO •Apa yang akan](https://reader031.vdocuments.site/reader031/viewer/2022022419/5a78d4cf7f8b9a70648d8ba7/html5/thumbnails/13.jpg)
TIGA PILAR DESAIN
![Page 14: INTERAKSI MANUSIA DAN MESIN Prinsip Desainbudhiirawan.staff.telkomuniversity.ac.id/files/2017/02/Materi-4... · 4. Dialog memiliki lingkup tertentu. 5. ... SKENARIO •Apa yang akan](https://reader031.vdocuments.site/reader031/viewer/2022022419/5a78d4cf7f8b9a70648d8ba7/html5/thumbnails/14.jpg)
METODOLOGI LUCID
LUCID = Logical User-Centered Interactive Design
1. Kembangkan konsep produk
2. Riset dan analisis kebutuhan
3. Konsep desain dan prototipe layar kunci
4. Desain iteratif dan perbaikan
5. Implementasikan software
6. Dukungan rollout
![Page 15: INTERAKSI MANUSIA DAN MESIN Prinsip Desainbudhiirawan.staff.telkomuniversity.ac.id/files/2017/02/Materi-4... · 4. Dialog memiliki lingkup tertentu. 5. ... SKENARIO •Apa yang akan](https://reader031.vdocuments.site/reader031/viewer/2022022419/5a78d4cf7f8b9a70648d8ba7/html5/thumbnails/15.jpg)
FOKUS KEPADA USER
1) Ketahui Siapa Pemakainya
2) Persona (karakter)
3) Cari tahu kebiasaan/budayanya
![Page 16: INTERAKSI MANUSIA DAN MESIN Prinsip Desainbudhiirawan.staff.telkomuniversity.ac.id/files/2017/02/Materi-4... · 4. Dialog memiliki lingkup tertentu. 5. ... SKENARIO •Apa yang akan](https://reader031.vdocuments.site/reader031/viewer/2022022419/5a78d4cf7f8b9a70648d8ba7/html5/thumbnails/16.jpg)
C. USER
![Page 17: INTERAKSI MANUSIA DAN MESIN Prinsip Desainbudhiirawan.staff.telkomuniversity.ac.id/files/2017/02/Materi-4... · 4. Dialog memiliki lingkup tertentu. 5. ... SKENARIO •Apa yang akan](https://reader031.vdocuments.site/reader031/viewer/2022022419/5a78d4cf7f8b9a70648d8ba7/html5/thumbnails/17.jpg)
KETAHUI SIAPA PEMAKAINYA
Siapa Mereka ?
Mungkin Dia tidak seperti Anda!
Bicaralah dengan Mereka
Awasi Mereka
Gunakan Imajinasi Anda
![Page 18: INTERAKSI MANUSIA DAN MESIN Prinsip Desainbudhiirawan.staff.telkomuniversity.ac.id/files/2017/02/Materi-4... · 4. Dialog memiliki lingkup tertentu. 5. ... SKENARIO •Apa yang akan](https://reader031.vdocuments.site/reader031/viewer/2022022419/5a78d4cf7f8b9a70648d8ba7/html5/thumbnails/18.jpg)
CARI TAHU KEBIASAAN/ BUDAYANYA
Mencari tahu kebiasaan user bisa dengan melakukan pengamatanlangsung.
Pengamatan seperti ini bisa di lakukan dimana saja user berinteraksi,baik dengan komputer maupun hal-hal yang lain.
Tingkat usia juga sangat mempengaruhi user dalam berinteraksidengan komputer.
![Page 19: INTERAKSI MANUSIA DAN MESIN Prinsip Desainbudhiirawan.staff.telkomuniversity.ac.id/files/2017/02/Materi-4... · 4. Dialog memiliki lingkup tertentu. 5. ... SKENARIO •Apa yang akan](https://reader031.vdocuments.site/reader031/viewer/2022022419/5a78d4cf7f8b9a70648d8ba7/html5/thumbnails/19.jpg)
PERSONA (KARAKTER)
Menjelaskan contoh user• Tidak diperlukan user yang nyata
Digunakan sebagai pengganti user• Apa yang dipikirkan Seorang User
Rincian masalah• Dibuat se-nyata mungkin
![Page 20: INTERAKSI MANUSIA DAN MESIN Prinsip Desainbudhiirawan.staff.telkomuniversity.ac.id/files/2017/02/Materi-4... · 4. Dialog memiliki lingkup tertentu. 5. ... SKENARIO •Apa yang akan](https://reader031.vdocuments.site/reader031/viewer/2022022419/5a78d4cf7f8b9a70648d8ba7/html5/thumbnails/20.jpg)
MEMBUAT PERSONA
Persona adalah suatu karakteristik yang diamati oleh orang lain ataudisebut juga dengan prototypical user, seperti :
• Imajinasi khusus, contohnya adalah user dengan tipe tertentu
• Tidak real tetapi hipotesis
• Digunakan sebagai rule play melalui desain interface
Contoh persona adalah perusahaan mobil yang mendesain produknya.
![Page 21: INTERAKSI MANUSIA DAN MESIN Prinsip Desainbudhiirawan.staff.telkomuniversity.ac.id/files/2017/02/Materi-4... · 4. Dialog memiliki lingkup tertentu. 5. ... SKENARIO •Apa yang akan](https://reader031.vdocuments.site/reader031/viewer/2022022419/5a78d4cf7f8b9a70648d8ba7/html5/thumbnails/21.jpg)
KRITERIA PERSONA YANG BAIK
Membuat program untuk user secara umum, tidak hanya end usertertentu saja dengan tujuan agar semua user dapat mempelajari danmenggunakannya.
Sifat user selalu elastis yang didefinisikan sebagai sumber ide-idebagi si pemrogram
Pemrogram juga harus memperhatikan semua latar belakang useryang nantinya akan menggunakan program yang akan dibuat karenasetiap individu user memiliki persona yang berbeda.
![Page 22: INTERAKSI MANUSIA DAN MESIN Prinsip Desainbudhiirawan.staff.telkomuniversity.ac.id/files/2017/02/Materi-4... · 4. Dialog memiliki lingkup tertentu. 5. ... SKENARIO •Apa yang akan](https://reader031.vdocuments.site/reader031/viewer/2022022419/5a78d4cf7f8b9a70648d8ba7/html5/thumbnails/22.jpg)
PERMASALAHAN PADA PENGEMBANGAN PRODUK
• User bersifat elastis, meski hari ini user telah puas dengan produk yangdigunakan belum tentu esok hari juga merasa puas.
• Oleh sebab itu masih ada tahap selanjutnya yaitu pengembanganproduk yang telah jadi untuk lebih memuaskan user
• Perlu kepercayaan diri yang tinggi, karena jika ragu-ragu untukmeluncurkan produknya maka produk tersebut tidak akan pernah adadi pasaran
![Page 23: INTERAKSI MANUSIA DAN MESIN Prinsip Desainbudhiirawan.staff.telkomuniversity.ac.id/files/2017/02/Materi-4... · 4. Dialog memiliki lingkup tertentu. 5. ... SKENARIO •Apa yang akan](https://reader031.vdocuments.site/reader031/viewer/2022022419/5a78d4cf7f8b9a70648d8ba7/html5/thumbnails/23.jpg)
IDE DESAIN
Anda di Sini
Ide yang Gila
Ide yang Lucu
Ide yang Mustahil
Lakukanapa yang
bisa
Praktek-kan
Benar & Tidak Ada Kesalahan
Barangyang sama
Ide yang Hebat
![Page 24: INTERAKSI MANUSIA DAN MESIN Prinsip Desainbudhiirawan.staff.telkomuniversity.ac.id/files/2017/02/Materi-4... · 4. Dialog memiliki lingkup tertentu. 5. ... SKENARIO •Apa yang akan](https://reader031.vdocuments.site/reader031/viewer/2022022419/5a78d4cf7f8b9a70648d8ba7/html5/thumbnails/24.jpg)
EVALUASI ANTARMUKA
• Penilaian terhadap sebuah aplikasi adalah tidak sama antar user.
• User yang baru pertama menggunakan sebuah aplikasi, tentunyamemberikan penilaian sulit terhadap aplikasi tersebut.
• Berbeda jauh dengan user yang sudah familiar dengan aplikasitersebut.
![Page 25: INTERAKSI MANUSIA DAN MESIN Prinsip Desainbudhiirawan.staff.telkomuniversity.ac.id/files/2017/02/Materi-4... · 4. Dialog memiliki lingkup tertentu. 5. ... SKENARIO •Apa yang akan](https://reader031.vdocuments.site/reader031/viewer/2022022419/5a78d4cf7f8b9a70648d8ba7/html5/thumbnails/25.jpg)
PENILAIAN USER
Contoh kasus pada penggunaan aplikasi Microsoft Word
Ada beberapa hal yang berpengaruh terhadap penilaian user kepada aplikasi Microsoft Word :
• Pengalaman
• Kebiasaan
• Lama belajar
• Kemudahan panduan
![Page 26: INTERAKSI MANUSIA DAN MESIN Prinsip Desainbudhiirawan.staff.telkomuniversity.ac.id/files/2017/02/Materi-4... · 4. Dialog memiliki lingkup tertentu. 5. ... SKENARIO •Apa yang akan](https://reader031.vdocuments.site/reader031/viewer/2022022419/5a78d4cf7f8b9a70648d8ba7/html5/thumbnails/26.jpg)
D. SKENARIO
![Page 27: INTERAKSI MANUSIA DAN MESIN Prinsip Desainbudhiirawan.staff.telkomuniversity.ac.id/files/2017/02/Materi-4... · 4. Dialog memiliki lingkup tertentu. 5. ... SKENARIO •Apa yang akan](https://reader031.vdocuments.site/reader031/viewer/2022022419/5a78d4cf7f8b9a70648d8ba7/html5/thumbnails/27.jpg)
SKENARIO
• Alur Cerita untuk Proses Desain
• Komunikasi dengan orang lain
• Validasi dengan model lainnya
• Pemahaman yang dinamis
• Linearitas
• Waktu adalah linear – Kehidupan adalah linear
• Tetapi jangan tunjukan Alternatif
![Page 28: INTERAKSI MANUSIA DAN MESIN Prinsip Desainbudhiirawan.staff.telkomuniversity.ac.id/files/2017/02/Materi-4... · 4. Dialog memiliki lingkup tertentu. 5. ... SKENARIO •Apa yang akan](https://reader031.vdocuments.site/reader031/viewer/2022022419/5a78d4cf7f8b9a70648d8ba7/html5/thumbnails/28.jpg)
SKENARIO
• Apa yang akan user inginkan untuk dikerjakan?
• Tahapan Perjalanan
• Apa yang mereka lihat (sketsa, screen shots)
• Apa yang mereka kerjakan (keyboard, mouse dll.)
• Apa yang mereka pikirkan?
• Menggunakan dan penggunaan kembali seluruh bagian desain
![Page 29: INTERAKSI MANUSIA DAN MESIN Prinsip Desainbudhiirawan.staff.telkomuniversity.ac.id/files/2017/02/Materi-4... · 4. Dialog memiliki lingkup tertentu. 5. ... SKENARIO •Apa yang akan](https://reader031.vdocuments.site/reader031/viewer/2022022419/5a78d4cf7f8b9a70648d8ba7/html5/thumbnails/29.jpg)
E. NAVIGASI
![Page 30: INTERAKSI MANUSIA DAN MESIN Prinsip Desainbudhiirawan.staff.telkomuniversity.ac.id/files/2017/02/Materi-4... · 4. Dialog memiliki lingkup tertentu. 5. ... SKENARIO •Apa yang akan](https://reader031.vdocuments.site/reader031/viewer/2022022419/5a78d4cf7f8b9a70648d8ba7/html5/thumbnails/30.jpg)
LEVEL
• Pilihan Widget
• menus, buttons etc.
• Desain Tampilan
• Desain Navigasi Aplikasi
• Lingkungan
• Aplikasi lainnya, O/S
![Page 31: INTERAKSI MANUSIA DAN MESIN Prinsip Desainbudhiirawan.staff.telkomuniversity.ac.id/files/2017/02/Materi-4... · 4. Dialog memiliki lingkup tertentu. 5. ... SKENARIO •Apa yang akan](https://reader031.vdocuments.site/reader031/viewer/2022022419/5a78d4cf7f8b9a70648d8ba7/html5/thumbnails/31.jpg)
1) DESAIN APLIKASI WEB
Pilihan Widget
Desain Tampilan
Desain Navigasi Aplikasi
Lingkungan
elements and tags <a href=“...”>
page design
site structure
the web, browser, external links
![Page 32: INTERAKSI MANUSIA DAN MESIN Prinsip Desainbudhiirawan.staff.telkomuniversity.ac.id/files/2017/02/Materi-4... · 4. Dialog memiliki lingkup tertentu. 5. ... SKENARIO •Apa yang akan](https://reader031.vdocuments.site/reader031/viewer/2022022419/5a78d4cf7f8b9a70648d8ba7/html5/thumbnails/32.jpg)
DESAIN LAYAR DAN LAYOUT
Prinsip Dasar Pengelompokan, Struktur, Permintaan Pengaturan Posisi Penggunaan Ruang Kosong
![Page 33: INTERAKSI MANUSIA DAN MESIN Prinsip Desainbudhiirawan.staff.telkomuniversity.ac.id/files/2017/02/Materi-4... · 4. Dialog memiliki lingkup tertentu. 5. ... SKENARIO •Apa yang akan](https://reader031.vdocuments.site/reader031/viewer/2022022419/5a78d4cf7f8b9a70648d8ba7/html5/thumbnails/33.jpg)
PRINSIP DASAR
ask Apa yang user kerjakan?
think Informasi apa , Pembanding , Permintaan
design Fungsi mengikuti form
![Page 34: INTERAKSI MANUSIA DAN MESIN Prinsip Desainbudhiirawan.staff.telkomuniversity.ac.id/files/2017/02/Materi-4... · 4. Dialog memiliki lingkup tertentu. 5. ... SKENARIO •Apa yang akan](https://reader031.vdocuments.site/reader031/viewer/2022022419/5a78d4cf7f8b9a70648d8ba7/html5/thumbnails/34.jpg)
PERANGKAT YANG TERSEDIA
1. Pengelompokan item
2. Permintaan item
3. Dekorasi - huruf, kotak dll.
4. Pengaturan posisi item
5. Ruang kosong diantara item
![Page 35: INTERAKSI MANUSIA DAN MESIN Prinsip Desainbudhiirawan.staff.telkomuniversity.ac.id/files/2017/02/Materi-4... · 4. Dialog memiliki lingkup tertentu. 5. ... SKENARIO •Apa yang akan](https://reader031.vdocuments.site/reader031/viewer/2022022419/5a78d4cf7f8b9a70648d8ba7/html5/thumbnails/35.jpg)
1. PENGELOMPOKAN DAN STRUKTUR
Lojik bersama-sama Pisik bersama-sama
Billing details:
Name
Address: …
Credit card no
Delivery details:
Name
Address: …
Delivery time
Order details:
item quantity cost/item cost
size 10 screws (boxes) 7 3.71 25.97
…… … … …
![Page 36: INTERAKSI MANUSIA DAN MESIN Prinsip Desainbudhiirawan.staff.telkomuniversity.ac.id/files/2017/02/Materi-4... · 4. Dialog memiliki lingkup tertentu. 5. ... SKENARIO •Apa yang akan](https://reader031.vdocuments.site/reader031/viewer/2022022419/5a78d4cf7f8b9a70648d8ba7/html5/thumbnails/36.jpg)
2. DEKORASI
Gunakan kotak untuk mengelompokan item lojik
Gunakan huruf untuk penekanan , judul
Tapi jangan terlalu banyak!!
ABCDEFGHIJKLMNOPQRSTUVWXYZ
![Page 37: INTERAKSI MANUSIA DAN MESIN Prinsip Desainbudhiirawan.staff.telkomuniversity.ac.id/files/2017/02/Materi-4... · 4. Dialog memiliki lingkup tertentu. 5. ... SKENARIO •Apa yang akan](https://reader031.vdocuments.site/reader031/viewer/2022022419/5a78d4cf7f8b9a70648d8ba7/html5/thumbnails/37.jpg)
3. PENGATURAN POSISI - TEKS
• Anda baca dari kiri ke kanan (English and European)
Pengaturan posisi rata kiri
Willy Wonka and the Chocolate Factory
Winston Churchill - A Biography
Wizard of Oz
Xena - Warrior Princess
Willy Wonka and the Chocolate Factory
Winston Churchill - A Biography
Wizard of Oz
Xena - Warrior Princess
Bagus untuk efek Khsusustetapi susah untuk dipindai
Membosankantapi enak dibaca
![Page 38: INTERAKSI MANUSIA DAN MESIN Prinsip Desainbudhiirawan.staff.telkomuniversity.ac.id/files/2017/02/Materi-4... · 4. Dialog memiliki lingkup tertentu. 5. ... SKENARIO •Apa yang akan](https://reader031.vdocuments.site/reader031/viewer/2022022419/5a78d4cf7f8b9a70648d8ba7/html5/thumbnails/38.jpg)
3. PENGATURAN POSISI - NAMA
• Biasaya memindai nama keluarga Menjadikannya Mudah
Alan Dix
Janet Finlay
Gregory Abowd
Russell Beale
Alan Dix
Janet Finlay
Gregory Abowd
Russell Beale
Dix , Alan
Finlay, Janet
Abowd, Gregory
Beale, Russell
![Page 39: INTERAKSI MANUSIA DAN MESIN Prinsip Desainbudhiirawan.staff.telkomuniversity.ac.id/files/2017/02/Materi-4... · 4. Dialog memiliki lingkup tertentu. 5. ... SKENARIO •Apa yang akan](https://reader031.vdocuments.site/reader031/viewer/2022022419/5a78d4cf7f8b9a70648d8ba7/html5/thumbnails/39.jpg)
3. PENGATURAN POSISI - ANGKA
Mana yang paling besar ?
532.56
179.3
256.317
15
73.948
1035
3.142
497.6256
![Page 40: INTERAKSI MANUSIA DAN MESIN Prinsip Desainbudhiirawan.staff.telkomuniversity.ac.id/files/2017/02/Materi-4... · 4. Dialog memiliki lingkup tertentu. 5. ... SKENARIO •Apa yang akan](https://reader031.vdocuments.site/reader031/viewer/2022022419/5a78d4cf7f8b9a70648d8ba7/html5/thumbnails/40.jpg)
3. PENGATURAN POSISI - ANGKA
Terlihat :
Angka panjang = Angka besar
Penempatan point desimal
Atau penempatan interger di kanan
627.865
1.005763
382.583
2502.56
432.935
2.0175
652.87
56.34
![Page 41: INTERAKSI MANUSIA DAN MESIN Prinsip Desainbudhiirawan.staff.telkomuniversity.ac.id/files/2017/02/Materi-4... · 4. Dialog memiliki lingkup tertentu. 5. ... SKENARIO •Apa yang akan](https://reader031.vdocuments.site/reader031/viewer/2022022419/5a78d4cf7f8b9a70648d8ba7/html5/thumbnails/41.jpg)
KOLOM MULTIPLE
• Memindai melintasi area yang berjauhan :(often hard to avoid with large data base fields)
sherbert 75
toffee 120
chocolate 35
fruit gums 27
coconut dreams 85
![Page 42: INTERAKSI MANUSIA DAN MESIN Prinsip Desainbudhiirawan.staff.telkomuniversity.ac.id/files/2017/02/Materi-4... · 4. Dialog memiliki lingkup tertentu. 5. ... SKENARIO •Apa yang akan](https://reader031.vdocuments.site/reader031/viewer/2022022419/5a78d4cf7f8b9a70648d8ba7/html5/thumbnails/42.jpg)
KOLOM MULTIPLE
• Menggunakan baris titik
sherbert 75
toffee 120
chocolate 35
fruit gums 27
coconut dreams 85
![Page 43: INTERAKSI MANUSIA DAN MESIN Prinsip Desainbudhiirawan.staff.telkomuniversity.ac.id/files/2017/02/Materi-4... · 4. Dialog memiliki lingkup tertentu. 5. ... SKENARIO •Apa yang akan](https://reader031.vdocuments.site/reader031/viewer/2022022419/5a78d4cf7f8b9a70648d8ba7/html5/thumbnails/43.jpg)
sherbert 75
toffee 120
chocolate 35
fruit gums 27
coconut dreams 85
KOLOM MULTIPLE
• Atau memberikan skala baris keabuan
![Page 44: INTERAKSI MANUSIA DAN MESIN Prinsip Desainbudhiirawan.staff.telkomuniversity.ac.id/files/2017/02/Materi-4... · 4. Dialog memiliki lingkup tertentu. 5. ... SKENARIO •Apa yang akan](https://reader031.vdocuments.site/reader031/viewer/2022022419/5a78d4cf7f8b9a70648d8ba7/html5/thumbnails/44.jpg)
KOLOM MULTIPLE
• Atau bahkan dengan pengaturan yang kurang baik
sherbert 75
toffee 120
chocolate 35
fruit gums 27
coconut dreams 85
![Page 45: INTERAKSI MANUSIA DAN MESIN Prinsip Desainbudhiirawan.staff.telkomuniversity.ac.id/files/2017/02/Materi-4... · 4. Dialog memiliki lingkup tertentu. 5. ... SKENARIO •Apa yang akan](https://reader031.vdocuments.site/reader031/viewer/2022022419/5a78d4cf7f8b9a70648d8ba7/html5/thumbnails/45.jpg)
RUANG DENGAN PEMISAH
![Page 46: INTERAKSI MANUSIA DAN MESIN Prinsip Desainbudhiirawan.staff.telkomuniversity.ac.id/files/2017/02/Materi-4... · 4. Dialog memiliki lingkup tertentu. 5. ... SKENARIO •Apa yang akan](https://reader031.vdocuments.site/reader031/viewer/2022022419/5a78d4cf7f8b9a70648d8ba7/html5/thumbnails/46.jpg)
RUANG DENGAN STRUKTUR
![Page 47: INTERAKSI MANUSIA DAN MESIN Prinsip Desainbudhiirawan.staff.telkomuniversity.ac.id/files/2017/02/Materi-4... · 4. Dialog memiliki lingkup tertentu. 5. ... SKENARIO •Apa yang akan](https://reader031.vdocuments.site/reader031/viewer/2022022419/5a78d4cf7f8b9a70648d8ba7/html5/thumbnails/47.jpg)
RUANG DENGAN SOROTAN
![Page 48: INTERAKSI MANUSIA DAN MESIN Prinsip Desainbudhiirawan.staff.telkomuniversity.ac.id/files/2017/02/Materi-4... · 4. Dialog memiliki lingkup tertentu. 5. ... SKENARIO •Apa yang akan](https://reader031.vdocuments.site/reader031/viewer/2022022419/5a78d4cf7f8b9a70648d8ba7/html5/thumbnails/48.jpg)
MEMASUKAN INFORMASI
• forms, dialogue boxes• presentation + data input
• masalah tata letak yang sama
• Penempatan posisi
• Layout yang Logis• Menggunakan analisis tugas
• Pengelompokan
• Permintaan alami untuk memasukan informasi• top-bottom, left-right (depending on culture)
• set tab order for keyboard entry
Name:
Address:
Alan Dix
Lancaster
Name:
Address:
Alan Dix
Lancaster
Name:
Address:
Alan Dix
Lancaster
?
![Page 49: INTERAKSI MANUSIA DAN MESIN Prinsip Desainbudhiirawan.staff.telkomuniversity.ac.id/files/2017/02/Materi-4... · 4. Dialog memiliki lingkup tertentu. 5. ... SKENARIO •Apa yang akan](https://reader031.vdocuments.site/reader031/viewer/2022022419/5a78d4cf7f8b9a70648d8ba7/html5/thumbnails/49.jpg)
MENYAJIKAN INFORMASI
purpose matters
• sort urutan (yang kolom, abjad numerik)
• text vs. diagram
• menyebarkan grafik vs. histogram
prinsip-prinsip presentasi kertas digunakan!
but add interactivity
• softens design choices
chap1
chap10
chap11
chap12
chap13
chap14
…
17
12
51
262
83
22
…
sizename size
chap10
chap5
chap1
chap14
chap20
chap8
…
12
16
17
22
27
32
…
name size
![Page 50: INTERAKSI MANUSIA DAN MESIN Prinsip Desainbudhiirawan.staff.telkomuniversity.ac.id/files/2017/02/Materi-4... · 4. Dialog memiliki lingkup tertentu. 5. ... SKENARIO •Apa yang akan](https://reader031.vdocuments.site/reader031/viewer/2022022419/5a78d4cf7f8b9a70648d8ba7/html5/thumbnails/50.jpg)
2). PHISYCAL DEVICE
Pilihan Widget
Desain Tampilan
Desain Navigasi Aplikasi
Lingkungan
controls buttons, knobs, dials
physical layout
modes of device
the real world
![Page 51: INTERAKSI MANUSIA DAN MESIN Prinsip Desainbudhiirawan.staff.telkomuniversity.ac.id/files/2017/02/Materi-4... · 4. Dialog memiliki lingkup tertentu. 5. ... SKENARIO •Apa yang akan](https://reader031.vdocuments.site/reader031/viewer/2022022419/5a78d4cf7f8b9a70648d8ba7/html5/thumbnails/51.jpg)
BUTTON
Ukuran Tombol yang terlalu besar Kemana tombol tersebut
berelasi ?• Banyak bagian kosong untuk
menempatkan teks (tidakproporsional)
things
the thing fromoutter space
more things
other things
![Page 52: INTERAKSI MANUSIA DAN MESIN Prinsip Desainbudhiirawan.staff.telkomuniversity.ac.id/files/2017/02/Materi-4... · 4. Dialog memiliki lingkup tertentu. 5. ... SKENARIO •Apa yang akan](https://reader031.vdocuments.site/reader031/viewer/2022022419/5a78d4cf7f8b9a70648d8ba7/html5/thumbnails/52.jpg)
MODES
Mengunci keyboard guna penggunaan tidak sengaja• Melepaskan kunci – tekan ‘c’ + ‘yes’ untuk konfirmsi
• Aksi yang sering dilakukan
Dalam kondisi lain• Jika dalam saku tombol ‘yes’ ketekan
• Maka akan masuk phone book
• dan pada phone book‘c’ – hapus‘yes’ – konfirmasi
… oops !
![Page 53: INTERAKSI MANUSIA DAN MESIN Prinsip Desainbudhiirawan.staff.telkomuniversity.ac.id/files/2017/02/Materi-4... · 4. Dialog memiliki lingkup tertentu. 5. ... SKENARIO •Apa yang akan](https://reader031.vdocuments.site/reader031/viewer/2022022419/5a78d4cf7f8b9a70648d8ba7/html5/thumbnails/53.jpg)
KENDALI PISIK
Pengelompokan item
• defrost settings
• type of food
• time to cook
type of food
time to cook
defrost settings
![Page 54: INTERAKSI MANUSIA DAN MESIN Prinsip Desainbudhiirawan.staff.telkomuniversity.ac.id/files/2017/02/Materi-4... · 4. Dialog memiliki lingkup tertentu. 5. ... SKENARIO •Apa yang akan](https://reader031.vdocuments.site/reader031/viewer/2022022419/5a78d4cf7f8b9a70648d8ba7/html5/thumbnails/54.jpg)
KENDALI PISIK
Pengelompokan item
Pemesanan item
1) type of heating
2) temperature
3) time to cook
4) start
4
4) start2
2) temperature
3
3) time to cook
11) type of heating
![Page 55: INTERAKSI MANUSIA DAN MESIN Prinsip Desainbudhiirawan.staff.telkomuniversity.ac.id/files/2017/02/Materi-4... · 4. Dialog memiliki lingkup tertentu. 5. ... SKENARIO •Apa yang akan](https://reader031.vdocuments.site/reader031/viewer/2022022419/5a78d4cf7f8b9a70648d8ba7/html5/thumbnails/55.jpg)
KENDALI PISIK
Pengelompokan item
Pemesanan item
Dekorasi• different colours
for different functions
• lines around related
buttons
Perbedaan warnaFungsi yang Berbeda
Arah yg berkaitan dgntombol (temp up/down)
![Page 56: INTERAKSI MANUSIA DAN MESIN Prinsip Desainbudhiirawan.staff.telkomuniversity.ac.id/files/2017/02/Materi-4... · 4. Dialog memiliki lingkup tertentu. 5. ... SKENARIO •Apa yang akan](https://reader031.vdocuments.site/reader031/viewer/2022022419/5a78d4cf7f8b9a70648d8ba7/html5/thumbnails/56.jpg)
KENDALI PISIK
Pengelompokan item
Pemesanan item
dekorasi
Pengaturan posisi• centered text in buttons
? easy to scan ?Mudah untuk dipindai ?
Teks ditengah pada tombol
![Page 57: INTERAKSI MANUSIA DAN MESIN Prinsip Desainbudhiirawan.staff.telkomuniversity.ac.id/files/2017/02/Materi-4... · 4. Dialog memiliki lingkup tertentu. 5. ... SKENARIO •Apa yang akan](https://reader031.vdocuments.site/reader031/viewer/2022022419/5a78d4cf7f8b9a70648d8ba7/html5/thumbnails/57.jpg)
KENDALI PISIK
Pengelompokan item
Pemesanan item
dekorasi
Pengaturan posisi
Ruang Kosong• Pemisah antar kelompok
![Page 58: INTERAKSI MANUSIA DAN MESIN Prinsip Desainbudhiirawan.staff.telkomuniversity.ac.id/files/2017/02/Materi-4... · 4. Dialog memiliki lingkup tertentu. 5. ... SKENARIO •Apa yang akan](https://reader031.vdocuments.site/reader031/viewer/2022022419/5a78d4cf7f8b9a70648d8ba7/html5/thumbnails/58.jpg)
F. PROTOTYPING
![Page 59: INTERAKSI MANUSIA DAN MESIN Prinsip Desainbudhiirawan.staff.telkomuniversity.ac.id/files/2017/02/Materi-4... · 4. Dialog memiliki lingkup tertentu. 5. ... SKENARIO •Apa yang akan](https://reader031.vdocuments.site/reader031/viewer/2022022419/5a78d4cf7f8b9a70648d8ba7/html5/thumbnails/59.jpg)
PROTOTYPING
• Tidak akan pernah langsung sukses di awal
• Jika pertama kali tidak langsung sukses …
prototype evaluatedesign
re-design
done!OK?
![Page 60: INTERAKSI MANUSIA DAN MESIN Prinsip Desainbudhiirawan.staff.telkomuniversity.ac.id/files/2017/02/Materi-4... · 4. Dialog memiliki lingkup tertentu. 5. ... SKENARIO •Apa yang akan](https://reader031.vdocuments.site/reader031/viewer/2022022419/5a78d4cf7f8b9a70648d8ba7/html5/thumbnails/60.jpg)
pitfalls of prototyping
• moving little by little … but to where
• Malverns or the Matterhorn?
1. need a good start point
2. need to understand what is wrong