Von der Idee zur App

Dr. Michael Wächter, Erik Hunold & Christoph Neumann

Sie haben eine Idee für eine eigene App und fragen sich, wie Sie diese realisieren können? In dieser Ausgabe von „Nachgelesen“ erfahren Sie an einem konkreten Beispiel:

Beispielszenario: Bäckerei-App

Der Gründer und Inhaber der Bäckerei Frisch besitzt fünf Filialen in einer großen Kreisstadt im ländlichen Raum. In Zeiten der Digitalisierung und zunehmender Konkurrenz durch Backwaren in Discountern, überlegt Herr Frisch, wie er die Technologien der Digitalisierung für sich nutzen kann, um sein Angebot attraktiver für seine Kunden zu gestalten bzw. neue Kunden zu gewinnen. Im ersten Schritt hat er in ein Kassensystem investiert, das zu jedem Zeitpunkt weiß, wie viele Produkte aus seinem Sortiment schon verkauft bzw. noch verfügbar sind. Diese Informationen sind zwar intern schon sehr hilfreich – aktuell werden sie aber nicht weiter genutzt. Zusammen mit anderen Teilnehmern wurden im Basis-Workshop „Neue Produkte und Dienste“ des Mittelstand 4.0-Kompetenzzentrum Chemnitz verschiedene Ideen und Chancen für die Weiterentwicklung seiner Bäckerei erarbeitet, z. B. die Entwicklung einer App, mit der Kunden die Möglichkeit haben, schon vorher zu sehen, welche Produkte in welcher Filiale noch vorhanden sind. Dadurch können die Kunden ihre Wunschprodukte reservieren und fahren nicht umsonst zur Filiale. Außerdem könnten Kunden, die bereits vor Ort sind, auch Produkte für Nachbarn und Freunde mitbringen, die es aus zeitlichen oder organisatorischen Gründen nicht in die Bäckereifilialen schaffen. Doch dabei stellen sich verschiedene Fragen, die in dieser Ausgabe unserer Nachgelesen- Reihe beantwortet werden:

In einer Reihe von Fachworkshops beantworteten die Teilnehmer diese Fragen, indem sie den gesamten Entwicklungsprozess quasi „Von der Idee zur App“ nutzerzentriert durchliefen.

Anforderungen nutzerzentriert erheben

In einem nutzerzentrierten Entwicklungsprozess erfolgt im ersten Schritt die Aufnahme der Anforderungen von den Anwendern. Dazu existieren in der Literatur verschiedene Methoden, die sich allerdings nur bedingt in der Praxis eignen. Diese Methoden unterscheiden sich u. a. hinsichtlich des Anwendungsaufwandes bzw. des Schwierigkeitsgrades bzgl. der Auswertung aufgenommener Daten (siehe Tabelle 1).

Tabelle 1: Methoden zur Aufnahme der Anforderungen
Methoden Geringer Aufwand Einfache Auswertung
Aufgabenanalyse
Beobachtung
Interview
Kontextanalyse
Fokusgruppe
Lösungssuche
Dokumentenanalyse
Nutzungsszenario
Personas
Legende:      ◯ trifft nicht zu      ◑ trifft teilweise zu    ⬤ trifft zu

Die Aufgabenanalyse hat zum Ziel, die typischen Aufgaben eines Anwenders während der Nutzung eines Systems, z. B. einer Software oder Hardware, zu untersuchen. Dazu werden vom Anwender benötigte Informationen und Schnittstellen zu anderen Systemen identifiziert und die Arbeitsabläufe analysiert. Als Ergebnis resultieren Strukturbäume, mit denen die Kernelemente der Tätigkeiten dargestellt werden können.

Die Kontextanalyse stellt eine kombinierte Methode aus halbstrukturiertem Interview und teilnehmender Beobachtung dar. Hier werden die Arbeitsabläufe vom Entwickler während des realen Arbeitsprozesses beobachtet und mögliche Abhängigkeiten zwischen Produkt und Prozess identifiziert. Bei Bedarf werden die beobachteten Anwender direkt befragt, um Missverständnisse zu vermeiden.

