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.
La critica di oggi è Abdominals at Work, un sito Web per le applicazioni iPhone.
Se desideri inviare il tuo sito web in una futura Critica del design, ci vogliono solo pochi minuti. Facciamo pagare $ 34 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.
Informazioni sull'app Abdominals at Work
? Metodo passivo di contrazioni isometriche. Se passi molto tempo davanti al computer o al televisore, puoi utilizzare questo metodo per lavorare i muscoli addominali mentre svolgi altre attività. Tu scegli il tempo e il luogo, e l'applicazione ti insegnerà come fare l'esercizio, segnando il tuo ritmo e l'intensità con vibrazioni o melodia in modo discreto.
Ecco uno screenshot della homepage:
Prima impressione
Le mie riflessioni iniziali su questa pagina sono state abbastanza positive. Mi piace l'aspetto generale del sito e il modo in cui rispecchia fedelmente quello dell'app. Una scena a cielo nuvoloso sicuramente non mi suggerisce l'esercizio ma l'app è un po 'come esercitarsi in modo rilassante, quindi suppongo che tutto si sposti bene.
I colori e la grafica sono abbastanza amichevoli e creano un ambiente accogliente. Il mio aspetto preferito è la semplicità con cui è stato mantenuto il contenuto generale: solo un iPhone con alcuni screenshot, una breve descrizione, alcuni modi per condividere e un link prominente al negozio iTunes dove puoi trovare di più e scaricare l'app. È abbastanza per farti interessare senza opprimerti.
Anche se mi piace la direzione generale dell'app, come sempre, ho molti suggerimenti per migliorare. Analizziamo alcune aree specifiche per vedere quali cambiamenti positivi potrebbero essere fatti.
Suono
Chiunque abbia mai presentato una richiesta per una Critica di design per un sito che contiene suoni riceve lo stesso consiglio. Preferisco sempre che gli sviluppatori del sito offrano ai visitatori la possibilità di aggiungere inizialmente il suono piuttosto che portarlo via. La navigazione sul Web è un'esperienza tipicamente tranquilla e i rumori forti improvvisi non renderanno i tuoi visitatori tutt'altro che arrabbiati.
Questo sito certamente fa molto meglio della maggior parte in quest'area. Anche se il suono inizia automaticamente, è almeno un tema oceano abbastanza sereno e rilassante con uccelli e onde. È inoltre possibile disattivare l'audio facendo clic sul cinguettio dell'uccello vicino alla parte inferiore della pagina.
Ho diverse considerazioni su questo. Per prima cosa, ho dovuto scorrere per trovarlo (anche se sono ammesso su un piccolo schermo del MacBook). Se qualcuno visita il tuo sito al lavoro, in una biblioteca o in qualsiasi altro luogo pubblico, non vuoi che si debbano scomporre mentre cercano imbarazzantemente di trovare un modo per disattivarlo. Si potrebbe pensare che l'utente avrebbe appena premuto il pulsante muto, ma più spesso probabilmente chiuderanno la finestra il più velocemente possibile.
Inoltre, posso sicuramente vedere come l'uccello con le note musicali che escono da esso suggerisce un controllo del suono, ma ha una sfortunata somiglianza con un link di Twitter su Twitter come ora vediamo su quasi tutti i siti del web. Questo rende non immediatamente evidente che l'uccello è il controllo del suono perché non c'è testo per rafforzare il messaggio.
Il semplice consiglio qui è, se hai intenzione di attaccare con audio auto-play, metti il controllo nella parte superiore della pagina e rendi più chiaro ciò che fa. Suggerisco una grafica di gabbiano (l'uccello di Twitter non corrisponde al tema dell'oceano) e un? Suono on / off? messaggio vicino all'uccello. Inoltre, ferma l'animazione della nota musicale quando il sito è disattivato e inizia quando l'audio è attivo anziché continuare per tutto il tempo.
Animazione
Oltre al suono, la pagina ha diverse nuvole fluttuanti che passano davanti e dietro il contenuto. Ciò aggiunge un po 'di divertimento alla pagina ed è certamente più interessante della grafica statica.
Per la maggior parte, le nuvole non ostacolano l'usabilità, ma interferiscono occasionalmente con la leggibilità del testo. Inoltre, come con qualsiasi animazione in loop, possono diventare un po 'monotoni se si spende tutto il tempo che ho visto sul sito! Una solida idea che abbiamo visto nella nostra ToonyTuts Critica era un semplice sistema di controllo a due icone per fermare la musica e / o le nuvole animate. Il tema del sito era molto simile al sito di oggi, quindi penso che un controllo simile funzionerebbe perfettamente qui.
Messaggi e testo
Penso che il sito faccia un buon lavoro nel chiarire che stiamo discutendo di esercizi addominali. Tuttavia, potrebbe essere un po 'sul lato tecnico per una pagina così divertente. Considerare il titolo principale: metodo passivo di contrazione isometrica. È bello e alto, ma in realtà non ha un suono amichevole che lo fa?
Non devi abbandonare questo messaggio, ma forse potresti considerare di inserirlo nel paragrafo a favore di un titolo più interessante come "Costruisci un pacchetto di sei mentre guardi la tv !? Questo non è affatto il miglior esempio, ma è al centro del mio suggerimento. Un titolo come questo ti attira e ti fa venir voglia di imparare di più piuttosto che scoraggiarti perché ti senti stupido e non hai a portata di mano il tuo lessico.
Forse il problema più grande che ho con l'intera pagina è il testo giallo su sfondo blu. Questi due colori si scontrano molto sul piccolo testo e rendono questa informazione molto difficile da leggere.
Il problema è il classico conflitto contro complemento nella teoria dei colori. Quando due colori semplicemente non sono abbastanza diversi tendono a entrare in conflitto l'uno con l'altro, specialmente quando uno è posto sopra l'altro.Considera l'esempio seguente e quanto più leggibile è il testo giallo più leggero e meno saturo rispetto alla versione precedente.
Ora, mi rendo conto che questi sono in realtà i colori della tua app quindi non è logico cambiarli sul sito. Il mio suggerimento è quindi di cancellare semplicemente l'enfasi gialla sul testo e utilizzare qualcos'altro, testo in grassetto, una sottolineatura, ecc., Che non interferisca con la leggibilità.
i phone
L'immagine dell'iPhone con la presentazione è estremamente popolare per i siti web delle app per iPhone e per una buona ragione. Rende immediatamente chiaro di cosa tratta il sito. Tuttavia, penso che questo potrebbe essere raffinato un po '.
Per i principianti, i puntini che fungono da navigazione per la presentazione hanno un cerchio di caricamento rotante accanto a loro. Questa piccola animazione non si ferma mai, quindi quale scopo serve? Quando lo vedo girare, questo suggerisce che la pagina non è stata caricata (ci è stato insegnato che questo è ciò che significa questo grafico) e quando mai termina il caricamento, sembra che il tuo sito sia danneggiato. In conclusione, questo grafico è fonte di distrazione, confusione e non ha alcuno scopo pratico, rimuoverlo.
Inoltre, come una piccola seccatura, la Apple geek in me non può fare a meno di notare che l'immagine di iPhone non è aggiornata. L'iPhone 5 è ormai alle porte e questo sito non ha ancora una grafica di iPhone 4 ancora. Lo so, è ridicolo dover continuare su questo, ma dal momento che il sito è in realtà per un'app per iPhone, questo può essere importante. Le immagini obsolete rendono l'app stessa vecchia e obsoleta, il che mi fa riflettere due volte prima di acquistarla!
Navigazione
Un ultimo pensiero sul sito è che la navigazione sembra davvero un ripensamento. Contiene collegamenti che cambiano il contenuto testuale della pagina con informazioni rilevanti per i visitatori, ma per qualche motivo è minuscolo e nascosto nel footer.
Se questo fosse davvero qualcosa di minore, non mi dispiacerebbe, ma in realtà sembra più importante di quanto il designer gli abbia dato credito. La soluzione semplice è lanciarla nella posizione tipica nella parte superiore della pagina e ingrandire leggermente il testo.
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.