Animierte Navigation
Animierte Navigation

  • 2

    • Lernschritt 2: Screendesign Grundlagen

    • Teilnehmer/innen müssen
      Als erledigt kennzeichnen

        Ich kann...

      In diesem Lernthema lerne ich Folgendes:

      Ich kann

      • den Begriff User Experience erläutern,
      • die Usability digitaler Anwendungen erklären und beurteilen,
      • ich kann für komplexe Themen eine struklturierte, übersichtiliche Visualisierung erstellen,
      • das „Look-and-Feel"- und das „Joy-of-Use“-Prinzip von Webseiten beschreiben,
      • Fachtexte lesen und verstehen,
      • das „Look-and-Feel"- und das „Joy-of-Use“-Prinzip von Webseiten analysieren,
      • meine Ausdrucksfähigkeit verbessern,
      • mich fachlich mit Anderen austauschen,
      • in Fachgesprächen eine eigene Stellung beziehen. 
    • Teilnehmer/innen müssen
      Als erledigt kennzeichnen

      Arbeitsauftrag 1: Quiz – Was ist Usability?

        Einzelarbeit

      Lösen Sie das Quiz Was ist Usability. 
      Erreichen Sie min. 80 %, um die Aufgabe erfolgreich abgeschlossen zu haben. 

      Notieren Sie sich stichwortartig die Schlüsselbegriffe jeder Frage des Quiz. Sie benötigen diese Schlüsselbegriffe für die kommende Aufgabe.

      20 Minuten

      Schauen Sie sich das Video „Was ist Usability und User Experience?“ an.
      Nehmen Sie den Wikipedia-Eintrag über Gebrauchstauglichkeit zu Hilfe.

    • Teilnehmer/innen müssen
      Als erledigt kennzeichnen

      Arbeitsauftrag 1: Quiz – Was ist Usability?

        Einzelarbeit

      Lösen Sie das Quiz Was ist Usability. Erreichen Sie min. 80 %, um die Aufgabe erfolgreich abgeschlossen zu haben. 

      Notieren Sie sich stichwortartig die Schlüsselbegriffe jeder Frage des Quiz. Sie benötigen diese Schlüsselbegriffe für die kommende Aufgabe.

      20 Minuten

      Schauen Sie sich das Video „Was ist Usability und User Experience?“ an.

    • Video: Was ist Usability und User Experience?
         

      Video: Indra Burkart

    • Usability-vs-UX.png

    • Um Ihr Wissen zu Usability und User Experience zu vertiefen, finden Sie hier weitere Videos zum Thema vom Indra Burkart: https://www.youtube.com/playlist?list=PLgZriansjqQ5oCOKtZphy2tLBCdH0ygHF

    • _________________________________________________________________________________

    • Teilnehmer/innen müssen
      Als erledigt kennzeichnen

       Arbeitsauftrag 2: Word Map Usability/User Experience für Smood

       

        Einzelarbeit 

      Erstellen Sie eine Word Map zur Usability und User Experience in Bezug auf die Smood-App. Fertigen Sie die Visualisierung wahlweise mit der Hand auf einem DIN-A3-Bogen oder mit einer geeigneten Grafik-Software an.

      Ein Beispiel für die Wordmap finden Sie weiter unten.

      60 Minuten

      So können Sie vorgehen:

      1. Legen Sie sich die stichwortartigen Schlüsselbegriffe zur Usability und User Experience aus dem Quiz bereit.
      2. Notiere das Thema „Usability“ in der Mitte des Blattes und umkreisen Sie es. 
      3. Legen Sie von der Mitte aus strahlenförmig im Uhrzeigersinn die einzelnen Aspekte an. Jeder Aspekt wird mit der Mitte verbunden und umkreist. 
      4. Von den Kategorien gehen weitere Linien mit Kreisen ab; darauf stehen die konkreten Inhalte Usabiliy und User Experience in Bezug auf die Smood-App, zu den jeweiligen Aspekten. 
      5. Von den Aspekten werden weitere Linien mit Detailinformationen abgehen. Umkreisen Sie auch die Detailinformationen

      Gestalten und strukturieren Sie die Word-Map durch die Verwendung von Farben.
      Wenn Sie möchten, können Sie passende Bilder oder Symbole hinzufügen.

      Reichen Sie die fertige Word-Map als PDF-Datei in Ihrem Pflichtenheft ein.

      Quelle: Ludger Brüning/Tobias Saum – Erfolgreich unterrichten durch Visualisieren – 2. Aufl., NDS-Verlag, Essen 2019(Downloads: Update 10/2022)

    • Teilnehmer/innen müssen
      Als erledigt kennzeichnen

      Arbeitsauftrag 2: Fischgrätendiagramm Usability/User Experience für Smood

       

        

      Partnerarbeit: Erstellen Sie ein Fischgrätendiagramm zur Usability und User Experience in Bezug auf die Smood-App. Fertigen Sie die Visualisierung wahlweise mit der Hand auf einem DIN-A3-Bogen oder mit einer geeigneten Grafik-Software an.

      Aufbau eines Fischgrätendiagramms (ein Beispiel für ein Fischgrätendiagramm finden Sie unten):

      Wirkung: Der Kopf der Fischgräte, auf den alles hinläuft und in den die Wirkung all der Ursachen eingetragen wird. 

      Ursachen: Mehrere Hauptgräten, an deren Enden jeweils eine Ursache eingetragen wird. 

      Aspekte der Ursachen: Kleinere Gräten, die an den Hauptgräten hängen und auf die Einzelaspekte oder Details notiert werden. 

      Kästen: Die Wirkung und die Ursachen sind mit einem Kasten eingerahmt.

      Linien: Die Begriffe sind durch Linien verbunden. Nur die Linien der Einzelaspekte sind beschriftet.

      Vorgehen:

      Ermitteln Sie in dem Fischgrätendiagramm die Ursachen für eine optimale Usability und gute User Experience für die Smood-App.

      Sammeln: Trage stichwortartig zusammen, welche Ursachen zu dem gewünschten Ergebnis führen. Schauen Sie in Ihren Aufzeichnungen, Materialien nach, ob Sie an alle wichtigen Aspekte gedacht haben.

      Ordnen: Überlegen Sie, welche Ursachenbereiche es gibt und welche Stichworte dazu gehören.

      Skizze anlegen: 

      1. Legen Sie zunächst eine Bleistiftskizze an und notieren Sie darin die Dinge, die Sie eintragen möchten.
      2. Platzieren Sie die Usability und gute User Experience der Smood-App als die Wirkung in die Mitte des Formats auf der rechten Seite und ziehen Sie einen Rahmen darum.
      3. Ziehen Sie von der Wirkung eine Linie nach links. Ziehen Sie von dort Linien nach unten und oben und tragen Sie an das Ende jeder Linie einen Ursachenbereich ein. Ziehen Sie einen Rahmen darum. 
      4. Tragen Sie an die Linie, die zu einem Ursachenbereich führt, Details und Aspekte, die zu der Ursache gehören, ein. Schreiben Sie jedes Detail auf eine eigene Linie.

      Fischgrätendiagramm fertigstellen: Entscheiden Sie, ob Sie die Skizze noch einmal sauber auf einen neuen Bogen übertragen, sie digital anfertigen oder sie gleich von der Skizze aus fertigstellen. Wenn Sie möchten, können Sie das Fischgrätendiagramm durch passende Bilder, Symbole oder durch die Verwendung von Farben gestalten.

      60 Minuten

       Reichen Sie das fertige Fischgrätendiagramm als PDF-Datei in Ihrem Pflichtenheft ein.

      Quelle: Ludger Brüning/Tobias Saum – Erfolgreich unterrichten durch Visualisieren – 2. Aufl., NDS-Verlag, Essen 2019 (Downloads: Update 10/2022)

    • Beispiel Word Map und Fischgrätendiagramm





    • _________________________________________________________________________________

    • Arbeitsauftrag 3: Recherche nach Beispielen für das Joy-of-Use- und Look-and-Feel-Prinzip 

      Gruppenarbeit: Recherchieren Sie je ein Beispiel für das „Joy-of-Use“- und „Look-and-Feel“-Prinzip. Diskutieren Sie in der Gruppe, welche Eigenschaften Ihre Beispielseiten aufweisen, begründen Sie, weshalb sie den Prinzipen zugeordnet werden. Notieren Sie Ihre Begründung stichpunktartig für die Besprechung im nachfolgenden Gruppenpuzzle.

      15 Minuten

    • Konzepte „Joy of Use“ und „Look and Feel“ sind ergänzende Prinzipien zur User Experience

       

      Das Joy-of-Use-Konzept bezieht sich darauf, dass eine Webseite oder Anwendung nicht nur funktional sein sollte, sondern auch eine positive und angenehme Erfahrung für die Benutzerinnen und Benutzer bieten sollte. Im Gegensatz zu rein funktionsorientierten Ansätzen betont das „Joy of Use“ die emotionalen Prinzipien, die Freude und Zufriedenheit, die Benutzer beim Interagieren mit einer Webseite oder Anwendung empfinden sollen.

      Aspekte, die das „Joy of Use“-Prinzip kennzeichnen:

      • Die Benutzeroberfläche sollte möglichst intuitiv zu verstehen sein, ohne dass die Benutzerinnen und Benutzer lange nach Funktionen suchen müssen. Eine intuitive Navigation trägt dazu bei, dass die Benutzer sich auf der Seite leicht zurechtfinden.
      • Das Design der Webseite sollte ansprechend und visuell ansprechend sein. Ästhetische Elemente wie die des Look-and-Feel-Konzepts können die Benutzererfahrung verbessern und zur Freude der Benutzer beitragen.
      • Die Webseite sollte dem Benutzer ein Feedback geben, wenn Aktionen durchgeführt werden. Eine schnelle Reaktion auf Benutzerinteraktionen trägt zur positiven Freude an der Benutzung bei.

       

      Zwei Beispiele für das Joy-of-Use-Konzept:

      Eine Sprachlernplattform mit einer spielerischen und ansprechenden Benutzeroberfläche, die den Lernprozess unterhaltsam gestaltet. Die Verwendung von Belohnungen, Fortschrittsverfolgung und kurzen Lektionen trägt dazu bei, dass die Benutzerinnen und Benutzer Freude beim Erlernen neuer Sprachen empfinden.

      Eine Plattform zur Vermittlung von Urlaubsunterkünften legt den Fokus darauf, dass Benutzer nicht nur einfach nach Unterkünften suchen können, sondern auch inspirierende und ansprechende Urlaubsziele und Urlaubserlebnisse lokaler Anbieter angeboten bekommen. Die Intention ist, den Benutzerinnen und Benutzern die emotionale Absicht eines authentischen und individuellen Reisestils zu vermitteln. Die Webseite bietet eine intuitive Benutzeroberfläche, hochwertige Bilder und detaillierte Informationen, um die Vorfreude und Zufriedenheit der Benutzer zu steigern.

       

       

      • Das Look and Feel - Prinziep bezieht sich in erster Linie auf die visuelle Gestaltung einer Webseite.
      • Es umfasst formale Gestaltungselemente, wie Farben, Schriftarten und-schnitten, Bilder deren ästhetische und emotionale Wirkung.
      • Dieses Konzept fokussiert auf den ersten Eindruck, den eine Webseite und wie sie sich optisch präsentiert.
      • Die Intention des Konzepts ist die emotionale Bindung der Benutzerinnen und Benutzer durch die Faszination des Designs.
      • Unterstützt wird die Emotionalität durch Bewegtbild wie Videosequenzen oder Animationen.
      • Die visuelle Anziehungskraft und das Erscheinungsbild einer Webseite hat direkte Auswirkungen auf die Wahrnehmung und das Verhalten der Benutzerinnen und Benutzer.

      Klicken Sie hier für ein Beispiel einer Webseite, die nach dem Look and Feel-Prinzip gestaltet wurde.

    • Arbeitsauftrag 4: Gruppenpuzzle Beispielseiten des Joy-of-Use- und Look-and-Feel-Prinzips

      Gehen Sie in neuen Gruppen zusammen.
      Achten Sie bei der neuen Gruppenzusammensetzung darauf, dass Sie nicht mit den Gruppenmitgliedern zusammen kommen, mit denen Sie den Arbeitsauftrag 3: „Recherche nach Beispielseiten für das Joy-of-Use-Prinzip“ erarbeitet haben.

      Erläutern Sie in der Gruppe gegenseitig Ihre Beispielseiten für das Joy-of-Use- und Look-and-Feel-Prinzips.

      Nehmen Sie in der Gruppe Stellung, ob die Beispielseiten, die von anderen vorgestellt werden, die Prinzipien verdeutlichen.

      10 Minuten

    • _________________________________________________________________________________

    • Teilnehmer/innen müssen
      Als erledigt kennzeichnen

      Reflexion

    • Icon PDF-Annotation
      Reflexion Screendesign
Allgemeine Datenschutzbestimmungen | Impressum
Herausgeber: Land Baden-Württemberg, vertreten durch das Zentrum für Schulqualität und Lehrerbildung (ZSL), Heilbronner Straße 314, 70469 Stuttgart, Telefon 0711/21859-0, poststelle@zsl.kv.bwl.de
Verantwortlich im Sinne des Presserechts: ZSL, Irmgard Mühlhuber, Ref. 24 "Digitalisierung, Medienbildung", Heilbronner Straße 314, 70469 Stuttgart, Telefon 0711/21859-240, digitalebildung@zsl.kv.bwl.de
Kontakt zum/r behördlichen Datenschutzbeauftragte/n: datenschutz@zsl.kv.bwl.de