Im Rahmen einer Fokusgruppe mit Entwicklern und Anwendern lassen sich Erwartungen und Anforderungen der Anwender in der Gruppe analysieren und ggf. schon erste Lösungsideen generieren. Durch die Interaktion der Teilnehmer entstehen zudem neue Blickwinkel und ein einheitliches Verständnis für das zu entwickelnde Produkt.

Die Lösungssuche dient zur Identifikation bereits verfügbarer Produkte, die den erhobenen Anforderungen der Anwender gerecht werden und die Kosten einer Neuentwicklung sparen. Zusätzlich besteht die Möglichkeit, vorhandene Lösungen zu nutzen und dadurch den eigenen Entwicklungsaufwand zu minimieren.

Mit Hilfe von Nutzungsszenarien lassen sich typische Abläufe und Interaktionen zwischen Anwender und Software oder Hardware beschreiben, die während der Nutzung auftreten können. Dadurch lassen sich konkrete Handlungsziele und Aufgaben aus Sicht der Anwender, als Grundlage für die technische Lösung, identifizieren.

Die beschriebenen Methoden erfüllen die Anforderungen aus der Praxis nach wenig zeitlichem Anwendungsaufwand und einer einfachen Auswertung und können folglich ressourcenschonend eingesetzt werden.

Im ersten Fachworkshop „Anforderungen richtig erheben“ wendeten die Teilnehmer die beschriebenen Methoden Aufgabenanalyse, Kontextanalyse, Fokusgruppe, Lösungssuche und Nutzungsszenario an und erhielten dabei folgende Anforderungen:

  • Anzeigen der Verfügbarkeit von Backwaren
  • Möglichkeit zum Bezahlen mit Kreditkarte und PayPal
  • Reservieren von Backwaren zum Abholen
  • Erstellen von Gruppen mit Freunden oder Nachbarn
  • Mitbringen von Backwaren für Freunde oder Nachbarn
  • Belohnungssystem für das Mitbringen von Backwaren

Die Teilnehmer des Fachworkshops waren dabei sowohl Entwickler, und damit Anwender der Analysemethoden, als auch Nutzer der späteren App, da jeder selbst Kunde beim Bäcker ist. Als zentrales Ergebnis des Workshops ergibt sich, in Erweiterung der erhobenen Anforderungen, ein Nutzungsszenario, das den Ablauf der App-Nutzung beschreibt. Als klassisches Szenario fällt dem Kunden nach der Arbeit um 16:30 Uhr ein, dass er noch bestimmte Backwaren braucht. Abbildung 1 zeigt einen möglichen, groben Bestellablauf und die grundlegenden Funktionen, die eine Bäckerei-App beinhalten sollte, um aus Kundensicht funktional zu sein.

Abbildung 1: Methoden zur Aufnahme der Anforderungen

Die erste App-Oberfläche

Ausgehend von den aufgenommenen Anforderungen, gilt es nun eine erste Oberfläche zu gestalten. Diese soll in erster Linie als Diskussionsgrundlage dienen. Dementsprechend liegt das Hauptaugenmerk in diesem Stadium auf der Funktionalität der einzelnen Oberflächenelemente sowie der grafischen Gestaltung. Um eine möglichst hohe Nutzerfreundlichkeit zu erhalten, sind verschiedene Regeln und Normen zu beachten. Die folgenden DIN-Vorschriften stellen hierbei den Ausgangspunkt dar:

  • DIN EN ISO 9241 – Ergonomische Anforderungen für Bürotätigkeiten mit Bildschirmgeräten
  • DIN EN ISO 9241-210 – Benutzerorientierte Gestaltung von interaktiven Systemen
  • DIN EN ISO 9241-110 – Dialogregeln
  • DIN EN ISO 14915 – Software-Ergonomie für Multimedia-Benutzungsschnittstellen
  • DIN EN 894 – Ergonomische Anforderungen an die Gestaltung von Anzeigen und Stellteilen

