PERANCANGAN ANTARMUKA ATAU LAYAR.

Presentasi berjudul: "PERANCANGAN ANTARMUKA ATAU LAYAR."— Transcript presentasi:

1 PERANCANGAN ANTARMUKA ATAU LAYAR

2 TIPE PENGGUNA KOMPUTER
FAKTOR MANUSIA SANGAT PENTING DALAM DESAIN ANTARMUKA PENGGUNA. 1. EXPERT USER PENGGUNA KOMPUTER YANG SUDAH BERPENGALAMAN 2. NOVICE USER PENGGUNA KOMPUTER YANG TIDAK BERPENGALAMAN ATAU PENGGUNA KOMPUTER KASUAL.

3 PEDOMAN PERANCANGAN LAYAR
1. BUATLAH RANCANGAN LAYAR YANG SEDERHANA. 2. BUATLAH TAMPILAN KONSISTEN. 3. SEDIAKAN FASILITAS PERPINDAHAN ANTAR LAYAR. 4. BUATLAH TAMPILAN LAYAR YANG MENARIK.

4

5 PERANCANGAN LAYAR MASUKKAN YANG BAIK :
JIKA LAYAR MASUKKAN DISAJIKAN BERDASARKAN DOKUMEN/FORMULIR MASUKKAN MAKA RANCANG LAYAR MASUKKAN MIRIP DENGAN FORMULIR MASUKKAN. JIKA ENTRI TERLALU BANYAK, GUNAKAN PENDEKATAN PARENT-CHILD (HEADER-DETAIL). TAMPILAN YANG BALANCE AKAN MUDAH DIBACA.

6 MASALAH-MASALAH ANTARMUKA:
TERLALU BANYAK MENGGUNAKAN JARGON ATAU AKRONIM KOMPUTER DESAIN YANG KURANG JELAS ATAU KURANG INTUITIF TIDAK MAMPU MEMBEDAKAN ANTARA TINDAKAN PILIHAN (“APA YG HARUS SAYA LAKUKAN SELANJUTNYA?”) PENDEKATAN MASALAH YANG TIDAK KONSISTEN KETIDAKKONSISTENAN DESAIN

7 TEKNOLOGI ANTARMUKA PENGGUNA
SISTEM OPERASI DAN WEB BROWSER DISPLAY MONITOR KEYBOARD DAN POINTER STYLE DAN KONSIDERASI ANTAR MUKA PENGGUNA

8 SISTEM OPERASI DAN WEB BROWSER
MICROSOFT WINDOWS APPLE’S MACINTOSH UNIX, LINUX WEB BROWSER INTERNET EXPLORER NETSCAPE NAVIGATOR MOZILLA FIREFOX

9 2.DISPLAY MONITOR TEKS 25 BARIS X 80 KOLOM JENIS FONT
UKURAN KARAKTER SAMA GRAFIS RESOLUSI BERAGAM - 640 X 480 - 800 X 600 X 768 X 1024

10 3. KEYBOARD DAN POINTER FUNCTION KEY SATU SERI DARI KEYBOARD KEY KHUSUS YANG DIGUNAKAN UNTUK OPERASI KHUSUS PROGRAM (F1…F12, DLL) 2.SEBAGIAN BESAR GUI MENGGUNAKAN ALAT PENUNJUK (POINTING DEVICES) SEPERTI MOUSE, PENS, DAN TOUCH SENSITIVE SCREEN.

11 4. STYLE DAN KONSIDERASI ANTARMUKA PENGGUNA GRAFIS
DESAIN MENU PENGGUNA ADALAH SPESIFIKASI MENGENAI DIALOG ATAU PERCAKAPAN ANTARA PENGGUNA SISTEM DAN KOMPUTER. DIALOG BIASANYA MENGHASILKAN INPUT DATA DAN OUTPUT INFORMASI

12 ADA BEBERAPA TIPE ANTARMUKA
PENGGUNA GRAFIS: WINDOWS DAN FRAME WINDOW ADALAH SEBUAH AREA EMPAT PERSEGI PANJANG. WINDOW TERBAGI DALAM KE DALAM ZONA-ZONA YANG BIASA DISEBUT FRAME.

13

14 2. ANTAR MUKA MENU DRIVEN STRATEGI DIALOG YANG MENGHARUSKAN PENGGUNA MEMILIH SEBUAH ACTION DARI MENU PILIHAN

15

16 3. MENU PULL-DOWN

17 4. CASCADING MENU

18 MENU TEAR-OFF DAN POP-UP, TIDAK SEMUA MENU DIPINDAHKAN KE MENU BAR
MENU TEAR-OFF DAN POP-UP, TIDAK SEMUA MENU DIPINDAHKAN KE MENU BAR. BEBERAPA GUI MENGIZINKAN PENGGUNA TEAR-OFF MENU. PENGGUNA, DENGAN MENGGUNAKAN TEAR-OFF MENU, AKAN MEMILIH DI ANTARA PULL-DOWN MENU ATAU CASCADE MENU.

