Prototypen: Mock-Ups mit Photoshop oder Html und Css?

Ein Streit ist ausgebrochen zwischen den berühmt-berüchtigten Basecamp-Machern 37signals und dem Designer der bekannten Web-Agentur blueflavor.

Streitpunkt: Entwicklung von Ideen mit oder ohne Photoshop

Die Macher einer der erfolgreichsten Web Applikations-Suite mit Basecamp, Campfire, etc. sehen folgende Gründe für das Verwenden von Html und Css im Entwicklungsprozess:

  • Keine Interaktionsmöglichkeiten bei einem Photoshop-Mockup (kein Klicken, Navigieren, etc.)
  • zu hoher Fokus auf Details
  • Text in Photoshop ist nicht der Text, den man im Browser sieht
  • Dopplung von Arbeit: Zuerst in Photoshop und dann erneute Umsetzung in html und css
  • Photoshop erschwert die Zusammenarbeit, da nicht alle diese Software verwenden und es meist einen Experten gibt

Die Antwort von blueflavor:

  • für das visuelle Design ist Photoshop unumgänglich (37signals hat bereits einen etablierten Stil)
  • für einfache Web Applikationen ist nicht viel visuelles nötig, für bestimmte (z.B. Corporate Web-Seiten) schon
  • Kunden wollen etwas sehen für Geld. Im wahrsten Sinne des Wortes. D.h. visuelle Kommunikation (auch im Detail) spielt eine grosse Rolle

Die richtigen Tools für die richtige Anforderung

Ich denke, dass beide Herangehensweisen etwas wichtiges und richtiges beinhalten. Ein wesentlicher Vorteil der Html und Css-Mockups ist natürlich die Möglichkeit, sie in der Produktion weiterzuverwenden.

Es gibt Bereiche im Design-Prozess, wo der Prototyp mit Html und Css umgesetzt werden sollte. Hierbei geht es vor allen Dingen um strukturelle und funktionale Fragen:

  • wo ist der Fokus der Seite?
  • wie strukturieren wir unseren Inhalt?
  • wo kommt Feature x hin?
  • wie funktioniert die Navigation?
  • wie ist die globale Seiten-Struktur?

