WebApps entwickeln.

Was ist eine WebApp und wann brauchst du sie?

Eine WebApp ist eine Anwendung, die im Browser läuft und Daten verarbeitet, statt nur Inhalte anzuzeigen. Typische Beispiele sind Kundenportale, Buchungssysteme, interne Auswertungen, Angebotsrechner, Vergleichsplattformen oder branchenspezifische Verwaltungstools. Nutzer melden sich an, erfassen Daten, lösen Abläufe aus und sehen individuelle Ergebnisse.

Website, Shop oder WebApp?

Wann lohnt sich eine WebApp?

• Ein Prozess läuft heute über Excel, E-Mails und Zettel und kostet täglich Zeit.
• Mehrere Personen müssen auf dieselben Daten zugreifen, mit unterschiedlichen Rechten.
• Kunden sollen selbst etwas erledigen können: buchen, hochladen, Status einsehen, bezahlen.
• Eine Standardsoftware passt nur zur Hälfte, und die Anpassungen werden teuer.
• Du möchtest ein digitales Produkt oder Geschäftsmodell aufbauen (SaaS, Plattform, Marktplatz).
• Du brauchst Integrationen, die fertige Tools nicht bieten.

Praxisbeispiele: Typische WebApps im KMU

Der Begriff WebApp wirkt abstrakt. Konkret sind es Anwendungen, mit denen Teams täglich arbeiten oder Kunden Dinge selbst erledigen. Die folgenden Beispiele zeigen, wo sich der Aufwand häufig lohnt.

Allen Beispielen ist gemeinsam, dass ein wiederkehrender Ablauf mit mehreren Beteiligten und Daten verbunden ist. Genau dort bringt eine massgeschneiderte Lösung am meisten. Für einmalige oder seltene Vorgänge reichen meist Standardwerkzeuge.

Kaufen, Low-Code oder individuell entwickeln?

Es gibt drei Wege, und jeder hat seinen Platz. Die richtige Wahl hängt von Komplexität, Budget, Zeit und davon ab, wie wichtig dir Unabhängigkeit ist.

Bekannte Low-Code-Werkzeuge sind Airtable, Softr, Bubble und Retool. Sie eignen sich gut, um eine Idee zu validieren. Planst du ein Produkt mit vielen Nutzern, solltest du frühzeitig überlegen, wie ein späterer Umstieg auf eine eigene Lösung aussehen könnte.

Schritt 1: Problem, Ziele und Nutzer klären

Die meisten gescheiterten Softwareprojekte scheitern nicht an der Technik, sondern daran, dass die Anforderungen unklar waren. Investiere Zeit in diese Phase, sie spart später ein Vielfaches.

1. Problem benennen. Welches Problem lösen wir, und für wen? Wie läuft der Prozess heute ab, und wo tut es weh?
2. Ziele messbar machen. Zum Beispiel: Bearbeitungszeit pro Auftrag von 30 auf 10 Minuten senken, 80 Prozent der Anfragen ohne Rückfrage erledigen.
3. Nutzergruppen definieren. Wer nutzt die App? Mitarbeitende, Kunden, Partner? Welche Rollen und Rechte brauchen sie?
4. Abläufe aufzeichnen. Zeichne den heutigen Prozess und den gewünschten Zielprozess als einfaches Diagramm, zum Beispiel in Miro oder FigJam.
5. Anforderungen sammeln. Formuliere Anwendungsfälle als User Stories: «Als Kundin möchte ich meinen Auftragsstatus sehen, damit ich nicht anrufen muss.»
6. Priorisieren. Teile in Muss, Soll und Kann (MoSCoW). Nur das Wichtigste kommt in die erste Version.

Fragen für das Kick-off

• Welche Daten werden verarbeitet, und wie sensibel sind sie?
• Welche bestehenden Systeme müssen angebunden werden (Buchhaltung, CRM, Shop, ERP)?
• Wie viele Nutzer werden es in einem Jahr sein, und wie viele gleichzeitig?
• Welche rechtlichen Anforderungen gelten (Datenschutz, Branchenvorschriften)?
• Wie wird Erfolg gemessen, und wer entscheidet auf Kundenseite?
• Gibt es einen festen Termin, etwa einen Messeauftritt oder eine Saison?

Schritt 2: Den MVP definieren

