Agile & DevOps

Teil 1: Anforderungsanalyse im agilen Umfeld für Webapplikationen

User-centered Design: Strenge Nutzerorientierung ist der Weg zum Ziel
Keine Kommentare

Auch im Umfeld von Webapplikationen müssen die Anforderungen zusammen mit dem Kunden sorgfältig erforscht werden. Nur wenn das gelingt, kann das Projekt erfolgreich zur Zufriedenheit des Kunden abgeschlossen werden. Es gibt eine Reihe von innovativen, agilen und dynamischen Methoden. Ist der Werkzeugkasten gut gefüllt, sind auch komplexere Vorhaben zu bewältigen. Die Zeit ist reif für eine praxisorientierte Review.

Anforderungsanalyse ist die deutsche Bezeichnung des englischen Begriffs Requirements Engineering, der viel umfassender die Ziele und Aufgaben dieses wichtigsten Schritts am Anfang eines jeden IT-Projekts beschreibt. Schon länger sind die Zeiten vorbei, in denen man alle Kundenwünsche in Form von starren und trocken formulierten Lasten- und Pflichtenheften zusammenfassen konnte. Diese Dokumente haben jedoch auch noch heute eine gewisse Berechtigung, gerade im vertraglichen Bereich oder wenn es um die formale Abwicklung eines Projekts geht. Inhaltlich ist das Thema heute alles andere als langweilig. Moderne, agile und aus der Designwelt stammende Ansätze helfen den Entwicklern, Designern und den Fachleuten, sich leichter auszutauschen und ein besseres Produkt zu entwickeln.

Ein ganzes Sammelsurium an Begriffen, wie Prototyping, Design Thinking, User-centered Design, Personas usw. geistern durch die Fachwelt. Tatsächlich kann man vieles davon gewinnbringend einsetzen. Wir haben diese Tools sortiert und ihre Praxistauglichkeit beurteilt. Eine Zusammenstellung der wichtigsten Themen und unsere Erfahrungen lesen Sie in dieser zweiteiligen Artikelserie. Teil 1 stellt Ihnen wichtige Methoden vor, einige davon ausführlicher, andere nur im Überblick. Idealerweise schließt sich für Sie schon dann der Kreis, und im konkreten Praxisprojekt kann aus einer guten Wissensquelle geschöpft werden, um dem Wunsch des Kunden auf die Spur zu kommen. Im zweiten Teil zeigen wir dann die Anwendung konkret an einem Projekt aus der Praxis. Kommen Sie mit auf eine Reise zum Nutzer!

User-centered Design: Alles für den Nutzer

  • Teil 1:Anforderungsanalyse im agilen Umfeld und für Webapplikationen
  • Teil 2: Ein Beispiel für einen nutzerorientierten Entwurf

User-centered Design

Man wünscht sich die Bedienung eines Programms so intuitiv, so angenehm und so unkompliziert wie nur möglich. Wie erreicht man dieses Ziel? Das Schlagwort dazu lautet „User-centered Design“. Der Begriff ist hier Programm, der Benutzer soll im Mittelpunkt aller Tätigkeiten des Entwicklungsprozesses stehen. Das mag zwar einleuchtend sein, und man fragt sich, ob das nicht immer so ist, dennoch ist die Frage mehr als berechtigt. Alle Projektbeteiligten sind mit den ihnen anvertrauten Spezialaufgaben beschäftigt und damit auch gut ausgefüllt. Ein paar Beispiele:

  • Entwickler: Sie arbeiten am Code, müssen mit dem Framework und den Entwicklungsumgebungen zurechtkommen und dabei die oft knappen Zeitvorgaben für die Bereitstellung des nächsten Features einhalten. Kaum taucht eine Lücke auf, ist der Bugfix der letzten Version fertigzustellen, und dann ist der Tag auch schon wieder vorbei.
  • Designer: Sie müssen das User Interface entwerfen, dabei das technisch Machbare berücksichtigen und gleichzeitig auf Stimmigkeit achten. Sie müssen Farbcodes festlegen, Stile und Richtlinien beachten, eine Kundenpräsentation erstellen und eine Zuarbeit für das nächste Konzept erledigen.
  • Projektleitung: Neben der Ressourcenplanung sind diese Mitarbeiter auch mit vielfältigen administrativen Aufgaben belegt. Ein Kollege fällt aus, ein anderer wird an ein dringendes Projekt „verliehen“, und die Kostenkalkulation muss auch noch einmal überprüft werden.

