Lecture 3 User Interface Design 1 Topik n

  • Slides: 25
Download presentation
Lecture 3 User Interface Design 1

Lecture 3 User Interface Design 1

Topik n. Tips dan teknik dalam User Interface Design n. Prototyping n. Interface Flow

Topik n. Tips dan teknik dalam User Interface Design n. Prototyping n. Interface Flow Diagrams 2

Tips dan Teknik User Interface Design ……………. (1) n Consistency n Konsisten dalam peletakan

Tips dan Teknik User Interface Design ……………. (1) n Consistency n Konsisten dalam peletakan komponen n Konsisten dalam warna, font, ukuran n Konsisten dalam segala hal n Set standards and stick to them n Pakai standar yang sudah ada n Bila tidak ada, buat yang baru dengan menggunakan tombol-tombol yang jarang dipakai 3

Tips dan Teknik User Interface Design ……………. (2) n Explain the rules n User

Tips dan Teknik User Interface Design ……………. (2) n Explain the rules n User perlu tahu cara kerja aplikasi n Biasanya pakai help online n Aturannya juga harus konsisten n Support both novices and expert n Misal, untuk novice harus ada menu pop up lengkap sedangkan untuk expert perlu tool bar, speed bar, shortcut 4

Tips dan Teknik User Interface Design ……………. (3) n Navigation between screens is important

Tips dan Teknik User Interface Design ……………. (3) n Navigation between screens is important n Harus ada kesinambungan antar layar yang satu dengan berikutnya n Masing-masing user punya pemikiran yang berbeda sehingga sistem yang kita buat harus flexible dan mendukung pendekatan yang dipakai n Buat dulu interface flow diagram, sehingga jelas dari menu satu bisa ke menu apa saja, atau bagaimana dari layar tertentu bisa langsung ke main menu 5

Tips dan Teknik User Interface Design ……………. (4) n Navigation within a screen (form)

Tips dan Teknik User Interface Design ……………. (4) n Navigation within a screen (form) is important n Kiri ke kanan, atas ke bawah n Tab order harus urut, jangan lompat-lompat n Word your messages and labels appropriately n Jangan sampai susah dimengerti atau dapat menimbulkan persepsi yang berbeda n Kata atau kalimat lengkap itu lebih baik dari pada pakai kode n Contoh: nama (nama lengkap, panggilan, dsb) n alamat (alamat asal, alamat surat, dsb) 6

Tips dan Teknik User Interface Design ……………. (5) n Understand your widget (component) n

Tips dan Teknik User Interface Design ……………. (5) n Understand your widget (component) n Pakai sesuai fungsinya n misal: radio button untuk gender, check box untuk hobi n Tentukan standarnya, misal harus ada yang dipilih tidak boleh dikosongi n Look at other applications with a grain of salt n Misal program yang dibuat oleh Microsoft n Hati-hati, bila kurang baik atau kurang cocok jangan digunakan 7

Tips dan Teknik User Interface Design ……………. (6) n Use color appropriately n Jangan

Tips dan Teknik User Interface Design ……………. (6) n Use color appropriately n Jangan hanya pakai warna, tapi imbangi dengan kata-kata (pikirkan kemungkinan user yang buta warna) n Jika clik sesuatu, yang berubah jangan hanya warnanya saja, tapi juga keterangannya n Ingat tidak semua warna bisa ditampilkan sama dalam operating system yang berbeda n Follow the contrast rule n Pakai background gelap dan tulisan terang (atau sebaliknya) n sebaiknya: teks biru pada background putih n jangan: teks biru pada background merah 8

Tips dan Teknik User Interface Design ……………. (7) n Use Fonts appropriately n Pakai

Tips dan Teknik User Interface Design ……………. (7) n Use Fonts appropriately n Pakai font yang mudah dibaca n Jangan memakai terlalu banyak jenis font pada satu layar n Gray things out, do not remove them n Disable bila menu tidak boleh dipilih 9

