Web Design Critique # 43: Abdominals at Work
Elke week bekijken we een nieuwe website en analyseren we het ontwerp. We zullen wijzen op zowel de gebieden die goed zijn gedaan als de gebieden die wat werk kunnen gebruiken. Ten slotte sluiten we je af met je eigen feedback.
De kritiek van vandaag is Abdominals at Work, een website voor iPhone-toepassingen.
Ontdek ontwerpbronnen
Als u wilt dat uw website wordt opgenomen in een toekomstige ontwerpkritiek, duurt het maar een paar minuten. We rekenen $ 34 voor het bekritiseren van uw ontwerp - aanzienlijk minder dan u zou betalen voor een consultant om uw site te bekijken! Meer informatie vind je hier.
Over de Abdominals at Work-app
“Passieve methode van isometrische contracties. Als u veel tijd achter een computer of televisie doorbrengt, kunt u deze methode gebruiken om uw buikspieren te trainen terwijl u andere taken uitvoert. Je kiest de tijd en de plaats en de applicatie leert je hoe je de oefening doet, waarbij je je ritme en de intensiteit op een discrete manier markeert door middel van vibratie of melodie. ”
Hier is een screenshot van de homepage:
Eerste indruk
Mijn eerste gedachten op deze pagina waren redelijk positief. Ik hou van het algehele uiterlijk van de site en hoe deze nauw aansluit bij die van de app. Een bewolkte luchtscène suggereert absoluut geen beweging voor mij, maar de app gaat een beetje over sporten op een ontspannen manier, dus ik veronderstel dat het allemaal goed bij elkaar past.
De kleuren en afbeeldingen zijn heel vriendelijk en creëren een gastvrije omgeving. Mijn favoriete aspect is hoe eenvoudig de algehele inhoud werd gehouden: alleen een iPhone met enkele screenshots, een korte beschrijving, enkele manieren om te delen en een prominente link naar de iTunes-winkel waar je meer te weten kunt komen en de app kunt downloaden. Het is net genoeg om je te interesseren zonder je te overweldigen.
Hoewel ik de algemene richting van de app leuk vind, zoals altijd, heb ik veel suggesties voor verbetering. Laten we enkele specifieke gebieden opsplitsen om te zien welke positieve veranderingen kunnen worden aangebracht.
Geluid
Iedereen die ooit bij ons een aanvraag heeft ingediend voor een Design Critique voor een site met geluid krijgt hetzelfde advies. Ik geef er altijd de voorkeur aan dat site-ontwikkelaars bezoekers de mogelijkheid geven om in eerste instantie geluid toe te voegen in plaats van het weg te nemen. Surfen op het web is een typisch stille ervaring en plotselinge harde geluiden zullen uw bezoekers niet anders dan boos maken.
Deze site doet het weliswaar een stuk beter dan de meeste op dit gebied. Hoewel het geluid automatisch begint, is het op zijn minst een redelijk sereen en ontspannend oceaanthema met vogels en golven. U kunt het geluid ook uitschakelen door op de tjilpende vogelafbeelding onder aan de pagina te klikken.
Ik heb hier verschillende gedachten over. Eerst moest ik scrollen om het te vinden (hoewel ik weliswaar op een klein MacBook-scherm sta). Als iemand uw site op het werk, in een bibliotheek of op een andere openbare plaats bezoekt, wilt u niet dat ze moeten worstelen omdat ze beschamend proberen een manier te vinden om deze uit te schakelen. Je zou denken dat de gebruiker gewoon op de mute-knop drukt, maar vaker zullen ze het venster waarschijnlijk zo snel mogelijk sluiten.
Verder kan ik zeker zien hoe de vogel met muzieknoten die eruit komen een geluidscontrole suggereert, maar het heeft een ongelukkige gelijkenis met een Twitter-vogellink zoals we die nu op zowat elke site op internet zien. Dit maakt niet meteen duidelijk dat de vogel de geluidsbesturing is omdat er geen tekst is om de boodschap te versterken.
Het eenvoudige advies hier is, als je het bij automatisch afspelen van audio wilt houden, plaats de controle dan bovenaan de pagina en maak duidelijker wat het doet. Ik stel een zeemeeuwafbeelding voor (de Twitter-vogel komt niet overeen met het oceaanthema) en een "geluid aan / uit" -bericht bij de vogel. Zorg er ook voor dat de animatie van de muzieknoot stopt wanneer de site is gedempt en start wanneer het geluid aan is in plaats van gewoon de hele tijd door te gaan.
Animatie
Naast het geluid heeft de pagina verschillende zwevende wolken die zowel voor als achter de inhoud voorbij drijven. Dit voegt een beetje plezier toe aan de pagina en is weliswaar interessanter dan statische afbeeldingen.
De wolken belemmeren de bruikbaarheid grotendeels niet, maar interfereren wel af en toe met de leesbaarheid van de tekst. Zoals bij elke lusanimatie, kunnen ze ook een beetje eentonig worden als je zoveel tijd besteedt als ik naar de site staar! Een solide idee dat we zagen bij onze ToonyTuts Critique was een eenvoudig besturingssysteem met twee pictogrammen om de muziek en / of de geanimeerde wolken te stoppen. Het thema van de site leek erg op de site van vandaag, dus ik denk dat een vergelijkbare besturing hier perfect zou werken.
Berichten en tekst
Ik denk dat de site goed werk maakt door heel duidelijk te maken dat we buikoefeningen bespreken. Het kan echter een beetje technisch zijn voor zo'n leuk ogende pagina. Beschouw de hoofdkop "Passieve methode van isometrische contractie". Het is mooi en verheven, maar het klinkt niet echt vriendelijk, toch?
U hoeft dit bericht niet te negeren, maar overweeg het misschien op te nemen in de paragraaf ten gunste van een interessantere kop als "Bouw een sixpack terwijl u tv kijkt!" Dit is zeker niet het beste voorbeeld, maar het vormt de kern van mijn suggestie. Een kop als deze trekt je naar binnen en zorgt ervoor dat je meer wilt leren in plaats van je af te zetten omdat je je dom voelt en je thesaurus niet bij de hand hebt.
Misschien is het grootste probleem dat ik heb met de hele pagina de gele tekst op de blauwe achtergrond. Deze twee kleuren botsen enorm op de kleine tekst en maken deze informatie erg moeilijk te lezen.
Het probleem is het klassieke conflict versus complement in de kleurentheorie. Als twee kleuren gewoon niet verschillend genoeg zijn, hebben ze de neiging met elkaar in conflict te komen, vooral wanneer de ene boven de andere wordt geplaatst. Overweeg het onderstaande voorbeeld en hoeveel leesbaarder de lichtere, minder verzadigde gele tekst is dan de versie die eraan voorafgaat.
Nu realiseer ik me dat dit in feite de kleuren van uw app zijn, dus het is niet logisch om ze op de site te wijzigen. Mijn suggestie is dan ook om gewoon de gele nadruk op de tekst te schrappen en iets anders te gebruiken, vetgedrukte tekst, een onderstreping, etc., dat de leesbaarheid niet in de weg staat.
iPhone
De iPhone-afbeelding met de diavoorstelling is enorm populair voor websites van iPhone-apps, en terecht. Het maakt meteen duidelijk waar de site over gaat. Ik denk echter dat dit een beetje verfijnd kan worden.
Om te beginnen hebben de kleine stippen die dienen als navigatie voor de diavoorstelling een draaiende laadcirkel ernaast. Deze kleine animatie stopt nooit, dus waar dient het voor? Wanneer ik het zie draaien, suggereert dit dat de pagina niet volledig is geladen (ons is geleerd dat dit is wat deze afbeelding betekent) en als het nooit klaar is met laden, voelt het alsof uw site kapot is. Kortom, deze afbeelding leidt af, is verwarrend en heeft geen praktisch doel, verwijder deze.
En als kleine ergernis kan de Apple-nerd in mij niet anders dan merken dat het iPhone-beeld verouderd is. De iPhone 5 staat voor de deur en deze site heeft nog geen afbeelding van de iPhone 4. Ik weet het, het is belachelijk om dit bij te houden, maar aangezien de site eigenlijk voor een iPhone-app is, kan dit belangrijk zijn. Als ik verouderde beelden heb, voelt de app zelf oud en verouderd aan, waardoor ik twee keer nadenk voordat ik hem koop!
Navigatie
Een laatste gedachte over de site is dat de navigatie echt een bijzaak lijkt. Het bevat links die de tekstuele inhoud op de pagina veranderen met informatie die relevant is voor bezoekers, maar om een of andere reden is het klein en verborgen in de voettekst.
Als dit echt iets kleins zou zijn, zou ik het niet erg vinden, maar het lijkt eigenlijk belangrijker dan de ontwerper het op prijs stelde. De eenvoudige oplossing is om het op de typische locatie helemaal bovenaan de pagina te gooien en de tekst een beetje te vergroten.
Jouw beurt!
Nu je mijn opmerkingen hebt gelezen, kun je meedoen en helpen door de ontwerper wat verder advies te geven. Laat ons weten wat je geweldig vindt aan het ontwerp en wat je denkt dat sterker zou kunnen zijn. Zoals altijd vragen we u ook respect te hebben voor de ontwerper van de site en duidelijk constructief advies te geven, zonder harde beledigingen.
