Outline Prinsip desain antarmuka pengguna.

Presentasi berjudul: "Outline Prinsip desain antarmuka pengguna."— Transcript presentasi:

0 Analisis dan Desain Sistem User Interface Design
Disusun Oleh : Lily Wulandari

1 Outline Prinsip desain antarmuka pengguna. Proses perancangan antarmuka pengguna. Desain Navigasi. Desain Input. Desain Output.

2 PENDAHULUAN Desain interface adalah proses pendefinisian bagaimana sistem akan berinteraksi dengan entitas eksternal. Pada materi ini fokus pada perancangan antarmuka pengguna - bagaimana sistem akan berinteraksi dengan pengguna. Desain antar muka sistem mendefinisikan bagaimana sistem bertukar informasi dengan sistem lain.

3 (lanjt...) Antarmuka pengguna mencakup tiga bagian mendasar:
- Mekanisme navigation -Cara pengguna memberitahu sistem apa yang harus dilakukan. - Mekanisme input – cara sistem menangkap informasi (mis., Formulir untuk menambahkan pelanggan baru). - Mekanisme output - Cara di mana sistem memberikan informasi kepada pengguna atau sistem lainnya. Graphical user interfaces (GUI) menggunakan jendela, menu, ikon, dan sebagainya, dan merupakan jenis antarmuka pengguna yang paling umum.

4 PRINSIP UNTUK DESAIN INTERFACE PENGGUNA
Desain antarmuka pengguna adalah seni. Tujuannya adalah untuk membuat antarmuka yang menyenangkan mata dan mudah digunakan, sekaligus meminimalkan usaha pengguna.

5 (lanjt…)

6 Layout Layout mengacu pada area pengorganisasian layar dan dokumen untuk tujuan yang berbeda dan menggunakan area ini secara konsisten di seluruh antarmuka pengguna. Screen sering terbagi menjadi tiga area: Area teratas memberi pengguna cara untuk menavigasi sistem; Bagian tengah dan terbesar adalah untuk menampilkan karya pengguna; dan Bagian bawah berisi informasi status tentang pengguna.

7 (lanjt...) Area dan informasi di dalam area harus memiliki aliran intuitif alami untuk meminimalkan pergerakan pengguna dari satu area ke area berikutnya. Idealnya, area akan tetap konsisten dalam ukuran, bentuk, penempatan untuk form, dan Laporan yang digunakan untuk mempresentasikannya.

8 © Copyright 2011 John Wiley & Sons, Inc.
(cont’d) Web page layout with multiple navigation areas © Copyright 2011 John Wiley & Sons, Inc.

9 (lanjt....) Aliran antar bagian juga harus konsisten.

10 Content Awareness Kesadaran konten mengacu pada kemampuan antarmuka untuk membuat pengguna mengetahui informasi yang dikandungnya. Semua interface harus memiliki judul. Menu harus menunjukkan di mana pengguna berada dan dari mana pengguna datang untuk sampai ke sana. Semua area harus jelas dan terdefinisi dengan baik. Kesadaran konten juga berlaku untuk field dan label field di setiap area, dan informasi yang mengandung bentuk atau isi laporan

11 Estetika Estetika mengacu pada perancangan antarmuka yang menyenangkan mata. Antarmuka perlu fungsional dan mengundang untuk digunakan. Secara umum, semua formulir dan laporan membutuhkan sejumlah ruang kosong Desain teks juga penting. Fonts dan font sizes Colors dan patterns

12 (lanjt...) Sebuah contoh form dengan densitas tinggi
© Copyright 2011 John Wiley & Sons, Inc.

13 User Experience Pengalaman pengguna mengacu pada perancangan antarmuka pengguna dengan tingkat pengalaman komputer pengguna. Pengguna pemula memperhatikan kemudahan belajar. Pengguna ahli memperhatikan kemudahan penggunaan. Seringkali, kedua tujuan itu saling melengkapi dan mengarah pada keputusan desain yang serupa, namun terkadang ada trade-off.

14 Konsistensi Konsistensi biasanya mengacu pada antarmuka dalam satu sistem komputer, sehingga semua bagian dari sistem yang sama bekerja dengan cara yang sama. Idealnya, bagaimanapun, sistem juga harus konsisten dengan sistem komputer lain dalam organisasi. Konsistensi memungkinkan pengguna memprediksi apa yang akan terjadi, dan mengurangi jumlah pembelajaran. Konsistensi terjadi pada berbagai tingkatan. Kontrol navigasi; Terminologi; Laporan dan bentuk desain.

15 Minimize User Effort Meminimalkan usaha pengguna berarti menggunakan klik mouse atau penekanan tombol yang paling sedikit untuk berpindah dari satu bagian sistem ke sistem lainnya. Three-clicks rule Pengguna harus bisa berpindah dari awal atau menu utama sebuah sistem ke informasi atau tindakan yang mereka inginkan tidak lebih dari tiga klik mouse atau tiga penekanan tombol..