Moderne agile Entwicklungsansätze wie Scrum haben diesem Tatbestand Rechnung getragen. Eigens definierte Rollen, wie die des Product Owners, wollen dem Kunden eine dauerhafte Stimme im Projekt geben (Kasten: „Die Aufgaben des Product Owners“). Das wird aber nicht genügen. Nur wenn alle Projektmitarbeiter die Wichtigkeit der Nutzerorientierung verstehen und ein gewisses Spektrum an Methoden beherrschen, können umfassende Kundenprojekte erfolgreich abgeschlossen werden. Kommen wir zurück zu User-centered Design. Die dahintersteckende Überlegung ist: Eine frühe und permanente Einbeziehung der Nutzer im gesamten Entwicklungsprozess soll dazu führen, dass der Aufbau, die Inhalte und das Design des Endprodukts, zum Beispiel die Webapplikation, stark von den Bedürfnissen, Erwartungen und dem Verständnis der User geprägt sind.

Die Aufgaben und Verantwortlichkeiten des Product Owners

  • Pflege des Product Backlogs
  • Vertretung der fachlichen Auftraggeberseite und somit sämtliche Stakeholder
  • Priorisierung der Product Backlog Items in der Weise, dass der Business Value des Produkts maximal wird und die Möglichkeit früher Releases von Kernfunktionalität besteht, um einen schnellen Return on Investment zu erreichen
  • Teilnahme an den Daily Scrums, um sich zu informieren
  • Steht für Rückfragen des Teams bereit

Zusammengefasst: Der Product Owner trägt die Verantwortung dafür, dass die richtigen Anforderungen im Product Backlog stehen und in einer sinnvollen Reihenfolge abgearbeitet werden.

User-centered Design ist ein ganzheitlicher Ansatz zur Gestaltung interaktiver Systeme. Die Idee existiert bereits seit den 1980er Jahren und findet seitdem in den unterschiedlichsten Bereichen Anwendung. Einerseits ist es klar, dass Verkaufszahlen und Monetarisierung im Mittelpunkt stehen, andererseits sind die Produkte bzw. Dienstleistungen nur dann erfolgreich, wenn die Benutzer damit wirklich zufrieden sind. Es gilt die Regel: Erst sind die Endnutzer genau zu identifizieren und dann muss man sich in deren Situation versetzen. Wichtig ist, dass man sich emotional in die Bedürfnisse und die Charaktere der Benutzer einfühlt. Aus ökonomischer Sicht hat sich das User-centered Design als wirtschaftlich erwiesen. Bei erfolgreicher Anwendung führt es zu kürzeren Entwicklungszeiten und zu niedrigeren Entwicklungs-, Pflege- und Wartungskosten. Eine erste Orientierung, wie man beim User-centered Design vorgeht, bietet Abbildung 1.

 Abb. 1: Die Meilensteine des <a href="https://www.usability.de/leistungen/ux-design.html">User-centered Designs</a>

Abb. 1: Die Meilensteine des User-centered Designs

Die Nutzerforschung (User Research) ist die Ausgangsphase. In dieser Phase werden die Zielgruppen identifiziert und die möglichen Nutzungsszenarien analysiert. Abhängig vom Ergebnis werden die weiteren Maßnahmen festgelegt. Das Ziel der Nutzerforschung ist es, die realen Anwender, ihre Anforderungen sowie den Nutzungskontext kennenzulernen und zu verstehen. Die gewonnenen Erkenntnisse werden später in der zweiten Phase in das Grobkonzept und ersten Prototypen eingearbeitet. Das Ziel: Die Entwicklung einer nutzerfreundlichen Informationsarchitektur und die Sicherstellung der Übereinstimmung des Konzepts mit den Vorstellungen der späteren Anwender. Wichtig ist es, dass das Konzept die Sichtweise der Nutzer und nicht die des Unternehmens (Auftraggeber) widerspiegelt. Mit anderen Worten: Die Geschäftsleitung mag das IT-Projekt zwar in Auftrag geben, aber letztendlich werden die Mitarbeiter in den betreffenden Fachabteilungen damit arbeiten und jeden Tag damit zu tun haben.

Kostenlos: IPC Agile Cosmos Cheat Sheet

