Model-Model Desain Sistem

 

Pendahuluan

materi tentang desain dialog dengan fokus pada model-model desain sistem yang lebih komprehensif. Jika pada pertemuan sebelumnya kita mempelajari dialog dan notasinya secara spesifik, pada pertemuan ini kita akan membangun kerangka yang lebih luas dengan memahami berbagai model yang mendukung perancangan antarmuka yang efektif. Model-model ini akan membantu desainer untuk memahami sistem dari berbagai sudut pandang dan untuk mengomunikasikan pemahaman tersebut kepada pemangku kepentingan lainnya.

1. Pengertian Model dalam Desain Antarmuka
Definisi Model

Model dalam konteks desain antarmuka adalah representasi abstrak dari sistem yang sedang dirancang, yang berfokus pada aspek-aspek tertentu yang relevan dengan tujuan desain. Model membantu desainer untuk memahami sistem dari berbagai sudut pandang dan untuk mengomunikasikan pemahaman tersebut kepada orang lain. Sebuah model tidak harus sempurna atau mencakup semua detail; yang terpenting adalah model tersebut berguna untuk tujuan tertentu dan dapat dipahami oleh audiens yang dituju.

Terdapat beberapa jenis model yang umum digunakan dalam desain antarmuka, dan masing-masing memberikan perspektif yang berbeda. Tidak ada model tunggal yang sempurna untuk semua situasi; desainer yang baik akan menggunakan beberapa model secara bersamaan untuk mendapatkan gambaran yang lengkap.

Mengapa Model Penting?

Model sangat penting dalam desain antarmuka karena beberapa alasan. Pertama, model membantu desainer untuk mengelola kompleksitas. Sistem yang dirancang seringkali sangat rumit dengan banyak fitur dan kemungkinan interaksi. Dengan memecah sistem menjadi model-model yang lebih sederhana, desainer dapat fokus pada satu aspek pada satu waktu tanpa kehilangan gambaran besar.

Kedua, model memfasilitasi komunikasi antara anggota tim. Desainer, pengembang, manajer produk, dan pemangku kepentingan lainnya seringkali memiliki latar belakang dan cara berpikir yang berbeda. Model menyediakan bahasa bersama yang memungkinkan semua pihak untuk berdiskusi tentang sistem dengan cara yang terstruktur.

Ketiga, model membantu dalam pengambilan keputusan. Dengan memiliki model yang jelas, desainer dapat mengevaluasi alternatif desain secara lebih objektif dan melihat konsekuensi dari setiap keputusan sebelum sistem benar-benar dibangun.

2. Model Konseptual
Pengertian dan Tujuan

Model konseptual adalah model tingkat tinggi yang menggambarkan apa yang dapat dilakukan pengguna dengan sistem dan bagaimana konsep-konsep utama dalam sistem saling berhubungan. Model konseptual berfokus pada "apa" bukan "bagaimana"—ia menjelaskan fungsi dan tujuan sistem tanpa masuk ke detail teknis implementasi.

Tujuan utama dari model konseptual adalah untuk membangun pemahaman bersama tentang ruang lingkup dan fungsi sistem. Model konseptual menjawab pertanyaan-pertanyaan seperti: Apa yang dapat dilakukan pengguna dengan sistem ini? Konsep-konsep apa yang perlu dipahami pengguna untuk menggunakan sistem ini? Bagaimana konsep-konsep tersebut saling berhubungan?

Contoh Model Konseptual

Contoh model konseptual untuk aplikasi manajemen tugas: "Pengguna dapat membuat daftar tugas, menambahkan tugas baru ke dalam daftar, menandai tugas sebagai selesai, dan menghapus tugas. Tugas dapat dikelompokkan berdasarkan proyek, dan setiap proyek dapat memiliki beberapa anggota yang bekerja sama."

Model konseptual ini menjelaskan bahwa ada entitas "tugas" dan "proyek", bahwa tugas dapat dikelola (ditambah, ditandai selesai, dihapus), dan bahwa proyek adalah cara untuk mengelompokkan tugas. Ini adalah pemahaman dasar yang diperlukan sebelum masuk ke detail seperti bagaimana antarmuka akan terlihat atau tombol apa yang harus ditekan.
Model Konseptual dan Mental Model Pengguna

Salah satu aspek terpenting dari model konseptual adalah kesesuaiannya dengan mental model pengguna. Mental model adalah pemahaman internal yang dimiliki pengguna tentang bagaimana sesuatu bekerja, yang dibentuk oleh pengalaman sebelumnya dan pengetahuan tentang dunia nyata.

