Design und Entwicklung von Web-Shops

Allgemeine Designüberlegungen zum Thema Web-Shops

Wir befassen uns bei ATEGRA seit 1994 mit dem Design von Software-Systemen im professionellen Umfeld und haben viele verschiedene Software-Lösungen entwickelt: Workflow-Lösungen, Knowledge-Management-Lösungen, Dokumenten-Management- webShop_basket Lösungen, Lösungen zur Verwaltung von Anlagen oder Rechten und zur Fakturierung, Lösungen zur Bemessung, Auszahlung und Verwaltung von Geldern u.a.m. Trotz der Vielfalt der Anwendungen und der thematischen Breite, finden sich im Kern aller Lösungen immer wiederkehrende Design-überlegungen. Im Folgenden stellen wir Design-überlegungen dar, die aus Sicht ATEGRA für Webshops allgemein gültig sind.

Hauptziele für einen Web-Shop

Zielsetzungen für jeden Web-Shop sind aus unserer Sicht folgende:

Einfache Suche nach Artikeln und schnelles Finden des gewünschten Artikels
Wenige Interaktionen (Mausklicks und Tastatureingaben) vom Aufrufen der Web-Site (kurze URL) über das einfache Login (z.B. Cursor bereits im Login-Feld positioniert) bis zum Suchen eines neuen Artikels (z.B. ein Hauptfeld für die Sucheingabe nach Artikeln, wobei nach allen Kriterien gleichzeitig gesucht werden kann – Artikelnummer, Artikelbezeichnung, Herstellername, Herstellernummer u. a. m.)
Kurze Antwortzeiten für die wichtigsten Operationen (längere Antwortzeiten sind akzeptabel, wenn der User erkennen und verstehen kann, dass zahlreiche Arbeitsschritte im Hintergrund ablaufen – dies sollte in diesen Fällen möglichst auch optisch dargestellt werden)
Einfaches Modifizieren von komplexen Such-Abfragen: So darf es nicht vorkommen, dass ein Benutzer bei einer kleinen Mutation der Abfrage nochmals Daten eingeben muss.
Rasche und aufwandarme Umstellungen der Navigation, des Layouts und der Präsentation: Da die Anforderungen der Kunden und des Markts immer wieder ändern, muss der Web-Shop in seiner Präsentation gegenüber den Kunden rasch anpassbar sein. Dabei ist offen, ob die Anpassungen durch Power-User und Administratoren oder durch Entwickler durchgeführt werden. Entscheidend sind die Gesamt-Kosten für die Anpassungen. Hier kann ein Monatsbudget vorgegeben werden.

Ausgangslage und Grundlage für das Design

Ausgangslage für das Design eines Web-Shops sind folgende Abklärungen und Definitionen:

