Interaktive Medien 1. Semester Martin Vollenweider
Konzeption Websites
Interaktive Medien 1. Semester, Martin Vollenweider 12.11.2020
Quelle, Literatur
Jacobsen, Jens: Website-Konzeption: Erfolgreiche Websites planen, umsetzen und betreiben. dpunkt Verlag 2017,
ISBN Print: 978-3-86490-427-1 ISBN PDF: 978-3-96088-151-3 ISBN ePub: 978-3-96088-152-0 ISBN Mobi: 978-3-96088-153-7
Ergänzung zum Kurs «Konzeption und Usability» von Simonne, aus technischer Sichtweise
3
Die 9 Schritte der Konzeption
Die 9 Schritte
1. Offert Anfrage (Anfrage eines Kunden)
2. Briefing (mit Kunde zusammensitzen und Fragen stellen) 3. Kreativitätstechniken zur Lösungsfindung
4. Lösung auf skizzieren mit Storyboard, Wireframes und Mockups 5. Grobkonzept erstellen
6. Richtige Technologie evaluieren 7. Feinkonzept erstellen
8. Designkonzept erstellen
9. Prototyp erstellen und testen (Usability-Test)
5
Briefing
Checkliste
Briefing-Fragebogen.xls auf Moodle (Quelle)
Das Briefing ist die Grundlage eines Projekts
7
Zielgruppen: «An wen richtet sich die Homepage?»
Wie löse ich die Aufgabe?
Merksatz: Der Benutzer steht im Vordergrund, nicht die Technologie oder der Betreiber dahinter.
Informationen sammeln und ordnen: Informationen über Produkte, Dienstleistungen, Branche sammeln
Konkurrenzprojekte analysieren. Was ist positiv, was ist negativ?
- Inhalt
- Zielgruppen - Design
- Struktur, Navigation
- Benutzerführung, Inhalt, Technologie Sie müssen alles über Ihren Kunden wissen
9
Offerte / Angebot / Kalkulation
Inhalt Offerte
11
Kalkulation und Honorare
Ca. 150.– bis 180.– pro Stunde, Beispiele Deutschland
Wartung, Ausbildung und Hosting nicht vergessen
Stunden- oder Tagesssätze für Änderungen nicht vergessen
Dokument Kalkulation-Website.xls auf Moodle (Quelle)
Grobkonzept mit Usability Engineering
Richter, Michael und Flückiger, Markus:
Usability Engineering. Springer Verlag 2016 (Neuauflage im Jahr 2021 geplant) 978-3-662-49827-9
13
1. Methode: Erhebung im Umfeld der Benutzer (Contextual Inquiry)
Man beobachtet Anwender bei der Arbeit, Anwender befragen 2. Methode: Personas und Szenarien
Im Zentrum jeder Site steht der Benutzer Szenarien
zu erledigende Arbeiten (Bank-Kunde führt Online-Transaktion durch, einer will Hypothekarzins herausfinden)
3. Methode: Storyboard
Ideen skizzieren
Idee oder Konzept visualisieren
Botschaft wird präziser und verständlicher
Konzentration auf das Wesentliche
Es geht nicht um die Qualität der Zeichnungen
Handskizzen, nicht in einem Softwareprogramm
»Getting the design right – getting the right design«, B. Buxton
15
Storyboard
Ideen skizzieren, Idee oder Konzept visualisieren Wireframes
Struktur der Seite, Drahtgerüst grobe Wiedergabe eines Designs.
Wireframe zeigt wichtigste Inhaltselemente (was), Struktur der Informationen (wo), grundlegende Visualisierung der UI (wie)
Mockup
Verfeinerung Wireframes mit realen Objekten (d.h. Farben, Typografie, Bildern und Grafikelementen)
Mockup = statischer Designentwurf für die verschiedenen Seitenansichten (Startseite, Inhaltsseiten oder Kontaktformulare)
Prototype
Simulation der gesamten Applikation oder eines Teilbereichs daraus
Prototype = Click-Dummy
Dient zum Testen der Funktionalitäten der zukünftigen Website oder einzelner Elemente mit realen Bildern und Texten
17
4. Methode: Use Cases = Anwendungsfälle Definitionen
Use Cases beschreiben Anforderungen als eine Sequenz von Interaktionen zwischen einem Akteur und dem System (funktionale Anforderungen auf abstrakte Art, unabhängig von der Umsetzung).
Anstatt: «Michael klickt auf den Button Drucken»,
=> «Der Benutzer startet den Druckvorgang».
Feinkonzept
Konstruktionsplan des Projekts
Verfeinerung des Grobkonzepts (= Briefing & Ideen & Storyboard)
Feinkonzept: detaillierte Ausarbeitung des Grobkonzeptes
Jede HTML-Seite, resp. Szene genau beschrieben
Texte, Bilder, Interaktivitäten, Audio, Videos etc. aufgeführt
Beinhaltet alle Informationen für Auftraggeber, Projektleiter, Texter, Redakteure, Berater, Designer, Programmierer etc.
Informations-Architektur festlegen: Konzeption und Definition der Struktur des Projekts. Wo sind welche Informationen zu finden?
19
Checkliste Feinkonzept
Analyse & Ziele
Tätigkeit der Firma/des Auftraggebers
Konkurrenzanalyse
Zielgruppe(n)
Wie vertraut sind die Zielgruppen mit dem Medium Web?
Ziel(e) des Projekts
Erwartung an Projekt
Mehrwert des Projekts
Wie werden neue Kunden gewonnen?
Bedürfnisse des Publikums
Organisation & Marketing
Projekt-Verantwortliche, Ansprechpartner
Sprache des Kunden, firmenspezifische Ausdrücke
Schulung der Mitarbeiter
Suchmaschinenoptimierung
Bekanntmachung der Website Technik
Funktionalitäten des Projekts
geplante Technologien, Werkzeuge
Provider, Domain-Name, technische Eckparameter
21
Inhalte (Texte, Bilder, Videos, Audio etc.)
Storyboard
Relevante Inhalte aufführen
Jede wichtige Szene genau beschreiben
Zuständigkeit für Inhalte festlegen
Copyright-Aspekte beachten Design
Gestaltungsrichtlinien, Corporate Design, Schriften, Farben, Logo, Raster, Bildschirmgrösse
Welche Darstellung ist für einzelne Seitentypen am sinnvollsten?
Zeitplan
Wann, Wer, Was?
Budget
Budget für Planung, Umsetzung und Wartung Wartung
Wartung und Pflege, wer pflegt zum Beispiel die Texte
Budget der Wartung und Pflege
23
Ready für die Technik – Umgebung
Website muss 24 Stunden – 7 Tage pro Woche – 365 Tage im Jahr online sein
Dienstleister, welcher diesen Service zur Verfügung stellt = Hoster oder Provider oBeispiel Hostpoint; Cyon; Hosttech; legendärer FHGR Studierendenserver
Dateien werden auf handelsüblichem PC (Betriebssystem Linux) gespeichert
Dieser PC braucht zusätzliche Software für die http-Verwaltung (meist Apache) oPC mit http Server Software = Webserver
Um Daten abzurufen braucht es Domainnamen, z.B. sbb.ch, fhgr.ch oProvider oder Hoster verkaufen Domainnamen (Beispiel)
User kopiert Daten via FTP (File Transfer Protocol) auf diesen PC (Filezilla, Atom) oMan benötigt FTP-Adresse, Benutzername und Passwort
Ready für die Technik – Technologie
Websites erstellen: klassische Methode
Mit HTML-Programm (z.B. Atom etc.) HTML-Seite erstellen
Auf lokalem PC/MAC speichern
Mit FTP-Programm (Filezilla, Atom) auf Webserver hochladen
Lokale Dateien editieren und wieder auf Webserver kopieren Grenzen der klassischen Methode
Mit steigendem Umfang des Web-Inhaltes steigt Pflegeaufwand exponentiell an.
Bei grossen Websites: Erstellung 10%, Pflege 90% Aufwand
25
Websites erstellen: Content Management (CMS) verwenden
Beispiel CMS: Wordpress Grundsätzlicher Ablauf
User mit verschiedenen Berechtigungen greifen via Browser auf CMS zu. Dieses speichert den Content in relationaler DB. Mit Hilfe von Templates werden die Inhalte ausgegeben
Templates und Themes
Templates: Einzelne Datei (HTML, CSS, Javascript). PHP-Code fügt Inhalte ein.
Themes: Mehrere Templates und Formatierungsregeln
27
Vorteile von Content Management Systemen
Mehrere Redakteure können Content pflegen (Rechte-Zuweisung, Workflow)
Suchfunktion, Sitemap und Mehrsprachigkeit integrierbar
Erweiterungen oder Plug-Ins installierbar Nachteile von CMS
Basis-Setup des CMS kann schwierig sein
regelmässige Updates notwendig
weniger Komfort, weil ganze Bedienung im Browser abläuft
Seiten sehen ähnlich aus. Schwierig, jede Seite individuell zu gestalten («zu wenig Freiraum»)
Geringere Performance
Wie viele CMS gibt es?
29
