Wichtige Bezeichnungen im Zusammenhang mit Webdesign und Webentwicklung. Hier geht es nicht so sehr ins Detail. Die Slides sollen lediglich einen schnellen Überblick und kurze Definitionen zu den genannten Bereichen im Webdesign geben. Begriffe wie "Usability" und "Whitelabel" werden von Laien häufig falsch angewendet, was z.B. bei Briefings und Workshops mit Kunden und Entwicklern zu Missverständnissen führen kann. Es ist wichtig ein gemeinsames Verständnis dieser Bezeichnungen zu haben. Ich habe diese Zusammenfassung aus eigenem Interesse für einige Projekte erstellt und war der Meinung sie ist vielleicht auch für Andere hilfreich. Anregungen gern in die Kommentare oder direkt an mich. Danke an @franz für's Gegenchecken.

1. Webdesign-
Fachbegriffe
Wichtige Bezeichnungen im Zusammenhang mit
Webdesign und Webentwicklung
Sascha Aßbach, Mai 2010 (v1.3)

2. Begriffe & Definitionen
‣ Web-Standards ‣ user interface design
‣ Semantik patterns
‣ accessibility ‣ layout
‣ user experience (ux) ‣ click-dummy
‣ usability ‣ prototyping & testing
‣ information ‣ whitelabeling
architecture (ia)
‣ interaction design
‣ mock-ups & wireframes
‣ graphical user interface
(gui)
2

3. Web-Standards
Die Einhaltung der Web-Standards ist unbedingt nötig,
um der größtmöglichen Anzahl von Benutzern mit
einer größtmöglichen Anzahl von Browsern unter
verschiedenen Plattformen die Webseite zugänglich zu
machen.
Eine gute Suchmaschinentauglichkeit, lange
Lebensdauer und die Wartungsfreundlichkeit der
Webseiten wird durch die Einhaltung der Web-
Standards erst wirklich ermöglicht.
Das W3C hat Web-Standards für korrektes XHTML, CSS
und das Document Object Model (DOM) definiert.
3

4. Semantik
Als Teilgebiet der Linguistik ist Semantik die Lehre von
der Bedeutung.
Semantisch sinnvoll strukturiertes XHTML enthält
neben dem eigentlichen Seiteninhalt zusätzliche
Informationen zu dessen Bedeutung. Dies ist
besonders für die Platzierung in Suchmaschinen
wichtig.
Beispiel:
Statt <div class=“head“>Headline</div> z.b.
<h1>Headline</h1> nutzen.
4

5. accessibility
deutsch: Zugänglichkeit, Barrierefreiheit bzw. -armut
Webseiten auch für Besucher mit Behinderungen
nutzbar machen.
„Mit einer Website möchte man immer möglichst
viele Menschen erreichen und möglichst wenige
ausschließen. Deshalb ist es für Entwickler
unabdingbar, die Prinzipien des modernen
Webdesigns nach Webstandards zu verinnerlichen“
Manuela Hoffmann, Modernes Webdesign, S. 41
5

6. user experience
6

7. user experience (UX)
Der Begriff User Experience (Nutzungserlebnis)
umschreibt alle Aspekte der Erfahrungen eines Nutzers
bei der Interaktion mit einem Produkt oder Service.
Ziel ist es, ein möglichst angenehmes, positives
Nutzungserlebnis zu schaffen. Die Voraussetzung für
eine positive User Experience ist die Erfüllung der
Erwartungen der Nutzer, ohne dass die Nutzer sich
langweilen oder überfordert sind.
7

8. usability
deutsch: Benutzerfreundlichkeit, Nutzbarkeit,
Bedienbarkeit, Intuitivität.
Usability bezeichnet die vom Nutzer erlebte
Nutzungsqualität bei der Interaktion mit einem System.
Eine besonders einfache, für den Nutzer und seine
Aufgaben angemessene Bedienung zur Erfüllung der
gestellten Aufgabe wird dabei als benutzerfreundlich
angesehen.
8

9. usability
Die Norm ISO 9241 beschreibt die Merkmale der
Usability. Dazu gehören:
Aufgabenangemessenheit (geeignete Funktionalität, Minimierung
unnötiger Interaktionen), Selbstbeschreibungsfähigkeit (Verständlichkeit
durch Hilfen/Rückmeldungen), Lernförderlichkeit (Anleitungen, Ziel:
minimale Erlernzeit), Steuerbarkeit (Steuerung des Dialogs durch den
Benutzer), Erwartungskonformität (Konsistenz, Anpassung an das
Benutzermodell), Individualisierbarkeit (Anpassbarkeit an Benutzer und
an seinen Arbeitskontext), Fehlertoleranz (Intelligente Dialoggestaltung
zur Fehlervermeidung seitens der Benutzer steht an erster Stelle;
ansonsten: erkannte Fehler abfangen, bei unerkannten Fehlern: leichte
Korrektur durch den Benutzer.)
9