Ein MVP (Minimum Viable Product) ist die kleinste Version, die echten Nutzen stiftet und mit der du lernen kannst. Er ist kein Wegwerfprototyp, sondern die Basis, auf der du aufbaust.

So schneidest du den MVP

• Wähle den wichtigsten Anwendungsfall und baue nur dafür den kompletten Weg: von der Anmeldung bis zum Ergebnis.
• Verzichte bewusst auf Nebenfunktionen, Spezialfälle und Verwaltungsoberflächen, die du am Anfang manuell lösen kannst.
• Setze auf bewährte Bausteine statt eigener Erfindungen: Login, Zahlung, E-Mail-Versand und Dateiverwaltung gibt es als fertige Dienste.
• Plane Messpunkte ein: Wie siehst du, ob die App genutzt wird?
• Bringe die erste Version innerhalb weniger Wochen zu echten Nutzern.

Prototyp vor dem Code

Bevor entwickelt wird, lohnt sich ein klickbarer Prototyp in Figma. Echte Nutzer testen ihn, und Änderungen sind jetzt noch günstig. Zeichne mindestens die zentralen Ansichten und den Hauptablauf.

User Stories und Akzeptanzkriterien richtig schreiben

Ein guter MVP beginnt mit präzisen Anforderungen. Dafür haben sich User Stories bewährt: kurze Beschreibungen aus der Sicht der Nutzer. Sie verhindern, dass Technik und Fachabteilung aneinander vorbeireden.

Das Grundmuster

Als [Rolle] möchte ich [Ziel], damit [Nutzen].

So gehst du vor

1. Rollen sammeln: Wer nutzt die Anwendung? Kunden, Mitarbeitende, Administratoren, Partner?
2. Aufgaben pro Rolle: Was will jede Rolle in einer typischen Woche erledigen?
3. Stories schreiben: Eine Aufgabe, eine Story. Lieber kleine als grosse Stories.
4. Akzeptanzkriterien ergänzen: Woran erkennst du, dass die Story erfüllt ist? Drei bis fünf Punkte reichen.
5. Priorisieren: Muss, Soll, Kann. Die Muss-Stories bilden den MVP.
6. Schätzen lassen: Das Entwicklungsteam schätzt den Aufwand. Gemeinsam entscheidet ihr, was in die erste Version kommt.

Mit einem Werkzeug wie Linear, Notion oder GitHub Projects verwaltest du die Stories später im Projektverlauf. Wichtig ist, dass alle Beteiligten denselben Stand sehen.

Schritt 3: UX und Interface Design

Eine WebApp wird im Alltag benutzt, oft täglich. Klarheit und Geschwindigkeit sind wichtiger als Effekte.

• Eine Hauptaufgabe pro Bildschirm, klare Handlungsaufforderungen.
• Verständliche Navigation mit wenigen Hauptbereichen.
• Formulare mit sinnvollen Standardwerten, Inline-Validierung und klaren Fehlermeldungen.
• Leere Zustände gestalten: Was sieht ein neuer Nutzer, wenn noch keine Daten da sind?
• Lade- und Fehlerzustände immer einplanen.
• Tabellen mit Suche, Filter und Sortierung für datenintensive Ansichten.
• Responsive Gestaltung: Auf dem Tablet oder Smartphone muss der Kernablauf funktionieren.
• Barrierefreiheit: Tastaturbedienung, Kontraste, Beschriftungen.
• Ein Designsystem mit wiederverwendbaren Komponenten sorgt für Konsistenz und beschleunigt die Entwicklung.

Orientiere dich an etablierten Mustern. Nutzer kennen bereits Muster aus anderen Anwendungen, und Vertrautes ist leichter zu bedienen. Prüfe zudem früh mit drei bis fünf echten Nutzern, ob sie ohne Erklärung klarkommen.

Schritt 4: Der passende Tech-Stack

Der Tech-Stack ist die Summe der Technologien, mit denen die App gebaut wird. Es gibt viele gute Optionen. Wichtig sind Verbreitung, Wartbarkeit, Verfügbarkeit von Fachleuten und Eignung für deinen Fall. Einen exotischen Stack zu wählen, nur weil er neu ist, rächt sich bei Betrieb und Weiterentwicklung.

Ein bewährter moderner Stack

