Zunächst möchte ich mich an dieser Stelle bei all denjenigen bedanken, die mich während der Anfertigung dieser Projektarbeit unterstützt und motiviert haben.

Ganz besonders gilt dieser Dank yAnna-Sophie Helleisz, die meine Arbeit in der Firma Studiokurbos betreut hat. Sie hat mich oftmals wieder auf den richtigen Weg gebracht und mich über meine Grenzen hinausdenken lassen.

Daneben gilt mein Dank meiner Mama, die zahlreiche Stunden Korrektur gelesen hat. Sie wies auf Schwächen hin und konnte als Fachfremde immer wieder zeigen, wo noch Erklärungsbe-darf bestand.

Auch meine Vorgesetzten und Kollegen der Firma Studiokurbos haben maßgeb-lich daran mitgewirkt, dass diese Pro-jektarbeit nun in dieser Form vorliegt.

Ebenso möchte ich mich bei meiner Do-zentin Frau Ina Günther bedanken, die stets für Fragen und Antworten erreich-bar war.

Danksagung

4

Inhalt

1.0 Einleitung 5

2.0 Recherche 72.1 Zukunftsorientierte Techniken für die Darstellung

und Umsetzung eines Interfacedesigns 82.2 Fazit 14

3.0 Zielgruppe 173.1 Personas 183.2 Einordnung im Sinus-Milieu 343.3 Fazit 38

4.0 Konzeptentwicklung 414.1 Konzeptideen 424.2 Zwischenpräsentation und Ideenkreis 484.3 Funktionsblöcke 49

5.0 Entwurfsphase 615.1 Zu welchem Trend neigt das Interfacedesign heut zu Tage? 625.2 Navigationskonzept 645.3 Gestensteuerung 665.3 Schrift 675.1 Moodwelten 685.2 Designfindung 73

5

6.0 Der Designentwicklungsprozess 77

7.0 Gestaltungsaufbau 897.1 Screenaufbau 907.2 Raster 917.3 Schriftgröße 927.4 Farbe 93

8.0 Die Umsetzung 958.1 Die Sitzeinstellung 968.2 Das Ambiente Light 102

6

Das Konzeptfahrzeug der Firma Buik im Jahr 1983

[Abb. 1]

7

1.0 Einleitung

Als Ende des 18. Jahrhunderts das Au-tomobil erfunden wurde, ähnelte es im Aussehen einer Kutsche und war auch sonst eher spartanisch in der Ausstattung. Seit dieser Zeit ist nicht nur am Aussehen viel geschehen. Die Ende des 20. Jahrhun-derts immer schneller fortschreitende Digitalisierung hielt auch in den Automo-bilen Einzug.Die Firma Buik stellte bereits 1983 ein Konzeptfahrzeug vor [Abb1], in dem versucht wurde die derzeit aktuells-te Technik zu integrieren. Dabei ist die Zukunftsvision des Interieurs sehr inter-essant: Erstmalig gab es im Cockpit- und Sitzbereich Bildschirme. Zu dieser Zeit waren Heimcomputer noch etwas völlig Fremdes. Den einzigen Bildschirm, den man zu Hause stehen hatte, war ein Fern-seher. Buik hatte damals schon die Idee von digitalen Navigationsgeräten in einem Auto. Sie sollten recht behalten. Inzwi-schen sind Navigationsgeräte in heutigen Autos kaum noch weg zu denken. Aber wie werden sich die Fahrzeuge in den nächsten Jahrzehnten weiter entwickeln? Der Faktor Interfacegestaltung ist in der Autoindustrie mittlerweile zu einem wichtigen Bestand-teil der Entwicklung geworden.

Wenn man den heutigen Stand der Technik betrachtet, wird schnell klar, dass bereits jetzt schon viele Interfacedarstellungen möglich sind, die vor 20 Jahren als Science Fiction angesehen wurden, die jetzt aber durchaus ihren Weg in die Automobilbran-che finden könnten. Ich möchte in meiner Arbeit einen möglichen Ausblick auf die Zukunft der Interfacegestaltung eines Auto-Interieurs geben.

8

9

2.0 Recherche

Die Entwicklung der heutigen Technik ermögicht viele Einsatzgebiete einer Interfaceoberfläche. In diesem Kapitel habe ich mich damit beschäftigt, welche unterschiedlichen Arten es geben könnte, die in Zukunft das herkömmliche Display ablösen und weitere Anwendungsmög-lichkeiten im Interieur eines Autos finden könnten.

10

2.1 Zukunftsorientierte Techniken für die Darstellung und Um-setzung eines Interfacedesigns

OMNITOUCH

Bei Omnitouch handelt es sich um einen kleinen Beamer, der Interface-Elemente projiziert und Bewegungen mit Hilfe von Wärmekameras wahrnehmen kann. Dadurch ist es dem Benutzer möglich, mit der projizierten Oberfläche zu interagieren. Einer der großen Vorteile ist, die Flexibi-lität auf jeder Oberfläche ein Interface projizieren zu können. Das Interface ist nicht - wie bei normalen Displays- an eine Form gebunden, sondern kann seine Größe und Form anpassen. Durch diese flexible Darstellung, kann das Gerät in vielen Situationen eingesetzt werden. Ein Nachteil ist bislang, dass noch große Hardware Elemente benötigt werden. Bis jetzt wird das Gerät z. B. auf der Schulter befestigt, was für den Anwender keine komfortable Lösung ist. Außerdem wird die Projektion stark durch den Lichteinfall beeinflusst. Deshalb funktioniert es bis jetzt am

Besten in geschlossenen Räumen mit wenig Lichteinfall. Die Interaktionen zwischen Benutzer und der Oberfläche passieren noch mit etwas Verzögerung. Die Kamera braucht erst einige Zeit, bis sie den Finger als Bewegungselement wahrgenommen hat. Die bisher vorge-stellten Interaktionen mit dem Omni-touch wirken aber vielversprechend.

Der Omnitouch Prototyp

[Abb. 2]

11

CRICRET WIRSTBAND

Die Idee des Cricret Wirstband ist es, den Bildschirm des mobilen Telefons auf den Arm zu übertragen. Dabei soll die Haut des Anwenders als Interfaceoberflä-che dienen. Über ein Armband wird der Bildschirm des Handys übertragen und auf den Arm projiziert. Wie auch schon beim Omintouch, werden die Bewegun-gen auf der projizierten Oberfläche über Sensoren wahrgenomme, allerdings mit dem Vorteil freier agieren zu können. Der Benutzer dieses Armbandes muss kein Handy mehr in die Hand nehmen, sondern kann Interaktionen direkt auf seinem Arm ausführen. Diese Idee funktioniert allerdings nur störungs-frei, wenn die Projektionsfläche eben ist, also z.B keine Kleidung die Haut bedeckt. Die Bedienung des Prototyp Cricret Wirstband ist bereits gut entwi-ckelt, die Darstellung ist jedoch noch sehr unscharf, wodurch Symbole und Icons schwer erkennbar sind. [Abb. 4]

Eine Konzeptdarstellung des Cricret Wirstband

[Abb.3]

Eine Darstellung des Cricret Wirstband Prototyp

[Abb.4]

12

TANGIBLE USER INTERFACE

Das Tangible User Interface kombi-niert die greifbare Objekte mit einer zusätzlichen Interfacedarstellung. Das geschieht z. B. auf speziellen Tischen, deren Oberfläche komplett aus einem Display besteht. Auf ihn werden Spielfi-gurartige Elemente gesetzt. Das Display erkennt dieses Objekt und projiziert spezielle Oberflächenelemente dazu auf das Display[Abb. 5]. Die einzelnen Elemente erhalten also Zusatzinfor-mationen zur Darstellung auf dem Displaytisch. Aber nicht nur durch Dis-playdarstellung gelingt diese Technik, sondern auch mit Projektionen auf einer Oberfläche. Hier werden durch spezielle Wärmekameras die Objekte erkannt und daraufhin zusätzliche Oberflächenele-mente abgebildet[Abb. 6]. Durch eine Interaktion zwischen den Objekten und der Oberfläche wird das Interface für den Benutzer anschau-licher. Es ist ihm dabei möglich, mit beiden Händen zu agieren, im Gegen-satz zum normalen Touchdisplay. Somit können durch diese

