Jährliche Archive: 2011


Usabilitytest und neues Redesign: Barcelona.de

Ein neues Redesign ist in Arbeit: das Reiseportal barcelona.de. Da wir schon ein paar Änderungen online haben, hier der Originalzustand der Seite:

Alte Startseite Barcelona.de

Welche Punkte nehmen wir beim Redesign in Angriff?

Design

Das Design der Seite ist schon ein paar Jährchen alt, deswegen werden wir es Schritt-für-Schritt modernisieren. Erster Schritt auf diesem Weg: das Redesign des Headers und erste Anpassungen in der Farbgebung. Hier zum Vergleich der alte und der neue Header:

Vergleich alter Header zu neuem Header

Folgende Änderungen haben wir bereits vorgenommen:

  • Headergrafik: Bisher war die Headergrafik recht dunkel und kleinteilig, einige der Bilder konnte nicht jedermann sofort als charakteristisch für Barcelona erkennen. Für die neue Grafik habe ich die Anzahl der Fotos auf 4 reduziert. Das zentrale Element, die Sagrada Familia, wird umrahmt von einer geschwungenen Linie, die zum einen eine Anlehnung an die Formsprache des Jugendstils ist und gleichzeitig das Meer symbolisiert. Der Verlauf der geschwungenen Linie führt die Blickrichtung auf das Suchelement und die Buchungsmenüpunkte. Das Logo überlappt jetzt nicht mehr mit der Hintergrundgrafik.
  • Farben: Den Blauton habe ich von einem eher gelblichen Blau in ein rötliches Blau geändert. Dieser Farbton symbolisiert mehr die Elemente, die man sich von einem Urlaub im Süden erwartet: Meer und blauer Himmel.
  • Hintergrundfarbe Navigation: Damit der Header ein geschlossenes Element bildet, hat die Utilitiesnavigation jetzt dieselbe Farbe, wie die Hauptnavigation. Der Hintergrund der Navigation zweiter Ebene ist jetzt weiß, was den Vorteil hat, dass auf der Startseite, wo bisher ein leerer grauer Balken zu sehen war, kein „leeres“ Element mehr erscheint und das Design insgesamt leichter wird.
  • Schriftfarbe: Die Schriftfarben habe ich auf weiß und blau reduziert.
  • Trennlinien: Die vertikalen Trennlinien zwischen den Hauptmenüpunkten habe ich entfernt
  • Icons: Die Icons der Utilities Navigation habe ich ebenfalls entfernt.

Noch offen ist die Frage der Menüpunkte oberhalb der Headergrafik. Meine Vermutung wäre, dass nur wenige Besucher diese Links verwenden. Das wollen wir aber noch mit einem Tracking verifizieren.

Usability

Ein erster Usabilitytest mit 5 Personen hat gezeigt, dass die Seiten und Elemente, die von barcelona.de bereitgestellt werden, weitest gehend gut zu bedienen sind. Bedien- und Qualitätsprobleme treten allerdings in den Elementen auf, die von externen Partnern bereit gestellt werden, wie z.B. die Hotel- und die Flugbuchung. Da dies zentrale Elemente der Webseite sind, versuchen wir momentan über Kontakt zu den Anbietern eine Verbesserung in diesem Bereich herbeizuführen.

Nächste Schritte

Als nächstes wollen wir die Struktur der Inhalte angehen. Aktuell gibt es sehr viele Einstiegspunkte in die Inhalte und wenig Gewichtung, was die Seite zum Teil etwas unübersichtlich macht. Ziel ist es, dass der Besucher auf den ersten Blick die wichtigen Informationen und Services im Überblick hat und sich das gesamte Angebot nach und nach erschließen kann.


Speed4Projects Website Redesign – Teil6: Konzept, Abstimmung und … Online!!! 1

Erst mal vorweg: die Seite ist online: http://speed4projects.de! 🙂 Klar, der letzte Feinschliff fehlt noch, aber das Hauptziel haben wir erreicht: seit heute hat Wolfram Werbung für die Seite geschalten und die Hauptseiten sind online.

Was ist seit dem letzten Schritt passiert? Nachdem das Basisdesign feststand, habe ich mich an das Website-Konzept (Pflichtenheft, Feinkonzept, wie auch immer ihr es nennen wollt) gemacht, die Entwürfe mit den Entwicklern abgestimmt und dann, ja dann wurde die Seite eben umgesetzt. Hier die Details zu den einzelnen Schritten:

Konzept

