L'esperienza desktop è adattabile fin dall'inizio e supporta una serie di dimensioni su display collegati o all'interno delle finestre. Supporta l'intera gamma di dispositivi Android creando un'interfaccia utente adattiva. I layout adattivi sono essenziali per le esperienze desktop e consentono agli utenti di ridimensionare facilmente le finestre delle app.
Per preparare la tua app per un'esperienza desktop, inizia adattando la relativa UI, quindi procedi con la progettazione dell'interazione con la densità e l'input. Per ulteriori informazioni, vedi Layout adattivi. Per esercitarti con un laboratorio di progettazione, consulta il laboratorio di progettazione adattabile.
Pensare in riquadri
Adotta un approccio basato sui riquadri al layout utilizzando il raggruppamento e il contenimento. I contenuti possono essere organizzati utilizzando contenitori visivi o tramite raggruppamento implicito con spazi bianchi. Questi riquadri offrono flessibilità, in quanto possono essere espansi, limitati, nascosti, spostati o visualizzati come popup. La progettazione con i riquadri semplifica il processo di creazione di esperienze coerenti su vari dispositivi mobili e può essere integrata con le griglie attuali per semplificare gli allineamenti complessi del layout.
Cosa fare
Bilancia
Sebbene gli schermi di grandi dimensioni offrano più spazio per i contenuti, è necessario tenere conto dello spazio aggiuntivo e di fattori ergonomici come la distanza di visualizzazione. La tipografia deve essere leggermente ingrandita per il comfort degli utenti che potrebbero essere più lontani o digitare su una tastiera.
Gli elementi e il tipo di UI vengono scalati sui display estesi e connessi e potrebbero avere scale diverse a causa delle risoluzioni dello schermo.
Utilizza uno o due passaggi nella scala tipografica esistente oppure valuta la possibilità di implementare una scala tipografica specializzata progettata per il desktop e i display estesi. Nei tuoi progetti possono essere apportate modifiche soggettive per una qualità editoriale superiore.
L'immagine viene anche ingrandita e si estende su tutto lo schermo. In questo modo l'utente può vedere la pianta in modo più dettagliato, ma lo spazio non viene utilizzato in modo efficiente. Tieni presente questo aspetto quando strutturi gli elementi dell'interfaccia utente.
Contenuti ed elementi dell'interfaccia utente
Ora che i contenuti sono raggruppati e scalati, anche parte dell'interfaccia utente dei contenuti può spostarsi o aggiornarsi per adattarsi meglio ai punti di interruzione.
All'interno di ogni riquadro di contenuti, decidi se e come adattarlo. Guarda i contenuti. Se una riga di elenco diventa una scheda, i contenuti perdono efficienza di interazione e leggibilità? I componenti possono comportarsi in modo diverso in vari punti di interruzione. Puoi adattarne la larghezza o la visibilità o persino cambiare i componenti.
Decidi la larghezza massima per ogni elemento dell'interfaccia utente e per il testo all'interno di un riquadro. Gli elementi dell'interfaccia utente non devono estendersi per tutta la larghezza o distorcersi. Imposta i margini e i riempimenti massimi all'interno dei riquadri. Il testo deve essere letto comodamente limitando la lunghezza delle righe. Limita il testo del formato breve a circa 60 caratteri, mentre i contenuti del formato lungo possono essere più lunghi.
Cosa fare
Utilizza la divulgazione progressiva controllata. Possono essere visualizzati più contenuti quando l'utente aumenta le dimensioni della finestra? Valuta se i contenuti aggiuntivi aumentano la produttività con meno clic o creano confusione.
Il layout dei contenuti all'interno di ogni riquadro può cambiare, a seconda dei contenuti, in modo da adattarsi a diverse colonne e strutture a griglia. Ad esempio, una griglia verticale con un carosello può essere aggiornata a una griglia a mosaico con un carosello in evidenza. Valuta la possibilità di modificare la posizione verticale degli elementi e combinali con vincoli e modifiche alla presentazione. Potresti non voler spostare componenti come questo, a seconda del consumo di contenuti.
Valuta la possibilità di consentire all'utente di regolare il layout in base alle proprie preferenze per massimizzare la leggibilità e la produttività.
Navigazione
Dopo aver adattato i contenuti e gli elementi UI, decidi come interagiscono tra loro i riquadri dei contenuti e la gerarchia di navigazione. Anziché toccare per passare ai contenuti di dettaglio, puoi utilizzare lo spazio aggiuntivo dello schermo per mostrare i dettagli e i contenuti di supporto uno accanto all'altro.
- Se è in uso una barra di navigazione, la barra inferiore dovrebbe aggiornarsi a una barra di navigazione laterale per una maggiore ergonomia. Non allungare una barra di navigazione inferiore.
- Per la navigazione secondaria, ad esempio le schede, valuta di fissarle a una larghezza massima in modo che sia più facile navigare con precisione.
- Le barre delle app possono anche essere fissate al relativo riquadro di contenuti, ma assicurati di non confondere la gerarchia di navigazione.
Densità
L'esperienza desktop può variare sia in termini di densità di interazione che di densità visiva a causa della precisione dell'input e delle dimensioni dello schermo.
- Puoi aumentare la densità degli elementi visivi, ad esempio i dati delle tabelle, senza sovraccaricare l'utente rispetto a un layout compatto dello smartphone. Considera la densità dei contenuti come opzionale e consenti sempre la scalabilità del testo all'interno del layout, non impostare dimensioni del carattere fisse.
- I componenti devono avere una destinazione di clic più precisa. I target di clic intrinseci intorno ai componenti possono generare clic errati.
Input
Input aggiuntivi significano pattern di interazione aggiuntivi per i tuoi utenti.
Quando un utente ha un mouse e una tastiera, la tua app deve tenere conto dello stato di passaggio del mouse e dello stato attivo.
- Aggiungi stati di passaggio del mouse per gli input del puntatore, come mouse e stilo.
- Acquisire gli stati di messa a fuoco degli elementi quando gli utenti navigano utilizzando il tasto Tab per l'accessibilità.
- Tieni conto degli stati del cursore, in quanto può anche aiutare a comunicare l'interazione e lo stato dell'app all'utente.
Gli stati aggiuntivi possono aumentare l'efficienza.
- La funzionalità di clic con il tasto destro del mouse può includere menu contestuali per un rapido accesso alle funzionalità.
- Le descrizioni comando al passaggio del mouse possono aiutare a eseguire l'onboarding degli utenti.
- Le scorciatoie da tastiera aiutano gli utenti esperti ad aumentare la produttività.
