Statistics Calculator

Esempio pratico della calcolatrice statistica mentre analizza i dati di un sondaggio di soddisfazione utente (UX).

I numeri inseriti (4, 5, 3,...) simulano le valutazioni date da un gruppo di utenti a una nuova funzionalità, su una scala da 1 a 5 stelle.
La Moda e la Mediana di 4 rivelano che la reazione più comune e l'esperienza dell'utente "tipico" sono state molto positive.
La Media (3.89), pur essendo leggermente inferiore a causa di un singolo voto negativo, conferma un'accoglienza generale più che favorevole.
Infine, la bassa Deviazione Standard è un ottimo segnale, perché indica che l'esperienza è stata consistente e prevedibile per la maggior parte degli utenti. In un contesto reale, questi risultati suggerirebbero di validare il successo del design e, come passo successivo, indagare le ragioni di quel singolo feedback negativo per un'ulteriore ottimizzazione.

Il Progetto

Calcolatrice statistica sviluppata con JavaScript e metodi array avanzati, capace di calcolare media, mediana, moda, range, varianza e deviazione standard da una serie di numeri inseriti dall'utente.

Source Code

index.html
styles.css
script.js

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Statistics Calculator</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  
  <body>
    <h1>Statistics Calculator</h1>
    <p>Enter a list of comma-separated numbers.</p>
    <form onsubmit="calculate(); return false;">
      <label for="numbers">Numbers:</label>
      <input type="text" name="numbers" id="numbers" />
      <button type="submit">Calculate</button>
    </form>
    <div class="results">
      <p>
        The <dfn>mean</dfn> of a list of numbers is the average, calculated by
        taking the sum of all numbers and dividing that by the count of numbers.
      </p>
      <p class="bold">Mean: <span id="mean"></span></p>
      <p>
        The <dfn>median</dfn> of a list of numbers is the number that appears in
        the middle of the list, when sorted from least to greatest.
      </p>
      <p class="bold">Median: <span id="median"></span></p>
      <p>
        The <dfn>mode</dfn> of a list of numbers is the number that appears most
        often in the list.
      </p>
      <p class="bold">Mode: <span id="mode"></span></p>
      <p>
        The <dfn>range</dfn> of a list of numbers is the difference between the
        largest and smallest numbers in the list.
      </p>
      <p class="bold">Range: <span id="range"></span></p>
      <p>
        The <dfn>variance</dfn> of a list of numbers measures how far the values
        are from the mean, on average.
      </p>
      <p class="bold">Variance: <span id="variance"></span></p>
      <p>
        The <dfn>standard deviation</dfn> of a list of numbers is the square
        root of the variance.
      </p>
      <p class="bold">
        Standard Deviation: <span id="standardDeviation"></span>
      </p>
    </div>
  </body>
</html>

body {
  margin: 0;
  background-color: rgb(27, 27, 50);
  text-align: center;
  color: #fff;
}

button {
  cursor: pointer;
  background-color: rgb(59, 59, 79);
  border: 3px solid white;
  color: white;
}

input {
  background-color: rgb(10, 10, 35);
  color: white;
  border: 1px solid rgb(59, 59, 79);
}

.bold {
  font-weight: bold;
}

const getMean = (array) => array.reduce((acc, el) => acc + el, 0) / array.length;

const getMedian = (array) => {
  const sorted = array.toSorted((a, b) => a - b);
  const median =
    sorted.length % 2 === 0
      ? getMean([sorted[sorted.length / 2], sorted[sorted.length / 2 - 1]])
      : sorted[Math.floor(sorted.length / 2)];
  return median;
}

const getMode = (array) => {
  const counts = {};
  array.forEach(el => counts[el] = counts[el] ? counts[el] + 1 : 1);

  if (new Set(Object.values(counts)).size === 1) {
    return null;
  }
  const highest = Object.keys(counts).sort(
    (a, b) => counts[b] - counts[a]
  )[0];
  const mode = Object.keys(counts).filter(
    (el) => counts[el] === counts[highest]
  );
  return mode.join(", ");
}

const getRange = (array) => {
  return Math.max(...array) - Math.min(...array);
}

const getVariance = (array) => {
  const mean = getMean(array);
  const variance = array.reduce((acc, el) => {
    const difference = el - mean;
    const squared = difference ** 2;
    return acc + squared;
  }, 0) / array.length;
  return variance;
}

const getStandardDeviation = (array) => {
  const variance = getVariance(array);
  const standardDeviation = Math.sqrt(variance);
  return standardDeviation;
}

