pertemuan 10 - ui

10. Desain AntarmukaMata Kuliah : Rekayasa Perangkat Lunak 1

Kode MK : AK - 045226

Apa itu UI?

Desain antarmuka adalah bagian penting dari proses desain perangkat lunak. Desain antarmuka pengguna harus menjamin interaksi antara manusia dan mesin.

UI harus menyediakan operasi dan kontrol dari mesin yang efektif. Untuk mencapai potensi penuh, antarmuka pengguna harus dirancang agar sesuai dengan kemampuan, pengalaman, dan harapan para penggunanya.

Bab 10. Desain Antarmuka

UI vs UX

UI fokus kepada bagaimana seluruh tampilan sebuah produk dilihat dan ditata dari antarmuka pengguna.

Sedangkan UX fokus bagaimana merasakan pengalaman dari sebuah produk dilihat dari antarmuka pengguna.

Bab 10. Desain Antarmuka

Prinsip Dasar UI

Learnability. User  familiarity Consistency. Minimal surprise Recoverability. User  guidance User  diversity

Bab 10. Desain Antarmuka

Learnability

Perangkat lunak ini harus mudah untuk dipelajari sehingga pengguna dapat dengan cepat mulai bekerja dengan perangkat lunak.

Bab 10. Desain Antarmuka

User  familiarity

Antarmuka harus didasarkan pada hal-berorientasi pengguna? Dan konsep daripada konsep komputer. Sebagai contoh, sistem kantor harus menggunakan konsep-konsep seperti surat, dokumen, folder dll daripada direktori, pengidentifikasi file, dll

Bab 10. Desain Antarmuka

Consistency

Sistem ini harus menampilkan tingkat yang tepat? Konsistensi. Perintah dan menu harus memiliki format yang sama, perintah tanda baca harus serupa, dll

Bab 10. Desain Antarmuka

Minimal surprise

UI tidak banyak mengejutkan pengguna. Artinya Jika perintah beroperasi dengan cara yang diketahui, pengguna harus dapat memprediksi output yang dihasilkan.

Bab 10. Desain Antarmuka

Recoverability

Sistem harus menyediakan beberapa ketahanan dari kesalahan pengguna dan memungkinkan pengguna untuk memulihkan (recover) diri dari kesalahan. Contoh fasilitas undo, konfirmasi tindakan, dll

Bab 10. Desain Antarmuka

User  guidance

Beberapa petunjuk pengguna seperti sistem bantuan, on-line manual, dll harus disediakan

Bab 10. Desain Antarmuka

User  diversity

Fasilitas interaksi untuk berbagai jenis pengguna harus didukung. Sebagai contoh, beberapa pengguna kesulitan membaca huruf kecil maka disediakan fasilitas huruf yang lebih besar.

Antarmuka harus menyediakan mekanisme interaksi yang sesuai untuk beragam jenis pengguna dan untuk pengguna dengan kemampuan yang berbeda

Bab 10. Desain Antarmuka

Topik Penting Dalam UI

Dua masalah harus diatasi dalam desain sistem interaktif1.How should the user interact with the software?

2.How should information from the software be presented to the user?

Interaksi pengguna dan penyajian informasi dapat diintegrasikan melalui kerangka kerja yang koheren seperti metafora antarmuka pengguna

Bab 10. Desain Antarmuka

The Design of User Interaction Modalities

Question-answer Direct manipulation Menu selection Form fill-in Command language Natural language

Bab 10. Desain Antarmuka

Question-answer

Interaksi pada dasarnya terbatas pada pertukaran pertanyaan-jawaban tunggal antara pengguna dan perangkat lunak. Pengguna mengeluarkan pertanyaan untuk perangkat lunak, dan perangkat lunak yang mengembalikan jawaban atas pertanyaan.

Bab 10. Desain Antarmuka

Direct manipulation

