LECTURE NOTES

ISYS6601 - User Experience Research

and Design
Week 6

Techniques for Designing UX : Design

 LEARNING OUTCOMES

1. Peserta diharapkan mampu mengaplikasikan teknik – teknik yang digunakan dalam

mendesain pengalaman pengguna / user experience dalam pengembangan sistem

OUTLINE MATERI :

1. Introduction

2. UX Design

3. Metaphors and blends in design

4. Conceptual design

5. Physical design

6. Designing interactions
 Introduction

Gambar 9.1 adalah bagian bawah dari Gambar 3.13, yang kita gunakan sebelumnya untuk
mengilustrasikan keseluruhan proses desain. Ini menunjukkan proses desain konseptual dan fisik
(proses direpresentasikan sebagai awan) dan produk desain yang dihasilkan pada tahap ini
(direpresentasikan sebagai kotak). Spesifikasi sistem minimum adalah model konseptual,
sekumpulan kasus penggunaan, dan bahasa desain. Diambil di samping pernyataan persyaratan
dan korpus skenario, ini merupakan spesifikasi sistem yang memuaskan yang dapat diterapkan
oleh tim pengembangan.

Desain konseptual berkaitan dengan sampai pada deskripsi abstrak dari sistem - logika, fungsi,
struktur dan isinya - tetapi tidak dengan bagaimana struktur dan fungsi harus diwujudkan secara
fisik. Desain fisik berkaitan dengan:

• Siapa melakukan apa dalam hal alokasi fungsi dan konten antara orang dan artefak

ISYS6601 – User Experience Research and Design

 • Saluran media apa yang akan digunakan, bagaimana mereka berhubungan satu sama lain
dan apa titik kontaknya

• Bagaimana artefak dan perangkat akan terlihat dan bagaimana perilakunya.

Perbedaan antara desain konseptual dan fisik tidak menentukan bahwa desain konseptual harus
diselesaikan sebelum desain fisik dimulai. Analis dan desainer akan mengulang di antara dua
tingkat deskripsi desain ini dan akan memperbaiki beberapa desain fisik keputusan untuk
memahami tingkat konseptual dengan lebih baik. Banyak desain fisik awal terjadi selama proses
membayangkan. Iterasi ini akan melibatkan berbagai macam evaluasi dengan orang-orang
sehingga kami dapat memeriksa apakah desain tersebut benar-benar memenuhi kebutuhan
mereka. Keuntungan mendesain pada tingkat konseptual sebelum detail desain fisik diperbaiki,
bagaimanapun, adalah bahwa hal itu menghindari masalah 'fiksasi desain' dan mempertahankan
ruang desain yang luas di mana alternatif dapat dipertimbangkan selama mungkin.

ISYS6601 – User Experience Research and Design

 UX Design
Ingatlah bahwa UX adalah orang yang bertindak, merasakan, merasakan, dan membuat makna
dalam situasi tertentu. Ini mencakup persepsi dan sensasi menggunakan artefak atau layanan
dalam konteks tertentu. Ini dapat mencakup bagaimana orang menjadi sadar bahwa ada potensi
pengalaman, antisipasi untuk terlibat dalam pengalaman, terungkapnya pengalaman itu sendiri
dan refleksi pada pengalaman setelah keterlibatan yang sebenarnya telah selesai. UX
menyangkut aspek fisik, sosial, psikologis, emosional dan ideologis dari pengalaman dan
bagaimana hal ini berkembang seiring waktu. Ini menyangkut berbagai jenis keterlibatan dengan
sistem, produk atau layanan yang dialami orang yang berbeda sebagai konsumen, produsen, dan
pembagi. Unsur-unsur UX meliputi strategi, ruang lingkup, struktur, kerangka dan karakteristik
permukaannya (Garrett, 2011).

UX yang baik berasal dari desainer yang memiliki model konseptual yang solid dari keseluruhan
perangkat dan ekologi layanan. Ini akan membantu memberikan arsitektur informasi yang baik,
yang akan membantu pengguna untuk mengembangkan model mental yang jelas dari strategi,
ruang lingkup dan struktur.

Karakteristik kerangka dan permukaan menggambarkan bahasa desain yang perlu dipahami dan
dihargai pengguna secara estetis.

Menjelajahi konsep desain

Bill Verplank (Verplank, 2007) adalah seorang desainer interaksi yang telah membuat sketsa dan
mendesain selama bertahun-tahun.

