Desain yang Buruk
• Apa yang tidak biasa dari gambar berikut?
• Tombol tape lebih dekat ke CD sedangkan tombol CD lebih dekat ke tape
Mengapa vending machine ini buruk
desain-nya?
• Harus menekan tombol
untuk mengaktifkan
reader
• Biasanya memasukkan
uang dulu sebelum
uang dulu sebelum
memilih
• Berbeda dengan
konvensi yang telah
dikenal
Desain yang Baik
• Mesin penjawab kelereng (Bishop, 1995)
• Berdasarkan pada
bagaimana objek sehari-hari bekerja
hari bekerja
• Mudah, intuitif, dan menyenangkan untuk digunakan
Desain yang baik dan buruk
• Apa yang salah pada remot Apex?
• Mengapa remot Tivo
memiliki desain yang jauh memiliki desain yang jauh lebih baik?
– Berbentuk kacang sehingga pas di tangan
– Layout yang logis dan berwarna, tombol-tombol yang berbeda
– Mudah untuk menemukan tombol
Apa yang didesain?
• Hal-hal yang perlu dipertimbangkan?
– Siapa yang menggunakan
– Aktivitas apa yang dilakukan – Tempat interaksi berlangsung
• Perlu mengoptimasi interaksi yang dilakukan user
dengan produk
– Sehingga interaksi tersebut memenuhi aktivitas dan kebutuhan user
Memahami Kebutuhan User
• Mempertimbangkan kelebihan dan kekurangan user
• Memperhitungkan hal-hal yang akan membantu bagaimana user melakukan sesuatu saat ini
• Memikirkan hal-hal yang akan menghasilkan pengalaman • Memikirkan hal-hal yang akan menghasilkan pengalaman
berkualitas bagi user
• Mendengarkan hal-hal yang diinginkan user dan melibatkan mereka
• Menggunakan teknik user-based yang telah teruji selama proses desain
Aktivitas
• Bagaimana perbedaan menelepon dengan
menggunakan:
– Telepon selular
– Telepon selular
– Telepon umum?
• Perhitungkan jenis user, jenis aktivitas dan
konteks penggunaan
Apakah Desain Interaksi itu?
• Mendesain produk yang interaktif untuk
memudahkan pengguna berkomunikasi dan
berinteraksi dalam kehidupan sehari-hari
berinteraksi dalam kehidupan sehari-hari
dan pekerjaan
– Sharp, Rogers and Preece (2007)
• Desain ruang komunikasi dan interaksi
manusia
Tujuan Desain Interaksi
• Mengembangkan produk yang usable
– Usability artinya mudah, efektif dan
menyenangkan untuk digunakan
menyenangkan untuk digunakan
Desain yang bagaimana?
• Beberapa istilah lain yang digunakan untuk menggambarkan hal-hal yang di-desain:
– user interface design, software design, user-centered design, product design, web design, experience design design, product design, web design, experience design (UX)
• Desain interaksi merupakan istilah yang mencakup aspek-aspek di atas
– fundamental untuk semua disiplin, bidang, and pendekatan yang berkaitan dengan penelitian dan desain sistem berbasis komputer bagi pengguna
Hubungan DI, IMK dan bidang
lainnya
• Disiplin ilmu yang berkontribusi pada DI:
– Psychology
– Social Sciences
– Social Sciences
– Computing Sciences
– Engineering
– Ergonomics
– Informatics
Hubungan DI, IMK dan bidang
lainnya
• Desain praktis yang berkontribusi pada DI:
– Graphic design
– Product design
– Product design
– Artist-design
– Industrial design
– Film industry
Hubungan DI, IMK dan bidang
lainnya
• Bidang-bidang interdisiplin yang
‘melakukan’ DI:
– HCI
– HCI
– Human Factors
– Cognitive Engineering
– Cognitive Ergonomics
– Computer Supported Co-operative Work
– Information Systems
Bekerja dalam tim multidisiplin
• Banyak orang dengan latar belakang berbeda
terlibat
• Perbedaan perspektif dan cara melihat dan
membicarakan sesuatu
membicarakan sesuatu
• Keuntungan:
– Lebih banyak menghasilkan ide-ide dan desain
• Kerugian:
– Susah untuk berkomunikasi dan melanjutkan desain yang sedang dibuat
Desain Interaksi dalam Bisnis
• Meningkatnya jumlah konsultan DI, contoh yang terkenal:
– Nielsen Norman Group: “membantu perusahaan memasuki abad konsumen, mendesain produk dan jasa human-centered”
– Cooper: ”Dari penelitian dan produk menuju desain goal-realated” – Swim: “menyediakan berbagai jenis layanan desain yang menangani – Swim: “menyediakan berbagai jenis layanan desain yang menangani
kebutuhan pengembangan produk”
– IDEO: “menciptakan produk, jasa dan lingkungan untuk perusahaan menjadi pionir cara baru untuk menyediakan nilai pada pelanggan”
QuickTime™ and a
TIFF (Uncompressed) decompressor are needed to see this picture.
Profesional dalam bisnis DI
• interaction designers – orang-orang yang terlibat dalam desain
seluruh aspek interaktif sebuah produk
• usability engineers - orang-orang yang fokus pada evaluasi produk,
menggunakan metode dan prinsip-prinsip usability
• web designers - orang-orang yang mengembangkan dan membuat
desain visual sebuah website, seperti layout
• information architects - orang-orang yang menghasilkan ide-ide
bagaimana merencanakan dan membangun produk interaktif
• user experience designers (UX) - orang-orang yang selain melakukan
tugas-tugas yang disebutkan di atas juga melaksanakan studi lapangan untuk memberitahukan desain dari produk
User Experience
• Bagaimana sebuah produk berperilaku dan
digunakan oleh pengguna dalam dunia
nyata
nyata
• Perasaan pengguna tentangnya, dan kepuasan saat
menggunakannya, melihatnya, memegangnya, dan
membuka dan menutupnya
• Bukan mendesain user experience, namun
mendesain untuk sebuah user experience
Mengapa User Experience iPod
sedemikian sukses?
Proses pada Desain Interaksi
• Identifikasi kebutuhan dan menemukan
requirement
untuk user experience
• Mengembangkan desain alternatif
• Mengembangkan desain alternatif
• Membangun prototipe interaktif yang
dapat dikomunikasikan dan diukur
• Mengevaluasi apa yang telah dibuat
selama prosesnya dan user experience
yang ditawarkan
Karakteristik Inti Desain Interaksi
• Pengguna harus dilibatkan selama
pengembangan proyek
• Kegunaan spesifik dan tujuan user
• Kegunaan spesifik dan tujuan user
experience
harus diidentifikasi,
didokumentasi dengan jelas, dan disetujui
pada awal proyek
Mengapa Sampai Sejauh Ini?
• Membantu perancang:
– Mengerti bagaimana mendesain produk interaktif yang sesuai dengan apa yang orang inginkan, perlukan dan mungkin harapkan
– Memahami bahwa satu ukuran tidak akan muat untuk – Memahami bahwa satu ukuran tidak akan muat untuk
semua
• Contohnya, remaja sangat berbeda dari orang dewasa – Identifikasi asumsi mereka yang salah mengenai
kelompok pengguna tertentu
• Contohnya, tidak semua orang tua memerlukan atau menginginkan huruf yang besar
Apakah perbedaan-perbedaan
kultur penting?
• 5/21/1960 lawan 21/5/1960?
– Manakah yang digunakan untuk layanan internasional dan formulir online?
• Mengapa suatu produk tertentu, seperti iPod,
diterima secara universal oleh semua orang di
seluruh dunia sementara website didesain berbeda
dan ditanggapi secara berbeda pula oleh orang
yang berasal dari kultur berbeda?
Anna, IKEA agen penjualan
online
• Didesain berbeda untuk pelanggan di UK dan US • Apa perbedaannya dan
yang mana? yang mana?
• Apa yang harus diubah pada penampilan Anna untuk negara yang lain, seperti India, Afrika Selatan, atau China?
Tujuan usability
• Efektif untuk digunakan
• Efisien untuk digunakan
• Aman untuk digunakan
• Aman untuk digunakan
• Mempunyai fungsi yang baik
• Mudah dipelajari
• Mudah mengingat cara penggunaan
Aktivitas mengenai usability
• Berapa lama sebaiknya hal berikut
dilakukan dan pada kenyataannya berapa
lama hal berikut dapat dilakukan:
– Menggunakan sebuah DVD player untuk
– Menggunakan sebuah DVD player untuk
memutar sebuah film?
– Menggunakan sebuah DVD recorder untuk
merekan dua program?
– Menggunakan sebuah kakas web browser untuk
membuat sebuah website?
Tujuan user experience
• memuaskan • memuaskan secara estetis • menggembirakan • mendukung kreatifitas • melibatkan • memberi penghargaan
• menyenangkan • kesenangan
• memberi semangat • profokatif • memberi semangat • profokatif
• menghibur • memberi kejutan
• membantu • meningkatkan pergaulan
• memotivasi • menantang
• terpuaskan secara emosional
• membosankan • mengganggu
• membuat frustasi • mengganggu karena terlalu
sempurna
Usability dan user experience
• Pemilihan istilah untuk menyampaikan perasaan manusia, emosi, dll, dapat membantu desainer mengerti
keanekaragaman sifat dasar user experience
• Bagaimana membedakan tujuan usability dengan tujuan • Bagaimana membedakan tujuan usability dengan tujuan
user experience?
• Apakah terdapat trade-off antara kedua tujuan tersebut? – Contoh: Apakah terdapat sebuah produk yang benar-benar
menyenangkan dan aman?
• Seberapa mudah mengukur tujuan usability dibandingkan dengan user experience?
Prinsip-prinsip desain
• Abstraksi yang dapat digeneralisasi untuk
memikirkan mengenai perbedaan aspek desain
• Hal-hal yang boleh dan tidak dilakukan dalam
• Hal-hal yang boleh dan tidak dilakukan dalam
desain interkasi
• Apa yang disediakan dan apa yang tidak
disediakan pada antarmuka
• Diperoleh dari gabungan pengetahuan berbasis
teori, pengalaman, dan pengertian umum
Visibility
• Ini adalah sebuah panel kontrol untuk sebuah lift • Bagaimana menggunakan lift tersebut?
• Tekan sebuah tombol untuk memilih lantai yang diinginkan?
diinginkan?
• Tidak terjadi apa-apa. Tekan tombol yang lain? Masih tetap tidak terjadi apa-apa. Apa yang Anda butuhkan?
Hasil yang didapatkan tidak terlihat seperti apa yang dilakukan!
Sumber:
www.baddesigns.com
Visibility
…Anda harus memasukan kartu ke dalam celah di dekat tombol untuk membuat lift dapat bekerja!
Bagaimana Anda dapat membuat aksi ini lebih dapat
terlihat?
• buat card reader terlihat jelas
• menyediakan sebuah pesan suara yang mengatakan apa yang harus dilakukan (bahasa apa yang digunakan?) • menyediakan sebuah keterangan yang besar di sebelah
card reader yang dapat langsung terlihat ketika seseorang masuk ke dalam lift
• membuat beberapa bagian terlihat jelas
• membuat apa yang harus dilakukan terlihat jelas
Apa yang harus dilakukan jika pengguna
mengenakan baju berwarna hitam?
• Kontrol otomatis dapat
membuatnya lebih sulit
digunakan
digunakan
Umpan balik
• Mengirim informasi kepada pengguna
mengenai apa yang telah dilakukan
• Termasuk suara, highlighting, animasi, dan
kombinasi ketiganya
kombinasi ketiganya
– Contoh: ketika tombol pada layar diklik,
berikan umpan balik berupa suara atau red
highlight
“ccclichhk”
Batasan
• Batasi kemungkinan aksi yang dapat
dilakukan
• Membantu untuk mencegah pengguna dari
pemilihan opsi yang salah
• Membantu untuk mencegah pengguna dari
pemilihan opsi yang salah
• Objek fisik yang dapat didesain sesuai
dengan batasan
– Contoh: hanya satu cara untuk memasukan
sebuah kunci ke dalam kunci pintu
Desain yang logis atau ambigu?
• Dimana Anda menancapkan tetikus?
• Dimana Anda menancapkan papan tuts?
papan tuts?
• Konektor yang atas atau bawah?
• Apakah ikon dengan kode warna membantu?
Sumber: www.baddesigns.com
Bagaimana mendesainnya agar
lebih logis
(i) A menyediakan
pemetaan bersebelahan antara ikon dengan
konektor
(ii) B menyediakan tanda dengan warna untuk
memperlihatkan asosiasi antar konektor dengan label
Sumber: www.baddesigns.com
Konsistensi
• Mendesain antarmuka agar mempunyai operasi
yang serupa dan menggunakan elemen yang
serupa untuk task yang serupa
• Contoh operasi yang konsisten: menyorot objek
• Contoh operasi yang konsisten: menyorot objek
grafik dengan tombol kiri mouse, penggunaan
short-cut dengan tombol ctrl+huruf awal operasi
(ctrl+C, ctrl+P, dsb)
• Keuntungan utama dari antarmuka yang konsisten
adalah antarmuka lebih mudah dipelajari dan
Kapan Konsistensi Runtuh
• Apa yang terjadi jika terdapat lebih dari satu
perintah yang dimulai dengan huruf yang sama?
– Contohnya, save, spelling, select, style
• Harus mencari inisial lain atau kombinasi tombol,
sehingga melanggar aturan konsistensi
– Contohnya, ctrl+S, ctrl+Sp, ctrl+shift+L
• Meningkatkan beban belajar pada pengguna,
Konsistensi Internal dan Eksternal
• Konsistensi internal: desain operasi agar
berperilaku sama dalam sebuah aplikasi.
• Konsistensi eksternal: desain operasi,
• Konsistensi eksternal: desain operasi,
antarmuka, dan sebagainya, agar serupa
pada aplikasi dan perangkat yang berberda
Contoh Inkonsistensi Eksternal
1 2 3 7 8 9
(a) telepon, remote control (b) kalkulator, keypad komputer 1 2 3 4 5 6 7 8 9 7 8 9 1 2 3 4 5 6 0 0
Affordance
• Atribut suatu objek yang membuat pengguna
mengetahui bagaimana cara menggunakannya
• Norman (1988) menggunakan istilah ini untuk
mendiskusikan desain dari objek yang dijumpai
sehari-hari
mendiskusikan desain dari objek yang dijumpai
sehari-hari
• Sejak saat itu, menjadi populer dalam desain
interaksi untuk mendiskusikan bagaimana
mendesain antarmuka objek
– Contohnya, scrollbar agar digerakkan ke atas dan ke bawah, ikon agar diklik
Apa yang ‘Affordance’ Tawarkan
terhadap Desain Interaksi?
• Antarmuka bersifat virtual dan tidak memiliki affordances sebagaimana objek fisik
• Norman berpendapat bahwa tidak masuk akal untuk • Norman berpendapat bahwa tidak masuk akal untuk
berbicara tentang antarmuka dalam artian affordance yang ‘nyata’
• Sebaliknya, antarmuka lebih sesuai dikonsepkan sebagai ‘perceived’ affordance
– Learned conventions dari pemetaan arbiter(?) antara aksi dan efeknya pada antarmuka
Kegiatan
– Physical affordance:
• Bagaimana affordance dari objek fisik berikut? Apakah mereka obvious (wajar?)?
Kegiatan
– Virtual affordance
Bagaimana affordance dari objek layar berikut? Bagaimana jika Anda pengguna pemula?
Akankah Anda mengetahui apa yang harus dilakukan Akankah Anda mengetahui apa yang harus dilakukan
Prinsip Usability
• Serupa dengan prinsip desain, namun lebih
baku
• Dipakai terutama sebagai dasar untuk
• Dipakai terutama sebagai dasar untuk
mengevaluasi sistem
• Memberikan framework untuk evaluasi
secara heuristik
Prinsip Usability
• Visibilitas dari status sistem
• Sesuai antara sistem dan dunia nyata • Kendali pengguna dan kebebasan • Konsistensi dan standard
• Membantu pengguna mengenali, mendiagnosa dan kembali dari kesalahan
• Pencegahan kesalahan
• Pengenalan, ketimbang pengingatan • Fleksibilitas dan efisiensi penggunaan • Desain yang estetis dan minimalis
