Perancangan Antarmuka Pengguna SI 401 Perancangan Sistem Informasi

Perancangan Antarmuka Pengguna SI 401 Perancangan Sistem Informasi Pertemuan #10 Suryo Widiantoro, ST, MMSI, M. Com(IS)

Capaian pembelajaran #5 Mahasiswa mampu membuat rancangan sistem informasi menggunakan pendekatan terstruktur.

Topik bahasan 1. 2. 3. 4. 5. Prinsip rancangan antarmuka pengguna Proses perancangan antarmuka Rancangan navigasi Rancangan input dan output Penerapan rancangan antarmuka pengguna di organisasi

� Antarmuka pengguna (user interface) adalah bagian dari sistem yang digunakan pengguna untuk berinteraksi. � Meliputi tampilan layar yang menyediakan navigasi di dalam sistem, layar dan formulir untuk menangkap (capture) data, dan laporan (report) yang dihasilkan oleh sistem (format kertas, Web, atau media lainnya).

� Rancangan interface adalah proses menentukan bagaimana sistem akan berinteraksi dengan entitas eksternal (misal: pelanggan, pemasok, sistem lain). � Rancangan user interface menentukan cara bagaimana user akan berinteraksi dengan sistem serta input dan output yang bisa diterima dan dihasilkan oleh sistem. � User interface meliputi 3 bagian utama: 1) Mekanisme navigasi, yaitu cara bagaimana user memberi instruksi kepada sistem dan memberitahu apa yang dilakukan (misal: tombol, menu). 2) Mekanisme input, yaitu cara bagaimana sistem menangkap informasi (misal: formulir pelanggan baru). 3) Mekanisme output, yaitu cara bagaimana sistem menyediakan informasi kepada user atau ke sistem lain (misal: laporan, Web page).

� Studi mengenai human-computer interaction (HCI) fokus pada meningkatkan interaksi antara user dan komputer dengan membuat komputer lebih dapat digunakan dan menarik sesuai dengan keinginan user. � Dalam kuliah ini fokus pada rancangan interface berbasis web dan graphical user interface (GUI) yang menggunakan windows, menu, icon, dan mouse.

Prinsip rancangan antarmuka pengguna

� Rancangan user interface adalah sebuah seni (art). � Tujuannya adalah untuk membuat interface menyenangkan bagi mata dan mudah digunakan, selain mengurangi usaha user untuk menyelesaikan pekerjaan mereka. � Sistem tidak pernah berakhir di dalam dirinya; namun merupakan cara untuk menyelesaikan bisnis organisasi. � Masalah terbesar yang dihadapi designer berpengalaman adalah menggunakan ruang secara efektif. Terlalu banyak informasi untuk ditampilkan daripada ruang untuk menampilkannya. � Analis harus menyeimbangkan keinginan untuk kesederhanaan dan tampilan yang menarik terhadap keinginan untuk menampilkan informasi pada beberapa halaman atau layar, yang mengurangi kesederhanaan.

1# Tata letak (Layout ) � Prinsip pertama dari rancangan user interface berkaitan dengan layout dari layar, formulir, atau laporan. � Layout mengacu pada pengaturan area layar atau dokumen untuk maksud tertentu serta menggunakan area tersebut secara konsisten di seluruh user interface. � Pendekatan utama: ini membagi layar menjadi 3 area 1) Area atas menyediakan user cara navigasi ke seluruh sistem; 2) Area tengah (yang terluas) untuk menampilkan pekerjaan

2# Content Awareness � Content awareness mengacu pada kemampuan interface untuk membuat user waspada (aware) terhadap informasi yang disajikan tanpa mengalami kesulitan. � Seluruh bagian interface -navigasi, input, atau output- harus memberikan content awareness sebanyak mungkin: ◦ Content awareness berlaku untuk interface secara umum. ◦ Content awareness juga berlaku untuk bidang (field) di setiap area. Field adalah elemen tunggal data yang merupakan input atau output. ◦ Content awareness juga berlaku untuk informasi yang

