Vorheriger Artikel Nächster Artikel

HTML-Prototyping: So konzipiert man Websites mit System

Aus dem
t3n Magazin Nr. 29

09/2012 - 11/2012

, , , Rich Media, – das Web gibt sich so dynamisch und zugleich komplex wie nie zuvor. Durch den Einsatz von iterativen Prototypen in Nutzertests können Konzepter und Designer wichtigen Input erhalten, der spätere Fehler vermeidet und nachträgliche Anpassungkosten verringert.

HTML-Prototyping: So konzipiert man Websites mit System

Die Idee, Nutzer früh in den Entwicklungsprozess mit einzubeziehen, ist nicht neu. Wie wichtig dieser Ansatz bei der Entwicklung ist, zeigen die entstehenden Kosten durch Unproduktivität von Arbeitern aufgrund von Usability-Fehlern in Anwendungen. Eine nachträgliche Ausbesserung gestaltet sich in der Regel wesentlich kostspieliger als die Entwicklung von iterativen Prototypen und deren Erprobung in Nutzertests.

Die Umsetzungsgenauigkeit von Prototypen kann man je nach Projektanforderung und -stand in verschiedenen Abstufungen von Low Fidelity (geringe Umsetzungsgenauigkeit) bis hin zu High-Fidelity (hohe Umsetzungsgenauigkeit) unterteilen. Zusätzlich bietet sich eine Unterteilung in visuelle, inhaltliche und funktionelle Umsetzungsgenauigkeit an.

Visuelle Umsetzungsgenauigkeit

In den Anfängen der Konzeptionsphase können Designer beispielsweise Papierprototypen einsetzen. Das Team zeichnet einfach die ersten Entwürfe von Webseiten auf ein Blatt Papier. Elemente mit verschiedenen Zuständen auf einer Seite kann das Team als separates Element aus Papier anlegen und dann je nach Zustand über den eigentlichen Zustand legen. Diese Art von Prototypen bezeichnet man als low-fidelity.

Als nächste visuelle Abstufung gelten digitale Drahtgittermodelle (Wireframes) in verschiedenen Abstufungen: von Wireframes mit verwackelten Strichen, die einen gezeichneten Stil imitieren sollen, um die Abstraktheit von Wireframes zu unterstützen, bis hin zu Niehaus Wireframes, bei denen Elemente durch verschiedene Graustufen schon eine Gewichtung erhalten [1].

Die höchste visuelle Umsetzungsgenauigkeiten erreicht das fertige Screendesign. Das heißt: der Prototyp hat eine fertige Oberflächengestaltung. Die Usability-Expertin Dr. Deborah J. Mayhew empfiehlt, dass bei dieser Art der visuellen Umsetzung auch ein gewisser Grad an Funktionalität vorhanden sein sollte. Der Nutzer sollte zum Beispiel Eingaben tätigen, Informationen anschauen, Selektionen vornehmen und navigieren können. Dabei muss der Prototyp funktional nicht komplett sein und Daten aus einer fertigen Datenbank beziehen oder Nutzereingaben verarbeiten.

 

dms f71d3ea1ada98f262a580464591a0fdc
Horizontale Prototypen, vertikale Prototypen und der kleinste gemeinsame Nenner das Szenario.
 

Inhaltliche Umsetzungsgenauigkeit

Auch den Inhalt kann man in verschiedenen Varianten in Prototypen bereitstellen. Ist noch überhaupt kein Inhalt vorhanden, greift man zunächst auf Blindtext zurück. Auch Bilder und andere Medien können Konzepter zunächst durch Platzhalter ersetzen, bevor der finale Inhalt vorliegt.

Man sollte jedoch schnell auf inhaltlich sinnvolle Texte und Bilder zurückgreifen, da man erst so auch überprüfen kann, ob für den realen Einsatz genügend Raum zur Verfügung steht. Für Nutzertests eignen sich Blindtexte und Platzhalter weniger, da der Nutzer den inhaltlichen Zusammenhang nicht herstellen kann.

Weitere Informationen zur funktionalen Umsetzung findet ihr auf der zweiten Seite des Artikels.

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

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