Vorheriger Artikel Nächster Artikel

HTML-Prototyping: So konzipiert man Websites mit System

2

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.

 

dms 869baf99fe13260369165563aa7434db
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.

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.

2
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