Differences

This shows you the differences between two versions of the page.

--- lautleise_05-10 [2021/11/13 17:03] – [UI Entwicklung] hardmood
+++ lautleise_05-10 [Unknown date] (current) – removed - external edit (Unknown date) 127.0.0.1
@@ Line 1: / Line 1: @@
-====== Hausaufgaben ======
-Im Verlauf von sechs Wochen werden Sie anhand verschiedener Übungen (lautleise [[lautleise_05-10#lautleise_05|05]], [[lautleise_05-10#lautleise_06|06]], [[lautleise_05-10#lautleise_07|07]], [[lautleise_05-10#lautleise_08|08]], [[lautleise_05-10#lautleise_09|09]], [[lautleise_05-10#lautleise_10|10]]) einen Prototypen für ein **Audio-Objekt** gestalten. Dabei lernen Sie verschiedene Prinzipien und einige Werkzeuge aus dem sogenannten //Designprozess// kennen den wir partiell durchlaufen und deren Anwendungen durch untere Aufgabenstellungen eingeübt werden.
-Die unteren Aufgaben werden sukzessive im Laufe des Semesters veröffentlicht.
-===== lautleise 05 =====
-==== Mind-Map ====
-  - Lesen Sie sich das PDF mit der Zusammenstellung zum Thema Mind-Map durch (siehe Sciebo) und holen Sie sich entsprechende Inspiration, beispielsweise via [[https://www.pinterest.de/felixhardmoodb/mindmaps/|Pinterest]].
-  - Erstellen Sie ein **Mind-Map** zum Thema //Audio-Objekt//. \\ \\ Anhaltspunkte könnten Ihnen beispielsweise eine bestimmte Zielgruppe geben. So könnten Sie etwa mit //einem Kind im Alter von 7 Jahren// starten. Was sind Themen, die dieses Kind beschäftigt? Wie benutzen Kinder Audiosysteme? Womit befassen sich Kinder inhaltlich/thematisch? Oder Sie nehmen Ihre Großeltern: Was sind beispielsweise Radio- oder Musiksendungen, die Oma & Opa gerne hören? Haben Sie Probleme damit die kleinen Knöpfe zu bedienen? Wechseln Sie durch die Sender?  Was sind Dinge, die Ihnen sonst zu dieser Zielgruppe einfallen? \\ \\ Alternativ könnten Sie aber auch frei-assoziativ in diese Aufgabenstellung starten: So könnten Sie in die Mitte Ihres Blattes den Begriff //AUDIO-OBJEKT// setzen und dann frei um diesen herum in Assoziationsketten Themen umreißen an denen man später weiter arbeiten kann. Beispielsweise ein //Cluster// um den Schwerpunkt //Bauchrednerpuppe//, oder etwa ein weiteres Cluster zum Thema //Soundbomb//((http://www.felix-beck.de/?/object/soundbombs/)). \\ Ergänzen Sie Ihre Ansätze durch diverse schnelle Zeichnungen und kleine Skizzen. \\ \\ Das Ziel ist es auf dem Blatt deutlich Ihre Assoziationsketten ablesen zu können und zu ihren Gedankengängen möglichst viele Ideen abzuleiten (ca. ±50. An dieser Stelle zählt Quantität und nicht nur Qualität). \\ Nehmen Sie einen Textmarker und highlighten Sie aus diesem Ideen- und Themenpool die Ansätze von denen Sie denken, dass diese am meisten potential haben, um ein spannendes Radio zu entwickeln.
-  - Dokumentieren Sie Prozess und Ergebnisse in Ihrem Workbook und laden Sie das entsprechende PDF in Ihren Sciebo Namensordner.
-==== Fünf mögliche Themen für Ihr Audio-Objekt ====
-  - Schauen Sie sich auf Ihrem Mind-Map die mit Textmarker hervorgehobenen Bereiche an. Wählen Sie aus diesen die fünf besten Themen/Ideen aus und scribbeln Sie zu diesen erste mögliche Lösungsansätze an. Ihre Scribbles werden dann am Computer in ein von Ihnen gestaltetes DIN A3 Layout integriert und mit einer kurzen Beschreibung ergänzt; beispielsweise wie in folgendem Aufbau:  \\ {{:layout_beispiel_5_ideen.jpg?direct&200|}} \\
-  - Dokumentieren Sie Prozess und Ergebnisse in Ihrem Workbook und laden Sie das entsprechende PDF in Ihren Sciebo Namensordner. \\ \\ Beispiele aus dem vergangenen Semester: {{:beispiel_thumbnails_ideensammlung.jpg?direct&1200|}}
-===== lautleise 06 =====
-==== Moodboard ====
-  - Lesen die PDF Zusammenstellung zum Thema //Moodboard// (siehe Sciebo Ordner).
-  - In der vergangenen Unterrichtseinheit haben Sie Ihre fünf entwickelten Themen vorgestellt (s.o.). Eines dieser Themen wurde von Ihren Kommilitoninnen ausgewählt – an diesem werden Sie weiter arbeiten. Erstellen Sie zum ausgewählten Thema ein/mehrere Moodboards. Schauen Sie sich [[https://pin.it/7911zrZ|hier einige Beispiele bei Pinterest]] an.
-  - Dokumentieren Sie Prozess und Ergebnisse in Ihrem Workbook und laden Sie das entsprechende PDF in Ihren Sciebo Namensordner. \\ \\ Beispielhafte Moodboards aus dem vergangenen Semester: \\ {{:beispiel_thumbnails_moodboards.jpg?direct&1200|}}
-==== Morphologische Matrix ====
-  - Ihre Aufgabe ist es anhand einer //morphologischen Matrix// eine Reihe weiterer möglicher __Ansätze für Ihr Audio-Objekt__ zu entwickeln. Sie können dabei entscheiden, wie Sie das Prinzip der morphologischen Matrix anwenden wollen. Unteres Bild (//Abb. Prinzip der morphologischen Matrix//) ist dabei als __modellhaft__ zu verstehen. So könnten Sie beispielsweise vier verschiedene Formen (A,B,C,D) mit vier verschiedenen Größen (1,2,3,4) kreuzen, oder alternativ dazu auch etwa vier verschiedene Farben (A,B,C,D) mit vier verschiedenen Oberflächen (1,2,3,4), um zu neuen Ansätzen zu gelangen. Sie sehen also, dass es hier beliebig viele verschiedene Möglichkeiten gibt Ansätze und Varianten mit diesem Prinzip zu generieren. Es liegt an Ihnen sich die entsprechenden Parameter zu überlegen, die Sie verwenden wollen und anhand derer Sie Ihre Ansätze ableiten. Schauen Sie sich ebenfalls folgende [[https://pin.it/1CuVJMI|Beispiele bei Pinterest]] an.
-  - Wählen Sie aus den erstellten Ansätzen die drei Varianten aus, die Ihnen am besten gefallen, bzw. Ihres Erachtens am meisten potential haben weiter entwickelt zu werden. Heben Sie diese visuell in Ihrer Matrix hervor. In der unteren Abbildung sind dies beispielhaft die Ansätze **<hi #ed1c24>1A</hi>**, **<hi #fff200>3C</hi>** und **<hi #00a2e8>2D</hi>**. \\ \\ {{:prinzip_morphologische_matrix.jpg?direct&200|}} \\ //Abb. Prinzip der morphologischen Matrix//. \\  \\
-  - Dokumentieren Sie Prozess und Ergebnisse in Ihrem Workbook und laden Sie das entsprechende PDF in Ihren Sciebo Namensordner.
-==== 3 Ansichten ====
-{{:beispiel_3ansichten_sose21_teresa_gerard.png?direct&200|}}\\
-Oberes Beispiel von Teresa Gerard (SoSe2021)
-  - Nun geht es endlich darum Ihren ersten Entwurf zu Papier zu bringen. :-)
-  - Schauen Sie sich zur Inspiration [[https://pin.it/3uOP9df|folgendes Pinterest Board]] an.
-  - Fertigen Sie auf einem DIN A3 Blatt verschiedene, minimum drei, perspektivische Ansichten zu einer, der von Ihnen in der morphologischen Matrix ausgewählten Varianten an. \\ Um bei der obigen //Abbildung vom Prinzip der morphologischen Matrix// zu bleiben, bedeutet dies, Sie sollen __entweder__ von der Variante **<hi #ed1c24>1A</hi>**, __oder__ von der Variante **<hi #fff200>3C</hi>** __oder__ von der Variante **<hi #00a2e8>2D</hi>** drei oder mehr verschiedene Ansichten zeichnen.
-  - Dokumentieren Sie Prozess und Ergebnisse in Ihrem Workbook und laden Sie ein entsprechendes PDF in Ihren Sciebo Namensordner.
-===== lautleise 07 =====
-==== Visualisierungen ====
-Lassen Sie sich von der Überschrift nicht verwirren, denn es geht bei dieser Aufgabe um mehr als nur Visualisierungen. Es geht darum auf vielfältige Art und Weise das zu entwickelnde Objekt darzustellen.
-  - Lesen Sie die Zusammenfassung zu den verschiedenen Arten von Prototyping (siehe Sciebo)
-    - Quick-and-dirty prototypes
-    - Mock-Up
-    - Paper Prototyping
-    - Appearance models \\ \\
-Ihre Aufgabe ist es ein oder mehrere **Quick-and-dirty Prototypen** Ihre Audio-Objektes zu bauen. (Dauer pro Modell ca. 45 Minuten). Bei der Erstellung eines solchen Prototypen geht es darum mit relativ geringen Material-, Kosten- und Zeitaufwänden bestimmte Aspekte Ihrer Idee auszutesten. Dies kann zum Beispiel die geplante Größe Ihres Objektes oder die äußere Form sein. Auch kann an so einem Modell etwa die Positionierung bestimmter Elemente wie Knöpfe, Lautsprecher etc. getestet werden. Es geht hier in erster Linie __nicht__ um ein "gutes" Aussehen. Es ist überhaupt nicht schlimm, wenn Teile abgerissen und an anderer Stelle wieder angeklebt werden. Versuchen Sie anhand eines solchen Prototypen möglichst viel Erkenntnisse abzuleiten zum Beispiel zur Handhabung des Objektes. Testen Sie durch diverse //Quick-and-dirty Prototypen// in kürzester Zeit unterschiedliche Alternativen. \\ \\ Beispiele: \\ {{:quick_and_dirty_prototype_radio_01.jpg?direct&100|}} {{:quick_and_dirty_prototype_radio_02.jpg?direct&114|}} {{:quick_and_dirty_prototype_radio_03.jpg?direct&100|}} {{:quick_and_dirty_prototype_radio_04.jpg?direct&100|}} {{:quick_and_dirty_prototype_radio_05.jpg?direct&100|}} {{:quick_and_dirty_prototype_radio_06.jpg?direct&100|}}  \\ \\ Dokumentieren Sie Ihren Prozess und die einzelnen Ergebnisse in Ihrem Workbook. \\ \\
-  - Bauen Sie ein oder mehrere **Papier/Papp-Modelle im Massstab 1:1**. Hier geht es um die Erstellung eines Körpers aus Papier oder Pappe in Originalgröße, d.h. im Massstab 1:1 (Dauer ca. 8 Stunden). Dies kann beispielsweise als Schicht- oder als Faltmodell erfolgen. Auch wird in diesem Schritt ausgetestet, wie groß bestimmte Bedienelemente sein können/müssen oder an welchen Positionen diese genau sitzen sollen. Testen Sie an Ihrem Modell die optimale Position und Handhabung bestimmter Positionen, Flächen und Bedienelemente (Dauer ca. 2 Stunden pro Modell). Eine Orientierung für einen ersten Schritt in die richtige Richtung bietet das untere Bildbeispiel. Hier testet der Student Adham Chakohi diverse Ansätze einer Radiofrontfläche, um daraus einen ersten Ansatz für ein Modell in 1:1-Größe abzuleiten. \\  {{:design_fundamentals_img_5032.jpg?direct&450|}} \\ \\ Weitere Beispiele verschiedener Papier/Papp-Modelle: \\ {{:paper_prototype_radio_00.jpg?direct&96|}} {{:paper_prototype_radio_01.jpg?direct&114|}} {{:paper_prototype_radio_02.jpg?direct&114|}} {{:paper_prototype_radio_03.jpg?direct&114|}} {{:paper_prototype_radio_04.jpg?direct&64|}} {{:paper_prototype_radio_06.jpg?direct&115|}} {{:paper_prototype_radio_05.jpg?direct&230|}}  \\ \\ Durch solche Modelle können Sie Ihre Idee beispielsweise auf Ergonomie oder Funktionsweise überprüfen. \\ Dokumentieren Sie Ihren Prozess und die einzelnen Ergebnisse in Ihrem Workbook. \\ \\
-  - Erstellen Sie außerdem **eine oder mehrere Mock-Up Darstellungen** zu Ihrer Idee. Dies kann beispielsweise via Photoshop erfolgen. So könnte man beispielsweise ein Foto von einem Szenario erstellen in dem so getan wird als sei das Audio-Objekt real vorhanden (auch könnte hier etwa das Papier/Pappmodell verwendet werden). In der Nachbearbeitung könnte dann ein Platzhalter Radio in das Bild retuschiert werden. Eine solche Art der Darstellung hilft die Idee weiter zu kontextualisieren und Ihre Idee anderen zu vermitteln. Dokumentieren Sie Ihren Prozess und die einzelnen Ergebnisse in Ihrem Workbook.
-===== lautleise 08 =====
-==== UX/UI Flow-Chart Diagramm ====
-Mit Hilfe eines //Flow-Chart Diagrams// (Flussdiagramm) können Prozesse und Abläufe dargestellt werden.
-  - Schauen Sie folgendes [[https://www.youtube.com/watch?v=coylYRocCvA|Youtube Video]] an.
-  - Erstellen Sie ein Flussdiagramm, welches die Möglichkeiten der Benutzung ihres Audio-Objektes und den Verlauf der Handhabung möglichst komplett darstellt. Verwenden Sie hierfür gegebenenfalls eine [[https://thedigitalprojectmanager.com/flowchart-software/|entsprechende Software]]. Eine solche Darstellung hilft sich selbst und den beteiligten Teammitgliedern vor Augen zuführen, ob die entwickelte Handhabung konsequent logisch ist, oder ob es eine Änderung braucht. Achten Sie auf Details und Fragestellungen, wie etwa:
-    * Wie schalte ich das Objekt an?
-    * Was passiert, wenn das Objekt an ist?
-    * Wie schaltet man es wieder aus?
-    * Was passiert, wenn ich die Lautstärke ändern will? Kann ich dies zu jeder Zeit machen? Auch wenn das Objekt aus ist?
-    * Wie kann ich eine Funktion auswählen?
-    * etc.
-Eine erste Orientierung kann dabei folgendes [[https://pin.it/1IpTmlS|Pinterestboard]] geben.
-==== UI Entwicklung  ====
-{{:beispiel_ui01_sose21_teresa_gerard.png?direct&200|}} {{:beispiel_ui02_sose21_teresa_gerard.png?direct&200|}} \\ Beispiele von Teresa Gerard (SoSe2021)
-UI steht für //User-Interface//. Ein User-Interface ist die Schnittstelle über die ein Benutzer mit einem Objekt interagiert und das Gerät bedienen kann. Dies kann bei einem Smart-Phone also beispielsweise eine interaktive Bedienoberfläche sein, bei einem Radio die nebeneinander stehenden Knöpfe als analoges Interface.((designing Interactions, Bill Moggridge, MIT Press, Cambridge, Massachusetts, 2007))((Interaktive Systeme, Grundlagen, Graphical User Interfaces, Informationsvisualisierung, Bernhard Reim, Raimund Dachselt, Springer Verlag, Heidelberg, 1999))
-Ihre Aufgabe ist es diese Benutzerschnittstelle für Ihr Audio-Objekt zu gestalten.
-  - Starten Sie damit sich zu überlegen, wie dieses bedient werden soll: Einhändig oder beidhändig?, über einen kleinen Touchscreen, physikalische Knöpfe, oder vielleicht sogar unsichtbare Sensorik? Was wäre für Sie am sinnvollsten? Vielleicht ist es ja auch eine Kombination mehrerer Faktoren oder Sie bemerken, dass eine Sprachsteuerung für ihr Audio-Objekt viel sinnvoller wäre? Wie oft bedient man es? … **Entwerfen Sie Ihren eigenen Fragenkatalog!**
-  - Schauen Sie sich im Rahmen einer **Recherche Interfaces** an und überlegen was vermutlich ein gutes und was eines schlechtes User-Interface ist. Ein erster Schritt kann sein sich folgendes [[https://pin.it/6qfx5Ts|diesem Pinterestboard]] anzuschauen. Übertragen Sie Ihre Erkenntnisse in die nächsten Arbeitsschritte.
-  - Spielen Sie an Ihrem Papiermodell dessen Bedienung durch und überprüfen Sie ob alle Bedienelemente vorhanden sind. Sinnvoll kann es sein **verschiedene Alternativen** auf Papier anzuscribbeln, auszuschneiden und an temporär an Ihr Objekt zu kleben. Sind die Knöpfe groß genug? Stoße ich bei der Bedienung an andere Elemente? Bekomme ich ein Feedback (auditiv oder visuell?) darüber, ob ich etwas verändert habe und/oder das Objekt richtig bediene?
-  - Aus den verschiedenen Versionen nehmen Sie die besten Elemente heraus und machen eine //Reinzeichnung// – d.h. **eine sehr saubere Darstellung des Interfaces**. Diese Darstellung kann beispielsweise sehr sauber mit einem Feinliner erfolgen, oder auch mit Hilfe eines Zeichenprogramms (z.B. Illustrator). Wichtig ist, das die Zeichnung in Originalgröße (1:1) stattfindet. Montieren Sie Ihr Interface auf Ihrem Papiermodell.
-  - **Dokumentieren Sie Ihren Prozess** in Ihrem Workbook.
-  - Bringen Sie Ihren Arbeitsstand zum nächsten Seminar mit.
-Es kann sein, dass Sie bei der Bearbeitung merken, dass Sie einige Aspekte in Ihrem Flow-Chart Diagram vergessen haben oder anpassen müssen. Das ist nicht schlimm. Sehen Sie dies als normalen Arbeitsprozess in dem man in iterativen Schleifen einem Ergebnis Schritt für Schritt näher kommt.
-===== lautleise 09 =====
-==== Prototyp – 1. Iteration  ====
-===== lautleise 10 =====
-==== Prototyp – 2. Iteration  ====
-==== User-Testing  ====