Prototipo medium-fidelity

Prima di testare il prototipo consigliamo di leggere il manuale per l'utente.

Il prototipo può essere visitato tramite la nostra pagina Figma.

Scelte organizzative

Aree principali:

Seguendo i risultati ottenuti dalla task analysis, abbiamo diviso l’applicazione in 5 aree principali più una area “Notifiche”.
Le 5 aree principali sono:

  • Home
  • Amici
  • Registra
  • Prenota
  • Profilo

Abbiamo deciso di prendere ispirazione per il design da applicazioni già esistenti, come ad esempio “Strava”.
Le aree presentate poco prima sono state organizzate in questo:
è sempre presente una schermata Home riassuntiva che ripropone le funzioni principali dell’applicazione;
la funzione “Registra” è sempre direttamente accessibile da qualsiasi schermata dell’app dato che l’utente deve poter avviare una registrazione senza troppe difficoltà.
la sezione amici, avendo una sottostruttura complessa deve figurare come schermata principale data la sua mole.
il profilo nelle applicazioni è ormai per abitudine una sezione che l’utente si aspetta di trovare come schermata indipendente.
la sezione di prenotazione, essendo una delle nostre task principali, ha bisogno di essere ben visibile e facilmente raggiungibile.

Tipi di pagine e organizzazione

Le schermate principali presentate al punto precedente si dividono in 3 categorie:
Riassuntive -> schermata Home
Navigabili -> schermate Amici e Profilo
Selettive -> schermate Registra e Prenota

  • Riassuntive:
    In una schermata riassuntiva abbiamo scelto di riprendere funzioni di altre schermate in modo schematico con l'obiettivo di semplificare la “visione” di queste informazioni. Ad esempio nella nostra schermata Home è possibile vedere facilmente quali sono le prossime prenotazioni e l’avanzamento degli achievements, funzioni che altrimenti sarebbero meno visibili. Inoltre la Home è fondamentale per comunicare News e mostrare quelle funzioni che possono servire subito quando si apre l’applicazione.
  • Navigabili:
    In una schermata navigabile l’utente può “scrollare” la pagina per vedere varie informazioni sulle proprie attività o su quelle degli amici.
  • Selettive:
    In una schermata selettiva la prima cosa che deve fare l’utente è scegliere quale “sottofunzione” vuole selezionare attraverso l’uso di pulsanti. Ad esempio, nella schermata Registra l’utente deve scegliere quale obiettivo ha la registrazione, i sensori collegati e avviare la registrazione. Mentre nella schermata Prenota la prima cosa che deve fare l’utente è selezionare quale prenotazione vuole effettuare.

Scelte grafiche

Layout

  • Menu di navigazione:
    Abbiamo scelto di usare un menu di navigazione in basso che permette di spostarsi tra le principali aree dell’applicazione come fanno la maggior parte delle applicazioni.
  • Disposizione degli elementi:
    Al fine di rendere la visualizzazione più naturale per l’occhio umano, gli elementi sono stati disposti dall’alto verso il basso e da sinistra a destra in ordine di lettura. In alcuni casi, sezioni secondarie sono raggiungibili da pulsanti disponibili in cima alle pagine scrollabili per non attirare troppo l’attenzione su questi pulsanti che non svolgono funzioni primarie.
  • Menu di selezione:
    Il sistema per dare la possibilità all’utente di effettuare selezioni usato nell’applicazione è il menù a tendina: solo nella selezione dello storico attività è stata impostata una scelta tra opzioni disposte in orizzontale. Abbiamo preso questo stile perché ci siamo ispirati alle sezioni “Storico allenamenti” di altre applicazioni.
  • Pulsanti:
    Il layout dei pulsanti è unico nell’applicazione, sono rettangoli smussati e colori presi dalla nostra palette (vedi sezione sotto).
  • Pagine scrollabili:
    Per il layout delle pagine scrollabili ci siamo pienamente ispirati alle applicazioni già esistenti che rappresentano come gli utenti si aspettano di vedere disposti una grande quantità di informazioni.

Colore

La color palette dell’applicazione l’abbiamo scelta per trasmettere “Energia, eccitazione e professionalità”, e sono i seguenti:
Mobirise Website Builder
Arancio principale

È usato per evidenziare punti salienti come pulsanti di invio ed elementi che devono attirare l’attenzione.

Mobirise Website Builder
Blu intenso

Il colore usato per l’header è stato scelto per per dare un senso di stabilità e professionalità.

Mobirise Website Builder
Blu leggero

Questo tono più leggero è stato scelto per elementi secondari, o per fornire un contrasto dove necessario. 

Mobirise Website Builder
Grigio neutro

Il colore neutro è fondamentale per elementi come sfondi o bordi e per equilibrare l'intensità degli altri colori e per pulsanti non ancora disponibili.

Dettagli di alcune scelte

  • Colore pulsanti:
    Sono grigi se non sono ancora attivi (per esempio prima di creare un gruppo va scelto almeno una persona). Sono arancioni se sono attivi e rappresentano una scelta definitiva. Sono azzurri o blu se si tratta di pulsanti di scelta “intermedia”, ad esempio la scelta di un orario per la prenotazione della palestra non porterà l’utente ad effettuare la prenotazione, ma aprirà una schermata di conferma, dove sarà disponibile un pulsante arancione per la conferma definitiva.
  • Pulsanti “Campi”, “Palestra”, “Corsi platinum” e “Prenotazione automatica”:
    In questo caso è stata fatta un’eccezione, infatti i pulsanti che devono risaltare sono i primi 3, e quindi sono arancioni. L’ultimo pulsante invece è azzurro perché rappresenta una funzione utilizzata meno spesso delle due e deve distinguersi rispetto alle altre, ma l’occhio non si deve concentrare principalmente su di essa.
  • Icone selezionate:
    Con l’obiettivo di ricordare all’utente in quale schermata dell’applicazione si trova le icone della barra di navigazione si colorano se selezionate.

Tipografia

  • Font (Roboto):
    Abbiamo scelto un font semplice e di facile lettura della famiglia dei “sans-serif” utilizzato anche da molte applicazioni android e noto per essere utilizzato nella maggior parte dei sistemi Google.
  • Dimensioni:
    Abbiamo deciso di abbinare dimensioni maggiori per parti di testo di maggiore rilevanza, in modo da aiutare l’utente ad individuare le parti più importanti della schermata.
  • Pesi tipografici:
    Abbiamo utilizzato i pesi tipografici per rendere più visibile la distinzione in paragrafi ed evidenziare i sottotitoli rispettando le classiche regole tipografiche.
  • Allineamento:
    Abbiamo optato nella maggior parte dei casi per il classico allineamento a destra, solo in alcune eccezioni abbiamo allineato il testo al centro (ad esempio nei bottoni o nei menù a tendina).

© Copyright 2025 Mobirise - All Rights Reserved