Oggi confronteremo i siti web di due aziende monumentali: Apple e Microsoft .

I due giganti sono orgogliosi di produrre prodotti consumer e business all'avanguardia e stanno guidando gli sviluppi nel software e nell'hardware.

Ma per quanto riguarda i loro siti web ? Come si confrontano entrambi e, cosa più importante, quale è meglio e più utilizzabile ?

Bene, in questo articolo daremo un'occhiata a entrambi i siti Web per un esame più approfondito dal punto di vista dell'usabilità.

Una cosa importante da notare prima di procedere alla comparazione di questi due siti web è che l'attività di ciascuna azienda ruota attorno a mercati diversi .

Microsoft fa principalmente i suoi profitti da business to business, che consiste principalmente nella vendita di licenze al suo sistema operativo a produttori di computer e suite per ufficio per le imprese.

Questo non vuol dire che non vendono ai consumatori - lo fanno, e hanno anche solo linee di prodotto di consumo, come la console di gioco Xbox, e naturalmente anche gli utenti domestici acquistano Windows e Office. Ciò significa che la loro attività si rivolge praticamente a tutti, dai proprietari di computer domestici agli sviluppatori e alle imprese; che a sua volta estende lo scopo del loro sito Web per cercare di servire tutti .

D'altra parte, Apple è principalmente una società di consumo e fa la maggior parte del suo profitto vendendo hardware, come i suoi lettori di musica iPod e computer Mac. Ciò rende molto più chiaro l'obiettivo del sito di Apple: marketing, vendita e fornitura di supporto per i suoi prodotti ai consumatori.

Non devono preoccuparsi di vendere licenze ai produttori perché sono l'unico produttore, quindi lo scopo principale del sito Web è pubblicizzare e promuovere le loro molteplici linee di prodotti, oltre a venderli attraverso il loro negozio online.

1. Homepage

La homepage è una delle pagine più importanti di tutto il sito perché è la prima e in molti casi l'unica possibilità che si ottiene di impressionare il visitatore abbastanza da impedirne la navigazione . Hai qualche secondo per convincerli che il sito ha un valore sufficiente per continuare a usarlo, perché se così non fosse, i visitatori se ne andranno .

L'approccio di Apple alla homepage è stato costante nel corso degli anni in cui il sito è stato pubblicato. Usano questa pagina come una sorta di pannello pubblicitario che mostra sempre un grande annuncio del loro ultimo prodotto, seguito da altri 3 annunci per altri 3 prodotti o notizie che sono importanti al momento.

Se non sei interessato a nessuno dei 4 articoli suggeriti, puoi utilizzare la barra di navigazione di grandi dimensioni nella parte superiore, suddivisa nelle attività principali: Mac, iPod e iPhone, seguita da un paio di altri link importanti, ad esempio il negozio online e le pagine di supporto. La barra di navigazione include anche un campo di ricerca.

Homepage di Apple


La cosa interessante qui è che l'annuncio principale nella parte superiore è enorme - in effetti copre quasi l'intera pagina. Se questo non attira la tua attenzione allora niente lo farà. Apple conosce l'importanza di attirare l'attenzione del cliente con un buon marketing, quindi non ha paura di farlo davvero.

Un'altra cosa da notare è la mancanza di contenuti. Non sei distratto da barre laterali, avvisi o elementi di navigazione aggiuntivi: ci sono solo alcuni elementi sulla pagina, concentrando l'attenzione e rendendo più facile la scelta di dove andare .

Microsoft ha un approccio diverso alla loro homepage. In primo luogo, presentano uno stile simile di annuncio nella parte superiore, progettato per essere catturato con attenzione. Queste sono immagini di grandi dimensioni, ma viene mostrata solo una pubblicità su 3 alla volta: devi passare con il mouse sugli altri due per espanderli. Questo focalizza l'attenzione , ma potrebbe potenzialmente indebolire l'efficacia dei due annunci nascosti dal momento che il visitatore deve lavorare per vederli. Proprio nella parte superiore della pagina c'è la navigazione, insieme alla ricerca.

Homepage di Microsoft


Ciò che è al di sotto degli annunci principali è più interessante però. Come accennato in precedenza, le attività di Microsoft operano in molti mercati, inclusi business to business e business to consumer.

Lo spazio sottostante funge da insieme di punti salienti e notizie per queste diverse aree del business. Un grosso problema con il contenuto qui presentato è che è abbastanza noioso e travolgente , con molte informazioni racchiuse in uno spazio molto piccolo , senza che nessuno cerchi di renderlo analizzabile.

Certo, è suddiviso in punti elenco, ma il font è piccolo e non ci sono quasi immagini per differenziare gli articoli. Così com'è, c'è poco da attrarre me per farmi voler leggere questo contenuto perché è solo, beh ... noioso.

2. Flusso

