Mit Cacoo kann man alle wichtigen Steuerelemente nutzen:

• Buttons
• Textbox
• Radio Buttons
• Checkboxen
• GroupBoxen
• und ganz wichtig: Panels (Boxen mit rand)

Neben den Sachen gibt es noch viel mehr. So kann man zum Beispiel komplette Diagramme damit gestalten. Aber in unserem Beitrag geht es um Wireframing, so dass ich auch nur auf diese Elemente eingehe.

In meinem Beispiel habe ich einmal nur das letzte der oben genannten Elemente genommen. Damit wollte ich dir groben Bereiche skizzieren. Was daraus geworden ist, seht ihr hier (Ein möglicher Entwurf für ein neues SteviesWebsite Layout):

Cacoon Wireframing

Klickt am besten auf dem Screenshot, damit ihr auch die wichtigen Details begutachten könnt.

Unterteilungen

Wer nicht nur eins sondern mehrere Projekte am Start hat, muss seine Planungen auch für mehrere Projekte aufteilen. Dazu kann man zusammenhängende Wireframes auch gemeinsam speichern. Unten im Screenshot seht ihr etwas bläuliche Tabs. In jedem Tab ist ein Wireframe oder ein Diagramm gespeichert.

Team Entwerfen

Ein tolles Feature ist, dass man seine Entwürfe mit anderen teilen kann. Wenn man also (wie wir bei ContentLion) zu mehreren programmiert, können so alle auf die aktuellen Entwürfe zugreifen. Außerdem kann man seine Entwürfe zum Beispiel mit Twitter verbreiten.

Fazit

Meiner Meinung nach ist das Programm richtig gut! Es ist kostenlos und man kann es von überall nutzen. Ich bin am überlegen, das ganze für unser OpenSource Projekt ContentLion einzusetzen.

Ein gelungenes Beispiel dafür bietet Web.de. Wer sich dort einloggen will, um Mails abzurufen liest automatisch die Schlagzeilen des Tages. Das liegt zum einen daran, dass man am Bild schon erkennen kann, um was es geht. Die Überschrift und die kurze Beschreibung verleiten einen schnell zum Lesen des Artikels. Ein Beispiel:

Web.de's Artikel Übersicht

Auf der dort dargestellten Fläche werden in meinem Blog derzeit nur 1-2 Artikel angezeigt. Web.de schafft es auf ganze 8! Der Vorteil dabei ist einfach, dass mehr Artikel-Teaser gelesen werden. So findet man schneller etwas interessantes für sich als, wenn man 1-2 Artikel im Blog liest.

Überschrift

Die Überschrift liegt natürlich am Artikel selbst. Dennoch sollte sie so kurz wie möglich den Artikel beschreiben. Durch Sonderzeichen wie den Doppelpunkt kann zum Beispiel das Thema hervorgehoben werden. Beispiel:

Neu: Die Seo Toolbar

Text

Der Text in der Übersicht muss nicht im Artikel stehen. Ich finde die Idee ganz gut, die Meta Descriptionin der Übersicht darzustellen. Die Meta Description steht immer zur Verfügung und sollte die Artikel Seite in weniger als 160 Zeichen gut beschreiben. Diese Methode hat sich schon auf einigen Seiten gut bewährt: Zum Beispiel bei Google. In den Ergebnissen wird wenn vorhanden die Meta Description angezeigt, die ja genauso wie in der Artikel-Übersicht die Leute zum lesen anregen sollte.

Bild

Die Bilder zum Artikel sollten am besten in gleichen Größen vorliegen. So kann man eine einheitliche Übersicht erstellen. Besondere Artikel können dann durch ein größeres Bild hervorgehoben werden.

Jeder Artikel sollte übrigens ein Bild enthalten. Ich weiß, dass es zu vielen Artikeln schwierig ist ein Bild zu finden. Dabei empfehle ich einfach mal ein paar andere Seiten zu besuchen, um zu sehen, was die so für Bilder benutzen.

Fazit

Weniger ist mehr. Wenn ich zu allen meiner Artikel die Meta Description abgegeben habe werde auch ich meine Artikel-Auflistung ein bisschen überarbeiten.

Ich habe mal Breadcrumb-Navigationen großer Seite analysiert und berichte euch hiermit, wie man eine Breadcrumb optimal gestalten kann. 

Kombinierte Breadcrumb

Mir ist aufgefallen, dass auf großen Websites immer weniger Standard-Breadcrumbs gebraucht werden. Sie bauen die Breadcrumb einfach in die Navigation mit ein. Viele blenden diese aber auch einfach in einer anderen Art ein: Durch die normale Navigation sieht man durch eine Baumstruktur trotzdem wo man ist. Ein gutes Beispiel bietet Amazon (obwohl die zusätzlich auch noch die normale Breadcrumb einblenden). Dort sieht die Navigation so aus: 

