Ein Thema, das sich kontrovers diskutieren lässt. Wireframes sind in der Tat nicht immer das Architektur-Mittel der Wahl. Aber in sehr vielen Fällen sehr wohl.

Was mir immer aufstößt, sind Pauschalisierungen, ohne Kontext.

Hierzu mal zwei Äußerungen des Autors:

It doesn’t take a good designer long to whip up a Photoshop mockup, and a good coder can create a HTML prototype in a short time too. Both can be reused in the final product (which saves time), and both are much closer to the real experience than a wireframe (which helps make the right decisions).

Mag sein. Aber a) sind Wireframes immer noch schneller und b) können die richtigen Personen auch auf Basis von Wireframes die richtigen Entscheidungen treffen – zum richtigen Zeitpunkt im Prozess. Es gibt natürlich aber auch Fälle und kleinere Projekte, in denen der Wireframe schon zur Kanone gegen den Spatzen mutiert. Es kommt darauf an.

My problem with your point is that because wireframes are so easy to modify, people get obsessed with shuffling things around until they obtain a perfect wireframe, but this really doesn’t accomplish much: a perfect wireframe does not translate into a perfect site, there are just too many factors that are left aside at such an early stage.

Ein perfekter Wireframe ist natürlich keine Garantie für ein perfektes Endprodukt. Ein guter Wireframe trägt aber zu einem soliden Fundament bei. Die Angst vor Leuten, die einen Wireframe zum Anlass nehmen, Dinge immer wieder hin und her zu schubsen, liegt in einer fehlenden Prozess- und Methodenkenntniss begraben. Es kommt darauf an, wann und für wen die Wireframes in Frage kommen.

Hierzu kann ich ein Buch sehr empfehlen. Dan M. Browns “Konzeption und Dokumentation erfolgreicher Webprojekte”. Darin geht es v.a auch darum, wann, in welcher Form man Deliverables (so auch Wireframes) erstellt und wem und wann man sie präsentiert. Das Buch habe ich vor einiger Zeit hier mal vorgestellt.

Die Ursachen hierfür sind nicht selten Anforderungen nach dem Motto „Die Startseite muss die Wurst sein“ oder „Den Nutzer packen und reinholen“. Verlustängste und unscharfe Zielvorgaben tun ihr übriges.

Unter Dauerbeschuss stehende, dadurch überforderte und genervte Besucher wenden sich ab und verlassen die Webseite. Sofern es Alternativen gibt oder der Markt nicht rein von Preisen diktiert wird.

Selten sieht man Geschäfte bzw. Läden, deren gesamtes Angebot draußen vor der Tür oder im Schaufenster ausgebreitet ist. Wo ist also das Problem bei Webseiten? Wo kann man ansetzen?

Zunächst muss man Verlustängste abbauen. Keiner verpasst etwas wesentliches, nur weil nicht gelich alles auf der Startseite erscheint. Es hilft ungemein, wenn man sich mal Gedanken über die Ziele und Aufgaben einer Webseite macht. Wenn man sich auf die wichtigsten Inhalte und Botschaften konzentriert. Voraussetzung hierfür: Kenne/definiere Deine Zielgruppe(n) und Ziele.

Die Startseiten bzw. Homepages sind nicht immer die wichtigsten Seiten und verlieren zudem weiter an Bedeutung: The Decline of the Homepage. Ich denke aber, dass Homepages meistens – für den Einstieg – doch noch die wichtigsten Seiten darstellen.

Das Bauchladensyndrom gilt es zu behandeln, in dem man Prioritäten setzt (Kampf um die besten Plätze) und die Herausforderungen gestalterisch löst (Essential Tips for designing an effective Homepage).

Eine Homepage ist irgendwie auch eine virtuelle Ladentheke.

Gerade von Kunden angefertigte Skizzen sind besonders wertvoll. Das Skizzieren einer Website und deren Features erleichtert die Kommunikation zwischen Kunden und Webdesigner erheblich.

Das abgebildete Beispiel gehört zu meinem aktuellsten Auftrag. Nach einem ersten Vorgespräch lieferte mir der Kunde zwei Zeichnungen und außerdem einen Ausdruck einer Website, die ihm besonders gefallen hat. Auf den Ausdruck hat er sogar noch weitere Details ergänzt, in dem er Bereiche mit Papier und Klebeband überklebte. Die Skizzen waren außerdem mit zahlreichen Stichpunkten und Hinweisen zu den Inhalten und damit auch zur Informationsarchitektur der Website versehen.