Widerum andere Fragen lassen sich primär in Photoshop lösen. Vor allen Dingen visuelle und Detail-Fragen:

  • Welche Farben verwenden wir?
  • Hintergründe, Verläufe, Logo
  • genaue Positionierung von Elementen zu einander
  • Icons, Detail-Elemente
  • visueller Gesamteindruck (vor allen Dingen auch für den Kunden=

Weitere Fragen, die man sich beim Herstellen von Prototypen stellen muss:

  • Wer ist die Zielgruppe? (Entwickler im Team, Kunde, Pitch)
  • Wieviel Zeit hat man? (reicht ein Papier-Mockup oder sollte man eine komplette Seiten-Struktur in html und css erstellen)
  • Ermöglicht man anderen konstruktives Feedback? (Lieber in Powerpoint als in Photoshop?)
  • Welche Detail-Stufe ist erfordlich? (Komplettes visuelles Layout vs. strukturelle Übersicht)

Am Rande: Video zu Prototyping-Tools

Ein sehr interessantes Video zur Auswahl des richtigen "Arbeitsgerät" zum Erstellen von Mockups und Prototypen gibt es von Jonathan Arnowitz (Google).

Er distanziert sich zum Teil von den Konzepten von Bill Buxton, über den ich vor einer Weile geschrieben habe. Im Wesentlichen vertritt Arnowitz die Meinung, dass Prototyping mit jedem Tool (von Papier und Bleistift über Excel bis hin zu Visio) gemacht werden kann. Die Frage ist jedoch stets nach Effizienz und Anforderung.

Javascript/Ajax Frameworks von Google gehostet

Im Zuge der steigenden Popularität von Javascript Frameworks, wie z.B. jQuery, hat sich Google entschieden die wichtigsten Repräsentaten auf ihren Servern zu hosten.

Was sind Javascript/Ajax Frameworks?

Vereinfachend kann man sagen, dass Javascript Frameworks dem Designer mehr Interaktions-Potential in die Hand gibt.

Vom dynamischen Nachladen von Content bis hin zu Foto-Slide-Shows, sind die Möglichkeiten solcher Frameworks sehr umfassend.

Ajax ist die Kurzform von "asynchronous javascript and xml" und steht für einen weiteren Baustein der Interaktivität, durch die Aktualisierung von Daten ohne die gesamte Seite neu laden zu müssen.

Die Liste der gehosteten Frameworks:

  • jQuery
  • prototype
  • script.aculo.us
  • MooTools
  • dojo

Vorteile und Nachteile

Der erste wesentliche Vorteil ist ein Geschwindigkeitszuwachs. So müssen die zum Teil beträchtlich grossen Javascript-Dateien nicht mehr vom eigenen Server geladen werden sondern von einem meist schnelleren und besser vernetzten Google-Server.

Der zweite Vorteil betrifft die regelmäßige Aktualisierung der gehosteten Versionen. D.h. man muss als Entwickler nicht jedes Update in sein Projekt integrieren und erneut hochladen, sondern dies passiert nun automatisch.

Die Nachteile betreffen primär die Möglichkeit des Ausfalls und der übliche Vorwurf an Google, Daten von Nutzern zu speichern.

[Eine genauere Auseinandersetzung mit dem Thema findet in dem Artikel über Implikationen für Web Entwickler.]

Beliebtestes Javascript Library: jQuery

In einer Umfrage auf css-tricks.com hat sich jQuery mit 52% als beliebteste Javascript-Bibliothek herauskristalisiert. jquery logo

Die gut 1500 teilnehmenden Web Entwicklern/Designer hatten die Auswahl zwischen einer grossen Zahl der bekannten Frameworks.

Auch ich bin von jQuery's Flexibilität und umfangreichen Plug-Ins sehr begeistert.

Daher habe ich auch ein einfaches, kleines Galerie-Modul in unserem letzten Projekt ximag.de verbaut.

[Hier findet Ihr die kompletten Ergebnisse der Umfrage]

Paper Prototyping: Enwirf Web Seiten auf Papier

Da ich mich im Moment intensiv mit dem Entwerfen von User Interfaces (Nutzer-Schnittstellen) auseinandersetze werde ich eine kleine Serie von Artikeln zum Thema verfassen.

In diesem ersten Beitrag geht es um die einfachste Variante: Dem Entwickeln eines Prototyps auf Papier.

Die Idee hinter einem Protypen

Prototypen mit Papier

Der Fokus bei einem Prototypen sollte primär auf Fragen des Interface, der Struktur, den Prioritäten, der Informations-Architektur und dem Nutzer-Flow liegen. Keineswegs sollten ästhetische oder grafische Elemente eine Rolle spielen.

Die Benutzerbarkeit der Seite sollte überprüft werden, wesentliche Elemente passend gruppiert und die Benutzerführung durchgespielt werden.

Einfach, Schnell und Aufschlussreich

Der Vorteil des Arbeitens beim Prototyping mit Papier gegenüber anderen Formen wie Grafikprogrammen, Powerpoint oder gar Visio ist die Flexibilität, die Schnelligkeit im Umsetzen von Ideen und der Möglichkeit unkompliziert neue Konzepte auszuprobieren.

Inspiration Comic: Papier, Bleistift und Fineliner

paper prototyping - comic style

Ein sehr inspirierender und interessanter Ansatz ist der von T. Scott Stromberg. Zunächst wird mit Bleistift eine grobe Skizze erstellt, die jederzeit noch modifziert werden kann. Wenn man sich für eine Variante entschieden hat, zieht man die wesentlichen Partien und Strukturen mit einem Fineliner nach.

Meine Favoriten sind hier matt kariertes Papier, eine Druckbleistift und ein Pilot Pigment Marker, den ich bei Malstoff.de erstehe. Letzter hat den Vorteil nicht zu verschmieren, nicht zu verlaufen und nicht durch das Papier zu schreiben. Das karierte Papier vereinfacht das Zeichnen von Boxen und Blöcken.

[Mehr zum Thema findet man bei konigi.com. Oder bei www.paperprototyping.com/ und es gibt auch einen A List Apart Artikel über Prototypen auf Papier.]

Die leere Fläche - Zukunft des Interface

In einem Artikel auf smashingmagazine.com über innovatives Design wird unter anderem auch ein neuartiges und wandelbares Interface für den Computer vorgestellt: Das Optimus Tactus.

Der Clou: Design selbstbestimmt

Der echte und innovative Vorsprung, den das von Art. Lebedev Studio konzeptionierte Interface (man kann eigentlich nicht mehr Keyboard dazu sagen) hat, ist die völlige Ebenheit und daraus resultierende umfassende Anpassungs- und Wandlungsfähigkeit des Geräts. So gibt es nicht, wie bei ähnlichen Modellen, individuell belegbare Tasten, wie z.B. beim Optimus Maximus, sondern eine frei konfigurierbare Fläche.

Keyboard für alle?

So lassen sich vom Schnittprogramm über Bildbearbeitung und auch alltägliche Tätigkeiten wie Video gucken und Chatten, wesentliche Controls und Funktionen der jeweiligen Programme, wie gewünscht auf dem Interface arrangieren. Für jeden das Richtige also...

Die wesentliche Frage ist natürlich, wie einfach die Konfigurierung ist. Sollte diese intuitiv und schnell zu lösen sein, so kann ich mir vorstellen, dass das Optimus Tactus Vorreiter sein wird in einem Markt, der bald überfüllt sein wird von interessanten Lösungen. Ich denke, auch für professionelle Verwender wird dies eine durchaus interessante Option sein.

Ausblick: Das letzte Interface

Einen kurzen Schritt zurück, ein paar Monate, und man wird gemerkt haben, dass sich in der Welt des Interface' deutlich etwas tut. Das mittlerweile auch bei uns in Deutschland erhältliche iPhone von Apple hat gezeigt, was man mit einer flachen Fläche alles machen kann.

Die Frage wird sein, ob sich solche Interfaces, die völlig unvordefiniert sind, sich nicht überall durchsetzen werden. Die Vorteile, hier in einem Video mit Jeff Han bei TED scheinen enorm. Vor allen Dingen die individuelle Anpassung und die Interaktion mit mehreren Punkten gleichzeitig scheint Arbeitsprozesse zu beschleunigen.

Der einzige Nachteil, der mir spontan einfällt ist der Mangel an sensorischem Feedback (wie z.B. bei einer normalen Tastatur oder dem Klick der Maus).

Wer mehr über solch innovative Designs erfahren will, kann sich die restlichen Devices im Artikel von smashingmagazine anschauen. Auch bei Microsoft tut sich unter dem Stichwort "Surface Computing" einiges.

Adobe Thermo: Tool für reiche Internet User Interfaces

In einem Artikel über eine Präsentation von Adobe Thermo zeigt Aral Balkan drei kurze Videos, in denen das Tool und seine Funktionalität vorgestellt werden. Thermo soll es Designer einfach ermöglichen, reiche Internet Applikationen und Interfaces zu designen.

Der Design Prozess

Wesentlicher Pluspunkt von Thermo, dass derzeit noch in Entwicklung ist, scheint der Umstand, dass man als Designer im wohlbekannten Prozess arbeiten kann. Man erstellt ein grafischen Prototyp z.B. mit Photoshop, Illustrator oder Fireworks. Diesen kann mit allen Layern und Eigenschaften einfach in Thermo importieren um es dann zu bearbeiten.

Man kann innerhalb der Software alle einzelnen Photoshop-Elemente direkt ansprechen und deren Interaktivität gestalten. Von Hover-Effekten bis zu Click-Events ist alles schnell und einfach zu erreichen. So lässt sich z.B. ein voll funktionstüchtige scroll-bar ungemein einfach aus zwei simplen Rechtecken erzeugen.

Das Resultat 

Der erzeugt Code ist ein xml-Format und lässt sich auch einfach manipulieren. Er soll Ähnlichkeiten mit css haben. 

Auch lassen sich offensichtlich Test-Daten einfach einspeisen, um der Applikation eine gewisse Tiefe beim Entwickeln zu geben.

Adobe Thermo vs. Expression Blend

Nachdem ich nun schon einige Zeit mit Expression Blend arbeiten durfte, muss ich sagen, dass die Präsentation von Thermo einen großen Eindruck bei mir hinterlassen hat. So scheint der work flow intuitiver, als die oft verworren Abhängigekeiten von Blend. Gerade der Prozess, Interaktion zu gestalten ist deutlich vereinfacht und ohne großen Lernaufwand zu bewältigen.

Alles in allem bin ich sehr gespannt auf eine erste laufende Version und bin gespannt, ob sie halten kann, was sie verspricht.