Technik auch mehr Leute gleichzeitig mit der Software interagieren. Allerdings ist diese Technik nicht wie-derverwendbar, denn ist die Software einmal gestaltet kann sie nicht mehr angepasst werden.

Eine Tangible User Interface Anwendung auf einem Display

[Abb. 5]

Eine Tangible User Interface Projektion

[Abb. 6]

13

COMBINE GLASS

Das Cobine Glass wird in der Unerversity of Bristol entwickelt. Auf einer Scheibe werden digitale Daten gezeigt mit denen der Nutzer von Vorder- und Rückseite interagieren kann. Die Darstellung der Daten erfolgt hierbei durch ein Hologramm. Der Anwender kann mit Handgeste die Interfaceobjek-te bewegen. Noch ist die genaue Funkti-on der Technik unbekannt, da sie sich im Entwicklungsprozess befindet. Der An-wender kann von jeder Position auf die virtuellen Objekte sehen, ohne dass eine perspektivische Verzerrung statt findet. Innovativ ist auch, dass der Anwender nicht direkt vor dem Glas stehen muss, um eine Interaktion durch zu führen. Denn auch mit ein paar Metern Abstand ist die Bedienung noch möglich.

Der Prototyp des Combine Glass

[Abb.7]

14

HOLOGRAMMBRILLE HOLOLENS

Anfang 2015 stellte Microsoft eine revo-lutionäre Entwicklung einer Datenbrille vor. Der Blick durch die Hololens ermög-licht es dem Anwender Hologramme in der realen Welt zu platzieren. Bislang konnten Datenbrillen, wie z. B. die Goo-gle Glass, das Sichtfeld des Benutzers nur durch 2D-Informationen überlagern. Mit der vorgestellten Hologrammbril-le von Microsoft ist dies nun auch mit 3D-Objekten möglich. Diese Technik ermöglicht dem Anwender viele neue Anwendungsgebiete. Bislang durfte nur ausgewählte Firmen den Prototy-pen testen, deshalb ist auch noch nicht bekannt, ob die Ansätze in der Weise umgesetzt werden können, wie im Kon-zeptvideo vorgestellt.

Ein Ausschnitt des Konzeptvideos der Hololens

[Abb. 8]

15

ULTRASONICS

Ultrasonics ist auch ein Forschungs-projekt der Universität of Bristol und wurde zum ersten Mal auf der CES im Januar 2015 vorgestellt. Dabei handelt es sich um eine Technik, die dem Be-nutzer ein haptisches Feedback zurück geben kann, nachdem er z. B. 3D-Gesten ausgeführt hat. Durch eine Fläche auf der Sensoren befestigt sind, werden Ultraschallwellen ausgesendet, die ein „spürbares Interface“ ermöglichen. Die Technik wurde im Dezember 2014 pu-bliziert und verspricht jetzt schon eine Revolution im Bereich der Interface-steuerung zu werden. Besonders in der Automobilbranche wäre diese Technik nützlich, da der Autofahrer bislang nur optisches Feedback erlangt und seinen Blick dafür von der Straße abwenden muss.

Das Forschungsprojekt Ultrasonics

[Abb. 9]

16

2.2 Fazit

Aus den beschriebenen Techniken lassen sich drei wesentliche Darstellungsformen für Interfaceselemente ableiten:

• Projektion

Omnitouch Wirst Cricret Tangable User Interface mit Projektion

• Display

Tanable User Interface mit DisplaytischDatenbrillen

• Hologramm

Combine Glass Hololens Datenbrille

17

PROJEKTION

Die Projektion eines Interface bietet den großen Vorteil überall einsetzbar zu sein. Die Größe der Darstellungsflä-che, sowie deren Beschaffenheit spielt dabei keine Rolle. Für das Interagieren zwischen Mensch und projezierter Fläche sind zusätzliche Trackingkame-ras notwendig, welche die Bewegung aufnehmen und in einen Befehl um-wandeln. Um also eine große interaktiv projezierte Fläche zu ermöglichen wird Hardware benötigt, welche die Mobilität des Anwenders einschränken könnte. Die optische Darstellung der Oberflä-che erweist sich ebenfalls als noch schwierig, da die Projektion keine hohe Pixeldichte aufweisen kann und somit unscharf wirkt.

DISPLAY

Displays gehören zur herkömmlichen Methode der Interfacedarstellung. Sie bieten den Vorteil, die Interface-Ele-mente in einer hohen Auflösung dar-stellen zu können und bei Bedarf mobil zu sein. Displays werden fast für jede Interface-Anwendung eingesetzt. In der Autoindustrie ersetzten sie mitlerweile nach und nach die haptischen Knöpfe im Auto-Interieur.

HOLOGRAMME

Hologramme sind für einen normalen Nutzer heut zu Tage noch eine fiktive Vorstellung. Allerdings ist die Techni-sche Entwicklung mittlerweile so weit, dass Hologramme für den täglichen Gebrauch eingesetzt werden könnten. Sie ermöglichen es, virtuelle 3D-Objekte in unserer Welt zu platzieren und mit diesen interagieren zu können. Bislang haben sie den Nachteil, nur zu funktio-nieren, wenn die Umwelt absolut abge-dunkelt ist, da Hologramme meist aus einem Zusammenspiel von Projektion und Spiegelung arbeiten. Vielverspre-

chend ist die Entwicklung der Hololens von Microsoft, da es mit ihr möglich ist die Hologramme ohne äußerliche Ein-flüsse sehen zu können. Der Fortschritt im Gebiet der Hologramme ist also schon sehr weit aber viele Konstrukti-onen noch nicht publiziert worden. Es wäre also durchaus Denkbar, dass Holo-gramme den Gebrauch von herkömmli-chen Displays ablösen könnten.

Displays sind bis jetzt der normale Standard für die Abbildung von Interfa-ceelementen. Durch die dargestellten Techniken wird aber deutlich, dass sich die Interfacedarstellung in naher Zukunft ändern könnte und Displays durch beispielsweise Hologramme oder Projektionen ersetzt werden. So ist es auch warscheinlich, dass diese Entwick-lung in der Automobilbranche eingesetzt werden können.

18

19

3.0 Zielgruppe

Um ein Interfacedesign- Konzept erstellen zu können, muss zuerst die Zielgruppe definiert werden. In diesem Kapitel habe ich Personas erstellt und diese verschie-dene Szenarien durchlaufen lassen. Da sich das Konzept an der Zukunft orientieren sollte, sind auch die Personas und deren Szenarien fiktiv aufgebaut.

20

3.1 Personas

SIMONE WEILHEIM

• 31 Jahre alt• Mutter von 3 Kindern

(1 Jahr, 4 Jahre und 6 Jahre)• Beruf: Hausfrau • Hobby: Enwirft Dekorationsideen• Wohnt in einem Einfamlienhaus an

einem Stadtrand• Beschäftigt sich viel mit ihren Kin-

dern• Achtet sehr auf gesunde Ernährung

und Sauberkeit• Besitzt einen großen Garten in dem

sie sich mit ihrer Familie gerne aufhält

Simone ist eine full-time-Mutter und verbringt gerne Zeit mit ihren drei Kindern. Sie versucht die Kinder über den Tag gut zu beschäftigen und zu fördern. Da ihr Mann den ganzen Tag arbeitet, wird sie im Haushalt etwas von einer Putzfrau unterstützt. Simone verbringt gerne Zeit in der Natur. Sie besitzt einen großen Garten, den sie liebevoll angepflanzt hat. An manchen Wochenenden geht sie gerne mit ihrer Familie Wandern.

[Abb. 10]

21

[Abb. 11]

[Abb. 12]

[Abb. 13]

22

Simone

