Step 3: Memahami Prinsip Desain Antarmuka

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

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.

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

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

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

Contoh Meaningless Message

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

Contoh Starting Point

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

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

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

Contoh Grafik

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

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

Contoh (Entry & Read-only)

Contoh (Section Heading)

Contoh List Heading Field Group Heading List Format Completion Aids

Contoh (Tampilan data)

Penggunaan Web

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

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

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.. 

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

Terima Kasih..