Aufgabe Vorschlag C - Aufgabe 4 · Abitur Hessen Gestaltungs- und Medientechnik LK 2021
Thema: Webdesign: Usability, Navigation, HTML und CSS · Aus der Prüfung LK (2021)
Aufgabenstellung
Erfrischungsgetränk Ampersand
Briefing
Ein Getränkehersteller will ein neues Erfrischungsgetränk in drei Geschmacksvarianten auf dem Markt positionieren. Die Getränke sollen ein frisches, modernes Image ausstrahlen. Die Zielgruppe für die neuen Lifestyle-Getränke sind vor allem Jugendliche und junge Erwachsene im Alter von 14 bis 28 Jahren beiderlei Geschlechts.
Der Produktname ist bereits gefunden: Ampersand. Dieser Begriff aus dem anglo-amerikanischen Sprachraum soll metaphorisch für die verschiedenen Geschmackszusätze der Getränkevarianten stehen [Ampersand (engl.) steht für das &-Zeichen]. Die Geschmacksrichtungen „Vanilla“ (Vanille), „Berry“ (Beere) und „Lemon“ (Limone) werden dem Konsumenten im kommenden Sommer angeboten.
Sie werden damit beauftragt, drei Varianten der Wortmarke und ein Flaschenetikett zu gestalten. Außerdem soll die Produkt-Webpage analysiert werden.
Material 1
Moodboard „Ampersand“
Material 2
Produktinformationen
Datei: (text.txt)
0,3 l
Erfrischungsgetränk mit natürlichen Zusätzen
Natürlich in bester Bio-Qualität
Frei von künstlichen Farbstoffen
www.ampersand.com
Material 3
Flowchart Webpräsenz
Material 4
Navigationsstrukturen
4 Interface Design: Aktualisierung der Webpräsenz des Getränkeherstellers, die Navigationsstruktur der Webpräsenz muss überarbeitet werden.
4.1
Erläutern Sie, warum die Navigationsstruktur der Webpräsenz nicht zu einer guten Usability der Website beiträgt. [6 BE]
Hinweis: Die Organisation der Webpräsenz entspricht dem Flowchart aus Material 3.
4.2
Entwickeln Sie eine optimierte Navigationsstruktur, die den grundlegenden Anforderungen an eine gute Usability entspricht. Stellen Sie die Navigationsstruktur in einem Diagramm zeichnerisch auf einem DIN A4-Bogen dar. [21 BE]
Hinweis: Es sind alle Menüpunkte aus dem Flowchart (Material 3) zu verwenden.
4.3
Nennen Sie die korrekten Fachbegriffe der in Material 4 dargestellten Navigationsstrukturen. [4 BE]
Lösung
Nach den offiziellen Korrekturhinweisen
4.1 Erläutern Sie, warum die Navigationsstruktur der Webpräsenz nicht zu einer guten Usability der Website beiträgt.
Lösung: - Die Menüpunkte sind nicht sinnvoll geclustert. - Die 3-Klick-Regel ist nicht berücksichtigt worden (es sind z. B. sieben Klicks von der Startseite zur Seite „Whisky“ notwendig). - Pages, die konsistent von allen Seiten mit einem Klick erreichbar sein sollen, sind nicht in eine Footer-Navigation integriert. - Es ist eine Footernavigation zu integrieren. - Die AGBs und der Kontakt sollten nicht über die Site Impressum erreichbar sein.
4.2 Entwickeln Sie eine optimierte Navigationsstruktur, die den grundlegenden Anforderungen an eine gute Usability entspricht. Stellen Sie die Navigationsstruktur in einem Diagramm zeichnerisch auf einem DIN A4-Bogen dar.
Lösung: Bewertungskriterien: - hierarchische Baumstruktur (3 BE) - sinnvolle Clusterung der Menüpunkte (4 BE) - 3-Klick-Regel (4 BE) - grob zu fein (Submenü) - Footer-Navigation: enthält eine Übersicht über die Inhalte der Website, die wichtig sind, unabhängig davon, wo sie innerhalb der Hierarchie der anderen Menüs erscheinen. Alle Pages, die mit einem Klick erreichbar sein müssen, werden im Footer integriert, hier z. B. AGBs, Kontakt, Impressum, Sitemap (4 BE) Zeichnerisch darstellen: Saubere Ausführung (z. B. erkennbare Struktur, Linienhaltigkeit, gleiche Abstände) (6 BE)
4.3 Nennen Sie die korrekten Fachbegriffe der in Material 4 dargestellten Navigationsstrukturen: Linke Struktur
Lösung: hierarchische Baumstruktur
4.3 Nennen Sie die korrekten Fachbegriffe der in Material 4 dargestellten Navigationsstrukturen: Rechte Struktur
Lösung: lineare Navigationsstruktur
Die ausführliche Erklärung Schritt für Schritt (mit KI) gibt es mit Premium. Premium
Löse sie direkt hier: automatische Korrektur, Hinweise und Lösung Schritt für Schritt.
‹ Aufgabe Vorschlag B - Aufgabe 4 · LK 2022