Tugas 2 IMK

-
Tugas 1 - Analisis Usability Instruksi: 
 a. Gunakan kalkulator yang sudah disediakan. 
 b. Identifikasi minimal 5 aspek usability (mudah dipahami, konsisten, error handling, feedback, estetika, dll.). 
 c. Tulis apa yang sudah baik dan apa yang masih kurang.

KODE HTML SAMPEL KALKULATOR DIGITAL SEDERHANA:
<div class="calculator">
  <div class="input" id="input"></div>
  <div class="buttons">
    <div class="operators">
      <div>+</div>
      <div>-</div>
      <div>&times;</div>
      <div>&divide;</div>
    </div>
    <div class="leftPanel">
      <div class="numbers">
        <div>7</div>
        <div>8</div>
        <div>9</div>
      </div>
      <div class="numbers">
        <div>4</div>
        <div>5</div>
        <div>6</div>
      </div>
      <div class="numbers">
        <div>1</div>
        <div>2</div>
        <div>3</div>
      </div>
      <div class="numbers">
        <div>0</div>
        <div>.</div>
        <div id="clear">C</div>
      </div>
    </div>
    <div class="equal" id="result">=</div>
  </div>
</div>

KODE CSS SAMPEL KALKULATOR DIGITAL SEDERHANA:
body {
  width: 500px;
  margin: 4% auto;
  font-family: 'Source Sans Pro', sans-serif;
  letter-spacing: 5px;
  font-size: 1.8rem;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  background: #f5faff;
}

.calculator {
  padding: 20px;
  background: #ffffff;
  box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.15);
  border-radius: 12px;
}

/* Panel atas (history + input) */
.top-panel {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}

.history {
  text-align: right;
  font-size: 1rem;
  color: #777;
  min-height: 20px;
  margin-bottom: 5px;
  font-style: italic;
}

.input {
  border: 2px solid #b3d4fc;
  border-radius: 8px;
  height: 60px;
  padding-right: 15px;
  padding-top: 10px;
  text-align: right;
  margin-right: 6px;
  font-size: 2.5rem;
  overflow-x: auto;
  background: #eaf4ff;
  transition: all .2s ease-in-out;
}

.input:hover {
  border-color: #82b6f7;
  box-shadow: inset 0px 1px 4px rgba(0, 0, 0, 0.15);
}

/* Tombol tambahan (undo/redo/clear) */
.extras {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.extras div {
  flex: 1;
  margin: 0 3px;
  text-align: center;
  padding: 10px;
  border: 1px solid #ffd95b;
  border-radius: 6px;
  cursor: pointer;
  background-color: #fff8e1;
  color: #8c6d1f;
  font-weight: bold;
  transition: all 0.2s;
}

.extras div:hover {
  background-color: #ffeb99;
  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.2);
}

/* Operator */
.operators {
  margin-top: 10px;
  margin-bottom: 10px;
}

.operators div {
  display: inline-block;
  border: 1px solid #90caf9;
  border-radius: 6px;
  width: 80px;
  text-align: center;
  padding: 10px;
  margin: 10px 4px 0 0;
  cursor: pointer;
  background-color: #bbdefb;
  color: #0d47a1;
  font-weight: bold;
  transition: all .2s ease-in-out;
}

.operators div:hover {
  background-color: #90caf9;
  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.2);
  border-color: #64b5f6;
}

.operators div:active {
  transform: scale(0.97);
}

/* Panel kiri (angka) */
.leftPanel {
  display: inline-block;
}

.numbers div {
  display: inline-block;
  border: 1px solid #ddd;
  border-radius: 6px;
  width: 80px;
  text-align: center;
  padding: 10px;
  margin: 10px 4px 10px 0;
  cursor: pointer;
  background-color: #ffffff;
  transition: all .2s ease-in-out;
}

.numbers div:hover {
  background-color: #e3f2fd;
  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.2);
  border-color: #bbb;
}

.numbers div:active {
  transform: scale(0.97);
  background-color: #bbdefb;
}