Der eine oder andere mag sich wundern, wozu man ein Konzept braucht, wenn man eine fertige Photoshop-Datei hat. Ich bin ein großer Anhänger dieser Form von Dokumentation, weil sie den Designer dazu bringt, sich im Detail Gedanken über sein Design und die Funktionalität zu machen. Zusätzlich reduziert es den Kommunikationsaufwand und die Anzahl von Korrekturen während der Umsetzung.

Folgende Inhalte sind im Konzept enthalten:

  • Strukturen (Sitemap, Seitenstruktur, Navigationskonzept,…)
  • Funktionsbeschreibungen (Suche, Registrierung, Login,…)
  • Design (Farben, Schriften, Bemaßungen, Beschreibung von Detailelementen, Grafiken,…)

Strukturen
Dieses Kapitel beschreibt den Grundaufbau der Seite. An dieser Stelle sollte man klare Bezeichnungen für alle Elemente einführen und diese durchgängig verwenden, z.B. auch in Dateinamen und in den Photoshop-Dateien.

Übersicht Seitenelemente Startseite

Funktionsbeschreibungen
Hier werden alle Funktionalitäten der Website beschrieben. Auch wenn es der 10. Registrierungsprozess ist, den ihr entwerft, es wird aufgrund der technischen Gegebenheiten immer wieder Abweichungen in den Lösungen geben, so dass es sich auf jeden Fall lohnt, auch die Funktionen zu beschreiben, deren Gestaltung scheinbar selbstverständlich ist. An dieser Stelle ist eine enge Abstimmung mit den Entwicklern erforderlich, um möglichst früh zu klären, welche Funktionalitäten umsetzbar oder welche Lösungen eventuell schon implementiert sind.

In diesem Kapitel arbeite ich bewusst mit Scribbles statt mit Reinzeichnungen. Das spart Zeit und ist bei Nachbesserungen schneller zu ändern. Zusätzlich zu den Scribbles gibt es eine kurze Beschreibung des Standardablaufs (eine Art reduzierte Use-Case-Beschreibung), sowie Anmerkungen zu Besonderheiten. Hier zum Beispiel die Beschreibung des Logins:

Interface Konzept Login

Design
Das dritte Kapitel enthält alle Informationen rund um das Thema Design. Da ich zur Optimierung der Schrift mit HTML-Dummys gearbeitet habe, habe ich die entsprechenden CSS-Formatierungen gleich mit ins Konzept gepackt:

Beispiel Schriftartentest

Auch bei den Beschreibungen der Einzelelemente habe ich zu den Bemaßungen möglichst viele Detailinfos mitgegeben – was zu leuchtenden Entwickleraugen geführt hat. 😉

Beispiel Bemaßungen von Einzelelementen

Abstimmung

Die Programmierung der Website wurde von der werkraum GmbH in Karlsruhe übernommen. Beim ersten Treffen haben mir die Entwickler die Rahmenbedingungen des technischen Systems erläutert und ich ihnen den Design-Ansatz. Das zweite Treffen fand unmittelbar vor Beginn der Programmierung statt. Hier sind wir das Konzept noch mal im Detail durchgegangen und haben letzte Fragen geklärt. Dann ging es los…

Qualitätssicherung, Nachbesserungen und Online-Gang

Konzept übergeben und das war’s? Nö, auch während der Umsetzung ist unsereins keineswegs arbeitslos:

  1. Rückfragen der Entwickler: Ein Konzept ist nie so eindeutig und fehlerfrei, dass es ohne Rückfragen umgesetzt werden kann (außer man steckt Unmengen an Aufwand in die Überprüfung, aber wer will das schon bezahlen…). D.h. während der Umsetzung ist ein direkter Draht von den Entwicklern zum Designer notwendig, um missverständliche Passagen oder Fehler zu klären.
  2. Qualitätssicherung: Als UX-Designer sollte man während der Umsetzung nicht nur mit dem Pixellineal unterwegs sein, sondern die Website als Ganzes aus Sicht des Besuchers überprüfen: Passen alle Abläufe zusammen, stimmt die Performance, usw. Hier bitte vorher mit der Entwicklung klären, welche Seiten tatsächlich schon für eine Überprüfung bereit sind. Nichts ist schlimmer als ein Kommentar zu einer halbfertigen Seite „da fehlt aber noch was“. 😉
  3. Inhalte: Dieser Punkt gehört sicher nicht zu den Kernaufgaben eines UX-Designers, in diesem Fall habe ich Wolfram allerdings dabei unterstützt, die bisherigen Inhalte seiner Website in das neue System umzuziehen. Bei dieser Gelegenheit konnten wir etliche Standards für Formatierungen und Strukturen der Texte festlegen und auch inhaltlich noch etwas nacharbeiten.

