Eigentlich kann ein Blogbeitrag über Informationsarchitektur auch mal nicht schaden, wenn ich schon in der Liste “IA-Blogs” von Stefan Freimark auftauche. Vielen Dank übrigens, ich fühle mich geehrt! :)
Also … letztens sagte ich zu meinem Kollegen, dass ich mal einen groben Wireframe für eine der Seiten erstellen würde, damit wir uns über den generellen Aufbau abstimmen können.
Kleiner Exkurs: Ein Wireframe ist eine Skizze von einer einzelnen Seite einer Website, wie wir (Informationsarchitekten oder auch Konzepter) sie in Programmen wie Visio, Axure oder webbasierten Wireframe-Tools wie Pidoco erstellen. Diese Skizzen dienen uns in der Konzept-Phase für die Abstimmung mit dem Kunden und letztendlich wird auf Basis von Wireframes das Design und die Programmierung erstellt. So ein Wireframe enthält alle Elemente wie Navigation, Inhalte und Funktionalitäten einer Seite, allerdings nur sehr rudimentär dargestellt. Hübsch werden die Dinger erst, wenn ein Designer dran war. ;)
So, nun hatte ich also angekündigt, einen groben Wireframe zu erstellen. Was dabei rauskam, sah so ähnlich aus wie das hier:
Was man da sieht, hat zwar jetzt keinerlei inhaltlichen Sinn, da ich zur Demonstration schnell mal einen Wireframe aus alten Modulen zusammen geklickt und entfremdet habe. Kann ja nix Echtes aus einem Projekt zeigen. ;) Was man aber dennoch deutlich erkennen kann … das Ding war alles andere als grob … es war bis ins Detail ausdefiniert. Zwar nicht funktional beschrieben, aber dennoch sehr feinteilig.
Mein Kollege war daraufhin so nett, mich auszulachen. ;-) “Grob ist das aber nicht, du hast ja noch nicht mal einen Platzhalter für die Produkte verwendet, sondern sogar echte Daten von der Website kopiert und eingefügt!” meinte er. ;-)
Bin ich nicht in der Lage, mit Visio einen groben Wireframe zu erstellen? Das hab ich mich einmal mehr gefragt … anscheinend wirklich nicht. ;) Ich verfalle wohl viel zu schnell in die Ausarbeitung von Details, die für nen schnellen Überblick erstmal gar nicht wichtig sind.
Allerdings habe ich vor kurzem angefangen, Wireframes mit der Hand anzuscribbeln. Hab ich früher nie gemacht, aber nach ein paar Vorträgen über Paper-Prototyping beim Barcamp in Berlin und bei der Web2.0Expo hab ichs dann doch mal ausprobiert.
Also, Visio verleitet zum spielen (mich zumindest). Will ich mal einen schnellen Überblick über mehrere Seiten haben, vor allem wenn sie stark voneinander abhängen, bzw. man sich überlegen muss, welches Modul auf welcher Seite am meisten Sinn macht, dann ist das Skizzieren auf Papier echt von Vorteil.
Für nen komplexen Wireframe kann man im ersten Entwurf schon mal nen ganzen Tag brauchen. Und wenn man dann weitere Wireframes erstellt, und neue Ideen für weitere Module bekommt, kann man das Ding grad nochmal neu zusammen puzzeln.
Geht man aber hin und malt das Ding auf Papier, dann lässt man all die Feinheiten weg, die so viel Zeit kosten. Und man kann ein Modul auch nicht stundenlang von links nach rechts schieben, von hochkant auf quer umarbeiten, von hellgrau nach dunkelgrau einfärben oder was einem sonst noch so einfällt. Man wird auch nicht von Seitenrastern oder vom Bildschirmformat eingeengt. ;) Wichtig ist erstmal, dass alle notwendigen Module vorhanden sind. Alles weitere kann man dann später am Rechner machen. Und selbst wenn sich beispielsweise ein Modul doch für eine andere Seite besser eignet, kann man es auch immer noch ausschneiden und woanders aufkleben. Und diese Skizzen reichen völlig aus, um mit Anderen das Prinzip durchzusprechen, das man sich augedacht hat.
So sehen sie aus, meine handsigniertengemalten Wireframes:
Warum hab ich das nicht schon früher so gemacht?
Videos im Netz haben mich ja bisher noch nicht so sonderlich interessiert. Und auch den Begriff Screencast hab ich bisher nie wirklich beachtet. Screencasts sind Videos vom Bildschirm, mit denen man die Aktivitäten auf dem Schirm aufzeichnet. Kann man beispielsweise einsetzen, um die Bedienung einer Software oder einer Website zu verdeutlichen.
Nun durfte ich mir letztens die neue Version von Qype als Screencast ansehen. Sven war sogar hin und wieder als Sprecher eingeblendet, was ich ich besonders sympatisch fand. Er hat die vielen neuen Funktionen erklärt. Tolle Idee!
Link: sevenload.com
Und nun stoße ich bei Capitain Commerce, meinem Lieblings-eCommerce-Blog aus Frankreich ebenfalls auf einen Screencast. Er stellt Pearlfection vor und statt hundertausend Screenshots zu machen, hat er einfach ein Video dazu ins Netz gestellt, in dem er seine eigene Kette bastelt:
Überaus praktisch, wenn man eine Website vorstellen möchte!
Ich frage mich, warum man (ich) bei manchen Dingen so lange braucht, bis es Klick macht, und man drauf kommt, wie und wofür man es einsetzen kann. Vor allem, wenn es so vorteilhaft erscheint! Mal sehen, ob es in Zukunft keine Screenshots sondern nur noch Screencasts hier im Blog gibt. ;)
Dabei fällt mir grad ein, dass ich ja selbst schon mal Screencasts gemacht habe. Vor ein paar Jahren habe ich mal einen Klickweg in einem Klick-Dummy mit Morae (Software für Usability-Tests) mitgefilmt, um die Website bei Kunden präsentieren zu können.
So, und jetzt geh ich mal auf die Suche nach einem guten und kostenlosen Screencast-Programm fürn Mac. ;)
