Ogni settimana diamo un'occhiata a un nuovo sito Web e analizziamo il design. Indicheremo sia le aree che sono fatte bene che quelle che potrebbero utilizzare del lavoro. Finalmente, finiremo chiedendoti di fornire il tuo feedback.
Il sito di oggi è Okay Geek, un blog tech deliziosamente geek che abbiamo visto prima su Design Shack. Entriamo e vediamo cosa pensiamo del nuovo design!
Se desideri inviare il tuo sito web in una futura Critica del design, ci vogliono solo pochi minuti. Facciamo pagare $ 49 per criticare il tuo design - molto meno di quanto paghi per un consulente per dare un'occhiata al tuo sito! Puoi saperne di più qui.
A proposito di Okay Geek
? Okay Geek è un blog che scrive di cose che i nostri redattori trovano interessanti. Non soddisfiamo i nostri contenuti con nessuno tranne che con noi stessi. E anche se potrebbe sembrare un po 'strano, lo facciamo nella speranza di creare contenuti che esprimano veramente il nostro divertimento e consentano ai lettori di relazionarsi con noi e di cosa scriviamo.
Clienti di ritorno
Una breve nota self-serving laterale. Se ti stai chiedendo se valga la pena o meno un Design Shack Design Critique, non devi cercare oltre i nostri clienti di ritorno come Okay Geek. Diversi siti hanno non solo preso in considerazione il nostro consiglio, ma hanno implementato molte delle modifiche suggerite e sono tornati per un'altra critica. Se hai dei dubbi sul tuo design, inviaci un messaggio e organizza una critica oggi.
Ora sulla critica, ecco uno screenshot della home page di Okay Geek:
Prima impressione
Nella nostra precedente critica di Okay Geek, li abbiamo integrati per avere un sito molto pulito e nitido che evidenziava bene il contenuto pur rimanendo quasi privo di confusione. Sembra che i progettisti abbiano deciso di portare ancora più avanti questa idea riducendo al minimo il design e eliminando tutte le parti non necessarie. Il risultato è un'esperienza super snella che rende un'ottima esperienza di navigazione.
Raccomando i progettisti sul loro lavoro e penso davvero che abbiano fatto un ottimo lavoro qui. Come sempre, sono pieno di suggerimenti su come renderlo ancora migliore. Diamo un'occhiata più da vicino e vediamo cosa sono.
Navigazione
Uno dei miei maggiori problemi con la riprogettazione è l'area di navigazione. Strettamente dal punto di vista estetico, è fantastico. C'è un bel richiamo minimale che completa davvero bene il sito. Tuttavia, dal punto di vista dell'usabilità, non raggiunge un punteggio così alto. I vari collegamenti sono divisi in due sezioni differenti nell'intestazione:
La prima sezione è ben fatta e ha perfettamente senso: recensioni, editoriali, contatti, chi siamo. Il secondo però è una striscia di icone che controlla il contenuto della barra laterale in una sorta di metodo a schede. In realtà mi piace quello che stanno facendo qui e penso che abbiano davvero creato una sidebar versatile, ma ho alcuni problemi con le icone.
Di nuovo, anche se sembrano grandi, sono piuttosto vaghi. Ad esempio, la stella, che è un simbolo web universale per fare qualcosa di preferito, è in realtà un collegamento al? Main? sezione della barra laterale. Gli argomenti? la sezione è altrettanto confusa, essendo rappresentata da quattro quadrati (che ha senso solo dopo aver cliccato su di esso). I titoli appaiono al passaggio del mouse, ma fino ad allora, non hai davvero idea di cosa siano queste icone.
Cercando la tua strada
In un blog di tecnologia come questo che copre una gamma abbastanza ampia di argomenti, è importante che gli utenti siano in grado di trovare rapidamente la nicchia a cui sono interessati. Come test, se metti qualcuno di fronte a questo sito per la prima volta e dire, "Trova gli articoli di gioco"? probabilmente li porteranno indietro di dieci secondi per trovare gli argomenti? sezione, che poi li conduce al gioco.
Non sono abbastanza sicuro di come procedere, ma raccomanderei sicuramente di riflettere su come rendere più facile agli utenti il drill-down solo del contenuto che vorrebbero vedere. Onestamente, potrebbe essere semplice come rendere il testo visibile sotto le icone tutto il tempo.
Contenuto in primo piano
Come ogni buon sito di notizie, ci sono un paio di diverse posizioni di contenuti in primo piano che aiutano a evidenziare gli articoli oltre ciò che appare nel feed principale della home page. Questi sembrano davvero grandi e, proprio come la navigazione, appaiono sia in alto a sinistra che nella barra laterale a destra.
Ripetizione
Guardandoli, vedo uno dei miei strumenti di design preferiti al lavoro: la ripetizione. C'è una consistenza davvero bella ma semplice nell'etichettatura di ogni sezione. Tuttavia, questo è un perfetto esempio di come la ripetizione può essere una bestia difficile e potrebbe anche fuorviare l'utente. Si consideri il seguente grafico, che mostra tre intestazioni coerentemente progettate dalla pagina:
Ora, i primi due di questi servono come intestazioni di sezione. Si siedono sopra il contenuto e servono semplicemente come etichetta per ciò che è sotto di loro. Non sono collegamenti, solo aiutanti visivi. Questo ti fa pensare che questo sarà il caso di tutti gli oggetti simili che vedi nel sito. Tuttavia, il terzo ti lancia una palla curva.
Questa etichetta si trova sopra uno spazio vuoto, il che rende immediatamente confusionario su cosa si sta riferendo. Ricorda che le altre due intestazioni ci hanno già insegnato che questi non sono collegamenti, quindi siamo rimasti a concludere che? Altre cose fantastiche? deve ancora essere aggiunto. Tuttavia, si scopre che questa intestazione non è in realtà un'intestazione, ma un collegamento a una pagina diversa.
Ripetizione selettiva
La lezione di design semplice qui è che la ripetizione deve essere esercitata con attenzione. Assicurati che quando stai ripetendo uno stile o un elemento di design visivo gli elementi condividano uno scopo e una funzionalità comuni. Altrimenti, si imposta un archetipo atteso che si interrompe, riducendo quindi l'usabilità tramite ripetizione anziché migliorarla.
Vedo questo stesso problema che si presenta almeno in un altro punto del sito nel caso dell'icona a stella sopra menzionata. È usato nella barra laterale semplicemente per denotare il? Main? scheda e viene ripetuto nelle anteprime dei post per indicare che il post è? Contenuto esclusivo, in primo piano.? Ancora una volta, la ripetizione sta in realtà eliminando il significato dall'icona perché viene utilizzata per due scopi molto diversi.
Post e anteprime
Oltre alla ripetizione dell'icona che ho indicato sopra, mi piace molto il nuovo formato di anteprima del post. Le belle immagini grandi ti attirano e tutte le informazioni sul post di cui hai bisogno sono chiaramente rappresentate in modo molto organizzato.
Ho anche notato che la vecchia vaga? Salva? pulsante è stato modificato in un? Salva su Instapaper? pulsante per mio suggerimento. Punti bonus per l'implementazione di alcune modifiche suggerite! Penso che ciò renda infinitamente più chiaro ciò che sta accadendo con questo pulsante.
Allo stesso modo, quando fai clic e segui un post specifico, vediamo altri esempi di lavori di design davvero interessanti. La fine di un post è dove la gente colloca tradizionalmente molti contenuti come la condivisione, articoli simili e commenti. Questa zona può diventare rapidamente un disordine ingombrante ma mi piace come è stato gestito qui. Le tre diverse sezioni sono chiaramente distinte ma visivamente simili e si adattano perfettamente al tema generale del sito.
Sai che un designer è bravo quando trascorre molto tempo a sistemare le piccole cose e penso che questa sezione sia un chiaro esempio di quanto i progettisti stiano lavorando a questo progetto.
Riguardo a noi
La sezione finale che penso presta attenzione è la pagina Chi siamo. Quando la pagina è stata caricata per la prima volta, sono rimasto sbalordito da quanto fosse attraente. Questo è davvero un bel design che differisce notevolmente dal resto del sito pur restando al 100% sul marchio.
Conclusione
I ragazzi di Okay Geek mi hanno davvero incoraggiato ad avere una buona occhiata in giro per il sito e dare loro entrambi i barili quando ho notato qualcosa che necessitava di indirizzamento. Ciò indica una chiara volontà di rendere il sito buono come potrebbe essere per gli utenti.
Prendere delle critiche è uno dei compiti più difficili che dovrai affrontare come designer. Ci immergiamo nei nostri progetti così tanto che una critica sembra un attacco personale. Quando possiamo uscire da questa risposta emotiva e valutare il feedback in modo logico, diventiamo migliori designer e i nostri progetti migliorano esponenzialmente.
Come ho ripetutamente affermato durante la critica, questo sito è stupendo da un punto di vista puramente visivo. Le aree che ho suggerito di migliorare sono tutte strettamente correlate all'usabilità e al miglioramento dell'esperienza utente. Queste sono le cose che è facile trascurare quando abbiamo fissato un progetto troppo a lungo. Sono sicuro che il team prenderà in considerazione e affronterà molti di questi problemi e continuerà a rendere Okay Geek un posto davvero fantastico per conoscere gli ultimi sviluppi nel mondo della tecnologia.
Il tuo turno!
Ora che hai letto i miei commenti, inseriscici e dacci una mano dando al designer qualche ulteriore consiglio. Facci sapere cosa pensi sia importante per il design e cosa pensi possa essere più forte. Come sempre, ti chiediamo anche di essere rispettoso nei confronti del designer del sito e di offrire una consulenza chiara e costruttiva priva di insulti ostili.