Step 3: Memahami Prinsip Desain Antarmuka

Presentasi berjudul: "Step 3: Memahami Prinsip Desain Antarmuka"— Transcript presentasi:

1 Step 3: Memahami Prinsip Desain Antarmuka

2 Outline Aspek Manusia dalam Desain Antarmuka
Interface Design Goals, The Test for a Good Design, Design Principles Aspek Teknologi dalam Desain Antarmuka Sistem Grafis, Sistem Web

3 Rancangan Antarmuka dan Layar yang Baik
mendukung kemampuan, kebutuhan dan task penggunanya, memperhatikan batasan fisik perangkat keras yang digunakan, memanfaatkan kemampuan perangkat lunak pendukungnya secara optimal, dan memenuhi tujuan bisnis sistem yang dirancang.

4 Aspek Manusia dalam Desain Antarmuka
Keinginan manusia: simplicity clarity understandability Saat berinteraksi dengan komputer, pengguna: mengidentifikasi task yang harus atau perlu dilakukan memutuskan cara menyelesaikan task tersebut memanipulasi kontrol terhadap komputer memisahkan data/ konten yang dibutuhkan dengan yang tidak melakukan penilaian terkait task atau kebutuhan

5 Sasaran Desain Antarmuka
Produktivitas dan kepuasan pengguna Kerja visual, intelektual, memori dan motorik

6 Prinsip desain antarmuka bagi pengguna
Setiap elemen harus bermakna bagi pengguna dan bertujuan untuk membantu pengguna dalam melakukan task minimalkan noise (informasi yang tidak berguna) maksimalkan signal (informasi yang berguna) Prinsip: too little is inefficient, too much is confusing Konsisten sesuai dengan pengalaman, ekspektasi, konvensi dan budaya pengguna terapkan konsistensi internal dalam aplikasi

7 Contoh Meaningless Message

8 Prinsip desain antarmuka bagi pengguna ..
Sediakan titik awal yang jelas mulai dari sudut kiri atas layar, mengalir searah jarum jam fokuskan perhatian pengguna pada bagian terpenting di layar/ halaman

9 Contoh Starting Point

10 Prinsip desain antarmuka bagi pengguna ..
Bagi informasi ke dalam unit-unit yang logis, bermakna dan dapat dipahami Berdasarkan keterkaitan antar data/ informasi Informasi yang perlu dibandingkan harus tampak bersamaan

11 Prinsip desain antarmuka bagi pengguna ..
Terapkan skema pengurutan, berdasarkan:

12 Prinsip desain antarmuka bagi pengguna ..
Navigasi dan aliran Letakkan elemen/ kontrol yang paling penting/ paling sering digunakan di kiri atas Terapkan aliran atas-ke-bawah, kiri-ke-kanan Arahkan perhatian pada items yang kritis  penting  pendukung  pelengkap Gunakan grafik untuk: Membandingkan data Menampilkan data dinamis Analisis statistik Ilustrasi proporsi

13 Contoh Grafik

14 Elemen-elemen Layar Title Caption/ labels Data fields Headings
Special symbols Instructions Completion aids Lists Keying procedures Data output

15 Contoh (Captions) Captions dan data fields rata kiri
Minta mahasiswa membandingkan tampilan yg berbeda. Mana yg lebih baik? Apa alasannya? Captions rata kanan, data fields rata kiri

16 Contoh (Entry & Read-only)

17 Contoh (Section Heading)

18 Contoh List Heading Field Group Heading List Format Completion Aids

19 Contoh (Tampilan data)

20 Penggunaan Web

21 Panduan Desain Halaman Web
Penuhi ekspektasi pengguna tentang isi, organisasi, dan navigasi Desain sesuai dengan kemampuan dan keterbatasan pengguna Tampilan visual harus atraktif dan konsisten Pastikan informasi penting Diletakkan dengan tepat Ditampilkan tanpa scrolling Desain untuk berbagai platform dan layar Minimalkan panjang halaman

22 Panduan Desain Halaman Web..
Halaman utama Menjelaskan tujuan situs Tampilkan semua pilihan, berikan uraian singkat Batasi dalam 1 layar Dapat diakses dari halaman lainnya

23 Aspek Teknologi dalam Desain Antarmuka
Desain layar harus compatible dengan kemampuan sistem, meliputi: System power: kecepatan pemrosesan dan memori kecil. Ukuran layar: mempengaruhi produktivitas dan gerakan kontrol yang diperlukan Resolusi layar: ukuran horisontal dan vertikal layar dalam satuan pixels. Warna tampilan: harus akurat dan jelas Fitur tampilan lainnya (brightness, polarity, font sizes and styles, blinking, dll) Aspek teknis akan dibahas lebih rinci di pertemuan2 berikutnya.. 

24 Aspek Teknologi dalam Desain Antarmuka ..
Desain layar juga harus compatible dengan kemampuan: Platform sistem (Mac, Ms Windows, dll) yang digunakan Perangkat pengembangan dan implementasi yang digunakan Toolkit, mis. Motif, OpenLook Interface builder UI Management System, mis. HyperCard, Visual Basic Style guide yang digunakan Apple’s Macintosh Human Interface Guidelines IBM’s System Application Architecture Common User Access (SAA CUA) Microsoft’s The Windows Interface Guidelines for Software Design

25 Terima Kasih..