Wie eingangs bereits erwähnt, sind wir mit den Überarbeitungen noch nicht zu 100% fertig. Ich möchte trotzdem schon mal jetzt allen Beteiligten für die tolle Zusammenarbeit danken und wünsche Wolfram mit seiner neuen Seite viel Erfolg! 🙂

Verwandte Artikel Speed4Projects Website Redesign


Speed4Projects Website Redesign – Teil5: Design Website

Und weiter gehts in die vorletzte Runde: das Design der Website. Hier noch mal zur Erinnerung der bisherige Stand:

Aktuelle Website

Auch hier möchte ich kurz die Vorgehensweise beschreiben, wie ich den Entwurf erarbeitet habe. Ausgangspunkt war, wie bei den vorangegangenen Schritten, die Analyse der Anforderungen und Zielgruppen. Wichtigste Zielgruppe der Website sind die Kaufentscheider. Für diese Gruppe müssen die Verkaufsargumente kurz, prägnant und überzeugend dargestellt werden. Für diesen Zweck habe ich im Hauptbereich der Startseite einen Teaser eingerichtet, der die wichtigsten Informationen über Speed4Projects enthält:

  • Um was geht es: Critical Chain = Projekte schnell und sicher zum Abschluss bringen (zusätzlich Einführung des Begriffs)
  • Wie: Kurze Skizze der Methode, Verweis auf den pragmatischen Ansatz der Methode
  • Warum: Übersicht der Vorteile + Verweis auf Erfolgsgeschichten bisheriger Kunden

Für die zweite Zielgruppe, die auf der Suche nach Informationen ist und bereit ist, sich mehr Zeit für die Seite zu nehmen, wurde noch ein Abspielbutton eingefügt, der ein Video öffnet, in dem Wolfram das Produkt erläutert.

Teaser Startseite

Hier nun der Entwurf wie das Element eingebettet in die neue Startseite aussehen wird. Man sieht, dass das grafische Element des Abspielbuttons gleichzeitig dazu dient, das Teaserelement optisch abzugrenzen und den Besucher auf die Kontaktmöglichkeit in der Sidebar zu leiten.

Alle übrigen Seitenelemente sind weit möglichst reduziert, um die Kernaussage im Vordergrund zu halten. Als einziges weiteres prominentes Element ist das Foto von Wolfram in der Sidebar eingesetzt, um zu unterstreichen, dass es sich um eine individuelle Beratung mit einem kompetenten und vor allem präsenten Ansprechpartner handelt.

Redesign Startseite

Die Inhaltsseiten sind vom Grundaufbau ebenfalls sehr schlicht gehalten, da die Seiten sehr viele Inhalte, vor allem auch Grafiken enthalten werden. Hier seht ihr eine Zusammenstellung verschiedener Elemente, die auf den Inhaltsseiten vorkommen können:

Design Inhaltsseite

Fehlt zur fertigen Seite also nur noch ein Schritt: die Implentierung. Jeder, der schon mal eine Website gebaut hat, weiß, dass jetzt die Tücken im Detail losgehen, denn wie im Entwurf siehts später nie aus… ;-). Mehr dazu im nächsten Teil.

Verwandte Artikel Speed4Projects Website Redesign


Speed4Projects Website Redesign – Teil4: Logo und Schriftart 3

Im diesen Schritt geht es um das Redesign des Speed4Projects Logos. Noch mal zur Erinnerung, so sieht das bisherige Logo aus:

Bisheriges Logo Speed4projects

Das neue Logo sollte, wie auch die neue Website, schlicht und seriös sein, die Farbpalette aus Grautönen, Schwarz, Weiß und Rot bestehen. Wolframs Wunsch war es, die Visualisierung eines Projektdiagramms in das Logo zu integrieren. Im Verlauf der Gestaltung haben wir davon allerdings Abstand genommen, da das Logo damit zu kleinteilig geworden wäre.

Zunächst habe ich mir noch einmal das alte Logo vorgenommen und die Punkte zusammengestellt, die notwendig wären, um ihm ein zeitgemäßes Design zu geben:

  1. Entfernen des Highlights oberhalb des Pfeils
  2. Anpassung des Rottons in eine dunklere Richtung, weniger aggressiv
  3. Raffiniertere Gestaltung des Pfeilsymbols
  4. Raffiniertere Typographie