Neben den einschlägigen DIN-Normen ist es empfehlenswert, sich an vorhandenen Styleguides zu orientieren. Diese können beispielsweise im Corporate Design bzw. dem Erscheinungsbild des Unternehmens festgelegt sein. Unabhängig von den unternehmensspezifischen Festlegungen existieren Empfehlungen der verschiedenen Plattformanbieter für das Design. Hierbei sind speziell die Designrichtlinien von Android und iOS hervorzuheben.

Aufbauend auf diesen Grundlagen gibt es verschiedene Möglichkeiten, ein Vorführmodell zu realisieren. Für das Ziel der Gestaltung einer App bzw. Softwareoberfläche bieten sich hierbei Papier und Powerpoint o. Ä. zur Gestaltung eines ersten Vorführmodells an. Da sich bereits in Powerpoint erste Funktionen hinterlegen lassen, ist diese Variante am ehesten geeignet. Wie aus Abbildung 2 hervorgeht, ist es mithilfe dieser Werkzeuge, speziell in den frühen Phasen des Entwicklungsprozesses möglich, verschiedene Designalternativen aufzuzeigen und gleichzeitig die Änderungskosten gering zu halten. Auf Basis dieser theoretischen Grundlagen wurde zusammen mit den Teilnehmern ein solches Vorführmodell exemplarisch umgesetzt. Die Ausgangssituation stellte hierbei die Anforderungsanalyse sowie das Nutzungsszenario des ersten Workshops dar. Neben dem Einstellen der grundlegenden Basisparameter wurde den Teilnehmern die Vorgehensweise zur Funktionsergänzung in Powerpoint vermittelt. Im Anschluss daran setzten diese das vorgegebene Szenario selbstständig um. Hierbei sollten sich die Teilnehmer an den angeführten Normen und Gestaltungsrichtlinien orientieren und erste Grafikelemente mit Funktionen versehen. Als Ergebnis, nach der ca. einstündigen Bearbeitungszeit, sollte ein erstes Vorführmodell der App gestaltet sein. Dabei sollte bereits ein Bestellvorgang durchgespielt werden. Die Leiter des Workshops unterstützten die Teilnehmer bei Schwierigkeiten mit der Umsetzung, sodass am Ende der Bearbeitungszeit jeder Teilnehmer das Ziel erreichte. Im Anschluss daran, wurden die Ergebnisse verglichen sowie Gemeinsamkeiten und Unterschiede festgestellt. Dabei fiel auf, dass die Teilnehmer bei ihrer aus Nutzersicht zentrierten Gestaltung, weitestgehend die gleichen Merkmale realisierten und das vorab erlernte Wissen umfangreich umgesetzt hatten. Abschließend wurde den Teilnehmern ein exemplarisches Vorführmodell präsentiert, welches gewünschte Funktionen in der App bereits vollständig darstellen konnte.

Abbildung 2: Designalternativen in Abhängigkeit der Änderungskosten

App-Prototypen selbst programmieren

Mit der Fertigstellung des ersten interaktionsfähigen Prototyps in Powerpointform stellt sich nun die Frage, wie man den erstellten Prototyp in der zukünftigen Anwendung testen kann:

  • Welche Programmierkenntnisse benötige ich?
  • Wie viel Zeit und Geld kostet das?
  • Wie flexibel bin ich in der Entwicklung?
Abbildung 3: PowerPoint Prototyp

Diese Fragen wurden beim Workshop näher erläutert und praktisch ausprobiert.

In der heutigen Zeit gibt es ein vielfältiges Angebot an Programmiersprachen und passenden Entwicklungsumgebungen. Das Mittelstand 4.0-Kompetenzzentrum Chemnitz empfiehlt für die Entwicklung einsatzfähiger Prototypen die schnell zu lernende Programmiersprache Javascript. Denn sie bietet für die flexible Prototypenentwicklung Vorteile.

Javascript ist

  • frei verfügbar,
  • schnell zu erlernen,
  • bietet viele Bibliotheken,
  • läuft auf fast jedem System,
  • hat eine große Community und
  • wird stetig weiterentwickelt.

Die Verwendung von Javascript als Programmiersprache ermöglicht in Kombination mit HTML und CSS schnell Oberflächen und Funktionalitäten zu schaffen, um teilbare und erweiterbare Prototypen zu entwickeln.