19 CONTOH: Si51/23/11 menu bar Cascading menu Pull-down menu

20 DIALOGUE BOX , PADA BEBERAPA KASUS SUBMENU ACTION YANG TELAH DIBERI NAMA DIIKUTI OLEH BEBERAPA ELIPS(3 BUAH TITIK) YANG MENUNJUKKAN DIALOGUE BOX.

21

22 POP-UP MENU ADALAH CONTEXT-SENSITIVE DAN TERGANTUNG PADA SEBUAH ALAT POINTING. DIAKTIFKAN OLEH PENGGUNA DENGAN KLIK KANAN MOUSE, MENU INI AKAN MUNCUL DARI SUATU TEMPAT. MENU YANG MUNCUL TERGANTUNG PADA LOKASI KURSOR PADA SCREEN. KURSOR DAPAT DIARAHKAN PADA SEBUAH AREA KOSONG,FIELD, CELL, KATA, ATAU SEBUAH OBJEK.

23 SI5G/24/11 MI5A/30/11

24 MENU TOOLBAR DAN ICONIC, TOOLBAR TERDIRI DARI BEBERAPA ICON (GAMBAR) YANG MENUNJUKKAN SHORTCUT MENU UNTUK ACTION DAN PERINTAH YANG BIASANYA DILEKATKAN PADA MENU DROP DOWN DAN CASCADING. PADA APLIKASI WINDOW, TOOLBAR BIASANYA MENGGUNAKAN ACTION-ACTION YANG ADA TEPAT DIBAWAH MENU BAR.

25

26 MENU ICONIC MENGGUNAKAN GAMBAR UNTUK MENGGAMBARKAN PILIHAN MENU PADA BODY UTAMA WINDOW. PADA APLIKASI WINDOW, MENU ICONIC SERING DIGUNAKAN UNTUK MEMBERIKAN FUNGSI DAN KEGIATAN UTAMA UNTUK SEBUAH APLIKASI KOMPUTER ATAU UNTUK MENDOKUMENTASIKAN LANGKAH-LANGKAH BISNIS DALAM MENGGUNAKAN APLIKASI KOMPUTER.

27

28 ANTARMUKA CONSUMER STYLE UNTUK APLIKASI WINDOWS SEDIKIT LEBIH ARTISTIK
ANTARMUKA CONSUMER STYLE UNTUK APLIKASI WINDOWS SEDIKIT LEBIH ARTISTIK. POPULARITAS ANTARMUKA WEBLIKE SANGAT MEMPENGARUHI DESAIN ANTAR MUKA PENGGUNA WINDOWS.

29 SI5A/22/11

30 HYPERTEXT DAN HYPERLINK SEKARANG TIDAK EKSKLUSIF LAGI BAGI APLIKASI INTERNET DAN INTRANET. BANYAK APLIKASI WINDOWS TELAH MENCAKUP POPULARITAS WEB DENGAN MENGGUNAKAN HYBRID WINDOWS/WEB.

31

32 DARIPADA MENGGUNAKAN MENU, BEBERAPA APLIKASI DIDESAIN DENGAN MENGGUNAKAN SEBUAH DIALOG BERBASIS INSTRUCTION SET (DISEBUT JUGA COMMAND LANGUAGE INTERFACE)

33

34 INTERNAL CONTROL –AUTENTIKASI DAN AUTORISASI
INTERNAL CONTROL –AUTENTIKASI DAN AUTORISASI. PADA SEBAGIAN BESAR LINGKUNGAN, PENGGUNA SISTEM HARUS DIAUTENTIKASI DAN AUTORISASI OLEH SISTEM SEBELUM MEREKA DIIZINKAN MELAKUKAN BEBERAPA TINDAKAN TERTENTU. DENGAN USER ID DAN PASSWORD.

35

36 DENGAN MUNCULNYA E-C0MMERCE UNTUK MENGATAKAN PADA KONSUMEN BAHWA DATA AKAN DIENKRIPSI ATAU DIAMANKAN DENGAN MENGGUNAKAN SERTIKAT AUTENTIKASI.

37

38

39 MENU DENGAN BANTUAN TOOL TIP UNTUK PENGGUNA DENGAN MENGGUNAKAN BERBAGAI ICON

40 A

41 HELP WIZARD MEMANDU PENGGUNA MELALUI PROSES YANG KOMPLEKS DENGAN CARA MENAMPILKAN SEBUAH URUTAN DIALOG BOX YANG MEMBUTUHKAN INPUT DARI USER DAN FEEDBACK DARI SISTEM

42

43 ADA PERTANYAAN