Menerapkan pembuatan antar muka (User Intreface) pada aplikasi

Transkripsi

1 Menerapkan pembuatan antar muka (User Intreface) pada aplikasi

2 Menerapkan pembuatan antar muka (User Intreface) pada aplikasi Definisi dan Karakteristik Antar Muka ( Interface) Prinsip Perancangan Antar Muka User Interaction Penggunaan Warna pada desain Interface User Guidance

3 Definisi dan Karakteristik Antar Muka ( Interface) Interface (antar muka) adalah sebuah media yang dapat menjembatani antara user dan sistem untuk melakukan komunikasi. Antar muka mempunyai dua (2) tugas pokok: 1. menterjemahkan semua aksi yang diberikan user sehingga dimengerti system 2. menampilkan hasil operasi dari sistem kedalam bentuk yang dimengerti oleh user. Antar muka banyak sekali kita jumpai di kehidupan tidak hanya dalam software. Contoh interface : tombol start dan Window Explorer dalam OS Windows, remote TV, panel kontrol listrik, dan tombol on/of lampu.

4 Definisi dan Karakteristik Antar Muka ( Interface) Keuntungan GUI (Graphical User Interface): 1. Mudah dipelajari oleh pengguna yang cukup minim pengalaman dalam menggunakan computer 2. Memungkinkan user untuk dapat berpindah dari satu layar ke layar yang lain tanpa kehilangan informasi yang dibutuhkan. 3. Dapat melakukan akses penuh pada layar untuk menjalankan beberapa macam tugas/keperluan dalam waktu yang singkat.

5 Prinsip Perancangan Antar Muka 1. User Compatibility kesesuaian tampilan dengan tipikal dari user, karena berbeda user bisa jadi kebutuhan tampilannya berbeda. Misalnya, jika aplikasi diperuntukkan bagi anak-anak, maka jangan menggunakan istilah atau tampilan yang biasa digunakan oleh orang dewasa

6 Prinsip Perancangan Antar Muka 2. Product Compatibility produk aplikasi yang dihasilkan juga harus sesuai, memiliki tampilan yang sama/serupa, baik untuk user yang awam maupun yang ahli. 3. Task Compatibility fungsional dari task/tugas yang ada harus sesuai dengan tampilannya. Misal untuk pilihan report, orang akan langsung mengartikan akan ada ditampilkan laporan. Sehingga tampilan yang ada bukan lagi tampilan dari tipe data(dari sisi pemrogram).

7 Prinsip Perancangan Antar Muka 4. Work Flow Compatibility satu tampilan layar aplikasi dapat digunakan untuk melakukan berbagai macam pekerjaan. Misal untuk mengirimkan kita tidak harus membuka halaman lain untuk memilih penerima, karena sudah disediakan combo box untuk memilih penerima di layar tersebut. 5. Consistency konsisten. Contohnya, jika anda menggunakan istilah save yang berarti simpan,maka gunakan terus istilah tersebut.

8 Prinsip Perancangan Antar Muka 6. Familiarity gunakan simbol-simbol yang familiar dengan user. Contoh, gunakan icon disket untuk mewakili perintah save (simpan) 7. Simplicity aplikasi telah menyediakan pilihan default untuk suatu pekerjaan. Selanjutnya tergantung user akan mengubahnya atau tetap menggunakan pilihan default tersebut. 8.Direct Manipulation manipulasi secara langsung. Misalnya untuk mempertebal huruf, cukup denganctrl+b

9 Prinsip Perancangan Antar Muka 9. Control berikan kontrol penuh pada user, tipikal user biasanya tidak mau terlalu banyak aturan. 10. WYSIWYG What You See Is What You Get, buatlah tampilan mirip seperti kehidupan nyata user dan pastikan fungsionalitas yang ada berjalan sesuai tujuan 11. Flexibility ijinkan user untuk melakukan perubahan (kustomisasi) terhadap tampilan mereka sendiri. 12 Responsiveness tampilan yang dibuat harus bisa memberikan report/respon kepada user secara real time. misal, yang sering kita lihat ketika ada tampilan please wait... 68%...