Die ersten beiden Punkte wären zwar schnell umzusetzen gewesen, parallel hatten wir uns allerdings etliche Websites angeschaut, so dass sich für das Website Design ein stark reduziertes und filigranes Design herauskristallisierte. Dazu würde die kompakte Grundform des alten Logos nicht mehr passen.

Also habe ich Ideen gesammelt, wie sich das Logo komplett neu gestalten lässt. Hier einige Assoziationen zur Firma und zum Firmennamen:

  • Schnelligkeit und Fortschritt: Autorennen, Tachometer, Zielflagge, Bewegungsunschärfe, kursive Schrift, Pfeil
  • Projekt: Projektdiagramm, Diagrammelemente
  • 4: die 4 so ins Logo integrieren, dass sie mit der Projektvisualisierung oder einem der Geschwindigkeitssymbole verschmilzt
  • Voller Name vs. Initialen fürs Logo

Basierend auf diesen Überlegungen, habe ich erste Scribbles von Hand gezeichnet:

Erste Entwürfe neues Logo

Anhand dieser Scribbles konnte ich mit Wolfram zwei Aspekte klären:

  • Die Option „Logo aus Initialen“ haben wir verworfen. Der Firmenname sollte komplett ausgeschrieben werden.
  • Wenn man Speed4Projects in einer Zeile schreibt, bekommt die „4“ zwangsläufig eine sehr prominente Position in der Mitte. Stärker betont werden sollten allerdings die beiden anderen Komponenten des Firmennamens. Deswegen habe ich in den folgenden Entwürfen nur noch mit einem 2-zeiligen Aufbau gearbeitet.

Im nächsten Entwurf habe ich mich der Auswahl der Schriftart angenähert. Dazu habe ich in Word eine einfache Version eines Logo-Rohlings gesetzt. Danach habe ich mit verschiedenen Schriftarten und Schriftschnitten experimentiert. Die Wahl fiel auf die Variante mit der Tahoma-Schriftart (zweite von oben in der rechten Spalte). Auch hier waren die Auswahlkriterien: leicht und professionell. Zusätzlicher Vorteil: als Websafe Font, kann diese Schriftart für den gesamten Webauftritt ohne Mehraufwand und Zusatzkosten verwendet werden.

Speed4projects Auswahl Schriftart

Über diverse Umwege kam ich dann zu einer ersten Arbeitsversion des Logos, links unten:

Erste Arbeitsversion Logo

Mit dieser Arbeitsversion habe ich mich dann erst mal an das Design der Website gemacht, denn hier wurde meine Vorarbeit von den Programmierern benötigt. Erst als das Webdesign stand, habe ich mir das Logo noch einmal vorgenommen. Zuerst habe ich versucht, doch noch Pfeile in das Logo zu integrieren. Das hat aber in allen Varianten zu einer zu komplexen Darstellung geführt:

Weg zur finalen Logo Version

Über schrittweises Reduzieren bin ich dann zu folgender Variante gekommen:

Finales Logo Speed4Projects

  • Als grafisches Element ist nur noch die spitz zulaufende Linie als Andeutung eines Richtungspfeils übrig.
  • Damit das „Speed“ ordentlich schnell wirkt, habe ich es in Großbuchstaben und kursiv gesetzt.
  • Da Projekte das Kernelement des Geschäftsmodells sind, habe ich „projects“ zur Betonung in Rot gesetzt. Die Laufweite habe ich etwas erhöht, um mehr Platz in der ersten Zeile zu bekommen und die „4“ hochziehen zu können. Zusammen mit dem nicht-kursiven Schriftschnitt fängt die zweite Zeile damit auch die Bewegung der ersten Zeile ein. Es soll ja keine Hektik im Projekt aufkommen… 😉
  • Die „4“ sollte weit möglichst in den Hintergrund treten, weswegen sie einen dezenten Grauton erhalten hat und am Ende der ersten Zeile steht.
  • Der Einzug der zweiten Zeile wiederholt sich als Stilelement auf der gesamten Website und soll ebenfalls die nach vorne gerichtete Bewegung unterstreichen.

So, und die nächsten Tage bekommt ihr dann das Webdesign zu sehen. Schließlich ist der Online-Gang für nächste Woche Montag geplant – übrigens 3 Tage früher als ursprünglich angesetzt. Die Zeit konnten wir durch gutes Projektmanagement herausholen. 😉