Baby Kind 1

Kind 2

[Abb. 14]

23

Es ist halb 7 Uhr Morgens und Simo-ne ist dabei ihren Kindern Jacke und Schuhe anzuziehen. Sie verabschiedet sich noch schnell von ihrem Mann und bringt danach ihre Kinder zum Auto. Da sie eins ihrer Kinder auf dem Arm und noch einen weiteren Korb trägt, drückt sie einen Knopf an ihrem Autoschlüssel. Das Auto öffnet automatisch die Türen und sie kann ihr kleinstes Kind sofort in den Kindersitz setzten. Die anderen Kinder steigen auch ein. Das Auto heißt die Famlie auf den Dashboardscreens willkommen. Die zwei Kinder schnallen sich an und fangen danach sofort an auf dem Fensterscreen etwas zu malen und zu spielen. Simone setzt sich auf den Fahrersitz. Auf der Windschutz-scheibe wird ihr ein Funktions-Check des Autos gezeigt. Dieser gewährleistet ihr eine sichere Fahrt. Mit einer Hand-bewegung zieht sie ein Hologramm-fenster nach oben, das sie rechts neben ihrem Kopf mit einer Handbewegung positioniert. Auf den Hologrammen werden Kameras der Rücksitze an-gezeigt. So hat Simone auch während der Fahrt ein Blick auf ihre Kinder. Zusätzlich erhalten auch die Kinder auf der Rückbank eine Kamerasicht von Simone. Das Bild wird ihnen auf einem Display auf der Mittelkonsole ange-zeigt.Während der Fahrt signalisiert das Auto

einen kleinen Stau auf dem Weg. Simone bestätigt durch eine kurze Handgeste, dass sie die Umfahrungsstrecke nutzen will. Ihr kleinstes Kind befindet sich in einem Autositzkorb auf dem Beifah-rersitz. Als es zum schreien beginnt schaltet Simone kurz ein beruhigendes Ambientelicht für die Beifahrerseite an. Daraufhin hört das Kind auf zu schreien. Währenddessen interessiert sich das älteste der Kinder für das Geschehen außerhalb des Autos. Es würde gerne wissen aus welchem Land das vorbei-fahrende Auto kommt. Dazu schaltet es die Umgebungserkennung ein und ihm wird beim Blick durch die Fensterschei-be in Echtzeit die Information angezeigt. Das ander Kind sieht sich eine Folge seiner Lieblingsserie an. Als Simone die Kinder zur Schule und zum Kindergarten gefahren hat beschließt sie noch einkau-fen zu fahren. Schnell recherchiert sie im Auto nach aktuellen Angeboten von gesunden und natürlichen Lebensmit-teln. Das Auto startet automatisch eine Navigation zum nächsten Supermarkt, der das gewünschte Sortiment enthält. Als Simone auf dem Parkplatz ankommt, lässt sie das Auto automatisch nach einem Parkplatz suchen und einparken. Dabei hat sie die Umgebungssensoren für mögliche Passanten eingeschaltet.

NUTZERBEDÜRFNISSE:

• Sicherheitsfunktionen

• Entertainment für Kinder

• Mutter-Kind Funktionen

SZENEARIO: SIMONE FÄHRT IHRE KINDER ZUM KINDERGARTEN UND ZUR SCHULE

24

MICHAEL SCHERBERT

• 35 Jahre alt• Geschäftsmann, leitet 3 große Fir-

men• Sehr viel unterwegs• Schläft die Hälfte der Woche in

Hotels• Karrierefixiert• Sitzt am Abend gerne in einer Bar

und trinkt Whisky• Sein Tag ist durch seinen Terminka-

lender sehr getaktet• Ist ledig• Pflegt seine Geschäftskontakte sehr

gut• Legt wert auf Luxus und Sauberkeit • Technik-affin

Michael lebt für seinen Job. Selbst am Wochenende ist er geschäftlich unter-wegs. Die meiste Zeit übernachtet er in Hotels, die sich in der Nähe seiner 3 Geschäfte befinden. Er gestaltet seine Abende gerne mit einem guten Glas Whisky in einer Bar oder besucht nach seiner Arbeit ein Fitness Studio. Er legt großen Wert auf Luxus. Sein Terminka-lender bestimmt seinen Tagesablauf.

[Abb. 15]

25

[Abb. 16]

[Abb. 18]

[Abb. 19]

[Abb. 17]

26

Michael

27

Michael geht frühmorgens aus sei-nem Hotel und steigt auf die Rückbank des bereitstehenden Fahrzeuges. Der Innenraum des Autos gleicht einem kleinen Raum. Es handelt sich dabei um ein Autonomes Fahrzeug. Durch Gesichtserkennung wird Michael vom Auto als Besitzer identifiziert und heißt ihn per Sprache willkommen. Durch eine automatische Verbindung mit dem Handy von Michael weiß das Auto gleich, wo es hin fahren muss und beginnt die Navigation. Auf einem großen Display an der Türe wird ihm die Fahrzeit von 35 Minuten angezeigt. Diese Zeit möchte Michael nutzen, um sich auf seinen Tag vorzubereiten. Als erstes öffnet er auf dem Seitendisplay seinen Termin-kalender und zieht ihn als Hologramm direkt vor sich und vergrößert ihn. Er sieht, dass er sich am Nachmittag zu einem Geschäftsmeeting um 12:00 Uhr verabredet hat. Allerdings hat er bereits zu einem Essen um 12:15 zugesagt. Er schiebt den Termin mit einer Handgeste auf ein Telefonicon und startet somit ei-nen Anruf um das Essen um eine Stunde zu verlegen. Da er sich auf seine Prä-sentation vorbereiten mus, ruft er auf

SZENARIO: FAHRT VOM HOTEL ZU EINEM GESCHÄFTSMEETING

einem großen Seitendisplay die Folien ab und bereitet sich so nochmal auf sein Meeting vor. Am Abend würde er gerne auf einen Drink in eine Bar in der Nähe seines Hotels gehen. Per Spracheingabe ruft er alle umlegenden Bars auf einer Karte auf. Das Auto kennt alle Inter-essen und Bedürfnisse von Michael, weshalb ihm auch nur Bars vorgeschla-gen werden, die seinen Ansprüchen entsprechen. Als er mit seinem Auto am Ziel an-kommt, fährt dieses ihn direkt vor die Tür, verabschiedet sich auf den Displays von ihm und lässt ihn aussteigen. Als Michael ausgestiegen ist, geht das Auto selbständig auf die Suche nach einem Parkplatz in der Nähe.

Nutzerbedürfnisse:

• Arbeitsbereich

• Verbindung zwischen Smartphone und Auto

• Automatische Funktionen

28

CHARLES SCHIFFER

• 26 Jahre alt• Lebt in einer Großstadt• Arbeitet als Fotograf• Hat ein sehr großes soziales Netz-

werk• Ist sehr oft auf exklusiven Partys• Besitzt ein eigenes Fotoatelier• Feiert die Nacht gerne durch und

beginnt seinen Morgen in einem hippen Cafe

• Ist Hobby DJ auf angesagten Partys

Charls ist Fotograf in einer Großstadt. Er besitzt ein eigenes Atelier in dem er viele seiner Arbeiten fotografiert. Hin und wieder organisiert er auch Ausstel-lungen seiner Werke. Er steht mit seinen Freunden immer in Kontakt und besitzt ein sehr großes Netzwerk. Auf angesag-ten Partys ist er immer dabei und legt manchmal selbst als DJ auf. Er bewegt sich dort auch gerne in luxuriösen Krei-sen als VIP.

[Abb. 20]

29

[Abb. 21]

[Abb. 22]

[Abb. 23]

30

Charles

Freund Freund

Freund

31