Das Rollen-Modell: Definition der zu behandelnden Rollen wie Kunde, Erstkunde, Gold-Kunde, Casual Client, Chef-Einkäufer, Aktionsmanager etc.
Mengengerüst:
1. Artikel total und Anzahl neue Artikel pro Jahr
2. Kunden total und Neukunden pro Jahr, Anzahl Logins
3. maximale Anzahl Benutzer gleichzeitig auf dem Web-Shop und zeitliche Verteilung der Last über 24 Stunden und über 7 Tage
4. Anzahl Warenkörbe und Bestellungen pro Jahr
5. durchschnittliche, typische und maximale Anzahl Positionen pro Bestellung
6. durchschnittliche Anzahl Teillieferungen pro Bestellung
7. Anzahl Annullationen und Retouren
8. Anzahl Rechnungen, Mahnungen
Zu jeder der oben genannten Grössen (Entitäten) sollte definiert werden, wo und wie lange diese Daten gespeichert werden: In der Web-Shop-Datenbank oder im ERP.
Status-System für die meisten der oben genannten Entitäten: Bestellungsstatus, Kundenstatus, Warenkorbstatus, Rechnungsstatus, Artikelstatus etc.
Informationen, die der Kunde zu allen im Moment in Ausführung befindlichen Bestellungen bekommen soll sowie zu Bestellungen in der Vergangenheit (Anzahl ausgeführte Bestellungen, stornierte, nicht auslieferbare u.a.m.)
Schnittstellen zu anderen Systemen: Auftragsbearbeitung, Fakturierung, Lagerbewirtschaftung, Auslieferung
Artikel-Eigenschaften: Herstellernummer, Farbe, Grösse, Dimensionen, Ausführungsvarianten (z.B. Luxus-Variante), Lieferfristen, Lagerbestände, Spezialrabatte, Bundling etc.
Sortiments-Strukturierung: Anzahl Stufen, Anzahl Dimensionen, Umschreibungen, Such-Interface, Darstellungsdesign (Baum, Tabelle, sortierbare Liste)
Artikel-Multimedia-Daten: Anzahl Fotos pro Artikel, Foto-Typen (z.B. Seitenansicht, Aufsicht, Gesamtansicht, Innenansicht, Detailansicht), Film zum Artikel im praktischen Einsatz, Herstellerfilm
Währungen: CHF, EUR, andere. Moment und Basis für die Währungsumrechnung. Währung als Attribut einer Bestellung, eines Kunden oder eines Artikels. Lösung der Preisanzeige und Fakturierung. Fakturierung bei gemischten Währungen.
Preis-Typen: Stückpreise (CHF/Stück, CHF/Meter, CHF/Monat, CHF/Bestellung), multi-dimensionale Preise (z.B. Länge x Breite), von anderen Artikeln abhängige Preise (z.B. Bundling-Preis, Einzelpreis oder Preis zusammen mit anderem Artikel), Rabattpreise
Rabatt-Systeme: Mengen-/Volumen-Rabatt, Aktionsrabatt (in einem bestimmten Zeitraum, für bestimmte Kunden, für Neukunden, andere)
Zahlmodalitäten: Zugelassene Zahlungsweisen, Zahlungsfristen, Ratenzahlungen, A-Konto-Zahlungen und -Belastungen.
Schnittstelle zur Fakturierung und zur Finanzbuchhaltung: Uni- oder bidirektional, Generierung von Buchungssätzen. Storno und Annullationen.
Funktionalität, die den Einkäufer berät bei der Auswahl von Artikeln. Artikel die andere gekauft haben.
Kundenprofil: Vorlieben, gewünschte Newsletter-Infos, bestehende Rabattvereinbarungen.
Kunden-Feedback zu einem gekauften Artikel: Erfahrungen bei Nutzung und Gebrauch des Artikels, Bewertung nach einem oder mehreren Kriterien.
Kunden-Diskussionsforum.
Marketing: Hinweise auf neue Produkte, neue Hersteller via Newsletter, auf der Home-Page auf der Artikelgruppen-Page.
Mailing: Sammlung von E-Mail-Adressen mit Kundendaten (Anrede, Vorname, Name, Funktion, Firma) sowie Newsletter-Profil „Themen die mich interessieren“ (Permission Marketing)
CRM: Kundenprofil mit Angaben zu bevorzugten Marken u.a.m. Ansprechen der Kunden mit Bezug auf deren Vorlieben.
Statistiken für die Produktangebotsplanung, Einkaufsplanung für die Kunden (Chefeinkäufer, Anwender).
Bestellungplanung für periodische Bestellungen der Kunden: Kunde erhält Hinweis, wann die nächste Bestellung an Papier, Toner fällig ist, da die letzte Bestellung bereits n Monate zurückliegt und der Artikel langsam aufgebraucht ist.
Data-Mining: Analyse der bisherigen Einkäufe pro Login, pro Firma. Trendanalysen. Kaufempfehlungen für den Einkauf.
Atmosphäre, die der Kunde beim Einkaufen erlebt. Berücksichtigung der bisherigen Forschungsergebnisse (z.B. kühler Hintergrund bei teuren Artikeln animiert stärker zum Kauf als heller Hintergrund).

Die Grundlagen als Datenmodell

ategra_webshop_erd

Herausforderungen

Die wesentlichen Herausforderungen für das optimale Design eines Web-Shops sind folgende:

Last-Management und gute Antwortzeiten: Diese technische Thematik kann beherrscht werden durch eine skalierbare Architektur und systematische Lasttests. Bei allen Informatik-Systemen, bei denen mit erhöhten Anforderungen zu rechnen ist, müssen mindestens zwei Lasttests durchgeführt werden: Ein erster Test so rasch wie möglich, um die grundlegende Machbarkeit abzuklären. Der zweite Test sollte vor der Inbetriebnahme durchgeführt werden und zwar mit möglichst derselben Hardware und möglichst denselben Daten, die nachher im Betrieb vorkommen. Die Lasttests dienen als Basis für allfällige Performance-Optimierungen. Dabei kann die durch Benutzerverhalten generierte Last mittels Client-Software simuliert resp. real generiert werden. Bei einem Webbshop sind typischerweise das Suchen im Artikelstamm und das Hinzufügen zum Warenkorb häufige Operationen und damit auch lastbestimmend.
Gutes graphisches Design: Zeitgemäss, dem Corporate Image entsprechend aber auch performant. In gutes Design kann beliebig viel Aufwand investiert werden. Hohe Ansprüche führen zu einem grossen Zeitaufwand. Der Aufwand kann limitiert werden durch ein klar definiertes Maximalbudget sowie durch eine Aufteilung in Tranchen im Sinne einer kontinuierlichen, periodischen Verbesserung und Optimierung. Dazu muss die Lösung technisch und designmässig so ausgelegt werden, dass Erweiterungen und Verbesserungen des graphischen Designs mit möglichst geringem Anpassungsaufwand umgesetzt werden können. Ferner kann ein Grossteil des Design-Aufwands von den Anwendern der Auftraggeberin selber erbracht werden, indem diese die Benutzerdialoge spezifizieren.