Jika model konseptual sistem sesuai dengan mental model pengguna, antarmuka akan terasa intuitif dan alami. Sebaliknya, jika model konseptual bertentangan dengan mental model pengguna, pengguna akan sering membuat kesalahan dan merasa frustasi. Sebagai contoh, dalam aplikasi perpustakaan digital, pengguna sudah memiliki mental model tentang bagaimana perpustakaan fisik bekerja: ada rak buku, ada kartu katalog, ada meja peminjaman. Jika model konseptual aplikasi digital selaras dengan mental model ini, pengguna akan lebih mudah beradaptasi.

Membangun Model Konseptual yang Baik

Untuk membangun model konseptual yang baik, desainer perlu melakukan riset pengguna yang mendalam untuk memahami bagaimana pengguna berpikir tentang domain tersebut. Wawancara, observasi, dan card sorting adalah beberapa teknik yang dapat digunakan untuk menggali mental model pengguna.

Setelah pemahaman tentang mental model pengguna diperoleh, desainer dapat merancang model konseptual yang selaras dengan pemahaman tersebut. Model konseptual yang baik biasanya sederhana, konsisten, dan mudah dijelaskan dengan satu atau dua kalimat. Jika model konseptual terlalu rumit untuk dijelaskan, mungkin ia terlalu rumit untuk digunakan oleh pengguna.

3. Model Interaksi
Pengertian dan Tujuan

Model interaksi menggambarkan bagaimana pengguna berinteraksi dengan sistem pada tingkat tindakan dan respons. Ini mencakup urutan langkah-langkah yang harus dilakukan pengguna untuk mencapai tujuan tertentu, serta bagaimana sistem merespons setiap tindakan. Jika model konseptual menjawab "apa yang dapat dilakukan", maka model interaksi menjawab "bagaimana cara melakukannya".

Tujuan utama dari model interaksi adalah untuk mendefinisikan alur kerja atau workflow yang harus dilalui pengguna untuk menyelesaikan tugas-tugas mereka. Model interaksi juga membantu dalam mengidentifikasi potensi masalah seperti langkah yang terlalu banyak, jalur yang buntu, atau umpan balik yang tidak jelas.

Use Case dan Skenario

Model interaksi seringkali disajikan dalam bentuk use case atau skenario. Sebuah use case mendeskripsikan interaksi tipikal antara pengguna dan sistem untuk mencapai tujuan tertentu. Misalnya, use case "Memesan Tiket" akan menjelaskan langkah-langkah yang dilakukan pengguna mulai dari memilih rute, memilih jadwal, mengisi data penumpang, melakukan pembayaran, hingga menerima konfirmasi.

Skenario adalah narasi yang lebih rinci tentang bagaimana seorang pengguna tertentu menggunakan sistem dalam konteks tertentu. Skenario seringkali ditulis dalam bentuk cerita yang menggambarkan tidak hanya langkah-langkah teknis, tetapi juga emosi, motivasi, dan kondisi lingkungan pengguna.

Alur Utama dan Alur Alternatif

Dalam merancang model interaksi, penting untuk membedakan antara alur utama atau happy path dan alur alternatif. Alur utama adalah jalur yang paling sering dilalui pengguna ketika semuanya berjalan dengan baik. Alur alternatif adalah jalur yang diambil ketika terjadi sesuatu yang tidak biasa, seperti kesalahan input, kegagalan sistem, atau keputusan pengguna yang berbeda.

Desainer harus merancang tidak hanya alur utama tetapi juga semua alur alternatif yang mungkin terjadi. Mengabaikan alur alternatif adalah salah satu kesalahan paling umum dalam desain antarmuka. Pengguna seringkali menemukan situasi yang tidak terduga, dan jika sistem tidak siap menghadapi situasi tersebut, pengalaman pengguna akan menjadi buruk.

Contoh Model Interaksi

Berikut adalah contoh model interaksi untuk proses login dalam sebuah aplikasi:

Alur Utama:

• Pengguna membuka aplikasi
• Sistem menampilkan halaman login
• Pengguna memasukkan username dan password
• Pengguna menekan tombol "Masuk"
• Sistem memverifikasi kredensial
• Sistem menampilkan halaman beranda

Alur Alternatif 1 (Kredensial Salah):

• 1-4. Sama seperti alur utama
• Sistem menemukan bahwa kredensial salah
• Sistem menampilkan pesan "Username atau password salah. Silakan coba lagi."
• Kembali ke langkah 3

Alur Alternatif 2 (Lupa Password):

