Vorheriger Artikel Nächster Artikel

HTML-Prototyping: So konzipiert man Websites mit System

1 3

Aus dem
t3n Magazin Nr. 29

09/2012 - 11/2012

HTML-Prototyping: So konzipiert man Websites mit System

Tools im Überblick

Vor einigen Jahren waren für Informationsarchitekten Tools wie Microsoft Visio und Omnigraffle quasi der Standard, um Wireframes zu erstellen – und das, obwohl sie für ganz andere Anwendungsszenarien entwickelt wurden. Mittlerweile sind spezielle Tools für Wireframing und Prototyping-Bedürfnisse auf dem Markt und haben sich weitestgehend etabliert. Aber auch Visio und Omnigraffle haben sich weiterentwickelt, um weiterhin für Konzeptionsprojekte interessant zu bleiben. Die Liste der Tools wächst stetig. Einen guten Überblick bietet die Übersichtstabelle von Dan Harrelson, der schon viele Tools erfasst hat [2].

Axure

Axure ist ein Vorreiter im Bereich der Tools mit Spezialisierung auf Prototyping. Das Tool glänzt mit einer intuitiven Nutzerführung. Mit Axure können Anwender schnell Wireframes in verschiedenen Stilen (vom gescribbelten Look bis geradlinig) erstellen und dynamisieren.

Axure ist eines der wenigen Prototyping-Tools, die weit über die reine Verlinkung von einzelnen Elementen für die Erstellung eines Klickpfades hinaus gehen. Es kann Funktionalitäten wie Drag&Drop, Mouse-Over, Mouse-Click und vieles mehr abbilden. Programmierkenntnisse sind nicht nötig. Die vorgefertigten Bedienelemente kann man mit weiteren Widget-Libraries beliebig erweitern. Die neueste Erweiterung von Axure ist AxShare, eine Plattform um Axure-Prototypen online zu hosten, zu teilen und im Team diskutieren zu können. Ein wichtiger Schritt, um mit Online-Tools wie Balsamiq oder Mockingbird mithalten zu können, die ebenfalls Collaboration-Möglichkeiten anbieten.

Balsamiq

Balsamiq steht stellvertretend für viele Online-Tools, die wie Unkraut aus dem Boden sprießen. Das Tool basiert auf der Air-Plattform und ist daher plattformübergreifend und sogar als Webversion verfügbar. Bei Balsamiq stehen allerdings eher grobe Wireframes im Vordergrund, die mit verwackelten Strichen stark gezeichnet aussehen. Die Möglichkeit, dynamische Elemente zu erstellen, wird nicht unterstützt. Lediglich einzelne Seiten kann der Nutzer miteinander verlinken, wobei er hierfür einzelne Dateien erstellen muss, die er dann untereinander verlinken kann. Bei größeren Projekten ist dies eher mühselig. Andere Tools wie Mockflow oder Mockingbird eignen sich da schon eher, wenn man einen wirklichen Klickpfad, bestehend aus mehreren verlinkten Seiten, erstellen will. Mockflow unterstützt dabei auch die Anzeige auf mobilen Geräten wie iPhone, iPad und Android-Smartphones. Da man die Tools online im Browser nutzen kann, sind sie einerseits plattformübergreifend und bieten andererseits die Möglichkeit, über verschiedene Accounts gemeinsam an einem Projekt zu arbeiten.

Fireworks

Fireworks ist generell ein Tool, das gut in den Web-Worklfow passt. In der neusten Version kann der Anwender Objekten sogar CSS-Eigenschaften zuweisen und diese exportieren. In Fireworks besteht die Möglichkeit, in einer Datei mehrere Seiten und Seitenzustände unterzubringen. Einzelne Objekte lassen sich verlinken, um so einen Klickpfad anzulegen. Eine höhere Dynamisierung ist aktuell noch nicht möglich. Vom visuellen Detailgrad kann man in Fireworks schnell sowohl Wireframes als auch high-fidelity-Designs ausarbeiten.

HTML

Letztlich kann man Prototypen auch direkt in umsetzen. Hierbei stellt sich die Frage, wie viel Zeit man investieren kann und ob der Code wiederverwendet werden soll. Will man einzelne, ausgefallene Elemente schnell testen, kann es sinnvoll sein, die Seite als Bild einzubinden und die gefragten Elemente nur umzusetzen und zu testen. Greift man hingegen auf standardisierte Elemente zurück, kann die Programmierung schon genauer sein, damit man den Code für die spätere Entwicklung übernehmen kann.

Der Nachteil von HTML liegt im erhöhten Aufwand gegenüber Tools wie Axure. Darüber hinaus muss der Awender natürlich mit HTML umgehen können. Ajax-Bibliotheken wie jQuery und Gridsysteme wie Wirefy [3] erleichtern das Erstellen von HTML-Prototypen ungemein, da viele Bibliotheken zur Erweiterung ein schnelles Umsetzen von Funktionalitäten erlauben.

Der Vorteil von richtigen HTML-Prototypen erweist sich im Detail bei Nutzertests. Hierzu eine kleine Anekdote aus dem Alltag des Autors. In einem Nutzertest wurde ein Layout getestet, in dem ein Mega- Dropdown integriert war. Beim Öffnen des Menüs fing der Proband direkt an zu mäkeln, dass er diese Menüs nicht mag, da sie hakelig zu bedienen sind. Während er diese Aussage traf, probierte er das Menü weiter aus. Kaum hatte er seine Aussage vollendet, revidierte er diese dann auch wieder und meinte nur, dass dieses Menü sich allerdings sehr gut bedienen lässt. Wieso kam es zu diesem Sinneswandel?