Charles möchte seine Freunde zu einer Party abholen. Er startet sein Auto und zieht sich auf seinem Dashboard alle Messanger-Dienste so zurecht, dass er während der Fahrt sofort bescheid weis, wenn ihn eine Nachricht erreicht. Auf seinem Weg befindet sich viel Zähflüssi-ger Verkehr, weshalb er sein Auto auto-matisch dem Vordermann folgend lässt. Währenddessen liest er aktuelle News auf einem Display an seinem Lenkrad. Als er bei seinen Freunden angekom-men ist lässt er die Türen automatisch durch eine Handgeste an seinem Türgriff öffnen. Seine Freunde steigen ein. Einer davon nimmt auf der Beifahrerseite Platz und zwei weitere auf den hinteren Sitzen. Bevor Charles allerdings zur Party weiter fährt möchte er ein biss-chen mit seinen Freunden plaudern und Neuigkeiten austauschen. Deshalb fährt er auf einen Parkplatz und lässt den Fahrer- und Beifahrersitz um 180 Grad drehen, so dass sich nun alle gegenüber sitzen. Da es draußen bereits dunkel ist schaltet Charles ein Ambientelicht an, dass den gesamten Autoinnenbereich dezent beleuchtet. Die Displays auf der Mittelkonsolen zwischen den Sitzen

dienen nun als Displaytische. Einer der Freunde möchte gerne die Fotos von letzter Party zeigen. Damit diese alle sehen können zieht er aus einem Dis-playfeld Hologrammbilder heraus und schiebt diese in die Mitte, so dass jeder sie betrachten kann. Charles schaltet das Soundsystem seines Autos an in dem er auf einen seiner Lautsprecher an der Seite Tapt. Ein Menü öffnet sich und er wählt seine Playlist aus. Als die Bilder fertig betrachtet wurden werden sie durch eine Handgeste geschlossen. Charles lässt an den Wänden des Autos ein Musikvideo abspielen, was für gute Partystimmung sorgt. Danach fahren sie weiter auf Party.

Nutzerbedürfnisse:

• Onlinedienste

• Aufenthaltsentertainment

• Dynamische Anpassung einzelner Funktionen

SZENARIO: HOLT SEINE FREUNDE AB UND FÄHRT DANN MIT IHNEN AUF EINE PARTY

32

GERD HUMMEL

• 75 Jahr alt• Reist sehr viel mit seiner Frau• Sehr gebildet und kulturell• Hat 2 erwachsene Kinder• Benutzt sein Smartphone sehr viel

und kennt sich mit der Technik gut aus

Gerd ist seit mehreren Jahren Rentner. Er genießt seine freie Zeit gerne auf Rei-sen zusammen mit seiner Frau. Er hat 2 Kinder, die bereits ihre eigenen Familien gegründet haben. Mit der Benutzung von Smartphones ist Gerd vertraut. Er interessiert sich sehr für Technik und versucht in diesem Gebiet immer auf dem neusten Stand zu bleiben. Dazu liest er auch viele Fachzeitschriften. Er hat Kommunikationswissenschaften studiert und ist kulturell sehr interes-siert.

[Abb. 24]

33

[Abb. 25]

[Abb. 26]

[Abb. 27]

34

Heinrich

Ehefrau

35

Es ist früh am Morgen. Gerd und seine Frau wollen das Wochenende für einen Ausflug nutzen. Gerd gibt dem Auto per Spracheinga-be die nötigen Daten für das Navigationsge-rät. Es zeigt an, dass die Fahrzeit 5 Stunden beträgt. Da sie pünktlich am Ziel sein wollen, möchten sie keine Pause einlegen. Für die Sicherheit schaltet Gerd eine Gesichtser-kennung ein. Dieses System beobachtet auf der gesamten Fahrt sein Gesicht und kann so feststellen, ob der Fahrer müde ist und nicht mehr Fahren sollte. Nach 3 Stunden meldet sich das System und gibt bescheid, dass Gerd eine Pause vom Fahren machen sollte. Daraufhin schaltet er das Auto per Display auf die autonome Fahrweise um. Die vorderen Sitze drehen sich um und das Auto lenkt von alleine weiter. Seine Frau öffnet an den Wanddisplays Mediaeinstellungen. Dort schaltet sie Musik an. Die Musiklautstärke ist Gerd etwas zu hoch eingestellt. Er tippt mit einem Finger auf die Lautsprecherbox neben seinem Sitz. Es öffnet sich ein projeziertes Interface auf dem Lautsprecher auf den er die Lautstärke leiser stellen kann. Da Gerd etwas müde ist und sich gerne ausruhen möchte, wählt er auf einem Seitendisplay eine Schlaf-

SZENARIO: AUF DEM WEG ZU EINEM WOCHENENDSAUSFLUG

modusfunktion aus. Die Fenster des Autos dunkeln sich darauf hin ab und ein leichtes Ambiente Light geht an. Der Sitz von Gerd stellt sich in eine Schlafposition ein und er beginnt ein Nickerchen. Seine Frau hingegen liest auf einem Hologrammdisplay ein Buch. Über einen kleinen Bildschirm kann sie alle nötigen Informationen über die Geschwindig-keit und Position des Autos im Auge behalten. Nach weiteren 2 Stunden Fahrt meldet sich das Auto per Sprache, dass das Ziel erreicht ist.

Nutzerbedürfnisse:

• Erklärende Technik

• Automatische Funktionen

• Sicherheitsgefühl

• Entertainment für lange Reisen

36

3.2 Einordnung im Sinus-Milieu

Quelle: http://www.caritas.de/neue-caritas/heftarchiv/jahrgang2013/artikel/die-kirche-und-ihre-caritas-im-spiegel-d

Das Sinus-Milieu

[Abb. 9]

37

KONSERVATIVES-ETABLIERTES MILIEU

• Verantwortung• Erfolgsethik• Exklusivität• Führungsansprüche• Standesbewusstsein

BÜRGERLICHE MITTE

• anpassungsbereit• leistungsbereit• wunsch nach beruflicher

Etablierung• harmonische verhältnisse

TRADITIONELLES MILIEU

• Sicherheit• Ordnung• Nachkriegsgeneration• Sparsamkeit• Konformismus

PREKÄRES MILIEU

• Teilhabe bemühte Unterschicht• starke Zukunftsängste• häufung sozialer benachteiligung• geringe aufstiegsperspektive

HEDONISTISCHES MILIEU• Spaß und erlebnisorientiert• modern• Leben im hier und Jetzt• keine beachtung vorgeschriebender

Regeln

ADAPTIV-PRAGMATISCHES MILIEU

• moderne junge Mitte• ausgeprägter Lebenspragmatismus• zielstrebig• kompromissbereit• sicherheitsorientiert

SOZIALÖKOLOGISCHES MILIEU

• konsumkritisch• bewusst• normative Vorstellungen• ausgeprägtes ökologisches

Gewissen

EXPEDITIVES MILIEU

• ambitioniert• kreativ• mental udn geografisch mobil• online und offline vernetzt• Suche nach neuen grenzen und

Lösungen

MILIEU DER PERFORMER

• Leistungselite• viel Konsum • Stil• hohe IT und Multimedia Kompetenz

LEBERAL-INTELLEKTUELLES MILIEU

• aufgeklärte Bildungselite• liberale Grundhaltung• Wunsch nach selbstbestimmten

Leben• vielfältige intellektuelle Interessen

38

Gerd Hummel ist ein sehr gebildeter Mensch. Er hat kulturelle interssen und hatte einen angesehenen Beruf. Er kann sowohl in das liberale als auch konser-vative Milieu platziert werden.

39

Simone Weilheim lässt sich vorwiegend in das Sozialökologische Milieu einord-nen. Da sie eine sehr umweltbewusste Person ist, passt sich ihr Verhalten an das ökologische Denken dieses Milieus an. Ebenso kann man sagen, dass sie schon zur Oberschicht gehört.

Charles Schiffer kann vollkommen dem Expeditiven Millieu zugeordnet werden. Seine Eigenschaften immer mobil zu sein und sein offene Art, passen sich diesem Millieu sehr gut an.