Ein wertvoler Konzeptbeitrag durch den Kunden

Kunden liefern so einen wertvollen Beitrag zum Konzept. Sie wirken aktiv an der Informationsarchitektur und dem Designkonzept einer Website mit. Die Wahrscheinlichkeit besser verstanden zu werden steigt. Das Endergebnis kann davon nur profitieren.

Scribbles helfen mir also dabei, meine Kunden besser zu verstehen. Warum?

Weil Kunden intuitiv ihnen und uns bekannte Muster aufgreifen. Solche Muster, die ihnen aus dem regelmäßigen Umgang mit dem Internet vertraut sind.

• Metanavigation und Suche
• Aufbau von Navigationsmenüs
• Header und Positionierung von Logos
• etc.

Kunden sprechen dann aber z.B. nicht von einem Masthead. Sie zeichnen einfach ihr Logo dort hin, wo sie es sich vorstellen. Dazu vielleicht noch weitere Hinweise auf gestalterische Details. Wahrscheinlich ergibt es sich dann auch, dass die Navigation mit in diesem Bereich angebracht werden soll.

Sprichst Du Webdesign?

Es geht um Sprache. Kunden kennen selten unsere Fachausdrücke, mit denen wir Anforderungen beschreiben. So fällt es ihnen oft schwer, ihre Anforderungen und Wünsche überhaupt zu äußern. Sie sprechen nicht unsere Fachsprache und -dialekte. Warum auch? Fragen wir dann nicht gezielt nach, drohen bestimmte Anforderungen ganz unterzugehen, oder erst im Projektverlauf hochzukommen. Außerdem besteht die Gefahr, dass beide aneinander vorbeireden und später böse Überraschungen erleben.

Bildsprache

Eine gemeinsame Bildsprache vereinfacht die Verständigung. Von Kunden vorbereitete und zusammen besprochene Skizzen tragen zum besseren gemeinsamen Verständnis bei. Ich selbst habe damit positive Erfahrungen gemacht und kann nur empfehlen, es einmal zu versuchen und zusammen mit einem Kunden diesen Weg zu gehen. Ich sehe die Scribbles als Vorstufe von Wireframes, die von mir im nächsten Schritt erstellt werden. Diese werden dann sehr wahrscheinlich schon ziemlich genau den Vorstellungen des Kunden und einer allgemein vernünftigen Informationsarchitektur entsprechen.

Autor Kai Turner beschreibt die aktuelle Rolle des Informationsarchitekten u.a. so:

We help our clients describe their own mental model of how they envisage an interactive service, and we match that with the ‘design image’ of that service – that is, how people will actually perceive it, once it’s built.

Er beschreibt dann aktuelle Trends und Entwicklungen, die Einfluss auf den Job des Informationsarchitekten haben (werden).

• Vom Monolog zur Konversation (Web of Conversation)
• Das Immerundüberallprinzip (Hyperlocal Awareness)
• Internet der Dinge (Internet of Things)
• Die Weisheit der Vielen – oder kollektive Intelligenz (Ominscience of Crowds)
• Userexperience (Fun follows Function)

Vom Hypertext zum Hypercontext. Und das vor dem Hintergrund, dass bereits der einfache Kontext oft schon nicht in konzeptionelle Überlegungen mit einfließt. Chaos vorprogrammiert?

Der Kontext wird definitiv vielschichtiger und Komplexer. Was die Aufgabe nicht gerade vereinfacht. Es reicht nicht mehr aus zu wissen, wie der durchschnittliche Benutzer aussieht und sich verhält – auf seinem Stuhl, vor seinem Computer. Wo kommt er her? Wo befindet er sich ? Welche Art Zugang zum Netz hat er? Auch solche und weitere Fragen müssen beantwortet werden. Das Web ist (fast) überall verfügbar und wenn man mag, kann man es (fast) überall mit hin nehmen.

In diesem Zusammenhang ist auch Michael Jendryschiks Übersetzung “Web Squared: Web 2.0 nach 5 Jahren” ganz interessant.

Gefunden im User Expierence Pool

Beim Betrachten eines Wireframes, kam mir heute der Gedanke, dass der “Skizzenlook” seine Vorteile hat. Das kommt natürlich auch auf den Betrachter und die Phase im Designprozess an. Eine Skizze vermittelt direkt den Eindruck von Unvollkommenheit. Genau das kann gewünscht sein.

