Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

t3n 29

HTML-Prototyping: So konzipiert man Websites mit System

Funktionale Umsetzungsgenauigkeit

Bei der funktionalen Umsetzung unterscheidet man zwei Dimensionen. Die horizontale Dimension beschreibt die Berücksichtigung verschiedener Features und die vertikale Dimension beschreibt die Funktionalität der Features. Stehen in einem Prototyp also viele Features zur Verfügung, die allerdings nicht mit einer Funktion hinterlegt sind, spricht man von einem horizontalen Prototypen. Alle Bedienelemente eines Interfaces können also angewählt werden, sind allerdings nicht mit einer wirklichen Funktion hinterlegt und liefern somit keine realen Ergebnisse. Man spricht von einer Simulation, bei der man keine reale Arbeit erledigen kann. Horizontale Prototypen eignen sich dazu, das komplette System und die logische Abfolge zu testen, obwohl die Bedienung nicht wirklich real ist.

Bei einem vertikalen Prototypen hingegen stehen noch relativ wenig Features zur Verfügung, die allerdings schon eine wirkliche Funktion bieten und reale Ergebnisse liefern. Hier kann man die zur Verfügung gestellten Features demnach schon unter realen Bedingungen testen. Da noch nicht alle Features zur Verfügung stehen, kann man die Vollständigkeit des Interfaces nicht überprüfen.

Der kleinste gemeinsame Nenner dieser beiden Prototypen ist das Szenario. Bei einem Szenario simuliert man das Interface, wobei der Proband sich an einen vorgegebenen Weg halten muss. Der Vorteil von Szenarios ergibt sich daraus, dass sie relativ schnell und günstig zu produzieren sind. Nachteilig gestaltet sich, dass der Probant nur einen bestimmten Weg beschreiten kann und das Szenario damit nicht einer realen Situation standhält.

Wie genau darf es sein?

Die Auswahl der Umsetzungsgenauigkeit sollte man nicht einfach aus dem Bauch heraus treffen. Stattdessen sollten Designer und Entwickler die Anforderungen des Projekts analysieren und einordnen. Auf Basis der Anforderungen kann man entscheiden, welche Detailtiefe ausreichende Erkenntnisse liefert, um den finanziellen Aufwand zu rechtfertigen. Besonders die neuen Prototyping-Tools verleiten dazu, alle Elemente dynamisch umzusetzen. Man sollte dennoch hinterfragen, welche Erkenntnisse sich daraus ergeben können. Gerade bei stark verschachtelten Elementen vergrößert sich der Aufwand durch die Nutzung von Prototyping-Tools.

 

Verschachteltes Kontaktformular und dazugehörige dynamische Panels in Axure.
Verschachteltes Kontaktformular und dazugehörige dynamische Panels in Axure.
Grundlegende Fragestellungen bei der Auswahl der richtigen Umsetzungsgenauigkeit zielen darauf ab, wie komplex die Inhaltsstruktur ist und wie neuartig die Konzepte sind. Gerade im Web gibt es schon viele Erkenntnisse im Bereich der Usability und viele Bedienelemente sind von Nutzern schon gelernt. Greift man vorwiegend auf gelernte Bedienelemente zurück und ist die Navigation nicht zu komplex, kann man den Detailgrad des Prototyps durchaus geringer wählen und einfach grundlegend prüfen, ob die Elemente richtig interpretiert werden. Bei komplexeren Projekten sollte man einen höheren Detailgrad einsetzen, beziehungsweise sich iterativ an einen höheren Detailgrad heranarbeiten.

 

Einen Überblick über passende Tools wie Axure, Balsamiq und Fireworks findet ihr auf der dritten Seite dieses Artikels.

Links und Literatur

  1. Niehaus-Wireframe-Technik
  2. Überblick Prototyping-Tools
  3. Wirefy
  4. Conversion Optimierung mit Mega-Dropdowns

Finde einen Job, den du liebst

3 Reaktionen
Justin Schueler

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
Dirk Jesse

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
techadair
techadair

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

Melde dich mit deinem t3n-Account an oder fülle die unteren Felder aus.

Abbrechen