Perancangan Tampilan || Contoh membuat Rancangan Tampilan Program Absensi menggunakan Aplikasi DIA - Interaksi Manusia Dan Komputer

MEMBUAT RANCANGAN TAMPILAN PROGRAM ABSENSI MENGGUNAKAN APLIKASI “DIA”

Pertemuan kali ini saya mendapat materi tentang Perancangan Tampilan pada Mata Kuliah Interaksi Manusia & Komputer, dan diberi tugas untuk membuat rancangan tampilan menggunakan Microsoft Visio atau aplikasi lainnya. Karena saya menggunakan Sistem Operasi Linux Ubuntu, kali ini saya akan
menggunakan aplikasi bernama DIA (btw bukan DIA yang kau impikan itu).

DIA adalah sebuah aplikasi free dan open source software nya yang berfungsi untuk membantu pembuatan dan perencanaan diagaram agar lebih terstruktur. Dengan adanya DIA, maka pengerjaan representasi data menggunakan grafik atau diagram menjadi lebih mudah

Sebelum membuat rancangan tampilannya saya akan membahas sedikit tentang Perancangan Tampilan Interaksi Manusia dan Komputer.

A. Dokumentasi rancangan dapat dikerjakan dalam beberapa cara:

1. Membuat sketsa pada kertas.
2. Menggunakan peranti prototipe GUI.
3. Menuliskan tekstual yang menjelaskan tentang kaitan antara satu jendela dengan jendela yang lain.
4. Menggunakan peranti bantu yang disebut CASE (Computer-Aided Software Engineering).

B. Cara Pendekatan

Program aplikasi, pada dasarnya dapat dikelompokkan kedalam dua kategori besar, yakni:
a. Program aplikasi untuk keperluan khusus dengan pengguna yang khusus pula (special purpose software)
b. Program aplikasi yang akan digunakan oleh banyak pengguna (general purpose software) atau public software.

C. Special Purpose Software.

- Program aplikasi keperluan khusus dengan pengguna yang khusus pula cara pendekatan yang dilakukan diistilahkan dengan User-centered design approach.
- User-centered design approach adalah perancangan antarmuka yang melibatkan penguna.
- Perancang dan pengguna duduk bersama-sama untuk merancang antarmuka yang diinginkan pengguna, sehingga dengan cara ini pengguna seolah-olah sudah mempunyai gambaran nyata tentang antarmuka yang nanti akan mereka gunakan.
Contohnya :
- Program aplikasi untuk inventori gudang.
- Pengelolaan data akademis mahasiswa.
- Pelayanan Reservasi hotel.
- Dll.

D. Prinsip dan Petunjuk Perancangan

Antarmuka pengguna secara alamiah terbagi menjadi empat komponen :
- Model Pengguna
- Bahasa Perintah
- Umpan Balik
- Dan Penampilan Informasi

Penjelasan :

- Model pengguna merupakan model konseptual yang diinginkan oleh pengguna dalam memanipulasi informasi dan proses yang dia aplikasikan pada informsi tersebut. Model pengguna dapat berupa suatu simulasi tentang keadaan yang sebenarnya dalam dunia nyata, sehingga ia tidak perlu mengembangkan sendiri dari awal.

- Setelah pengguna mengetahui dan memahami model yang diinginkan, dia memerlukan peranti bahasa perintah (Command language) untuk memanipulasi model itu.

E. Urutan Perancangan

1. Pemilihan Ragam Dialog.
Pemilihan ragam dialog dipengaruhi oleh karakteristik populasi pengguna, tipe dialog yang diperlukan, dan kendala teknologi yang ada untuk mengimplementasikan ragam dialog tersebut. Ragam dialog yang dipilih dapat berupa sebuah ragam dialog tunggal, atau sekumpulan ragam dialog yang satu sama lain saling mendukung.

2. Perancangan Struktur Dialog.
Tahap kedua adalah melakukan analisis tugas dan menentukan model pengguna dari tugas tersebut untuk membentuk struktur dialog yang sesuai.

