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.

Die Schwerpunkthemen sind heute mobiles Web und Informationsarchitektur.

Mobiles Webdesign

Das mobile Web aus Usabilitysicht: Braucht man spezielle Lösungen für mobile Besucher, wo gibt es Schwierigkeiten und was sind Ansatzpunkte für Verbesserungen?

Lohnt der Aufwand, Websites für mobile Zugriffe anzupassen? Mobile Web Design: Is it Worth It? Es kommt darauf an.

Außerdem eine Präsentation zum Thema, die sich mit der, v.a. durch das iPhone bedingten, Geräte- und Applikationsfixierung beschäftigt: Lessons in Design and Strategy for Your Mobile Experience.

Informationsarchitektur und Organisation

Eine Einführung ins Cardsorting: Mit einem Card Sorting zur nutzerfreundlichen Informationsarchitektur. Wer’s noch nicht getan hat, sollte es unbedingt mal ausprobieren.

Im Bestreben, Websites übersichtlich zu gestalten, sollte man nicht voreilig streichen: Visual Hierarchy is the Art of Managing, Not Eliminating.

Die Homepage als Bauchladen hat ausgedient: The decline of the homepage.

Vermischtes

Ausblick auf neue Layouttechniken mit CSS3: The CSS 3 Flexible Box Model.

Wenig ist einfach. Denkste: Simplicity isn’t that simple.

Einführung in Grids: Grid-Based Web Design, Simplified.

Ein Re-Design. Hintergründe dazu im Happy Cog Studio.

Corporate Websites sind keine Silos mehr, in der wir alle unsere Daten und Features reinstopfen, um dann alle Interessenten einzeln ins Silo zu lassen, um sich die Sache mal anzusehen.

Über die Anforderungen an moderne Corporate Websites: 5 Wege die Corporate Website mit Social Technologies weiterzuentwickeln.

Das Problem mit den WirHabenDochKeineZeitUndKeinBudget-Gespenstern: The User Centered Design Conundrum.

Gedanken zum Thema Wireframes: The Future of Wireframes.

Tabellen haben auch ihre Daseinsberechtigung. Ein paar Tipps und Anschauungsbeispiele: Ultimate guide to table UI patterns.

Print stirbt, Digital rockt. Verwirrung. Über verschiedene Arten von Content und damit umzugehen: Books in the Age of the iPad.

Simon Collisons Website besticht durch schlichte Eleganz und eigenwillig bebilderte Teaser.

Der Bithalter dieses Mal zu 2/3 deutschsprachig. So könnte das weiter gehen.

• Kuck Mama, das arbeite ich: Konzeption & Design in der Praxis
• Das lautlose Geheimnis guter Websites: Was ist eigentlich Informationsarchitektur?
• Einweg-Prototyping: Schnelle Ergebnisse mit Throwaway Prototyping
• Dort sein, wo der Kunde ist und da sein, wenn der Kunde da ist? Social Media: Dialog rund um die Uhr?
• Social Media is No Holy Grail
• Tools for concatenating and minifying CSS and JavaScript files in different development environments – Robert’s talk

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

Nummer 17 diesmal ohne mein Webdesign-Highlight der letzten Tage. Mehr Comics zum Thema Bloggen finden sich in der Linkliste.

• Zoomen ist nicht einfach, auch wenn man sich scheinbar, dank moderner Browser, keinen Kopf mehr darüber machen muss: Die Barrierefreiheit heranzoomen
• Stecken Webdesign-Magazine in der Qualitätskrise? Das Qualitätsbewusstsein bleibt auf der Strecke …
• Pleasure and Pain » So you wanna be a user experience designer — Step 1: Resources: Teil 1 einer Serie zum Einstieg in UX
• Wie erkennt man eine Überdosis Bloggen? Top 25 Funniest Comic Strips About Blogging
• Für ein besseres Miteinander sollte man zunächst die Konfliktfelder kennen und an sich arbeiten: 5 Pet Peeves Designers Have With Developers (and How to Avoid Them)
• 55 Jquery Tutorials, Resources, Tips And Tricks: Ultimate Collection
• Produktfeatures klarer präsentieren durch (optische) Täuschung: Using Deceptive Design Elements to Emphasize Product Features
• Na, tut sich was? Keep Users Updated During Long Load Times

Abbildung: ProBlogger Trick Chicks

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

Das Blog von 45royale Inc., für mich immer noch eins der weltbesten Blogdesigns. Klar strukturiert, schönes Raster, kontrastreich und und schöne Typo. Abzüge gibt’s für die vielen Fehler im Markup.

• Web Design from the Gut: Interessanter und praxisnaher Einblick in den oft komplexer als gedachten Webdesignprozess am Beispiel MIX
• Visual Hierarchy in Web Design: Visuelle Hierarchien unterstützen bei der Aufnahme von Informationen
• 25 Incredibly Useful Usability Cheat Sheets & Checklists: Zeit mitbringen. Aber viele gute Tipps.
• Top 10 Information Architecture Mistakes: Informationsarchitektur hat mehr zu bieten als Sitemaps
• The future of wireframes?: Die Anforderungen an Wireframes haben sich geändert. In manchen Fällen sind sie sogar überflüssig.