Phlow neu Denken

Von Umleitungen, Redesign und weiteren Hacks… | So ein Umzug auf ein neues Redaktionssystem schiebt man gerne vor sich her. Schließlich müssen zahlreiche Umleitungen (Redirects) gelegt, das Design den eigenen Ansprüchen angepasst und zahlreiche Hacks gemacht werden. Noch wichtiger jedoch ist die grundlegende Auseinandersetzung mit der Struktur und dem Aufbau der Website. Ein Redesign bietet somit auch immer eine Chance zerüttetes und auseinandergefleddertes neu zu formieren.

Keine Angst, Phlow bleibt nicht so blau und weiss - auch wenn es an zahlreichen Stellen heisst, dass wären die Farben des Internets. Mir egal, schließlich haben wir eine Corporate Identity zu verteigen. Bevor ich jedoch Hände an das Design lege, hier ein paar grundlegende Gedanken zum Redesign der Strukturen. Ihr kennt das: Form follows Function.

Umleitungen legen - Teil 1

In einem ersten Schritt habe ich schon einmal die alte Startseite von Phlow gekürzt und einen Hinweis auf die neue Präsenz gesetzt. Jetzt müssen noch die folgenden Elemente umgebogen werden:

• RSS-Feeds, Feedburner umleiten (erledigt)
• Subdomains
• Profile bei Social Services wie Technorati & Co. (erledigt)
• Neue Fehlerseiten anlegen bzw. mit WordPress verzahnen (Phlow-303- und 404-Seite)

Hoffentlich habe ich nichts vergessen. Im nächsten Schritt, wenn das Design steht, werde ich per .htaccess-Datei einige Redirects legen müssen.

Erste Überlegungen für ein Redesign

Am Anfang fühlt sich eine Website unglaublich leer an. Keine Werbung, wenig Inhalte, wenig Kategorien, wenig Extraseiten und erst einmal kaum Schnickschnack. Den Moment, in welchem das Baby gerade frisch und installiert und zum ersten Mal im Web liegt, sollte man genießen. Schließlich bleibt es nicht bei dieser Klarheit.

Für mich ist Klarheit gleichgesetzt mit Benutzerfreundlichkeit. Komplexe Webseiten mit zahlreichen Einträgen, wie Phlow, überfordern insbesondere schnell neue Besucher. Diese gilt es aufzufangen mit einer einfachen Struktur, die dann kontinuierlich den Leser in die Tiefe leitet. Schafft man es einen Neuling weiter mit der eigenen Website vertraut zu machen, wird er dadurch meist zu einem Stammleser. Und Stammleser sind mir die Liebsten, weil man sich nicht nur kennenlernt, sondern oft auch ein vertrauliches Verhältnis aufbaut.

Struktur, Navigation und Benutzerfreundlichkeit von Websites

In erster Linie konzipiert man eine Website somit für Neulinge. Finden sich Neulinge zurecht, finden sich auch Stammleser zurecht. Ein erster Bezugspunkt für den Erstkontakt ist der Bereich “above the fold”. Also der Bereich, der gesehen wird bevor man das erste Mal Scrollen muss. Dieser Bereich dient als erster Orientierungspunkt und liefert gleichzeitig einen ersten Eindruck. Bereits an dieser Stelle halte ich es mit dem Usability-Experten Steve Krug: Der Besucher darf nicht zu viel denken.

Steve Krug will den Besucher nicht für dumm verkaufen, sondern will ihm in erster Linie eine Website intuitiv näher bringen. Und eine Website erfasst man intuitiv am besten, wenn man vertraute Elemente und einen vertrauten Aufbau wiedererkennt. Kein Wunder also, dass Weblogs so erfolgreich sind. Die meisten ähneln einander im Aufbau und bieten somit bereits beim ersten Besuch eine vertraute Atmosphäre.

Um diese angelernte Intuition zu unterstützen konzentriert man sich meiner Meinung nach am besten erst einmal auf diese ersten Bezugpunkte. Um sich einen Eindruck zu verschaffen, gehören meiner Meinung nach besonders die folgenden Elemente dazu:

• Logo und Slogan
• Navigation - vertikal oder horizontal
• Bilder in der Kopfzeile
• Suchfunktion

Bei der Gestaltung dieser Elemente verfolge ich im Weiteren einer Regel, die besagt: Der Mensch behält bei fünf bis sieben Elementen den Überblick, z.B. Navigationspunkten. Grund dafür ist das Kurzzeitgedächtnis. Aus meinen eigenen Web-Erfahrungen kann ich das nur bestätigen. Je mehr Elemente eine Navigation bietet, desto schneller ermüde ich und verliere ich den Überblick.

Darum liebe ich eine zweigleisige horizontale Reiter-Navigation. Einerseits liegt die Navigation “above the fold” und andererseits lerne ich den Besucher mit Ihr an. Klickt er auf einen der Reiter öffnet sich - wenn nötig - darunter eine Subnavigation mit maximal sieben weiteren Elementen. Diese ordnet man am besten in zueinander passenden Themenpaketen an. Für mich jedes Mal eine Herausforderung.

Die neue horizontale Phlow-Navigation

Viel habe ich neben Steve Krug auf von John Maeda und seinem wunderbaren Buch “Simplicity” gelernt. Dort untersucht der die Funktionsweise des iPod und führt anschaulich vor Augen, wie einfach und elegant das Gerät trotz seiner Komplexität anmuted. Die Regeln von “Simplicity” und “Findability” behält man bei der Konstruktion einer auseinander faltenden Navigation am besten im Auge.

Hier mein derzeitiger Vorschlag für die kommende horizontale Phlow-Navigation.

1. MP3-Musik
   1. Elektronische Musik
      1. Techno und House
      2. Downbeats Drum’n'Bass und Breakbeats
      3. Indietronic und Electronica und IDM (neu)
      4. Downbeat und Dub
      5. Ambient und Experimentell
   2. Hip Hop
      1. Instrumental
      2. Rap
   3. Pop
      1. Indiepop
      2. Mainstream
      3. Singer-Songwriter
   4. Other Diverse
      
      1. Chip Music
      2. Jazz
      3. Experimentell
      4. DJ-Mix und Compilation (neu)
      5. Podcast (neu)
   5. Rock
2. Netzkultur
   1. Technik
   2. Design (neu)
   3. Buchkritiken (neu)
3. Video
4. Downloads
   1. Free Flash Tools
   2. DJ-Mixes und Compilations
5. Info | Über
   1. Impressum
   2. Informationen zu Phlow
   3. Kontakt

Klappt man diese Navigation auf einmal, wirkt sie ziemlich komplex. Entfaltet sich die Subnavigation jedoch für einen einzelnen Bereich und bleiben die anderen erst einmal unsichtbar, lernt man die Website besser kennen.

Seht Ihr an dieser Stelle noch Verbesserungsmöglichkeiten oder bessere Stichwörter für die jeweilige Rubrik? Feedback ist wie immer herzlichst willkommen!

Immer auf dem Laufenden mit dem ungekürzten RSS-Feed von Phlow! Freie MP3-Musik aus der globalen Netlabel-Szene liefert unser Phlow-Magazine-Podcast kostenlos!

Themenverwandte Artikel:

• Hurra, Phlow schwimmt wieder im Kakao!
• Kaltstart: April, April! Phlow reloaded!
• Adminimize: WordPress-Plugin für mehr Übersicht und Workflow
• Bizarre Post eines Musikers aus Schweden
• art 2.0: Netlabel-Themenabend in Köln

« Kaltstart: April, April! Phlow reloaded! Soto - “Soto EP” (Creation Centre) »