Michael Scherbert bildet eine Schnitt-stelle zwischen dem Milieu des Perfor-mers und des Lieberal-intelellekturellen Millieu. Dies erkennt man unter ande-rem daran, dass er in seinen jungen Jahren bereits 3 Firmen leitet. Er ist sehr gebildet und bestimmt sein Leben selbst. Michael Scherbert wird der Ober-schicht zugeordnet.

40

3.3 Fazit

Alle Personas ziehen aus ihren zu-kunftsorientierten Fahrzeugen verschie-dene Vorteile für sich. Es wird schnell klar, dass das Auto in Zukunft kein reines Transportmittel mehr ist.Durch neue Techniken wie z.B Projekti-onen oder Hologrammen entsteht eine komplett neue Möglichkeit den Innen-raum des Fahrzeugs zu gestalten, so wie es zu steuern. Der Stand der aktuellen Technik könnte viele der benannten Me-thoden bereits möglich machen.Das selbständige Fahren kann in Zu-kunft in den Hintergrund rücken. Dabei werden andere Funktionen für den Insassen wichtiger. Das sind z.B Multi-media Funktionen, die als Zeitvertreib dienen können. Der Faktor Zeit kann in Zukunft eine große Rolle spielen, denn fährt man nicht mehr selbst, ergeben sie neue Möglichkeiten, wie die Zeit in einem autonomen Fahrzeug genutzt werden kann. Anhand der Personas zeigt sich, dass das Auto z.B als Arbeitsplatz oder Aufenthaltsraum dienen kann.Es zeigt sich also, dass sowohl ein selbstfahrendes als auch ein autonomes Fahrzeug mit neuen Technischen Mittel ausgestattet werden kann, die die Zu-kunft des Autofahrens beeinträchtigen können.

41

42

43

4.0 Konzeptentwicklung

In Kapitel 3.0 wurden fitive Personen beschrieben, die zukunftsorientierte Autos fahren. Aus diesen Szenarien lassen sich nun Konzeptide-en ableiten, wie möglicher-weise der Innenraum eines Fahrzeuges in der Zukunft benutzt werden könnte. In diesem Kapitel stelle ich meine Konzeptideen auf und erarbeite mögliche Funktio-nen und Darstellungsformen der Interfacegestaltung.

44

Konzept A

4.1 Konzeptideen

Eine Augmented Reality-Fensterscheibe, welche die Umgebung mit einbezieht. Sie könnte dem Insassen zusätzliche Navigati-onsinformationen liefern oder als Unterhal-tung dienen, indem z.B. ein Spiel integriert wird, dass Elemente, an denen das Fahrzeug gerade vorbei fährt, mit einbezieht.

Tap on Window for Jump

Games

Zurück

[Abb. 29]

45

Konzept B

Kamera

Der Fahrer kann sich alle Funktionen, die er auf seinem Dahsboard während der Fahrt sehen möchte, selbst anordnen. Dabei können diese Funktionen als Hologramme hervorgenommen werden und beliebig plaziert, vergrößert und verkleinert werden.

[Abb.30]

46

Konzept C

Die Wand des Autos dient als großes Display, auf dem verschiedene Funk-tionen integriert sind. Das können z.B Funktionen für einen Arbeitsplatz (Terminkalender, Telefon etc.) sein. Da ein seitliches Display für den Insassen etwas ungüngstig plaziert ist, kann er sich verschiene Funktionen als Holo-gramm erausziehen und beliebig im Raum plazieren.

[Abb.31]

47

Konzept D

Im Auto befinden sich verschiedene Elemente, z.B eine Art Plane auf der Projektionen verschiedener Elemente möglich ist. Auf dieser können, je nach Bedürfnis, Funktionen platziert und beliebig vergrößert werden.

48

Konzept C

Es befinden sich Interaktionstische in einem Auto. Dabei ist es z.B möglich Daten mit dem Gegenübersitzenden auszutauschen.

[Abb.33]

[Abb.34]

49

Konzept D

Gesuchte Funktionseintellungen wer-den direkt am Objekt gezeigt. Es muss nicht lange im Auto nach einem Knopf oder in einer Software nach der Funkti-on gesucht werden. Wenn der Anwender z.B die Lüftung einstellen will, kann er diese mit dem Finger berühren und es öffent sich eine Menüprojektion auf der er alles nötige einstellen kann.

[Abb.35]

50

4.2 Zwischenpräsentation und Ideenkreis

51

Meine Zwischenergebnise habe ich in der Firma Studiokurbos in einer Präsenta-tion zusammengefasst. Ich stellte meine erarbeiteten Personas vor und zeigte meine Konzeptideen. Bei dieser Präsentation war es für mich sehr wichtig, ein Feedback zu meiner bisherigen Arbeit zu bekommen. Ich veranstaltete anschließend einen kleinen Ideenkreis indem jeder sein Feedback ge-ben konnte und eventuell weitere Ideen für die Konzepte mit einbringen konnte. Aus dem erhaltenen Feedback und frischen Ide-en formte sich eine weitere Vorgehenswei-se. Es filterte sich heraus, dass die Persona Michael Scherbert am interessantesten war, um ein Konzept auszuarbeiten.

52

Da sich aus der vorgestellten Zielgruppe ein breites Spektrum an möglichen Kon-zepten ableiten lässt, möchte ich mich im weiteren Verlauf auf die Funktionen von Michael Scherbert konzentrieren. Um auf die Bedürfnisse von Michael de-finieren zu können, habe ich verschiede-ne Funktionsmöglichkeiten gesammelt. Dabei wurden 3 wesentliche Szenarien durchspielt:

• Selbstständiges Fahren• Autonomes Fahren mit Arbeitsplatz• Autonomes Fahren mit einem Ge-

schäftskunden• Autonomes Fahren alleine

Die gesammelten Funktionen sind anschließend geordnet worden. Zusam-menhängede Funktionen wurden zu Blöcken geordnet. Dabei sind 5 verschie-dene Funktionsblöcke entstanden.

4.3 Funktionsblöcke

53

SELBSTSTÄNDIGES FAHREN

54

AUTONOMES FAHREN MIT ARBEITSPLATZ

AUTONOMES FAHREN MIT GESCHÄFTSKUNDEN

55

AUTONOMES FAHREN ALLEINE

56

Entertainment

• Musik -> Soundsystem

• TV/Video

• Augmented Reality Fensterscheibe -> Info-Navigation -> Minigames -> (Zeichnen, Fotos)

• Fotobibliothek

• Virtuelle Bücher

Komfort

• Sitzkomfort -> Lüftung -> Sitzeinstellung -> Massage

• Ambiente Light

• Schlafmodus -> Abdunkeln der Fenster -> Weckerfunktion

• Entspannungsmusik

• Autonom- Selbstfahrfunk-tion

1

2

57

3

4

5

Kontakt & Organisation

• Kontaktliste

• Terminkalender

• Telefonie -> Telefonkonferenz -> Videokonferenz

Inforamtionsanzeigen

• News -> Messanger -> Nachrichten

• Gesundheitsüberwachung

• Ausenkameras -> Außengeschehen kann live

mit verfolgt werden

• Aktienkurse

• Navigation

• Wetter

Arbeit

• Präsentationstool -> Eigene Präsentation vor Kun-den -> Bewerber

• Arbeitstool -> Verwendete Arbeitsprogram-me z.B Word

• Email/Messanger

• Virtuelle Visitenkartenübertragung bei Kunden

58

4.4 Platzierung der Funktionsblöcke

DISPLAYTISCH

PROJEKTIONSWAND

Darstellungsweise: Display

• Elemente sind fest plaziert• Funktionen sind in der Soft-

ware implementiert

Darstellungsweise: Projektion, Hologramm

• Flexible Darstellung einzelner Ele-mente

Seitlich

Platten oder leichter Stoff mit Interface Projektionen

Von Oben

Aus den Konzeptideen lassen sich Darstellungsformen im Auto definieren, auf denen die verschiedenen Funktionsblöcke abgebildet werden können.

Funktionsblöcke:

1. Komfort2. Entertainment3. Kontakt & Organisation4. Informationsanzeige5. Arbeit