Bei Mega-Dropdowns spielt das Timing eine wichtige Rolle. Bei Mouse-Over sollte das Menü nicht sofort eingeblendet werden, sondern eine leichte Verzögerung aufweisen. Dies vermeidet beispielsweise die ungewollte Auswahl eines Menüpunkts, wenn man von einem Menüpunkt in das Untermenü fährt und dabei über einen anderen Menüpunkt streift („diagonal Problem“) [4]. Per HTML und jQuery konnte diese Verzögerung direkt in den Prototypen integriert werden, wodurch das Menü sich gut bedienbar präsentierte. Mit Prototyping-Tools wie Axure hätte man durchaus die reine Funktionalität eines Mega-Dropdowns simulieren können, jedoch nicht die für den Nutzer wichtige Verzögerung.

Fazit

Prototypen eignen sich gut, um schon im frühen Design- und Entwicklungsprozess Erkenntnisse über die Gebrauchstauglichkeit zu erhalten. Bei dem Umfang und Detailgrad des Prototypen sollte man die Projektanforderung und -komplexität immer im Auge behalten, um einerseits genügend Erkenntnisse zu erlangen, andererseits aber auch nicht unnötig viel Zeit zu investieren. Auch bei der Entscheidung für ein Tool muss schon klar sein, wie detailliert der Prototyp umgesetzt werden soll.

Links und Literatur

Softlink 3171
  1. 1 http://t3n.me/LNH6md
    Niehaus-Wireframe-Technik
  2. 2 http://t3n.me/PIdSdI
    Überblick Prototyping-Tools
  3. 3 http://cjdsie.github.com/wirefy/
    Wirefy
  4. 4 http://t3n.me/NTiTiV
    Conversion Optimierung mit Mega-Dropdowns
1 3
Vorheriger Artikel Zurück zur Startseite Nächster Artikel
3 Antworten
  1. von techadair am 31.01.2013 (13:40 Uhr)

    Ein weiteres, weder in dem Artikel noch in der Liste erwähntes, Tool ist "HotGloo" eines deutschen Entwicklerteams aus Hamburg. Ich arbeite damit bereits seit ein paar Monaten für die Konzeption eines Portals und bin damit sehr zufrieden. Bereits in der kostenlosen Variante bietet das Tool umfangreiche Features!


    Wenn ich mich richtig erinnere, bin ich auch über t3n darauf gestoßen, weshalb es mich noch ein wenig mehr wundert, dass es in diesem Artikel nicht erwähnt wurde.

    Antworten Teilen
  2. von Dirk Jesse am 31.01.2013 (14:00 Uhr)

    HTML-Prototypen haben den großen Vorteil, dass Haptik und Renderingqualität (z.B. der Schriften) der des Browsers entsprechen. Um den Aufwand für die Erstellung von HTML-Prototypen zu reduzieren, bietet sich die Nutzung von CSS-Frameworks an, um mit vorgefertigten Layout- und UI-Modulen arbeiten zu können.

    Ich empfehle daher, einen Blick auf das Projekt "Thinkin' Tags" (http://www.thinkintags.com) zu werfen.

    Antworten Teilen
  3. von Justin Schueler am 01.02.2013 (12:48 Uhr)

    Nebst Wirefy sollte vielleicht noch Foundation (http://foundation.zurb.com/) erwähnt werden.
    Wirefy scheint weitestgehend eine Adaption Foundations zu sein und bietet dabei weniger Features.

    Bei den Wireframing-Tools könnte man noch Moqups (https://moqups.com/) eingliedern. Simpel, solide und for free.

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Aktuelles aus dem Bereich Responsive Webdesign
t3n-Aktion: „Schrödinger lernt HTML5, CSS3 und JavaScript“ [+Verlosung]
t3n-Aktion: „Schrödinger lernt HTML5, CSS3 und JavaScript“ [+Verlosung]

Du willst in die Webentwicklung einsteigen und HTML5, CSS3 und JavaScript lernen? Das etwas andere Fachbuch „Schrödinger lernt HTML5, CSS3 und JavaScript“ vermittelt mit Witz die Theorie und … » weiterlesen

Dropdown-Menüs: 20 Demos von simpel bis schick – inklusive Download und Tutorials
Dropdown-Menüs: 20 Demos von simpel bis schick – inklusive Download und Tutorials

HTML5 und CSS3 bilden die Standards, die Webseiten- und Mobile-Web-Entwicklung aktuell prägen. Es gibt unzählige Variationen von Dropdown-Menüs und Tutorials auf Basis dieser Technologien – vor … » weiterlesen

Responsive Webdesign: Browserunterstützung und Tools [t3n-Video-Workshop]
Responsive Webdesign: Browserunterstützung und Tools [t3n-Video-Workshop]

Heute führen wir auf t3n.de die Video-Serie weiter, in der wir euch in Zusammenarbeit mit Galileo Press Video-Workshops zu verschiedenen Themen für Webentwickler und Digitalarbeiter präsentieren. » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n 37 jetzt kostenfrei probelesen! Alle Inhalte des t3n Magazins Diesen Hinweis verbergen