Die Kunst, einen groben Wireframe zu erstellen

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:

wireframe57.jpg

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:

wireframe-scribbles_kl.jpg

Warum hab ich das nicht schon früher so gemacht?

Screencasts wohin man schaut

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. 😉

Wenn der Hund dem Chefkoch …

… auf die Mütze ka macht … dann ist das die moderne Art, Punkte zu sammeln. 😉

Das ist tatsächlich so, hab ich vor ein paar Tagen auf Payback erfahren. Erinnert Ihr Euch noch an diese schicke Animation des holländischen Shops HEMA, die so nett mit den Seitenelementen und den Produkten spielte? (Ist sogar noch online) Payback hat nun auch eine Flashani über die Seite gelegt, die nach diesem Prinzip arbeitet. Payback stellt damit die moderne Art, Punkte zu sammeln vor und lässt einen Hund die Seite aufschlitzen, die Navi wegsaugen, mit einem Flugzeug fliegen usw. Wirklich angekommen ist die Botschaft bei mir aber nicht, ich glaube, sie meinen damit eine Payback-Kreditkarte.

Insgesamt wirkt das Filmchen etwas langatmig und zusammenhanglos … zumindest bringt es keine wirklich neue Art, Punkte zu sammeln, rüber. Da würde ich dem holländischen Vorbild auf alle Fälle mehr Punkte zuschreiben. Aber (wahrscheinlich ungewollt) witzig ist auf alle Fälle dieser Part hier:

payback.jpg

Direkt nachdem der Sprecher sagt “Erleben Sie jetzt die moderne Art, Punkte zu sammeln”, hopst das kleine Hündchen dem Chefkoch auf die Mütze und macht einen Haufen. Sorry, aber ich musste einfach lachen. 😉

PS: Stelle mal wieder fest, dass die Musik am Ende von HEMA echt Laune macht … könnte ruhig noch ein bissl länger laufen. 😉

Nachtrag: Sehe gerade, dass es im Payback-Blog auch den dazugehörigen TV-Spot gibt. Dort ist der Sprecher wesentlich redefreudiger und erzhlt ein bissl mehr, was diese Karte kann. Warum nicht auch auf der Website? (hui, in den Kommentaren gehts ja hoch her;)

Pearlfection – Perlenketten basteln und auch verkaufen



Mit Pearlfection gibt’s nun noch einen Anbieter, bei dem man sich Perlenketten selbst zusammenstellen und bestellen kann. “Noch einen”, weil ich letztens ja schon mal den Bijoudesigner vorgestellt hatte und weil auch Jochen schon über Julie & Grace berichtet hat.

Pearlfection hat nun all das an Social Features, die uns letztens beim Bijoudesigner fehlte: Man kann nämlich nicht nur Ketten gestalten, sondern sie auch gleichzeitig auf dem “Marktplatz” verkaufen, bzw. auch sehen, wer sich auf der Plattform noch so alles tummelt und welche Ketten diese User bereits gestaltet haben. Und natürlich kann man auch diese Ketten kaufen.
Wer nicht genug eigene Ideen mitbringt, kann auch eine Beispielkette als Vorlage nehmen, und diese verändern. Warum kann man eigentlich nicht eine Kette aus dem Marktplatz nehmen und verändern? Geht doch bei den Fabidoos auch! 🙂

Ich habe jedenfalls mal ein obligatorisch grünes Armbändchen gestaltet (gibt auch Halsketten und Fuß- und Handykettchen) und musste dafür erstmal meinen Armumfang messen. Für die Länge gibts nämlich einen Slider. Also erstmal ein altes Ikea-Maßband rausgekramt und gemessen … Mein Arm ist also 16 cm dick – plus ein paar Perlen hab ich mal ne Länge von 19 cm ausgewählt – keine Ahnung, ob das reicht. Dann gehts weiter zur Perlenauswahl:

perlenauswahlk.jpg

Hier kann man die Perlen nach Perlentyp oder nach Farbe auswählen, hinzufügen, verschieben und so weiter. Irgendwie bin ich damit aber nicht so richtig gut zurecht gekommen. Das nachträgliche “anfassen” und verschieben der Perlen gelingt nicht so einfach. Man sieht zwar in der Mitte so ne Art Lupe, die anzeigt, wo man sich mit der Maus gerade befindet, aber die Markierung der Perle braucht zu lang um zu erscheinen und das Ziel des Verschiebens wird gar nicht angezeigt. Man zieht also die Maus durch die Gegend und hofft, dass die Perle dann am richtigen Ort landet. Auch dass die Perlenauswahl rechts ist, und die Anzeige der aktuell ausgwählten Perle am linken Bildschirmrand, macht es nicht gerde hilfreich. Den “Löschen”-Button habe ich zb. ne ganze Weile suchen müssen. Der Button “Element rechtes vom Pfeil einfügen” ist im Prinzip ein Wechelschalter, den man auch auf links einstellen kann. Das wird aber auch erst nach dem Ausprobieren deutlich. Prima ist aber die Möglichkeit, das Muster zu vervollständigen! Einfach ein paar unterschiedliche Perlen auswählen und mit einem Klick ist dann das ganze Armband voll!
Rechts unten gibts dann die Möglichkeit zum kaufen … will man aber nicht kaufen, sondern das Ding nur verkaufen, muss man den “Speichern”-Button oben links finden. Naja, und so weiter … ich weiß sehr gut, dass es nicht einfach ist, einen solch komplexen Konfigurator zu erstellen … aber hier gibt’s wohl noch ein bissl Optimierungsbedarf. 😉

perlenarmband.jpg

Ist das schicke Teil dann fertig, kann man selbst eine Provision festlegen (es gibt allerdings einen Maximalbetrag, keine Ahnung, wie der sich errechnet) und die Kette dann auf den Markplatz packen. Auch die Hintegrundfarbe kann man auswählen.

perlenmarktplatzk.jpg

Im Marktplatz sieht man dann schon an der kleinen Vorschau neben der Kette, um welche Art von Kette es sich handelt – bei den Halsketten sogar, wie lang sie ist. Über eine Filterfunktion kann man die Anzeige einschränken – nach Ketten-Typ, Farbe oder Perlentyp. Userbewertung und Kommentare fehlen natürlich auch nicht.

Nächster Schritt wäre dann wohl ein einer Shop, den man sich exportieren kann, oder? 😉

Julie & Grace, die mit einem sehr ähnliche Konzept am Markt sind, habe ich bisher noch nicht ausprobieren können (ja ja, die Zeit;), aber ich hab ja auch kein Armbändchen geschickt bekommen, wie ander Blogger. 😛 Warum krieg ich eigentlich aus allen Ecken olle Pressemitteilungen zu irgendwelchen Web2.0-Dingens geschickt, die mich nicht interessieren, während Social Commerce-Infos nicht bei mir landen? 🙁 Ach ja, Päckchen bitte an meine Büroadresse, dann muss ich nicht extra zur Post laufen um sie abzuholen … 😛 (Nein, ich bin nicht bestechlich!)

Nachtrag: Capitaine Commerce hat ein Video (Screencast heißt das, oder?) von der Bedienung des Design-Tools gedreht.