Entscheidungshilfen

• Schnell zum Ziel: Next.js mit Supabase und Vercel ist für viele MVPs eine produktive Kombination.
• Datenhoheit in der Schweiz: Wähle Anbieter mit Rechenzentren in der Schweiz oder der EU, etwa Infomaniak, und prüfe Auftragsverarbeitung und Standorte.
• Komplexe Fachlogik: Ein eigenes Backend mit klarer Schichtenarchitektur kann sich lohnen.
• Interne Tools: Low-Code-Plattformen wie Retool sind oft schneller.
• Mobile App nötig? Eine Progressive Web App (PWA) deckt viele Fälle ab, bevor native Apps nötig werden.

Mehr zu unserer Arbeitsweise findest du auf der Seite Webentwicklung.

Schritt 5: Datenmodell und Architektur

Das Datenmodell ist das Fundament. Fehler hier sind später aufwendig zu korrigieren.

1. Entitäten identifizieren. Welche «Dinge» gibt es: Kunde, Auftrag, Rechnung, Produkt, Dokument?
2. Beziehungen festlegen. Ein Kunde hat viele Aufträge, ein Auftrag viele Positionen.
3. Rollen und Rechte planen. Wer darf was sehen und ändern? Mit Row Level Security in PostgreSQL oder Supabase lässt sich das direkt in der Datenbank absichern.
4. Historie berücksichtigen. Brauchst du Änderungsprotokolle, Versionen oder Archivierung?
5. Mandantenfähigkeit klären. Bedienst du mehrere Kunden mit getrennten Daten? Das beeinflusst Struktur und Sicherheit.
6. Schnittstellen planen. Welche Daten kommen von aussen (APIs, Importe), welche gehen hinaus?

Architekturprinzipien

• Halte es einfach: Ein sauberer Monolith ist für die meisten Projekte besser als ein Geflecht aus Microservices.
• Trenne Darstellung, Logik und Daten.
• Setze auf Standards und dokumentierte Schnittstellen.
• Plane Hintergrundjobs (zum Beispiel für E-Mails und Berichte) von Anfang an ein.
• Dokumentiere Entscheidungen, damit sie später nachvollziehbar sind.

Schritt 6: Sicherheit und Datenschutz (revDSG)

Sicherheit ist kein Zusatz, sondern Teil jeder Entscheidung. Bei Anwendungen mit Kundendaten oder Zahlungen ist sie zwingend.

Technische Grundlagen

• Alle Verbindungen laufen über HTTPS.
• Passwörter werden nie im Klartext gespeichert, besser Login-Dienste mit bewährten Verfahren nutzen.
• Zwei-Faktor-Authentifizierung für Administratoren, optional für Nutzer.
• Rollen und Rechte serverseitig prüfen, nie nur im Browser.
• Eingaben validieren und gegen Angriffe wie SQL-Injection und Cross-Site-Scripting schützen. Die OWASP Top 10 sind die Standardreferenz.
• Geheimnisse wie API-Schlüssel nie im Code oder im Browser speichern.
• Abhängigkeiten aktuell halten und auf bekannte Schwachstellen prüfen.
• Regelmässige Backups mit getesteter Wiederherstellung.
• Logging und Alarmierung bei auffälligem Verhalten.
• Sicherheitstests vor dem Livegang, bei sensiblen Systemen durch Dritte.

Datenschutz in der Schweiz

Das revidierte Datenschutzgesetz (revDSG) gilt seit September 2023. Wichtige Punkte für WebApps:

• Transparenz: Eine verständliche Datenschutzerklärung nennt Zwecke, Empfänger und Aufbewahrung.
• Datenminimierung: Erhebe nur, was du brauchst.
• Privacy by Design und by Default: Datenschutzfreundliche Voreinstellungen von Anfang an.
• Auftragsbearbeiter: Mit Hosting- und Dienstleistern schliesst du Verträge zur Auftragsbearbeitung.
• Auslandtransfer: Bei Anbietern ausserhalb der Schweiz sind die Voraussetzungen für den Datentransfer zu prüfen.
• Betroffenenrechte: Auskunft, Berichtigung und Löschung müssen praktisch umsetzbar sein.
• Datenschutz-Folgenabschätzung: Bei hohem Risiko für Betroffene erforderlich.
• Meldepflicht: Verletzungen der Datensicherheit mit hohem Risiko sind dem EDÖB zu melden.