Verwandte Artikel Speed4Projects Website Redesign


Speed4Projects Website Redesign – Teil3: Seitenstruktur

Jetzt muss ich doch mal wieder einen kurzen Zwischenstand durchgeben, sonst ist das Redesign fertig, bevor ich auch nur einen Blogpost geschrieben habe. 😉 Momentan arbeite ich an 3 Strängen parallel: Logo Redesign, Design der Website und Aufbau der Inhalte. Um letzteres wird es heute gehen, weil es auch als Vorarbeit für das Website Design notwendig ist.

Ich hab mir also zunächst angeschaut, welche Inhalte sich auf der aktuellen Website befinden. So sieht der aktuelle Sitetree aus:

Folgende Änderungen werde ich daran vornehmen:

  • Critical Chain Projektmanagement stärker in den Vordergrund rücken
  • Einen eigenen Punkt „Unternehmen“ einführen
  • Begriffe der Hauptnavigation intuitiver gestalten (aktuelle Begriffe wie „µProject“ und „MPM Simulator“ erfordern zu viele Vorkenntnisse, um als Einstiegspunkte in der Seitenstruktur geeignet zu sein)

Die Hauptseiten werden sich stärker am klassischen Aufbau einer Unternehmenswebsite orientieren und ohne Vorkenntnisse verständlich sein. „Critical Chain“ bildet hier eine Ausnahme, allerdings wird der Begriff auf der Startseite deutlich als Hauptthema eingeführt und auch als Produktname verwendet. So sehen also die Hauptseiten aus, die gleichzeitig die erste Ebene der Navigation bilden werden:

Die drei bisherigen Hauptseiten „Mikroprojektmanagement“, „High-Speed-Pyramide“ und „MPM-Simulator“ werden in den Bereich Know-How verschoben. Gleichzeitig bekommen die neuen Bereiche „Critical Chain“ und „Unternehmen“ eine detailliertere Unterstruktur:

Komplette neue Seitenstruktur

Auf dieser Grundlage kann ich jetzt das Navigationsdesign, also Aussehen und Funktionalität, definieren, sowie die Inhaltsstruktur der Seiten angehen.

Verwandte Artikel

Speed4Projects Website Redesign – Teil2: Klärung der Anforderungen

Nachdem ich die Bestandsaufnahme erledigt habe, mache ich mich gemeinsam mit dem Kunden daran, die genauen Anforderungen an das Redesign festzulegen.

Wolfram erläutert mir dazu zunächst aus seiner Sicht, welche Ziele er mit der Webseite verfolgt, welche Zielgruppen er sieht und wo er sich Veränderung für die Seite wünscht. Zur Verfeinerung einzelner Punkte, wie Logogestaltung, Navigationsdesign, Typographie, schauen wir uns gemeinsam etliche Webseiten an, die wir im Vorfeld als Beispiele zusammengetragen haben. Um die Verkaufsargumente auf der Webseite optimal aufbereiten zu können, erläutert mir Wolfram zusätzlich die Methode und deren Einsatz beim Kunden.

Betrachten wir zunächst die beiden Hauptzielgruppen:

Zielgruppen

1. Geschäftsführer mittelständischer Unternehmen

Persona: Chef Mittelstand

Ziel des Kunden

Lösung akuter Probleme und Optimierung seines IT-Projektmanagements

Anlass für Besuch der Website
Mehr über die Seriosität von Speed4Projects erfahren nach Empfehlung oder Erstkontakt. Sicherheit gewinnen, dass es sich lohnt, Zeit und Geld zu investieren.

Ziel Speed4Projects
Geschäftsführer nimmt Kontakt auf oder vertieft den Kontakt

Einfluss auf das Redesign
In der Regel hat die Zielgruppe wenig Zeit, keine vertieften Kenntnisse im Bereich Projektmanagement, emotionaler Ersteindruck hat großen Einfluss auf die Bewertung des Services, d.h. die Website muss schnell und einfach überzeugen:

  • Startseite muss die wichtigsten Kaufargumente überzeugend präsentieren und weiterführende Links zur Vertiefung des Themas anbieten
  • Kaufargumente und Methode müssen kurz, übersichtlich und leicht verständlich dargestellt werden und relevante Fragen klären: Löst die Methode die Probleme meines Unternehmens? Wie ist die Vorgehensweise? Wie lange dauert es, bis ich erste Erfolge sehe?
  • Vertrauen in die Methode und das Unternehmen muss geschaffen werden: Referenzen, Erfolgszahlen, seriöser Auftritt


