Wenn bei uns die Ideation-Phase mit Recherche, Kreativworkshops und Scribbles vorbei ist, geht es ans Ausarbeiten der Ideen. Das passiert in Form von Wireframes in Axure. Mit den fertigen Wireframes gehen wir schließlich zum Kunden.

Immer wieder stellen wir dabei fest, dass wir Feedback bekommen, das schon einen Schritt weiter geht und sich auf das Design bezieht. Da kommen Aussagen wie „Der Button ist nicht auffällig genug“ oder „Das Icon gefällt uns nicht“. Dann argumentieren wir damit, dass das ja erst mal nur Wireframes sind und solche Details bei der Erstellung des Visual Designs berücksichtigt werden. Doch wodurch entstehen diese Fragen eigentlich? Sind unsere Wireframes bereits zu detailliert? Macht es daher den Eindruck, dass das Design-Team sie später nur noch bunt anmalen würde, und fertig?

Diese Fragen nahm ich als Anlass, mich einmal mit der Art, dem Stil und dem Detailgrad von Wireframes zu beschäftigen. Ganz gemäß „Form follows Function“ stellt sich dabei zunächst die Frage, wozu Wireframes eigentlich da sind.

Generell sollen Wireframes die Inhalte einer Ansicht, die einzelnen Elemente und ihre Platzierung darstellen, sowie das Interaktionsparadigma veranschaulichen. So können diese Themen mit dem Kunden und Entwicklungsteam abgestimmt werden, bevor es in die Designphase geht. Das verhindert, dass das fertige Visual Design einer Ansicht in der Tonne landet, nur weil die Seite generell anders aufgebaut oder funktionieren soll. Zusätzlich können so unnötige Kosten gespart werden.

Zudem dienen die Wireframes als Briefing für die Designer. Daher sollen sie natürlich auch nicht den Eindruck erwecken, bereits Vorgaben für Visual Design zu machen, damit die Designer sich unbeeinflusst und frei an die kreative Umsetzung machen können. Im letzten Schritt wird dann anhand der Wireframes die Spezifikation geschrieben, das Briefing für die Entwickler zur Programmierung.

Vor diesem Hintergrund verzichten wir bei unseren Wireframes auf Farben, verschiedene Schriften oder gar Stilelementen wie Schlagschatten. Ein typisches Wireframe wird daher in Graustufen erstellt.

Ganz klar ungestaltet. Oder vielleicht doch nicht? Schaut man sich das Wireframe genauer an, fällt auf, dass die Buttons runde Ecken haben. (Und das einfach nur, weil das nun mal die Standardbuttonform von Axure ist.) Außerdem liegt der Titel der Filme auf einer transparenten Fläche über den Bildern. Beides Stilelemente, die eigentlich bereits Vorgaben für das Visual Design machen. Dazu kommt noch, dass einige Elemente mit Icons versehen sind.

Was also tun? Anregungen fand ich in dem Blogartikel Why the Best Wireframe Style Is No Style, in dem folgende Überlegung angestellt wird: „The best wireframe style is no style. The result of no style is monochrome – one color against white.“ Begründen tut dies der Autor mit den Argumenten, dass die Elemente dann alle gleich gewichtet wären und sich der Betrachter so besser auf die gesamte User Experience konzentrieren könnte. So würde man über Platzierungen der Elemente und nicht über deren Aussehen diskutieren.

Ich habe also versucht, alle Stilelemente aus unseren Wireframes zu verbannen.

Das Ergebnis könnte dann so aussehen. Irgendwie wirkt diese Variante schicker als die Graustufenversion. Aber ob sie zielführender ist, möchte ich dennoch in Zweifel ziehen.

In meinen Augen ist die Aufgabe eines Konzepters nicht nur festzulegen, welche Elemente wo auf einer Ansicht platziert sein sollten, sondern sich auch Gedanken über die Blickführung des Nutzers zu machen. Dafür ist es wichtig, die Elemente unterschiedlich wichtig darzustellen und damit eine Hierarchie deutlich zu machen. Und dies funktioniert nun einmal über die Größe von Elementen, aber auch über Kontraste, indem manche Elemente hell und andere dunkel sind.

Auch über den Einsatz von Icons sollte sich meiner Meinung nach bereits der Konzepter Gedanken machen. Schließlich ist ein Icon nicht nur ein Dekoelement, sondern kann dem Nutzer helfen, sich auf einer Ansicht zurecht zu finden und Funktionen schneller zu verstehen.

Bleibt mir also nur, wieder einen Schritt zurück zu gehen. Graustufen und Icons wieder rein, aber runde Ecken und Transparenzen bleiben draußen.

Die Lösung für das eingangs beschriebene Problem wird das wohl nicht sein. Aber vielleicht ist das auch gar nicht so schlimm. Immerhin lassen sich Anmerkungen wie „Der Button ist nicht auffällig genug“ wunderbar als Briefing für das Visual Design mitnehmen, diesen Button besonders auffällig zu gestalten.