Agile Cosmos Cheat Sheet-small-220x311In diesem Cheat-Sheet von unserem Experten René Schröder bekommen Sie einen Überblick über den Agile Cosmos und die organisatorische Struktur. Mit diesem Mind-Map haben Sie die perfekte Voraussetzung, um entweder Ihr eigenes agiles Team aufzubauen, Ihre aktuelle Organisation zu verbessern oder einen eigenen Stil von Agil zu kreieren.


Gute Unterstützung bieten nutzerorientierte Methoden, z. B. Card Sorting. UX Testing bzw. Usability Evaluation stehen an. Konzepte, Entwürfe und Prototypen müssen an den späteren Anwendern bzw. durch sie getestet werden. Das Feedback kann dann unmittelbar in das Konzept eingearbeitet werden. Es ist empfehlenswert, rechtzeitig mit dem Testen anzufangen. Der letzte Schritt sind das Feinkonzept und Visual Design. Das finale Konzept wird dann zum Beispiel als Wireframes oder interaktiver Prototyp präsentiert.

In den folgenden Abschnitten gehen wir auf ausgewählte Aspekte dieses Fahrplans zum User-centered Design näher ein. Beginnen wir mit der Erforschung der Nutzerbedürfnisse.

Nutzerforschung unter der Lupe

Um die tatsächlichen Nutzer in den Entwicklungsprozess einzubeziehen, kommt eine Vielzahl von Usability-Methoden zum Einsatz. Nachfolgend beschreiben wir eine Auswahl dieser Ansätze.

Card Sorting: Diese Methode wird eingesetzt, um die „Sprache der Nutzer“ besser zu verstehen. Hauptsächlich geht es um die Erstellung einer verständlichen Navigationsstruktur: Die Navigation soll benutzerfreundlich sein und nur die Begriffe enthalten, die von der Zielgruppe auch verstanden werden. Den Nutzern wird es ermöglicht, anhand von Karten eine aus ihrer Sicht verständliche und sinnvolle Struktur zu entwickeln. Hilfreich ist diese Methode nicht nur in der Konzeptionsphase, sondern auch bei der Weiterentwicklung oder Überarbeitung einer App, Applikation oder Webanwendung.

Benchmarking-Tests: Ein Benchmark ermittelt, wie das Produkt im Vergleich zum Wettbewerb abschneidet. Beim Benchmarking-Test wird die Usability von mehreren Produkten anhand verschiedener Kriterien miteinander verglichen. So lassen sich Verbesserungsoptionen und ein mögliches Optimierungspotenzial aufdecken.

Personas: Man will den Nutzer bestmöglich kennenlernen, sein Verhalten analysieren und seine Motive verstehen. Dabei darf man nicht nur die unmittelbaren Aspekte der betreffenden Software im Blick haben, man muss zwangsweise in die Person eindringen. Ein Mindestmaß an persönlichen Eigenschaften zur Charakterisierung und die Rolle bzw. Stellung im Unternehmen sind notwendigerweise zu erforschen. Eine Persona beschreibt also eine individuelle Gruppierung von echten Personen aus der Zielgruppe des Auftraggebers. Die potenziellen Anwender werden mit Hilfe dieser Technik den zuvor erstellten Mustercharakteren zugeordnet. Sie geben dem oft unbekannten Nutzer im Entwicklungsprozess von Anfang an ein Gesicht und damit dem Entwicklungsteam klare Vorstellungen darüber, was sie auszeichnet. Die Erstellung von Personas verläuft sehr konkret, d. h. dem Nutzer werden ein Name, ein Alter, ein Aussehen und meist auch Wünsche, Fähigkeiten, Meinungen und Hobbies zugeordnet. Ein Bild, zum Beispiel ein Cartoon, besser ein echtes Foto, ggf. ein Bild aus einer Zeitschrift visualisiert die Personas. Personas machen es für die Beteiligten einfacher, sich während der Entwicklung in die Perspektive der User hineinzuversetzen, d. h. zum Beispiel „Was würde Julia dazu sagen?“ oder „Welche Aufgaben will Martin erledigen?“. Das Ziel ist es, die Bedürfnisse der Zielgruppe bezüglich der Software herauszuarbeiten und diese Erkenntnisse in konkrete Anforderungen zu übertragen.