Ciò che intendo per flusso è questo: il sito è strutturato e strutturato in modo tale da trovare facilmente gli elementi su cui concentrarsi? So cosa leggere dopo che mi sono concentrato su questi elementi: il design del sito mi indirizza attraverso la pagina con meno sforzi da parte mia, o devo lavorare per cercare di navigare tra i contenuti per trovare ciò di cui ho bisogno?

Ecco la sezione MobileMe su Apple.com:

Flusso di Apple


Penso che Apple abbia fatto un ottimo lavoro nella strutturazione di tutte le loro pagine. Qui, la prima cosa su cui ti concentri è probabilmente l'immagine a destra e poi il grande titolo a sinistra.

Dopo aver letto il titolo, puoi continuare a leggere la descrizione del marketing qui sotto, che porta benissimo in un pulsante di registrazione all'azione per la prova gratuita. Se non sei interessato alla versione di prova, ci sono altre funzioni qui sotto per convincerti, ognuna che termina con un link "Ulteriori informazioni" su una pagina delle funzionalità più dettagliata. Questo non lascia nessun vicolo cieco e mantiene la navigazione dell'utente .

Microsoft sembra incostante in questo reparto. Ecco la sezione di SharePoint:

Flusso di Microsoft


Sì, c'è un punto focale in alto che attira la tua attenzione - la grande citazione e l'immagine di un server - ma quale sarà il prossimo?

Tutti i contenuti di seguito sono estremamente monotoni, in particolare la casella "Ulteriori informazioni" con un elenco di 8 collegamenti. La presentazione a secco offre all'utente un minore incentivo a fare clic in giro . Alcuni siti Microsoft utilizzano un layout migliore per indirizzare il flusso di attenzione, ma in genere tutti soffrono della stessa malattia: troppo contenuto.

Quando presenti all'utente troppe scelte, le fai funzionare - devono pensare a ciò che vogliono e devono elaborare più informazioni. Riducendo la scelta, Apple indirizza gli utenti attraverso una canalizzazione più attentamente progettata, che generalmente offre un'esperienza migliore.

3. Navigazione

Il sito Web di Apple ha una grande barra di navigazione in alto, che rimane costantemente in qualsiasi sezione del sito.

Le opzioni disponibili mostrano le sezioni principali divise per le sue linee di business e un paio di elementi essenziali, come il supporto e il negozio. La barra integra anche ricerca e branding in quanto il pulsante home visualizza il logo Apple anziché un'etichetta.

Qualsiasi ulteriore sotto-navigazione si trova su singole pagine del sito e viene inserita nel contesto di quella pagina, sia su una barra laterale, sia come una barra orizzontale nella parte superiore.

Navigazione di Apple

Microsoft ha una barra di navigazione simile nella home page, ma quella barra di navigazione non è coerente in tutto il sito. In realtà, tutte le pagine secondarie tendono a utilizzare la propria barra di navigazione , in stile e contenuto. La navigazione della home page funge quindi da mappa del sito per il resto delle sezioni del sito Web di Microsoft.

In molte barre di navigazione, inclusa quella sulla home page, Microsoft utilizza i menu a discesa, a differenza di Apple. Non usano solo menu a discesa, utilizzano enormi menu a discesa . In alcuni casi, il menu ha anche una barra di scorrimento (in Firefox):

Navigazione Microsoft


Questo è buono o cattivo? In un voce Alertbox recente Jakob Nielsen, un noto guru dell'usabilità, ha scritto che i menu a discesa mega possono funzionare.

Funzionano perché presentano molte scelte in gruppi , quindi consentono una scansione più semplice, poiché puoi saltare al gruppo che desideri e scansionare gli elementi al loro interno. Devi ottenere certe cose, però, come l' ordine dei gruppi e solo menzionare ogni elemento una volta , perché funzionino bene.

In questo caso, penso che sia utile che Microsoft segua il percorso dei menu a discesa, ma ritengo che potrebbero essere andati un po 'troppo oltre. Ad esempio, alcune opzioni indicano la stessa cosa, come l'opzione "Ufficio" a discesa e "Ufficio" nel menu a discesa "Tutti i prodotti".

Il menu a discesa blocca anche il contenuto di seguito , quindi se accidentalmente si passa il mouse sul menu, è necessario spostarsi nuovamente da esso per accedere al contenuto sottostante, facendo attenzione a non passare il mouse sopra altri elementi.

Ci sono anche molte opzioni sotto ciascun gruppo - a volte mostrano circa 13 elementi, il che rende l'elaborazione delle opzioni molto più difficile. Inoltre, l' inconsistenza della navigazione tra le diverse sezioni rende molto più difficile il passaggio da un'area del sito a un'altra, ad esempio dal sito Office al sito Xbox.

4. Leggibilità

