Webdesign Fachbegriffe

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

description

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.

Transcript of Webdesign Fachbegriffe

Page 1: Webdesign Fachbegriffe

Webdesign- FachbegriffeWichtige Bezeichnungen im Zusammenhang mit Webdesign und Webentwicklung

Sascha Aßbach, Mai 2010 (v1.3)

Page 2: Webdesign Fachbegriffe

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

Page 3: Webdesign Fachbegriffe

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

Page 4: Webdesign Fachbegriffe

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.

Page 5: Webdesign Fachbegriffe

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

Page 6: Webdesign Fachbegriffe

user experience

6

Page 7: Webdesign Fachbegriffe

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

Page 8: Webdesign Fachbegriffe

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

Page 9: Webdesign Fachbegriffe

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

Page 10: Webdesign Fachbegriffe

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

Page 11: Webdesign Fachbegriffe

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

Page 12: Webdesign Fachbegriffe

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

Page 13: Webdesign Fachbegriffe

mock-ups & wireframes

13

Page 14: Webdesign Fachbegriffe

GUI

kurz für: graphical user interface

deutsch: Grafische Benutzeroberfläche

Dieser Begriff wird nicht nur im Zusammenhang mit Webdesign verwendet.

14

Page 15: Webdesign Fachbegriffe

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

Page 16: Webdesign Fachbegriffe

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

Page 17: Webdesign Fachbegriffe

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

Page 18: Webdesign Fachbegriffe

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

Page 19: Webdesign Fachbegriffe

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