Breadcrumb in der Navigation

Unscheinbare Breadcrumbs

Breadcrumbs sind unscheinbar, wenn sie auf den ersten Blick gar nicht auffällt. Wenn der Benutzer sie sucht, findet er sie aber dennoch. Denn sie ist immer über dem Content. Das ist meiner Meinung nach eine gute Lösung. So wirkt die Seite nicht so überfüllt. 

Hier ein paar Beispiele: 

Breadcrumb von Bild.de

Breadcrumb Immobilien Scout

Breadcrumb MSN

Breadcrumb PC Welt

Breadcrumb T-Online

RSS-Breadcrumb

Eine Breadcrumb ist mir bei der Analyse besonders positiv aufgefallen: Die Breadcrumb von Spiegel.de. Sie benutzen die Breadcrumb umRSS-Feeds der einzelnen Kategorien zu promoten. Was hierbei natürlich wichtig ist, dass man für jede Kategorie-Seite auch ein RSS-Feed anbietet. 

RSS-Breadcrumb vom Spiegel

Sie sind hier

In einigen Breadcrumb-Navigationen steht voran ein Sie sind hier. Dieses ist meiner Meinung nach überflüssig, denn eine Breadcrumb-Navigation braucht normalerweise keine Beschreibung. Ein paar Beispiele: 

Breadcrumb von Chip

Breadcrumb von Web.de

Startseite oder Seitenname?

Wenn ihr euch die oberen Beispiele mal ansehen, werde ihr feststellen, dass der erste Eintrag oft Home, Startseite oder der Name der Seite ist. Meiner Meinung nach ist der Name der Seite die beste Wahl. Denn so prägt sich nebenbei noch der Seitenname ein. Wenn man auf die ganz sichere Seite geht nennt man einfach Beides z.B. ‘SteviesWebsite Startseite’. 

Fazit

Man sollte mit der Breadcrumb-Navigation mal ein bisschen experimentieren. Das ganze Testet man am besten mit Usability-Tests: Usability Tests mit Google Analytics

Demnächst werde ich noch eine Möglichkeit einbauen, erweiterte Parameter einzugeben. So das man später auch die Größe usw. einschränken kann. Außerdem werde ich vielleicht demnächst noch Banner von anderen Bannervorlagen Seiten mit einbeziehen. Natürlich nur mit der Genehmigung des jeweiligen Anbieters.

Nun wollt ich euch nochmal kurz eine Ergebnisseite zeigen. Wenn man nun nach rot sucht, bekommt man zum Beispiel folgendes Bild:

Bannersuche rot

Man kann neben den Text auch noch ein paar andere Werte angeben, wie zum Beispiel Schriftfarbe, Schriftart usw. Erstmal ist es nur möglich, in der Kategorienansicht auf das Icon zu klicken, später wird aber auch direkt in der Banneransicht ein Link sein.

Das Icon in sieht zum Beispiel so aus:

Klick man darauf, wird man direkt zur Bearbeiten-Seite weitergeleitet.

Derzeit ist das bearbeiten nur bei sehr wenigen Banner möglich. Aber ich werde nun nach und nach immer mehr Banner editierbar machen.

Hier sind die Formate, die ich gewählt habe:

• Fullsize (468×60)
• Leaderboard (728×90)
• Medium Rectangle (300×250)
• Square Button (125×125)

Das macht meiner Meinung nach das Laden der Seiten viel angenehmer.

Derzeit können auf Bannervorlagen-Kostenlos einige Banner nicht angezeigt / heruntergeladen werden. Sie werden angeblich nicht gefunden. Im FTP sind sie jedoch noch vorhanden.

Ich bin gerade dabei gewesen, die Banner von SteviesWebsite nach Bannervorlagen-Kostenlos.de zu verschieben (weil die Banner waren immer noch auf SteviesWebsite.de gelagert). Dabei wurde von einer Sekunde auf die nächste keine der neu eingebundenen Banner mehr gefunden.

Das Problem liegt meiner Meinung nach an einer Störung bei meinem Hoster. Ich habe diesen bereits kontaktiert.

Aber keine Angst, ist sind nur alte Banner betroffen. Bis zu den neueren bin ich noch nicht gekommen. Evtl. sind diese auch gleich schon wieder zu erreichen. Das komische an der Sache ist, dass die Banner auch auf der neuen Url eben noch funktioniert haben. Komisch. Mal sehn was mein Hoster dazu sagt.

Ach ja, Sorry für den Ausfall.