Poiché la maggior parte dei contenuti dei siti è di testo, è fondamentale garantire che tutto sia leggibile e leggibile. Ecco le principali cose da considerare quando si lavora sulla leggibilità del contenuto del tuo sito:

  • Rendi il testo abbastanza grande in modo che sia facile da vedere e leggere.
  • Assicurati che ci sia abbastanza contrasto tra il testo e lo sfondo.
  • Fornire uno spazio bianco sufficiente attorno al testo per evitare che altri contenuti e grafici distraggano il lettore.
  • Fornisci molte intestazioni o testo evidenziato / in grassetto per consentire agli utenti di eseguire rapidamente la scansione del contenuto per ottenere informazioni chiave.
  • Aggiungi immagini e icone per rendere più semplice la messa a fuoco su singole sezioni del testo, ovvero descrizioni di prodotti o funzioni.
  • Mantieni il testo breve e preciso.

Vediamo come fanno Microsoft e Apple in quest'area. Ecco una pagina tipica sul sito Web Apple.com:

Testo di Apple


Apple fa un ottimo lavoro mantenendo tutto facile da leggere. Il testo è generalmente piccolo, ma mai troppo piccolo per essere un problema. Le intestazioni sono impostate in un tipo più pesante e si distinguono , consentendo di ottenere rapidamente il succo di ogni sezione.

Apple fa anche un uso pesante dello spazio bianco per separare tutto e aggiunge immagini per rendere ogni testo più interessante .

Ecco una pagina tipica di Microsoft.com dalla sezione Windows:

Testo di Microsoft


Segue le linee guida generali di usabilità suddividendo le cose in piccole parti di testo di dimensioni contenute che sono facili da digerire. Sembra molto più impegnato rispetto al sito Apple perché c'è più contenuto in una pagina e ci sono molti trattamenti diversi per intestazioni e parole evidenziate.

Troppa varietà causa il caos visivo sulla pagina , con ogni oggetto colorato o in grassetto in competizione per la tua attenzione. In questo caso, la pagina deve essere semplificata per semplificare l'elaborazione da parte del visualizzatore.

Ecco un'altra pagina, questa volta dalla sezione di sicurezza Microsoft:

Testo di Microsoft


Il testo in questa pagina è probabilmente un po ' troppo piccolo per essere comodo da leggere e il sito richiede più spazio bianco attorno al contenuto per separare il testo. Vediamo che aspetto ha una pagina veramente impegnativa sul sito Apple:

Testo di Apple

Questo è il negozio Apple. Davvero impegnato con molti prodotti e collegamenti di categoria ovunque. I caratteri diventano piuttosto piccoli per consentire l'inserimento di più contenuti, sebbene un buon uso dello spazio bianco assicuri che le cose siano ancora utilizzabili .

5. Cerca

La ricerca di Apple è integrata nella barra di navigazione. Quando digiti qualcosa nella casella di ricerca ottieni effettivamente risultati di ricerca in tempo reale con AJAX , tramite una piccola finestra che si apre, mostrando i risultati durante la digitazione.

È molto ben fatto - non ci sono ritardi durante la digitazione, i risultati sono raggruppati in categorie e vengono recuperati molto rapidamente, di solito prima di aver finito di digitare la tua query completa. Ecco come appare:

Ricerca di Apple

Se vuoi vedere più risultati, premi Invio quando hai finito di digitare e sarai indirizzato alla pagina dei risultati di ricerca standard. È molto pulito e organizzato per categorie.

Puoi trivellare i risultati più in basso per categoria , selezionabili dal menu a destra. È funzionale e pulito e funziona bene quando cerchi di trovare prodotti che vendono.

Ricerca di Apple


Microsoft ha una pagina dei risultati di ricerca più familiare che assomiglia molto a Google (o qualsiasi altro motore di ricerca in questi giorni).

Questo perché utilizza il motore di ricerca Live di Microsoft. È certamente buono a trovare quello che stai cercando e ha ottenuto i risultati che volevo. Il formato dei risultati è una grande lista , che ha senso per Microsoft a causa della natura della loro attività, con un sacco di sottopagine e diversi contenuti da cercare.

È funzionale, ma l'aspetto è diverso dalle altre pagine, il che fa sembrare che stai navigando in un sito Web diverso.

Ricerca Microsoft

6. Estetica

L'estetica del sito web di Apple rispecchia da vicino quella della sua linea di prodotti . La barra di navigazione sembra fatta di alluminio e presenta sfumature delicate e testo rientrato.

Ci sono anche molte riflessioni e elementi di design minimalista. Apple ha sempre lavorato per unificare l'aspetto della sua interfaccia su tutta la sua linea di prodotti , dall'hardware al software, e il loro sito Web non fa eccezione.

Estetica Apple


L'estetica ha qualcosa a che fare con l'usabilità? In realtà, lo fanno. La ricerca mostra che le persone percepiscono interfacce dall'aspetto migliore come più utilizzabili .