Das wiederum ermöglicht es neue Prototypen zu testen und falls nötig, zu verwerfen oder Teile des Prototyps in einem anderen Projekt wieder zu verwenden, um den Entwicklungsaufwand so gering wie möglich zu halten. Durch die offene Wahl der Plattform ist die Software nicht an Geräte oder Hersteller gebunden und kann so im digitalen Zeitalter mit den Entwicklungen Schritt halten.

Javascript ermöglicht es verschiedenste Technologien und Formate in einer App zu vereinen.

||© TU Chemnitz
Abbildung 4: Softwarestruktur einer Javascript-Anwendung

Neben typischen Medienformaten wie bspw. .mp4 oder .flv können auch Zukunftstechnologien wie Virtual Reality, Augmented Reality oder maschinelles Lernen genutzt werden. Besonders attraktiv ist die große Zahl an verfügbaren Softwarebibliotheken, welche die Entwicklungszeit und den Entwicklungsaufwand deutlich reduzieren und Einsteigern schnelle Ergebnisse ermöglichen. Insbesondere Bibliotheken zur Datenanalyse und -darstellung ermöglichen neuartige Softwareanwendungen. Von Bedeutung sind die bekanntesten Bibliotheken Bootstrap und React, die bereits von großen Unternehmen genutzt werden.Neben der Softwareentwicklung auf Benutzerseite bietet Javascript die Entwicklung von Serveranwendungen. Dazu gibt es bereits Anwendungen die Server-Prototypen ermöglichen. Diese können auch von Einsteigern bequem ohne Programmierung aufgesetzt werden.

Den Teilnehmern des Workshops wurde zu Beginn anhand eines praktischen Beispiels aufgezeigt, wie flexibel die moderne Gestaltung von Softwareoberflächen und Hintergrundanwendungen gestaltet sein kann. Basierend auf dieser Erfahrung lernten die Teilnehmer die Programmiersprache im Detail verständlich kennen. Der Fokus lag dabei mehr auf der Anwendungsorientierung als auf technischen Raffinessen. Neben praktischen Abwägungen, die man als Prototypenentwickler treffen muss, wurde besonders auf die Funktionsstruktur eingegangen, um die Neugier der Teilnehmer zu wecken.

Nach einer theoretischen Einleitung wurde Javascript praktisch vermittelt. Dazu wurde zusammen mit den Teilnehmern eine kleine Serveranwendung flussbasiert programmiert. Diese Anwendung ermöglichte den nächsten Schritt – die Anwendungsprogrammierung. Mittels eines Online-Tools konnten die Teilnehmer den zuvor erstellten Interaktionsprototyp in einen Softwareprototyp überführen. Dieser ließ sich dann bereits auf dem eigenen Mobiltelefon ausprobieren, da die zuvor erstellte Serverapplikation die dynamischen Daten für Testzwecke bereitstellte.

Abbildung 5: Vielfalt des Javascript-Universums

Die App von Kunden bewerten lassen

Evaluationsverfahren zur Bewertung von Produkten haben das Ziel, herauszufinden, warum diese vom Kunden als gut oder schlecht wahrgenommen werden und welche Verbesserungspotenziale bestehen. Dabei werden vorhandene Usabilityprobleme und mögliche Lösungsansätze identifiziert. Zudem kann die aktuelle Usability gemessen und mit anderen Produkten verglichen werden.Dabei unterscheiden sich die angewendeten Verfahren zur Bewertung von Produkten anhand der bewertenden Personen.

Es existieren expertenbasierte Evaluationsverfahren, die ausschließlich von Usabilityexperten des untersuchten Anwendungsfeldes oder angrenzender Fachbereiche durchgeführt werden. Diese Art der Bewertung ist geeignet, um Produkte schon frühzeitig in der Entwicklung hinsichtlich Effektivität und Effizienz zu beurteilen und deren prinzipielle Anwendbarkeit zu prüfen. Die Durchführung erfolgt aufgrund der vorhandenen Erfahrungen meist schnell, die Bewertung vieler Varianten ist möglich.

