Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam

In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre

Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam mehr erfahren

BMW i8 Head-Up Display

Interface Design Konzept für den neuen BMW i8 Plug-In-Hybrid Sportwagen.

Zu Besuch bei BMW

bmw-besuch.pngbmw-besuch.png

Schon zu Beginn des Kurses haben wir uns für die Marke BMW entschieden. Um uns ein genaues Bild des aktuellen technischen Stands der Head-Up Displays von BMW machen zu können, haben wir in der Hauptniederlassung am Kaiserdamm in Berlin einen Termin gemacht um uns das Head-Up Display vorführen zu lassen. Eine Probefahrt konnten wir leider nicht vornehmen, trotzdem konnten wir einen sehr guten Eindruck von Größe, Position und Funktionsumfang des HUD gewinnen.

Prototypischer Aufbau

2014-11-21 17.38.19.jpg2014-11-21 17.38.19.jpg

Um unsere Entwürfe unter möglichst realistischen Umständen zu testen, uns aber leider kein eigenes Auto zur Verfügung stand, haben wir mit Hilfe einer Glasscheibe und einem iPad mini einen Prototypen gebaut. So konnten wir unsere Entwürfe live auf das Ipad mini spiegeln um zu überprüfen ob Farben, Kontraste, Schrift- und Symbolgrößen auch vor bewegtem Hintergrund funktionieren.

Leider tritt bei der Verwendung einer normalen Glasscheibe eine Doppelung des gespiegelten Bildes auf, was die Beurteilung der Funktionalität negativ beeinflusst hat. Wir haben daraufhin eine spezielle Folie für Head-Up Displays bestellt. Leider stellte sich aber heraus, dass die Folie zu klein und zu dunkel war.

2014-11-21 17.37.58-2.jpg2014-11-21 17.37.58-2.jpg

Der BMW i8

bmw_i8_concept-wide.jpgbmw_i8_concept-wide.jpg

Der nachhaltige Sportwagen

Der BMW i8 Plug-In-Hybrid ist der erste Sportwagen mit den Verbrauchs- und Emissionswerten eines Kleinwagens. Seine Stärke liegt unter anderem in der perfekten Synchronisation von Elektro- und Benzinmotor. Wir haben den Hybrid-Antrieb des BMW i8 als Besonderheit im Head-Up Display herausgearbeitet.

Der Antrieb des BMW i8

hybrid antrieb.pnghybrid antrieb.png

Das Zusammenspiel von Elektro- und Benzinmotor

Das Fahrzeug wird durch zwei Motoren angetrieben. Das perfekt abgestimmte Zusammenspiel des Elektro- und des leistungsstarken Benzinmotors vereint die Vorteile beider Welten. Bei niedrigen Geschwindigkeiten wird der BMW i8 ausschließlich vom Elektromotor angetrieben. Somit erfolgt die Fahrt rein elektrisch. Sobald die im jeweiligen Modus vorgegebene Geschwindigkeit überschritten wird, schaltet sich der Verbrennungsmotor hinzu und liefert zusätzliche Kraft. Durch die Energierückgewinnung in Schub- und Bremsphasen wird die Batterie des Elektromotors während der Fahrt geladen.

Das Head-Up Display

BMW i8 Head-Up Display.pngBMW i8 Head-Up Display.png

Formsprache

Der BMW i8 zeichnet sich durch dynamisch fließende Formen aus, welche ineinander eingepasst sind. Diese Formsprache wurde in den Entwurf aufgenommen.

Farbwahl

Weiß ist durch die intensive Leuchtkraft am besten zu erkennen und dient uns daher als erste Primärfarbe.

Als zweite Primärfarbe kommt kräftiges und helles Blau zum Einsatz, angelehnt an die Farbgebung des BMW i8 Interieur und Exterieur.

Als Warnfarbe kommt Orange zum Einsatz. Durch ihre ebenfalls starke Leuchtkraft werden Elemente mit dieser Farbe nicht so schnell übersehen. Diese Warnfarbe setzen wir sehr gewählt ein, um ganz gezielt auf das jeweils in diesem Moment wichtige Element hinzuweisen, ohne den Fahrer zu überfordern.

Schriftwahl