/* Tombol hasil (=) */
div.equal {
  display: inline-block;
  border: 2px solid #1565c0;
  border-radius: 10px;
  width: 17%;
  text-align: center;
  padding: 127px 10px;
  margin: 10px 6px 10px 0;
  vertical-align: top;
  cursor: pointer;
  color: #fff;
  font-weight: bold;
  background-color: #1976d2;
  transition: all .2s ease-in-out;
}

div.equal:hover {
  background-color: #0d47a1;
  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3);
  border-color: #08306b;
}

div.equal:active {
  transform: scale(0.97);
}

KODE JS SAMPEL KALKULATOR DIGITAL SEDERHANA:
"use strict";

const input = document.getElementById("input"),
  number = document.querySelectorAll(".numbers div"),
  operator = document.querySelectorAll(".operators div"),
  result = document.getElementById("result"),
  clear = document.getElementById("clear"),
  undo = document.getElementById("undo"),
  redo = document.getElementById("redo"),
  clearLast = document.getElementById("clearLast"),
  historyBox = document.getElementById("history");

let resultDisplayed = false;
let history = [];
let undoStack = [];
let redoStack = [];

// Format angka hasil (tampilan)
function formatNumber(num) {
  if (isNaN(num)) return num;
  return Number(num).toLocaleString();
}

// Update input (push ke undoStack)
function updateInput(newValue) {
  undoStack.push(input.innerHTML);
  redoStack = []; // reset redo setiap ada perubahan baru
  input.innerHTML = newValue;
}

// Update history kecil (maks 3 hasil)
function updateHistory(newResult) {
  history.unshift(newResult);
  if (history.length > 3) history.pop();
  historyBox.innerHTML = history.map(h => `<div>${h}</div>`).join("");
}

// Klik angka
number.forEach(btn => {
  btn.addEventListener("click", e => {
    let currentString = input.innerHTML;
    let lastChar = currentString.slice(-1);

    if (!resultDisplayed) {
      updateInput(currentString + e.target.innerHTML);
    } else if (["+", "-", "×", "÷"].includes(lastChar)) {
      resultDisplayed = false;
      updateInput(currentString + e.target.innerHTML);
    } else {
      resultDisplayed = false;
      updateInput(e.target.innerHTML);
    }
  });
});

// Klik operator
operator.forEach(btn => {
  btn.addEventListener("click", e => {
    let currentString = input.innerHTML;
    let lastChar = currentString.slice(-1);

    if (["+", "-", "×", "÷"].includes(lastChar)) {
      updateInput(currentString.slice(0, -1) + e.target.innerHTML);
    } else if (currentString.length > 0) {
      updateInput(currentString + e.target.innerHTML);
    }
  });
});

// Hitung hasil
result.addEventListener("click", () => {
  let inputString = input.innerHTML;
  if (!inputString) return;

  let numbers = inputString.split(/\+|\-|\×|\÷/g).map(Number);
  let operators = inputString.replace(/[0-9]|\./g, "").split("");

  let process = (symbol, fn) => {
    let i = operators.indexOf(symbol);
    while (i !== -1) {
      numbers.splice(i, 2, fn(numbers[i], numbers[i + 1]));
      operators.splice(i, 1);
      i = operators.indexOf(symbol);
    }
  };

  process("÷", (a, b) => a / b);
  process("×", (a, b) => a * b);
  process("-", (a, b) => a - b);
  process("+", (a, b) => a + b);

  input.innerHTML = formatNumber(numbers[0]);
  updateHistory(numbers[0]);
  resultDisplayed = true;
});

// Clear all
clear.addEventListener("click", () => updateInput(""));

// Clear last char
clearLast.addEventListener("click", () => {
  updateInput(input.innerHTML.slice(0, -1));
});

// Undo
undo.addEventListener("click", () => {
  if (undoStack.length > 0) {
    redoStack.push(input.innerHTML);
    input.innerHTML = undoStack.pop();
  }
});

// Redo
redo.addEventListener("click", () => {
  if (redoStack.length > 0) {
    undoStack.push(input.innerHTML);
    input.innerHTML = redoStack.pop();
  }
});