Informationen findest du beim Eidgenössischen Datenschutz- und Öffentlichkeitsbeauftragten (EDÖB). Bei besonders schützenswerten Daten wie Gesundheit oder Finanzen zieh Fachleute bei.

Schritt 7: Entwicklung in Iterationen

Statt monatelang im Verborgenen zu entwickeln, arbeitest du in kurzen Zyklen und zeigst regelmässig lauffähige Ergebnisse.

• Sprints von ein bis zwei Wochen mit klaren Zielen und einer Demo am Ende.
• Code-Versionierung mit Git, zum Beispiel auf GitHub oder GitLab. Jeder Schritt ist nachvollziehbar und rückgängig zu machen.
• Code-Reviews: Vier Augen finden mehr Fehler.
• Automatisierte Tests: Zentrale Abläufe werden bei jeder Änderung geprüft.
• Continuous Integration und Deployment: Änderungen werden automatisch gebaut, getestet und bereitgestellt.
• Umgebungen trennen: Entwicklung, Test (Staging) und Produktion.
• Feature Flags: Neue Funktionen lassen sich gezielt für wenige Nutzer aktivieren.
• Transparente Kommunikation: Ein gemeinsames Board mit Aufgaben, zum Beispiel in Linear oder Notion.

KI in der Entwicklung

KI-Assistenten beschleunigen die Entwicklung spürbar, etwa bei Boilerplate, Tests und Dokumentation. Sie ersetzen aber nicht das Verständnis für Architektur und Sicherheit. Jeder generierte Code muss geprüft werden. Wir setzen KI als Werkzeug ein, um schneller zu sein, nicht um Qualität zu ersetzen.

Schritt 8: Qualitätssicherung und Livegang

Vor dem Start prüfst du die App systematisch. Plane dafür Zeit ein.

• Funktionstests der wichtigsten Abläufe mit echten Beispieldaten.
• Tests auf verschiedenen Browsern und Geräten.
• Leistungstest: Verhält sich die App bei vielen gleichzeitigen Nutzern stabil?
• Sicherheitsprüfung inklusive Rollen und Rechten.
• Abnahmetest durch echte Nutzer (User Acceptance Test).
• Barrierefreiheit und Mobile-Ansicht prüfen.
• Fehlerüberwachung wie Sentry und Verfügbarkeitsmonitoring aktivieren.
• Backup- und Wiederherstellungstest durchführen.
• Datenschutzerklärung, AGB und Einwilligungen prüfen.
• Datenmigration aus Altsystemen testen und Rückfallplan festlegen.
• Schulung und kurze Anleitung für Nutzer vorbereiten.

Der Livegang

Starte wenn möglich mit einer kleinen Nutzergruppe (Soft Launch). So erkennst du Probleme, bevor alle betroffen sind. Halte während der ersten Tage Support bereit, beobachte Fehler und Nutzung genau und sammle Rückmeldungen strukturiert.

Schritt 9: Betrieb, Wartung und Weiterentwicklung

Eine WebApp ist nie «fertig». Nach dem Start beginnt der Betrieb, und mit ihm Kosten und Aufgaben, die du von Anfang an einplanen solltest.

• Updates: Frameworks, Bibliotheken und Server müssen regelmässig aktualisiert werden.
• Sicherheitspatches: Zeitnah einspielen.
• Monitoring: Fehler, Leistung und Verfügbarkeit überwachen.
• Backups: Regelmässig und getestet.
• Support: Anlaufstelle für Nutzerfragen.
• Weiterentwicklung: Rückmeldungen und Nutzungsdaten bestimmen die nächsten Funktionen.
• Dokumentation: Betriebsanleitung, Architektur und Zugänge sauber festhalten.

Als Faustregel rechnest du mit etwa 15 bis 25 Prozent der Entwicklungskosten pro Jahr für Wartung und Betrieb, je nach Komplexität. Ein Wartungsvertrag mit klaren Reaktionszeiten schafft Planungssicherheit.

Werkzeug-Übersicht für den WebApp-Alltag

Die Auswahl hängt von Anforderungen, Datenschutz und vorhandenem Wissen ab. Lass dir vom Entwicklungsteam begründen, warum es welches Werkzeug empfiehlt, und achte darauf, dass du am Ende Zugriff auf alle Konten, Zugänge und den Quellcode hast.