Wir haben uns für die Verwendung der [Interstate Mono Bold](http://www.myfonts.com/fonts/fontbureau/interstate-mono/bold/ „myfonts - Interstate Mono Bold“) entschieden, da sie dem im Dashboard verwendeten Font sehr nahe kommt. Leider können wir nicht mit absoluter Sicherheit sagen, welchen Font BMW im Dashboard des i8 verwendet.

Die Interstate wurde in den 70er Jahren von der United States Federal Highway Administration entwickelt. Der Schriftentwerfer Tobias Frere-Jones digitalisierte sie erstmals 1993 und baute die Familie in den folgenden Jahren für das Gestalten von Drucksachen aus. Zuletzt erweiterten Frere-Jones und Cyrus Highsmith die Familie auf 40 Schnitte, einschließlich Italics, Condensed und Compressed. Im Jahr 2000 kam eine zusammen mit Christian Schwartz entwickelte Monospaced-Version in 4 Schnitten hinzu.

Screenshot 2015-02-25 15.54.32.pngScreenshot 2015-02-25 15.54.32.png

Skala Hybrid-Anzeige

HUD Aufbau 01.jpgHUD Aufbau 01.jpg

Die Skala der Hybrid-Anzeige liefert dem Fahrer die Information, in welchem Geschwindigkeitsbereich er rein elektrisch fahren kann und ab wann der Benzinmotor hinzugeschaltet wird.

Skala Geschwindigkeit

HUD Aufbau 02.jpgHUD Aufbau 02.jpg

Anhand der Geschwindigkeitsskala kann der Geschwindigkeitsbereich, in welchem gefahren werden kann, abgelesen werden.

Aktuelle Geschwindigkeit

HUD Aufbau 03.jpgHUD Aufbau 03.jpg

Die Anzeige der aktuellen Geschwindigkeit überlagert die Skala der Geschwindigkeit. Solange der Antrieb rein elektrisch erfolgt, wird dieses Element in der blauen Farbe der Elektromotor-Anzeige gehalten. Sobald die Leistung des Elektromotors bei höheren Geschwindigkeiten nicht ausreicht, wird das Hinzuschalten des Benzinmotors durch das darauf aufbauende weiße Anzeigenelement komplettiert.

Geschwindigkeitsbegrenzung

HUD Aufbau 04.jpgHUD Aufbau 04.jpg

Die aktuell herrschende Geschwindigkeitsbegrenzung wird in der Warnfarbe Orange angezeigt. Mit zunehmender Überschreitung wird das grafische Element um die Geschwindigkeitsanzeige herum verlängert und die Differenz zwischen dem Richtwert und der gefahrenen Geschwindigkeit in Echtzeit genau anzuzeigen.

Tankfüllung und Batterie-Ladestand

HUD Aufbau 05.jpgHUD Aufbau 05.jpg

Mit Hilfe der getrennten Anzeige von Batterie-Ladestand und Tankfüllung hat der Fahrer immer im Blick, wie voll sein Tank und seine Batterie sind. Wegen der, zum Tank vergleichsweise geringen Reichweite des Elektromotors, haben wir uns für eine Aufteilung in zwei Elemente mit unterschiedlichen Skalen entschieden. Dadurch lässt sich der Batterie-Ladestand trotz deutlich kleinerem Wert gut ablesen.

Reichweite

HUD Aufbau 06.jpgHUD Aufbau 06.jpg

Die Reichweiten-Anzeige ermöglicht dem Fahrer das schnelle Erfassen der noch rein elektrisch fahrbaren Strecke. Separat davon kann er sehen, welche Entfernung er ohne eine geladene Batterie fahren kann.

Motorenaktivität

HUD Aufbau 07.jpgHUD Aufbau 07.jpg

Durch die verbindenden Elemente zwischen der Ladestands-Anzeige und der Geschwindigkeitsanzeige wird der Fluss der Energie in die Geschwindigkeit gezeigt. Der Fahrer erkennt sofort, welcher Motor zur Zeit aktiv ist. Die Fluss-Bewegung wird durch eine dezente Animation unterstützt.

Fahrmodi

HUD Aufbau 08.jpgHUD Aufbau 08.jpg

Beim Umschalten von einem Fahrmodus in den anderen wird durch kurzes einblenden der Modus Bezeichnung der Fahrer darüber informiert, welchen Modus er verlässt und in welchen er sich begibt.

Navigationshinweise

HUD Aufbau 09.jpgHUD Aufbau 09.jpg

Die Navigationshinweise sind reduziert und prägnant gehalten. Sie können im iDrive Menü für das Head-Up Display aus- oder eingeschaltet werden.

Warnmeldungen

HUD Aufbau 10.jpgHUD Aufbau 10.jpg

In gefährlichen Situationen überlagern Warnmeldungen die Navigationshinweise. Die Warnmeldungen sind in der Warnfarbe Orange gehalten und bedienen sich der gängigen Icons.

Branding in der Aufbauanimation

Screenshot 2015-02-25 16.05.39.pngScreenshot 2015-02-25 16.05.39.png

Um dem Branding der BMW i Reihe treu zu bleiben, haben wir das BMW i Logo in die Aufbauanimation des Headup Displays integriert – zu sehen in unserem Video-Prototypen weiter unten.

Usecases

Mit folgendem Video-Prototypen möchten wir die Funktionsweise des HUDs anhand von zwei Usecases – einer Stadtfahrt mit Turn-by-Turn Navigation sowie einer Autobahnfahrt – verdeutlichen.

Team

Konzept: Patricia Dobrindt, Simon Martin, Jakob Flemming

Informationdesign & Visual Design: 

Patricia Dobrindt – patriciadobrindt.com

Animation & Video: Simon Martin

Betreut durch: Frank Rausch, Timm Kekeritz

Fachgruppe

Interfacedesign

Art des Projekts

Studienarbeit im zweiten Studienabschnitt

Betreuung

foto: Frank Rausch foto: Timm Kekeritz

Entstehungszeitraum

Wintersemester 2014 / 2015

Keywords