User Interface Design

Unseres Erachtens sind für Web-Shops die Massstäbe aus Sicht der Kunden anzulegen und nicht aus Sicht der Informatiker. Wir verwenden den folgenden Kriterienkatalog für das Design und die Review des User-Interface:

Verständlichkeit: Sind alle Beschriftungen und Texte verständlich formuliert? (auch für gelegentliche Benutzer) Dies kann ein User gut beurteilen, der das User-Interface zum ersten Mal sieht. Sein Urteil ist sehr wertvoll und muss aufgezeichnet werden, da beim zweiten oder wiederholten Besuch ein Gewöhnungseffekt entsteht und gewisse Dinge dann nicht mehr auffallen.
Selbsterklärend: Inwieweit ist das User-Interface selbsterklärend? Ist es so getextet und strukturiert, dass es möglichst keinen Schulungs-, Instruktions- oder Supportaufwand benötigt?
Arbeitsfluss: Entspricht die Reihenfolge der Felder und Button den häufigsten Arbeitsabläufen?
Fehlertoleranz: Reagiert die Software angemessen bei Fehleingaben? Werden grobe Fehleingaben verhindert? Entspricht der Grad der Absicherung den Zielsetzungen des Projekts (Intelligenz bei den Anwendern vs. Intelligenz im System).
Farben-Ergonomie: Werden Farben als ergonomisch sinnvolle Unterstützung eingesetzt? Erkennt der User an der immer gleichen Farbe, wo er ist resp. wo sich etwas befindet, dass einen bestimmten Zweck erfüllt (z.B. ein Action-Button für das Auslösen einer Aktion oder ein Link für das Springen zu einer bestimmten Liste).
User Level: Ist es sowohl für häufige User (frequent user) wie auch für gelegentliche User (casual user) ausgelegt? Für öffentlich zugängliche Anwendungen (z.B. Web oder öffentliche Terminals): Werden die unterschiedlichen Bildungslevel der User berücksichtig?
Multi-kultureller Background: Sind ggfls. User aus verschiedenen Ländern berücksichtigt, die einen unterschiedlichen kulturellen Background haben? Wurde geprüft und schriftlich festgehalten, welche kulturellen Aspekte zu berücksichtigen sind und welche (unerwünschten und erwünschten) Seiteneffekte auftreten können?
Wiedererkennungseffekt: Hält sich das User-Interface an das was die Anwender schon kennen resp. was am häufigsten vorkommt oder weicht es ohne wichtigen Grund stark davon ab?
Usability: Ist die Usability gut? Wie bequem ist es Daten und/oder Befehle einzugeben? Ist es die Bedienung „praktisch“?
ästhetik: Ist die Graphik ästhetisch befriedigend? Sind die Farben harmonisch abgestimmt? Passen die Farben zum Thema? Ist das Gesamtbild ruhig? Sind Hauptlinien erkennbar und werden diese nicht unschön gebrochen? Hat es graphische Symbole und Bilder um das Textbild ansprechend und freundlich zu gestalten?
Navigation: Weiss der Benutzer jederzeit a) wo er ist?, b) was er hier tun kann? und c) wo er hingehen kann?
Freundlichkeit: Spricht die Software freundlich zum User? In der Forschung wurde beschrieben, dass freundliche Software die User produktiver macht.
Mausklick-ökonomie: Sind die wichtigsten Aufgaben mit nur wenigen Mausklicks machbar? Die User lieben es, mit möglichst wenigen Mausklicks einen Effekt auszulösen.
Optische Lesbarkeit: Sind die Schriftgrössen so gewählt, dass auch Anwender mit nicht mehr so jungen Augen alles gut lesen können? Man bedenke, dass gewisse Schriftarten in 9 Punkt Grösse auf Bildschirmen mit grosser Auflösung nicht mehr gut lesbar sind.
Hilfe-Texte: Hat es an den richtigen Stellen Erklärungen?
Vorgabe-Werte: Sind dort, wo es Sinn macht, sinnvolle Default-Werte gesetzt?