Interfacce attrattive miglioreranno le prime impressioni e potrebbero persino rendere i loro utenti più tollerabili ai problemi. Quindi, come fa la roba di Microsoft nel reparto di estetica? Ecco la pagina di Internet Explorer 8:

Estetica di Microsoft


Il sito segue un debole tema di Windows con le nuvole blu chiaro, ma c'è poco altro da dire che questa è una pagina per Internet Explorer o Windows.

L' aspetto è molto generico e non fa abbastanza per differenziarsi o costruire un marchio coerente . Ecco un'altra pagina; questo è il Centro download:

Estetica di Microsoft


Ancora una volta, abbiamo un design completamente diverso, anche se il colore azzurro viene usato anche qui per gli sfondi. Se non c'era alcun titolo sulla pagina, potresti dire che questa è una pagina Microsoft o Windows? Probabilmente no.

I disegni sono nel complesso abbastanza buoni, ma non è abbastanza buono . Ci sono un sacco di incongruenze e una mancanza di lucidità , che mette Apple avanti in questo settore.

7. Consistenza

La coerenza è importante perché consente di sviluppare modelli di utilizzo . Ciò significa che se il tuo sito ha un'interfaccia coerente in tutto, i tuoi visitatori impareranno rapidamente come funziona e saranno in grado di utilizzare questa conoscenza in qualsiasi delle nuove pagine che visitano, dal momento che useranno tutti gli stessi, o interfaccia molto simile

Apple fa un ottimo lavoro nel mantenere l'interfaccia coerente. Tutte le pagine dei prodotti presentano un'estetica molto simile e sono strutturate nello stesso modo.

L'intero sito ha un aspetto e una sensazione identica ovunque e la barra di navigazione globale in alto è sempre lì, su ogni pagina. Ciò significa che l'intera esperienza è molto unita e coerente: sai che sei sullo stesso sito web ovunque tu vada .

Ecco una pagina Microsoft per la piattaforma Azure:

Flusso di Microsoft


Potresti dire che questa è una pagina di Microsoft se hai tolto il loro logo? Grafica personalizzata, stili e tavolozze di colori su tutte le sezioni di Microsoft aiutano a mantenere un'immagine di marchio coerente sul web.

Microsoft fa davvero fatica qui. Ci sono molte sezioni diverse su Microsoft.com e tutte hanno il proprio aspetto grafico, inclusa la propria navigazione.

Quindi, una volta entrati in una sezione del loro sito, che si tratti dello store di Microsoft, del sito di Office o delle pagine di sicurezza, appariranno tutti come siti web separati.

Quel che è peggio, anche la barra di navigazione globale è sparita, il che significa che devi tornare alla homepage o alla mappa del sito per vedere una panoramica di tutti i loro siti. È davvero un ecosistema di siti web ospitati sotto lo stesso dominio e quindi non ottiene il vantaggio della coerenza di Apple. Anche l'immagine del marchio è terribilmente frammentata, rendendo impossibile definire come si presenta un sito Microsoft.

Conclusione

Quale sito è il vincitore? Se stai guardando l'usabilità da sola, Apple esce in vantaggio . Hanno una homepage progettata meglio che offre meno scelta, il che significa che l'utente ha bisogno di pensare di meno.

Hanno una navigazione coerente su tutte le loro pagine. Usano molto spazio bianco e sottotitoli per rendere tutto più leggibile, ma mantengono le cose semplici non esagerando con troppi trattamenti di testo.

Il sito Apple è generalmente più user friendly e offre un'esperienza molto migliore ai consumatori che lo utilizzano per controllare gli ultimi prodotti Apple.

Detto questo, il sito Web di Apple è molto più piccolo rispetto al sito di Microsoft. A differenza di Apple, Microsoft ospita molti siti e sezioni diversi sotto il marchio Microsoft.com, creando un intero ecosistema di siti secondari. Ogni sito è pieno di informazioni e la ricerca di Live powered che Microsoft offre tende a dare buoni risultati. Il problema più grande per Microsoft è la coerenza .

Microsoft non ha un marchio coerente, coerente e unificato. Ogni sezione sembra diversa. Non esiste una navigazione globale e non ci sono molti indizi visivi che dicono all'utente che si tratta di un sito Microsoft, diversamente da Apple, dove l'intero sito condivide un'estetica unica che rispecchia quella del proprio hardware e software, creando così un marchio potente.

Per questi motivi, penso che Apple sia il chiaro vincitore qui.


Scritto esclusivamente per WDD da Dmitry Fadeyev. Gestisce un blog sull'usabilità chiamato Post di usabilità .

Cosa ne pensi? Abbiamo capito bene? Ci piacerebbe leggere i tuoi pensieri e commenti, quindi vai avanti e lasciaci un commento qui sotto ...