Drücke die Tasten ◄ ► für weitere Artikel  

HTML-Prototyping: So konzipiert man Websites mit System

Aus dem
t3n Magazin Nr. 29

09/2012 - 11/2012

Jetzt kaufen

HTML5, CSS3, Ajax, Rich Media, Responsive Design – 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.

1 3
75 Shares bis jetzt –Dankeschön!

Bewerten
VN:F [1.9.22_1171]
5 Antworten
  1. von techadair am 31.01.2013 (13:40Uhr)

    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.

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

    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.

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

    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.

  4. von HTML-Prototyping: So konzipiert man Webs… am 06.03.2013 (20:42Uhr)

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

  5. von Framer: Open-Source-Prototyping mit Phot… am 10.06.2013 (09:03Uhr)

    [...] HTML-Prototyping – So konzipiert man Websites mit System – t3n News [...]

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

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

t3n-Video-Workshop: Einstieg in 2D-Transformationen mit CSS3
t3n-Video-Workshop: Einstieg in 2D-Transformationen mit CSS3

Heute startet auf t3n.de eine neue Serie, 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 35 jetzt kostenfrei probelesen! Alle Inhalte des t3n Magazins Diesen Hinweis verbergen