3# Keindahan (Aesthetics ) � Aesthetics mengacu pada perancangan interface yang dapat memuaskan mata yang memandangnya. � Interface tidak harus merupakan hasil karya seni, namun perlu agar berfungsi dan mengundang untuk digunakan. � Dalam banyak kasus, “less is more” maksudnya rancangan yang sederhana dan minimalis adalah yang terbaik.

4# User Experience - UX � User experience mengacu pada perancangan user interface dengan memperhatikan tingkat pengalaman user dalam berkomputer. � Sebuah sistem komputer akan digunakan oleh orang yang punya pengalaman dan orang yang tidak punya pengalaman; user interface harus dirancang untuk kedua orang tersebut: ◦ User awam biasanya dihubungkan dengan kemudahan belajar —seberapa cepat dan mudah mereka belajar menggunakan sistem. ◦ User ahli biasanya dihubungkan dengan kemudahan penggunaan —seberapa cepat dan mudah mereka menyelesaikan 1 tugas menggunakan sistem setelah mempelajari cara penggunaannya.

5# Konsistensi � Konsistensi dalam design mungkin adalah faktor paling penting dalam membuat sistem yang sederhana untuk digunakan, karena memungkinkan user untuk memprediksi apa yang akan terjadi. � Bila interface konsisten, user dapat berinteraksi dengan 1 bagian dari sistem dan kemudian tahu bagaimana interaksi dengan bagian lainnya. � Konsistensi biasanya mengacu pada interface dalam satu sistem komputer, sehingga semua bagian dari sistem yang sama juga bekerja dengan cara yang sama.

6# Kemudahan user � Terakhir, interface harus dirancang untuk mengurangi usaha yang diperlukan user untuk menyelesaikan tugas. � Artinya menggunakan sesedikit mungkin klik mouse atau keystrokes untuk berpindah dari satu bagian sistem ke bagian lainnya. � Kebanyakan clicks rule: designer interface mengikuti three- ◦ User harus dapat berjalan dari awal dimulai atau menu utama sebuah sistem sampai ke informasi atau aksi yang diinginkan tidak lebih dari 3 mouse click atau

Proses rancangan antarmuka

� Rancangan user interface adalah proses 5 tahap yang iteratif —Analis selalu bergerak maju mundur antar tahap dan bukan jalan berurutan dari tahap 1 ke 5.

1) 2) 3) 4) 5) Analis memeriksa DFD dan use case yang dibuat saat tahapan analysis dan mewawancara user untuk membuat use scenario yang mendeskripsikan pola aktivitas umum user sehingga interface memudahkan user untuk melakukan scenario secara cepat dan lancar. Analis membuat interface structure diagram (ISD) yang mendefinisikan struktur dasar interface serta memperlihatkan seluruh interfaces (layar, formulir, dan laporan) dalam sistem dan hubungannya. Analis merancang standar interface berupa elemen rancangan dasar yang menjadi landasar interface sistem. Analis membuat prototip rancangan interface untuk setiap interface dalam sistem, seperti kontrol navigasi, layar input, layar output, formulir, dan laporan. Interfaces kemudian dievaluasi untuk menentukan apakah sudah memuaskan dan bagaimana bisa lebih ditingkatkan.

1# Pembuatan Use Scenario � Use scenario adalah sebuah daftar ringkasan langkah 2 yang dijalankan user untuk menyelesaikan beberapa bagian pekerjaan. � Use scenario adalah jalur yang umum digunakan melalui use case. � Perhatikan bahwa dalam use case dan data flow diagram (DFD) bisa terjadi respon terhadap event dapat diselesaikan melalui banyak jalur. � Use scenario ditampilkan dalam bentuk narasi sederhana yang berkaitan erat dengan DFD. � Tujuannya adalah untuk mendeskripsikan use scenario yang paling umum terjadi sehingga interface dapat dirancang untuk memungkinkan penggunaan dilakukan secara sederhana dan mudah.