Was kostet eine WebApp?

Die Kosten hängen stark von Umfang, Komplexität und Anforderungen ab. Die folgenden Spannen sind grobe Orientierungswerte für Projekte in der Schweiz. Verbindliche Zahlen gibt es erst nach einer Klärung der Anforderungen.

Was die Kosten beeinflusst

• Anzahl und Komplexität der Funktionen
• Anzahl der Rollen und Rechte
• Integrationen mit Fremdsystemen
• Design- und Qualitätsanspruch
• Sicherheits- und Compliance-Anforderungen
• Datenmigration aus bestehenden Systemen
• Betrieb, Wartung und Support

Checkliste: So bereitest du ein Angebot vor

Je besser dein Briefing, desto präziser und vergleichbarer werden die Angebote. Die folgende Liste hilft dir, in einer Stunde die wichtigsten Informationen zusammenzutragen.

• Ziel: Welches Problem soll gelöst werden, und woran erkennst du den Erfolg?
• Nutzer: Wer arbeitet damit? Wie viele Personen, in welchen Rollen?
• Kernfunktionen: Die fünf bis zehn wichtigsten Aufgaben als User Stories.
• Bestehende Systeme: Welche Software, Datenquellen und Schnittstellen sind im Einsatz?
• Daten: Welche Daten werden verarbeitet? Sind Personendaten oder besonders schützenswerte Daten dabei?
• Sprachen und Währungen: Deutsch, Französisch, Italienisch, Englisch? CHF und EUR?
• Termin: Gibt es einen festen Starttermin oder ein Ereignis, das den Zeitplan bestimmt?
• Budgetrahmen: Nenne eine Spanne. Das ermöglicht Vorschläge, die zu deinem Rahmen passen.
• Betrieb: Wer betreut die Anwendung nach dem Livegang?
• Referenzen: Gibt es Anwendungen, die dir gefallen, und welche Teile davon?

Bitte um ein Angebot in Etappen: eine kurze Konzeptphase mit Festpreis, danach Entwicklung in Iterationen. So bleibt das Risiko beidseitig überschaubar, und du kannst nach jeder Etappe entscheiden, wie es weitergeht.

So wählst du das richtige Entwicklungsteam

• Sieht das Team Beispiele ähnlicher Projekte, und kannst du Referenzen sprechen?
• Versteht es dein Geschäft und stellt es die richtigen Fragen, statt sofort zu offerieren?
• Arbeitet es transparent, mit regelmässigen Demos und Zugang zum Code?
• Gehört der Quellcode dir? Sind Rechte und Übergabe vertraglich geklärt?
• Gibt es ein Konzept für Sicherheit, Datenschutz und Betrieb?
• Wie läuft Support nach dem Livegang?
• Wie hoch ist das Risiko der Abhängigkeit von einzelnen Personen?
• Sind Kommunikationswege, Reaktionszeiten und Zuständigkeiten klar?

Wir begleiten WebApp-Projekte von der Idee über Prototyp und MVP bis zum Betrieb. Mehr dazu auf der Seite Webentwicklung und in den Referenzen. Wie du Prozesse zusätzlich automatisierst, liest du im Ratgeber Automation.

Die häufigsten Fehler bei WebApp-Projekten

1. Zu grosser Umfang am Anfang. Wer alles auf einmal will, liefert spät oder nie.
2. Unklare Anforderungen. Missverständnisse werden im Verlauf teuer.
3. Keine Nutzer eingebunden. Die App löst dann das Problem, das niemand hat.
4. Sicherheit und Datenschutz zum Schluss. Nachträglich ist beides aufwendig.
5. Wartung vergessen. Ungepflegte Systeme werden unsicher und veralten.
6. Plattformabhängigkeit unterschätzt. Ohne Exportmöglichkeit sitzt du fest.
7. Technik vor Nutzen. Der neueste Stack ist kein Ziel, gelöste Probleme sind es.
8. Keine Erfolgsmessung. Ohne Kennzahlen weisst du nicht, ob sich die Investition lohnt.

Der beste Schutz: klein starten, früh testen, ehrlich messen und mit einem Partner arbeiten, der mitdenkt.