Varje vecka tittar vi på en ny webbplats och analyserar designen. Vi pekar på båda områdena som görs bra förutom de som kan använda lite arbete. Slutligen avslutar vi genom att be dig att ge din egen feedback.
Dagens kritik är Abdominals at Work, en iPhone-applikationswebbplats.
Om du vill skicka din webbplats till en framtida designkritik tar det bara några minuter. Vi tar ut $ 34 för att kritisera din design - betydligt mindre än du skulle betala för en konsult för att kolla på din webbplats! Du kan läsa mer här.
Om Abdominals at Work App
Passiv metod för isometriska sammandragningar. Om du spenderar mycket tid framför en dator eller tv, kan du använda den här metoden för att arbeta i magmusklerna medan du utför andra uppgifter. Du väljer tid och plats, och programmet kommer att lära dig hur man gör övningen, markerar din rytm och intensiteten genom vibration eller melodi på ett diskret sätt.?
Här är en skärmdump av hemsidan:
Första intrycket
Mina initiala tankar på denna sida var ganska positiva. Jag tycker om webbplatsens övergripande utseende och hur det speglar det i närheten av appen. En molnig himmelscenario föreslår definitivt inte motion för mig, men appen är typ av att träna på avkopplande sätt så jag antar att allt binder samman bra.
Färgerna och grafiken är ganska vänliga och skapar en välkomnande miljö. Min favorit aspekt är hur enkelt det övergripande innehållet hölls: bara en iPhone med några skärmdumpar, en kort beskrivning, några sätt att dela och en framträdande länk till iTunes Store där du kan läsa mer och ladda ner appen. Det är bara nog för att få dig intresserad utan att överväldiga dig.
Även om jag tycker om appens allmänna riktning, har jag som alltid många förslag till förbättring. Låt oss bryta ner vissa specifika områden för att se vilka positiva förändringar som kan göras.
Ljud
Alla som någonsin har skickat en begäran till oss för en designkritik för en webbplats som innehåller ljud får samma råd. Jag föredrar alltid att webbplatsutvecklare ger besökare möjlighet att lägga till ljud i början snarare än att ta bort det. Webbläsning är en typiskt tyst upplevelse och plötsliga höga ljud kommer inte att göra dina besökare något annat än arg.
Den här webbplatsen gör visserligen mycket bättre än de flesta på detta område. Även om ljudet börjar automatiskt är det åtminstone ett ganska fridfullt och avslappnande havstema med fåglar och vågor. Du kan också stänga av ljudet genom att klicka på den chirping bird-bilden längst ner på sidan.
Jag har flera tankar om detta. Först var jag tvungen att bläddra för att hitta den (även om det är visst på en liten MacBook-skärm). Om någon besöker din webbplats på jobbet, ett bibliotek eller något annat offentligt ställe, vill du inte att de måste krympa eftersom de genera försöker hitta sätt att stänga av det. Du skulle tro att användaren bara skulle slå sin mute-knapp, men oftare kommer de förmodligen bara att stänga fönstret så fort som möjligt.
Vidare kan jag definitivt se hur fågeln med musikanteckningar kommer ut ur den tyder på en ljudkontroll, men det har en olycklig likhet med en Twitter-fågellänk som vi nu ser på nästan alla webbplatser på webben. Detta gör det inte omedelbart uppenbart att fågeln är ljudkontrollen eftersom det inte finns någon text för att förstärka meddelandet.
Den enkla rådgivningen här är, om du kommer att hålla fast vid automatiskt ljud, lägg kontrollen nära toppen av sidan och gör det tydligare vad det gör. Jag föreslår en måsgrafik (Twitter-fågeln överensstämmer inte med havet temat) och ett? Ljud på / av? budskap nära fågeln. Stäng också anteckningsanimationen när webbplatsen är avstängd och starta när ljudet är på istället för att bara fortsätta hela tiden.
Animering
Förutom ljudet har sidan flera flytande moln som går förbi både framför och bakom innehållet. Detta lägger till lite kul på sidan och är visserligen mer intressant än statisk grafik.
För det mesta hindrar molnen inte användbarhet, men ibland stör de textens läsbarhet. Också, som med någon looped animation, kan de bli lite monotont om du spenderar så mycket tid som jag stirrar på webbplatsen! En solid idé som vi såg på vår ToonyTuts Critique var ett enkelt två-ikons kontrollsystem för att stoppa musiken och / eller de animerade molnen. Webbplatsens tema var mycket lik dagens hemsida så jag tror att en liknande kontroll skulle fungera perfekt här.
Meddelanden och text
Jag tycker att webbplatsen gör ett bra jobb för att göra det mycket tydligt att vi diskuterar bukövningar. Det kan dock vara lite på den tekniska sidan för en så kul sida. Tänk på huvudrubriken? Passiv metod för isometrisk kontraktion.? Det är trevligt och högt, men det har inte riktigt en vänlig ring till det gör det?
Du behöver inte dike det här meddelandet, men kanske överväga att integrera det i stycket till förmån för en mer intressant rubrik som? Bygg en sex pack medan du tittar på tv !? Det här är inte det bästa exemplet men det blir kärnan i mitt förslag. En rubrik som den här drar dig in och gör att du vill lära dig mer än att stänga av dig eftersom du känner dig dum och inte har din tesaurus handy.
Kanske är det största problemet jag har med hela sidan den gula texten på den blå bakgrunden. Dessa två färger kolliderar stor tid på den lilla texten och gör denna information väldigt svår att läsa.
Problemet är den klassiska konflikten vs komplementet i färgteori. När två färger helt enkelt inte är tillräckligt olika tenderar de att vara i konflikt med varandra, speciellt när man placeras över den andra.Tänk på exemplet nedan och hur mycket mer läsbar den lättare, mindre mättade gula texten än den version som föregår den.
Nu inser jag att dessa faktiskt är färgerna från din app så det är inte logiskt att ändra dem på webbplatsen. Mitt förslag är därför att helt enkelt skrapa den gula betoningen på texten och använda något annat, fet text, en understrukning, etc., som inte stör läsbarheten.
iPhone
IPhone-grafiken med bildspelet är extremt populär för iPhone-appwebbplatser, och av goda skäl. Det gör det omedelbart klart vad webbplatsen handlar om. Men jag tror att det kan bli raffinerat lite.
Till att börja med har de små prickarna som fungerar som bildspelet en snurrande lastcirkel bredvid dem. Den här lilla animationen slutar aldrig, så vilken funktion tjänar den? När jag ser det snurrar, tyder detta på att sidan inte är färdig att ladda (vi har lärt oss att det här är vad det här grafiken betyder) och när det aldrig slutar laddas, det gör att det känns som att din webbplats är trasig. Bottom line, den här grafiken är distraherande, förvirrande och tjänar inget praktisk syfte, ta bort det.
Också, som en liten irritation, kan Apple-nörd i mig inte låta bli att märka att iPhone-bilden är föråldrad. IPhone 5 är nästan över oss och den här sidan har fortfarande ingen grafik över iPhone 4 än. Jag vet att det är löjligt att hålla reda på detta, men eftersom webbplatsen faktiskt är en iPhone-app kan detta vara viktigt. Att ha föråldrade bilder gör att appen känns gammal och föråldrad, vilket får mig att tänka två gånger innan jag köper det!
Navigering
En sista tanke om webbplatsen är att navigeringen verkligen verkar som en eftertanke. Den innehåller länkar som ändrar textinnehållet på sidan med information som är relevant för besökare, men av en eller annan anledning är den liten och gömd långt ner i sidfoten.
Om det här verkligen var något mindre, skulle jag inte tänka mig, men det verkar faktiskt viktigare än designern gav det kredit för. Den enkla lösningen är att kasta den i det typiska läget längst upp på sidan och förstora texten lite.
Din tur!
Nu när du har läst mina kommentarer lägger du in och hjälper till med att ge designern ytterligare råd. Låt oss veta vad du tycker är bra om designen och vad du tycker kan vara starkare. Som alltid ber vi att du också respekterar webbplatsens designer och erbjuder tydliga konstruktiva råd, utan att det blir några svåra förolämpningar.