� 2 use scenario untuk use case Search and Browse Tunes:

2# Interface Structure Design � Interface structure design (ISD) mendefinisikan komponen 2 dasar interface dan bagaimana mereka bekerja bersama untuk memberikan fungsionalitas kepada user. � ISD digunakan untuk memperlihatkan bagaimana semua layar, formulir, dan laporan yang digunakan oleh sistem saling berhubungan dan bagaimana user berpindah. � Sistem memiliki banyak ISD, 1 untuk setiap bagian utama sistem. � ISD mirip dengan DFD karena mnggunakan kotak dan garis untuk menggambarkan struktur, namun tidak aturan atau standar untuk membuat ISD.

� Setiap kotak pada ISD pada bagian bawahnya terdapat nomor proses DFD yang didukung oleh interface tersebut. � Setiap interface dihubungkan dengan interface lain melalui garis yang menunjukkan bagaimana user berpindah dari 1 interface ke berikutnya. � Struktur dasar interface mengikuti struktur dasar proses bisnisnya sesuai dengan yang didefinisikan dalam model proses.

3# Rancangan Standar Interface � Standar interface adalah elemen rancangan dasar yang umum di setiap layar, formulir, dan laporan di dalam sistem. � Analis harus membuat metafora interface dasar yang mendefinisikan bagaimana interface akan bekerja. ◦ Metafora interface adalah konsep dari dunia nyata yang digunakan sebagai model untuk sistem komputer. � Template interface mendefinisikan tampilan umum pada seluruh layar dalam sistem informasi serta formulir dan laporan berupa

� Template menjelaskan nama yang digunakan interface untuk obyek interface utama, “building block” dasar dari sistem seperti entitas dan data store. � Template memberi nama untuk aksi interface yang paling sering digunakan dalam rancangan navigasi (misalnya: “buy” atau “purchase, ” “exit” atau “quit”). � Obyek dan aksi interface serta statusnya (misalnya: terhapus, error), dapat digambarkan melalui ikon interface. ◦ Ikon adalah gambar yang akan muncul pada tombol perintah (command button) serta laporan dan formulir untuk menandai informasi penting.

4# Prototip Rancangan Interface � Prototip rancangan interface adalah mock-up atau simulasi dari layar, formulir, atau laporan di komputer. � Prototip disiapkan untuk setiap interface dalam sistem untuk menunjukkan kepada user dan programmer bagaimana sistem akan dijalankan. � 3 pendekatan paling umum untuk prototip rancangan interface adalah: 1) Storyboard, 2) Prototip HTML, 3) Prototip language.

Storyboard � Adalah bentuk paling sederhana dari prototip rancangan interface dengan menggunakan kertas. � Storyboard menunjukkan gambar coretan tangan seperti apa tampilan layar dan bagaimana mengalir dari 1 layar ke lainnya, mirip seperti storyboard kartun yang menunjukkan bagaimana gerakan mengalir dari 1 adegan ke berikutnya. � Storyboard adalah teknik paling sederhana karena yang dibutuhkan hanya kertas dan pena —dan seseorang yang berbakat seni.

Prototip HTML � Salah satu jenis prototip rancangan interface yang banyak digunakan adalah prototip HTML. � Prototip HTML dibuat melalui Web page dengan HTML (hypertext mark-up language). ◦ Designer menggunakan HTML untuk membuat rangkaian Web page yang menunjukkan bagian sistem yang penting. ◦ User dapat berinteraksi dengan Web page melalui klik tombol dan mengisi data ke dalam formulir (namun karena belum ada sistem lengkap di belakangnya maka data tidak diproses). ◦ Web page saling terhubung sehingga saat user melakukan klik tombol, bagian sistem yang diminta akan tampil.