• 1-3. Sama seperti alur utamaPengguna mengklik tautan "Lupa Password"
• Sistem menampilkan halaman reset password
• ... dan seterusnya

Model interaksi yang lengkap akan mencakup semua alur alternatif ini, sehingga desainer dan pengembang dapat memastikan bahwa setiap kemungkinan telah diperhitungkan.

4. Model Presentasi
Pengertian dan Tujuan

Model presentasi menggambarkan bagaimana informasi dan elemen interaksi akan ditampilkan kepada pengguna. Ini mencakup tata letak, hierarki visual, tipografi, warna, dan elemen-elemen visual lainnya. Model presentasi adalah model yang paling dekat dengan hasil akhir desain grafis antarmuka.

Tujuan utama dari model presentasi adalah untuk menerjemahkan model konseptual dan model interaksi ke dalam bentuk visual yang dapat dipahami dan digunakan oleh pengguna. Model presentasi harus mendukung alur interaksi yang telah dirancang dengan menyajikan informasi yang tepat pada waktu yang tepat, dengan cara yang jelas dan menarik.

Wireframe, Mockup, dan Prototipe

Model presentasi seringkali diwujudkan dalam bentuk wireframe, mockup, atau prototipe. Ketiganya memiliki tingkat detail dan interaktivitas yang berbeda.

Wireframe adalah representasi sederhana yang berfokus pada struktur dan tata letak tanpa terlalu memperhatikan detail visual. Wireframe biasanya dibuat dengan sketsa tangan atau menggunakan perangkat lunak khusus, dan hanya menggunakan warna abu-abu atau hitam-putih. Tujuan wireframe adalah untuk menentukan di mana setiap elemen akan ditempatkan dan bagaimana pengguna akan bernavigasi.

Mockup adalah representasi yang lebih detail dengan warna, tipografi, dan elemen visual yang sudah mendekati hasil akhir. Mockup memberikan gambaran yang lebih realistis tentang bagaimana antarmuka akan terlihat, tetapi biasanya belum interaktif.

Prototipe adalah versi yang interaktif, di mana pengguna dapat benar-benar mengklik dan menavigasi seolah-olah sistem yang sesungguhnya. Prototipe dapat memiliki tingkat interaktivitas yang berbeda, mulai dari yang sederhana (hanya menghubungkan beberapa layar) hingga yang sangat kompleks (dengan animasi dan logika interaksi yang lengkap).

Hierarki Visual dalam Model Presentasi

Salah satu aspek terpenting dalam model presentasi adalah hierarki visual. Hierarki visual adalah cara mengatur elemen-elemen visual sehingga mata pengguna secara alami tertuju pada elemen yang paling penting terlebih dahulu, kemudian elemen yang kurang penting, dan seterusnya.

Hierarki visual dapat dicapai melalui berbagai cara: ukuran (elemen yang lebih besar terlihat lebih penting), warna (warna yang kontras atau cerah menarik perhatian), posisi (elemen di bagian atas atau tengah cenderung dilihat pertama), dan spasi (ruang putih di sekitar elemen membuatnya lebih menonjol).

Desainer harus menggunakan hierarki visual untuk memandu pengguna melalui antarmuka sesuai dengan alur interaksi yang telah dirancang. Tombol "Bayar" misalnya, harus lebih menonjol daripada tombol "Batal" karena tindakan membayar adalah tindakan utama yang diinginkan pengguna.

Konsistensi dalam Model Presentasi

Konsistensi adalah prinsip penting lainnya dalam model presentasi. Elemen-elemen yang memiliki fungsi yang sama harus memiliki tampilan yang sama di seluruh antarmuka. Semua tombol, misalnya, harus memiliki gaya yang konsisten—ukuran yang sama, warna yang sama, font yang sama. Semua tautan harus memiliki gaya yang konsisten. Semua judul harus memiliki gaya yang konsisten.

Konsistensi membantu pengguna untuk belajar menggunakan sistem dengan lebih cepat. Setelah pengguna belajar bahwa tombol hijau berarti "setuju" atau "lanjutkan", mereka tidak perlu berpikir ulang setiap kali melihat tombol hijau di tempat lain. Konsistensi juga membuat antarmuka terlihat lebih profesional dan terawat.

5. Hubungan Antar Model
Model Bekerja Secara Bersamaan

Ketiga jenis model—konseptual, interaksi, dan presentasi—saling terkait dan tidak dapat dipisahkan. Model konseptual menjadi dasar bagi model interaksi: Anda tidak bisa merancang langkah-langkah interaksi sebelum Anda memahami konsep-konsep apa yang terlibat. Model interaksi menjadi dasar bagi model presentasi: Anda tidak bisa menentukan bagaimana menampilkan sesuatu sebelum Anda tahu apa yang harus ditampilkan dan dalam urutan apa.