10 Prinsip Perancangan Antar Muka 13. Invisible Technology user tidak penting mengetahui algoritma apa yang digunakan. Contohnya untuk mengurutkan pengguna tidak perlu mengetahui algoritma yang digunakan programmer (max sort, bubble sort, quick sort, dst). 14. Robustness handal. Dapat mengakomodir kesalahan yang dilakukan oleh user. Jangan malah error, apalagi sampai crash. 15. Protection melindungi user dari kesalahan yang umum dilakukan. Misalnya dengan memberikan fitur back atau undo. 16. Ease of learning and using Aplikasi harus mudah di pelajari dan digunakan

11 User Interaction User interaction adalah sebuah istilah yang digunakan untuk mewakili bagaimana seorang user dapat melakukan komunikasi dengan sebuah sistem (aplikasi) untuk menyelesaikan sebuah tugas tertentu. Masalah penting user interaction: 1. bagimana informasi yang diberikan user dapat dimengerti oleh komputer misalnya pada saat user melakukan input data 2. bagaimana informasi yang telah diolah komputer dapat ditampilkan dan dimengerti oleh user

12 Tipe utama User Interaction: 1. Direct manipulation Merupakan interaksi langsung dengan obyek pada layar, misalnya melakukan delete dengan memasukkan sebuah obyek ke dalam trash. 2. Menu selection Merupakan pilihan dengan bentuk menu. User tinggal memilih command yang sesuai dengan cara memilih menu yang telah disediakan. Misalnya saat klick kanan dan user dapat memilih aksi yang dikehendaki. 3. Form fill-in Merupakan interaksi dengan bentuk pengisian pada suatu form. Misalnya saat user melakukan pengisian data pendaftaran (register) pada suatu aplikasi.

13 Tipe utama User Interaction: 4. Command language Meruapan interaksi dengan cara menuliskan perintah yang telah disediakan. Misalnya menuliskan perintah pada shell OS (command prompt-windows, terminal-linux). 5. Natural language Merupakan interaksi dengan menggunakan bahasa alami (bahasa sehari-hari). Misalnya pengetikan kata kunci (keyword) pada mesin pencari (search engine) di internet.

14 Warna menambah dimensi ekstra pada suatu interface dan membantu user memahami struktur yang kompleks. Warna juga dapat dipakai untuk memberikan tanda penting berupa highlight pada hal-hal khusus. Kesalahan umum dalam penggunaan warna pada desain UI: 1. Menggunakan warna untuk mengkomunikasikan arti, merah bisa jadi peringatan atau ada kesalahan. 2. Terlalu banyak menggunakan kombinasi warna dalam menggunakan warna pada desain interface Penggunaan Warna pada desain Interface

15 Petunjuk Warna: 1. Hindari penggunaan terlalu banyak warna. 2. Gunakan kode warna untuk mendukung operasi. 3. Gunakan warna secara konsisten. 4. Hindari pasangan warna yang tidak cocok/norak. 5. Gunakan warna untuk menunjukkan perubahan status Penggunaan Warna pada desain Interface

16 User Guidance User guidance merupakan fasilitas sistem untuk mendukung user termasuk on-line help,error messages, dan user manual. System help dan system message (pesan kesalahan) adalah bentuk dari user guidance. Error Messages sangat penting, karena error message yang buruk cenderung ditolak oleh user.

17 User Guidance Dua macam pesan kesalahan: berorientasi pada sistem dan berorientasi pada pengguna. 1. Pesan kesalahan yang berorientasi pada sistem, pesan cenderung hanya singkat, tidak memberikan solusi yang jelas kepada user, bahasa yang digunakan adalah bahasa teknis yang tidak berarti apa-apa. 2. Pesan kesalahan yang berorientasi pada pengguna, pesan lebih jelas dan memberikan alternatif jalan keluar. Sekalipun informasi yang diberikan lebih banyak dan terkesan penuh, tapi user akan merasa tertolong

18 End, Thank You