Occasionally, the designer still feels the need to communicate the interface with a style which invites change by suggesting incompletion. Computer Based Sketchy Wireframes

Das Problem bei cleaneren Varianten besteht darin, dass Laien sie oft mit dem konkret zu erwartenden Design gleich setzen. Nicht selten sind dann Anmerkungen wie z.B. “Das ist aber etwas farblos”. Eine Skizze stellt das von vorn herein klar und man konzentriert sich eher auf die Organisation der Oberfläche.

Foto: flickr

Users surfing the Internet orient themselves not unlike migrating birds. Each species of bird has her own special way of orienting herself, building a mental map of where she is and where she wants to go.Better User Orientation through Navigation

Die Navigation einer Website besteht nicht nur aus einem prominenten horizontalen oder vertikalen Balken von Links. Oft bezeichnet man das – nicht ohne Grund – als Hauptnavigation. Aber auch das kann sich relativieren.

Oft liefert man den Besuchern weitere Navigationsoptionen, über die man sich nicht immer direkt bewusst ist.

• Links im Textfluss
• Links im Footer (z.B. Impressum o.ä.)
• Tag-Clouds
• Archive
• etc.

Oft muss man ab einer bestimmten Komplexitätsstufe daran denken, weitere Hilfen anzubieten:

• Suche
• Breadcrumbs
• etc.

Ausführlicher: Better User Orientation through Navigation

Artikel zu diesem Thema gab’s schon öfter. Mir gefiel der Vergleich mit den Wandervögeln.

Die Oberflächen im Web werden dynamischer – sie müssen es auch werden. Nicht unbedingt nur, weil jQuery & Co bei Webdesignern gerade angesagt sind. Die Entwicklung trägt v.a. – auch weil technologisch immer mehr möglich ist – den Bedürfnissen der Nutzer Rechnung. Es sind Konzepte gefragt, die den Nutzern mehr individuellen Spielraum lassen und damit auch die Userexperience weiterbringen können.

Gerade Medienwebsites, wie die der BBC, stehen vor der Herausforderung, es möglichst vielen unterschiedlichen Besuchern recht zu machen. Alleine schon, wenn man an die verschiedenen Interessen der Besuchermassen denkt. Man steht vor einer nahezu unlösbaren Aufgabe. Aber es gibt mittlerweile Mittel und Wege, diesem Anspruch etwas näher kommen zu können.

Der Ansatz der BBC gefällt mir sehr gut. Weitere Details mal außen vor gelassen.

Ein Basis-Set

Hier sind wir noch in der gewohnten Umgebung unterwegs. Ein statisches Basis-Set, dass den Anforderungen und Bedürfnissen der meisten Besucher möglichst nahe kommt, bildet den Ausgangspunkt. Bei einer Newsseite ist das schon sehr schwer. Hat sie doch einen viel breiteren Fokus, als z.B. spezielle Themenwebsites oder -blogs.

BBC mag es gelungen sein, ein solches abgerundetes Konzept gefunden zu haben. Das nehme ich einfach mal an, da es hier lediglich um den theoretischen Ausgangspunkt geht. Auf diesem mehr oder weniger statischen Konzept muss das Interface für die Nutzer weitergedacht werden.

Hier baut der User

Die Informationsarchitektur und das Angebot an Inhalten, soll nicht mehr ausschließlich statisch vorgesetzt werden. BBC setzt auf Personalisierung. Die Besucher sollen sich die Startseite ganz nach ihren Vorlieben zusammenstellen können. Sowohl thematisch, als auch organisatorisch.

Die Nutzer bekommen vier zentrale Anpassungsoptionen angeboten.

Hinzufügen von Themenblöcken und Anpassung der Farben

Entfernen von Themenblöcken

Einstellungen für einzelne Module ändern

Position verändern per Drag&Drop

Ein Konzept der Zukunft

Ein solides Basis-Set (Design, Informationsarchitektur und Inhalte), dass für die Nutzer komfortabel anpassbar ist, hat definitv Zukunft. Gerade für sehr contentlastige und sich ständig aktualisierende Angebote, wie das der BBC.

Die zentralen Punkte, die der genannte Artikel dazu erläutert:

• Suchmöglichkeit überall anbieten
• Auch auf 404-Seiten
• Optionen anbieten, wenn die Suche keine Treffer ergab