Seorang desainer yang baik akan bergerak secara iteratif di antara ketiga model ini. Kadang ia mulai dengan model konseptual, kemudian model interaksi, kemudian model presentasi. Kadang ia menemukan bahwa model presentasi mengungkapkan masalah yang tidak terlihat dalam model interaksi, sehingga ia harus kembali ke model interaksi dan memperbaikinya. Kadang ia menemukan bahwa model interaksi mengungkapkan kebutuhan akan konsep baru yang belum ada dalam model konseptual.

Proses Iteratif

Proses desain yang efektif adalah proses yang iteratif dan non-linear. Desainer tidak harus menyelesaikan model konseptual secara sempurna sebelum memulai model interaksi, atau menyelesaikan model interaksi secara sempurna sebelum memulai model presentasi. Sebaliknya, desainer akan membuat draft dari setiap model, mengujinya, memperbaikinya, dan mengulangi proses tersebut.

Proses iteratif ini sangat penting karena desain antarmuka melibatkan banyak variabel yang saling mempengaruhi. Sebuah keputusan di satu model dapat memiliki konsekuensi di model lainnya. Dengan bekerja secara iteratif, desainer dapat mengeksplorasi lebih banyak alternatif dan menemukan solusi yang lebih baik.

6. Studi Kasus: Menerapkan Model-Model Desain

Mari kita lihat bagaimana ketiga model ini dapat diterapkan dalam sebuah studi kasus sederhana: merancang aplikasi pemesanan makanan.

Model Konseptual

Aplikasi pemesanan makanan memungkinkan pengguna untuk melihat menu restoran, memilih makanan yang diinginkan, menambahkan ke keranjang, dan melakukan pemesanan. Konsep-konsep utama dalam sistem ini adalah: Restoran, Menu, Item Menu, Keranjang, Pesanan, dan Pembayaran. Hubungan antar konsep: Setiap restoran memiliki menu; menu berisi item-item menu; pengguna dapat menambahkan item menu ke keranjang; keranjang diubah menjadi pesanan; pesanan memiliki status pembayaran.

Model Interaksi

Alur utama pengguna adalah: Membuka aplikasi → Memilih restoran → Melihat menu → Menambahkan item ke keranjang → Melihat keranjang → Melakukan checkout → Memilih metode pembayaran → Konfirmasi pesanan. Alur alternatif termasuk: Pengguna dapat menghapus item dari keranjang, mengubah jumlah item, atau membatalkan pesanan sebelum konfirmasi.

Model Presentasi

Halaman utama menampilkan daftar restoran dengan foto dan nama. Halaman menu menampilkan daftar item dengan gambar, nama, deskripsi singkat, harga, dan tombol "Tambah ke Keranjang". Halaman keranjang menampilkan daftar item yang dipilih, jumlah, subtotal, dan tombol "Checkout". Tombol "Checkout" dibuat menonjol dengan warna kontras untuk mendorong tindakan.

Evaluasi

Setelah ketiga model dibuat, desainer dapat mengevaluasinya. Apakah model konseptual sudah mencakup semua konsep yang diperlukan? Apakah model interaksi mencakup semua alur alternatif yang mungkin? Apakah model presentasi mendukung alur interaksi dengan hierarki visual yang jelas? Jika ada kekurangan, desainer akan kembali ke model yang bersangkutan dan memperbaikinya.

Simpulan

Pada pertemuan kesebelas ini, kita telah mempelajari tiga model utama dalam desain sistem antarmuka: model konseptual, model interaksi, dan model presentasi. Model konseptual menjelaskan apa yang dapat dilakukan pengguna dan bagaimana konsep-konsep utama saling berhubungan. Model interaksi menjelaskan bagaimana pengguna melakukan tindakan dan bagaimana sistem merespons. Model presentasi menjelaskan bagaimana semua itu ditampilkan secara visual.

Ketiga model ini saling terkait dan harus dikembangkan secara bersamaan dalam proses desain yang iteratif. Desainer yang baik akan bergerak bolak-balik di antara ketiga model ini, terus memperbaiki dan menyempurnakan setiap model berdasarkan wawasan yang diperoleh dari model lainnya.

Pemahaman tentang model-model ini akan sangat berguna dalam proyek-proyek desain antarmuka di dunia nyata, di mana desainer harus berkomunikasi dengan berbagai pemangku kepentingan dan membuat keputusan desain yang terinformasi dengan baik.