3. Perancangan Format Pesan.
Dalam tahap ini tata letak tampilan dan keterangan tekstual harus secara terinci untuk menjaga keefisiensian sistem.

4. Perancangan Penanganan Kesalahan.

Untuk menghindari adanya kondisi kesalahan yang timbul, maka adanya kondisi yang disebut abnormal termination, yaitu eksekusi program berhenti karena terjadi kesalahan. Bentuk-bentuk penanganan kesalahan yang dapat dilakukan antara lain:
a. Validasi pemasukan data.
b. Proteksi pengguna.
c. Pemulihan dari kesalahan.
d. Penampilan pesan salah yang tepat dan sesuai dengan kesalahan yang terjadi pada waktu itu.

5. Perancangan Struktur Data.

Setelah semua aspek antarmuka dipertimbangkan, Anda harus menentukan struktur data yang dapat digunakan untuk menyajikan dan mendukung fungsionalitas komponen-komponen antarmuka yang diperlukan. Struktur data ini harus dipetakan langsung kedalam model pengguna yang telah dibuat. Hal ini perlu ditekankan agar keinginan pengguna dan model sistem yang telah dirancang saling mempunyai kecocokan satu sama lain.

F. Perancangan Tampilan Berbasis Teks

Pada perancangan tampilan untuk antarmuka berbasis teks, ada enam faktor yang harus dipertimbangkan agar diperoleh tata letak tampilan yang berkualitas tinggi, yaitu:
- Urutan penyajian
- Kelonggaran (Spaciousness)
- Pengelompokkan
- Relevansi
- Konsistensi
- Kesederhanan

G. Perancangan Tampilan Berbasis Grafis.

Dengan antarmuka berbasis grafis berbagai kemudahan dalam hal pengontrolan format tampilan dapat dikerjakan dengan lebih mudah dan fleksibilitas tampilan dapat semakin dirasakan oleh perancang tampilan maupun penggunanya. Disisi lain, kita harus memperhatikan beberapa kendala dalam penerapan antarmuka berbasis grafis ini, antara lain: waktu tanggap, kecepatan tampilan, lebar tampilan, dan tipe tampilan.

TUGAS
Tugasnya yaitu Membuat Rancangan Tampilan dengan Judul/Tema bebas dengan visio atau aplikasi lain, dan upload ke blog

Dan ini hasil pengerjaan punya saya menggunakan DIA dengan judul “Membuat Rancangan Tampilan Program Perpustakaan Online” dengan rancangan ini, kita akan mudah dalam pembuatan program menggunakan bahasa pemrograman.

 

INTERAKSI MANUSIA DAN KOMPUTER (TUGAS 15 SOAL)

 

INTERAKSI MANUSIA DAN KOMPUTER

Nama         : Laisha Amilna Hayurian

NPM          : 20311085

Kelas          : SI 20 B

 

1.   Hubungan antara Harware, Software, dan Brainware adalah Hubungan antara ketiganya muncul dengan pengguna atau Brainware membutuhkan Software untuk menerjemahkan instruksi dari bahasa manusia kedalam bahasa mesin dan kemudian dijalankan oleh perangkat keras (Hardware).

2.    Manusia dapat berinteraksi dengan komputer karena meliputi rancangan, evaluasi, dan implementasi antarmuka pengguna komputer agar mudah digunakan oleh manusia.

3.        Pengertian Luminans, Kontras, dan Kecerahan adalah

·      Luminans adalah banyaknya cahaya yang dipantulkan permukaan objek

·      Kontras adalah hubungan antara cahaya yang dikeluarkan oleh suatu objek dan cahaya dari latar belakag objek tersebut.

·      Kecerahan adalah tanggapan subjektif terhadap cahaya.

4.      Kombinasi warna terbaik untuk latarbelakang berwarna :

       a.  Biru : Putih (81%), kuning (50%), Cyan (25%)

       b. Merah : Kuning (75%), Putih (56%), Hitam (44%)

       c. Hijau : Hitam (100%), Biru (56%), Merah (25%)