Pengguna berinteraksi langsung dengan objek pada komputer. Manipulasi langsung sering kali berisi perangkat penunjuk (seperti mouse, trackball, atau touchscreen) yang memanipulasi obyek dan memanggil tindakan yang menentukan apa yang harus dilakukan dengan objek itu.

Bab 10. Desain Antarmuka

Menu selection

Pengguna memilih perintah dari daftar menu perintah.

Bab 10. Desain Antarmuka

Form fill-in

Pengguna mengisi Formulir. Kadang-kadang formulir termasuk menu, dalam hal bentuk ini memiliki tombol aksi bagi pengguna untuk melakukan tindakan.

Bab 10. Desain Antarmuka

Command language

Pengguna mengeluarkan perintah dan memberikan parameter terkait untuk mengarahkan software apa yang harus dilakukan. perintah berupa perintah-perintah komputer contoh: Terminal Linux, Command Prompt

Bab 10. Desain Antarmuka

Natural language

Pengguna mengeluarkan perintah dalam bahasa alami. Artinya, bahasa alami adalah front end untuk bahasa perintah dan diurai dan diterjemahkan ke dalam perintah software.

Bab 10. Desain Antarmuka

Kelebihan dan Kekurangan

Bab 10. Desain Antarmuka

Interactionstyle

Main advantages Main disadvantages Applicationexamples

Directmanipulation

Fast and intuitiveinteractionEasy to learn

May be hard toimplementOnly suitable wherethere is a visualmetaphor for tasksand objects

Video gamesCAD systems

Menuselection

Avoids user errorLittle typingrequired

Slow for experiencedusersCan become complexif many menu options

Most general-purpose systems

Form fill-in Simple data entryEasy to learn

Takes up a lot ofscreen space

Stock control,Personal loanprocessing

Commandlanguage

Powerful andflexible

Hard to learnPoor errormanagement

Operating systems,Library informationretrieval systems

Naturallanguage

Accessible tocasual usersEasily extended

Requires more typingNatural languageunderstandingsystems are unreliable

Timetable systemsWWW informationretrieval systems

Desain Presentasi Informasi

Informasi Statis Dijalankan pada awal sesi. tidak berubah selama

sesi berlangsung numerik atau tekstual

Informasi Dinamis Perubahan selama sesi dan perubahan harus

dikomunikasikan kepada pengguna sistem numerik atau tekstual

Bab 10. Desain Antarmuka

Alternative information presentations

Bab 10. Desain Antarmuka

0

1000

2000

3000

4000

Jan Feb Mar April May June

Jan2842

Feb2851

Mar3164

April2789

May1273

June2835

Analogue vs. digital presentation

Digital presentation memakan sedikit ruang layar Nilai yang tepat dapat dikomunikasikan

Analogue presentation Lebih mudah untuk mendapatkan kesan Mungkin untuk menunjukkan nilai relatif Mudah untuk melihat nilai data yang luar biasa

Bab 10. Desain Antarmuka

Localization and Internationalization Desain antarmuka pengguna sering perlu mempertimbangkan

Internationalization dan Localization, yang berarti software beradaptasi dengan bahasa yang berbeda, perbedaan regional, dan persyaratan teknis target pasar.

Internationalization adalah proses mendesain aplikasi software agar bisa diadaptasi ke berbagai bahasa dan wilayah tanpa perubahan rekayasa yang masif.

Localization adalah proses mengadaptasi software untuk wilayah atau bahasa tertentu dengan menambahkan komponen lokal-spesifik dan menerjemahkan teks.

Localization dan Internationalization harus mempertimbangkan faktor-faktor seperti simbol, angka, mata uang, waktu, dan pengukuran unit.

Bab 10. Desain Antarmuka

User Interface Design Process

Bab 10. Desain Antarmuka

TUGAS

Pilih Sebuah Website, dan Analisis website tersebut berdasarkan prinsip-prinsip Desain Antarmuka yang telah dipelajari!

Bab 10. Desain Antarmuka

The end

Bab 10. Desain Antarmuka