Tips dan Teknik User Interface Design ……………. (8) n Use non destructive default buttons

Tips dan Teknik User Interface Design ……………. (8) n Use non destructive default buttons n Pakai tombol yang spesifik dan konfirmasikan ulang n Jangan pakai tombol ‘del’ sebagai default n Alignment of fields n Field label rata kanan n Field isian rata kiri 10

11

11

12

12

13

13

Tips dan Teknik User Interface Design ……………. (9) n Justify data appropriately n Integers

Tips dan Teknik User Interface Design ……………. (9) n Justify data appropriately n Integers rata kanan n Decimal align floating point numbers n Strings rata kiri n Do not create busy screens n Mayhew (1992): Overall density of the screen <= 40% Local density within groups <= 62% 14

Tips dan Teknik User Interface Design ……………. (10) n Group things on the screen

Tips dan Teknik User Interface Design ……………. (10) n Group things on the screen effectively n Kelompokan data yang berhubungan n Pakai tab atau batasi dengan box 15

Tips dan Teknik User Interface Design ……………. (11) n Open window in the center

Tips dan Teknik User Interface Design ……………. (11) n Open window in the center of the action n Misal tampilan error message, tampilkan di tempat yang di klik 16

Tips dan Teknik User Interface Design ……………. (12) n Pop-up menus should not be

Tips dan Teknik User Interface Design ……………. (12) n Pop-up menus should not be the only source of functionality n Semua fungsi yang ada di menu pop up harus ada di pull down menu, karena tidak semuanya ada di pop up. 17

18

18

Prototyping n Prototyping adalah teknik analisa yang sifatnya iterative dimana user terlibat secara aktif

Prototyping n Prototyping adalah teknik analisa yang sifatnya iterative dimana user terlibat secara aktif dalam menentukan form atau laporan. n Merupakan cara analisa yang disarankan dalam desain user interface n Tujuannya menyesuaikan dengan keinginan user (layout sudah pasti benar) 19

Prototyping Stages n Pastikan keinginan user n Interviews, CRC (Class Responsibility Collaborator) sessions, Use-case

Prototyping Stages n Pastikan keinginan user n Interviews, CRC (Class Responsibility Collaborator) sessions, Use-case sessions n Buat prototype n Gunakan tools yang tepat (lebih cepat lebih baik) n Evaluasi prototype n Tujuannya untuk mendeteksi apakah prototype yang dibuat sudah sesuai dengan keinginan user n Pastikan prototype yang dibuat sudah sesuai n Jika belum sesuai dengan keinginan user, maka kembali ke step 1 lagi n Hentikan proses pembuatan prototype bila sudah tidak ada perubahan yang signifikan 20

Prototyping Tips and Techniques n Gunakan komponen, form, warna yang umum dan standar sehingga

Prototyping Tips and Techniques n Gunakan komponen, form, warna yang umum dan standar sehingga user terbiasa n Evaluasi prototype dengan user yang memakai n Buat jadwal dan target kapan prototype bisa selesai n Gunakan tools supaya lebih cepat (biasanya visual software) 21

Prototyping Tips and Techniques n Libatkan user dalam pembuatan prototype n Prototype harus dimengerti

Prototyping Tips and Techniques n Libatkan user dalam pembuatan prototype n Prototype harus dimengerti oleh user n Levelnya: pakai tulisan tangan, form kosongan, form dengan contoh data n jangan habiskan banyak waktu hanya sekedar untuk memperbaiki tampilan 22

Interface Flow Diagrams n Interface Flow Diagrams menunjukkan hubungan antara user interface components, screens

Interface Flow Diagrams n Interface Flow Diagrams menunjukkan hubungan antara user interface components, screens and reports, yang ada pada aplikasi yang kita buat 23

24

24

Bacaan n Ambler, S. W. 2000, User Interface Design: Tips and Techniques, http: //www.

Bacaan n Ambler, S. W. 2000, User Interface Design: Tips and Techniques, http: //www. ambysoft. com 25