Web Design Critique # 69 Okay Geek

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 Website ist Okay Geek, ein wunderbar geeky Tech-Blog, den wir zuvor auf Design Shack gesehen haben. Lass uns rein springen und sehen, was wir von dem neuen Design halten!

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 49 US-Dollar - deutlich weniger, als wenn Sie einen Berater für einen Blick auf Ihre Website bezahlen würden! Hier erfahren Sie mehr.

Über Okay Geek

Okay Geek ist ein Blog, das über Dinge schreibt, die unsere Redakteure für interessant halten. Wir bieten unseren Inhalt nur an uns selbst. Auch wenn das vielleicht etwas seltsam klingen mag, hoffen wir, Inhalte zu kreieren, die unsere Freude wirklich ausdrücken und es den Lesern ermöglichen, sich mit uns und dem, worüber wir schreiben, auseinanderzusetzen.?

wiederkehrende Kunden

Eine kurze Notiz zur Selbstbedienung. Wenn Sie sich fragen, ob sich eine Design Shack Design Critique lohnt, suchen Sie nicht weiter als unsere Stammkunden wie Okay Geek. Mehrere Websites haben nicht nur unseren Rat berücksichtigt, sondern viele der vorgeschlagenen Änderungen umgesetzt und sind für eine andere Kritik zurückgekehrt. Wenn Sie Zweifel an Ihrem Design haben, schreiben Sie uns eine Nachricht und vereinbaren Sie noch heute eine Kritik.

Nun zur Kritik, hier ein Screenshot der Okay Geek-Homepage:

Erster Eindruck

In unserer vorherigen Kritik an Okay Geek haben wir sie ergänzt, weil sie eine sehr saubere und scharf aussehende Website haben, die den Inhalt gut hervorhebt und dabei beinahe frei von Unordnung ist. Es scheint, dass sich die Designer entschieden haben, diese Idee noch weiter zu verfolgen, indem sie das Design wirklich minimieren und alle unnötigen Teile entfernen. Das Ergebnis ist ein super optimiertes Erlebnis, das für ein großartiges Browser-Erlebnis sorgt.

Ich empfehle die Designer für ihre Arbeit und denke wirklich, dass sie hier einen guten Job gemacht haben. Wie immer bin ich voller Vorschläge, wie man es noch besser machen kann. Schauen wir uns das genauer an.

Navigation

Eines meiner größten Probleme bei der Neugestaltung ist der Navigationsbereich. Aus ästhetischer Sicht ist es großartig. Es gibt einen schönen minimalen Reiz, der die Seite wirklich gut ergänzt. Aus Sicht der Benutzerfreundlichkeit punktet es jedoch nicht so hoch. Die verschiedenen Links sind in der Kopfzeile in zwei verschiedene Abschnitte unterteilt:

Der erste Abschnitt ist gut gemacht und macht Sinn: Reviews, Editorials, Contact, About Us. Der zweite ist jedoch ein Streifen von Symbolen, der den Inhalt der Seitenleiste in einer Art Tabbed-Methode steuert. Ich mag es wirklich, was sie hier machen und denke, sie haben wirklich eine vielseitige Seitenleiste erstellt, aber ich habe einige Probleme mit den Symbolen.

Auch wenn sie großartig aussehen, sind sie ziemlich vage. Zum Beispiel ist der Stern, der ein universelles Websymbol ist, um etwas zu einem Favoriten zu machen, tatsächlich eine Verbindung zum "Main". Abschnitt der Seitenleiste. Die Themen? Der Abschnitt ist ähnlich verwirrend, da er durch vier Quadrate dargestellt wird (was nur Sinn macht, wenn Sie darauf klicken). Die Titel werden im Schwebeflug angezeigt, aber bis dahin haben Sie keine Ahnung, wozu diese Symbole dienen.

Deinen Weg finden

In einem Tech-Blog wie diesem, das ein ziemlich breites Themenspektrum abdeckt, ist es für die Benutzer wichtig, schnell die Nische zu finden, an der sie interessiert sind. Als Test, wenn Sie jemanden zum ersten Mal vor diese Site stellen und sagen Sie: "Finden Sie die Spiele-Artikel". Es würde wahrscheinlich zehn Sekunden dauern, bis sie die "Themen" gefunden haben. Abschnitt, der sie dann zum Spielen führt.

Ich bin mir nicht ganz sicher, wie ich vorgehen würde, aber ich würde auf jeden Fall empfehlen, darüber nachzudenken, wie Benutzer die Drilldowns zu den Inhalten machen können, die sie gerne sehen würden. Ehrlich gesagt, könnte es so einfach sein, den Text immer unter den Symbolen sichtbar zu machen.

Vorgestellter Inhalt

Wie bei jeder guten Nachrichtenseite gibt es eine Reihe verschiedener Inhaltsspeicherorte, die helfen, Artikel hervorzuheben, die über dem im primären Homepage-Feed angezeigten Inhalt liegen. Diese sehen wirklich toll aus und erscheinen, genau wie die Navigation, sowohl oben links als auch rechts in der Seitenleiste.

Wiederholung

Wenn ich mir diese ansehe, sehe ich eines meiner Lieblingsdesign-Tools bei der Arbeit: Wiederholung. Die Beschriftung jedes Abschnitts ist wirklich schön, aber einfach konsistent. Dies ist jedoch ein perfektes Beispiel dafür, wie Wiederholung ein kniffliges Biest sein kann und den Benutzer sogar irreführen kann. Betrachten Sie die folgende Grafik, die drei konsequent entworfene Kopfzeilen von der Seite zeigt:

