Interaksi Manusia & Komputer : Menganalisis sebuah Calculator

picture by :https://id.pngtree.com/

Sejarah Kalkulator 

    

    Sejarah kalkulator adalah evolusi dari alat hitung kuno seperti sempoa, yang kemudian bertransformasi menjadi mesin mekanik beroda gigi pada abad ke-17 seperti Pascaline. Revolusi sesungguhnya terjadi pada pertengahan abad ke-20 dengan ditemukannya kalkulator elektronik, yang kemudian menyusut drastis ukurannya menjadi kalkulator saku pada tahun 1970-an berkat teknologi microchip. Di zaman sekarang, kemudahan kalkulator telah mencapai puncaknya; ia tidak lagi berupa perangkat fisik terpisah, melainkan telah menjadi aplikasi standar yang instan dan selalu tersedia di setiap ponsel pintar dan komputer. Fungsinya pun jauh lebih canggih, mencakup mode ilmiah, konverter berbagai unit seperti mata uang dan suhu, serta terintegrasi mulus dalam aktivitas digital kita sehari-hari, menjadikannya asisten cerdas yang sangat praktis dan mudah diakses oleh siapa saja. 

    Coba bayangkan sejenak,dulu orang tua kita mungkin harus punya kalkulator fisik yang pakai baterai atau bahkan tenaga surya buat menghitung di toko atau mengerjakan tugas. Sekarang? Benda iru sudah jadi aplikasi standar disetiap ponsel,bahkan di jam tangan pintar.Dari benda fisik yang harus dibawa - bawa, jadi aplikasi tak terlihat yang selalu ada di saku.Transformasi 'mesin hitung' ini menarik banget lho untuk diulik.Mari kita mulai!  

 

kali ini saya akan mengulik desain kalkulator dari satu hasil kerja yang bisa ditemukan di codepen.io milik vikas lalwani  

link codepen :https://codepen.io/lalwanivikas/pen/eZxjqo

 

     Analisis Usability

     Identifikasi minimal 5 aspek usability

1.Aspek kemudahan digunakan/dipelajari

• tombol input : tombol angka yang digunakan disusun secara     berurutan sehingga mudah untuk diingat dan digunakan 
• hasil muncul instan dan konsisten : hasil akan muncul setelah     pengguna memasukkan angka beserta operator yang       diinginkan,(operasi = hasil) kondisi ini konsisten disegala             operasi  perhitungannya  

     2. Aspek konsistensi

• menggunakan digit yang familiar : angka yang digunakan adalah bilangan desimal yaitu 0-9 yang tentunya sudah familiar untuk masyarakat umum.
• operator aritmatika yang digunakan juga sudah bersifat universal sehingga tidak akan membingungkan pengguna. 

    3.Error handling 

• penanganan pada operasi yang tidak valid :contohnya pembagian dengan nol,ketika saya mencoba melakukan operasi tersebut hasilnya bertuliskan infinity. Sebenarnya dibagian ini sudah cukup baik,setidaknya tidak memberi output hasil simbol yang tidak wajar atau apapun. tapi pesan "infity" yang berarti tidak terbatas. 

    4.feedback 

• pengimputan angka dan operator : Saat saya sudah melakukan percobaan, jelas bahwa kalkulator ini sudah bisa memberikan umpan balik yang langsung terlihat,contoh ketik saya menekan 5 maka akan muncul angka 5 dilayar,begitupula dengan tombol lainnya.
• pemberitahuan invalid dan lainnya : ketika ada ketidaknormalan pada input dan kalkulator akan menampilkan contoh "infinity" itu juga merupakan salah satu feedback

    5.estetika 

• tampilan letak rapih dan berurut :Tampilan yang rapih dan angka yang disusun berurutan memberi tampilan yang bersih dan enak dipandang
• warna tombol :Warna yang digunakan merupakan warna yang cerah dan nyaman dimata,perbedaan warnanyapun sudah bisa membedakan yang mana operator dan angkanya.

Tulis apa yang sudah baik dan apa yang masih kurang

    1.Hal baik : 

• Dari segi jalannya perhitungan pada kalkulator ini sudah sangat baik,hasil operasi yang dilakukan sudah sesuai dan diberikan secara instan tanpa menunggu lama,tampilannya sudah jelas dan baik.
• tampilan jelas dan tidak membingungkan pengguna untuk cara penggunaannya karana sudah menggunakan angka dan operator yang universal

  2.Hal yang masih kurang :

•  handling errornya masih sangat kurang,ketika saya mencoba memasukkan operasi yang tidak valid yaitu .x8 hasilnya adalah NaN (Not a Number),yang dimana hal ini bagi sebagian pengguna masih asing atau sulit dimengerti apa maksudnya, mungkin akan lebih baik jika ditampilkan teks yang lebih informatif dan jelas maksudnya.
• operator yang disediakan masih sangat jauh dari cukup. saya mencoba mengoperasikan angka yang bernilai mines dan itu TIDAK BISA tidak ada tombol "(,)" 
• peletakan operator kurang nyaman jika berada diatas karna biasanya ada di kanan.

 

Redesign Interface 

Buat variasi desain

 

//contoh kode html

