How-To

HTML-Prototyping: So konzipiert man Websites mit System

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.

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.

 

Horizontale Prototypen, vertikale Prototypen und der kleinste gemeinsame Nenner das Szenario.
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.

Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

3 Kommentare
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
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
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

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

Bitte schalte deinen Adblocker für t3n.de aus!

Hey du! Schön, dass du hier bist. 😊

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team bestehend aus 65 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Danke für deine Unterstützung.

Digitales High Five,
Stephan Dörner (Chefredakteur t3n.de) & das gesamte t3n-Team

Anleitung zur Deaktivierung