� Prototip HTML lebih unggul dibanding storyboard karena memungkinkan user untuk berinteraksi dengan sistem dan mendapatkan pengalaman lebih baik mengenai bagaimana melakukan navigasi pada layar yang berbeda. � HTML memiliki keterbatasan, yaitu layar yang ditampilkan di HTML tidak akan muncul seperti layar sistem yang sesungguhnya (kecuali sistem yang sesungguhnya adalah sistem Web dengan HTML).

Prototip Language � Prototip language adalah prototip rancangan interface yang dibuat dengan menggunakan bahasa pemrograman yang sebenarnya atau dengan tool yang sebenarnya akan digunakan untuk membuat sistem sesungguhnya. � Prototip language dirancang dengan cara yang sama seperti prototip HTML, yaitu memungkinkan user untuk bergerak dari layar ke layar lain namun tidak melakukan pemrosesan yang sesungguhnya.

� Contohnya dalam Visual Basic dimungkinkan untuk membuat dan melihat tampilan layar tanpa benar 2 menyertakan kode program pada layar tersebut. � Prototip language butuh waktu lebih lama untuk dibuat dibandingkan storyboards atau prototip HTML, namun sama 2 memiliki keunggulan untuk menampilkan seperti layar yang nanti akan ditampilkan.

5# Evaluasi Interface � Tujuan dari evaluasi interface adalah untuk memahami bagaimana untuk meningkatkan rancangan interface. � Rancangan interface itu subyektif; tidak ada rumus yang benar 2 menjamin user interface yang baik. � Kebanyakan designer interface –sengaja atau tidak– akan merancang interface yang memenuhi keinginan personal yang mungkin bisa sesuai atau tidak sesuai dengan kemauan user. � Solusinya adalah melibatkan sebanyak mungkin orang untuk mengevaluasi interface —lebih banyak user akan semakin lebih baik.

� Seperti halnya prototip rancangan interface, maka evaluasi interface dapat dilakukan dengan berbagai cara, masing 2 dengan level detil yang berbeda. � 4 pendekatan yang paling umum adalah: 1) 2) 3) 4) Evaluasi heuristic, Evaluasi walk-through, Evaluasi interactive, Pengujian usability formal.

� Evalusi heuristic memeriksa interface dengan membandingkan dengan kumpulan rancangan interface yang heuristic atau prinsip. � Evaluasi walk-through adalah meeting yang dilakukan bersama user yang akan mengoperasikan sistem. Tim project mempresentasikan prototip kepada user dan memandu mereka ke beberapa bagian dari interface. � Evaluasi interactive meminta user untuk benar 2 mengerjakan prototip HTML atau language dalam sesi 1 -on-1 dengan anggota tim project. � Pengujian usability formal dilakukan menggunakan produk software komersil dan produk yang dibuat oleh organisasi besar yang akan

Rancangan navigasi

� Komponen navigasi dari interface memungkinkan user untuk memasukkan perintah (command) untuk menavigasi seluruh sistem dan melakukan aksi untuk memasukkan dan meninjau informasi didalamnya. � Komponen navigasi juga menampilkan pesan kepada user mengenai aksi yang sukses atau gagal. � Tujuan dari sistem navigasi adalah untuk membuat sistem sesederhana mungkin untuk digunakan.

Prinsip dasar rancangan navigasi � Mencegah user membuat kesalahan. Sebuah kesalahan membuang waktu dan membuat putus asa. ◦ Kesalahan terus menerus dapat membuat user meninggalkan sistem. � Memperbaiki error dengan mudah. Idealnya sistem memiliki tombol “undo” untuk mengatasi kesalahan; namun membuat software dengan tombol tersebut menyulitkan. � Urutan grammar. Banyak perintah (command) meminta user menjelaskan object (misal: file, record, word) dan aksi yang dilakukan terhadap

Jenis kontrol navigasi � Ada 2 perangkat hardware tradisional yang dapat digunakan untuk mengontrol user interface: 1) Keyboard 2) Pointing device, seperti mouse, trackball, atau touch screen. � Akhir 2 ini, sistem voice recognition telah muncul walaupun masih belum umum. � Ada 3 pendekatan software untuk mendefinisikan perintah user: 1) language, 2) menu, 3) direct manipulation.

