Principi di progettazione Microsoft

La base del buon design

Riteniamo che seguire i principi di progettazione Microsoft possa esserti molto utile per creare app dello Store apprezzate dagli utenti e delle quali essere fiero. Tienili presenti durante la pianificazione dell'app e fai in modo che guidino tutte le scelte che farai, sia in fase di progettazione che di sviluppo.

Informazioni sulla progettazione moderna

Da lungo tempo Microsoft occupa una posizione di leadership tecnologica in molte aree e per una vasta gamma di prodotti. Di recente si stanno imponendo nuove tendenze che danno ancora maggiore risalto alla progettazione. Questo cambiamento è stato caratterizzato da basi solide, idee interessantissime e contagiose, esperimenti di grande successo e la convinzione che qualsiasi altra scelta sia in fondo semplicemente antiquata. Le basi di questo cambiamento sono diventati i principi di progettazione Microsoft.

La filosofia della progettazione Microsoft è basata su schermate di app semplici e ordinate che consentono un rapido utilizzo delle funzionalità, riducono al minimo la digitazione e avvisano automaticamente l'utente in presenza di info nuove e aggiornate. L'utente interagisce con il contenuto invece che con i controlli che rappresentano il contenuto. Gli elementi visivi hanno grande importanza e sono rifiniti ed eleganti.

Le fondamenta della progettazione moderna

La nostra progettazione moderna è caratterizzata da un livello di profondità, carattere e contesto progettuale tale da non poter essere etichettata semplicemente come "progettazione lineare". Il nostro linguaggio di progettazione si basa su tre distinti pilastri.

• Il Bauhaus: a partire dal 1919, questa emblematica scuola di design ha promosso una potente filosofia: riduzionismo radicale fino all'eliminazione di tutto il superfluo. Un conto è individuare le funzionalità principali della tua app, ben diversa è invece la grande disciplina necessaria per limitare rigorosamente il funzionamento dell'app a tali funzionalità. Citando Antoine de Saint-Exupéry: la perfezione si ottiene non quando non c'è nient'altro da aggiungere, bensì quando non c'è più niente da togliere. La semplicità significa bellezza, ma anche usabilità.

• Stile tipografico internazionale (stile svizzero): lo stile svizzero (o Swiss Style) è ciò che ispira la progettazione Microsoft per la creazione di elementi tipografici di grande impatto, puliti e accattivanti. I temi centrali promossi da questo stile sono pulizia, leggibilità e oggettività. Da questo stile abbiamo stabilito la necessità di una griglia, sia tipografica che visiva, e dell'uso dei layout asimmetrici con modalità esteticamente valide e regolate da principi ben definiti.

• Progettazione del movimento: il movimento dà vita alle esperienze e trasmette un senso di eleganza. Ci siamo fatti ispirare da pionieri come Saul Bass, che usava elementi dinamici insieme a strumenti tipografici e di progettazione per realizzare sequenze di titoli di grande bellezza per i film. Una progettazione accurata del movimento non è solo piacevole, ma può anche servire a spiegare all'utente come eseguire un'attività.

Per altre info su questi pilastri, vedi l'articolo dedicato alla progettazione moderna per Microsoft.

Queste sono le fonti di ispirazione per i nostri principi di progettazione, che ci guidano in tutte le espressioni del nostro design. Sebbene si tratti di principi da noi scelti, sono comuni a tutto il design e speriamo ti siano utili per dare spazio al tuo marchio nella nostra piattaforma. Questi sono i principi di progettazione Microsoft:

• Dimostra la tua abilità con una fattura eccellente
• Fai di più con meno risorse
• Velocità e fluidità
• Autenticamente digitale
• Per un risultato vincente

Dimostra la tua abilità con una fattura eccellente

Questo principio è il primo per un buon motivo. Da sempre nella storia, gli artigiani, gli artisti e i costruttori si sono distinti come professionisti svolgendo con cura il loro lavoro in modo da esserne orgogliosi. Questo principio parla dell'attenzione al dettaglio, del dedicare tempo, energia e passione ai più piccoli dettagli, visti spesso o da molti. Si tratta di progettare esperienze complete e rifinite in ogni fase, dai pixel allineati in modo perfetto su una griglia, ai colori, agli elementi tipografici in una schermata dell'app. Mettiti alla prova per essere orgoglioso della tua perizia in tutte le fasi dello sviluppo.

Affidati alla griglia

Nella progettazione grafica, la griglia tipografica moderna rappresenta l'impalcatura per garantire la coerenza del contenuto. Una disposizione proporzionale degli elementi offre vantaggi sia estetici che pratici. L'utente può interagire comodamente con la pagina in modo rapido.

Gerarchia ed equilibrio