Eigenschaften erfolgreicher Software-Projekte

Wenn ein Software-Entwicklungsprojekt erfolgreich war, äussert sich das in folgenden Eigenschaften:

Die Lösung weist einen guten ROI (Return on Investment) auf resp. einen guten betriebswirtschaftlichen Nutzen. Die neue Lösung bringt entweder Einsparungen oder Mehreinnahmen oder beides und amortisiert auf diese Weise die Investition. Einsparungen können sich äussern in Form von weniger Fehlern, schnellerer Bearbeitung u.v.a.m. Es gibt jedoch auch Lösungen, die umgesetzt werden, weil weniger Einnahmen oder höhere Kosten in Zukunft entstehend würden, wenn man die neue Lösung nicht implementieren würde.
Die Lösung ist gut wartbar. Erweiterungen sind zu minimalen Kosten realisierbar. Voraussetzungen dazu sind: Die Lösung hat ein gutes Design, leicht lesbaren Code und eine gute Dokumentation und brauchbare Kommentare im Code.
Die Software ist stabil und robust. In den verschiedenen Tests (Modul-Tests, System-Tests, Anwender-Tests, Sicherheitstests) wurden genügend viel Fehler identifiziert und anschliessend korrigiert. Es darf angenommen werden, dass bloss noch wenige Fehler verbleiben.
Die Anwender sind zufrieden. Dies kann systematisch gemessen werden mit einem Fragebogen und einer ausreichend grossen, statistisch relevanten Stichprobe am besten ausreichend vor und nach Inbetriebnahme oder es kann anhand einer zufälligen Befragung von Einzelpersonen eruiert werden.
Die Software ist bedienerfreundlich. Sie benötigt bloss wenig Lernaufwand, ist einfach und erfordert wenig Support. Die Anwendungssoftware hat ein einheitliches Design. In sich und evtl. auch im Vergleich zu anderen Anwendungen.
Das Kostenbudget wurde eingehalten resp. unterschritten. Die ursprüngliche Aufwandschätzung hat sich als realistisch erwiesen. Es wurden auch nicht im Verlaufe der Realisierung zusätzliche Anforderungen entdeckt, die unbedingt umgesetzt werden müssen und für die zusätzliches Budget notwendig wurde.
Der ursprüngliche oder allenfalls der angepasste Zeitplan wurde eingehalten. Es sind keine Wartefristen für die Kunden entstanden. Es mussten keine zusätzlichen überbrückungslösungen implementiert werden.

Eigenschaften qualitativer Software

Wir können gemeinsam etwas für die Software-Qualität tun in den folgenden Bereichen, Aktivitäten resp. Phasen:

Erstellung Pflichtenheft: ein gutes Pflichtenheft ist vollständig und widerspruchsfrei. Beachten Sie dazu unsere Checkliste.
Datenmodellierung: Ein gutes Datenmodell vereinfacht die Realität, bildet sie aber so gut ab, dass auch zukünftige Fälle lösbar sind.
Design-Reviews: Vor dem Programmieren (Codieren) sitzen Entwickler und Reviewer zusammen, prüfen das Design und verbessern es.
User-Interface-Reviews: Oft kann schon mit wenig Aufwand das User-Interface bedienerfreundlicher, verständlicher und professioneller gestaltet werden. Welche Kriterien dabei berücksichtigt werden finden Sie im Abschnitt 7.4.1 „User-Interface-Design“.
Code-Reviews: Nach dem Programmieren erläutert der Entwickler seinen Code dem/den Reviewern und gemeinsam werden Optimierungen eingebaut.
Tests: Folgende Arten von Tests sollen fallspezifisch durchgeführt werden:
1. Modul-Tests
2. System-Tests
3. Last-Simulationen: Performance-Tests und Optimierungen
4. Security Tests
Prototyping: Wenn die Anforderungen noch nicht von Anfang an klar sind, kann mittels Prototyp eine Konkretisierung der Ideen vorgenommen werden.

Unsere Leistungen für Sie

Ist-Analyse des bestehenden Web-Shops, SWOT-Analyse
Gemeinsame Erstellung des Pflichtenhefts für eine neue Lösung
Entwicklung des neuen Web-Shops

ATEGRA Software Engineering