Imparare da Microsoft: 10 insidie del design da evitare
Oggi esamineremo le pratiche e le tendenze del web design del singolo nome più importante nel software per vedere se possiamo imparare qualcosa su alcuni errori da evitare nel nostro lavoro.
Sentiti libero di commentare per essere d'accordo o in disaccordo con i suggerimenti di seguito. Come designer professionisti la tua intuizione è preziosa e attendo con ansia i tuoi pensieri.
Esplora risorse di progettazione
The Occasional Rant
A tutti coloro che odiano gli articoli pieni di risentimento, mi scuso che questo post sia un po 'duro a volte. Di solito preferisco lodare il buon design piuttosto che criticare il male, ma quando David Appleyard e io decidemmo di pubblicare un post sulle tendenze del design di Microsoft, sembrava che ci fosse molto di più da imparare sulle cose disordinate, brutte e / o sconsigliabili che fanno rispetto all'alternativa.
Per interromperti nei commenti, non menzionerò né farò un singolo confronto con Apple nell'analisi che segue. Questo non significa minimamente un argomento PC contro Mac, ma piuttosto uno sguardo a quelle che crediamo essere pratiche veramente povere nel web design e nello sviluppo. In tutta onestà, Microsoft è un'azienda di grande successo e non sta esitando a fallire a causa di questi problemi. In effetti, come sottolineato di seguito, Microsoft sembra davvero avere alcuni designer stellari nel team per determinati siti, suggeriamo semplicemente che un livello superiore di controllo della qualità sia implementato su tutta la linea.
Tenendo presente ciò, analizziamo alcuni punti in cui Microsoft sembra non conoscere le sue pratiche di progettazione e sviluppo e come trarre vantaggio da questa conoscenza.
# 1 Fai attenzione a mandare alcuni plugin
Se abbiamo appreso qualcosa dai recenti scrap tra Apple e Adobe è che la creazione di siti interamente dipendenti da plug-in di terze parti chiusi può alla fine portare a un serio ritorno di fiamma. Microsoft sembra ripetere questo stesso errore man mano che la propria rete di siti diventa sempre più responsabile su Silverlight.
Mentre sfogliavo i vari siti Microsoft che si preparavano per questo articolo, sono stato costantemente molestato da Windows che mi informava che non avevo installato Silverlight e quindi non potevo sperimentare la pagina web nel modo in cui doveva essere vista. La mia domanda è: "perché percorrere questa strada?" Soprattutto quando parliamo di semplici presentazioni e animazioni che possono essere fatte con tecnologie più onnipresenti. Certo, Microsoft possiede Silverlight, quindi è logico per loro sostenere il loro investimento, ma ciò non significa che sia la scelta migliore per te per saltare sul loro carrozzone.
Che tu sia un grande fan di Silverlight o meno, il mio consiglio è di essere estremamente cauti nel basare la funzionalità del tuo sito su questa o qualsiasi tecnologia simile. Mentre il dibattito sull'opportunità o meno di sviluppare siti con Flash continua a scaldarsi, i sistemi di seconda linea come Silverlight diventano ancora più una scommessa. Ove possibile, attenersi al codice e agli strumenti cross-browser, conformi agli standard che non richiedono alcun lavoro aggiuntivo o installazioni da parte dei visitatori.
# 2 Guarda la tua risoluzione
Questa è una delle mie più grandi lamentele su Microsoft semplicemente perché sembra solo un design sciatto. C'è indubbiamente una linea sottile da percorrere tra il mantenimento delle dimensioni del file per aumentare l'usabilità e mantenere le immagini pulite e nitide, ma non posso fare a meno di pensare che Microsoft sembra essere più incline a mostrare JPG brutte e frastagliate rispetto a qualsiasi altra sito professionale che ho visto negli ultimi anni.
Il numero sempre crescente di utenti di Internet dial-up continua ad aumentare e aumentare le dimensioni accettabili delle immagini. Ciò non implica in alcun modo che non si debba prestare particolare attenzione a rendere tutto quanto piccolo quanto ragionevole, ma nel momento in cui inizia a pesare così tanto sul design che riduce drasticamente la qualità apparente del sito, le immagini diventano autodistruggenti!
Stai vivendo pura ironia se usi le immagini per rendere il tuo sito migliore, ma alla fine riduci il tuo fascino estetico nel processo. Quando possibile, visualizza in anteprima le immagini elaborate su diversi monitor e presta molta attenzione a quanta distorsione e artefatto ritieni accettabili.
# 3 Clutter organizzato
A volte puoi seguire tutte le ovvie regole di progettazione e finire con qualcosa che sembra visivamente scadente. Navigando sui siti di Microsoft mi sono imbattuto in innumerevoli aree come quella qui sotto che sembrava solo ingombra nonostante i loro tentativi di organizzazione basata su colonne.
Allora, qual'è il problema? In poche parole, c'è un sacco di cose che succedono in uno spazio relativamente piccolo qui. Anche se hanno sicuramente tentato di organizzare il contenuto e migliorare la leggibilità visiva attraverso le icone, il risultato finale è ancora abbastanza sbilanciato.
Se dai un'occhiata da vicino a quello che sta succedendo qui, sembra che ci siano quattro colonne di informazioni progettate da quattro persone diverse che sono state stipate insieme. La parte sinistra sembra davvero pesante con le immagini rispetto alla destra, il colore del testo è un po 'sporadico, il contenuto è sconcertantemente sfalsato e le colonne non hanno abbastanza spazio per far sembrare le aree indipendenti che sono.
La lezione qui è fare attenzione a impacchettare una singola area della tua pagina troppo piena di informazioni disparate. Ci sono indubbiamente un sacco di volte in cui la situazione richiederà molti contenuti, ma l'organizzazione dovrebbe essere gestita in modo coerente e attraente, come si vede negli splendidi esempi di seguito (da siti non Microsoft).
# 4 Incoerenza
A partire da Microsoft.com, apri i menu a discesa di navigazione giganteschi e scegli un'area del sito da visitare. Indipendentemente dal link su cui fai clic, la pagina risultante apparirà piuttosto diversa dalla home page e comunque diversa dalla maggior parte degli altri link disponibili nello stesso menu a discesa.
Esplorare il sito Microsoft è come girare una roulette. Non hai praticamente idea di dove atterrerai e cosa aspettarti dalla pagina successiva. Alcune pagine presentano sfondi swooshy mentre altre usano sfumature morbide o persino cerchi che esplodono. La maggior parte delle pagine sembra favorire il blu ma non necessariamente lo stesso blu e ci sono anche molte pagine che ignorano del tutto la tendenza blu.
Il punto è, se il tuo sito ha due pagine o duecento, la coerenza è un must. Fa sentire gli utenti più a loro agio quando possono acquisire familiarità con il modo in cui un sito funziona e si presenta in pochi secondi. Dare loro qualcosa di drasticamente diverso ogni poche pagine rende la navigazione un'esperienza più confusa e meno efficiente.
in aggiunta a ciò c'è l'idea che creare un marchio forte e coerente sia solo un buon affare in quanto aiuta i clienti a relazionarsi con la tua azienda in modo più personale. Certo, Microsoft sta destreggiandosi con molti marchi e micrositi diversi che provengono tutti dalla homepage, ma anche tra quelle che potrebbero essere considerate le pagine principali di Microsoft.com, i temi delle immagini e i metodi di navigazione sembrano drasticamente diversi.
# 5 Design incentrato sui clipart
Questo suggerimento è ovviamente un po 'assurdo visto che clip art e Microsoft Office sono sempre stati inesorabilmente intrecciati. Tuttavia, il design delle icone ha fatto molta strada dal 1995 ed è giunto il momento di rinunciare a quello stile specifico nelle immagini che usi.
Gli esempi di arte sopra riportati da varie pagine di Microsoft mi fanno semplicemente rabbrividire, in particolare il terribile logo "Beginner Developer". Non ho idea del perché un boomerang stia attaccando una pianta o se il magico monitor in bilico stia aiutando l'attacco o fuggendo dalla scena. Tutto quello che so è che la comunicazione visiva qui è un casino indecifrabile.
Questo è uno dei motivi principali per cui esistono gallerie CSS come la nostra. Non così puoi rubare il design degli altri, ma così puoi dare un'occhiata allo stato del design nel decennio in cui stai sviluppando. Navigare attraverso queste gallerie è come visitare famosi negozi di abbigliamento nel centro commerciale per mostrare a tua zia pazza che non deve vestirsi come qualcuno dello spettacolo di Sunny e Cher.
Sentiti sempre libero di rompere i confini e andare oltre le attuali tendenze di progettazione avviando il tuo. Basta essere cauti di rimanere ostinatamente stagnanti per anni mentre il resto del mondo va avanti.
# 6 Testo traboccante disallineato
Un'altra tendenza che è difficile non notare nei siti di Microsoft è rappresentata dalle colonne di testo costantemente spezzate che traboccano dai limiti evidenti.
Questo è abbastanza facile da risolvere e richiede davvero solo un po 'di sforzo e attenzione. Assicurati di sfruttare gli strumenti gratuiti come il laboratorio del browser Adobe per assicurarti che i tuoi layout non si rompano quando vengono visualizzati su tutti i principali browser.
Sebbene il layout CSS sia una bestia certamente complicata quando si tratta di coerenza tra browser, piccoli errori come questo riducono davvero la qualità del tuo sito e valgono il tempo necessario per la risoluzione dei problemi.
# 7 Scarso allineamento
A volte una determinata pagina mi ha presentato la sfida di decidere quale progetto è possibile sottolineare. Ad esempio, nella pagina seguente ho inizialmente pensato di scegliere l'uso di un piccolo screenshot che non diventa più grande quando fai clic su di esso, ma più guardavo la pagina più mi confondevo su ciò che stava succedendo lo schema.
Se hai familiarità con la teoria del design di base, sai che imparare a implementare allineamenti solidi e coerenti è la chiave per un buon layout di pagina. La strana miscela di allineamenti visivi sinistro, centrale e destro che si svolgono sul sito sopra, in congiunzione con lo scomodo spazio vuoto vicino alla parte superiore, crea un flusso visivo davvero strano delle informazioni presentate.
Inoltre, se visiti la pagina sopra, vedrai che il contenuto nel suo insieme sembra che stia cercando di essere centrato, ma è davvero gettato via dalla striscia nel mezzo, il che rende la pagina abbastanza al centro.
# 8 Clutter dell'annuncio
I blog di design gratuiti come questo devono presentare molti annunci, è semplicemente il modo in cui guadagniamo e continuiamo a fornirti contenuti. Tuttavia, se gestisci un sito aziendale professionale, devi considerare attentamente se vuoi detrarre il tuo messaggio e la tua professionalità con la pubblicità.
Le pagine di Microsoft.com sono disseminate di vari annunci che abbattono davvero l'estetica della pagina in cui si trovano. A volte questi annunci puntano direttamente ad altre pagine di Microsoft, a volte ad altre società o partner. Non c'è niente di sbagliato nel concetto di indirizzare il traffico verso altre parti del tuo sito, ma il modo in cui lo fai può fare una grande differenza.
Se c'è una cosa che la maggior parte degli utenti Web ha imparato a individuare, ignorare e forse persino a risentire, è un banner pubblicitario. Per non dire che questo tipo di pubblicità non funziona con il targeting e il design adeguati, o anche per dire che gli utenti Microsoft non stanno facendo clic su questi, ma mi chiedo se non c'è un modo migliore.
Se Microsoft vuole indirizzare il traffico verso i propri telefoni cellulari e altri progetti, la soluzione semplice è configurare un sistema pubblicitario disordinato, non standard (dal punto di vista del design) che attraversa l'intero sito. Tuttavia, sembra che l'integrazione di questi contenuti come parte del sito reale avrebbe una percentuale di clic molto migliore in quanto un numero maggiore di utenti prenderà nota del messaggio e non dovrà infrangere alcuna regola interna per evitare la pubblicità di banner a tutti i costi.
Inoltre, tale integrazione costringerebbe i progetti a essere più coerenti perché sono creati come una singola unità piuttosto che da team separati. Ancora una volta, questo è uno scenario in cui posso capire l'efficienza in termini di costi dell'approccio di Microsoft, ma voglio metterti in guardia dal seguire il loro esempio. Le probabilità sono che i siti che progettate non competeranno con la mega-rete dei siti Microsoft e quindi con tutta probabilità si presteranno a un design solido e integrato in modo da evitare il disordine visivo degli annunci in eccesso.
Ovviamente, ci sono molti generi di siti in cui questo non si applica affatto poiché è prevista la pubblicità. Assicurati solo di considerare se il tuo sito deve essere dedicato alla vendita del tuo prodotto o servizio, o richiede il reddito extra e la distrazione della pubblicità.
# 9 Mancanza di spazio per respirare
Nel design di stampa, i progettisti impostano ogni pagina con una "area live". Di solito si tratta di un riquadro rettangolare dal bordo della pagina che definisce l'area in cui è sicuro posizionare i contenuti per evitare il taglio della pagina o l'affollamento dei bordi. La maggior parte dei web designer lo fa in modo intuitivo poiché è abbastanza ovvio che non vuoi che i tuoi contenuti siano troppo stipati sul lato del browser.
Tuttavia, come mostra lo screenshot sopra, ci sono alcune pagine Microsoft che non sembrano mettere in magazzino tali opinioni. Al contrario, il contenuto inizia non appena la pagina ha un margine o un margine orizzontale pari a zero (almeno sui browser con cui ho verificato).
Il pannello di navigazione non sembra incorporato nel lato della pagina, sembra essere tagliato (di nuovo, potrebbe essere proprio quello a causa del fatto che non ho IE). La lezione qui è semplice: sii sempre consapevole del bordo della finestra del browser. A meno che tu non stia infrangendo la regola per un evidente effetto bleed visivo, posiziona i tuoi contenuti, in particolare porzioni interattive e collegamenti, ben all'interno di un margine sicuro in modo che gli utenti non si sentano affollati quando provano a usarlo.
Se osservi attentamente lo screenshot qui sopra, puoi vedere alcuni altri esempi dei designer di Microsoft semplicemente non considerando se il loro testo scorrerà correttamente su tutti i principali browser. Questa è una tendenza piuttosto divertente per Microsoft poiché molti web designer trascorrono le loro giornate nel tentativo di trovare sistemazioni speciali per Internet Explorer di Microsoft, ma la società multimiliardaria non può preoccuparsi di restituire il favore controllando il proprio lavoro su altri sistemi.
# 10 Non riuscire a sfruttare il tuo talento
Sebbene ci siano molti commenti negativi sopra sui web designer di Microsoft, sono stato piacevolmente sorpreso di vedere che in realtà hanno parecchi siti e pagine che sembrano semplicemente incredibili.
Gli esempi di cui sopra sono solo due dei molti posti in cui credo che Microsoft l'abbia davvero buttato fuori dal parco con il loro layout, le scelte di colore, la grafica e la compatibilità cross-browser. Ciò che mi dice è che da qualche parte tra il vasto pool di cubicoli in questa azienda ci sono alcuni individui di grande talento in grado di far uscire completamente la società dal suo crollo del design.
Questi designer, chiunque essi siano, dovrebbero essere promossi a posizioni che consentirebbero loro di collaborare e stabilire standard coerenti che letteralmente ogni web designer Microsoft sarebbe costretto a seguire. Al posto di un labirinto di confusione disconnessa di contenuti, potrebbero creare una rete fortemente marcata di splendidi siti che appartengono tutti chiaramente alla stessa famiglia.
Il suggerimento finale che vi presento è quello di trovare questi tipi di persone eccezionali nella vostra compagnia e dare loro una voce. Anziché lamentarsi della mancanza di talento tra gli altri membri del team, nomina i designer e gli sviluppatori più forti in posizioni in cui possano influenzare ogni parte della comunicazione visiva che viene lanciata associata a un marchio specifico.
Questo può essere fatto in modo efficiente ed efficace creando linee guida di marchio chiare, coerenti e rigorose che vengono distribuite a ogni designer e sviluppatore per ogni marchio distinto con cui lavori.
Pensieri di chiusura
Per riassumere, anche se Microsoft possiede alcuni web designer estremamente talentuosi, il lavoro di questi individui è quasi completamente oscurato dalla grande quantità di contenuti che non soddisfa nemmeno gli standard che ci aspetteremmo dai designer e dagli sviluppatori principianti nel loro primo anno .
Fortunatamente, possiamo utilizzare aziende come Microsoft come ausili didattici per illustrare chiaramente che esiste in realtà un modo sbagliato di fare le cose. Non immaginarlo solo perché sei un libero professionista solitario o una piccola azienda di design che non puoi superare completamente le mega-corporazioni e le aziende di design quando si tratta della qualità del lavoro che produci.
Ho scoperto che spesso è più facile trovare esempi di designer di qualità negli uffici domestici di tutto il mondo piuttosto che sedersi ai banchi di grandi aziende. Goditi il fatto che non devi coordinare e controllare la qualità di centinaia di designer. Fai del tuo meglio per creare alcuni dei migliori siti sul Web con la piccola quantità di risorse che possiedi in combinazione con una grande quantità di unità personale per creare design meravigliosamente funzionali.
