Oggi esamineremo le pratiche di progettazione web e le tendenze del singolo nome più grande nel software per vedere se possiamo imparare qualcosa su alcuni errori da evitare nel nostro lavoro.
Sentiti libero di commentare o essere d'accordo o in disaccordo con i suggerimenti di seguito. Come designer professionisti la tua visione è preziosa e attendo con ansia i tuoi pensieri.
Il sussulto occasionale
A tutti quelli che odiano gli articoli pieni di sproloqui, mi scuso che a volte questo post è un po 'duro. Di solito preferisco lodare il buon design piuttosto che criticare male, ma quando David Appleyard e io decidemmo di fare un post sulle tendenze del design di Microsoft, sembrava esserci molto di più da imparare sulle cose disordinate, brutte e / o sconsigliabili che loro fanno dell'alternativa.
Per escluderti dai commenti, non menzionerò o effettuerò un solo confronto con Apple nell'analisi riportata di seguito. Questo non vuole essere un argomento PC contro Mac, ma piuttosto uno sguardo a ciò che crediamo essere pratiche veramente scarse nel web design e nello sviluppo. In tutta onestà, Microsoft è una società di enorme successo e non sta fallendo in modo esatto a causa di nessuno di questi problemi. Infatti, come abbiamo sottolineato di seguito, Microsoft sembra davvero avere alcuni designer stellari nel team per determinati siti, ma semplicemente suggeriamo che un maggior livello di controllo della qualità sia implementato su tutta la linea.
Con questo in mente, analizziamo alcuni punti in cui Microsoft sembra non essere all'altezza delle sue pratiche di progettazione e sviluppo e di come trarre vantaggio da questa conoscenza.
# 1 Attenzione alle richieste di certi plugin
Se abbiamo imparato qualcosa dai recenti scarti tra Apple e Adobe, è che la creazione di siti interamente dipendenti da plugin di terze parti chiusi può portare a qualche serio ritorno di fiamma. Sembra che Microsoft stia ripetendo lo stesso errore dato che la propria rete di siti diventa sempre più esponente su Silverlight.
Mentre sfogliavo i vari siti di Microsoft che si preparavano per questo articolo, ero costantemente molestato da Windows che mi informava che non avevo installato Silverlight e che quindi non potevo sperimentare la pagina web nel modo in cui doveva essere vista. La mia domanda è, "perché seguire questa strada ?? Soprattutto quando parliamo di presentazioni e animazioni semplici che possono essere fatte con tecnologie più diffuse. Certo, Microsoft possiede Silverlight, quindi è ragionevole per gli imprenditori fare il backup dei loro investimenti, ma ciò non significa che sia la scelta migliore per farti saltare sul loro carro della banda.
Che tu sia un grande fan di Silverlight o meno, il mio consiglio è di essere estremamente cauto nel basare la funzionalità del tuo sito su questa o altre tecnologie simili. 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ù azzardati. Ove possibile, attenersi a codici e strumenti compatibili con browser, che non richiedono alcun lavoro aggiuntivo o installazioni dai visitatori.
# 2 Guarda la tua risoluzione
Questa è una delle mie più grandi lamentele su Microsoft semplicemente perché sembra un design sciatto. C'è indubbiamente una linea sottile da percorrere tra mantenere le dimensioni del file verso il basso per aumentare l'usabilità e mantenere le tue immagini pulite e nitide, ma non posso fare a meno di pensare che Microsoft sembra essere più incline a mostrare brutti e frastagliati JPG rispetto a qualsiasi altro sito professionale che ho visto negli ultimi anni.
La sempre minore quantità di utenti di accesso remoto continua a spingere verso l'alto le dimensioni accettabili delle immagini. Ciò non significa assolutamente che non si debba prestare particolare attenzione a rendere tutto il più piccolo possibile, ma nel momento in cui inizia a pesare così fortemente sul design che riduce drasticamente l'apparente qualità del sito, le immagini diventano controproducenti!
Stai vivendo pura ironia se usi le immagini per migliorare il tuo sito ma alla fine riduci il tuo fascino estetico nel processo. Quando possibile, visualizza in anteprima le immagini elaborate su diversi monitor e fai molta attenzione a quanto distorsione e artefatto trovi accettabile.
# 3 Clutter organizzato
A volte è possibile seguire tutte le regole di progettazione ovvie e finire con qualcosa che sembra visivamente scadente. Navigando nei siti di Microsoft mi sono imbattuto in innumerevoli aree come quella qui sotto che sembravano disordinate nonostante i loro tentativi di organizzazione basata su colonne.
Allora, qual'è il problema? In poche parole, c'è una tonnellata in corso 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 osservi attentamente cosa sta succedendo qui, ti sembrerà di avere 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 è scomposto in modo maldestro e le colonne mancano di spazio sufficiente per farle sembrare le aree indipendenti che sono.
La lezione qui è di fare attenzione a imballare una singola area della pagina troppo piena di informazioni disparate. Ci sono indubbiamente molte volte in cui la situazione richiederà molti contenuti, ma l'organizzazione dovrebbe essere gestita in modo coerente e attraente come si vede nei bellissimi esempi qui sotto (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 collegamento su cui fai clic, la pagina risultante sarà molto diversa dalla home page e diversa dalla maggior parte degli altri link disponibili nello stesso menu a discesa.
Esplorare il sito di Microsoft è come girare una ruota della roulette.Non hai praticamente idea di dove atterrerai e cosa aspettarti dalla prossima pagina. Alcune pagine presentano sfondi swoosh mentre altre usano sfumature morbide o addirittura cerchi esplosivi. La maggior parte delle pagine sembra preferire il blu ma non necessariamente lo stesso blu e ci sono anche un sacco di pagine che ignorano del tutto la tendenza blu.
Il punto è che, se il tuo sito ha due o duecento pagine, la coerenza è un must. Fa sentire gli utenti più a loro agio quando possono familiarizzare con il modo in cui un sito funziona e guarda in pochi secondi. Dare loro qualcosa di drasticamente diverso ogni poche pagine rende la navigazione un'esperienza più confusa e meno efficiente.
inoltre, c'è l'idea che la creazione di un marchio forte e coerente sia solo un buon affare in quanto aiuta i clienti a relazionarsi con la tua azienda in un modo più personale. Certo, Microsoft sta gestendo diversi marchi e micrositi che derivano tutti dalla home page, 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 sulle immagini
Questo suggerimento è ovviamente un po 'assurdo visto che ClipArt e Microsoft Office sono sempre stati intrecciati inesorabilmente. 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 di cui sopra tratti da varie pagine di Microsoft mi fanno semplicemente rabbrividire, specialmente che orribile? Sviluppatore per principianti? logo. Non ho idea del motivo per cui un boomerang stia attaccando una pianta o se il magico monitor del computer in volo stia aiutando nell'attacco o fugga dalla scena. Tutto quello che so è che la comunicazione visiva qui è un pasticcio 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 uno sguardo allo stato del design nel decennio in cui ti stai sviluppando. Navigare attraverso queste gallerie è come visitare i negozi di abbigliamento più famosi al centro commerciale per mostrare la tua pazza zia che non deve vestirsi come qualcuno dello spettacolo Sunny and Cher.
Sentiti sempre libero di rompere i confini e andare oltre le attuali tendenze di deisgn iniziando da solo. Basta essere prudenti per 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 sono le colonne di testo costantemente interrotte che traboccano i loro limiti evidenti.
Questo è abbastanza facile da risolvere e richiede solo un po 'di sforzo e attenzione. Assicurati di usufruire di strumenti gratuiti come il browser lab di Adobe per assicurarti che i tuoi layout non si interrompano quando vengono visualizzati su qualsiasi browser principale.
Anche se il layout CSS è una bestia dichiaratamente difficile quando si tratta di coerenza tra browser, errori di questo tipo riducono la qualità del tuo sito e valgono il tempo necessario per risolverlo.
# 7 Scarso allineamento
A volte una determinata pagina mi ha presentato la sfida di decidere quale disegno volere indicare. Per esempio, nella pagina qui sotto ho inizialmente pensato di utilizzare un piccolo screenshot che non si ingrandisce quando si fa clic su di esso, ma più guardavo la pagina e più mi confondevo con quello 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 combinazione di allineamenti visivi di sinistra, centro e destra che si svolgono sul sito in alto, in congiunzione con lo spazio vuoto scomodo vicino alla cima, crea un flusso visivo davvero strano delle informazioni che vengono presentate.
Inoltre, se visiti la pagina sopra, vedrai che il contenuto nel suo complesso sembra che stia cercando di essere centrato, ma è davvero buttato fuori dalla striscia nel mezzo, il che rende la pagina abbastanza corretta.
# 8 Ad Clutter
I blog di design gratuiti come questo devono presentare molti annunci, è semplicemente il modo in cui creiamo un reddito e continuiamo a fornirti contenuti. Tuttavia, se gestisci un sito commerciale professionale, devi valutare attentamente se vuoi sminuire il tuo messaggio e la professionalità con la pubblicità.
Le pagine di Microsoft.com sono disseminate di varie pubblicità che riducono davvero l'estetica della pagina in cui si trovano. A volte questi annunci puntano direttamente ad altre pagine Microsoft, a volte ad altre società o partner. Non c'è niente di sbagliato nel concetto di dirigere il traffico verso altre parti del tuo sito, ma il modo in cui lo realizzi può fare un'enorme differenza.
Se c'è una cosa che la maggior parte degli utenti del web ha imparato a individuare, ignorare e persino risentire, è un banner pubblicitario. Per non dire che questo tipo di pubblicità non funziona con il targeting e il design appropriati, o addirittura per dire che gli utenti Microsoft non fanno 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 più semplice consiste nell'impostare un sistema pubblicitario ingombrante e non standard (dal design saggio) che si sposta su tutto il loro sito. Tuttavia, sembra che l'integrazione di questo contenuto come parte del sito effettivo avrebbe una percentuale di clic molto migliore, in quanto un maggior numero di utenti prenderebbe atto del messaggio e non dovrà violare alcuna regola internalizzata per evitare gli annunci banner a tutti i costi.
Inoltre, tale integrazione costringerebbe i progetti a essere più coerenti perché vengono creati come una singola unità piuttosto che da team separati. Ancora una volta, questo è uno scenario in cui posso capire l'efficienza dei costi dell'approccio di Microsoft, ma voglio consigliarti di non seguire il loro esempio.Le probabilità sono che i siti che hai progettato non rivaleggino con la mega-rete di siti Microsoft e quindi si prestano più probabilmente a un solido design integrato in modo da evitare la confusione visiva degli annunci in eccesso.
Ovviamente, ci sono un sacco di generi di siti in cui questo non si applica in quanto la pubblicità dovrebbe essere presente. Assicurati solo di considerare se il tuo sito dovrebbe essere dedicato alla vendita del tuo prodotto o servizio, o richiede il reddito extra e la distrazione della pubblicità.
# 9 A Mancanza di Respirazione
Nella progettazione della stampa, i progettisti configurano ogni pagina con un'area "live". Di solito è un riquadro rettangolare dal bordo della pagina che definisce l'area in cui è sicuro posizionare il contenuto per evitare il taglio della pagina o l'affollamento dei bordi. La maggior parte dei web designer fa questo in modo intuitivo in quanto è abbastanza ovvio che non vuoi che i tuoi contenuti siano troppo stipati contro il lato del browser.
Tuttavia, come mostra lo screenshot qui sopra, ci sono alcune pagine Microsoft che non sembrano mettere a posto tali opinioni. Invece, il contenuto inizia non appena la pagina esegue il riempimento orizzontale o il margine (almeno sui browser con cui ho fatto il check-in).
Il pannello di navigazione non si sente come se fosse incorporato al lato della pagina, sembra che si stia tagliando (di nuovo, potrebbe essere proprio questo perché 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 ovvio effetto visivo, posiziona i tuoi contenuti, in particolare porzioni interattive e link, entro un margine di sicurezza in modo che gli utenti non si sentano affollati quando cercano di usarlo.
Se guardi da vicino lo screenshot qui sopra puoi vedere altri esempi dei designer di Microsoft semplicemente non considerando se il loro testo scorrerà correttamente su tutti i principali browser. Questa è la tendenza più divertente per Microsoft dato che molti web designer trascorrono le loro giornate cercando di creare sistemazioni speciali per Microsoft Internet Explorer, ma la società multimilionaria non può essere disturbata a restituire il favore controllando il proprio lavoro su altri sistemi.
# 10 Non riuscendo a sfruttare il tuo talento
Anche se ci sono molti commenti negativi di cui sopra sui progettisti web in Microsoft, sono stato piacevolmente sorpreso nel vedere che in effetti hanno parecchi siti e pagine che sembrano semplicemente incredibili.
Gli esempi di cui sopra sono solo due dei molti luoghi in cui credo che Microsoft l'abbia davvero buttato fuori dal parco con il loro layout, scelte di colore, grafica e compatibilità cross-browser. Ciò che questo mi dice è che da qualche parte nel vasto pool di cubicoli di questa azienda ci sono alcuni individui di grande talento in grado di portare la compagnia completamente fuori dal suo crollo del design.
Questi designer, chiunque essi siano, dovrebbero essere promossi a posizioni che consentano loro di cooperare insieme e stabilire standard coerenti che letteralmente ogni web designer Microsoft sarebbe obbligato a seguire. Al posto di un labirinto di sconnessi confusi contenuti, potrebbero creare una rete fortemente segnalata di bellissimi siti che appartengono tutti chiaramente alla stessa famiglia.
Il suggerimento finale che vi presento è di trovare questi tipi di individui eccezionali nella vostra azienda e dar loro una voce. Piuttosto che lamentarsi per la mancanza di talento tra gli altri membri del team, nominare i designer e gli sviluppatori più forti in posizioni in cui possono influenzare ogni comunicazione visiva che si sviluppa associata a un marchio specifico.
Questo può essere fatto in modo efficiente ed efficace creando linee guida chiare, coerenti e rigorose che vengono distribuite a tutti i designer e sviluppatori per ogni marchio distinto con cui lavori.
Pensieri di chiusura
Per riassumere, sebbene Microsoft possieda alcuni web designer di grande talento, il lavoro di questi individui è quasi completamente oscurato dalla grande quantità di contenuti che non soddisfano nemmeno gli standard che ci aspetteremmo da progettisti e sviluppatori nel loro primo anno .
Fortunatamente, possiamo usare aziende come Microsoft come aiuti didattici per illustrare chiaramente che esiste in realtà un modo sbagliato di fare le cose. Non immaginarlo mai solo perché sei un libero professionista solitario o una piccola azienda di design che non puoi completamente sovraperformare 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 stare seduti ai banchi di grandi aziende. Prenditi conforto dal 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 quantità enorme di risorse personali per creare design meravigliosamente funzionali.