Dia berpendapat bahwa desain interaksi adalah 'desain untuk penggunaan manusia' dan berfokus
pada tiga hal utama, yang dia ciri sebagai:

• Apa kabar?

• Bagaimana perasaanmu?

• Bagaimana Anda tahu?

Menjelajahi desain ruang

Desain dapat dipikirkan melalui konsep desain ruang. Ruang desain membatasi desain di
beberapa dimensi sementara memungkinkan eksplorasi alternatif di dimensi lain (Beaudouin-
Lafon dan Mackay, 2012).

ISYS6601 – User Experience Research and Design

John Carroll (misalnya Carroll, 2000) menunjukkan bahwa dalam pekerjaan desain sering kali
ada pengorbanan yang perlu dipertimbangkan dan fitur desain dapat mengarah pada hasil positif
dan negatif. Dia merekomendasikan untuk mencantumkan fitur positif dan negatif dari suatu
desain di samping fitur, sebagai 'klaim'.

ISYS6601 – User Experience Research and Design

 Metaphors and blends in design
Metafora umumnya dipandang mengambil konsep dari satu domain (disebut domain sumber,
atau kendaraan) dan menerapkannya ke domain lain (target, atau tenor).

Dalam pengembangan sistem interaktif kami terus mencoba mendeskripsikan domain baru
(aplikasi baru, desain berbeda, fasilitas interaktif baru) kepada orang-orang.

Jadi kita harus menggunakan metafora untuk mendeskripsikan domain baru ini dalam istilah
yang lebih familiar.

Blackwell (2006) memberikan perlakuan komprehensif tentang peran metafora dalam desain
sistem interaktif. Setelah beberapa saat penggunaan metafora dari suatu istilah menjadi mengakar
dalam bahasa sedemikian rupa sehingga orang lupa bahwa itu pernah menjadi metafora.

Metafora navigasi

Metafora yang mungkin berguna untuk memikirkan navigasi memiliki asosiasi yang berbeda.
Hutan belantara, misalnya, menakutkan, membingungkan, mempesona. Gurun pasir
mengintimidasi dan indah tetapi tidak memiliki landmark. Metafora seperti itu mungkin
mendorong untuk menempa jalan setapak, menikmati pemandangan dan keluar. Hutan belantara
dan gurun bisa jadi

termasuk dalam metafora lanskap keseluruhan di mana berbagai jenis medan mewakili jenis
informasi yang berbeda. Metafora ini mendorong eksplorasi oleh pengguna; sistem menyediakan
metafora tingkat tinggi, tetapi pengguna menyediakan sendiri struktur yang lebih detail.

Langit malam menawarkan jenis ruang yang berbeda. Bagi mata manusia, itu berisi objek,
kelompok dan pola, dan itu sangat besar. Ini mendukung kegiatan pemetaan dan
mengidentifikasi objek. Namun, relatif sedikit jenis objek di langit malam (galaksi, bintang,
planet). Ini adalah konfigurasi dan sub-tipe dari objek-objek ini yang menarik. Konsep fiksi
ilmiah seperti drive warp dan lubang cacing dapat digunakan untuk transportasi cepat dan ajaib
ke bagian ruang yang jauh. Laut terbuka adalah metafora lainnya. Ini mendorong perbedaan
antara permukaan dan kedalaman. Oleh karena itu, wajar untuk menganggap banyak informasi
tersembunyi di bawah permukaan dan hanya tersedia untuk dilihat jika pengguna menyelam ke
bawah. Arus dapat menghubungkan benua dan pulau serta membawa orang ke tempat yang tidak
terduga. Orang dapat mencari pulau informasi; nusantara menyediakan cluster. Sebuah museum
telah disusun untuk memungkinkan penjelajahan gratis, namun juga disusun untuk memfasilitasi
pembelajaran. Perpustakaan cocok untuk menemukan informasi spesifik; itu terorganisir dan
terstruktur dengan baik. Metafora ini tidak dimaksudkan untuk menunjukkan bahwa antarmuka

ISYS6601 – User Experience Research and Design

ke produk tertentu tampak seperti gurun, hutan belantara, atau perpustakaan (meskipun
terkadang metafora antarmuka eksplisit seperti itu dapat berguna); Idenya di sini adalah
memikirkan aktivitas dengan cara yang berbeda.

Metafora bukan hanya tentang kesusastraan, itu adalah fundamental bagi cara berpikir kita.

Lakoff dan Johnson (1981, 1999) dan rekan-rekan mereka telah mengerjakan teori metafora
mereka selama lebih dari 20 tahun. Mereka menggambarkan filosofi 'pengalaman' atau semantik
kognitif.