mögliche expertenzentrierte Evaluationsverfahren:

  • Expertenbefragung,
  • Standard-Review,
  • GOMS und
  • Cognitive Walktrough

Des Weiteren stehen nutzerzentrierte Evaluationsverfahren zur Verfügung, bei denen potenzielle Anwender des Produktes eine Bewertung vornehmen. Die nutzerzentrierte Bewertung spielt eine wichtige Rolle, um gebrauchstaugliche Produkte zu entwickeln, da die Usability immer abhängig vom Anwendungskontext ist und diese am besten von den Nutzern selbst beurteilt werden kann. Durch Einbeziehung der Anwender können subjektive Informationen (z. B. Zufriedenstellung) aufgenommen und in der weiteren Entwicklung berücksichtigt werden. Nutzertests identifizieren tatsächliche Probleme, die beim praktischen Einsatz des Produktes auftreten. Dabei werden vorhandene Schwachstellen, welche starke Auswirkungen auf die Usability haben, z. B. Prozessabläufe, schon in den frühen Phasen der Entwicklung aufgedeckt. Der Erkenntnisgewinn steigt dabei mit zunehmender Erlebbarkeit, also Realitätsnähe, der verfügbaren Prototypen.

mögliche nutzerzentrierte Verfahren:

  • Eye-Tracking,
  • Lautes Denken,
  • Nutzerinterviews,
  • Fokusgruppen und
  • Fragebögen

In einem Usability-Test können zukünftige Nutzer (Software-) Produkte anhand typischer Aufgaben bewerten. Dabei können verschiedene Messungen, z. B. Fehlerhäufigkeit, benötigte Zeit oder Augenbewegungen (Eye-Tracking) aufgenommen werden. Zudem lassen sich mittels Lautem Denken und Beobachten Verhaltensprotokolle erstellen, die Aufschluss über die Bedienbarkeit geben. Durch Nutzerinterviews und Fragebögen können zusätzliche Informationen zum bewerteten Produkt in Erfahrung gebracht werden.

Dabei ergeben sich objektive Messkriterien, wie Anzahl der Fehler, Zeit für eine Fehlerbehebung, Zeit für die Bearbeitung einer oder mehrerer Aufgaben, Anzahl tatsächlich genutzter Funktionen, Verhältnis positiver zu negativen Äußerungen und Wartezeiten des Systems oder Nutzers, die einen Vergleich verschiedener Produkte ermöglichen.

Fragebögen stellen ein effektives und effizientes Evaluationsverfahren dar, um strukturiert subjektive Einschätzungen zu einem Produkt hinsichtlich der wahrgenommenen Usability zu erhalten. Dabei existieren eine Vielzahl von wissenschaftlich validierten Fragebögen, die sowohl die Usability als auch das Nutzererlebnis abdecken und sich für Hardware und/oder Software eignen (Tabelle 2).

Das nutzerzentrierte Vorgehen berücksichtigt die Anforderungen von zukünftigen Anwendern und sichert eine hohe Gebrauchstauglichkeit der gestalteten App. Dadurch wird der Nutzen für den Anwender von vorn herein systematisch adressiert und die Grundlage für eine erfolgreiche Einführung der entwickelten Dienstleistung geschaffen.

Tabelle 2: Fragebögen zur Erhebung von Usability und Nutzererlebnis
Fragebogen Gegenstand der Messung Software Hardware
SUMI (Kirakowski und Corbett 1993) Gebrauchstauglichkeit
IsoNorm 9241/10 (Prümper und Anft 1993) Gebrauchstauglichkeit
IsoMetrics (Gediga und Hamborg 1999) Gebrauchstauglichkeit
QUIS (Shneiderman und Plaisant 2004) Gebrauchstauglichkeit
UMUX (Finstad 2010) Gebrauchstauglichkeit
SUS (Brooke 1996) Gebrauchstauglichkeit
AttrakDiff (Hassenzahl et al. 2003) Gebrauchstauglichkeit, Nutzererlebnis
meCUE (Minge et al. 2017) Gebrauchstauglichkeit, Nutzererlebnis
Legende:      ◯ trifft nicht zu      ⬤ trifft zu


