Webdesign- FachbegriffeWichtige Bezeichnungen im Zusammenhang mit Webdesign und Webentwicklung
Sascha Aßbach, Mai 2010 (v1.3)
Begriffe & Definitionen
‣ Web-Standards ‣ Semantik ‣ accessibility‣ user experience (ux)‣ usability‣ information
architecture (ia)‣ interaction design‣ mock-ups & wireframes‣ graphical user interface
(gui)
‣ user interface design patterns
‣ layout‣ click-dummy‣ prototyping & testing‣ whitelabeling
2
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
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.
4
Beispiel:
Statt <div class=“head“>Headline</div> z.b. <h1>Headline</h1> nutzen.
accessibility
deutsch: Zugänglichkeit, Barrierefreiheit bzw. -armut
Webseiten auch für Besucher mit Behinderungen nutzbar machen.
5
„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
user experience
6
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
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
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
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
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
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
mock-ups & wireframes
13
GUI
kurz für: graphical user interface
deutsch: Grafische Benutzeroberfläche
Dieser Begriff wird nicht nur im Zusammenhang mit Webdesign verwendet.
14
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
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
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
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
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
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