Pertemuan 13 IMK Week 13- Game Interface Design Apa itu Game? “Ketika seorang desainer game ditanya bagaimana gamenya akan membuat perbedaan, saya harap dia “berbicara tentang gameplay, kesenangan, dan kreativitas – sebagai jawaban dari seberapa bagus tampilannya” – Sid Meier (Civilizations, Railroad Tycoon , Pirates). Didalam sebuah permainan (Game) terdapat sebuah definisi dan instruksi yang harus disetujui pemain untuk diterima. Didalam sebuah permainan (Game) terdapat 7 tahapan yang dinamakan “Seven Stages of Action” yang dibagi kedalam 3 tahap yaitu: Sistem dibangun dari model mental desainer. Model desain hanya dapat mengantisipasi tujuan pemain.
Pertemuan 12
IMK Modul ke 12- Alat Bantu Eksplorasi Informasi
Web Design Principles
“Atribut: untuk dapat mendesain antar muka sistem berbasis web yang efektif dibutuhkan beberapa atribut antara lain Textual Content, Graphic Design, Navigation, dll..”
TEXTUAL CONTENT: konten yang ditampilakn dalam sebuah website memiliki nilai yang lebih penting dibandingkan desain dari website itu sendiri.
Beberapa hal yang perlu diperhatikan semisal user cenderung hanya membaca header, highlights dan paragraf tertentu. oleh karenanya pembuat konten haruslah jeli terhadap hal tersebut.
GRAPHIC DESIGN: Tampilan grafis harus diperhatikan terkait masalah konsistensi, susunan antara teks dan gambar, kontras, warna dan fungsionalitas dari gambar yang ditampilkan.
Beberapa hal yang perlu diperhatikan:
- Pemilihan format gambar yang sesuai dan pertimbangan masalah ukuran file gambar yang akan mempengaruhi kecepatan akses dan waktu tunggu (delay), dan
- Menyesuaikan tampilan grafis dengan dimensi halaman website yang akan ditampilkan di layar.
Beberapa pilihan format file gambar yang sesuai seperti:
- GIF (Graphic Interchange Format): Keuntungannya memungkinkan warna transparan dan animasi.
- JPEG (Joint Photographic Expert’s Group): Keuntungannya memungkinkan memilih faktor kompresi dan menentukan kualitas gambar.
- PNG (New Universal Format): Lebih unggul untuk menampilkan warna transparan dibandingkan GIF dan JPEG.
NAVIGATION: Navigasi merupakan elemen kritis dalam menentukan efektivitas antarmuka sebuah website. Navigasi harus memberikan penjelasan tentang struktur informasi pada website, dengan menyediakan: Daftar isi, Index, Navigation Bar, Kemampuan Searching.
PERTEMUAN 10
THE USER INTERFACE (UI) – DESIGN PROCESS
Step 11-12
Create Meaningful Graphics,Icons, and Images & Choose the Proper Colors
–ICONS–
- Ikon adalah visualisasi bergambar yang paling sering digunakan untuk mewakili objek dan tindakan yang dapat berinteraksi dengan pengguna atau yang dapat mereka manipulasi.
- Sediakan ikon yang familiar, jelas, mudah terbaca, sederhana, konsisten, langsung,dan efisien.
- Pertimbangkan juga konteks di mana ikon digunakan.
Ciri dari ikon yang baik:
- Tampak berbeda dari semua ikon lainnya.
- Jelas apa yang dilakukannya atau diwakilinya.
- Dapat dikenali jika tidak lebih dari 16 piksel persegi.
- Terlihat bagus dalam warna hitam dan putih.
—-MULTIMEDIA—-
- Fleksibilitas grafis dari Web memungkinkan dimasukkannya media lain di layar, termasuk gambar, foto, video, diagram, gambar, dan audio lisan.
- Di satu sisi, berbagai media dapat menjadi teknik komunikasi dan mendapatkan perhatian yang kuat.
- Tujuan menambahkan multimedia adalah agar desain interaksinya bagus, bukan agar “berkilau”.
—-GRAPHICS—-
- Grafik biasa digunakan untuk melengkapi konten tekstual, bukan sebagai penggantinya lalu dapat disampaikan informasi yang tidak dapat diselesaikan secara efektif menggunakan teks.
- Batasilah penggunaan grafik yang membutuhkan waktu lama untuk dimuat (file yang besar/berat).
- Jenis grafik (berdasarkan tujuan):
- Untuk mengidentifikasi tautan yang mungkin diikuti
- Untuk mengilustrasikan item yang disebutkan dalam teks
- Untuk menghubungkan item yang disebutkan dalam teks
- Untuk menunjukkan bagaimana sesuatu atau proses bekerja
- Untuk memberikan daya tarik dan penekanan visual
- Contoh yang dapat diimplementasikan menjadi grafik yaitu Gambar, Peta gambar, Foto, Video, Diagram, Animasi dan lain-lain.
—-COLORS (warna)—–
- Warna dapat menambahkan dimensi atau realisme terhadap kegunaan layar.
- Warna haruslah dapat menarik perhatian pengguna. Sehingga jika digunakan dengan benar, ini dapat menekankan pengaturan logis dari informasi, memfasilitasi diskriminasi komponen layar, menonjolkan perbedaan antar elemen, dan membuat tampilan lebih menarik dan atraktif.
- Penggunaan Warna:
- Warna untuk dapat membantu menginformasikan sesuatu hal, misal memecah pengelopokan informasi dapat menggunakan beberap warna.
- Warna digunakan sebagai kode visual untuk mengidentifikasi beberapa hal seperti komponen layar, sumber informasi hingga status informasi.
- Warna juga dapat digunakan untuk meningkatkan daya tarik pengguna/user.
Step 5 – Pemilihan Tipe Windows
Tujuan: dapat mampu memilih dan merancang windows yang sesuai dengan kebutuhan.
Window adalah sebuah area di layar, biasanya berbentuk persegi empat, memiliki batas-batas dan memiliki bagian yang menunjukkan aktivitas komputer atau bagian yang memungkinkan manusia berdialog dengan komputer.
Karakteristik Window:
- Nama atau judul, sebagai identitas window.
- Ukuran (tinggi dan lebar) bisa bervariasi. Status: aktif/ dapat diakses atau pasif/tidak dapat diakses.
- Visibilitas–bagian yang dapat dilihat (Sebagian atau seluruhnya dapat tersembunyi di balik window lain).
- Lokasi, relative terhadap batas layer.
- Tampilan, yaitu pengelolaan terkait dengan windows lain (tiled, overlap, cascading).
- Kemampuan manajemen, metode manipulasi window pada layer.
- Highlight, yaitu bagian yang dipilih. Fungsi, task, atau aplikasi yang didukung.
Continue reading “Rangkuman Materi IMK Pertemuan 5”
Step 9 – Provide Effective Feedback and Guidance and Assistance
(Mampu merancang Feedback, guidance dan assistance dengan efektif).
Merancang Feedback yang efektif dibagi menjadi 4 topik, yaitu:
- Acceptable Response Time
- Waktu Response yang optimal bergantung pada tugasnya,
- Kepuasan atas waktu respons merupakan tujuan utama dari ekspektasi tersebut,
- Ketidakpuasan dengan waktu respons merupakan ketidakpastian atas penundaan (delay),
- Seseorang akan mengubah kebiasaan kerja agar sesuai dengan waktu respons,
- Waktu respons yang sangat cepat maupun lambat dapat menyebabkan gejala stress.
- Berikut hasil penilaian waktu respons:
- High (baik): Hingga 5 detik.
- Average: dari 6 s.d 10 detik.
- Low (buruk): lebih dari 10 detik.
- Terdapat beberapa website untuk mengetahui performa kecepatan akses website seperti:
- //tools.pingdom.com/
- //developers.google.com/speed/pagespeed/insights/
- //gtmetrix.com/
Continue reading “Rangkuman Materi IMK Pertemuan 7”
The User Interface (UI) Design Proses
Step 7 (Screen Based Control)
Tujuan: Mampu memilih dan menerapkan screen based controls yang tepat dengan kebutuhan.
- Screen Control biasa disebut dengan ‘widgets’.
- Widget merupakan sebuah objek grafis yang menampilkan sebuah operasi fungsi tertentu dari suatu objek.
- beberapa fungsi widget antara lain:
- mengizinkan perubahan atau editing objek tertentu
- menampilkan pilihan bagian teks, nilai hingga grafik tertentu
- mengeksekusi sebuah perintah
Continue reading “Rangkuman Materi IMK Pertemuan 6”
The User Interface (UI) – Design Process
Step3 – Memahami Prinsip Desain Interface dengan baik
- Desain Antarmuka yang baik:
- Mencerminkan kemampuan, kebutuhan dan tugas penggunanya.
- Memanfaatkan kemampuan perangkat lunak secara efektif.
- Mencapai tujuan bisnis dari sistem yang dirancang.
- Pertimbangan Seseorang dalam Desain Antarmuka:
- Cara mencegah timbul masalah dari pengguna.
- Apa yang pengguna inginkan -> Kesederhanaan, Kejelasan dan Dimengerti
- Apa yang pengguna lakukan.
- Tujuan Desain Antarmuka Pengguna:
Banyak sekali pedoman yang mengacu pada layar berbasis karakter, tidak terkecuali pada pedoman untuk GUI. Panduan tersebut dapat dibagi menjadi enam bagian yaitu:
- Data Entry;
- Data Display;
- Sequence Control;
- User Guidelines;
- Data Transfer;
- Data Protection;
Continue reading “Rangkuman Materi IMK Pertemuan 4”
Step 2 – Understand The Business Function
Tujuan materi ini yaitu:
- Memahami pentingnya mengetahui fungsi bisnis berdasarkan Persona user sebagai acuan dalam merancang antarmuka perangkat lunak.
- Mengerti dan menerapkan setiap tahapan dalam mengidentifikasi alur kerja setiap task berdasarkan Persona User.
Continue reading “Rangkuman Materi IMK Pertemuan 3”
Pengertian Persona
Pengembangan aplikasi saat ini tidak hanya terletak pada perancangan user interface yang bagus dan menarik namun juga memberikan pengalaman menyenangkan bagi user atau lebih dikenal dengan User Experience. Sebagai contoh jika sebuah aplikasi website toko baju online yang mempunyai user interface yang bagus dengan tampilan yang menarik namun pada saat user mau melakukan pembelian ada banyak tahap yang perlu dilakukan. Hal ini tentu saja menimbulkan pengalaman yang tidak menyenangkan bagi user. Bisa saja user sudah melakukan pembelian sekali dan tidak mau melakukan pembelian untuk berikutnya. Untuk menghindari hal seperti ini maka perlu terlebih dahulu memahami target user agar dapat merancang sebuah aplikasi website toko online yang memberikan pengalaman yang menyenangkan bagi user. Untuk memahami target user, perlu diketahui persona yang dimiliki oleh user yang menjadi target aplikasi yang akan dikembangkan.
Continue reading “Rangkuman Materi IMK Pertemuan 2”
1. Pendahuluan.
Mata kuliah Interaksi Manusia dan Komputer merupakan materi fundamental di Informatika. Interaksi Manusia dan Komputer merupakan mata kuliah yang mengajarkan mahasiswa tentang bagaimana Interaksi Manusia Komputer serta perannya dalam mewujudkan perangkat lunak yang tepat dan bermanfaat bagi user-nya. Dalam mata kuliah ini juga disampaikan tentang tahap-tahap dalam proses perancangan antarmuka pengguna (User Interface/UI), pengujian usability serta tren-tren desain UI yang terkini. Pada perkuliahan ini akan membekali mahasiswa informatika berfikir analitis dan logis. Continue reading “Rangkuman Materi IMK Pertemuan 1”