// Keyboard support
document.addEventListener("keydown", e => {
  if (e.key >= "0" && e.key <= "9") {
    updateInput(input.innerHTML + e.key);
  } else if (["+", "-", "*", "/"].includes(e.key)) {
    e.preventDefault();
    let symbol = e.key === "*" ? "×" : e.key === "/" ? "÷" : e.key;
    let lastChar = input.innerHTML.slice(-1);
    if (!["+", "-", "×", "÷"].includes(lastChar)) {
      updateInput(input.innerHTML + symbol);
    }
  } else if (e.key === "Enter") {
    result.click();
  } else if (e.key === "Backspace") {
    clearLast.click();
  }
});

1. Kemudahan Dipahami (Learnability)

Area tampilan hasil perhitungan jelas, sehingga pengguna dapat segera melihat output dari operasi yang dilakukan. Namun, belum terdapat placeholder (misalnya angka “0” sebagai nilai awal), sehingga tampilan awal kalkulator terlihat kosong dan dapat menimbulkan kebingungan bagi pengguna baru.

2. Konsistensi (Consistency)

Terdapat inkonsistensi pada penanganan angka desimal karena pengguna dapat memasukkan lebih dari satu tanda titik dalam satu bilangan. Selain itu, perilaku kalkulator setelah hasil ditampilkan dapat membingungkan pengguna, karena menekan operator setelah hasil keluar akan melanjutkan operasi alih-alih memulai perhitungan baru secara eksplisit.

3. Penanganan Kesalahan (Error Handling)

Tidak terdapat pesan peringatan apabila pengguna menekan tombol hasil tanpa adanya masukan, serta tidak tersedia fitur penghapusan satu karakter (backspace) sehingga pengguna harus menghapus seluruh masukan jika terjadi kesalahan.

4. Umpan Balik (Feedback)

Kalkulator memberikan umpan balik dasar berupa tampilan langsung dari angka yang ditekan dan hasil perhitungan yang ditampilkan pada layar. Namun, tidak ada umpan balik visual tambahan seperti perubahan warna atau animasi saat tombol ditekan, sehingga pengalaman pengguna terasa statis. Tidak ada pula pesan atau indikator khusus ketika terjadi kesalahan input, yang dapat membantu pengguna memahami masalah yang terjadi.

5. Estetika dan Kenyamanan (Aesthetic and User Comfort)

Logika perhitungan dan urutan operasi yang diterapkan sudah sesuai dengan kaidah matematika, sehingga mendukung keandalan sistem. Namun, dari sisi estetika, tampilan antarmuka masih sederhana dan tidak memiliki fitur pendukung seperti pemisah ribuan, auto-scroll untuk angka panjang, atau penekanan visual pada hasil akhir. Hal ini dapat menurunkan kenyamanan pengguna ketika melakukan perhitungan dengan angka besar.

Secara keseluruhan, kalkulator ini telah memenuhi aspek dasar usability, namun masih dapat ditingkatkan dengan menambahkan penanganan kesalahan yang lebih komprehensif, umpan balik visual yang lebih kaya, dan penyempurnaan tampilan antarmuka agar lebih menarik serta mendukung pengalaman pengguna yang optimal.

Aspek yang Sudah Baik ✅

  1. Struktur Kode yang Terorganisasi

  2. Konsistensi Interaksi

  3. Urutan Operasi Matematika yang Tepat

  4. Mekanisme Pengaturan Status Hasil

  5. Penghapusan Masukan yang Efisien

Aspek yang Masih Kurang ⚠️

  1. Penanganan Kesalahan yang Terbatas

  2. Kurangnya Fitur Penghapusan Parsial (Backspace)

  3. Kurangnya Umpan Balik Visual

  4. Ketidakhadiran Placeholder atau Nilai Awal

  5. Kurangnya Dukungan untuk Kasus Input Panjang

Tugas 2 - Redesign Interface

Instruksi:

1. Buat variasi desain (misalnya warna berbeda untuk operator, tambahkan mode gelap, atau buat tombol lebih besar untuk mobile).