10. information architecture (IA)
Informationsarchitektur:
bezeichnet die Konzeption und
Definition der Struktur eines
Informationssystems sowie die
Beschreibung jeglicher
Interaktion.
Die An- und Zuordnung sowie
die Benennung der im System
enthaltenen Informations-
einheiten und Funktionen.
10

11. interaction design
Konzeption des Dialoges zwischen dem User und dem
Service (Interaktion) unter Berücksichtigung
verschiedener Benutzerrollen und Szenarios.
Betrachtung verschiedener Use-Cases
(Anwendungsfälle).
Diese werden zunächst z.B. als Mockups festgehalten
und später in Click-Dummies greifbarer gemacht, um
sich den zukünftigen Interaktionsablauf des Benutzers
mit der Anwendung vorstellen zu können.
11

12. mock-ups & wireframes
Handzeichnungen oder drahtgitterartige simple
Darstellungen, die das Grundgerüst (Raster) und die
Platzierung von Text-, Grafik-, Navigations- und
weiteren Elementen auf einer Webseite zeigen.
Teilweise mit Interaktionsangaben.
Wireframes geben keinerlei Auskunft über das
endgültige Webdesign sondern dienen der Konzeption
von Struktur, Interaktion und Prozessen.
12

13. mock-ups & wireframes
13

14. GUI
kurz für: graphical user interface
deutsch: Grafische Benutzeroberfläche
Dieser Begriff wird nicht nur im Zusammenhang mit
Webdesign verwendet.
14

15. user interface (UI)
design patterns
deutsch: Entwurfsmuster für Benutzeroberflächen
bewährte Lösungs-Schablonen für wiederkehrende
Entwurfselemente in der Softwarearchitektur und -
entwicklung.
Wiederverwendbare Vorlage zur Funktionsdarstellung
z.B. für die Veranschaulischung bei Briefings an
Kunden und Entwickler.
Bsp: Login-Formulare und Plausibilitätprüfungen, zur
Darstellung von Effekten etc.
15

16. layout
deutsch: Entwurf
Anhand der Mockups erstellter Webdesign-Entwurf
und Gestaltungsvorschlag für den Kunden. Meist
werden mehrere Layouts zur Auswahl vorgelegt.
Wichtig: Layouts enthalten nicht unbedingt finale
Texte und pixelgenaue Darstellungen. Es geht lediglich
um das Vermitteln des Look & Feels für einen ersten
Eindruck. Nach Abnahme des gewünschten Layouts
wird das Finetuning und die konkrete Umsetzung
gemacht.
16

17. click-dummy
Rudimentärer, interaktiver Prototyp zur vereinfachten
Demonstration von Verknüpfungen und Teilprozessen.
Man kann sich durch Wireframes oder Layouts
durchklicken.
Dient z.B. in der Konzeptionsphase zur Abbildung von
Use-Cases und um ein Gefühl für die Navigation zu
bekommen.
17

18. prototyping & testing
Prüfung des Konzeptes z.B. durch Simulationen und
interaktive Demos (z.B. Click-Dummies) in frühen
Entwicklungsphasen.
Abbildung der Funktionen und Aufgaben des Services,
Erleben des Look & Feels, Aufzeigen der
Realisierbarkeit von Anwendungen.
Desweiteren:
Usability-Tests, Peer-Group Tests
18

19. whitelabeling
Technische Lösung mit der z.B. bei Webseiten für
unterschiedliche Nutzer oder Kunden
zielgruppenspezifische Designs & Inhalte angezeigt
werden, z.b. mit Logo und Farben eines Partners (siehe
auch Mandantenfähigkeit).
kurz:
‣ Gleicher Grundaufbau
‣ Gleiche Struktur
‣ Eigene Texte
‣ Eigenes Design
‣ Eigenes Logo
19

20. Quellen & Links
‣ de.wikipedia.org
‣ www.w3.org
‣ Modernes Webdesign (Manuela Hoffmann)
‣ www.michael-rabe.de
‣ www.interaction-design.org
‣ www.oreilly.de
‣ ui-patterns.com
‣ wireframes.tumblr.com
20