Tecnologia del fitness
SmartFit: portare l'esperienza di allenamento sullo schermo di un dispositivo
Il design e la struttura tecnica di un'interfaccia SmartFit che unisce il monitoraggio delle sessioni, i controlli del dispositivo e le interazioni multimediali.
Cosa dovrebbe fare uno schermo durante un allenamento?
Il valore dello schermo di un tapis roulant non viene misurato dalla quantità di informazioni visualizzate. Chi si allena dovrebbe essere in grado di leggere il tempo, la velocità e la distanza a colpo d'occhio e di modificare un'impostazione senza perdere il posto nella sessione.
SmartFit è un progetto software per tapis roulant costruito attorno a questa esigenza. Le informazioni sulla sessione, i controlli di regolazione e le visualizzazioni multimediali vengono trattati come parti di un'unica interfaccia. La sua consegna commerciale per il mercato tedesco fornisce un contesto di prodotto internazionale per questo lavoro sullo schermo del dispositivo.
Tre esigenze su uno schermo
Il tempo della sessione e il controllo Start/Stop occupano il centro. Gli indicatori circolari posizionano le informazioni sulla cadenza e sull'energia attorno a quel punto focale. L'area inferiore contiene le regolazioni di velocità, aspirazione e livello di infrarossi, mentre i pannelli laterali contengono controlli aggiuntivi e selezione dei media.
Il layout stabilisce una gerarchia tra le informazioni visualizzate di frequente e le azioni meno frequenti. Gli utenti vedono prima lo stato della sessione, quindi ottengono il controllo di cui hanno bisogno. L'obiettivo è riflettere l'ordine di utilizzo piuttosto che dare a ogni funzione lo stesso peso visivo.
Rendere visibile lo stato della sessione
L'avvio di una sessione apre un conto alla rovescia di tre secondi. Il timer avanza durante una sessione in esecuzione e interrompe l'aggiornamento quando viene interrotto. Tempo, distanza e altri campi condividono un modello di dati WorkoutStats.
React mantiene gli stati di esecuzione e conto alla rovescia separatamente. Un hook useEffect gestisce e ripulisce il timer. Ciò collega gli aggiornamenti dello schermo al ciclo di vita della sessione. Per l'utente, il risultato è un comprensibile cambiamento di stato dopo ogni azione.
Indicatori riutilizzabili e confini chiari dei componenti
CircularGauge accetta un valore, un massimo, un'etichetta, un'unità e un colore per eseguire il rendering di un indicatore SVG. Lo stesso componente può rappresentare metriche diverse con una regola visiva coerente, riducendo il lavoro ripetuto man mano che lo schermo si evolve.
React e TypeScript definiscono l'interfaccia, mentre Recharts gestisce il grafico del ritmo. I campi tipizzati rendono esplicito il modello dati; i confini dei componenti separano il timer, il controllo e il comportamento dei media. I pannelli laterali sono semplificati con larghezze dello schermo più strette.
Ritorno dai media all'allenamento
La selezione multimediale si apre come un overlay separato che gli utenti possono chiudere per tornare all'allenamento. La visualizzazione multimediale è separata dal componente principale che contiene i dati della sessione.
Nell'interfaccia ispezionata, le schede di esempio rappresentano i contenuti multimediali. Questo lavoro dimostra la selezione e i flussi di ritorno piuttosto che un'integrazione completa del servizio video. I contenuti multimediali possono occupare lo schermo, ma gli utenti necessitano comunque di un percorso ovvio per tornare alla propria sessione.
Dallo stato dell'interfaccia ai dati del dispositivo
L'interfaccia locale simula gli aggiornamenti di cadenza, calorie e distanza e utilizza dati campione per il grafico del ritmo. Ciò consente di esplorare gli stati dello schermo senza hardware. In un'integrazione del dispositivo, i livelli di misurazione e controllo fornirebbero i dati corrispondenti.
Una richiesta di controllo e uno stato confermato del dispositivo sono distinti: toccando il pulsante di accelerazione si esprime una richiesta, mentre il feedback del dispositivo conferma la velocità risultante. SmartFit fornisce un modello di interfaccia concreto per considerare l'esperienza dell'utente insieme alle responsabilità del dispositivo.