Gambar 9.5 mengilustrasikan gagasan perpaduan ini. Perpaduan yang dihasilkan dari
menyatukan dua domain dengan cara ini akan memiliki beberapa fitur yang tidak ada di domain
asli.

ISYS6601 – User Experience Research and Design

Campuran memiliki struktur yang muncul sebagai hasil dari menyatukan dua rangkaian konsep
(dari domain sumber dan target). Jadi, jendela komputer memiliki fitur yang berbeda dari jendela
nyata dan perintah komputer sebelumnya.

Namun, ada beberapa prinsip untuk desain metafora yang baik:

• Integrasi.

• Membongkar.

• Topologi.

• Analisis.

• Rancangan.

ISYS6601 – User Experience Research and Design

 Conceptual design
Desain konseptual menggunakan scenario. Sebuah korpus skenario dikembangkan yang harus
didiskusikan dan dievaluasi pada sesi tim desain dan dengan partisipasi pemangku kepentingan.

Meskipun secara dangkal mudah dibuat, ada sejumlah cara di mana skenario dapat dibuat lebih
efektif:

• Lengkapi skenario dengan beberapa teknik membayangkan yang lebih visual.

• Dalam tim desain yang besar, masukkan data dan material yang nyata sehingga orang
yang tidak terlibat langsung dapat mengapresiasi detail yang konkret.

• Pikirkan baik-baik tentang asumsi yang mendasari.

• Sertakan karakterisasi yang baik dan kembangkan sejumlah persona. Jika ini dilakukan
dengan baik, anggota tim mulai berbicara tentang karakter - 'Jika Anda merancangnya
seperti itu, apa yang akan terjadi jika nenek mencoba menggunakannya?'

• Memberikan latar belakang kontekstual yang kaya - ini mendasari keputusan desain
dalam kehidupan nyata, memaksa desainer untuk berpikir tentang kepraktisan dan
penerimaan.

Anggota tim dapat menulis versi konkret mereka sendiri dari skenario konseptual yang
mencerminkan perhatian khusus mereka. Ini bisa disatukan dan tumpang tindih dihilangkan.

Tujuannya adalah untuk menghasilkan kumpulan skenario yang mencakup semua kegunaan
utama dan fungsionalitas produk. Tidak mungkin menulis skenario untuk semua kemungkinan
variasi penggunaan, tetapi skenario yang dihasilkan harus mencakup:

• Interaksi yang khas dari sejumlah situasi penggunaan yang serupa

• Masalah desain yang sangat penting untuk fokus proyek

• Area yang persyaratannya tidak jelas

• Aspek apa pun yang penting bagi keselamatan.

Bekerja dengan sekumpulan skenario dengan cara ini membutuhkan empat tahap:

• Analisis skenario individu, bedakan antara tindakan tertentu dan aktivitas yang lebih
umum dan tingkat yang lebih tinggi.

ISYS6601 – User Experience Research and Design

 • Meringkas objek dan tindakan dari setiap skenario, menggabungkan tindakan serupa atau
identik jika diperlukan.

• Satukan analisis dari masing-masing skenario, susun mereka ke dalam objek yang
diringkas, tindakan, dan aktivitas yang lebih umum.

• Gabungkan tindakan dan objek yang identik dan beri mereka satu nama.

Teknik diagram

Hasil analisis objek dapat direpresentasikan sebagai model objek, atau model hubungan entitas
seperti yang diilustrasikan pada Gambar 9.6.

Ini dapat dibaca sebagai Katalog Daftar Putar yang terdiri dari banyak Daftar Putar, meskipun
setiap Daftar Putar hanya ada pada satu Katalog Daftar Putar. Sebuah Daftar Putar terdiri dari
banyak trek. Setiap lagu hanya ada di satu Daftar Putar dan satu Daftar Lagu.

Diagram relasi entitas pada Gambar 9.7 mencakup notasi yang menunjukkan kondisi partisipasi
(opsional atau wajib) entitas dalam relasi dan beberapa definisi garis besar entitas dalam
kaitannya dengan atribut yang dikandungnya. Atribut dapat ditampilkan pada diagram sebagai
oval jika diperlukan.

ISYS6601 – User Experience Research and Design

 Physical design
Desain fisik berkaitan dengan bagaimana segala sesuatunya akan bekerja dan dengan merinci
tampilan dan nuansa produk.