Ein konkretes Beispiel: Bei der Entwicklung einer Webapplikation, die den Workflow der Geschäftspost für ein mittelständisches Unternehmen abbilden möchte, ist es hilfreich, sich die künftigen Nutzer der Anwendung anzusehen. Das könnte Frau Meier sein, gelernte Kauffrau für Bürokommunikation, deren zentrales Anliegen es ist, die Prozesse im Unternehmen im Überblick zu behalten. Frau Meier ist als Sekretärin für den Geschäftsführer tätig. Mit dieser Beschreibung wird deutlich, welche Anforderungen eine arbeitsentlastende Software zur Steuerung der Geschäftsvorfälle erfüllen muss. Sie muss sich in der Problemdomäne des künftigen Users bewegen. Die Benutzeroberfläche muss die bekannten Organisationsstrukturen des Unternehmens widerspiegeln, der Workflow ist bewusst einfach zu halten, zu viele Optionen führen zur Verwirrung (bei der Nutzerin Frau Meier).

Fokusgruppe: Hier handelt es sich um eine moderierte Gruppendiskussion mit tatsächlichen oder potenziellen Nutzern. Gut geeignet ist diese Methode für die Erhebung von Anforderungen oder zum Sammeln von Nutzerfeedback in unterschiedlichen Projektphasen. Der Aufwand hält sich in Grenzen. Als Ergebnis erhält man einen detaillierten Bericht mit umfangreichen Informationen.

Eye Tracking: Diese Verfahren der Blickverfolgung ermöglicht es herauszufinden, was und wie intensiv der Nutzer bestimmte Aspekte wahrnimmt und welche Dinge außen vor bleiben. Die besten Ergebnisse wurden durch die Kombination mit den klassischen Usability-Tests erzielt: Während Nutzer an realistischen Aufgaben arbeiten, können die Augenbewegungen mitverfolgt und Entscheidungs- und Wahrnehmungsprozesse nachvollzogen werden.

Webanalyse: Die Auswertung der Daten zu den Besuchern und ihrem Verhalten auf einer Webseite, kombiniert mit anderen Methoden, eröffnet die Ansatzpunkte für eine Usability-Optimierung.

Fingerspitzengefühl bei der Zielgruppenanalyse

Es ist nicht einfach, sich in das Denken anderer Personen hineinzuversetzen. Menschen verhalten sich oft wenig rational und nicht immer logisch nachvollziehbar. Marktforschungsinstitute setzen sich regelmäßig mit Zielgruppen und deren Bedürfnisse auseinander. Interessant ist das vom Sinus Institut entwickelte Konzept der so genannten Sinus-Milieus, das oft als Basis für die Zielgruppenanalyse genommen wird. Die Sinus-Milieus zeigen die Einteilung der Gesellschaft in Deutschland in einzelnen Gruppen anhand von Kriterien wie sozialer Schicht und Werteorientierung. Die Gesellschaft ist demnach in so genannte Milieus unterteilt:

  • Konservativ-Etablierte
  • Traditionelle
  • Liberal-Intellektuelle
  • Sozial-Ökologische
  • Bürgerliche Mitte
  • Prekäre
  • Performer
  • Adaptiv-Pragmatische
  • Hedonisten
  • Expeditive

Es wurde somit eine Einteilung in „Gruppen der Gleichgesinnten“ vorgenommen. Jedes Jahr wird das Modell an die soziokulturellen Veränderungen angepasst. Eine interessante Entwicklung ist festzustellen: Während der Anteil der traditionellen Milieus seit Jahren zurückgeht, beobachten wir ein kontinuierliches Wachstum im modernen Segment.

Diese Erkenntnisse aus der allgemeinen Marktforschung kann man auf die Gestaltung von digitalen Produkten, wie Webapplikationen übertragen. Wie erfahren im Umgang ist der Nutzer? Wie häufig nutzt er die Anwendung? Ist er bereit zu experimentieren? Wie wurde das Problem bisher gelöst? Gab es in der Offlinewelt eine gute und etablierte Lösung, die man ggf. in eine digitale Version übertragen kann?

Geschichten erzählen

„Statt zu dokumentieren, sollte man eine Geschichte erzählen!“, so lautet das Motto bei einer agilen Vorgehensweise. User Storys sind dabei zentrale Bausteine. Sie haben sich im Rahmen der agilen Anforderungsdefinition durchgesetzt. Oft nennt man User Stories als Nachfolger von gut bekannten Use Cases (Anwendungsfällen). Use Cases waren für die agile Entwicklung zu umfangreich und konnten nicht so einfach in Iterationen aufgeteilt werden. Der Grund: In einem Anwendungsfall werden alle möglichen Szenarien zusammengefasst, die ein Benutzer für die Zielerreichung durchführen kann. User Stories basieren auf einem informellen Gespräch. Die gesammelten Informationen werden auf eine Karteikarte oder einen Haftzettel geschrieben. Die Geschichten werden nicht im Detail konkretisiert. Eine oft verwendete Form von User Stories lautet wie folgt:

„Als <Anwendertyp> möchte ich <folgende Aktion durchführen>, um <dieses Ziel zu erreichen>“. Ein Beispiel: „Als Neukunde möchte ich mich anmelden, aber keinen langen Registrierungsprozess durchlaufen, um das Produkt zu bestellen.“ Folgende Fragen sollten von einer User Story beantwortet werden:

  • Für wen ist die Anforderung wichtig?
  • Was soll möglich sein?
  • Was ist der Nutzen der Anforderung?

User Stories werden aus der Perspektive der Anwender erstellt und betonen die fachliche Anforderung, schreiben jedoch keine Lösung vor. Sie sind zwar unspezifisch und vage, jedoch für den Entwicklungsprozess sehr wichtig, denn sie bilden eine Brücke zwischen dem Entwickler und dem Nutzer. Man sollte die User Stories auf den Karteikarten kurz und knapp beschreiben und damit die Beteiligten zur Diskussion anregen. Das Ziel: Schärfung und Verständnis des Problems. Um beim Beispiel zu bleiben: Es ist schon klar, dass eine Anmeldung des Neukunden am System notwendig ist. Doch es gibt dazu sehr viele offene Fragen, z. B.:

  • Welche Informationen brauche ich auf jeden Fall?
  • Wie intensiv prüfe ich die Daten? Kann das den Anmeldeprozess verkomplizieren?
  • Akzeptiere ich die Anmeldung über so genannten Social-Media-Provider, d. h. verlasse ich mich auf die Korrektheit der Daten?
  • Wie vermittle ich dem Nutzer, dass die Daten notwendig sind und mit ihnen auch sorgfältig umgegangen wird?

simple Anmelde-/Registrierungsmaske mag im Entwurf schnell konzipiert sein. In der produktiven Webapplikation braucht es dafür meist eine tiefergehende Auseinandersetzung. Bei einem Onlineshop wollen die Anwender möglichst schnell zahlen und mit den Formalitäten fertig werden. Hier ist man gut beraten, die typischen Zahldienste auch als Identitätsprovider einzusetzen. Um ein Portal für eine Versicherung zu implementieren, in der die Anwender Neuigkeiten und Vertragsdaten einsehen können, braucht es andere Sicherheitsmaßnahmen. Ist jedoch ein solch großer Aufwand wie beim Internetbanking gerechtfertigt? Die Antwort lautet: „Es kommt darauf an – wir müssen es diskutieren.“

Zur Konkretisierung dieser spezifischen Anforderungen kann man mit User Stories arbeiten. Die Karteikarte enthält oft Notizen wie Datum, Autor, Umfang, Priorität etc.

Prototypen als Kern des Innovationsprozesses

Ein ebenso wichtiges Instrument des Entwurfs sind Prototypen. Sinn und Zweck von Prototypen ist es, kritische Aspekte eines Produkts – hier einer Software – möglichst frühzeitig zu erkennen, damit man sie beseitigen kann. Da die Anforderungsdefinition für Programme bekanntermaßen sehr schwierig und über weite Projektabschnitte unsicher und stetigen Veränderungen unterworfen ist, sind Prototypen ein gutes Instrument, um diese Unsicherheiten zu beseitigen. Die Anforderungen der Anwender und mögliche Realisierungsoptionen können auf diese Weise in frühen Phasen der Entwicklung abgeglichen werden. Man unterscheidet zwischen evolutionären und experimentellen Prototypen. Bei den evolutionären Prototypen wird Funktionalität schrittweise auf- und ausgebaut. Experimentelles Prototyping probiert verschiedene Optionen zur Umsetzung aus und vergleicht deren Ergebnisse miteinander. Differenziert man nach dem Anwendungszweck, so sind folgende Arten von Prototypen zu unterscheiden [1]:

  • Demonstratoren sind lediglich grobe Modelle, die noch weit von der finalen Realisierung entfernt sind.
  • Labormuster dienen meist zur Untersuchung von technischen Fragestellungen.
  • Pilotsysteme sind Protypen, die einen höheren Reifegrad zeigen. Daran kann das System bereits realistisch getestet und bewertet werden. Außerdem können Prototypen grundsätzlich nach zwei Mustern aufgebaut werden – als horizontaler oder vertikaler Prototyp (Abb. 2).