5.      Perbedaan antara pengolahan manusia secara sadar dan otomatis (beserta contoh)

·  Pengolahan secara sadar terjadi ketika yang dibawa ke bagian intelektual dan memerlukan beberapa waktu untuk menghasilkan tanggapan. Bentuk pengolahan biasanya berhubungan dengan tindakan baru dan jarang dilakukan sehingga menghasilkan tanggapan yang lembut.

·  Pengolahan secara otomatis respon yang bersifat refleks dan memerlukan waktu tanggapan sangat cepat. Sehingga tindakan yang terlebih dengan respon yang cepat.

     Contoh pengolahan sadar dan otomatis

·  Mengerjakan aktivitas tanpa harus berfikir yaitu membaca, menulis, mengendarai sepeda, menggosok gigi dan masih banyak lagi

·      Dengan latihan rutin proses kognitif menjadi otomatis

6.      Macam-macam karakteristik umum yang dimiliki oleh setiap ragamdialog adalah

·      Konsistensi

·      Umpan balik

·      Observabilitas

·      Kontralabilitas

·      Efisiensi

·      Keseimbangan

7.  Perbedaan antara kecakapan manusia dan komputer adalah kecakapan manusia antara lain: Estiminasi, Kreativitas, Adaptasi, Kesalahan. Sedangkan Kecakapan komputer antara lain: Kalkulasi akurat, Multitasking, Pengolahan data, Pengetahuan domain. 

8.      Perintah tunggal dalam DOS atau UNIX adalah

·      Pwd : perintah ini digunakan untuk mengetahui di direktori mana kita berada.

·      Cd : perintah artinya “Change Dictory” digunakan untuk berganti direktori.

·      Is : perintah ini digunakan isi dari sebuah direktori

9.      Pengertian dari dialog berbasis bahasa pemrograman adalah ragam dialog yang memungkinkan pengguna untuk mengemas sejumlah perintah kedalam suatu berkas yang sering disebut batch file.

10.  Pengertian dari sistem menu adalah pilihan yang tepat untuk menunjukkan kemampuan dan fasilitas yang dimiliki oleh sebuah program kepada pengguna.

11.  Perbedaan sistem menu datar danmenu tarik adalah sistem menu datar yaitu kemampuan fasilitas yang dimiliki oleh suatu program aplikasi akan ditimpalkan secara lengkap dan biasanya menggunakan kalimat yang cukup panjang. Sedangkan, sistem menu tarik yaitu sistem menu yang pilih-pilihannya dikelompokkan menurut kategori tertentu atau menurut cara tertentu sehingga membentuk semacam hirarki pilihan.

12.  Pengertian teknik dialog pengisian borang adalah suatu penerapan langsung dari aktivitas pengisian borang dalaehidupan sehari-hari dimana pengguna akan dihadapkan pada suatu bentuk barang yang ada dilayar komputer yang mereka gunakan

13.  Yang harus diperhatikan dalam perabcangan tampilan berbasis borang antara lain:

·      Proteksi tampilan

·      Batasan medan tampilan

·      Isi medan

·      Medan opsional

·      Default

·      Bantuan

·      Medan penghentian

·      Navigasi

·      Pembetulan kesalahan

·      Penyelesaiaan

14.  Pengertian dari sistem penjendelaan adalah sistem antarmuka yang memungkinkan pengguna untuk menampilkan berbagai informasi baik sendiri-sendiri maupun secara bersamaan ke dalam bagian-bagian layar yang tidak saling mempengaruhi.

15.  Keuntungan dan kerugian manipulasi langsunng yaitu:

·      Keuntungan

-          Mempunyai analogi yang jelas dengan suatu pekerjaan nyata

-          Mempengaruhi waktu pembelajaran

-          Penampilan visual yang bagus

-          Mudah dioperasikan

·         Kerugian

-          Memerlukan program yang rumit dan berukuran besar

-          Memerlukan tampilan grafis berkinerja tinggi

-          Memerlukan peranti masukkan seperti mouse dan keyboard