1 2

2 3 5

4

59

HOLOGRAMM KOMBINIERT MIT DISPLAYDARSTELLLUNG

PROJEKTION AM OBJEKT

Darstellungsweise: Hologramm, Display

• Ausziehbare Hologramme, die mit einem Display kom-biniert werden können

Darstellungsweise: Projektion

• Projektion einzelner Inter-faceelemente direkt am festen Objekt

1

2 3 5

4

60

STEUERUNGSMODUL

DISPLAYFENSTER

Darstellungsweise: Display

• Wie ein Tablet, mit dem sich verschiedene Funktionen im Auto steuern lassen

Darstellungsweise: Display

• Interfaceelemente werden direkt auf der Fensterschei-be angezeigt

• Der Hintergrund ist durch-sichtig

1 2 5

2 4

61

62

63

5.0 Entwurfsphase

In Kapitel ??? wurden Funkti-onsblöcke festgelegt. Im weite-ren Verlauf meiner Arbeit möcht ich mich gerne auf den Block „Komfort“ eingehen. Dabei wer-de ich die Funktionen „Sitzein-stellung“ und „Ambiente Light“ umsetzten. Um den Entwurfs-prozess zu vereinfachen gehe ich von einer Gestaltung für ein Display im Sitzbereich eines Autonomen Fahrzeuges aus.

64

Als die ersten Displayanwendungen auf den Markt kamen, war das Interface noch sehr Materiallistisch gestaltet. Ein Beispiel wäre hierfür das IOS Betriebssystem von Apple. In frühern Versionen wurde hier mit viel Schatten und Lichtreflexen gearbeitet um eine materia-listische Wirkung zu erziehlen. Später änder-ten sie das Design ab und gingen in die sog. Flat-Design Richtung bei der es bis heute ist.

Früher

Heute

5.1 Zu welchem Trend neigt das Interfacedesign heut zu Tage?

[Abb.36]

[Abb.37]

65

Aktuell neigt der Trend dazu, keine Materi-alität mehr in der Gestaltung von Interakti-ven Oberflächen aufzunehmen. Dennoch arbeitet die Automobilbranche noch nicht komplett im Flat-Design. Dort wird viel mit Lichtreflexen und Glanzpunkten gespielt. 2015 stellte Bmw seine neues iDrive Interfa-ce vor. In diesem ist klar zu erkennen, dass Materalitäten, Schatten und Glanzpunkte weiterhin in der Automobilbranche er-wünscht sind. Es kann aber davon ausge-gangen werden, dass sich das Flat-Design auch in der Automobilbranche etablieren wird.

[Abb.38]

66

5.2 Navigationskonzept

67

Das Navigationskonzept legt den Ablauf der einzelen Screens fest. Um zwischen den einzelnen Kontexten zu wechseln ist eine horizontale Wischbewegung nötig. Weitere Interaktionen sind im Kontext direkt durch Tabben möglich. Die Screens wurden so entwickelt, dass sie auch für eine Hologramm- oder Projektiondarstel-lung anwendbar sind.

68

5.3 Gestensteuerung

TabDurch einen einfachen Tab mit einem Finger wird eine Aktion ausge-führt.

360° TabMit dem Finger kann gedrückt werden und durch das Bewegen in alle Richtungen ein Objekt gedreht werden.

SwipeDurch Wischen von Rechts nach Links oder andersherum können Kontexte gewechselt wer-den.

Tab and PullMit einem Finger wird gedrückt und danach über die Oberfläche gestri-chen.

69

5.3 Schrift

Da ich vorest für eine Screen-gestaltung ausgehe, wurden für die Applikation 3 Schrif-ten auf einem Tablet in ihrer Lesbarkeit getestet. Es wurden nur Light Schriftschnitte getestet, da diese wegen ihrer Pixeldichte besonders genau auf einem Display wirken.Ich habe mich für die Schrift Akkurat entschieden, da die-se sowohl in großer als auch kleiner Schriftgröße sehr gut erkennbar war.

70

5.1 Moodwelten

Um ein passendes Design für meine Applikation zu finden, habe ich mich mit verschiedene Richtungen des Interfacedesigns auseinan-der gesetzt. Die Auswahl war eine Mischung aus materi-alistischem Interfacedesign und einem Flat-Design. Dabei habe ich auch auf die ästhetische Wirkung für den Betrachter geachtet. Beim betrachten der verschiede

71

HELL UND MATERIALISTISCH

[Abb.40]

[Abb.41]

[Abb.42]

[Abb.43]

72

DUNKEL UND MATERIALISTISCH

[Abb.44]

[Abb.45]

[Abb.46]

[Abb.47]

73

FLATDESIGN

[Abb.48]

[Abb.49]

74

FLATDESIGN MIT GLOW

[Abb.50]

[Abb.51]

[Abb.52]

[Abb.53]

75

5.2 Designfindung

Hier habe ich getestet, ob das Design einen hellen oder dunkleren Look bekommen soll. Die Bedienelemente wurden in einer Materialis-tischen Opitk gestalte, um die Kombination zwischen Kontrast und Materialität zu untersuchen.

Um ein Passendes Design für meine Applikation zu finden, hab ich verschiedene Moodwel-ten auf einem möglichen Screen für eine Ambiente Light Einstellung getestet.

76

In weiteren Entwürfen habe ich mich mit verschiedenen Hintergründen beschäftigt. Bei diesen Entwürfen kam auch die Idee auf, die Dreidimensionali-tät mit einzubinden. Mit einem gebl-urten Hintergrund habe ich versucht, interaktive Objekte in den Vordergrund zu heben. Für die Oberflächendarstel-lung verschiedener Buttons habe ich verschieden Strukturen ausprobiert, um so eine materialistische Wirkung zu erzielen.

77

Am Ende der Designfindung wurden folgende Kriteri-en für das Design festgelegt:

• Es soll eine helle und freundliche Umgebung vorherrschen. Das Design soll auf den Betrachter sehr offen und nicht einengend wirken.

• Materialistische Oberflächen sollen mit einem flachen Design kombiniert werden.

• Es soll der Eindruck von Räumlichkeit entstehen, in dem grafische Oberflächen durch Schatten hervorgehoben werden.

78

79

Nachdem die Designrichtung festgelegt ist, wird nun versucht, die aufgestellten Designpunkte umzusetzten. Im folgenden wird der Designprozess für den Screen der Sitzeinstellung beschrieben.

6.0 Der Designentwicklungsprozess

80

Fazit:

• Hintergrund wirkt zu Grau

• Die Farbe Blau wirkt altmodisch und wird kaum erkannt

• Materialität verwirrt in der Schalteroptik (Höhen Tiefen)

• Perspektive des Sitzes wirkt seltsam

ENTWURF 1

Das Navigationskonzept gibt vor, eine Sitzgrafik auf dem Screen zu positio-nieren. Mit der Grafik soll es möglich sein, alle möglichen Sitzeinstellungen einzustellen. In diesem Entwurf habe ich versucht, einen Sitz als Liniengrafik darzustel-len. Durch Anfasserknöpfe kommt der Betrachter in ein Pop-Up, das ihm Einstellungen zur Verfügung stellt. In diesem Entwurf wird das Szenario anhand der Kopfstützeneinstellungen gezeigt.

81

Fazit:

• Sitz wirkt sehr unsauber

• Das Pop Up wirkt noch sehr starr

• Eventuell muss mehr mit Materialitäten gearbeitet werden

In diesem Entwurf habe ich versucht, den Screen heller und freundlicher wirken zu lassen. Die Sitzgrafik wurde in eine komplette Seitenansicht geän-dert. Als Farbkontrast wurde hier mit einem dunklem Türkis gearbeitet. Das Pop-Up hat sich ebenfalls verändert. Statt einer Liniendarstellungen der Kopfstützte, wurde nun eine Grafik eingesetzt. Zusätzlich sind die Positi-onseinstellungen mit im Pop-Up integriert worden. Allgemein wurde eine materialistische Tiefe in diesem Screen zurück genommen.