Per far sì che l'utente possa capire chiaramente la gerarchia visiva della tua app, usa proprietà differenti per la visualizzazione di tipi di informazioni diversi. Puoi usare dimensioni del carattere, colori, posizionamento e spaziatura per distinguere visivamente i diversi livelli della gerarchia. Se usi valori di proprietà diversi in modo coerente, l'utente riconoscerà il ritmo della tua app e ogni livello sarà distinto e immediatamente riconoscibile.

Gerarchia	Gerarchia insufficiente

Testo grande, contrasto elevato dei colori. Nell'esempio precedente, "conversazioni" è l'intestazione dell'elemento pivot selezionato. Stabilisce il contesto del contenuto visualizzato al di sotto. L'intestazione è a contrasto elevato (bianco su nero) a indicare che si tratta dell'elemento selezionato nella pagina. Il contrasto dell'intestazione dell'altro elemento è minore (grigio su nero) per metterla meno in evidenza.

Testo di dimensione inferiore. Il dettaglio più importante nell'elenco delle conversazioni è il nome della persona destinataria dei messaggi.

Testo più piccolo. Il primo paio di righe di ogni messaggio sono le successive in ordine di importanza. Il colore distingue i messaggi letti da quelli non letti e dal nome.

Spaziatura e allineamento. Usa più spazio tra le conversazioni e meno spazio all'interno di una conversazione per creare visivamente una gerarchia. È sufficiente allineare a destra il timestamp del messaggio per metterlo in evidenza.

Gerarchia insufficiente. Senza gerarchia la pagina perde di significato e leggibilità. L'estetica è persa, ma soprattutto è persa l'usabilità.

Identità e personalità

Individua gli elementi tipografici che meglio rispecchiano la personalità della tua app. Ecco alcuni esempi di scelte tipografiche che complementano l'app e aiutano a definirne l'identità.

App New York Times. I caratteri tradizionali rispecchiano l'autorevolezza di questa fonte di notizie.

Camera360. I caratteri in questa app sono contemporanei e raffinati.

Riepilogo ed elenco di controllo

• Cura al massimo i dettagli.
• Crea app affidabili e sicure.
• Attieniti a principi di equilibrio, simmetria e gerarchia.
• Adotta per le tue app il nuovo layout basato sulla griglia.
• Rendi l'app accessibile al maggior numero possibile di destinatari, incluse le persone con particolari problemi o disabilità. Vedi le linee guida per la progettazione dell'accessibilità.

Fai di più con meno risorse

In base a questo principio, la tua app deve essere limitata alle funzioni principali. Pensa al contenuto e non al riquadro. Il contenuto può assumere svariate forme: immagini, email, articoli di news e così via. Rimuovi i riquadri per lasciare sullo schermo solo gli elementi più rilevanti. In tutti i casi in cui è possibile, inoltre, imposta elementi di spostamento dal contenuto stesso. Fai in modo che siano le esperienze pulite e immersive a dominare. Ogni elemento sullo schermo deve essere utile e avere un chiaro scopo.

Questo principio non significa però sacrificare l'intuizione. Una progetto può considerarsi riuscito se gli elementi di spostamento guidano l'utente consentendogli di scoprire come interagire con l'app. La progettazione di qualità trova il giusto equilibrio tra intuizione e semplificazione per offrire un prodotto finale pulito e piacevole.

Contenuto e non riquadri

Consenti all'utente di interagire direttamente con il contenuto. Rimuovendo i riquadri e sfruttando tipi di carattere, dimensioni e colori, è più facile dare risalto al contenuto. In questo esempio i nomi e i titoli sono più facili da leggere.

Incentrato sul contenuto	Riquadri come elementi di distrazione

Dare respiro al contenuto

I comandi e le funzionalità importanti sono in chiara evidenza e facili da capire e usare.

Riepilogo ed elenco di controllo

• Dedicati a un numero limitato di elementi anziché disperdere le tue energie su più fronti.
• Anteponi i contenuti ai riquadri.
• Concentrati sulle immagini e sii diretto. Consenti agli utenti di immergersi nei contenuti a cui sono più interessati e loro esploreranno anche il resto.
• Guadagnati la fiducia degli utenti.
• Riduci la ridondanza nella tua interfaccia utente.

Velocità e fluidità

Questo principio garantisce esperienze immersive e reattive. Promuove quel genere di animazioni, transizioni e risposte piacevoli, che potrebbero non essere previste, ma di sicuro rendono vivace l'interfaccia e sono apprezzate dagli utenti. In base a questo principio le persone e le attività vengono prima della tecnologia.

Se la tua app è per tablet o telefoni, tieni presente che una buona app per le persone in movimento è incentrata su scenari semplici e di rapido utilizzo. Per questo tipo di scenari di utilizzo, concentrati sull'offrire agli utenti esattamente quello che vogliono con velocità e precisione e sarai sulla strada giusta per realizzare un design di successo.