const calculate = () => {
  const value = document.querySelector("#numbers").value;
  const array = value.split(/,\s*/g);
  const numbers = array.map(el => Number(el)).filter(el => !isNaN(el));
  
  const mean = getMean(numbers);
  const median = getMedian(numbers);
  const mode = getMode(numbers);
  const range = getRange(numbers);
  const variance = getVariance(numbers);
  const standardDeviation = getStandardDeviation(numbers);

  document.querySelector("#mean").textContent = mean;
  document.querySelector("#median").textContent = median;
  document.querySelector("#mode").textContent = mode;
  document.querySelector("#range").textContent = range;
  document.querySelector("#variance").textContent = variance;
  document.querySelector("#standardDeviation").textContent = standardDeviation;

}

Il Percorso in Due Fasi

È stato un progetto che ho percepito in due modi diversi.

Fase 1: La Comprensione Matematica Prima di affrontarlo, sono andato a ripassare ognuno dei concetti matematici richiesti. Mi aspettavo quindi di capirli in modo più profondo grazie a questo esercizio, e così è stato. Ho passato la prima metà del progetto con questa cognizione.

Fase 2: La Rivelazione dell'Utilità Nella metà successiva, verso lo step 30, mi sono reso conto di quanto fosse utile ciò che stavo imparando. Avendo fatto proprio qualche giorno fa un altro usability study per il progetto che sto facendo nel corso Google UX, ho avuto la sensazione che un programma simile potesse aiutarmi parecchio nel condensare tutti i dati scaturiti dalla ricerca. Ecco una tabella che riassume il tutto:

Concetto Statistico	Cosa Misura nell'UX	Scenario Chiave (Rivelazione)
Media (Mean)	La performance generale.	Fornisce un benchmark rapido (es. tempo medio di checkout), ma è ingannevole se ci sono molti outlier (utenti molto lenti) che alzano il valore.
Mediana (Median)	L'esperienza tipica dell'utente medio.	Se la mediana è molto più bassa della media, significa che la maggior parte degli utenti è veloce e solo un piccolo gruppo ha problemi. Rivela dove concentrare gli sforzi.
Moda (Mode)	La reazione più comune o il feedback più frequente.	Perfetta per i rating. Se su 100 voti, 80 sono "5 stelle", la moda ti dice che la feature è un successo, anche se pochi voti bassi rovinano la media.
Deviazione Standard	La consistenza e prevedibilità dell'esperienza.	Il nostro obiettivo finale. Bassa = design chiaro e affidabile. Alta = design confusionario e frustrante. In un A/B test, a parità di media, vince sempre il design con deviazione standard più bassa.

Credo che grazie a questi 4 concetti si possa passare da "Ho effettuato gli Usability Test ed il prototipo funziona bene per le persone" a "Ho effettuato gli Usability Test ed il prototipo funziona bene per le persone e i dati lo dimostrano".

Cosa Ho Imparato

Metodi Array Avanzati:

.reduce() per calcolare somme (media, varianza) in modo compatto ed efficiente.
.toSorted() per creare una copia ordinata dell'array senza mutare l'originale, fondamentale per calcolare la mediana.
.map() per trasformare l'array di stringhe in un array di numeri.
.filter() per pulire l'input da valori non numerici.
.forEach() per iterare e popolare la UI.

Logica Statistica in JS:

Implementazione della media, mediana (gestendo sia array di lunghezza pari che dispari), moda (con gestione di casi multimodali o assenza di moda), range, varianza e deviazione standard.

Manipolazione di Oggetti e Stringhe:

Creazione e manipolazione di oggetti per contare le occorrenze nella funzione getMode.
Utilizzo di Object.keys() e Object.values() per analizzare le frequenze.
new Set() per verificare se tutti gli elementi appaiono con la stessa frequenza.
.split(/,\s*/g) per parsare l'input dell'utente in modo robusto, gestendo spazi variabili.

Programmazione Funzionale:

Scrittura di funzioni pure che prendono un array come input e restituiscono un valore calcolato.
Composizione di funzioni (es. getVariance che chiama getMean).

Riflessione

Lo sprint che ho avuto nella seconda metà è stato dovuto al pensiero che tutto ciò che stavo imparando potesse dar vita a una "calcolatrice UX": un programma che non solo calcola numeri, ma li interpreta in un'ottica di esperienza utente.

Prossimo Progetto: Imparare la programmazione funzionale costruendo un foglio di calcolo

Il Progetto​

Source Code​

Il Percorso in Due Fasi​

Cosa Ho Imparato​

Riflessione​

Il Progetto

Source Code

Il Percorso in Due Fasi

Cosa Ho Imparato

Riflessione