La riprogettazione di Happy Cog di VisitPhilly.Com:
Un sito web esemplare moderno
A gennaio, Jason Santa Maria ha inviato a Tweet annunciandolo visitphilly.com era stato ridisegnato dallo studio di design di fama mondiale Happy Cog . Il mio interesse è stato commosso e non ho potuto fare a meno di dare un'occhiata.
Posso onestamente dire che non sono mai stato più impressionato da una riprogettazione del sito web rispetto a quella con questo.
Quel Happy Cog è stato in grado di trasformare un sito così grande in un'esperienza utente bella, accessibile, funzionale e invitante che testimonia il talento del team di Happy Cog.
In nessun modo sono in grado di offrire una critica che renda giustizia alla pianificazione, alla progettazione e allo sviluppo che devono aver fatto parte di questo progetto.
Ma ho pensato che sarebbe stato utile sottolineare perché questa riprogettazione incarna un sito web bello ed efficace per il mercato di oggi.
Un chiaro scopo
Il nome di dominio, il logo accattivante, i menu a discesa chiari, la bella fotografia: tutto questo e molto altro giocano un ruolo chiave nel comunicare lo scopo specifico del sito (incoraggiare gli utenti a visitare la città di Filadelfia) e invitare gli utenti a esplorare via il sito web che è (piuttosto sorprendentemente) una bella città americana.
I primi elementi di navigazione che l'utente nota sono mega menu a discesa e i collegamenti di testo di grandi dimensioni che si sovrappongono all'immagine rotante principale.
Lo screenshot in basso evidenzia questi collegamenti, ovvero "Cose da fare" (che è mostrato attivo), "Organizza il viaggio", "Philly Now" e l'immagine sovrapposta "Power Lunch".
Questi oggetti erano ovviamente pensati per essere notati immediatamente. Nell'immagine in basso, ho mappato il percorso dell'occhio più probabile di un utente che esegue la scansione della pagina iniziale.
Dopo aver notato (e possibilmente esplorato) uno o più dei menu a discesa, l'utente dovrebbe eseguire la scansione del testo relativo all'immagine attiva, quindi spostarsi in modo naturale verso la sezione "Novità", tornando quasi al punto di partenza per l'intestazione vicino alla casella di ricerca.
Il contenuto è organizzato in modo che l'utente possa compiere un trekking informativo e visivamente memorabile attraverso le sezioni più importanti della pagina in pochi secondi.
L'utente non sarebbe probabilmente in ritardo, confuso o sopraffatto, nonostante la disponibilità di tanti contenuti da esplorare.
Un minimo di collegamenti primari
Come accennato, una delle aree più importanti è il menu a discesa. La decisione di attenersi a un numero minimo di link primari qui è quella giusta.
Avere solo tre collegamenti consente di visualizzare gli elementi in un font più grande, mantenendo così l'attenzione dell'utente e dimostrando la struttura mirata del sito.
La barra di navigazione minima è uno dei principali cambiamenti nella riprogettazione e offre grandi vantaggi. Confrontalo con la sezione intestazione del vecchio design, che non è così focalizzato:
Sebbene la vecchia intestazione non sia mal progettata o inutilizzabile, non è così mirata e non altrettanto bella come quella nuova. Un altro punto debole è la mancanza di indicatori del menu a discesa, che sul nuovo sito Web sono chiari e attraenti.
Quando un utente arriva in un sito come questo (spesso attraverso una ricerca su Google), molto spesso vorranno fare una di queste due cose: vedere cosa la città di Philadelphia ha da offrire o pianificare il proprio viaggio.
La navigazione ridotta nell'intestazione aiuta l'utente a raggiungere questi obiettivi in modo rapido ed efficiente.
Bellissima tipografia
Ci aspetteremmo qualcosa di meno da Happy Cog? Adoro il carattere utilizzato per il logo "Philadelphia and the Countryside".
Ha un aspetto sottilmente occidentale ma è comunque moderno e dignitoso. Per mantenere il marchio coerente, il carattere viene riutilizzato per molte intestazioni in tutto il sito web, alcune delle quali sono evidenziate nello screenshot sottostante.
La maggior parte del testo sul resto del sito Web è in carattere Georgia, con l'uso occasionale di Arial, ma fatto in modo abbastanza elegante. Il variegato mix di titoli del sito, copia del corpo, didascalie e altri elementi descrittivi è estremamente leggibile e presentato con gusto.
Nonostante la quantità di contenuti, anche nelle pagine interne, l'utente raramente, se mai si sente sopraffatto, a differenza dell'esperienza sul vecchio sito web .
Aumento delle prestazioni e velocità percepita
Un sito Web con così tanti contenuti e così tante immagini inevitabilmente ha un successo nelle prestazioni. Gli sviluppatori ne erano consapevoli e hanno fatto molta attenzione a garantire che qualsiasi contenuto a caricamento ritardato non potesse distogliere l'attenzione o indurre i visitatori a rinunciare e cercare di un'altra città della Pennsylvania .
Come mostrato di seguito, quando l'utente visita la home page, l'ultimo elemento da caricare è uno degli elementi più importanti nel nuovo layout: l'immagine rotante principale. Ma la lentezza effettiva viene mitigata dall'indicatore di caricamento del contenuto (il grafico animato che gira):
Questo miglioramento dell'usabilità non è limitato alle immagini di grandi dimensioni. A causa della diversità del contenuto nei menu a discesa, viene visualizzato un grafico simile al caricamento del contenuto mentre il contenuto del menu viene caricato tramite Ajax:
Per questo menu, il miglioramento è fondamentale, poiché i menu a discesa non vengono normalmente ritardati quando vengono attivati.
Nessun indicatore di caricamento avrebbe causato confusione, probabilmente facendo allontanare il mouse dell'utente e poi spostando il mouse indietro, chiedendosi perché la funzionalità è bloccata.
Quindi, anche se la pagina non viene caricata più velocemente, la velocità percepita viene aumentata. Questa è una lezione per tutti i progettisti e gli sviluppatori per pensare non solo alla velocità effettiva ma anche alla velocità percepita.
Funzioni orientate all'utente
Una delle caratteristiche più importanti del nuovo sito Web è il modo in cui è stata effettuata la transizione verso il nuovo design, che garantisce che i visitatori di ritorno non siano scioccati dai cambiamenti drastici.
Quando visiti per la prima volta il sito web, noti un grande banner rosso nella parte superiore della pagina, per informarti che il sito Web è stato ridisegnato ed è ancora in fase beta. Ti viene data la possibilità di navigare sul sito web usando la vecchia interfaccia.
Dare ai visitatori che sono abituati al vecchio layout e strutturare l'opzione per tornare ad esso è fondamentale, perché garantisce che non si sentano frustrati nel cercare di trovare contenuti familiari.
Su un sito così grande, specialmente uno riprogettato da un'azienda nota per i suoi progetti incentrati sull'utente, tali grandi cambiamenti architettonici e miglioramenti sono destinati a scacciare visitatori abituati al vecchio stile.
Il messaggio nel banner rosso, quindi, impedisce qualsiasi confusione o frustrazione da parte dei visitatori.
Non ho trascorso molto tempo a confrontare il vecchio sito web con quello nuovo, quindi non posso confermare quanto siano simili i contenuti e le architetture, ma poiché ci viene data la possibilità di visitare il vecchio sito Web, i contenuti devono essere simili abbastanza se siamo in grado di accedere agli eventi attuali e ad altri elementi regolarmente aggiornati in entrambe le versioni.
Un elemento comune è il collegamento che appare sopra la casella di ricerca, che sollecita il feedback sul nuovo design invitando gli utenti a compilare un "sondaggio beta". Questa funzione mostra che i proprietari sono preoccupati di come gli utenti sperimentano e percepiscono il sito web.
Contenuti completamente accessibili
Molti membri del team di Happy Cog sono ben noti online per la loro difesa degli standard Web e dei contenuti accessibili, quindi non sorprende che questo sito Web sia completamente accessibile a qualsiasi utente su qualsiasi piattaforma.
Con JavaScript disattivato, l'esperienza dell'utente sul sito Web è molto simile, anche se molti miglioramenti non sono più disponibili.
Il CSS text-indent la proprietà viene utilizzata per sostituire il testo nelle intestazioni con immagini che mostrano il carattere personalizzato. Ciò garantisce che le pagine rimangano semantiche, ottimizzate per SEO e visibili a tutti gli utenti.
L'immagine sotto mostra un'intestazione su una pagina interna, a sinistra con lo stile disabilitato, a destra con l'abilitazione.
Possiamo vedere come le intestazioni sono migliorate dalle immagini senza perdere il loro valore semantico e senza che i progettisti ricorrono a metodi di sostituzione dei font inutilmente complessi.
Un'altra importante caratteristica di accessibilità è l'implementazione dei miglioramenti di JavaScript. La home page ha due commutatori di contenuto a schede, uno chiamato "Prenota online" e l'altro che si connette ai social network di visitphilly.com:
Quando JavaScript è disabilitato, viene visualizzato tutto il contenuto in entrambe le finestre a schede. Molti siti Web con widget a schede visualizzano solo una delle caselle quando JavaScript è disabilitato, ma generalmente non è la soluzione migliore.
Questa tecnica viene utilizzata in modo coerente in tutto il sito per una serie di funzionalità, assicurando che il livello comportamentale (cioè l'Ajax e JavaScript) sia un miglioramento, non una necessità.
Ciò rende il contenuto accessibile non solo agli utenti che navigano senza JavaScript ma agli spider dei motori di ricerca come Googlebot.
Qualche debolezza nel design?
Ancora una volta, non sono nella posizione di criticare in modo equo un progetto fatto da un'azienda come Happy Cog. Ma sottolineerò (con cautela) due piccoli punti deboli nel nuovo design e struttura.
Innanzitutto, trovo la formulazione del terzo link nel menu di navigazione principale un po 'vaga ("Philly Now").
Non sapevo subito cosa volesse dire. Avevo pensato che significasse eventi attuali, ma apparentemente è una combinazione di eventi, meteo e foto attuali. Sono ancora incerto su come descriverlo, e ho la sensazione che il link verrà raramente cliccato.
L'altro punto debole sono i triangoli rivolti a destra nel menu di navigazione secondario nelle pagine interne:
Supponevo che quei triangoli indicassero i menu a comparsa, ma non ci sono fly-out. I triangoli sono solo indicatori per attirare l'attenzione dell'utente sull'area del contenuto. I triangoli rivolti a destra sono meglio riservati per i link standalone e i menu a comparsa, non per la navigazione verticale come questa.
Troviamo la stessa cosa nella home page, ma non è così male perché le frecce fanno parte di un commutatore di contenuti guidato da JavaScript.
Nessuna di queste "debolezze" danneggia molto l'esperienza dell'utente. E il fatto che io riesca a trovare solo due punti deboli dimostra quanto sia davvero una riprogettazione.
Degno di esame e imitazione
Si potrebbe dire molto di più sull'efficacia del design e del codice di visitphilly.com, oltre lo scopo di questo articolo.
Oltre a ciò che abbiamo discusso qui, potrei indicare il codice valido e ben commentato, l'uso efficace dello spazio bianco, la gerarchia visiva, le eccellenti scelte di colore, l'esperienza praticamente identica in IE6 e altro ancora.
Spero che questa analisi dia una panoramica decente di alcune delle caratteristiche chiave di questo nuovo design e di come incarni il web design moderno nel settore.
Ulteriori letture
- Greater Philadelphia Tourism Marketing Corp. lancia visitphilly.com nuovissimo
- Happy Cog Studios Portfolio
- Rassegna di VisitPhilly di Happy Cog
Questo post è stato scritto esclusivamente per Webdesigner Depot da Louis Lazaris, scrittore freelance e sviluppatore web. Louis corre Web impressionanti dove pubblica articoli e tutorial sul web design. Puoi seguire Louis su Twitter o mettiti in contatto con lui attraverso il suo sito web .
Ti piace il nuovo visitphilly.com? Qualche altra caratteristica del design, del layout o dell'architettura migliora l'esperienza dell'utente? Si prega di offrire i tuoi commenti qui sotto.