Desain fisik adalah tentang penataan interaksi menjadi urutan logis dan tentang memperjelas dan
menyajikan alokasi fungsi dan pengetahuan antara orang dan perangkat.

Ada tiga komponen untuk desain fisik:

• Desain operasional berkaitan dengan menentukan bagaimana segala sesuatu bekerja dan
bagaimana konten disusun dan disimpan.

• Desain representasional berkaitan dengan penetapan warna, bentuk, ukuran dan tata letak
informasi. Ini berkaitan dengan gaya dan estetika.

• Desain interaksi dalam konteks ini berkaitan dengan alokasi fungsi untuk manusia atau
teknologi dan dengan penataan dan pengurutan interaksi.

Desain skeuomorphic

Skeuomorphic design adalah mendesain sesuatu yang secara fisik menyerupai sesuatu dari masa
lalu. Ini mungkin bekerja cukup baik jika membantu orang mentransfer fungsionalitas dari objek
yang sudah dikenal ke yang baru dan desain skeuomorfik dapat menggunakan metafora visual
eksplisit untuk membangun metafora konseptual. Tetapi seringkali penggunaan desain
skeuomorphic tampak serampangan, tidak perlu dan estetika yang ketinggalan zaman.

Apple telah mendapat banyak kritik dalam sistem operasi macOS-nya karena membuat dudukan
majalah elektronik terlihat seperti rak buku kayu kuno dan membuat kalender terlihat seperti
kalender kulit kuno. Namun, Apple berpromosi

desain skeuomorfik dalam pedoman pengalaman penggunanya, mengatakan: 'Di iPhone, orang
langsung tahu apa yang dilakukan aplikasi Voice Memo, dan cara menggunakannya, karena
aplikasi ini menyajikan gambar fokus yang dirender dengan indah (mikrofon) dan kontrol
realistis' (Gambar 9.8) .

ISYS6601 – User Experience Research and Design

Bahasa desain

Bahasa desain terdiri dari:

• Seperangkat elemen desain seperti penggunaan warna, gaya dan jenis tombol, slider, dan
widget lainnya

• Beberapa prinsip komposisi (yaitu aturan untuk menyusunnya)

• Koleksi situasi kualifikasi - konteks dan bagaimana pengaruhnya terhadap aturan.

Rheinfrank dan Evenson (1996) menekankan bahwa bahasa desain memiliki pengaruh paling
besar ketika mereka telah tertanam dalam dan ketika orang menggunakannya dan
mengeksploitasinya secara tidak sadar. Metode desain mereka termasuk mengembangkan bahasa
desain melalui:

• Karakterisasi - proses mendeskripsikan asumsi yang ada dan bahasa desain yang sudah
ada sebelumnya

ISYS6601 – User Experience Research and Design

 • Pendaftaran ulang - pembuatan asumsi baru yang ditetapkan melalui eksplorasi tren dan
kebutuhan melalui penelitian lapangan

• Pengembangan dan demonstrasi - menggunakan papan cerita, prototipe, dan teknik

membayangkan lainnya

Evaluasi reaksi terhadap desain

Evolusi bahasa dari waktu ke waktu. Tidak peduli seberapa bagus sebuah desain, itu hanya akan
bertahan lama - sampai keadaan memaksanya untuk ditinjau kembali.

Bahasa desain Microsoft

Dimulai dengan platform seluler Windows 7 dan beralih ke desktop di Windows 8, Microsoft
memperkenalkan bahasa desain baru untuk produknya. Awalnya disebut 'Metro', inspirasi bahasa
dijelaskan di situs web perusahaan sebagai tanda cetak dan kemasan yang dipengaruhi Swiss
serta rambu kereta api dengan fokus pada gerakan dan konten di atas krom (Gambar 9.9). Bahasa
telah berkembang lebih jauh di Windows 8 dan Windows 10.

Fitur utama dari bahasa desain adalah:

• Gerakan: sistem dibuat untuk menghidupkan antarmuka dengan mengembangkan

serangkaian gerakan atau animasi yang konsisten yang memberikan konteks untuk
kegunaan.

• Tipografi: menargetkan keseimbangan yang tepat antara berat dan pemosisian dapat
membantu mengarahkan pengguna ke lebih banyak konten.

• Konten bukan chrome: chrome ekstra dihapus sehingga di UI, fokus utama menjadi
konten.

• Kejujuran: desain khusus untuk perangkat genggam, dilengkapi layar resolusi tinggi dan
menggunakan sentuhan. Interaksi dipercepat dan dibuat sederhana.