ENTWURF 2

82

Fazit:

• Sitz wirkt zu klobig

• Es sind zu wenig Einstellungsbereiche für den Sitz vorhanden

• Horizontale Ansicht mit Schatten funktioniert sehr gut

• Das Türkis sieht noch nicht nach Automobilbranche aus

Im dritten Entwurf der Sitzeinstellung ist das gesamte Raumgefühl noch einmal überarbeitet worden. Im Hintergrund kam eine Horizontlinie dazu und das Pop-Up-Element bekam einen Schatten, um so einen schwebenden Effekt zu erzielen. In diesem Entwurf habe ich als Hervorhebung einzelner Elemente versucht einen Chromerahmen zu imitieren. Die Sitzgrafik wurde nicht mehr als Liniengrafik dargestellt, sondern auf einzelne Grundformen reduziert.

ENTWURF 3

83

ENTWURF 4

In diesem Entwurf habe ich die Darstellung der Kreisslider verbessert. Das Bild wurde entfernd und stattdessen ein Text eingefügt. Nach längerem Tes-ten habe ich mich für einen Orangeton entschieden, der manche Funktionen highlighten soll.

Fazit:

• Die Sitzgrafik muss geändert werden

• Ein gekrümmter Slider für die Höhenverstellung verwirrt den Benutzer

84

ENTWURF 5

Die Sitzgrafik wurde in diesen Screens nochmal verändert. Statt einem Pop-Up hatte ich die Idee, direkt nach berüh-ren der Sitzfläche, einen Sli-der erscheinen zu lassen. Mit diesem Slider können dann die verschiedenen Stufen eingestellt werden. Wichtig war hierbei, das Feedback für den Benutzer gut zu positi-onieren. In diesen Screens habe ich verschiedene An-sätze ausprobiert den Slider darzustellen.

Fazit:

• Der Sitz wirkt unsauber

• Es passiert zu viel auf dem Screen, die Darstellung muss reduziert werden

85

In Entwurf 6 wurde die Sitzgrafik durch ein reales Rendering ersetzt. Die Idee von Entwurf 5 wurde auch hier weiter geführt. Auf die Sitzgrafik wurden Touchpoints positioniert, um auf mögliche Interaktionen aufmerksam zu machen.

ENTWURF 6

Fazit:

• Die Buttons sind noch nicht ganz ausgearbeitet

• Die Icons sollten eventuell bei der Schrift positioniert werden

• Das Feedback für den Benutzer sollte noch verbessert werden

[Abb.54]

86

In diesem Entwurf ist der Kreisslider entfallen. Das Design wurde sehr reduziert. Für Heizung- und Lüftungseinstellung wurden verschiedene Entwürfe für Buttons angefertigt. Das Feed-back für den Benutzer wurde direkt am Objekt platziert, das er gerade bewegt. Eine großge-schriebene Zahl zeigt an, auf welcher Einstellungsstufe sich der Benutzer gerade befindet.

ENTWURF 7

Fazit:

• Die Zahlen des Feedbacks sind noch zu klein

• Die Icons werden nicht benötigt, da sie sich aus dem Kontext Sitzeinstellung erschließen

87

Hier wurde die Darstellung des Feedbacks verbessert. Es erhielt eine fest platzierte Position. Die Zahlen sind größer geworden. Damit der Benutzer weiß, welche Interaktionen er durchfüh-ren kann, habe ich Hilfspfeile entworfen, die ihn darauf hinweisen.

ENTWURF 8

Fazit:

• Die Highlight Farbe wird zu oft eingesetzt

• Die Pfeile wirken zu massiv

• Die Perspektive der Pfeile stimmt nicht

88

Im letzten Entwurf wurden die Pfeile filigraner gestaltet. Die Highlightfarbe wird nur noch für das Sitzelement eingesetzt. Die Stufeneinstellung wurde in einem dezenten Grau gestaltet.

ENTWURF 9

89

90

91

7.0 Gestaltungsaufbau

In diesem Kapitel stelle ich den Gestaltungsaufbau meiner Arbeit vor. Anhand eines Sty-leguides zeige ich auf, welches Raster, Farben und Schriftwar-ten für die Screens verwendet wurden.

92

7.1 Screenaufbau

Zentrierte ÜberschriftHilfstextmax. 5 Zeilenlinksbündig

Hauptelement

Funktionselement 1 Funktionselement 2

2160 px

1440 px

448 px448 px

93

1440 px

7.2 Raster

100 px 16 px

16 px

70 px

48

94

7.3 Schriftgröße

Akkurat Light80 pt

Akkurat Light40 pt

Akkurat Light40 pt

Akkurat Light28 pt

95

R: 212G: 212B: 212

R: 212G: 212B: 212

R: 255G: 255B: 255

R: 210G: 123B: 59

R: 255G: 255B: 255

R: 138G: 138B: 141

R: 138G: 138B: 141

7.4 Farbe

96

97

8.0 Die Umsetzung

98

8.1 Die Sitzeinstellung

Um dem Benutzer zu zeigen, welche In-teraktionen er auf diesem Screen durch-führen kann, werden ihm ein Hilfstext sowie Bewegungspfeile angezeigt. Diese Hilfe erscheint nur, wenn der Anwen-der den Screen zum ersten Mal öffnet. Die Pfeile weisen darauf hin, dass die Sitzgrafik um 360° gedreht und einzelne Teile des Sitzes bewegt werden können. Das Bewegen der Sitzelemente wird auch nochmal durch die transparenten Grafiken deutlich. Berührt der Benutzer den Screen faden die Hilfselemente aus.

99

Möchte der Benutzer ein Sitzelement verstellen, kann er es mit dem Finger berühren und daraufhin nach links oder rechts swipen. Auf welcher Stufe der Einstellung er sich gerade befindet, wird ihm durch Zahlen angezeigt. Diese Zah-len stehen nur auf dem Screen, wenn gerade ein Sitzteil bewegt wird. Zusätz-lich färbt sich der Bereich des Sitzes Orange. So weiß der Anwender genau welches Teil er gerade bewegt. Sobald er die Einstellungen an der Grafik vor-nimmt, wird auch zeitgleich der Sitz im Auto bewegt.

Zusätzlich kann der Benutzer die Hei-zung und Lüftung des Sitzes einstellen. Durch betätigen der Buttons wird die Heizungstemperatur verändert oder eine Lüftungsstufe eingeschaltet. Damit der Benutzer weiß, welche Lüftungs-einstellung schwach und welche stark ist, wird ihm das durch Wörter deutlich gemacht.

100

101

102

103

104

8.2 Das Ambiente Light

Der Ambiente Light Screen zeigt sich beim ersten Öffnen auch mit einem Hilfstext, der erklärt was in dieser Ein-stellung gemacht werden kann. Der Text faded aus, sobald die Screenoberfläche berührt wird. Momentan ist auf diesem Screen das Ambiente Light aus, was da-ran zu erkennen ist, dass im Hintergrund keine Farbe aufleuchtet.

105

Sobald ein Farbsegment vom Anwender ausgeählt wurde, öffnen sich Fächer-archtig verschiedene Farbabstufungen der Farbe. Hier hat der Benutzer noch-mal die Möglichkeit, die ausgewählte Farbewahl zu verfeinern. Um zu sehen welche Farbe gerade eingestellt ist, hebt sich das Farbsegment aus dem Farbfä-cher leicht hervor. Gleichzeitig wird links der Name der Farbe eingeblendet.Durch berühren des Hintergrunds, schließt sich der Farbfächer wieder. Im Hintergrund leuchtet die Eingestellt Farbe leicht auf.

Die Farbitensität kann der Anwender ahand der Buttons einstellen. Sobald er die Prozentzahl verändert, verändert sicher auch die Farbintesiät im Hinter-grund.Die Farbeinstellung wird dem Anwender in Echtzeit im Auto angezeigt.

112

Einleitung