� Bahasa perintah (command language), dimana user memasukkan perintah dalam bahasa khusus untuk sistem komputer (misal: UNIX dan SQL). � Sistem navigasi yang paling umum adalah menu, yang menampilkan daftar pilihan kepada user yang dapat dipilih. Menu lebih mudah untuk dipelajari daripada language karena user melihat pilihan yang teratur namun terbatas. � Melalui manipulasi langsung (direct manipulation), user memasukkan perintah dengan bekerja langsung pada object interface. Contohnya user dapat mengubah ukuran object pada Microsoft Power. Point dengan klik pada object dan menggerakkan ke samping.

Pesan (message ) � Pesan adalah cara sistem untuk merespon kepada user dan memberitahukan status interaksi. � Ada ◦ ◦ ◦ beberapa jenis pesan seperti: Pesan error, Pesan confirmation, Pesan acknowledgment, Pesan delay, Pesan help. � Pesan akan meminta user untuk mengkonfirmasi (misalnya: dengan klik), bukan menampilkannya selama beberapa detik dan kemudian menghilang sendiri.

Rancangan input

� Mekanisme input memungkinkan dimasukkannya data ke dalam sistem informasi, baik untuk data terstruktur seperti informasi pemesanan (jumlah item, kuantiti, harga) maupun informasi tidak terstruktur (komentar). � Rancangan input berarti merancang layar yang digunakan untuk memasukkan informasi, seperti formulir yang digunakan user mengetik informasi. � Tujuan dari rancangan input adalah untuk menangkap informasi akurat bagi sistem secara mudah dan sederhana.

Prinsip dasar rancangan input � Ada 2 pendekatan umum untuk memasukkan input ke dalam sistem komputer: 1) Dengan pemrosesan online (transaction processing), setiap item input (order customer, purchase order) dimasukkan ke dalam sistem satu persatu pada saat bersamaan dengan kejadian transaksi meminta input. 2) Dengan pemrosesan batch, semua input dikumpulkan selama waktu tertentu dan dimasukkan ke dalam sistem sekaligus dalam batch. �Prinsip paling penting dalam rancangan input adalah untuk menangkap data dalam format elektronik langsung pada sumber aslinya atau sedekat mungkin dengan sumber aslinya.

� Kebanyakan sistem pemrosesan transaksi dirancang untuk menangkap data pada sumbernya. ◦ Otomasi sumber data (source data automation) adalah penggunaan perangkat hardware khusus untuk secara otomatis menangkap data tanpa ada orang yang mengetiknya. ◦ Toko 2 biasanya menggunakan bar code reader yang otomatis menscan produk dan memasukkan data langsung ke sistem komputer. � Dengan penggunaan Web yang semakin luas, banyak data ditangkap langsung dari customer. ◦ Dampaknya formulir untuk menangkap informasi pada layar harus memberikan alur yang logis dan memungkinkan user untuk mengisi formulir dan memeriksanya dengan mudah sebelum disubmit. ◦ Karena data yang dimasukkan user bisa terjadi kesalahan, maka cek validasi harus dilakukan bila memungkinkan.

� Prinsip penting lainnya adalah untuk mengurangi keystroke. � Keystroke membuang-buang waktu dan uang bagi customer, user, atau operator data-entry. � Sebaiknya sistem tidak menanyakan informasi yang dapat diperoleh dengan cara lain (misal: menarik data dari database atau melakukan perhitungan). � Sebaliknya, sistem tidak mengharuskan user untuk mengetik informasi yang dapat dipilih dari daftar; memilih daftar lebih cepat dan mengurangi error.