Jetzt dienen die ersten beiden als Abschnittsüberschriften. Sie sitzen über dem Inhalt und dienen einfach als Etikett für das, was unter ihnen ist. Sie sind keine Links, nur visuelle Helfer. Ihr Gehirn geht davon aus, dass dies für alle ähnlichen Artikel auf der Website der Fall ist. Der dritte wirft jedoch einen Curveball.

Diese Beschriftung befindet sich über einer leeren Stelle, was sie sofort verwirrt, worauf sie verweist. Erinnern Sie sich, dass die anderen beiden Header uns bereits gelehrt haben, dass dies keine Links sind. muss noch hinzugefügt werden. Es stellt sich jedoch heraus, dass diese Kopfzeile überhaupt keine Kopfzeile ist, sondern ein Link zu einer anderen Seite.

Selektive Wiederholung

Die einfache Design-Lektion hier ist, dass Wiederholung sorgfältig angewendet werden muss. Stellen Sie sicher, dass beim Wiederholen eines visuellen Designstils oder Elements die Elemente einen gemeinsamen Zweck und eine gemeinsame Funktionalität haben. Andernfalls richten Sie einen erwarteten Archetyp ein, den Sie dann brechen, und verringert dadurch die Nutzbarkeit durch Wiederholung, anstatt sie zu verbessern.

Ich sehe, dass dieses Problem bei dem oben genannten Stern-Symbol an mindestens einer anderen Stelle auf der Website auftritt. Es wird in der Sidebar verwendet, um einfach die "Main" -Datei anzuzeigen. tab und wird in den Vorschaubildern wiederholt, um anzuzeigen, dass der Beitrag "Exklusiver, hervorgehobener Inhalt" ist. Wieder einmal entfernt die Wiederholung tatsächlich die Bedeutung des Symbols, da es für zwei sehr unterschiedliche Zwecke verwendet wird.

Beiträge & Previews

Abgesehen von der oben genannten Symbolwiederholung gefällt mir das neue Post-Preview-Format wirklich gut. Die schönen großen Bilder ziehen Sie an und alle Informationen über die Post, die Sie benötigen, werden übersichtlich und übersichtlich dargestellt.

Ich merke auch, dass das alte vage? Speichern? Schaltfläche wurde in "Speichern auf Instapaper" geändert. Button für meinen Vorschlag. Bonuspunkte für die Umsetzung einiger Änderungsvorschläge! Ich denke, das macht es unendlich viel klarer, was mit diesem Button passiert.

Wenn Sie auf einen bestimmten Beitrag klicken und ihm folgen, sehen wir einige weitere Beispiele für wirklich attraktive Designarbeit. Das Ende eines Beitrags ist der Ort, an dem traditionell viele verschiedene Inhalte platziert werden, z. B. das Teilen, ähnliche Artikel und Kommentare. Dieser Bereich kann schnell zu einem chaotischen Durcheinander werden, aber ich liebe es, wie hier gehandelt wurde. Die drei verschiedenen Bereiche sind eindeutig verschieden, aber optisch ähnlich und passen gut zum Gesamtthema der Website.

Sie wissen, dass ein Designer gut ist, wenn er / sie viel Zeit damit verbringt, die kleinen Dinge richtig zu machen, und ich denke, dieser Abschnitt ist ein klares Beispiel dafür, wie großartig die Designer an diesem Projekt arbeiten.

Über uns

Der letzte Abschnitt, von dem ich denke, dass er etwas Aufmerksamkeit verdient, ist die Seite Über uns. Als die Seite zum ersten Mal geladen wurde, war ich überrascht, wie attraktiv sie war. Dies ist ein wirklich schönes Design, das sich stark vom Rest der Website unterscheidet und 100% der Marke bleibt.

Fazit

Die Jungs von Okay Geek haben mich wirklich dazu ermutigt, mich auf der Website gut umzusehen und ihnen beide Fässer zu geben, als ich etwas bemerkte, das angesprochen werden musste. Dies zeigt eine klare Bereitschaft an, die Website für die Nutzer so gut wie möglich zu gestalten.

Kritik anzunehmen ist eine der schwierigsten Aufgaben, denen Sie als Designer gegenüberstehen. Wir geben uns so viel in unsere Projekte, dass sich eine Kritik wie ein persönlicher Angriff anfühlt. Wenn wir uns von dieser emotionalen Reaktion lösen und Feedback logisch auswerten können, werden wir zu besseren Designern und unsere Projekte verbessern sich exponentiell.

Wie ich in der gesamten Kritik immer wieder feststellte, ist diese Seite aus rein visueller Sicht hervorragend. Die Bereiche, die ich verbessern wollte, hängen eng mit der Benutzerfreundlichkeit und der Verbesserung der Benutzererfahrung zusammen. Diese Dinge sind leicht zu übersehen, wenn wir ein Projekt zu lange angestarrt haben. Ich bin mir sicher, dass das Team viele dieser Probleme in Betracht ziehen wird, um Okay Geek zu einem wirklich großartigen Ort zu machen, um mehr über die neuesten Entwicklungen in der Welt der Technologie zu erfahren.

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.