2. Leiter von Project Offices, Programmmanager, Seniorprojektleiter

Persona: Projektleiter


Ziel des Kunden
Wege finden, um seine IT-Projekte sicherer und besser abliefern zu können, um erfolgreicher zu sein

Anlass für Besuch der Website
Fachliche Weiterbildung; Herausfinden, ob Critical Chain Project Management eine Lösung für aktuelle Probleme bietet und damit zum persönlichen Erfolg beitragen kann.

Ziel Speed4Projects: Kontaktaufnahme, Vermittlung eines Akquisegesprächs mit einer höhergestellten Führungskraft oder Geschäftsführung. Verwendung der bereitgestellten Materialien und Informationen. Weiterempfehlung des Unternehmens und der Methode.

Einfluss auf das Redesign
Verkaufsargumente überzeugend und zur Weiterverwendung in Entscheidungsvorlagen aufbereiten, komplexe Inhalte (Methoden, Werkzeuge, Videos, Wiki-Einträge, Einführungen, Vorträge, Veröffentlichungen) übersichtlich und anschaulich verfügbar machen.

Allgemeine Anforderungen

Zusätzlich zu den zielgruppen-spezifischen Anforderungen haben sich folgende allgemeine Anforderungen für das Website Redesign ergeben:

Inhaltliche Überarbeitung
  • Critical Chain Project Management stärker ins Zentrum der Website rücken, Methode und Komponenten der Beratung verdeutlichen, Rahmenbedingungen für die Einführung deutlich machen
  • Ein Teil der Materialien und Informationen sind öffentlich als Teaser zugänglich. Weiterführenden Inhalte werden in einen geschlossenen Mitgliederbereich verlagert, der für Besucher nach einer kurzen Registrierung zugänglich ist. Im Idealfall sollen Besucher bei der Registrierung Gründe für den Besuch angeben und sich im Idealfall für den Newsletter registrieren.
  • Fachliche Inhalte neu strukturieren: weniger breiter Themenzugang, detailreiche Inhalte auf unterste Ebene der Informationsarchitektur
Gestalterische Überarbeitung
  • Logo: Wunsch: Visualisierung eines Projektdiagramms
  • Farben: rot als Farbe soll bleiben, sonst schwarz, grau, weiß
  • Design: leicht, schlicht, seriös
  • Usability: einfache und schnelle Bedienung, klassische Bedienung ohne Experimente, kein Flash
  • Schriftart: bisher Avantgarde, muss nicht beibehalten werden, auf jeden Fall aber serifenlose Schrift
  • Bildsprache: Verzicht auf übermäßigen Einsatz von Agenturfotos (siehe Nielsen-Studie zur Verwendung von Agenturfotos), einheitlicher Stil für Illustrationen
  • Technologie: Typo3
Nächste Schritte
  • Webstatistik-Analyse der bisherigen Seite
  • Analyse der bisherigen Informationsarchitektur, Neugestaltung der Infoarchitektur
  • Logo-Studien erstellen
Verwandte Artikel

Speed4Projects Website Redesign – Teil1: Bestandsaufnahme 5

Wolfram Müller hat sich dankenswerter Weise bereit erklärt, dass ich das Redesign seiner Website hier im Blog dokumentieren darf. Ihr könnt also an allen Phasen teilhaben und gerne auch eure Kommentare dazu abgeben.

Es geht im Folgenden um die Seite http://speed4projects.net. Speed4Projects bietet Beratung rund um das Thema Management und Beschleunigung von IT-Projekten an. Das ist die aktuelle Startseite der Website:



Als ersten Schritt des Redesigns führe ich eine Bestandsaufnahme der vorhandenen Website durch. Diesen Punkt erledige ich vor dem ersten ausführlichen Kundengespräch, um den Ist-Zustand möglichst unvoreingenommen bewerten zu können.

Logo

Bisheriges Logo Speed4projects

Der Firmenname und das Logo sind das Erste, was ich mir an einer Website anschaue. An diesen beiden Komponenten kann man recht deutlich ablesen, in welchem Stadium der Corporate Identity Findung sich eine Firma befindet. Hat eine Firma ihre Corporate Identity noch nicht gefunden, steht dieser Punkt noch vor dem eigentlichen Redesign der Website, denn nur daraus lässt sich ein Webdesign ableiten, dass das Unternehmen angemessen repräsentiert.