ISYS6601 – User Experience Research and Design

 Designing interactions

Desain interaksi sangat penting untuk desain sistem interaktif. Desain konseptual harus sebisa
mungkin independen dari implementasi.

Perpindahan dari desain konseptual ke fisik membutuhkan desainer untuk mengalokasikan fungsi
dan pengetahuan kepada orang atau perangkat dan karenanya menciptakan interaksi.

Dalam merancang interaksi - yaitu mengalokasikan fungsi untuk orang atau perangkat - desainer
perlu mempertimbangkan kemampuan orang dan batasan pada apa yang dapat mereka lakukan.
Orang akan melupakan banyak hal seiring waktu.

Pola interaksi

Ide tentang 'pola' - keteraturan yang dirasakan dalam suatu lingkungan - telah diadopsi oleh
perancang sistem interaktif dan muncul sebagai pola interaksi.

Pola kegunaan umum telah diidentifikasi yang sebagian besar mirip dengan pedoman desain,
tetapi keuntungan yang dimiliki pola dibandingkan pedoman adalah deskripsi yang kaya dan
contoh yang menyertainya.

Pola dijelaskan dalam beberapa format umum. Format yang digunakan dalam studi kasus HIC
diilustrasikan pada Tabel 9.5, yang menunjukkan pola interaksi untuk fungsi Edit pada aplikasi
MP3. Setiap pola dideskripsikan dengan cara standar ini, diberi nama dan deskripsi, indikasi
masalah yang dialaminya, alasan desain atau kekuatan yang bekerja pada keputusan desain, dan
solusi yang telah diadopsi. Pola biasanya akan merujuk ke pola lain dan direferensikan oleh pola
lain.

Teknik diagram

Sebaliknya, desain interaksi berkaitan dengan proses. Dalam banyak situasi desain akan ada
kebutuhan untuk menyediakan 'dialog' terstruktur antara sistem dan orang yang
menggunakannya.

Sistem mungkin perlu memperoleh potongan data tertentu dalam urutan tertentu, atau untuk
memandu orang melalui serangkaian tindakan, atau untuk menyajikan sejumlah opsi terkait
bersama-sama.

ISYS6601 – User Experience Research and Design

Diagram aliran data adalah cara yang baik untuk menunjukkan langkah-langkah logis yang
diperlukan untuk menyelesaikan beberapa interaksi.

Teknik diagram umum lainnya adalah jaringan transisi keadaan (STN). Ini menunjukkan
bagaimana sistem berpindah dari satu keadaan ke keadaan lain tergantung pada tindakan oleh
pengguna.

Gambar 9.12 menunjukkan STN untuk contoh ATM.

ISYS6601 – User Experience Research and Design

 KESIMPULAN

Masalah desain biasanya dibentuk dengan buruk dan terus berkembang seiring dengan solusi
yang disarankan. Ini menghasilkan lebih banyak ide, lebih banyak masalah, dan lebih banyak
solusi. Dalam desain kami membedakan desain konseptual - desain dalam abstrak - dari desain
fisik - di mana ide dibuat konkret. Tujuan kami dalam sesi ini adalah untuk memberikan metode
dan teknik untuk membantu desainer menghadapi situasi desain.

Sesi ini berkaitan dengan pandangan desain yang lebih abstrak dan dengan pemikiran konseptual
dan metaforis tentang desain Anda. Ini juga memberikan beberapa cara yang lebih formal untuk
menangkap dan merepresentasikan desain. Detail desain visual dan desain multimoda yang akan
mengambil ide-ide yang dikembangkan dalam sesi ini dan menyampaikan solusi desain konkret

Desain konseptual berkaitan dengan sampai pada deskripsi abstrak dari sistem - logika, fungsi,
struktur dan isinya - tetapi tidak dengan bagaimana struktur dan fungsi harus diwujudkan secara
fisik.

Desain fisik berkaitan dengan:

• Siapa melakukan apa dalam hal alokasi fungsi dan konten antara orang dan artefak

• Saluran media apa yang akan digunakan, bagaimana mereka berhubungan satu sama lain
dan apa titik kontaknya

• Bagaimana artefak dan perangkat akan terlihat dan bagaimana perilakunya.

ISYS6601 – User Experience Research and Design

 DAFTAR PUSTAKA

1. Benyon, David. (2019). Designing User Experience: A guide to HCI, UX and interaction
design (4th Edition). 04. Pearson. United Kingdom. ISBN-13: 978-1292155517. Chapter 9

ISYS6601 – User Experience Research and Design