2. Implementasikan perubahan di CodePen.

Uji apakah perubahan meningkatkan kenyamanan penggunaan.

HASIL REDESAIN SAMPEL:

  1. Parsing Angka Lebih Aman

    • Semua angka diubah jadi Number sebelum operasi hitung, jadi hasil gak bakal NaN kalau input ada pemisah.

  2. Undo/Redo Lebih Stabil

    • Setiap input baru otomatis masuk undoStack.

    • redoStack langsung di-reset tiap ada input baru → mencegah redo lompat ke state yang salah.

  3. Cegah Double Operator

    • Baik dari klik tombol maupun keyboard, kalau terakhir sudah operator, maka operator baru akan replace yang lama, bukan ditambahin.

  4. Format Angka Hanya di Output

    • formatNumber() cuma dipakai untuk menampilkan hasil akhir, bukan saat mengetik → biar proses hitung tetap valid.

  5. Keyboard Support Ditingkatkan

    • * otomatis jadi ×, / otomatis jadi ÷.

    • Enter langsung trigger tombol =.

    • Backspace langsung hapus 1 karakter.

    • Prevent double operator saat input keyboard.

  6. Code Lebih Modern & Bersih

    • Pakai forEach() daripada for klasik → lebih rapi dan readable.

    • Semua fungsi dikelompokkan dan diberi nama jelas (updateInput, updateHistory, process).

    • Perhitungan operator lebih modular pakai process() → gak perlu copy-paste loop untuk setiap operator.

  7. UX Lebih Konsisten

    • Clear, ClearLast, Undo, Redo semua sinkron dengan undoStack & redoStack.

    • History hanya simpan 3 hasil terakhir dan langsung update tampilan.

UJI PERUBAHAN UNTUK PENINGKATAN KENYAMANAN PENGGUNA:
Support keyboard, tombol undo dan redo, history dan tombol kemudahan untuk hapus satu karakter.




Mendukung input dan output panjang.

Tugas 3 - Analisis Error & Iterasi

Instruksi:

1. Coba masukkan input yang tidak biasa (misalnya 10/0).

2. Catat bagaimana sistem merespons. /

3. Berikan saran perbaikan agar pengguna tidak bingung (contoh: munculkan pesan "tidak valid") atau buat handling error / exception mengenai apa penyebab errornya. (ini hanya contoh, silahkan eksplorasi)

1. Eksperimen Input Tidak Biasa

Saya mencoba memasukkan beberapa input yang berpotensi menyebabkan error:

  • 10 ÷ 0

  • ++5

  • 5 ×

  • 5..2

  • Kosong lalu tekan "="

2. Hasil Observasi
- Menampilkan Infinity di layar. Tidak user-friendly. User awam mungkin bingung dengan kata "Infinity".
- Hanya operator terakhir (+) yang dipakai. Sudah ditangani dengan baik, tidak menyebabkan crash.
- Tidak terjadi apa-apa / hasil tetap 5 ×. Bisa bikin user bingung kenapa tidak ada output.
- Menghasilkan 5..2 → NaN (hasil tidak valid). Sistem tetap mencoba menghitung, tapi hasilnya error.
- Menampilkan layar kosong. Tidak ada pesan error. Bisa bikin user bingung.

3. Saran Perbaikan

Agar pengalaman pengguna lebih baik, saya mengusulkan:

  • Handling Pembagian Nol
    Jika input mengandung ÷ 0, tampilkan pesan "Error: Pembagian dengan nol tidak valid" di layar.

  • Validasi Input Sebelum Hitung

    • Jika input kosong → tampilkan "Input kosong" daripada tidak melakukan apa-apa.

    • Jika input diakhiri operator → hapus operator terakhir sebelum menghitung.

  • Validasi Format Angka

    • Deteksi angka dengan dua titik desimal (5..2) → munculkan pesan "Format angka tidak valid".

  • Reset Setelah Error
    Setelah menampilkan pesan error, kalkulator otomatis siap menerima input baru (tidak perlu dihapus manual).

  • Visual Feedback
    Bisa ditambahkan highlight merah pada box input saat error, sehingga user langsung sadar ada kesalahan.