Dinamicità

I riquadri animati sono reattivi, dinamici e attirano l'attenzione. Tra l'altro, puoi usarli dando pieno sfogo alla tua immaginazione: dalla notifica di una nuova email alla visualizzazione di un suggerimento sugli aperitivi della settimana nel tuo bar preferito.

Movimento

Crea un senso di continuità e racconta una storia usando il movimento in maniera espressiva. Con il movimento puoi chiedere a un utente di eseguire un'azione o distinguere tipi diversi di azione. La schermata di blocco rimbalza quando la tocchi, per farti sapere che puoi scorrere verso l'alto. La transazione in uscita per un elemento indica in che modo scorrere per rivisualizzare l'elemento.

Riepilogo ed elenco di controllo

• Rispondi tempestivamente alle interazioni degli utenti e preparati per la prossima interazione.
• Progetta tenendo presente l'interazione diretta e tramite tocco.
• Diverti gli utenti con le animazioni.
• Crea continuità tra ciò che precede e ciò che segue.

Autenticamente digitale

Questo principio sottolinea le illimitate capacità di innovazione rese possibili dal panorama digitale. Lo scheumorfismo si affida alle regole e alle proprietà del mondo fisico per la definizione delle metafore progettuali. Noi abbiamo invece deciso di sfruttare le potenzialità, il linguaggio e le opportunità uniche offerti dal nostro mezzo.

Così come la corrente del Bauhaus promuoveva l'eliminazione degli elementi di progettazione superflui, questo principio favorisce l'abbandono di facsimili digitali, come gli effetti di tessuti o pellami, cuciture, ombre e riflessi. Adottare un linguaggio di progettazione più potente e scalabile. Queste sono le basi del principio "Autenticamente digitale".

Info in primo piano

Sii infografico e non solo iconografico. La distribuzione delle informazioni è l'obiettivo primario e non dovrebbe perdersi in inutili dettagli. Adottare l'approccio infografico significa contenuto più chiaro, info interattive e nessuna distrazione.

Iconografico	Infografico

Riepilogo ed elenco di controllo

• Sii dinamico ed efficace nella comunicazione.
• Cura la tipografia.
• Scegli colori vivaci e vibranti.
• Connettiti al cloud in modo che gli utenti possano rimanere connessi tra loro.

Per un risultato vincente

Questo principio parla dell'unificare il tuo lavoro, allinearlo quanto più possibile all'ecosistema comune e introdurre elementi innovativi ove necessario. Modella il tuo lavoro in modo che le app e gli scenari utente in piattaforme diverse interagiscano in modo fluido come una singola esperienza familiare e con un'identità di marchio comune. Gli utenti amano sentirsi a loro agio e non vogliono imparare da zero ogni interfaccia con cui interagiscono. Sfrutta quindi la piattaforma comune di software e servizi Microsoft. Basa le tue esperienze su controlli, gesti, modelli di interazione e animazioni comuni e consolidati, nonché su servizi comuni di autenticazione e di archiviazione nel cloud.

In altre parole, non cercare di reinventare la ruota. L'innovazione offre grandi vantaggi, ma non a spese dell'esperienza utente. Ogni app è anche caratterizzata da un tono speciale, una personalità riconosciuta dagli utenti. Scopri il nostro approccio allo stile comunicativo e inizia a riflettere su come usarlo nella tua app. Scopri quello che funziona per la tua app e non esitare a emulare ciò che ha già dimostrato la sua efficacia.

Pensa alla piattaforma

Considera come la tua app potrebbe funzionare in tutto l'ecosistema di dispositivi e fattori di forma Microsoft. Chiediti "Cosa fa meglio questo dispositivo" e ottimizza l'esperienza in base agli esclusivi punti di forza. Usare più piattaforme può anche offrire l'opportunità di progettare scenari che non sarebbero possibili con una sola.

Riepilogo ed elenco di controllo

• Usa il modello di interfaccia utente.
• Usa altre app per realizzare scenari partecipando ai contratti per applicazioni.
• Sfrutta i nostri strumenti e modelli per incentivare la coerenza.

I principi della buona progettazione sono validi indipendentemente dalla presentazione visiva del tuo marchio. Una progettazione basata su principi ben definiti si traduce in esperienze apprezzate e considerate affidabili dagli utenti.

Pianificazione di app di Windows Store

Progettazione dell'esplorazione per app di Windows Store

Progettazione dei comandi per app di Windows Store

Progettazione delle interazioni tramite tocco

Linee guida per l'esperienza utente delle app di Windows Store

Creazione di entusiasmanti app di Windows Store

Accessibilità per le app di Windows Store

Principi e linguaggio: un punto di vista indipendente