Vorheriger Artikel Nächster Artikel

HTML-Prototyping: So konzipiert man Websites mit System

Aus dem
t3n Magazin Nr. 29

09/2012 - 11/2012

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.

Newsletter Newsletter

Abonniere unseren Newsletter und erhalte einen exklusiven Artikel aus dem aktuellen t3n Magazin.

Jetzt lesen: t3n Newsletter Nr. 544

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
And they all look just the same: Das Webdesign kopiert sich immer und immer wieder
And they all look just the same: Das Webdesign kopiert sich immer und immer wieder

Das Internet ist zu uniform geworden, und das ist für niemanden gut. Greg Storey appeliert, dass sich Webdesigner zu ihren Wurzeln orientieren sollten. » weiterlesen

Cheat-Sheets für Webdesigner: Jede Menge Helfer im Überblick
Cheat-Sheets für Webdesigner: Jede Menge Helfer im Überblick

Webdesigner und Entwickler eint ein Dilemma: Es ist fast unmöglich, alle Shortcuts und Tastaturkürzel der verwendeten Software sowie unterschiedliche Programmiersprachen und Frameworks im Kopf zu … » weiterlesen

Responsive Webdesign: Welche Potenziale immer noch verschenkt werden [Interview]
Responsive Webdesign: Welche Potenziale immer noch verschenkt werden [Interview]

Smartphones, Tablets und Co. haben unsere Surf-Gewohnheiten im Web radikal verändert. Immer mehr Endgeräte mit den unterschiedlichsten Display- und Browser-Formaten strömen auf den Markt – und … » weiterlesen

Alle Hefte Jetzt abonnieren – für nur 35 €

Kennst Du schon unser t3n Magazin?

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