Anmerkungen

  • Brooke, J. (1996). SUS-A quick and dirty usability scale. Usability evaluation in industry, 189(194), 4-7.
  • Finstad, K. (2010). The usability metric for user experience. Interacting with Computers, 22(5), 323-327.
  • Gediga, G., & Hamborg, K. C. (1999). IsoMetrics: Ein Verfahren zur Evaluation von Software nach ISO 9241-10. Evaluationsforschung. Göttingen: Hogrefe, 195-234.
  • Hassenzahl, M., Burmester, M., & Koller, F. (2003). AttrakDiff: Ein Fragebogen zur Messung wahrgenommener hedonischer und pragmatischer Qualität. In Mensch & computer 2003 (pp. 187-196). Vieweg+ Teubner Verlag.
  • Minge, M., Thüring, M., Wagner, I., & Kuhr, C. V. (2017). The meCUE questionnaire: a modular tool for measuring user experience. In Advances in Ergonomics Modeling, Usability & Special Populations (pp. 115-128). Springer, Cham.
  • Porteous, M., Kirakowski, J., & Corbett, M. (1993). SUMI user handbook. Human Factors Research Group, University of Cork, Ireland.
    Prümper, J. (1997). Der benutzungsfragebogen isonorm 9241/10: Ergebnisse zur reliabilität und validität. In Software-Ergonomie’97 (pp. 253-262). Vieweg+ Teubner Verlag.
  • Shneiderman, B., & Plaisant, C. (2004). Evaluating interface designs. Designing the user interface: Strategies for effective human-computer interaction. 4th ed. Boston: Pearson/Addison-Wesley, 139-71.

Download

Dieses Nachgelesen bieten wir Ihnen auch in einer Druckversion an. Nutzen Sie hierfür folgenden Link für den DOWNLOAD

Autoren

Erik Hunold ist wissenschaftlicher Mitarbeiter an der Professur Arbeitswissenschaft & Innovationsmanagement der Technischen Universität Chemnitz. Im Mittelstand 4.0-Kompetenzzentrum Chemnitz beschäftigt er sich mit den Themen Arbeit 4.0, moderne Arbeitswelten sowie Geschäftsmodellentwicklung und Usability.
erik.hunold@betrieb-machen.de

Dr. Michael Wächter leitet das Cluster Hybrid Societies an der Professur Arbeitswissenschaft und Innovationsmanagement der Technischen Universität Chemnitz. Im Mittelstand 4.0-Kompetenzzentrum Chemnitz betreut er die Themen nutzerzentrierte Produkt und Prozessgestaltung, moderne Arbeitswelten der Zukunft und die Gestaltung digitaler Geschäftsmodelle.
michael.waechter@betrieb-machen.de

Weitere Informationen

Das Mittelstand 4.0-Kompetenzzentrum Chemnitz gehört zu Mittelstand-Digital. Mit Mittelstand-Digital unterstützt das Bundesministerium für Wirtschaft und Energie die Digitalisierung in kleinen und mittleren Unternehmen und dem Handwerk.

Was ist Mittelstand-Digital?
Mittelstand-Digital informiert kleine und mittlere Unternehmen über die Chancen und Herausforderungen der Digitalisierung. Die geförderten Kompetenzzentren helfen mit Expertenwissen, Demonstrationszentren, Best-Practice-Beispielen sowie Netzwerken, die dem Erfahrungsaustausch dienen. Das Bundesministerium für Wirtschaft und Energie (BMWi) ermöglicht die kostenfreie Nutzung aller Angebote von Mittelstand-Digital.
Der DLR Projektträger begleitet im Auftrag des BMWi die Kompetenzzentren fachlich und sorgt für eine bedarfs- und mittelstandsgerechte Umsetzung der Angebote. Das Wissenschaftliche Institut für Infrastruktur und Kommunikationsdienste (WIK) unterstützt mit wissenschaftlicher Begleitung, Vernetzung und Öffentlichkeitsarbeit.
Weitere Informationen finden Sie unter www.mittelstand-digital.de