Abb. 2: Horizontale vs. vertikale Prototypen [1]

Abb. 2: Horizontale vs. vertikale Prototypen [1]

Vertikale Prototypen sind geeignet, eine komplexe Funktionalität zu demonstrieren, bzw. sie werden dem Anwender zur Überprüfung der Funktionalität übergeben. Ausgewählte Aspekte werden im Ganzen gezeigt. Das geschieht, indem ein Teil vom System über alle Schichten der Anwendung funktionsfähig erstellt wird. Ein Beispiel: Eine Webapplikation zur Verwaltung von Kundenaufträgen und Buchungen enthält als Teilsystem die Verwaltung der Kundendaten. Dem Kunden wird ein vertikaler Prototyp zum Testen übergeben, der alle Aspekte der Verwaltung enthält, also z. B. Daten erfassen, ändern, stornieren, löschen usw. Diese Funktionen sind bereits vollständig implementiert und können umfangreich getestet, und es kann entsprechendes Feedback gegeben werden. Die anderen Funktionen des Softwaresystems sind dabei noch nicht vorhanden.

Kommen wir zu den horizontalen Prototypen. Diese sind zur Überprüfung der Funktionen einer Ebene geeignet. Typische horizontale Prototypen sind Muster des User Interface (UI). Den Anwendern wird ein UI-Prototyp übergeben, der alle (wesentlichen) Elemente des künftigen UI enthält. Design und Handling können daran umfassend beurteilt, Farben und andere Gestaltungselemente aufeinander abgestimmt werden. Der Prototyp ist jedoch leer, d. h. eine echte Funktion ist noch nicht hinterlegt. Klickt der Anwender beispielsweise auf den Button zum Anlegen eines neuen Kunden, wird das zugehörige Dialogfenster eingeblendet. Eine Datenerfassung ist möglich, die Daten werden jedoch noch nicht im System gespeichert. Bereiche, in denen später Inhalte stehen sollen, beispielsweise umfassende Texte, werden mit Platzhaltern wie Lorem ipsum gefüllt.

Es gibt viele verschiedene Möglichkeiten zum Erstellen eines Softwareprototyps: Einfachste Ansätze basieren auf Papier und Bleistift und präsentieren lediglich rudimentäre Aspekte des späteren UI. Über viele Zwischenstufen können Muster erstellt werden, die sich kaum vom finalen Produkt unterscheiden. Die Fragen lauten: „Welches ist der richtige Ansatz?“ und „Wie hoch darf der Aufwand beim Erstellen des Prototyps sein?“ Wie immer kommt es auf die Situation an. Der Realitätsgrad des Entwurfs wird oft mit dem Begriff „Fidelity“ umschrieben. Er kann in verschiedenen Bereichen variieren:

  • Visuell: Der Grad der Realitätsnähe wird durch Farben, die Verwendung echter Bedienelemente und Fotos bestimmt.
  • Funktional: Das Spektrum reicht von statischen Screens bis hin zu funktionierenden Prototypen, die auf Eingaben reagieren.
  • Inhaltlich: Es kann mit Blindtexten oder lediglich mit Platzhaltern gearbeitet werden. Mehr Realitätsnähe erreicht man mit echten Texten, zum Beispiel in Form von Beispieldatensätzen.

Es ist wichtig für die Effizienz, beim Prototyping den richtigen Realitätsgrad zu bestimmen. Eine pauschale Empfehlung ist nicht möglich. Manchmal reicht eine Skizze, und an anderer Stelle kann nur ein Prototyp mit Funktionalität eine Vorstellung davon geben, wie sich die Anwendung später anfühlen könnte. Bereits jetzt lohnt sich ein Blick auf Prototyping-Programme, die als Unterstützung dienen können. Moderne Prototyping-Software zeichnet Drahtgittermodelle, es können Menüs erstellt und eine Funktionalität kann mit Interaktivität angedeutet werden.