Das aktuelle Logo von Speed4Projects veranschaulicht grundsätzlich schon jetzt den Kerngedanken des Unternehmens: Der Pfeil nach rechts steht für Bewegung nach vorn, rot symbolisiert Dynamik und Schnelligkeit. Was verändert werden sollte, ist die Gestaltung des Logos: das Highlight über dem Pfeil ist wenig professionell gestaltet, Formgebung und Typografie lassen sich interessanter einsetzen.

Design



Headergrafik Speed4Projects

Auf den ersten Blick wird deutlich, dass die Website in die Jahre gekommen ist und eine gestalterische Auffrischung vertragen kann. Beibehalten werden kann die grundlegende Farbgebung in weiß/grau/schwarz mit roten Akzenten. Ausgetauscht werden sollte dagegen auf jeden Fall die Headergrafik. Die Gestaltung der Inhaltsboxen sollte ebenfalls überarbeitet werden.

Navigation



Schauen wir uns zunächst die Bedienung und die Gestaltung an. Mit einer horizontalen Navigation, platziert unterhalb des Keyvisuals ist man auf jeden Fall auf der sicheren Seite, da Besucher sie dort leicht finden. Die Bedienung der Hauptnavigation ist ebenfalls recht einfach: Anklicken des Hauptpunkts öffnet die Navigation der 2. Ebene. Die aktuell geöffnete Seite wird in der Navigation deutlich hervorgehoben. Der graue Verlauf im Hintergrund findet sich auch in aktuellen Designs.

Angepasst werden sollte auf jeden Fall die Gestaltung der 2. Navigationsebene, da sie momentan schwer wahrzunehmen ist: Die Schrift ist zu klein und es besteht kein grafischer Bezug zum Hauptnavigationspunkt. Optional kann ein Indikator ergänzt werden, der den Benutzer darauf hinweist, welcher Hauptnavigationspunkt über eine Unternavigation verfügt.

Aus inhaltlicher Sicht, sollte die Navigation komplett überarbeitet werden. Die aktuellen Hauptnavigationspunkte ergeben momentan nur ein unscharfes Gesamtbild über das Angebot der Firma. Die meisten Begriffe lassen nur wenige Rückschlüsse darauf zu, was auf den entsprechenden Seiten zu finden ist.

Startseite

Die Kernkompetenz der Firma wird in der Überschrift und im ersten Absatz der Startseite deutlich kommuniziert. Positiv ist ebenfalls, dass ein realer Ansprechpartner mit Bild und Kontaktdaten dargestellt wird. Dass die Website bearbeitet und das Unternehmen damit aktiv ist, erkennt der Besucher an den Verweisen auf aktuelle Veranstaltungen.

Verbessert werden kann die inhaltliche Hinführung auf das Thema „Chritical Chain Project Management“. Da der Begriff vielen Besuchern nicht bekannt sein dürfte, sollte er besser in Erläuterungen eingebettet werden. Um die Verkaufskraft der Website zu erhöhen sollte die Methode und die Verkaufsargumente im Einleitungsabsatz deutlicher und wenn möglich kürzer herausgestellt werden. Weiterführenden Links sollten insgesamt besser strukturiert werden.

Inhalte

Ein großer Vorteil der Website ist, dass sie bereits jetzt über viele und vor allem qualitativ hochwertige Inhalte verfügt. Was sich noch verbessern lässt, ist die Struktur der Inhalte. Hier sollten Hierarchie und Gesamtzusammenhang der einzelnen Themen deutlicher werden.

Typografie und Schreibstil

Beispiel Typografie Speed4Projects

Die Texte sind in übersichtliche Absätze gegliedert und durch die Textgröße gut lesbar. Die gewählte Schriftart gibt der Seite einen sehr nüchternen Charakter.

Die Texte sind in wissenschaftlichem Stil geschrieben. Hier gilt es eine Differenzierung im Sprachstil herauszuarbeiten, so dass auf den Einstiegsseiten dem Erstbesucher ein schneller und einfacher Einstieg in das Thema ermöglicht wird, Profis dagegen auf den Unterseiten Detailinformationen im jetzigen Stil präsentiert bekommen.

Fazit

Die Grundsubstanz der Website ist durchaus solide. Aus rein funktionaler Sicht gibt es nur wenige Punkte zu bemängeln. Aus gestalterischer Sicht ist die Website nicht mehr zeitgemäß und sollte aufgrund des Einsatzes im professionellen Umfeld überarbeitet werden.