16 PROSES DESAIN ANTAR MUKA PENGGUNA
Desain antarmuka pengguna adalah proses lima langkah yang bersifat iteratif. © Copyright 2011 John Wiley & Sons, Inc.

17 Gunakan Pengembangan Skenario
Skenario penggunaan adalah garis besar langkah-langkah yang dilakukan pengguna untuk menyelesaikan beberapa bagian dari pekerjaan mereka. Skenario penggunaan disajikan dalam deskripsi narasi sederhana yang terkait dengan DFD

18 Examples of use scenarios
(lanjt...) Examples of use scenarios

19 Desain Struktur Antarmuka
Interface structure diagram mendefinisikan komponen dasar antarmuka dan bagaimana mereka bekerja sama untuk menyediakan fungsionalitas bagi pengguna. Interface structure diagram (ISD) digunakan untuk menunjukkan bagaimana semua layar, formulir, dan laporan terkait dan bagaimana pengguna berpindah dari satu ke yang lain.

20 (lanjt...) ISD mirip dengan DFD karena menggunakan kotak dan garis untuk menunjukkan strukturnya. Namun, tidak seperti DFD, tidak ada aturan atau standar yang umum digunakan untuk ISD. Struktur dasar antarmuka mengikuti struktur dasar dari proses bisnis itu sendiri seperti yang didefinisikan dalam model proses.

21 Contoh Interface Structure Diagram
(lanjt...) Contoh Interface Structure Diagram

22 Desain Standar Antarmuka
Standar antarmuka adalah elemen desain dasar yang umum di seluruh layar, formulir, dan laporan individual di dalam sistem. Metafora antarmuka adalah konsep dari dunia nyata yang digunakan sebagai model untuk sistem komputer. Template antarmuka mendefinisikan tampilan umum semua layar dan bentuk dan laporan berbasis kertas.

23 (lanjt...) Template menentukan nama yang akan digunakan antarmuka untuk objek antarmuka utama, blok bangunan fundamental dari sistem. Template memberi nama pada tindakan antarmuka yang paling umum digunakan. Objek antarmuka dan tindakan, dan juga status mereka, dapat ditunjukkan oleh ikon antarmuka.

24 Prototipe Desain Antarmuka
Prototipe desain antarmuka adalah mock-up atau simulasi layar komputer, formulir, atau laporan. Pendekatan umum untuk prototipe desain antarmuka : Storyboard Prototipe HTML Protipe bahasa.

25 Storyboard Storyboard menunjukkan gambar layar yang digambar dengan tangan.

26 Prototipe HTML Prototipe HTML dibuat dengan menggunakan halaman Web yang dibuat dalam HTML (hypertext mark-up language). Perancang menggunakan HTML untuk membuat serangkaian halaman Web yang menunjukkan bagian mendasar dari sistem.

27 Prototipe Bahasa Prototipe bahasa adalah prototipe desain antarmuka yang dibangun dalam bahasa aktual yang akan digunakan untuk membangun sistem. Contoh prototipe bahasa.

28 Evaluasi Antarmuka Tujuan evaluasi antarmuka adalah untuk memahami bagaimana memperbaiki desain antarmuka. Ada empat pendekatan umum untuk evaluasi antarmuka. 1. Heuristic evaluation - Bandingkan antar muka dengan daftar prinsip desain. 2. Walk-through evaluation - Ini adalah pertemuan yang dilakukan dengan pengguna untuk berjalan melalui antarmuka. 3. Interactive evaluation - Pengguna mencoba antarmuka. 4. Formal usability testing - Ini adalah proses pengujian formal untuk memahami bagaimana antarmuka bisa digunakan. Beberapa ukuran kinerja digunakan, seperti waktu untuk menyelesaikan tugas, tingkat kesalahan, dan kepuasan pengguna.

29 DESAIN NAVIGASI Prinsip-prinsip Dasar
- Analis biasanya harus berasumsi bahwa pengguna belum membaca manualnya, belum mengikuti pelatihan, dan belum mendapat bantuan dari pihak luar. - Semua kontrol harus jelas dan mudah dimengerti dan ditempatkan di lokasi yang intuitif di layar.

30 (lanjt...) Mencegah kesalahan - Prinsip pertama merancang kontrol navigasi adalah mencegah pengguna melakukan kesalahan. Menandai perintah dengan tepat dan membatasi pilihan. Mengkonfirmasi dengan pengguna bahwa tindakan itu sulit atau tidak mungkin untuk dibatalkan. Sederhanakan Pemulihan dari Kesalahan – Membuat tombol "undo" bila memungkinkan. Gunakan Tata Bahasa yang Konsisten – Aplikasi Windows menggunakan perintah tata bahasa objek-tindakan.

31 Jenis Kontrol Navigasi
Ada tiga pendekatan perangkat lunak dasar untuk menentukan perintah pengguna : - Bahasa: command language dan natural language. - Menu: Sebuah menu menyajikan pengguna dengan daftar pilihan - Manipulasi Langsung: Dengan manipulasi langsung, pengguna memasukkan perintah dengan bekerja secara langsung dengan objek antarmuka.

32 Tipe-Tipe Menu