In Tabelle 1 finden Sie eine Übersicht mit Informationen zu einigen ausgewählten Tools, die allerdings keinen Anspruch auf Vollständigkeit erhebt, da das Angebot von Zeit zu Zeit wechselt. Letztendlich ist die Wahl des richtigen Werkzeugs auch eine Frage des Geschmacks. Designer werden eher zu grafisch reichhaltigen Tools greifen, während Programmierer sich mit der freien Bleistiftzeichnung eher schwertun. Abbildung 3 zeigt ein Beispiel für eine Handskizze und Abbildung 4 eine mit Werkzeug erstellte Umsetzung.

Abb. 3: Prototyp für eine Dozentenverwaltung; Handskizze

Abb. 3: Prototyp für eine Dozentenverwaltung; Handskizze

 

Abb. 4: Die Umsetzung mit einem Tool sorgt für eine gute Vorstellungskraft

Abb. 4: Die Umsetzung mit einem Tool sorgt für eine gute Vorstellungskraft

Name Beschreibung
Balsamiq

https://balsamiq.com/

Ein hilfreiches Tool, um schnell und einfach Low-Fidelity-Prototypen zu erstellen. Die Vorteile sind eine einfache und schnelle Handhabung, gute Bibliotheken und eine große Auswahl an UI-Elementen. Hier findet man alles, angefangen von Navigationselementen über Bereiche für Bilder und Videos bis hin zu Formularen. Bei den Screens, die mit der Interaktion verbunden sind, zeigt das Tool noch einige Mängel. Leider ist Balsamiq für den Einstieg recht teuer: Die einfachste zeitlich unbegrenzte Lizenz kostet bereits 90 Dollar.
Marvel

https://marvelapp.com/

Dieses Tool ist für die Erstellung von Hi-Fidelity-Prototypen bestens geeignet. Eine realistische Darstellung steht im Vordergrund. Die mit diesem Programm erstellten Prototypen können sehr gut zum Leben erweckt werden und fühlen sich bereits wie ein fertiges Produkt an. Positiv ist es, dass eine kostenfrei nutzbare Version für eine unbegrenzte Zeit zur Verfügung steht.
Pencil

http://pencil.evolus.vn/Downloads.html

Pencil Project ist ein kostenloses Tool, das über umfangreiche Bibliotheken an UI-Elementen, Formen, Cliparts, Icons etc. für verschiedene Plattformen verfügt. Diese können bequem per Drag and Drop im Programmfenster angeordnet werden. Es eignet sich insbesondere für ein schnelles Prototyping.
Axure

https://www.axure.com/

Axure verfügt über umfangreiche Möglichkeiten von Interfaceprototypen, die man passend konfigurieren kann. Es ermöglicht, zu den abgebildeten Elementen einfache Aktionen hinzuzufügen. Weiterhin kann man mit Axure Erklärungen und Fußnoten zu den Wireframes ergänzen, die später als Word-Dokument exportiert und als Konzeptpapiere verwendet werden können. Die Lizenzkosten starten bei 29 US-Dollar/Monat.

Tabelle 1: Überblick über Tools zum Erstellen von Prototypen

Fazit und Ausblick

Wir haben Ihnen jetzt einige Methoden und Werkzeuge der modernen Anforderungsanalyse vorgestellt. Der Fokus liegt dabei auf einer strengen Nutzerorientierung. Vergessen wir nicht: Nur wenn wir in der Phase der Konzeption und des Entwurfs sorgfältig arbeiten, kann das endgültige Produkt ein Erfolg werden. Je später im Entwicklungszyklus man mögliche Fehlentscheidungen entdeckt, desto aufwändiger und teurer wird deren Beseitigung.

Ein konkretes Umsetzungsbeispiel mit unterschiedlichen Entwürfen und einer vorausgehenden Nutzeranalyse besprechen wir im kommen Teil dieser Serie.

Links & Literatur

[1] Hahn, Martin: „Webdesign. Das Handbuch zur Webgestaltung“, Rheinwerk Design, 2016

 

PHP Magazin

Entwickler MagazinDieser Artikel ist im PHP Magazin erschienen. Das PHP Magazin deckt ein breites Spektrum an Themen ab, die für die erfolgreiche Webentwicklung unerlässlich sind.

Natürlich können Sie das PHP Magazin über den entwickler.kiosk auch digital im Browser oder auf Ihren Android- und iOS-Devices lesen. In unserem Shop ist das Entwickler Magazin ferner im Abonnement oder als Einzelheft erhältlich.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Hinterlasse einen Kommentar

Hinterlasse den ersten Kommentar!

avatar
400
  Subscribe  
Benachrichtige mich zu:
X
- Gib Deinen Standort ein -
- or -