Sistem harus dirancang dengan cara yang familiar dan mudah dimengerti adalah

Pertemuan 13

IMK Week 13- Game Interface Design

Apa itu Game?

Game komputer merupakan sebuah program perangkat lunak dimana satu atau lebih pemain membuat keputusan melalui kontrol objek (game) dalam mengejar tujuan.
Sebuah permainan game komputer melibatkan beberapa pemain.
Bermain sebuah game adalah tentang membuat sebuah keputusan (menggunakan senjata apa, apa yang harus dilakukan, dan lainnya)
Sebuah permain (game) memerlukan sebuah tujuan (tanpa ada tujuan permainan, user (player) malah hanya akan mengembangkan permainannya sendiri)

“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).

Sebuah Permainan (Game) tidak selalu berakhir ketika kondisi kemenangan tercapai.
Game dapat juga menentukan kondisi kerugian (atau sebaliknya).

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:

Goal
Execution: Intention to act, Sequence of action, Execution of action sequence.
Evaluation: Evaluation interpretations, Interpreting perceptions, Perceiving States.

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:
- https://tools.pingdom.com/
- https://developers.google.com/speed/pagespeed/insights/
- https://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”