Komentar

Posting Komentar

Postingan populer dari blog ini

TUGAS IMK 01

-
Gambar
Bagian 1: Tulis masalah dari lampu merah yang ada sekarang. lalu berikan solusi anda. Masalah yang Ditemui pada Lampu Merah Konvensional: Count down error – penghitung mundur waktu pada lampu lalu lintas sering mengalami error atau bahkan mati. Sistem sering tidak berfungsi – lampu bisa padam atau stuck pada satu warna sehingga membahayakan pengguna jalan. Akurasi waktu tidak seimbang – durasi lampu hijau, kuning, dan merah sering tidak sesuai dengan kepadatan lalu lintas aktual. Salah posisi / terhalang objek – letak lampu kadang tertutup oleh pepohonan, papan reklame, atau bangunan. Kurang informatif – hanya menampilkan warna dasar tanpa informasi tambahan yang dapat membantu pengendara. Tidak ramah bagi pejalan kaki – minim fitur khusus bagi penyebrang jalan, misalnya tombol khusus atau suara pemandu. Solusi yang Dapat Diberikan: Perbaikan sistem penghitung mundur dengan integrasi sensor digital yang lebih stabil. Backup daya (UPS/solar panel)...
Baca selengkapnya

Tugas algoritma 2

-
Penjadwalan Brute Force 4) Kasus: Menyusun Jadwal Kerja (Scheduling) Cerita: Ada 5 pekerjaan yang harus dikerjakan 1 mesin secara berurutan (tidak bisa paralel). Setiap pekerjaan memiliki waktu pengerjaan (durasi) dan bobot kepentingan. Kita ingin menentukan urutan pekerjaan agar total “waktu selesai × bobot” sekecil mungkin . Data pekerjaan (durasi, bobot): A: (3 jam, bobot 4) B: (2 jam, bobot 2) C: (5 jam, bobot 10) D: (1 jam, bobot 1) E: (4 jam, bobot 3) Tujuan: Cari urutan pekerjaan yang meminimalkan total “waktu selesai × bobot”. Metode Brute Force Brute force mengevaluasi seluruh urutan yang mungkin (5! = 120 urutan). Untuk setiap urutan (j₁,…,j₅): Hitung waktu kumulatif C jₖ = Σ p jₜ Hitung nilai objektif: Z = Σ w jₖ × C jₖ Pilih urutan dengan Z terkecil Perhitungan Hasil Terbaik Dari evaluasi seluruh 120 permutasi, nilai minimum Σ w j C j adalah 158 . Terdapat dua urutan optimal dengan hasil sama: Urutan 1: C → ...
Baca selengkapnya

Tugas 3 algoritma

-
Gambar
Pemecahan Kasus Di kasus ini, kita punya 5 pekerjaan yang harus diselesaikan secara berurutan di satu mesin. Setiap pekerjaan punya durasi (jam) dan bobot penting . Tujuannya adalah mencari urutan kerja supaya total  ∑ ( w a k t u   s e l e s a i × b o b o t ) \sum (waktu\ selesai \times bobot) ∑ ( w ak t u   se l es ai × b o b o t ) jadi sekecil mungkin. Kalau dikerjakan sembarangan, hasilnya bisa lebih besar. Jadi kita pakai strategi algoritma greedy . Algoritma ini menyarankan supaya kita mengurutkan pekerjaan berdasarkan rasio bobot per durasi (w/p) . Alasannya sederhana: semakin besar bobot dibandingkan waktu, semakin penting pekerjaan itu untuk dikerjakan lebih cepat. Langkah-langkah Bayangin kita lagi dapat tugas: ada 5 pekerjaan yang harus diselesaikan di satu mesin, dan semuanya harus dikerjakan satu per satu . Setiap pekerjaan punya dua informasi penting: Durasi (p) : berapa lama pekerjaan itu butuh waktu, Bobot (w) : seberapa penting pekerjaan itu....
Baca selengkapnya