Abb. 1: Konzeptauto der Firma Buikunter: http://www.carstyling.ru/de/car/1983_buick_questor/images/1658/http://www.carstyling.ru/de/car/1983_buick_questor/images/30169/http://www.carstyling.ru/de/car/1983_buick_questor/images/30168/(aufgerufen: 01.08.2015)

Recherche

Abb. 2: Omnitouchunter: httpwww.androidpit.comNew-Technology-Allows-You-to-Dial-Numbers-On-Your-Arm(aufgerufen: 04.05.2015)

Abb. 3: Cricret Wirstbandunter: http://www.gizmag.com/cicret-bracelet/35109/(aufgerufen: 04.05.2015)

Abb. 4: Cricret Wirstband Prototypunter: https://www.youtube.com/watch?v=tuLwPZrOH5Q(aufgerufen: 04.05.2015)

Abb. 5: Tangible Interface Displayunter: http://tillnagel.com/2010/11/venice-unfolding/(aufgerufen: 20.03.2015)

Abb. 6: Tangible Interface Projektionunter: http://www.pattenstudio.com/thumbles/(aufgerufen: 20.03.2015)

Abb. 7: Das Combine Glassunter: http://big.cs.bris.ac.uk/projects/through-the-combining-glass(aufgerufen: 20.03.2015)

Abb. 8: Hololensunter: http://www.hellostudy.in/2015/02/microsofts-hololens-new-way-to-explore.html(aufgerufen: 01.04.2015)

Abb. 9: Ultrasonicsunter: http://www.stuff.co.nz/technology/gadgets/63794251/Ultrasonics-let-you-touch-virtu-al-reality(aufgerufen: 01.04.2015)

Abbildungsverzeichnis

113

Zielgruppe

Abb. 10: http://weheartit.com/entry/191646536/via/lostinisland?page=2Abb. 11: http://www.1001rzeczy.com/blog/2015/1/7/5rg1y5cbwbuu1biqq9617d4wxdpvjqAbb. 12: https://narrow93ucm.wordpress.com/2015/03/02/diy-build-a-playhouse-diy-down-load-wood-projects-old-fence-boards/Abb. 13: http://www.wohn-blogger.de/2012/09/03/bunt/(aufgerufen: 10.05.2015)

Abb. 14: http://s610.photobucket.com/user/gtx_viper/media/Audi%20R8%20Blueprints/Top-View_AudiR8.jpg.html (Diese Grafik wurde zu Zwecken dieser Arbeit verändert)(aufgerufen: 01.07.2015)

Abb. 15: https://www.pinterest.com/pin/484840716106727895/Abb. 16: https://beckwithinteriors.wordpress.com/tag/guest-blog/Abb. 17: http://www.rollingstone.com/movies/lists/the-top-20-sci-fi-films-of-the-21st-cen-tury-20140515/sunshine-2007-19691231Abb. 18: https://www.flickr.com/photos/westinhotels/8442027074/Abb. 19: http://www.089coaching.de/locationansicht.html?tx_bsdcoaching_locations-%5Blocations%5D=1&tx_bsdcoaching_locations%5Baction%5D=show&tx_bsdcoaching_locations%5Bcontroller%5D=Locations&cHash=e7f16acecb6f2da80401f9a59e88c3fd(aufgerufen: 12.05.2015)

Abb. 20: http://iamgalla.com/2014/04/petrichor/Abb. 21: http://theimageconsultingcompany.blogspot.de/2013_12_01_archive.htmlAbb. 22: http://happymodern.ru/svetilniki-v-stile-loft-39-foto-fantaziya-bez-granic/Abb. 23: http://www.tripadvisor.de/Restaurant_Review-g294217-d2198231-Reviews-Ozo-ne_Bar-Hong_Kong.html(aufgerufen: 13.05.2015)

Abb. 24: http://fashion.ifeng.com/a/20150128/40078412_0.shtmlAbb. 25: http://design-ideen.com/wp-content/uploads/2012/05/B%C3%BCcherregale-Ide-en-Treppenhausm%C3%B6glichkeiten.jpgAbb. 26: http://i.i.cbsi.com/cnwk.1d/i/tim/2012/06/08/ClamCase_ClamBook.jpg Abb. 27: http://landpalais.com/wp-content/uploads/images/Angebote2012/metabo-lic-living-angebot-840x381.jpg(aufgerufen: 15.06.2015)

Abb. 28: Das Sinus-Milieuunter: http://www.sekten-sachsen.de/sinus-grafik.jpg(aufgerufen: 30.06.2015)

114

Konzepte

Abb. 29: https://30in39.wordpress.com/tag/padres/Abb. 30: http://host2post.com/wallpapers/mercedes-benz-class-wallpapers/3Abb. 31: http://dedeporsche.com/tag/panamera-s-e-hybrid/Abb. 32: http://www.mykarre.com/gallery/view/id_5739/title_AUdi-A8-Tuning-Airride-system/Abb. 33: http://prensa.audi.es/2007/04/23/s5/audi-s5innenraum/Abb. 34: http://crazywheels.spb.ru/dump/96.htmlAbb. 35: http://img.xcitefun.net/users/2009/05/72595,xcitefun-future-police-cars-carbon-mo-tors-e7-15.jpg(Die Bilder wurden zum Zweck dieser Arbeit verändert. Abgerufen: 15.07.2015)

Entwurfsphase

Abb. 36: http://i973.photobucket.com/albums/ae217/downloadCHIPeu/skype-ios4-rm-eng-2.jpgAbb. 37: http://images.thecarconnection.com/hug/next-generation-bmw-idrive-interface-2015-consu-mer-electronics-show_100495904_h.jpgAbb. 38: http://cdn.gottabemobile.com/wp-content/uploads/2014/07/iOS-8-vs-iOS-7-Looks.jpg(abgerufen: 20.08.2015)

Abb. 40: http://www.lewlaw.com/wp-content/uploads/KNOBS-big-799x799.jpgAbb. 41: http://indulgy.com/post/MqSezTwRO1/white-minimal-awesomeAbb. 42: https://story.kakao.com/ch/dpangpang/EJ9kO2iiqW9Abb. 43: http://www.dezeen.com/2014/09/30/soho-fuxing-plaza-shopping-centre-shanghai-chi-na-aim-architecture/(abgerufen: 20.08.2015)

Abb. 44: https://www.pinterest.com/pin/523895369123066548/Abb. 45: http://huaban.com/boards/14052571/Abb. 46: https://www.pinterest.com/pin/307159637060344248/Abb. 47: https://www.pinterest.com/pin/187743878187129447/(abgerufen: 23.08.2015)

Abb. 48: http://www.cossa.ru/articles/152/103830/Abb. 49: https://www.pinterest.com/pin/55098795417093670/(abgerufen: 21.08.2015)

Abb. 50: http://graphicdesign.stackexchange.com/questions/16872/what-is-the-gui-style-called-that-is-commonly-used-in-sci-fi-mediaAbb. 51: https://www.pinterest.com/pin/469078117413104422/Abb. 52: http://kustomcodes.com/Abb. 53: http://www.autopista.es/galerias/bmw-i3-contacto-electrico-urbano-40630#imagegal-lery-40630-51e53f85f3615.jpg(abgerufen(21.08.2015)

Umsetzung

Abb. 54: Sitzeinstellungsgrafikunter: http://www.ultimogiro.com/sedile-ecologico-comfortthin/(Die Grafik wurde zum Zweck meiner Arbeit verändert. Abgerufen: 05.08.2015)

115

116

117

Ich erkläre hiermit, dass ich die vorliegende Arbeit selbständig und ohne Benutzunganderer als der angegebenen Hilfsmittel angefertigt habe; die aus fremden Quellendirekt oder indirekt übernommenen Gedanken sind als solche kenntlich gemacht.Die Arbeit wurde nach meiner besten Kenntnis bisher in gleicher oder ähnlicher Formkeiner anderen Prüfungsbehörde vorgelegt und auch noch nicht veröffentlicht.

Stuttgart, den

Erklärung