Jenis 2 Input � Setiap item data yang menjadi input dihubungkan ke field pada formulir yang valuenya diketikkan. � Setiap field memiliki label field yang ada disamping, diatas atau dibawahnya, yang memberitahukan user jenis informasi apa untuk field tersebut. � Ada beberapa jenis input dan field yang berbeda: ◦ text box digunakan untuk memasukkan teks. ◦ number box digunakan untuk memasukkan angka. ◦ selection box memungkinkan user untuk memilih value dari daftar.

Validasi Input � Semua data yang dimasukkan ke sistem harus divalidasi untuk memastikan akurasi. � Validasi input dapat dilakukan dengan berbagai cara. � Idealnya untuk mencegah informasi invalid masuk ke dalam sistem, seharusnya komputer tidak menerima data yang tidak lolos validasi. � Namun hal itu sulit dilakukan karena data invalid seringkali lolos dari operator data-entry dan user yang memberikan informasi.

Rancangan output

� Output laporan yang dihasilkan oleh sistem, baik pada layar, pada kertas, atau media lain seperti Web. � Output mengkin adalah bagian yang paling nampak dari sebuah sistem, karena alasan utama menggunakan sistem informasi adalah untuk mengakses informasi yang dihasilkan. � Tujuan dari mekanisme output adalah untuk menyajikan informasi kepada user sehingga dapat memahaminya secara akurat tanpa mengalami kesusahan.

Prinsip dasar rancangan output � Prinsip dasar untuk rancangan output menggambarkan bagaimana output digunakan dan cara untuk membuatnya sederhana untuk dipahami user. � Prinsip pertama adalah untuk memahami bagaimana laporan digunakan. Laporan dapat digunakan untuk banyak keperluan. � Tujuan dari laporan yang baik rancangannya adalah untuk menyediakan seluruh informasi yang dibutuhkan untuk mendukung tugas user. � Analis tidak boleh merancang laporan yang tidak jelas. Masalah ini dapat terjadi karena Analis yang tidak sengaja melakukannya.

Jenis 2 Output � Ada beberapa jenis laporan yang berbeda seperti: ◦ ◦ ◦ Laporan detail, Laporan summary, Laporan exception, Dokumen turnaround, Grafik. � Membedakan laporan sulit karena beberapa laporan memiliki karakteristik beberapa jenis yang berbeda.

Media Ada beberapa jenis media berbeda yang digunakan untuk menghasilkan laporan. 2 media yang dominan saat ini adalah: ◦ kertas ◦ elektronik. Kertas (paper) � Kelebihan: ◦ Media tradisional, cukup tahan lama, mudah digunakan, dan dapat diakses di banyak situasi, sangat portabel terutama untuk laporan singkat. � Kekurangan: ◦ Tidak fleksibel, setelah dicetak sulit diformat ulang dengan tampilan berbeda. Laporan kertas mahal dan sulit digandakan, serta butuh bahan (kertas, tinta) dan tempat penyimpanan.

Elektronik � Banyak organisasi pindah ke format laporan yang diproduksi secara elektronik, dimana laporan “dicetak, ” namun disimpan dalam format elektronik pada server file atau server Web sehingga user dapat dengan mudah mengaksesnya. � Kelebihannya: ◦ Laporan tersedia dalam format yang telah dirancang. ◦ Laporan elektronik juga dapat diproduksi berdasarkan permintaan yang diperlukan. ◦ Laporan elektronik menyediakan dukungan untuk laporan ad hoc. ◦ Mengurangi biaya pengiriman laporan jarak jauh dan meningkatkan akses user terhadap laporan.

Penerapan perancangan antarmuka di organisasi Kasus Online Store: Tune Source

� Proses 1, bagian Web digunakan oleh customer untuk menemukan tunes yang diinginkan. � Gunakan DFD untuk memastikan bahwa seluruh fungsionalitas untuk sistem telah disertakan dalam ISD.

� Standar interface untuk sistem, metafora interface cukup jelas dan langsung: sebuah toko musik retil Tune Source.

Terima kasih Selamat belajar dan semoga sukses