33 Messages Pesan adalah cara sistem merespons pengguna dan menginformasikan pengguna tentang status interaksi. Pesan harus jelas, ringkas, dan lengkap. Semua pesan harus benar secara gramatikal dan bebas dari jargon dan singkatan (kecuali jika itu adalah kata-kata pengguna). Hindari negatif dan humor.

34 (lanjt...) Tipe-tipe messages

35 DESAIN INPUT Mekanisme input memudahkan masuknya data ke dalam sistem komputer. Desain input berarti merancang layar yang digunakan untuk memasukkan informasi dan formulir dimana pengguna menulis dan mengetik informasi.

36 Prinsip-Prinsip Dasar
Tujuan dari desain input adalah untuk menangkap informasi yang akurat untuk sistem secara sederhana dan mudah.

37 Gunakan Online dan Batch Processing dengan tepat
Ada dua format umum untuk memasukkan masukan ke dalam sistem komputer: pengolahan online dan pemrosesan batch. Online processing: Setiap item masukan dimasukkan ke dalam sistem dengan segera. Batch processing: Semua masukan yang dikumpulkan selama beberapa periode dikumpulkan dan dimasukkan ke dalam sistem pada satu waktu dalam batch. Pengolahan batch menyederhanakan komunikasi data dan mengurangi biaya komunikasi.

38 Capture Data di Source Prinsip terpenting dalam desain input adalah menangkap data dalam format elektronik pada sumber aslinya. Ini mengurangi pekerjaan duplikasi, mengurangi waktu proses, menurunkan biaya, mengurangi kemungkinan kesalahan.

39 (lanjt...) Otomatisasi data sumber mengacu pada penggunaan perangkat keras khusus untuk menangkap data secara otomatis tanpa memerlukan orang untuk mengetiknya. Teknologi otomatisasi sumber data: bar code readers optical character recognition magnetic stripe readers smart cards RFID (radio frequency identification) tags the Web.

40 Meminimalkan Keystroke
Keystrokes menghabiskan banyak waktu dan uang. Sistem tidak boleh meminta informasi yang dapat diperoleh dengan cara lain (mis., Dengan mengambilnya dari database). Sistem seharusnya tidak mengharuskan pengguna mengetikkan informasi yang bisa dipilih dari daftar. Nilai yang sering harus digunakan sebagai nilai default untuk data.

41 Tipe-Tipe Input There are many different types of inputs, in the same way that there are many different types of fields.

42 (lanjt...) Ada banyak jenis kotak pilihan

43 Validasi Input Semua data yang masuk ke sistem harus divalidasi untuk memastikan keakuratannya. Input validation (juga disebut edit checks) bisa memiliki banyak bentuk

44 (lanjt...) Ada enam jenis pemeriksaan validasi :

45 DESAIN OUTPUT Output adalah laporan yang dihasilkan sistem, baik di layar, di atas kertas, atau di media lain, seperti Web. Output adalah bagian yang paling terlihat dari sistem apapun.

46 Prinsip-Prinsip Dasar
Tujuan dari mekanisme output adalah untuk menyajikan informasi kepada pengguna sehingga mereka dapat secara akurat memahaminya dengan sedikit usaha. Memahami penggunaan laporan - prinsip pertama dalam merancang laporan adalah memahami bagaimana penggunaannya. Mengelola beban informasi - tujuan dari laporan yang dirancang dengan baik adalah menyediakan semua informasi yang dibutuhkan tanpa informasi yang berlebihan. Minimalkan bias - tidak ada analis yang merancang sebuah laporan yang bias.

47 (lanjt...) Contoh bias: Bias dalam graphs.

48 Tipe-Tipe Output

49 Media Dua media laporan yang dominan adalah kertas dan elektronik.
Kertas adalah media yang lebih tradisional dan relatif permanen, mudah digunakan, sangat portabel, dan mudah diakses dalam banyak situasi. Namun, laporan surat kabar mahal harganya. Banyak organisasi yang beralih ke laporan produksi elektronik.

50 KESIMPULAN Prinsip-prinsip desain antarmuka pengguna - Tata letak, kesadaran konten, estetika, pengalaman pengguna, konsistensi, meminimalkan usaha pengguna. Proses perancangan antarmuka pengguna - Gunakan pengembangan skenario, desain struktur antarmuka, desain standar antarmuka, prototip desain antarmuka, dan evaluasi antarmuka.

51 (lanjt...) Desain Navigasi Desain Input Desain Output
- Tujuan mendasar dari desain navigasi adalah membuat sistem sesederhana mungkin digunakan. Desain Input - Tujuan dari desain input adalah dengan mudah dan mudah menangkap informasi yang akurat untuk sistem. Desain Output - Tujuan dari desain output adalah menyajikan informasi kepada pengguna sehingga mereka dapat memahaminya secara akurat dengan sedikit usaha.

52 SUMBER Alan Dennis, Barbara Haley Wixom, and Roberta Roth, 2011 Systems Analysis and Design, fifth Edition, John Wiley & Sons, Inc

53 Selesai