<div class="calculator">
  <div class="input" id="input"></div>
  <div class="buttons">
    <div class="leftPanel">
      <div class="numbers">
        <div>1</div>
        <div>2</div>
        <div>3</div>
      </div>
      <div class="numbers">
        <div>4</div>
        <div>5</div>
        <div>6</div>
      </div>
      <div class="numbers">
        <div>7</div>
        <div>8</div>
        <div>9</div>
      </div>
      <div class="numbers">
        <div>(</div>
        <div>)</div>
        <div>0</div>
      </div>
      <div class="numbers">
        <div id="clear">C</div>
        <div>.</div>
        <div id="result">=</div>
      </div>
    </div>
    <div class="operators">
      <div>+</div>
      <div>-</div>
      <div>&times;</div>
      <div>&divide;</div>
    </div>
  </div>
</div>

  
//Kode CSS

body {
  width: 500px;
  margin: 4% auto;
  font-family: 'Source Sans Pro', sans-serif;
  letter-spacing: 3px;
  font-size: 1.8rem;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  background-color: #add8e6; /* biru muda */
}

.calculator {
  padding: 20px;
  -webkit-box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.3);
  border-radius: 6px;
  background-color: #f0f8ff; /* biru sangat muda */
}

.input {
  border: 1px solid #ddd;
  border-radius: 4px;
  height: 60px;
  padding-right: 15px;
  padding-top: 10px;
  text-align: right;
  margin-bottom: 10px;
  font-size: 2.5rem;
  overflow-x: auto;
  background: white;
}

.buttons {
  display: flex;
  justify-content: space-between;
}

.leftPanel {
  width: 75%;
}

.operators {
  width: 20%;
  display: flex;
  flex-direction: column;
}

.operators div {
  border: 1px solid #003366;
  border-radius: 4px;
  width: 100%;
  text-align: center;
  padding: 20px 0;
  margin: 6px 0;
  cursor: pointer;
  background-color: #003366; /* biru tua */
  color: #fff;
  font-weight: bold;
  font-size: 2rem;
  transition: all .2s ease-in-out;
}

.operators div:hover {
  background-color: #002244;
  border-color: #001122;
}

.numbers {
  display: flex;
  justify-content: space-between;
}

.numbers div {
  flex: 1;
  border: 1px solid #bbb;
  border-radius: 4px;
  text-align: center;
  padding: 20px 0;
  margin: 6px;
  cursor: pointer;
  background-color: #ffffff; /* putih */
  font-weight: bold;
  font-size: 2rem;
  transition: all .2s ease-in-out;
}

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

#result {
  background-color: #1a4fad;
  color: #fff;
  border: 1px solid #1857BB;
}

#result:hover {
  background-color: #123a7a;
  border-color: #0d2855;
}

//Kode javascript

"use strict";

const input = document.getElementById("input");
const numbers = document.querySelectorAll(".numbers div");
const operators = document.querySelectorAll(".operators div");
const clear = document.getElementById("clear");
const result = document.getElementById("result");

// Tambahkan event listener ke semua tombol angka
numbers.forEach(btn => {
  if (btn.id !== "clear" && btn.id !== "result") {
    btn.addEventListener("click", () => {
      input.innerHTML += btn.innerHTML;
    });
  }
});

// Tambahkan event listener ke operator
operators.forEach(op => {
  op.addEventListener("click", () => {
    input.innerHTML += op.innerHTML;
  });
});

// Tombol clear
clear.addEventListener("click", () => {
  input.innerHTML = "";
});

// Tombol sama dengan
result.addEventListener("click", () => {
  let expression = input.innerHTML;

  // Ganti simbol agar bisa dihitung JS
  expression = expression.replace(/×/g, "*").replace(/÷/g, "/");

  try {
    let evalResult = eval(expression);

    // Cek hasil valid atau tidak
    if (!isFinite(evalResult) || isNaN(evalResult)) {
      input.innerHTML = "Error";
    } else {
      input.innerHTML = evalResult;
    }
  } catch (e) {
    input.innerHTML = "Error";
  }
});

Implementasi perubahan

Menurut saya perubahan yang saya buat sudah meningkatkan kenyamanan pengguna :

1. Dari segi tampilan dan tata letak : Desain baru lebih nyaman,letak operatornya ada dikanan yang menyesuaikan dengan kenyamanan pengguna,urutan angka juga ascending dari atas kebawah,warnanya juga sedikit lebih jelas dengan merubah teksnya menjadi bold.
2.  sudah bisa operasi untuk angka mines sedangkan sebelumnya tidak bisa.
3. Ada tampilan error untuk input yang invalid jadi lebih jelas untuk pengguna bahwa angka yang diinput salah.
4. menambah dua input yaitu dalam kurung '()'

Analisis Error & Iterasi

 1. Coba masukkan input yang tidak biasa:

•     Contoh 10/0 dan (.*9)

2.hasil yang saya temukan adalah output hasil "infinity" dan "NaN"

• 10/0= "infinity"   . x 9 =NaN

3. Saran perbaikan : 

• Memberikan pesan output :"Invalid","Error" atau "Salah input"  
• atau  informasi yang menunjukkan apa kesalahannya seperti "operator tidak valid"