Ich bringe an dieser Stelle gerne folgenden Vergleich: ein Trainingsanzug erfüllt auch grundlegende Bekleidungsanforderungen aber man würde ihn trotzdem nicht zu einem Geschäftstermin anziehen. Auch eine Website sollte in diesem Sinn Anspruch und Stil eines Unternehmens widerspiegeln.

Im nächsten Artikel erfahrt ihr mehr über das erste Gespräch mit dem Auftraggeber und die Klärung des Redesign-Umfangs.


Geräte zum Aufzeichnen von Fokusgruppen

Eine Fokusgruppe muss nicht immer in den speziell ausgestatteten Räumen eines Marktforschungsinstituts stattfinden, in vielen Fällen reicht ein normaler Besprechungsraum. Ist keine Videokamera zur Hand, genügt in der Regel eine Aufzeichnung der Sitzung per Audio. Für diesen Zweck habe ich vor kurzem 2 Geräte getestet:

Olympus VN-8700PC 4 GB

Aufzeichnung Fokusgruppen Olympus Diktiergerät

Das Gerät ist wirklich idiotensicher in der Bedienung: Record drücken zum Aufnehmen, Einstecken in den Rechner und mp3-Datei runterladen. Trotzdem die Fokusgruppe bei offenem Fenster in einer Fußgängerzone mit Straßenbahn stattfand, konnte man alle Teilnehmer gut verstehen. Um die Hintergrundgeräusche noch besser auszufiltern, werde ich beim nächsten Mal zusätzliche ein Mikro verwenden, das für das Diktiergerät erhältlich ist. Für die Auswertung kommt jeder beliebige Musikplayer in Frage, Vor- und Zurückspulen ist damit recht einfach.

Kosten: ca. 70,- EUR, Mikrofon nochmal 23,- EUR
Fazit: Solide Basisausstattung, die man auch für andere Zwecke gut einsetzen kann.

Livescribe Pulse Smartpen 2GB

Aufzeichnung Fokusgruppe Livescribe Pulse Smartpen

Dieses Gerät ist etwas tricky in der Bedienung, macht aber auch unheimlich Spaß und ist seeeehr faszinierend. 😉 Zuerst ein paar Worte zur Funktionsweise: Im Stift integriert ist ein Mikrofon für die Audioaufzeichnung. Zusätzlich verfügt der Stift über einen optischen Sensor, der die Notizen digitalisiert und automatisch dem Zeitpunkt der Audioaufzeichnung zuweist. Bei der Auswertung kann ich mit dem Stift in die Notizen klicken und erhalte dann die zugehörige Stelle der Audioaufzeichnung abgespielt.

Für die Verarbeitung der Daten gibt es den so genannten „Livescribe Desktop“, eine Software, mit deren Hilfe man die Audio- und Notizen organisieren kann. Hier erhält kann man per Mausklick in die digitalisierten Notizen ebenfalls die entsprechende Audiostelle abspielen.

Aufzeichnung Fokusgruppe Livescribe Desktop

Die Aufzeichnung ist etwas dumpfer als beim Diktiergerät, dafür filtert das Gerät die Hintergrundgeräusche wesentlich besser heraus. Für die Auswertung ist das angenehmer. Hilfreich ist auch, dass ich mir während des Anhörens der Audiospur noch Notizen machen kann, die bei einer späteren Synchronisation des Stifts übernommen werden.

Das Gerät bietet noch viele weitere Funktionen, u.a. die Dokumente direkt im Web zu veröffentlichen (öffentlich oder für einzelne Besucher). Das kann man z.B. für kurze Demos oder Entwürfe nutzen. Mehr Informationen gibt es auf http://www.livescribe.com. Die Preise für das Spezialpapier, das man für die Notizen benötigt, hält sich auch im Rahmen.

Kosten: ca. 90,- EUR das Gerät, 4 A5 Notizbücher ca. 15,- EUR
Fazit: Die Installation und Einarbeitung erfordert etwas Zeit. Wenn man sich an einen ausführlichen Notizstil gewöhnt hat, spart einem die Technologie aber auf jeden Fall Zeit bei der Auswertung, da man nicht die gesamte Sitzung noch einmal anhören muss.

Fazit

Ich werde zukünftig das Diktiergerät für die Backup-Aufzeichnung nutzen, den Livescribe Pen für die Hauptaufzeichnung und die Auswertung.