Jede Woche schauen wir uns eine neue Website an und analysieren das Design. Wir werden auf beide Bereiche hinweisen, die gut erledigt werden, zusätzlich zu den Bereichen, in denen etwas Arbeit anfallen könnte. Zum Schluss bitten wir Sie, Ihr eigenes Feedback zu geben.
Die heutige Kritik ist Abdominals at Work, eine Website für iPhone-Anwendungen.
Wenn Sie Ihre Website für eine zukünftige Design-Kritik einreichen möchten, dauert dies nur wenige Minuten. Für die Bewertung Ihres Designs berechnen wir 34 US-Dollar - deutlich weniger, als wenn Sie einen Berater für einen Blick auf Ihre Website bezahlen würden! Hier erfahren Sie mehr.
Über die Bauchmuskeln bei der Arbeit
Passive Methode der isometrischen Kontraktionen. Wenn Sie viel Zeit vor einem Computer oder dem Fernseher verbringen, können Sie mit dieser Methode Ihre Bauchmuskeln trainieren, während Sie andere Aufgaben ausführen. Sie wählen die Zeit und den Ort, und die Anwendung zeigt Ihnen, wie Sie die Übung ausführen, Ihren Rhythmus und die Intensität durch Vibration oder Melodie auf diskrete Weise kennzeichnen.
Hier ist ein Screenshot der Homepage:
Erster Eindruck
Meine anfänglichen Gedanken auf dieser Seite waren ziemlich positiv. Ich mag das Gesamtbild der Website und wie sie der App sehr nahe kommt. Eine Szene mit bewölktem Himmel schlägt mir definitiv keine Übung vor, aber in der App geht es darum, auf entspannende Art und Weise zu trainieren.
Die Farben und Grafiken sind sehr freundlich und schaffen eine einladende Umgebung. Mein Lieblingsaspekt ist, wie einfach der Gesamtinhalt gehalten wurde: Nur ein iPhone mit einigen Screenshots, einer kurzen Beschreibung, einigen Möglichkeiten zum Teilen und einem auffälligen Link zum iTunes Store, wo Sie mehr erfahren und die App herunterladen können. Es reicht aus, um Sie zu interessieren, ohne Sie zu überfordern.
Obwohl mir die allgemeine Ausrichtung der App gefällt, habe ich wie immer viele Verbesserungsvorschläge. Lassen Sie uns einige spezifische Bereiche aufbrechen, um zu sehen, welche positiven Änderungen vorgenommen werden könnten.
Klingen
Jeder, der jemals eine Design Critique für eine Website mit Sound an uns gerichtet hat, erhält die gleichen Ratschläge. Ich bevorzuge es immer, dass Website-Entwickler den Besuchern die Möglichkeit geben, anfänglich Sound hinzuzufügen, anstatt ihn wegzunehmen. Das Surfen im Internet ist normalerweise ein ruhiges Erlebnis, und plötzliche laute Geräusche machen Ihre Besucher nicht wütend.
Diese Seite ist zwar viel besser als die meisten anderen in diesem Bereich. Obwohl das Geräusch automatisch beginnt, ist es zumindest ein recht gelassenes und entspannendes Meeresmotiv mit Vögeln und Wellen. Sie können den Ton auch ausschalten, indem Sie auf das Bild des zwitschernden Vogels unten auf der Seite klicken.
Ich habe einige Gedanken dazu. Zuerst musste ich scrollen, um es zu finden (obwohl ich zugegebenermaßen auf einem kleinen MacBook-Bildschirm bin). Wenn jemand Ihre Website bei der Arbeit, in einer Bibliothek oder an einem anderen öffentlichen Ort besucht, möchten Sie nicht, dass er sich umstellen muss, da er peinlich versucht, einen Weg zu finden, um sie auszuschalten. Sie würden denken, der Benutzer würde nur die Stummschalttaste drücken, aber häufiger schließen sie das Fenster wahrscheinlich so schnell wie möglich.
Außerdem kann ich definitiv sehen, wie der Vogel, aus dem Musiknoten hervorgehen, eine Klangsteuerung suggeriert, aber er hat eine unglückliche Ähnlichkeit mit einem Twitter-Vogel-Link, wie wir ihn jetzt auf fast jeder Website im Internet sehen. Dies macht es nicht sofort sichtbar, dass der Vogel die Klangsteuerung ist, da kein Text zur Verstärkung der Nachricht vorhanden ist.
Wenn Sie sich für Auto-Play-Audio entscheiden, setzen Sie den Regler ganz oben auf die Seite und machen Sie klarer, was er tut. Ich empfehle eine Seemöwengrafik (der Twitter-Vogel passt nicht zum Thema Ozean) und ein? Ton an / aus? Nachricht in der Nähe des Vogels. Lassen Sie die Musiknotenanimation auch anhalten, wenn die Site stummgeschaltet ist, und starten Sie, wenn der Ton eingeschaltet ist, anstatt nur die ganze Zeit fortzusetzen.
Animation
Neben dem Sound enthält die Seite mehrere schwebende Wolken, die sowohl vor als auch hinter dem Inhalt vorbeiziehen. Dies macht die Seite etwas spaßiger und ist zugegebenermaßen interessanter als statische Grafiken.
In den meisten Fällen behindern die Wolken nicht die Benutzerfreundlichkeit, beeinträchtigen jedoch gelegentlich die Lesbarkeit des Textes. Wie bei jeder Loop-Animation können sie auch ein bisschen monoton werden, wenn Sie so viel Zeit wie ich auf die Website starren! Eine solide Idee, die wir auf unserer ToonyTuts Critique gesehen haben, war ein einfaches Steuersystem mit zwei Symbolen zum Stoppen der Musik und / oder der animierten Wolken. Das Thema der Site war der heutigen Site sehr ähnlich, daher denke ich, dass eine ähnliche Steuerung hier perfekt funktionieren würde.
Messaging und Text
Ich denke, die Site macht es gut, klar zu machen, dass wir über Bauchmuskeltraining sprechen. Für eine solche Seite, die Spaß macht, kann es jedoch ein wenig technisch sein. Betrachten Sie die Hauptüberschrift "Passive Methode der isometrischen Kontraktion". Es ist schön und erhaben, aber es hat nicht wirklich einen freundlichen Ruf, oder?
Sie müssen diese Nachricht nicht aufgeben, aber erwägen Sie vielleicht, sie in den Absatz zu integrieren, um eine interessantere Schlagzeile zu verwenden, z. B. "Bauen Sie ein Six Pack, während Sie fernsehen!" Dies ist keineswegs das beste Beispiel, aber es steht im Mittelpunkt meines Vorschlags. Eine solche Überschrift zieht Sie an und lässt Sie mehr lernen als abschalten, weil Sie sich dumm fühlen und keinen Thesaurus zur Hand haben.
Das größte Problem, das ich mit der gesamten Seite habe, ist vielleicht der gelbe Text auf blauem Hintergrund. Diese beiden Farben stoßen beim kleinen Text stark aufeinander und machen das Lesen dieser Informationen sehr schwierig.
Das Problem ist der klassische Konflikt vs. Komplement in der Farbtheorie. Wenn zwei Farben einfach nicht verschieden genug sind, neigen sie zu Konflikten, insbesondere wenn eine Farbe über der anderen platziert wird.Betrachten Sie das Beispiel unten und wie viel lesbarer der hellere, weniger gesättigte gelbe Text ist als die vorgelagerte Version.
Nun stelle ich fest, dass dies tatsächlich die Farben Ihrer App sind, so dass es nicht logisch ist, sie auf der Website zu ändern. Mein Vorschlag ist daher, die gelbe Hervorhebung des Textes einfach wegzuwerfen und etwas anderes zu verwenden: Fettdruck, Unterstreichung usw., das die Lesbarkeit nicht beeinträchtigt.
iPhone
Die iPhone-Grafik mit der Diashow ist für iPhone-App-Websites äußerst beliebt, und das aus gutem Grund. Dadurch wird sofort klar, worum es bei der Site geht. Ich denke jedoch, dass dies etwas verfeinert werden könnte.
Für den Anfang haben die kleinen Punkte, die als Diashow-Navigation dienen, einen rotierenden Ladekreis neben sich. Diese kleine Animation hört nie auf, wozu dient sie also? Wenn ich es rotiere, deutet dies darauf hin, dass die Seite nicht vollständig geladen ist (wir haben gelernt, dass dies die Grafik bedeutet) und wann es ist noch nie Der Ladevorgang wird beendet, das Gefühl, dass Ihre Website beschädigt ist. Unterm Strich ist diese Grafik ablenkend, verwirrend und dient keinem praktischen Zweck, sie zu entfernen.
Als kleinen Ärger kann der Apple-Geek in mir einfach feststellen, dass das iPhone-Image nicht mehr aktuell ist. Das iPhone 5 steht vor der Tür und diese Seite hat noch keine Grafik des iPhone 4. Ich weiß, es ist lächerlich, dies mithalten zu müssen, aber da die Website eigentlich für eine iPhone-App ist, kann dies wichtig sein. Mit veralteten Bildern fühlt sich die App selbst alt und veraltet an, was mich vor dem Kauf zweimal überlegen lässt!
Navigation
Ein letzter Gedanke über die Website ist, dass die Navigation wirklich nachträglich wirkt. Es enthält Links, die den Textinhalt auf der Seite mit Informationen für Besucher ändern, aber aus irgendeinem Grund ist er winzig und verborgen in der Fußzeile.
Wenn dies wirklich etwas Nebensächliches wäre, hätte ich nichts dagegen, aber es scheint wichtiger zu sein, als der Designer es verdient hat. Die einfache Lösung besteht darin, sie an der typischen Stelle ganz oben auf der Seite zu werfen und den Text ein wenig zu vergrößern.
Du bist dran!
Nun, da Sie meine Kommentare gelesen haben, helfen Sie dem Designer mit ein paar weiteren Ratschlägen. Teilen Sie uns mit, was Sie an dem Design toll finden und was Sie für stärker halten könnten. Wie immer bitten wir Sie, auch den Designer der Site zu respektieren und eine klare, konstruktive Beratung ohne harte Beleidigungen anzubieten.