TUGAS 2 INTERAKSI MANUSIA KOMPUTER

 

Tugas 1 – Analisis Usability

Awalnya saya mencoba kalkulator yang sudah saya buat dengan desain standar. Dari situ saya mencoba menilai aspek usability (mudah dipahami, konsistensi, feedback, error handling, dll).

✅ Hal yang menurut saya sudah baik:

• Konsistensi tombol angka (0–9):
  Tata letak tombol angka mengikuti pola kalkulator fisik, sehingga pengguna langsung familiar.

• Feedback cepat:
  Hasil perhitungan muncul langsung di layar ketika tombol = ditekan.

• Layout familiar:
  Posisi tombol operator (+, −, ×, ÷) sesuai standar, sehingga mudah dipahami.

• Clear & Delete:
  Pengguna bisa menghapus angka satu per satu atau sekaligus, membuat pengalaman lebih fleksibel.

❌ Kekurangan yang saya temukan:

• Tidak ada tombol “±” untuk mengubah angka positif ↔ negatif.

• Semua tombol warnanya hampir sama, sehingga angka dan operator sulit dibedakan.

• Tidak ada pesan error untuk input yang salah (contoh: 10/0, 5++2).

• Ukuran tombol relatif kecil jika dibuka di HP, membuatnya kurang ramah mobile.

Tugas 2 – Redesign Interface

Setelah analisis usability, saya mencoba melakukan redesign tampilan agar lebih menarik dan mudah dipakai.

Perubahan yang saya lakukan:

1. Membedakan warna tombol:

   • Angka → ungu standar

   • Tambah (+) → hijau

   • Kurang (-) → merah muda

   • Kali (*) → biru

   • Bagi (/) → oranye
     Dengan cara ini, pengguna bisa langsung membedakan angka dan operator.

2. Memperbesar tombol & grid layout:
   Saya menggunakan CSS Grid supaya tombol lebih rapi. Tombol = saya buat lebih besar agar lebih jelas.

3. Efek hover:
   Saat kursor diarahkan ke tombol, warnanya berubah → memberikan kesan interaktif.

4. Warna background menarik:
   Saya pakai warna ungu gradasi supaya kalkulator terlihat lebih modern.

Hasilnya:

Setelah diuji, kalkulator jadi lebih nyaman digunakan, terutama karena operator sekarang lebih mudah dikenali. Desain ini juga lebih ramah pengguna mobile.

Tugas 3 – Analisis Error & Iterasi

Langkah berikutnya adalah menguji kalkulator dengan input tidak biasa, misalnya:

• 10/0 → hasil tidak terdefinisi (infinity).
• 5++2 → ekspresi tidak valid.
• 3*/2 → error ekspresi.

Hasil Respons Sistem

Awalnya kalkulator langsung error atau berhenti, membuat pengguna bingung.

Solusi yang saya buat:

1. Error Handling (try–catch):
   Jika ekspresi tidak valid, sistem akan menampilkan pesan “Ekspresi tidak valid!”.

2. Pesan error pop-up:
   Saya tambahkan div #error_msg yang muncul di tengah layar dengan warna merah, lalu otomatis hilang setelah 2 detik.

3. Validasi input:

   • Operator ganda dicegah agar tidak muncul berurutan.

   • Tombol C benar-benar menghapus semua input.

Hasil Iterasi:

Dengan adanya error handling ini, kalkulator jadi lebih aman, mudah dipahami, dan tidak membuat pengguna bingung saat salah input.

 

1. Kode Program dan Tampilan Awal Kalkulator  : Codepen – Kalkulator versi awal

2. Kode Program dan Hasil Redesain Kalkulator  : Codepen – Kalkulator setelah redesain